👩‍💻 Виртуальная DOM в 200 строк JavaScript-кода: на заметку фронтенд-разработчику

Разработка механизма, используемого под капотом React и других UI-библиотек.

😈 Читать гайд

➡️ @tips_frontend

👩‍💻 Руководство по анализу производительности JavaScript с использованием Chrome DevTools

Автор и его коллега исследовали производительность библиотеки fabric.js. Они смогли значительно улучшить производительность с 13 FPS до почти 50 FPS всего за два часа, используя вкладку Performance в Chrome DevTools для измерения и оптимизации времени выполнения JavaScript. Под катом — своего рода дополнение к руководству Analyze runtime performance от Google.

👉 Читать

➡️ @tips_frontend

40 незаменимых API для разработчиков

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

😈 Читать статью

➡️ @tips_frontend

👩‍💻 TypeHero — онлайн-платформа для общения, взаимодействия и развивития вместе с сообществом разработчиков TypeScript.

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

👉 Перейти к платформе

➡️ @tips_frontend

👩‍💻 Exploring JS: книги по JavaScript для разработчиков

Вы наверняка знаете Dr. Axel по его замечательным записям в блоге на протяжении многих лет, но у него также есть впечатляющая коллекция книг, которые вы можете прочитать бесплатно, включая недавно обновленные Exploring JavaScript (ES2024 Edition), Deep JavaScript и Tackling TypeScript.

➡️ @tips_frontend

Магия clip-path в CSS

clip-path часто используется для обрезки узла DOM в определенные формы, например, треугольники. Но что, если использовать его для анимации?

Автор статьи погружается в clip-path и рассматривает некоторые из интересных вещей, которые вы можете с ним сделать. Как только вы прочтете ее, вы начнете видеть, что это свойство используется везде.

👉 Читать

➡️ @tips_frontend

Полное руководство по Web Push API

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

Под катом — пошаговое руководство по реализации push-уведомлений. Приложение из гайда разработано с использованием remix + service workers + web-push + API showNotification для регистрации service workers.

😈 Архитектура включает:

⚡️ Settings route
⚡️ Subscription route
⚡️ Push-сервер
⚡️ Service Worker
⚡️Client Utilities

🔤 Читать

➡️ @tips_frontend

Недооцененные возможности CSS grid: подробное руководство с множеством интерактивных демонстраций

Свежий взгляд на CSS grid template areas и на то, как сегодня использовать весь их потенциал.

👉 Читать

➡️ @tips_frontend

Set в JavaScript: теперь с новыми суперспособностями

Узнайте о грядущих обновлениях Set в JavaScript, включая новые методы union, intersection, difference и другие. Подробный обзор и примеры использования.

😒 Читать статью

➡️ @tips_frontend

Простой способ отслеживания текущего сфокусированного элемента на веб-странице: на заметку фронтенд-разработчику

➡️ @tips_frontend

🔫 VS Code на стероидах: 15 полезных расширений для фронтендера

Мы отобрали 15 плагинов, которые покрывают все аспекты современной веб-разработки: от работы с HTML до интеграции с Figma и Docker.

⛓ Читать статью

➡️ @tips_frontend

👩‍💻 React 19: краткий обзор новых фич от Vercel

Изучите React 19 и узнайте, как начать использовать библиотеку уже сегодня.

👉 Читать

➡️ @tips_frontend

🕺 25 полезных HTML тегов, элементов и атрибутов, которые должен знать каждый фронтендер

В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.

Читать статью

➡️ @tips_frontend

Простой способ отладки/разработки стилей для различных состояний элементов с помощью Dev Tools: на заметку фронтенд-разработчику

➡️ @tips_frontend

Анимации на CSS: 13 библиотек для креативных решений

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

🔗 Читать статью

➡️ @tips_frontend