Авторизация и аутентификация — все путают, а вы не путайте.
Читайте статью, чтобы понимать, как использовать авторизацию и аутентификацию, и обезопасить свои данные или данные пользователей.

#htmlacademy_статьи

Инструкция: как добавить изображение на страницу.

Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги , или использовать в CSS с помощью background-image.

Читайте какой способ, когда и как использовать.

#htmlacademy_статьи

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


🎙 Стоит обсудить

Конец фронтенда. Как GPT-4 может помогает в обучении новчикам. Не переживайте, что вас заменит ИИ, так как веб-интерфейсы — это сложно.

Почему логические свойства не вытеснили всё остальное? Потому что нужно привыкнуть, старые проекты никуда не делись, а некоторые свойства ещё не поддерживают логичечность.

Как поправить цветовой контраст. Не забывайте, что если у вас есть кнопка с текстом и фоном, то цвета текста и фона кнопки должны иметь хороший контраст к общему фону сайта.

React обновил документацию. Отношения к обновлению неоднозначные.


🧬 HTML и CSS

Постепенное улучшение таблицы с помощью веб-компонента.

Как :focus-visible в 4 этапа принимает решение, отображаться ему или нет.

Что нового в Eleventy 2: прекрасный инструмент для простых статичных сайтов теперь весит меньше и собирается быстрее.

Как сделать круговой текст с помощью CSS?

Как сделать книгу с помощью HTML и CSS. Главная сложность — понадобится Linux, Python и программа weasyprint.

🏝️ JavaScript

▶️ Почему результатом ['1', '2', '3'].map(parseInt) стал [1, NaN, NaN]? Игорь Антонов с детальным разбором задачи с собеседований.

На 95 собрании ТС39 анонсировали явное управление ресурсами, атрибут импорта, асинхронный контекст, Float16Array, Iterator.range, Await Dictionary, декораторы параметров метода класса, Promise.withResolvers и канонизация часовых поясов.

А так ли нужны JS-фреймворки? Ответ на статью о конце фронтенда

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

Как загружать файлы с помощью JavaScript.

Каким будет Svelte 4?

Пошаговое руководство по Astro.

Полное руководство по мутациям в JavaScript.


🚀 React

У документации новый домен react.dev, а старый официально устарел. А ещё новая документация React игнорирует SPA.

Как сделать SPA исключительно на стороне клиента с помощью Next.js

Интернационализация в Next.js 13 с React Server компонентами.

Откуда и для чего появились хуки в React.

Как остановить визуализацию компонента React. Вы можете вернуть null из компонента, чтобы указать, что он не должен ничего отображать.

Как тестирование доступности помогло понять useRef.

Очистка useEffect и два последствия, которые она вызывает.


💫 Node.js

Гранулярные токены в npm для хитрого ограничения доступа к определённым пакетам.

Автоматическая публикация с помощью Github Actions и гранулярных токенов.

Вышел deno 1.32 с поддержкой TS 5.0.

Почему в Deno добавили поддержку package.json.

Миграция с ts-node на Bun.

Как использовать Postman для тестирования API сервера.


🦭 Общее

Как сделать автономное приложение, а заодно разобраться с хранением и синхронизацией данных и разрешением конфликтов.

Статья-ностальгия о том, как блоги сформировали интернет.

Маленькие советы по дизайну: несколько простых способов сделать контент красивым.

Никогда не было так просто подобрать шрифтовые пары, как с этим проектом.

DOCX 8.0. Создайте .docx-файлы с помощью Node.js.

Как эффективно читать код. Разберитесь в задаче, используйте комментарии и документации, разбейте код на части и не стесняйтесь использовать отладчик.

—

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

⚡️Открылся ранний доступ к новому курсу для новичков — «Введение в React».

Обучение строится на базе тренажёров: читаете теорию, пишите код, сразу узнаёте результат. Такой подход позволяет получить знания и набить руку до автоматизма. То, что нужно для старта.

Чему вы научитесь:
✷ Познакомитесь с основными возможностями библиотеки React: JSX, компоненты, хуки.
✷ Научитесь управлять состоянием компонентов и передавать данные (на примере React Hooks useState).
✷ Разработаете по техническому заданию две игры, которые можно будет добавить в портфолио.
✷ Познакомитесь с современной архитектурой одностраничного приложения (SPA).

Обучение подойдёт тем, кто уже умеет верстать веб-страницы, знаком с JavaScript и хочет попробовать себя в разработке интерфейсов.

Сейчас доступ к курсу можно получиться со скидкой.

Подробнее о курсе и программе обучения.

#htmlacademy_обучение

Когда использовать флексы, а когда гриды?

Флексы — одномерные. Это значит, что управлять расположением в рядах нельзя.

Гриды же двухмерные. То есть можно передвигать элементы между строками и рядами.

Что и когда использовать, объясняем в статье.

#htmlacademy_статьи

Ищем фронтенд-разработчиков на интервью о развитии в профессии.

Формат максимально простой: мы созваниваемся с вами на 30 минут и задаём несколько вопросов о том, как вы развиваетесь во фронтенде и как мы могли бы улучшить наши продукты.

В качестве благодарности — персональная скидка 20% на любой курс или пакет для роста.

Записаться можно тут.

Стартует новый поток профессии «Фронтенд-разработчик» 🚀

Это обучение подходит всем, кто стремится как можно быстрее сменить работу и стать веб-разработчиком. И хоть начинать с нуля может быть страшно, мы подготовили всё, чтобы вы достигли цели:

👉 Программа курса поможет заложить крепкий фундамент знаний, которые сейчас нужны рынку айти.

👉 Прямые эфиры с опытными преподавателями помогут освоить материал и получить ответ на вопросы в режиме реального времени.

👉 Учебный чат с наставниками и одногруппниками, где можно получить помощь по любому вопросу в течение нескольких минут.

👉 Большой объём обратной связи по проекту с наставником — за два часа в неделю детально разбирается не только ваше решение, но и решения других.

👉 Личные консультации с наставниками помогут более глубоко понять сложные темы и улучшить качество кода.

👉 Оплачиваемая стажировка в «Лиге А» на реальных проектах — тот самый опыт коммерческий разработки, который выделить вас среди других соискателей на рынке и поможет быстрее найти работу.

А ещё у нас появился индивидуальный формат, если вам важно персональное расписание и увеличенный объём работы с личным наставником. На этом тарифе можно учиться сверхинтенсивно в стиле буткемпа, а можно наоборот, размеренно и спокойно. За подробностями обращайтесь к самым милым менеджерам во всём эдтехе*.

*по словам наших студентов.

Узнать больше про обучение и записаться — https://tml.io/1kumd

Выбирайте лучшее и начинайте свой путь к новой профессии уже сегодня 🤩

#htmlacademy_обучение

Новый выпуск новостей из мира веб-разработки уже в канале блога 👇

Как научиться программировать и стать веб-разработчиком — отвечают основатели HTML Academy 🚀

Уже в эту среду Саша Першин, гендиректор Академии, и Лёша Симоненко, директор по развитию, расскажут о том, как построить успешную карьеру в веб-разработке.

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

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

Лайв пройдёт 13 апреля в 13:00 по московскому времени, чтобы участвовать в конкурсе и не пропустить лайв, нужно зарегистрироваться на мероприятие.

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

🔥 Бесплатный справочник по основным HTML-тегам от (сюрприз-сюрприз) HTML Academy.

В список попали новые семантические теги из HTML5, теги, которые появились в HTML 4.01 и некоторые устаревшие как напоминание, что их лучше не использовать.

Не стесняйтесь использовать статьи из него в обучении и рассказывать о них в соцсетях.

Посмотреть справочник.

Скидки до 75% на тренировочные материалы по вёрстке и программированию до 14 апреля💥

Для новичков в веб-разработке у нас есть не только тренажёры, но и навыки и проекты — это мини-курсы, которые позволяют углубить знания и получить больше практики.

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

❓Что такое проекты.
Проекты стоит брать, когда чувствуете, что нужно больше практики. Тут её как раз много: вы можете сверстать макеты разного уровня сложности или с нуля запрограммировать JavaScript-проект.

Если не хочется выбирать что-то одно, забирайте «Дерево навыков» — это набор из девяти навыков и одного макета для вёрстки.

Полный список навыков и проектов можно найти здесь.

#htmlacademy_обучение

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

Присоединиться.

⚡️Инструкция, как сделать всплывающую подсказку.
Всплывающая подсказка — это небольшой блок, его также называют тултип, который появляется при наведении или нажатии на элемент. Цель такого блока — дать более подробную информацию о содержимом элемента. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям.

Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа — https://tml.io/hvgnu

#htmlacademy_статьи