Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨

Впервые я познакомился с React в 2015 году и вот уже использую его можно сказать повседневно 7 лет. Бесчисленное количество компонентов было написано за это время, React из подающей надежды модной технологии вырос в серьезную библиотеку и по сути стал стандартом для написания веб приложений в 2022 году.

Мы полюбили эту библиотеку за простое и лаконичное, но в тоже время очень мощное API, производительность, крутейшее коммюнити, наличия множество npm пакетов и просто за возможность решать прикладные задачи быстро и легко.

Скриншот официального сайта https://reactjs.org

Мы перешли на шестую версии React-router. Это помогло нам решить несколько проблем, например, определение маршрутов в Switch рендерит точный маршрут, а не первое совпадение, а размер бандла уменьшился в 2 раза.  

В статье расскажем про опыт миграции и подготовительный этап, трудности, возникшие после миграции и ошибки, информации о которых нет в официальной документации, и пути их обхода. Также будет альтернативный способ перехода с помощью официального пакета.

Это обновленный до версии 2020-21 мой список 2003, 2005, 2006, 2007, 2009, 2011 и 2014 годов, который в настоящее время включает все остальные мои списки. Я занимаюсь этим более 17 лет. Вау. Думаю, стоит тратить на это больше времени.

Привет, друзья!

Представляю вашему вниманию перевод 2 статей:

• Use TypeScript Mapped Types Like a Pro о связанных или сопоставленных типах (mapped types) TypeScript;
• 10 TypeScript features you might not be using yet or didn't understand о полезных возможностях современного TS.

Все мы слышали ни раз: JavaScript однопоточный язык программирования. Но, что это означает? Из вышесказанного следует, что интерпретатор языка идет по коду и выполняет команду за командой пока не достигнет конца. Но тогда это означало бы, что если требуется обратиться к серверу, то приходилось бы ждать ответа и только затем переходить к следующей операции, а пользователь ничего бы не смог сделать, пока идет обработка. К счастью, это не так, но как же происходят асинхронные действия и каким образом JavaScript может обрабатывать несколько операция одновременно?

Привет! Меня зовут Алексей Ивасюта, я фронтенд-разработчик в Авито в кластере Seller Experience. В этой статье я расскажу, как правильно рассчитать длину текста в Java Script. Эта статья будет одинаково полезна как начинающим разработчикам, так и весьма опытным. Благодаря ей вы поймете устройство Unicode и особенности его работы в JS.

https://fakt309.github.io/thisisthewall/

В языках программирования строки сравниваются очень просто, если строка отличается хотя бы на один символ, то возвращает false.

Но вот что если мы хотим не просто получать дискретное значение (true / false), а дифференцированное, например в процентах. Ведь согласитесь строки test и testing гораздо ближе к друг другу, чем test и abcd. Для данной проблемы существует множество решений, мы поговорим о самый популярных алгоритмах (также об их модификациях):

Расстояние Хэмминга

Расстояние Левенштейна

Сходство Джаро — Винклера

Коэффициент Сёренсена

Все мы знаем про, или слышали про практики и паттерны проектирования SOLID, GRASP, MVC, MV** и даже применяем их с переменным успехом, стараясь нащупать эффективный подход к построению приложений. Но это лишь приводит к разнообразию реализаций наших приложений и частей функционала. Уже долгое время пытаюсь понять по каким правилам должно строиться фронтенд приложение чтобы оно удовлетворяло следующим критериям:

- легкое расширение функционала приложения;
- безболезненное внесение изменений в существующий функционал;
- унифицированная структура приложения;
- быстрый onboarding новых разработчиков на проект;
- понятный и прозрачный код;
- всегда понятно где в структуре файлов расположить ту или иную функциональность. 

Какие у нас есть варианты?

Привет, друзья!

В данной шпаргалке представлены все основные интерфейсы и методы по работе с медиа в браузере, описываемые в следующих спецификациях:

• Media Capture and Streams
• Screen Capture
• Media Capture from DOM Elements
• MediaStream Image Capture
• MediaStream Recording
• Web Speech API

Шпаргалка представлена в форме вопрос-ответ.

• Репозиторий с кодом всех сниппетов
• Песочница

Туториалы по теме:

• JavaScript: разрабатываем приложение для записи звука
• JavaScript: разрабатываем приложение для записи экрана
• JavaScript: захват медиапотока из DOM элементов
• JavaScript: делаем селфи с помощью браузера
• JavaScript: разрабатываем чат с помощью Socket.io, Express и React с акцентом на работе с медиа

Если вам это интересно, прошу под кат.

Всем привет! Меня зовут Евгений, я работаю frontend-разработчиком в платформенной команде. Моя задача — помогать другим frontend-разработчикам выполнять их задачи эффективнее. Мы в Delivery Club больше года назад внедрили подход с микрофронтендами, о чём писали здесь. Вы можете найти и много других статей с описанием этого подхода.

После выхода стабильной версии Webpack 5 мы решили использовать плагин Module Federation в качестве основного способа загрузки микрофронтендов. В этой статье расскажу, с какой проблемой столкнулся при загрузке динамических модулей и как её решил. Описывать будут на примере плагина Module Federation во всех деталях. Если вы слышите про этот инструмент впервые, то советую предварительно ознакомиться.

Использование Typescript при создании React компонента «Простой фабрики»

Создадим типизированный компонент-фабрику правильно. Так, чтобы он принимал только нужные параметры и ругался на некорректные. Данный подход применим и в других ситуацией, но сегодня рассмотрим компонент, который отрисует фигуру, которую мы захотим.

Некоторые замечания о времени

• UTC: время на нулевом меридиане называется Всемирное координированное время, Universal Coordinated Time. Несовпадение акронима было вызвано необходимостью универсальности его для всех языков.
• GMT: ранее вместо UTC использовалось среднее время по Гринвичу (Greenwich Mean Time, GMT), так как нулевой меридиан был выбран так, чтобы проходить через Гринвичскую королевскую обсерваторию.
• Прочие часовые пояса могут быть записаны как смещение от UTC. Например, Австралийское восточное стандартное время (EST) записывается как UTC+1000, то есть время 10:00 по UTC есть 20:00 по EST того же дня.

• Проблема: Компьютеры, как и люди, говорят на разных языках. Одни записывают данные “слева направо” другие “справа налево”. При этом каждое устройство отлично считывает собственные данные — проблемы начинаются, когда один компьютер сохраняет данные, а другой пытается эти данные считать.
• Решение: Принять некий общий формат (например, весь сетевой трафик передается в едином формате). Или всегда добавлять заголовок, описывающий формат хранения данных. Если считанный заголовок имеет обратный порядок, значит данные сохранены в другом формате и должны быть переконвертированы.

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

Вот лучшие проекты для разработчика, которые укрепят вашу уверенность и помогут стать лучшим фронтедером, независимо от того, новичок вы или недавно вернулись к программированию. Я также отметил технологии, которые можно использовать в каждом проекте, но не стесняйтесь использовать любой из ваших любимых языков программирования или фреймворков.

while (true) {
    const data = yield getNextChunk(); // вызов асинхронной логики
    const processed = processData(data);
    try {
        yield sendProcessedData(processed);
        showOkResult();
    } catch (err) {
        showError();
    }
}