Сороковой дайджест новостей и полезных статей из мира фронтенд-разработки уже в блоге 🤌

Из выпуска вы узнаете:
✧ Как исправить шесть типичных ошибок в SVG.
✧ Почему document.write в 2023 — отстой
✧ За какими Node. js-проектами стоит следить в 2023
✧ Что нового в Bun 0.5 и как эта версия улучшает работу совместимых баз данных с Node.js.

Полный выпуск читайте по ссылке — https://tml.io/etg5k

Скидка на навыки, дерево навыков и проекты до 75% до 26 января.

Если вы ещё не знакомы с нашими навыками и проектами, рассказываем, что это:

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

Проекты подходят тем, кто хочет получить больше практики. Вас ждут макеты для вёрстки или проекты на JavaScript, например, таск-менеджер. Внутри каждого проекта макет, инструкция и эталонное решение.

Дерево навыков — набор из навыков и макета для вёрстки по выгодной цене.

Выбрать свой курс и начать обучение

Скоро выпустим пост на тему, но сначала хотим услышать ваше мнение

Успели забрать навык или проект со скидкой 75%?

Распродажа закончится сегодня. Практикуйтесь создавать сайты и решать задачи JavaScript на проектах или потренируйте точечные навыки вёрстки на мини-курсах.

Посмотреть и выбрать обучение — https://tml.io/x4cta

Чем заняться в пятницу, если не хочется идти в бар? Можно пройти бесплатные тренажёры по JavaScript.

Это отличный способ быстро освоить принцип работы языка без нудной теории и в компании прекрасного кота Кекса.

Начинайте отсюда

Выпустили новый курс — «SVG-анимации»

По результатам нашего исследования стало понятно, что работодатели ждут уверенной работы с SVG-анимациями от разработчиков с опытом от 1-го до 3-х лет. Это логично, ведь сейчас анимацию используют и как помощника, чтобы помогать юзерам взаимодействовать с интерфейсом, и для декора, чтобы привлечь внимание, вызвать эмоции и сделать проект интереснее.

В общем, веб-анимация — это бодро, весело, почти всегда удобно и вот прямо сейчас модно.

На курсе вы научитесь работать с векторной графикой и применять JavaScript-библиотеки для её анимирования.

Задача курса — раскрыть весь потенциал векторной графики и её гибкость. От простой CSS-анимации с transform до анимирования контуров, кривых, масок, графиков и обводки.

Типовые задачи, которые вы научитесь решать на курсе
☞ Подготовка SVG к подключению в страницу.
☞ Анимация частей SVG-иконки.
☞ Оптимизация анимации векторной графики.
☞ Создание бургер-меню.
☞ Создание прелоадеров.
☞ Морфинг форм.
☞ Анимация с применением SVG-масок.
☞ Создание анимированных диаграмм.
☞ Применение библиотек для создания анимаций.

Записаться на курс можно по ссылке. А для тех, кто хочет стать гуру анимаций теперь доступен пакет «Мастер анимаций».

На обложке svg анимация от Yasio

Зачем нужно свойство display в CSS.

Каждому HTML-элементу на странице соответствует определенный бокс (англ. *box — коробка*) — это просто прямоугольная область. Тип отображения бокса можно изменить с помощью CSS-свойства display.

Существует четыре основных типа боксов:

- блочные, display: block,
- строчные, display: inline,
- блочно-строчные, display: inline-block,
- гибкие или флексовые (флексы), display: flex.

Все типы по разному ведут себя на странице и имеют свои особенности, чтобы разобраться в этой теме и использовать display по назначению, читайте статью.

Каждый человек, решивший сменить профессию и стать веб-разработчиком, неизбежно сталкивается с кучей вопрсов:
⦿ Какие направления веб-разработки бывают?
⦿ Ещё не поздно идти во фронтенд?
⦿ Где получить первый опыт для портфолио?
⦿ Кто-нибудь ещё нанимает джунов?

Лёша Симоненко, директор по развитию HTML Academy и программист с 20-летним опытом, ответит на эти вопросы и ещё множество других на лайве 9 февраля в 13:00.

У вас также будет возможность задать свои вопросы в чате, а Лёша поможет во всём разобраться.

Если запишитесь, шансов пропустит лайв будет меньше, мы пришлём напоминание за 15 минут до начала.

#htmlacademy_мероприятия

Если хотя бы один пункт про вас, поможет эта статья*, на примерах показываем, как бороться со страхами.

*кроме пункта про кота, тут мы можем предложить только стать боссом, как наш кот Кекс.

#htmlacademy_статьи

Открыли запись на следующий поток профессии «Фронтенд-разработчик» — это самое выгодное время для покупки профессии, вот почему:

➡︎ На старте действует самая низкая стоимость — 119 000₽, в рассрочку платёж будет составлять 6 610₽. Каждые две недели цена увеличивается на 10 000₽ и растёт до 169 000₽.

➡︎ Если записаться заранее, вы сможете в спокойном темпе пройти подготовительный раздел и получить крепкую базу по вёрстке и JavaScript. Когда начнётся основное обучение, это поможет намного увереннее идти по программе и быстрее выполнять практические задания.

Новый поток стартует 11 апреля. Записаться можно по ссылке.

#htmlacademy_обучение

Как настроить работу с Git в VS Code без боли

Если вы читаете этот текст, то уже, наверное, читали и про работу с Git через консоль, и через GitHub Desktop, но вам не понравилось или показалось неудобно. Это не проблема, ведь есть ещё один способ работать с Гитом.

Если вы вёрстаете сайты или пишете код в редакторе Visual Studio Code, то Git за пять минут настраивается прямо внутри редактора. Не нужно запоминать команды для консоли, не нужно тыкать в лишние приложения.

Следуйте инструкции и всё получится

#htmlacademy_статьи

41 выпуск фронтенд-новостей уже в канале блога Академии

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

💫 Что нового

Safari 16.3. Ну Сафари и Сафари.

Astro 2.0 — в новой версии добавили гибридный рендеринг позволяющий смешивать входные данные SSR и SSG.

Nut.js 3.0: используйте Node.js для автоматизации рабочего стола. Управляйте средой своего рабочего стола (Windows, macOS или Linux) из кода с управлением клавиатурой и указателем.

Первая бета-версия Eleventy v2.0. Eleventy — это популярный генератор статических сайтов на базе Node.js.

TypeScript 5.0 Beta. Совсем взросленький стал.

🖌️ HTML и CSS

Ещё больше про использование :has(). Рассмотрите как и с какими селекторами можно комбинировать :has()

Список желаний на 2023 год для CSS от Дэйва Руперта.

И от Пола Амстронга, который составил список на 2023 для фронтенда.

Два способа разделить длинное слово в HTML.

Статус SVG-движка в Webkit.

Доступные гамбургер-меню без JavaScript.

🏗️ JavaScript

Глубокое клонирование объектов в JavaScript, современный способ. Если вы полагались на что-то вроде Lodash для глубокого клонирования, возможно, вам это больше не нужно.

scrollend — новое JavaScript-событие и новый способ определения завершения операции прокрутки в браузере.

Лекарство от useState ада — useReducer.

Сделайте жесты в React Native более естественными.

Начните работать со SvelteKIT — маршрутизация, данные, пропсы и другое.

🦦 Всякое ещё

Как перейти на Manifest V3 для расширений Chrome.

Оптимизация времени до первого байта. Это базовая и основная метрика производительности.

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