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

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

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

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

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

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

Читать далее
Всего голосов 23: ↑22 и ↓1 +21
Комментарии 7

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

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

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

Читать далее
Всего голосов 11: ↑10 и ↓1 +9
Комментарии 8

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

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

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

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

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

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

Что там у вас ещё
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 6

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

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

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

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

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

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

Еще 49 новостей
Всего голосов 32: ↑32 и ↓0 +32
Комментарии 3

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

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

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

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

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

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

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

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

Что там у вас ещё
Всего голосов 19: ↑17 и ↓2 +15
Комментарии 12

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

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

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

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

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

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

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

Что там у вас ещё
Всего голосов 14: ↑13 и ↓1 +12
Комментарии 4

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

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

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

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

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

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

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

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 1

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

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

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

Что там у вас ещё
Всего голосов 15: ↑14 и ↓1 +13
Комментарии 0

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

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

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

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

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

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Комментарии 14

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

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

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

Что там у вас ещё
Всего голосов 15: ↑15 и ↓0 +15
Комментарии 0

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

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

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

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

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

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

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

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

Что там у вас ещё
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 2

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

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

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

Что там у вас ещё
Всего голосов 15: ↑14 и ↓1 +13
Комментарии 3

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

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

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

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

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

Читать далее
Всего голосов 14: ↑11 и ↓3 +8
Комментарии 4

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

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

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

Горячее

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

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

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

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

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

Что там у вас ещё
Всего голосов 11: ↑9 и ↓2 +7
Комментарии 5

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

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

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

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

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

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

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

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

Что там у вас ещё
Всего голосов 11: ↑11 и ↓0 +11
Комментарии 1

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

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

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 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 планируется уже в октябре.

Что ещё случилось
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 6

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

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

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

Читать далее
Всего голосов 17: ↑15 и ↓2 +13
Комментарии 0

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

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

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

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

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

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

Читать далее
Всего голосов 20: ↑19 и ↓1 +18
Комментарии 8

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

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

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 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 и инструментах разработчика — под катом.

Больше новостей
Всего голосов 17: ↑15 и ↓2 +13
Комментарии 5

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

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

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

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

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

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

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

Читать далее
Всего голосов 26: ↑22 и ↓4 +18
Комментарии 47