Операторы ?? и ??= — удобные инструменты для работы с null и undefined в JavaScript. Они делают код короче, понятнее и безопаснее, особенно при задании значений по умолчанию или аккуратном обновлении переменных.

В статье разбираем, как ?? отличается от ||: если || подставляет значение по умолчанию при любом «ложном» значении (0, '', false), то ?? реагирует только на реальные отсутствия данных — null и undefined. Показываем практику: дефолты для настроек, аккуратная инициализация свойств с ??= — значение задаётся только когда данных нет. #js #webdev

🪻 Читать статью

API Intl.RelativeTimeFormat — инструмент для отображения относительного времени в локализованном виде. Он прост в использовании, поддерживает множество языков и подходит для интерфейсов, где важна понятность и культурная адаптация.

В статье разбираем, как выводить относительное время естественным языком: «вчера», «через 2 дня», «3 недели назад». Всё это без сторонних библиотек: создаём new Intl.RelativeTimeFormat('ru', { numeric: 'auto' }) и передаём число и единицу времени (day, hour, month). API автоматически подстраивается под выбранную локаль и грамматические формы; саму разницу во времени считаем отдельно. #js #webdev

🌹 Читать статью

Что нового во фронтенде в 2025?

Popover API, Promise.try(), RegExp.escape(), content-visibility и ещё 20 долгожданных фичей, которые уже поддерживаются в современных браузерах. #js #css

Краткий обзор с примерами кода — читайте, чтобы не отстать от современных стандартов.

📍 Читать статью

Часто в коде нужна какая-нибудь конкретная регулярка — проверить почту, номер телефона или ограничить ввод. Мы собрали в одной статье 40 часто используемых шаблонов для JavaScript: это компактная шпаргалка без теории, только готовые паттерны, которые удобно копировать в код и не искать каждый раз с нуля.

- Проверка email — /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
- Только цифры — /^\d+$/
- Только буквы — /^[a-zA-Z]+$/

Сохраните страницу — и шпаргалка с 40 регулярными выражениями для JavaScript всегда будет под рукой. #js #regexp

🍌 Читать статью

UUID в фронтенде нужны куда чаще, чем кажется: для временных черновиков, событий аналитики, имён файлов и стабильных ключей в списках. Universally Unique Identifier помогает надёжно различать объекты даже в офлайн-режиме и распределённых системах.

В статье разбираем, как по-взрослому генерировать UUID на чистом JavaScript: используем crypto.randomUUID() и безопасные фолбэки для разных сред, показываем, почему решения на Math.random() опасны, разбираем типичные ошибки и приводим живые примеры из реальных интерфейсов. #js #webdev

🪻 Читать статью

JSON (JavaScript Object Notation) — текстовый формат для представления структурированных данных. Его используют, чтобы передавать данные между клиентом и сервером, хранить конфигурации и сериализовать состояние приложений.

Пока все данные приходят идеальными, работа с JSON кажется простой. Но одна лишняя запятая — и приложение падает с SyntaxError.

В статье разбираем, как надёжно использовать JSON.parse(): когда достаточно простого try…catch, как оформить безопасную обёртку со значением по умолчанию, зачем нужна функция-reviver, что делать с большими JSON и как аккуратно работать с fetch. Такой подход помогает сделать парсинг предсказуемым и не блокировать интерфейс. #js #frontend

🌹 Читать статью

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

В статье разбираем, какие есть способы оживить интерфейс: CSS- и SVG-анимации и JavaScript. Показываем на примерах, в каких ситуациях достаточно свойств animation и transform, когда пригодятся возможности SVG и логика на JavaScript, а ещё вместе собираем простую анимацию прыгающего мячика и обсуждаем, как не превратить сайт в медленную «карусель». #css #js

🔔 Читать статью

Методы findLast() и findLastIndex() делают то же, что find и findIndex, только проходят массив с конца. Если нужный элемент ближе к концу большого массива — это экономит ресурсы.

В статье разбираем оба метода на примерах: когда find и findLast вернут разные результаты, как проверить поддержку в старых браузерах и почему с февраля 2025-го методы безопасны для продакшена. #js

📕 Читать статью

Методы toSorted() и toReversed() уже работают во всех браузерах. Теперь можно сортировать массивы без мутаций — оригинал остаётся нетронутым, а вы получаете новый. Туда же — свойство animation-composition для управления наложением анимаций. Это то, что можно использовать в продакшене прямо сейчас.

А ещё в статье — Navigation API, псевдоклассы для View Transitions API и новые CSS-единицы rcap, rch, rex, ric для точной типографики в многоязычных интерфейсах. Эти фичи только появились в браузерах, так что пока просто держим в голове на будущее. #css #js

🎁 Читать статью

После анонса Liquid Glass от Apple фронтендеры бросились реализовывать эффект — и у кого-то получился полупрозрачный бублик на Three.js. А ещё в этом месяце: 3D-сапёр с backdrop-filter: blur, электрическая рамка и неоморфизм.

В подборке — демки, которые можно сразу открыть и разобрать по шагам. А для тех, кого замучили «отрицательные углы» (negative border radius), есть решение — библиотека nebo.css. #css #js

🎁 Читать статью

В VS Code встроена подсветка ошибок и автодополнение, но для JavaScript этого мало. Форматировать код вручную, искать npm-модули по памяти, переключаться между проектами через проводник — всё это отнимает время.

Собрали 17 плагинов, которые закрывают эту рутину. Например, npm Intellisense подсказывает модули по первым символам, а сниппет req + Tab разворачивает require в готовую строку. Каждый плагин — с описанием и ссылкой на установку. #js #vscode

🎁 Читать статью

Вышел Vite 8 — самое крупное изменение архитектуры с версии 2. Под капотом теперь один бандлер Rolldown на Rust вместо двух (esbuild + Rollup). Результат — ускорение продакшен-сборки в 10–30 раз.

В статье разбираем, что изменилось на практике: встроенные инструменты для анализа проекта, поддержку путей из tsconfig, работу с WebAssembly и отправку сообщений из браузера в терминал. Плагины при этом остаются совместимыми — API не менялся. #js #vite

🎁 Читать статью

Резервный канал в MAX

innerHTML вставляет в DOM всё подряд — включая <script>, обработчики событий и другие векторы XSS. Годами единственной защитой были сторонние библиотеки вроде DOMPurify.

Firefox 148 стал первым браузером, реализовавшим Sanitizer API — нативную санитизацию прямо при вставке HTML. Метод setHTML() автоматически вычищает опасные элементы до того, как они попадут в DOM. А в марте подтянулся и Chrome 146. Разбираем, как перейти с innerHTML на setHTML(), как настроить конфигурацию санитайзера и зачем сочетать его с Trusted Types. #js #html

🎁 Читать статью

Слайдер пригодится для блока с отзывами, страницы с командой или галереи товаров. Внутри — работа с DOM, хранение текущего индекса и обработчики событий: знакомый набор задач, которые в JavaScript решают разными способами.

В статье — один из вариантов на чистом JavaScript: как найти элементы разметки, инициализировать slideIndex, повесить обработчики на кнопки и обновить отображение активного слайда. В конце — список готовых библиотек на случай, если писать с нуля не нужно. #js #webdev

➡️ Читать статью

Самый частый способ получить последний элемент массива в JavaScript — arr[arr.length - 1]. Громоздко, и нужно знать длину.

Метод .at() вошёл в стандарт ECMAScript в 2022 году и делает это короче: arr.at(-1) — последний, arr.at(-2) — предпоследний. Работает не только на массивах. Подробности и нюансы — в статье. #js #webdev

⚡ Читать статью

ESLint — статический анализатор: разбирает код в AST и проверяет по правилам, ничего не запуская. Поэтому ловит то, что трудно увидеть на ревью — теневое имя в замыкании, забытый await внутри .map(), недостижимую ветку switch, мутацию параметра.

Часть найденного линтер чинит автоматически — с флагом --fix. Остальное оставляет на ваш суд: не каждое нарушение правила означает баг.

В новой статье — как поставить ESLint, что делает --fix, как настраивать правила под конкретный проект и команду. Плюс интерактивный пример прямо на странице: вводите код — ESLint показывает проблемы. #js #tools

🔑 Читать статью

Пресеты для ESLint v10 от HTML Academy → https://github.com/htmlacademy/eslint-config-htmlacademy

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

Prettier забирает форматирование себе. Один раз настраиваете .prettierrc — он переписывает код по единым правилам при каждом запуске. npx prettier --write . приводит весь проект в порядок одной командой. В VS Code включается формат при сохранении, и вопрос снимается на уровне редактора. А --check в CI блокирует PR с неотформатированным кодом.

В статье — как подружить Prettier с ESLint без конфликтов правил. #js #tools

💥 Читать статью

Пресет для Prettier от HTML Academy → https://github.com/htmlacademy/prettier-config-htmlacademy

Присваиваете объект через = — и получаете вторую ссылку на тот же объект. Меняете «копию» — меняется оригинал. spread и Object.assign() спасают только частично: копируют первый уровень, а вложенные объекты и массивы остаются общими.

Долгое время глубокую копию собирали через JSON.parse(JSON.stringify(obj)). Способ рабочий, но теряет данные: Date превращается в строку, функции и undefined исчезают, Map становится пустым объектом.

structuredClone() делает полную независимую копию и корректно обрабатывает Date, Map, Set, ArrayBuffer, RegExp и другие встроенные типы. Функции и узлы DOM клонировать не получится — будет DataCloneError. Доступен во всех актуальных браузерах и в Node.js с 17-й версии.

В статье — интерактивный пример: нажимаете кнопку и видите, как ведут себя =, spread и structuredClone() на одном объекте. #js #clone

🔴 Читать статью

curl <https://api.example.com/user> — и сервер отвечает одной строкой JSON без переносов и отступов. Вложенные объекты, пара килобайт данных, нужное поле где-то внутри. Глазами не найти.

jq — это grep и sed, но для JSON. Допишите | jq . в конец команды — и тот же ответ разложится по строкам с отступами.

А дальше jq достаёт любое вложенное поле, фильтрует записи по условию, считает агрегаты и вытаскивает токен из ответа авторизации — одной строкой в пайпе с curl. В статье — интерактивная песочница: меняете фильтр и сразу видите результат на живых данных, плюс синтаксис под каждую задачу. #js #tools

🎆 Читать статью

ChatGPT и Claude печатают ответ у вас на глазах — слово за словом. Это стриминг: сервер отдаёт данные по мере генерации, ещё до того как соберёт ответ целиком. И тот же приём доступен в браузере — через Streams API и обычный fetch.

Кроме ИИ-интерфейсов, так грузят большие файлы с прогрессом и разбирают CSV на лету, нативно и без библиотек. В статье показываем, как читать ответ по кускам через response.body, и даём интерактивный пример прямо на странице. #js #baseline

👀 Читать статью