Как стать автором
Обновить

Компания HTML Academy временно не ведёт блог на Хабре

Сначала показывать

Фронтенд-новости №15. CSS становится сложнее, VITE 3.0, самый высокий сайт в мире

Время на прочтение2 мин
Количество просмотров18K

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 11–17 июля.

Читать далее

Фронтенд-новости №14. Bun: новая среда выполнения JavaScript, руководство по созданию форм, «Дней без ошибок в коде: 0»

Время на прочтение3 мин
Количество просмотров7.5K

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 4–10 июля.

Читать далее

Фронтенд-новости №13. Релиз Vue 2.7, табы против пробелов Prettier, W3C — некоммерческая организация

Время на прочтение4 мин
Количество просмотров5.8K

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 27 июня–3 июля.

? Вышел Vue 2.7 «Naruto».

? Большое обсуждение, что использовать в prettier — табы или пробелы.

? W3C станет некоммерческой организацией, представляющей общественные интересы с января 2023 года.

Что там у вас ещё

Фронтенд-новости №12. Вышел EcmaScript 2022, фавиконки в 2022, как будет выглядеть веб только с Chromium

Время на прочтение6 мин
Количество просмотров16K

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 20–26 июня.

? EcmaScript 2022. 22 июня 2022 года 123 Генеральная ассамблея Ecma утвердила спецификацию языка ECMAScript 2022 — теперь он официально является стандартом. Внутри все новинки.

? Как создавать иконки сайтов в 2022 году — всё о favicon. Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы.

? Как будет выглядеть веб только с Chromium?. Chromium – это движок, Chrome – браузер. На Chromium построено большинство браузеров.

Еще 49 новостей

Фронтенд-новости №11. JQuery живее всех живых, замена CAPTCHA, вариативные шрифты в Figma

Время на прочтение2 мин
Количество просмотров7.4K

Дайджест новостей и полезных статей из мира фронтенд-разработки c 13 по 19 июня.

Главное на 20 июня

Замените CAPTCHA на Private Access Tokens

Исследователи: мы изучили 1 000 000 сайтов и видим, что jQuery самый популярный, а вы говорите, что не используете его.

В Figma появились вариативные шрифты

Другие новости о доступности, спецификациях, вёрстке, JavaScript и Node.js внутри дайджеста.

Что там у вас ещё

Истории

Фронтенд-новости №10. Опубликован HTTP/3, History API мёртв, WebContainers доступны в Firefox

Время на прочтение2 мин
Количество просмотров9.3K

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 6–12 июня.

А вот главные новости:

HTTP/3 опубликован в качестве предлагаемого стандарта

History API мёртв, да здравствует Navigation API

WebContainers (способ запуска Node.js в браузере) официально поддерживаются в Firefox.

Что там у вас ещё

Почему figcaption не заменяет alt

Время на прочтение3 мин
Количество просмотров2.3K

В HTML4 не было способа семантически разметить HTML, чтобы сохранить связь между изображением и его подписью. В HTML5 нам дали такую возможность с помощью элементов <figure> и <figcaption>.

Давайте для начала определимся с терминами.

alt — альтернативное описания изображения.

<figcaption> — заголовок или сводка для содержимого <figure>. Если у <figure> нет дочернего <figcaption>, то нет и заголовка.

Содержимым у <figure> может быть изображение или что угодно ещё, например, таблица или список. В<figcaption> можно указать описательную метку для фрагмента контента: таблицы, фрагмента кода, списка, цитаты, текста и изображения, но это описание не является жизненно важным для его понимания. Но почему же <figcaption> как подпись не может заменить alt?

Читать далее

Фронтенд-новости №9. Конец эпохи IE, 19 лет Wordpress, цветовые тренды 2022

Время на прочтение2 мин
Количество просмотров4.8K

Дайджест новостей и полезных статей из мира фронтенд-разработки за последнюю неделю 30 мая–05 июня.

Что там у вас ещё

6 простых правил хорошего alt-текста

Время на прочтение4 мин
Количество просмотров17K

Давайте поговорим о том, как написать хорошее описание фотографий в атрибуте alt, или альтернативный текст.

Альтернативный текст — это описание картинки на сайте словами. Оно должно помогать людям, которые не видят картинку, но читают или слышат это описание. А иначе можно вообще ничего не писать.

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

Читать далее

Фронтенд-новости №8. Вышел Wordpress 6.0, найдена оптимальная длина строки, <dialog> под вопросом

Время на прочтение2 мин
Количество просмотров5.1K

Дайджест новостей и полезных статей о фронтенд-разработке за последнюю неделю 23–29 мая.

Что там у вас ещё

Фронтенд-новости №7. Больше никаких игр со шрифтами, COLRv1 и большое обновление Figma

Время на прочтение2 мин
Количество просмотров5.5K

Дайджест новостей и интересных статей из мира фронтенд-разработки за 16—22 мая.

Как отключить запрос favicon.ico, если это нужно. Вы же знали ,что ваш браузер всегда запрашивает favicon.ico?

Теперь фраза «поиграться шрифтами» усложняет задачу, так как грядёт COLRv1

Как работают :where(), :is() :has() и какой из селекторов упрощает жизнь

Playwright теперь готов тестировать ваши компоненты на React, Vue и Svelter

Большое обновление Figma

Что там у вас ещё

Фронтенд-новости №6. Интернет сломан, бесплатный VPN в Edge, State of CSS 2022

Время на прочтение2 мин
Количество просмотров6.9K

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 9–15 мая.

Что там у вас ещё

«Писать код — не главное». Авторы курсов из HTML Academy делятся секретами профессии

Время на прочтение12 мин
Количество просмотров6.6K

Академия началась 10 лет назад с интерактивных тренажёров по вёрстке, которые сделал Саша Першин. Через год появились полноценные интенсивные курсы для верстальщиков, а чуть позже добавились курсы по JavaScript, React и PHP. 

Всё это добро нужно было кому-то вести — сначала всё делали Саша и Лёша Симоненко, а потом их сменили другие авторы. Некоторых вы и без меня хорошо знаете — например, Вадима Макеева, который несколько лет вёл в Академии курсы по HTML и CSS. А всего за 10 лет у курсов Академии было 14 авторов. При этом автор — не наставник и не преподаватель в привычном смысле. Он не занимается отдельно с каждым студентом и не проверяет домашние задания и итоговые проекты. 

Чтобы узнать, чем на самом деле занимаются авторы, я подловил их в тёмном коридоре и задал кучу неудобных вопросов. Поговорили о работе авторов, секретах профессии, бесящих студентах, революциях в вебе, HTML 6, замене JavaScript и ответственности за судьбы людей.

Читать далее

Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры

Время на прочтение3 мин
Количество просмотров16K

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

Горячее

Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax().

Узнайте о JavaScript контейнерах.

Что случится если вы откажетесь от React?

Ещё один сайт на HTML. Да, так тоже можно.

Остальные новости и статьи — под катом.

Что там у вас ещё

Ближайшие события

2 – 18 декабря
Yandex DataLens Festival 2024
МоскваОнлайн
11 – 13 декабря
Международная конференция по AI/ML «AI Journey»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

Время на прочтение3 мин
Количество просмотров6.6K

Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая.

— Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5.

— Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений.

Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс, например, import test from 'node:test';. Не все базовые модули на данный момент будут использовать через префикс, например fs.

– Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научитесь делать пуш-уведомления полезными.

Больше новостей и статей под катом. Хватит почитать на все майские!

Что там у вас ещё

Фронтенд-новости №3. Node.js v18.0.0, аннотации типов в JavaScript, СSS Toggles

Время на прочтение2 мин
Количество просмотров6K

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 18 — 24 апреля 2022.

Появились первые рабочие черновики WebAssembly Core Specification 2.0 — стандарт, описывающий безопасный низкоуровневый код, WebAssembly JavaScript Interface 2.0 — стандарт взаимодействия API JavaScript с WebAssembly и WebAssembly Web API 2.0 — стандарт интеграции WebAssembly с остальной веб-платформой.

Chromium начинает экспериментальное прототипирование CSS Toggles. CSS Toggles - декларативный механизм для указания состояния, описывающего поведение.

Node.js v18.0.0 уже здесь, но Current. Не переживайте, так как переход на LTS планируется уже в октябре.

Что ещё случилось

Фронтенд-новости №2. Новинки CSS в 2022, ShadowRealms и холивары про async/await

Время на прочтение2 мин
Количество просмотров8.9K

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 11 — 17 апреля 2022.

Читать далее

Всё о веб-анимациях в 2022

Время на прочтение7 мин
Количество просмотров42K

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций: CSS-анимации, SVG-анимации или JavaScript-анимации.

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

Анимация на КПДВ: Дилан Баунманн, codepen.

Читать далее

Фронтенд-новости №1

Время на прочтение2 мин
Количество просмотров6.6K

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 5—11 апреля.

Спецификации

Опубликован первый рабочий черновик (First Public Working Draft) Region capture.

Последний призыв к рассмотрению предлагаемых изменений в Media Queries Level 3.

W3C приглашает к реализации WebXR Device API.

Спецификации preload становится отключенным черновиком (Discontinued Draft), чтобы продолжить развитие в HTML living standard.

Письмо генерального директора W3С к 33-й годовщине интернета.

Больше новостей о HTML, CSS, JavaScript и инструментах разработчика — под катом.

Больше новостей

Правда ли, что от регулярок у разработчиков одни проблемы

Время на прочтение5 мин
Количество просмотров14K

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

Самое очевидное решение — использовать прямую замену, применив встроенную в JavaScript функцию replace():

'Быстрее всего мы догоним ее на машине'.replace('ее', 'его');

Однако 'ее' также является окончанием слова 'Быстрее', а .replace() заменит первое вхождение подстроки. В итоге мы получим ожидаемо неверный результат: 'Быстрего всего мы догоним ее на машине'. Поэтому необходимо проверить строку на наличие символа, стоящего перед 'ее': если это пробел, можно делать замену.

Больше примеров и неочевидные выводы о том, нужны ли фронтендерам регулярки — внутри статьи.

Читать далее