Подробное введение в алгоритм React reconciliation, особенности условного рендеринга, атрибут «key» и причины, по которым вы не должны объявлять компоненты внутри других компонентов.

Читать & Смотреть

🔎 Autocomplete — JavaScript-библиотека от Algolia, позволяющая быстро создавать фичи автозаполнения

Данные, заполняющие результаты автозаполнения, называются источниками. Вы можете использовать в своих источниках все, что захотите: статический набор поисковых запросов, результаты поиска из внешнего источника (например, индекс Algolia), недавние поисковые запросы и многое другое.

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

#perfomance #tip by Shripal Soni

🤖 Нейронки кодят за вас: 28 AI-сервисов в помощь разработчику

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

🔗 Основной сайт
🔗 Зеркало

Помимо основных докладов об Angular на Google I/O 2023 🔽

▫️ What’s new in Angular
▫️ Rethinking Reactivity with Signals
▫️ Getting started with Angular Signals

можно увидеть еще много интересного. Узнайте подробнее о том, как Angular и Flutter Web могут работать вместе, Firebase теперь может запускать Angular Universal с Firebase deploy и многое другое.

Типовые задачи на собеседованиях в разделе JavaScript live-coding: подходы к решению задач, советы по выполнению и важность коммуникации во время собеседования.

Читать

Множество способов выбрать n-й символ из строки в JavaScript.

Есть что добавить?

#javascript #tip by Christian Heilmann

Советы по оптимизации сборки веб-приложений

Автор статьи разделяет полный цикл сборки на четыре основных составляющих, о которых и пойдет речь под катом:

1️⃣ Установка зависимостей (время исполнения команды npm ci)
2️⃣ Статический анализ кода (время линтинга JS и CSS)
3️⃣ Запуск и успешное прохождение юнит-тестов (с помощью инструмента Jest)
4️⃣ Непосредственно этап сборки (на примере webpack)

🎙️Подкаст «Веб-стандарты»: Андрей Мелихов, Алексей Симоненко, Никита Дубко про Chrome DevTools, Firefox 114, Apple Web Apps, Safari 17, Figma, ESM или CJS и Sass в браузере.

00:01:46 Chrome DevTools
00:19:54 Firefox 114
00:28:27 Apple Web Apps
00:53:22 Новинки Safari 17
01:11:44 Apple в Figma
01:18:00 ESM или CJS
01:28:58 Sass в браузере
01:35:07 Ответы на вопросы

🔗 Слушайте на Ютубе
🔗 Ссылки на сайте

#podcast

Кейсы применения HTML-атрибута inert: фронтендеру на заметку.

#html #tip by Shripal Soni

Современный CSS в реальной жизни: 5 новых аспектов CSS, которые действительно важны для реальной разработки

Это — адаптированная текстовая расшифровка недавнего выступления Криса Койера на RenderATL, в которую вложено много труда. Вы должны это увидеть:

✔️ Logical Properties & Layout
✔️ Container Queries & Units
✔️ Cascade Layers
✔️ New Colors
✔️ View Transitions

Читать

Фронтенд-разработчик Stefano Magni в ходе своей карьеры сталкивался с двумя очень большими кодовыми базами на основе React и TypeScript, из которых извлек много опыта. Речь идет про WorkWave RouteManager и Hasura Console.

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

Простой совет по использованию CSS для реализации более доступного выпадающего меню.

#css #tip by Shripal Soni

ESLint Plugin Perfectionist — плагин ESLint, который устанавливает правила форматирования вашего кода и делает его согласованным.

Он определяет правила сортировки различных данных, включая objects, imports, TypeScript types, enums, JSX props и т. д. Инструмент активно поддерживается — на прошлой неделе был выпущен стабильный релиз v1.0.0.

❌ 6 типичных ошибок, которые допускают программисты при составлении резюме

Рассказываем, что не так с резюме большинства программистов и как сделать так, чтобы работодатель обратил на вас внимание.

🔗 Основной сайт
🔗 Зеркало

Надежный способ проверить, является ли значение массивом или нет: на заметку фронтендеру.

#javascript #tip by Shripal Soni

Максим Смирнов, фронтенд-архитектор в Тинькофф, делится опытом миграции одного из монолитных сервисов на Federation

В первой части Максим рассказывает о том, как пришли к распилу, во второй — что подтолкнуло к микрофронтам, в третьей — про фолбэки.

🔧 Chrome for Testing — новая версия Chrome, специально предназначенная для тестирования веб-приложений и автоматизации.

Узнайте, почему команда Chrome сочла это необходимым на конкретных примеры, в которых Chrome for Testing может быть полезен вам как разработчику.

Читать

💡11 заповедей Junior-разработчика

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

🔗 Основной сайт
🔗 Зеркало

Million.js — ориентированная на производительность замена VDOM для React

Начавшаяся два года назад как небольшая, не зависящая от библиотек реализация виртуального DOM, Million сейчас — это библиотека, которая ускоряет работу компонентов React до 70 %.