Фронтенд-новости 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-анимации

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

Подкаст «Про код», эпизод 5. В этот раз больше говорили о разработке и почти уложились в час. Вот темы и таймкоды:

00:00:00 Начало
00:00:45 Зачем джуну новый отладчик в Chrome DevTools
00:20:42 Vite 4.3 и немного о судьбе Create React App
00:34:00 Rust быстрее Node.js обрабатывает CSV и другие невероятные открытия
00:46:31 Почему мы ничего не запоминаем из книг о разработке

—

💫️️️️Слушайте «Про код» на любимой площадке — https://tml.io/procode

#htmlacademy_полезное

Индивидуальный формат — новый вариант обучения на курсах максимально близкий к персональному менторству.

В этом формате вы сами определяете интенсивность программы. Хотите как можно быстрее сменить профессию и готовы уделять этому много времени — отлично, теперь вам не нужно идти с основным потоком, мы составим вам индивидуальное расписание.

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

Плюсы индивидуального формата:

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

🔥Персональное расписание.
Обычные курсы длятся 2 месяца со средней нагрузкой 15 часов в неделю. В индивидуальном формате можно составить расписание с любой нагрузкой: можно учиться сверхинтенсивно в стиле буткемпа, а можно наоборот размеренно и спокойно.

🔥Подбор опытного наставника до старта обучения.
Мы подберём вам опытного наставника, за плечами у которого работа с десятками студентов. Позаботимся, чтобы стиль и формат работы наставника вам подошёл.

🔥Увеличенный объём работы с личным наставником.
В индивидуальном формате и работа с наставником исключительно индивидуальная. Её объём — от 20 до 30 часов в зависимости от персонального расписания.

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

Узнать больше об условиях обучения на сайте.

#htmlacademy_обучение

Карина выиграла грант Академии и теперь бесплатно участвует в программе роста до мидла. Она уже прошла оценку навыков, получила индивидуальный план развития и сейчас учится на курсах. Большая часть пути пройдена, поэтому мы попросили Карину поделиться впечатлениями от программы.

Читать статью — https://tml.io/15vao

#htmlacademy_статьи

💣 Ура! Стартовал новый поток профессий «JavaScript-разработчик» и «Фулстек-разработчик».

Профессия — это практический курс для тех, кто хочет как можно быстрее получить все необходимые знания и устроиться на работу. Вам предстоит программировать веб-интерфейсы с помощью JavaScript и React, улучшать свой код с помощью ревью от наставников, разбирать сложные вопросы на ретроспективах вместе с авторами курсов и проходить стажировку в Лиге А.

На профессии «Фулстек-разработчик» вы дополнительно научитесь разрабатывать бэкенд для веб-приложений с применением современного стека: Node.js LTS, TypeScript, Express.js, Nest.js, Mongoose/Typegoose, Prisma ORM, Got, Multer.

Вот что нужно знать о курсе ↓

👉 Сегодня стартует подготовительный раздел. Этот модуль предназначен, чтобы подготовить полных новичков к успешному освоению профессиональных навыков веб-разработчика. Важно! Студенты, которые полностью проходят этот раздел, чувствуют себя увереннее во время основного обучения. Поэтому лучше не затягивать и записываться на профессию как можно раньше.

👉 Профессию можно оплатить целиком или в рассрочку без переплат на 12, 18 или 24 месяца. Стоимость обучения на профессии «JavaScript-разработчик» стартует от 7 450 ₽ в месяц, «Фулстек-разработчик» от 9 120 ₽ в месяц.

👉 Даже если вы никогда не программировали, вы можете пройти профессию, для этого у нас есть всё: подробный подготовительный раздел, постоянно обновляемые обучающие материалы, наставники и авторы курса, готовые помочь со всеми вопросами, адвайзеры для моральной поддержки и кураторы для помощи в организационных вопросах.

👉 Профессия «JavaScript-разработчик» длится 1 год и 2 месяца, включает в себя два курса по JavaScript и один по React, затем начинается практическая часть обучения.

👉 Профессия «Фулстек-разработчик» длится 1 год и 7 месяцев, включает те же курсы, что и «JavaScript-разработчик», плюс два курса по Node.js, затем также идут полгода практики.

Записаться на профессию «JavaScript-разработчик» — https://tml.io/xxyjd

Записаться на профессию «Фулстек-разработчик» — https://tml.io/bcobu

#htmlacademy_обучение