Как написать кроссбраузерное расширение

В один прекрасный день ко мне пришли менеджеры и сказали, что нужно написать браузерное расширение для внутреннего джобборда. Оно должно взаимодействовать с сайтами avito и hh, чтобы добавлять кандидатов в HR-систему, не скачивая и не вбивая вручную контакты из резюме на сайте.

Как человек, который ни разу не писал подобных вещей, расскажу о своем пути, о том с какими проблемами столкнулся и к каким пришел решениям.

https://habr.com/ru/company/sbermarket/blog/685866/

👉 @frontend_1

Преобразования типов JavaScript с пояснениями

Javascript является слабо типизированным языком, что означает, что различные типы данных для переменных и объектов не задаются явно, а делаются неявно движком Javascript во время компиляции. Если оставить эту важную задачу на усмотрение движка Javascript, то иногда в наших программах возникают проблемы, о которых мы даже не подозреваем. Вот почему важно знать, как работает преобразование типов в Javascript, которое является основным источником логических ошибок.

https://blog.openreplay.com/javascript-type-conversions-explained/

👉 @frontend_1

An ultimate guide to the Vue 3 Composition API

https://blog.openreplay.com/an-ultimate-guide-to-the-vue-3-composition-api

👉 @frontend_1

По домам: фронтенд – Андрей Ваганов

Шоу от сообщества инженеров Авито. В нашей команде работают совершенно разные люди: у каждого свой опыт, своё видение разработки и свои любимые фреймворки. Но нас объединяют любовь к фронтенду и работе в Авито.

00:00 Интро
00:46 Как попал в IT? Первая работа в IT?
01:50 Кем работаешь и чем занимаешься в Авито?
02:45 Какие технологии/библиотеки тебе нравятся?
04:25 Что хочешь изучить в 2022 году? / Что стоит изучить в 2022 году?
05:08 Расскажи, как ты учился?
06:09 Назови три лучших книги/ресурса/статьи.
07:07 Как писать стили, какой инструмент выбрать?
08:10 Опиши стэк для идеального приложения?
08:58 Задача мечты? / Проект мечты?
09:34 Почему ты работаешь в Авито?
10:37 Какие есть pet-проекты?
10:57 Последние 3 фичи, которые ты втащил?
11:51 Если не фронтенд, то ...

https://youtu.be/GKLmY8DerGc

👉 @frontend_1

API JavaScript, о которых вы не знаете

В этой статье Хуан Диего рассказывает о наименее известных, но чрезвычайно полезных API, таких как API видимости страницы, API совместного доступа к веб-страницам, API канала вещания и API интернационализации. Вместе мы узнаем, что они собой представляют, где их следует использовать и как их применять.

https://www.smashingmagazine.com/2022/09/javascript-api-guide/

👉 @frontend_1

Technical Writing for Developers

https://css-tricks.com/technical-writing-for-developers/

👉 @frontend_1

31 марта МТС собирает крупнейшую в России IT-конференцию TRUE TECH DAY. Почему сейчас? Потому что давно пора показать, что скрывают «под капотом» топовые продукты продвинутых технологичных компаний. Каждый участник конференции протестит на себе true-технологии и испытает новые впечатления, меняющие мир пользователей.

Что будет:
→ 7 треков: AI, Main Track, Big Data, Architecture, Cybersecurity, Leading Change, Product Manager.
→ 50+ мировых спикеров с топовыми темами без воды и лирики
→ 10 часов нетворкинга и обмена опытом в Москве, Дубае, Тбилиси и Астане
→ много интерактивных и цифровых зон
→ а после — грандиозная вечеринка со звездным лайн-апом

Все спикеры и темы уже на сайте.
Регистрируйся на True Tech Day по ссылке.
Участие бесплатно

TypeScript

Подробное Руководство
Книга и документация в одном (2022)

👉 @frontend_1

Паттерны проектирования JavaScript

https://stackblitz.com/@lydiahallie/collections/javascript-patterns

👉 @frontend_1

Webpack + CSS Modules + TS = Love

Я считаю, что CSS Модули — это монументальный проект. С его помощью можно решить одну из худших проблем CSS — коллизию имен классов. Давайте рассмотрим простой пример, чтобы было понятно, о чем идет речь.

Представим, что мы разрабатываем компонент Button. Использовать "чистый" CSS опасно, потому что есть риск, что кто-то ещё в вашем проекте (или ещё хуже — в подключенной библиотеке) использует то же имя класса:

/* Button.css */

.button {
color: #f00;
padding: 10px;
font-size: 18px;
}

/* node_modules/some_lib/styles.css */

.button {
color: #0f0;
}

// Button.tsx

import { FC } from "react";
import "./Button.module.css";
import "some_lib/styles.css";

export const Button: FC = (props) => {
// Какого цвета будет кнопка остаётся только гадать
return <button {...props} className="button" />;
};


https://habr.com/ru/post/688844/

👉 @frontend_1

Визуализация алгоритмов сортировки

Эта статья посвящена созданию интерактивного приложения для визуализации алгоритмов сортировки. Надеюсь, многим из вас тема покажется интересной. Уверен, что вы успешно пройдёте через все этапы разработки и пополните свою копилку пет-проектов.

👉 @frontend_1

React.js: Документальный фильм

React - это одна из самых популярных библиотек, используемых сегодня. Учитывая, что она была создана в таком гиганте, как Facebook, можно предположить, что она всегда была обречена на успех.

А что если мы скажем вам, что первое знакомство React с публичной сферой было совсем не гламурным? Документальный фильм React.js: The Documentary расскажет вам полную историю ранних дней React, сосредоточившись на преданной группе разработчиков, которые помогли вывести его на мировую арену. Эту историю рассказывает звездный состав разработчиков, таких как Том Оккино, Кристофер Чедо, Пит Хант, Себастьян Маркбоге, Дэн Абрамов и многие другие.

Загляните на сайт cult.honeypot.io, где собраны нерассказанные истории разработчиков, связанные с открытым исходным кодом, карьерой и другими интересными вещами, которыми занимаются разработчики.

Honeypot - это платформа для трудоустройства разработчиков, цель которой - обеспечить разработчиков отличной работой. Хотите увидеть, что мы собой представляем? Посетите сайт honeypot.io, чтобы найти работу по душе.

источник

✍️ @React_lib

Интерактивный учебник по использованию дженериков в TypeScript

https://github.com/total-typescript/typescript-generics-workshop

👉 @frontend_1

Рассказываем о пользе и вреде FullStack-фреймворков на примере Meteor.js

Коротко расскажу о том, как я вообще пришел к Node.js.

В начале пути, около 8 лет назад, я писал на C++, Ruby, немного на Python и еще нескольких языках. Конечно же, был в моей жизни и frontend. В JavaScript я заметил интересную особенность, которую до этого видел только у Qt — можно не опрашивать что-либо в цикле и не ждать выполнения системного вызова, а подписаться на событие и, когда оно произойдет, выполнить некоторые действия.

Чуть позже я услышу термин «реактивное программирование» и, спустя еще некоторое время, свяжу это с миром JS — мне покажется, что за этим будущее. Потом я узнаю о Node.js, перестану плеваться от асинхронных операций (в этом изрядно помогут промисы и async/await). И вот я здесь.

https://habr.com/ru/company/ncloudtech/blog/690464/

👉 @frontend_1

Открыта регистрация на серию митапов для начинающих разработчиков Intern Meetup Week в Яндексе с 17 по 20 апреля🎉

18 апреля состоится митап для направления Frontend. Будет доступен офлайн и онлайн формат.

Регистрация по ссылке: https://clck.ru/33qVyG

При отборе на митап у вас есть шанс получить приглашение на пробное собеседование на стажировку в Яндекс 🔥

В программе лекции экспертов о технологиях, общение с руководителями команд и рекрутерами, нетворкинг и подарки.

📆Когда: 18 апреля 18:00 - 21:30, сбор гостей с 17:30
🌐Где: офис Яндекса, ул. Льва Толстого, 16, м.Парк Культуры и трансляция онлайн

Все подробности и регистрация по ссылке: https://clck.ru/33qVyG

А чтобы быть в курсе всех новостей Young&&Yandex, подписывайтесь на чат-бот.