Фронтенд-новости 54. Дайджест новостей и полезных статей о фронтенде.

🔥 Самое важное

Новое медиавыражение update. У вашего ноута и смартфона высокая частота обновления экрана, а у читалок — низкая. update поможет не грузить читалку с 1fps тяжелыми анимациями.

Обман с константой. В JS переменные объявляют ключевыми словами const и let. Переменную с const, нельзя переназначить, но можно подменить данные, на которые она ссылается. Это называется мутацией.

Create-react-app (CRA) раньше был на коне, а теперь разработчикам он кажется медленным и не очень гибким. Есть варианты быстрее и гибче, например, Vite, Next.js, Astro, Remix и Gatsby. Посмотрим, как пойдёт.


💫 Релизы

DevTools Chrome 113. Вовсю переопределяем заголовки сетевых ответов, включая заголовки CORS и удобнее отлаживаем Nuxt, Vite и Rollup.

Краткий обзор Angular 16.

Chrome объявил, что первая версия WebGPU теперь доступна по умолчанию в ChromeOS, macOS и Windows.


🧬 HTML и CSS

Потенциально опасная недоступность уведомлений о файлах cookie. С человеческой, визуальной и юридической стороны.

Очень полезный справочник по созданию инклюзивных веб-сайтов.

Памятка по доступным размерам элементов. Чтобы было, куда кликать.


🏝️ JavaScript

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

🚀 React

Как писать комментарии в React: хороший, плохой и ужасный способы. То есть синтаксис комментариев JSX, комментарии JavaScript вокруг JSX и комментарии JavaScript внутри тега JSX.

Node.js

Ускоряем обработку CSV-файла в Node в пять раз с помощью Rust и NAPI-RS

Создание современного микросервиса gRPC.

Пошаговое руководство по созданию приложения Node.js без статических данных и его докеризации.

Как установить Node.js 20 на Ubuntu 20.04 LTS.

—

Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.

Читайте новые инструкции по CSS в блоге:

Как передвинуть элемент на странице. css-свойство position.

Как изменить цвет на странице. css-свойство color.

Как изменить ширину элемента. свойство width.

Как сделать фон на странице. css-свойство background.

Как размыть картинку. css-свойство filter.

#htmlacademy_статьи

Попросили Игоря Антонова, автора курсов по JavaScript, поделиться советами для тех, кто только начинает изучать этот язык программирования 👇

☞ Разберитесь с основными возможностями языка программирования. Изучите переменные, функции, циклы, массивы и объекты. Особое внимание уделите изучению методов массивов и объектов. К ним приходятся обращаться при решении практически любой задачи. Знания методов избавит от написания своих «велосипедов» и ускорит решение многих задачек.

☞ Практикуйтесь каждый день.
Так вы быстрее набьёте руку и зазубрите применение основных конструкций языка. Решение небольших задач поможет прокачать навыки алгоритмического мышления. Каждая следующая задача будет даваться легче. Задачи можно брать в CodeWars, LeetCode. Помните: лучше регулярно заниматься каждый день по 30–60 минут, чем раз в неделю по несколько часов.

☞ Начните разрабатывать свой проект.
Не думайте о дизайне, решите какую-нибудь практическую задачу. Например, напишите своё приложение для ведения списка задач. Придумайте уникальные функции и попробуйте их реализовать. Трудности будут. Но, решая их, вы получите самое ценное — опыт.

☞ Практикуйтесь декомпозировать функциональность разрабатываемого приложения.
Учитесь делить программу на небольшие самостоятельные блоки. Каждый блок отвечает за решение одной задачи. Соединив все блоки вместе, вы должны получить решение основной задачи. Пример: не стоит писать одну большую функцию, попробуйте разделить её на несколько. Каждая из них должна хорошо решать одну задачу.

☞ Осваивайте вспомогательные инструменты.
Программирование не ограничивается навыком написания кода. Вы должны уметь применять вспомогательные инструменты. Научитесь применять отладчик. Он упростит отладку и поиск трудно-обнаруживаемых ошибок. Практикуйтесь применять инструменты разработчика встроенные в браузер (DevTools). У них много полезных возможностей, они тоже упрощают поиск ошибок в приложении. Разбираетесь с возможностями npm.

☞ Следите за индустрией и развитием языка.
Слушайте тематические подкасты, читайте новости. Экспериментируйте с новыми возможностями языка.

☞ Верьте в себя.
Не всё будет получаться с первого раза. Это нормально. Не отчаивайтесь! Регулярные тренировки и постоянное движение вперёд помогут достичь главную цель.

Изучить основы JavaScript под присмотром Игоря и наставников можно на курсе «JavaScript. Профессиональная разработка веб-интерфейсов» — https://tml.io/zilhi

А если планируете как можно быстрее устроиться на работу, записывайтесь на профессию «JavaScript-разработчик», подготовительный раздел стартует 16 мая — https://tml.io/f61xs

Если вы ещё не знаете о нашем подкасте «Про код» — самое время познакомиться:

Яндекс.Музыка — https://tml.io/3n1h6
Apple Podcast — https://tml.io/julku
Google Podcast — https://tml.io/j5v8t
Youtube — https://tml.io/b59yp
Вконтакте — https://tml.io/m8ngk
Телеграм-канале «Доктайп» — https://tml.io/28be1

О какой теме вам было бы интересно послушать?

На какие курсы можно записаться со скидкой на этой неделе:

Vue.js 3 за 19 900 13 930 ₽ или в рассрочку на 6 месяцев за 3 310 2 320 ₽/месяц до 14 мая.

Вы научитесь с нуля создавать и стилизовать проект на Vue.js 3 версии, добавлять анимации в веб-приложение и проводить тестирование.

Начать обучение.

Пакет «Мастер анимаций» 18 300 12 810 ₽ или в рассрочку на 6 месяцев за 1 520 1 060 ₽/месяц до 21 мая.

Пакет курсов учит создавать анимации с помощью CSS и JavaScript. Вы узнаете, как анимировать аккордеоны, слайдеры, кнопки и другие элементы сайта. Научитесь работать с векторной графикой, добавлять маски и фильтры, а также сможете создавать для них сложные эффекты. На курсах разбираются JS-библиотеки: KUTE.js, Anime.js, Snap.svg и GSAP.

Включает курсы:

— CSS и JS-анимации

— SVG-анимации

Начать обучение.