Ленивая загрузка видео и аудио в HTML уже стандарт
Ленивая загрузка в HTML для видео и аудио стала доступной через loading=lazy и помогает откладывать скачивание медиа до момента появления в вьюпорте. Разберем практики вроде poster, autoplay и сохранения размеров через width height или aspect-ratio, чтобы избежать layout shift и лишнего трафика.
https://engineering.squarespace.com/blog/2026/how-to-use-standard-html-video-and-audio-lazy-loading-on-the-web-today
Ленивая загрузка в HTML для видео и аудио стала доступной через loading=lazy и помогает откладывать скачивание медиа до момента появления в вьюпорте. Разберем практики вроде poster, autoplay и сохранения размеров через width height или aspect-ratio, чтобы избежать layout shift и лишнего трафика.
https://engineering.squarespace.com/blog/2026/how-to-use-standard-html-video-and-audio-lazy-loading-on-the-web-today
👍11❤4🔥3
Внутри нового фронтенда MDN
Пересобрали фронтенд MDN: упростили дизайн и переработали кодовую базу, чтобы уменьшить технический долг и улучшить поддержку интерактивных элементов без тяжелой клиентской логики. Разбираем архитектуру сборки из Markdown в JSON и SSR, а также причины отказа от React-обертки и проблем с CSS и поддерживаемостью.
https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/
Пересобрали фронтенд MDN: упростили дизайн и переработали кодовую базу, чтобы уменьшить технический долг и улучшить поддержку интерактивных элементов без тяжелой клиентской логики. Разбираем архитектуру сборки из Markdown в JSON и SSR, а также причины отказа от React-обертки и проблем с CSS и поддерживаемостью.
https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/
👍9
WebSocket и SSE просто для собеседований и не только
Разбираем, чем отличаются двусторонний WebSocket и однонаправленный SSE, как устроены их рукопожатия и как правильно открывать соединения в браузере. Коротко разложено по событиям, отправке данных и обработке обрывов, чтобы уверенно отвечать на вопросы на интервью.
https://habr.com/ru/articles/1021414/
Разбираем, чем отличаются двусторонний WebSocket и однонаправленный SSE, как устроены их рукопожатия и как правильно открывать соединения в браузере. Коротко разложено по событиям, отправке данных и обработке обрывов, чтобы уверенно отвечать на вопросы на интервью.
https://habr.com/ru/articles/1021414/
❤15👍3🤣1
Компонентная библиотека под ваш проект
Доступные компоненты для Astro и Tailwind CSS, которые добавляются через CLI и остаются под вашим контролем. Быстрый старт с npx bearnie init и дальнейшая настройка, расширение и сборка своей библиотеки.
https://bearnie.dev/
Доступные компоненты для Astro и Tailwind CSS, которые добавляются через CLI и остаются под вашим контролем. Быстрый старт с npx bearnie init и дальнейшая настройка, расширение и сборка своей библиотеки.
https://bearnie.dev/
👍7❤2👎2🔥2
33 ключевых концепта JavaScript для глубокого понимания
Пошаговый гайд по JavaScript core с примерами, диаграммами и проверками знаний: от scope и closures до event loop, async и DOM. Подходит для прокачки знаний и подготовки к интервью, плюс есть удобная документации.
https://33jsconcepts.com/
Пошаговый гайд по JavaScript core с примерами, диаграммами и проверками знаний: от scope и closures до event loop, async и DOM. Подходит для прокачки знаний и подготовки к интервью, плюс есть удобная документации.
https://33jsconcepts.com/
👍10❤8🥴2🔥1
Как собрать кубик Рубика в браузере на чистом Canvas
Пошаговый туториал по созданию 3D кубика на Canvas без Three.js: от проекции и вращения граней до перехода к полноценной интерактивной симуляции, которую можно крутить прямо в браузере.
https://habr.com/ru/companies/ruvds/articles/1035748
Пошаговый туториал по созданию 3D кубика на Canvas без Three.js: от проекции и вращения граней до перехода к полноценной интерактивной симуляции, которую можно крутить прямо в браузере.
https://habr.com/ru/companies/ruvds/articles/1035748
❤5👍2🔥2
GemShell: превращаем HTML5 игры в нативные приложения
Портируйте HTML5 игры в нативные без потерь. Подходит для фронтенд разработчиков, которые хотят выпускать web проекты как полноценные приложения.
https://gemshell.dev
Портируйте HTML5 игры в нативные без потерь. Подходит для фронтенд разработчиков, которые хотят выпускать web проекты как полноценные приложения.
https://gemshell.dev
1🔥8👍6❤3👏2🎉2
Диапазоны медиа-запросов CSS
Range queries в CSS 4 делают адаптивные стили читаемыми и предсказуемыми: вместо ловушек с одинаковыми breakpoints используйте выражения вида 300px <= width <= 500px и ускоряйте отладку ваших макетов.
https://ishadeed.com/article/range-syntax/
Range queries в CSS 4 делают адаптивные стили читаемыми и предсказуемыми: вместо ловушек с одинаковыми breakpoints используйте выражения вида 300px <= width <= 500px и ускоряйте отладку ваших макетов.
https://ishadeed.com/article/range-syntax/
🔥11❤5👏2🎉2👍1
Конец эпохи responsive images: value auto для sizes
Атрибут sizes с auto делает разметку адаптивных изображений заметно проще и убирает главный источник боли при подборе значений, а пользователи получают более незаметную и потенциально более быструю загрузку.
https://piccalil.li/blog/the-end-of-responsive-images/
Атрибут sizes с auto делает разметку адаптивных изображений заметно проще и убирает главный источник боли при подборе значений, а пользователи получают более незаметную и потенциально более быструю загрузку.
https://piccalil.li/blog/the-end-of-responsive-images/
👍6❤3🔥2
Таймауты сессии как скрытый барьер доступности в аутентификации
Таймауты сессии часто ломают UX для пользователей с ограниченными возможностями и тех, кто не успевает завершить действия. Разбираем, как проектировать продление сессии, предупреждения и безопасные сценарии повторного входа без потери доступности.
https://www.smashingmagazine.com/2026/04/session-timeouts-accessibility-barrier-authentication-design/
Таймауты сессии часто ломают UX для пользователей с ограниченными возможностями и тех, кто не успевает завершить действия. Разбираем, как проектировать продление сессии, предупреждения и безопасные сценарии повторного входа без потери доступности.
https://www.smashingmagazine.com/2026/04/session-timeouts-accessibility-barrier-authentication-design/
👍6❤1🔥1
От ASCII-арт до Markdown и Typst: как современные форматы делают документацию в Git удобной для людей и IDE
Markdown остаётся стандартом для инженерной документации, потому что исходник читается без рендера, а структура хранится рядом с кодом. Разбираются причины роста Markdown, зачем нужен Typst и как внедрять просмотр сложных форматов на вебе через WebAssembly.
https://habr.com/ru/companies/sberbank/articles/1024454/
Markdown остаётся стандартом для инженерной документации, потому что исходник читается без рендера, а структура хранится рядом с кодом. Разбираются причины роста Markdown, зачем нужен Typst и как внедрять просмотр сложных форматов на вебе через WebAssembly.
https://habr.com/ru/companies/sberbank/articles/1024454/
👍5❤2
Build-time микрофронтенды, или как упростить поддержку витрин
Build-time микрофронтенды через npm-пакеты помогают собрать разные фичи в единое приложение на этапе сборки, сохраняя SSR и SEO без переезда на новый фреймворк.
https://habr.com/ru/companies/ru_mts/articles/1034374/
Build-time микрофронтенды через npm-пакеты помогают собрать разные фичи в единое приложение на этапе сборки, сохраняя SSR и SEO без переезда на новый фреймворк.
https://habr.com/ru/companies/ru_mts/articles/1034374/
👍7❤2
Почему я больше не цепляю все подряд в JavaScript
Часто цепочки ухудшают читаемость и мешают вставлять промежуточное логирование, а ясные имена переменных и явные шаги делают код проще для отладки и поддержки.
https://allthingssmitty.com/2026/04/20/why-i-dont-chain-everything-in-javascript-anymore/
Часто цепочки ухудшают читаемость и мешают вставлять промежуточное логирование, а ясные имена переменных и явные шаги делают код проще для отладки и поддержки.
https://allthingssmitty.com/2026/04/20/why-i-dont-chain-everything-in-javascript-anymore/
🤮8❤7👎3👍2
Проверьте, готов ли ваш сайт для AI агентов
Сканируйте сайт по 5 категориям: discoverability, доступность контента, контроль доступа для ботов, обнаружение протоколов вроде MCP и OAuth, а также агентская коммерция. Начните с быстрых улучшений: корректный robots.txt с правилами для AI, sitemap директивы и полезные discovery заголовки или метаданные на главной.
https://isitagentready.com/
Сканируйте сайт по 5 категориям: discoverability, доступность контента, контроль доступа для ботов, обнаружение протоколов вроде MCP и OAuth, а также агентская коммерция. Начните с быстрых улучшений: корректный robots.txt с правилами для AI, sitemap директивы и полезные discovery заголовки или метаданные на главной.
https://isitagentready.com/
👍7🤡5❤1🔥1🥴1
Современный шаблон админки на React TypeScript и shadcn ui
Готовый лендинг и админский интерфейс с React, TypeScript, Vite, Next.js, Tailwind и shadcn ui v3, который удобно форкать и быстро адаптировать под свой продукт.
https://github.com/shadcnstore/shadcn-dashboard-landing-template
Готовый лендинг и админский интерфейс с React, TypeScript, Vite, Next.js, Tailwind и shadcn ui v3, который удобно форкать и быстро адаптировать под свой продукт.
https://github.com/shadcnstore/shadcn-dashboard-landing-template
👍9❤3🥴3
Массивы, объекты и теперь composites
Composites решают боль с сравнением объектов и использованием их как ключей: две структуры с одинаковыми данными считаются равными даже при разном порядке ключей. Это практичный шаг в сторону более надежной работы с составными значениями в JavaScript.
https://frontendmasters.com/blog/arrays-objects-now-composites/
Composites решают боль с сравнением объектов и использованием их как ключей: две структуры с одинаковыми данными считаются равными даже при разном порядке ключей. Это практичный шаг в сторону более надежной работы с составными значениями в JavaScript.
https://frontendmasters.com/blog/arrays-objects-now-composites/
🔥10❤4👍3
Jest 30.4.0 сильный релиз для тестирования JavaScript
Jest 30.4.0 улучшает поддержку ESM, добавляет акценты вокруг Temporal и лучше работает с React 19, чтобы тесты были стабильнее и ближе к реальному окружению.
https://github.com/jestjs/jest/releases/tag/v30.4.0
Jest 30.4.0 улучшает поддержку ESM, добавляет акценты вокруг Temporal и лучше работает с React 19, чтобы тесты были стабильнее и ближе к реальному окружению.
https://github.com/jestjs/jest/releases/tag/v30.4.0
🥴7❤6🔥5👍3
Wakaru: разбор минифицированных JavaScript бандлов на модули
Инструмент принимает минифицированный бандл и возвращает читаемую структуру модулей, помогая восстановить код, провести reverse engineering или аудит безопасности. Можно использовать онлайн, чтобы быстро понять, что внутри сборки.
https://github.com/pionxzh/wakaru
Инструмент принимает минифицированный бандл и возвращает читаемую структуру модулей, помогая восстановить код, провести reverse engineering или аудит безопасности. Можно использовать онлайн, чтобы быстро понять, что внутри сборки.
https://github.com/pionxzh/wakaru
👍8🤔2🔥1💯1
OpenSkills CLI для Anthropic skills во всех AI coding агентах
Один CLI инструмент переносит skills систему Anthropic в любые агенты, которые умеют читать AGENTS.md, включая Claude Code, Cursor, Windsurf, Aider и Codex. Ускоряет настройку контекста и делает поведение агента предсказуемым.
https://github.com/numman-ali/openskills
Один CLI инструмент переносит skills систему Anthropic в любые агенты, которые умеют читать AGENTS.md, включая Claude Code, Cursor, Windsurf, Aider и Codex. Ускоряет настройку контекста и делает поведение агента предсказуемым.
https://github.com/numman-ali/openskills
👍8🥴5🤮2❤1👌1🌚1
MDXEditor как удобный редактор Markdown и MDX для React
MDXEditor это open source React компонент для редактирования Markdown в стиле Google Docs и Notion с поддержкой contentEditable, подсветкой кода через CodeMirror и настройкой языков блоков. Можно гибко управлять выводом в markdown включая маркеры списков и символы для выделения, чтобы форматирование совпадало с вашим пайплайном.
https://mdxeditor.dev/
MDXEditor это open source React компонент для редактирования Markdown в стиле Google Docs и Notion с поддержкой contentEditable, подсветкой кода через CodeMirror и настройкой языков блоков. Можно гибко управлять выводом в markdown включая маркеры списков и символы для выделения, чтобы форматирование совпадало с вашим пайплайном.
https://mdxeditor.dev/
👍10❤4🔥1
5 лучших альтернатив DataForSEO на 2026 год
Подборка без воды для GEO, AEO и SERM: сравнение топ сервисов вроде SE Ranking, Bright Data и SerpAPI с фокусом на то, что важно для фронтенд команд при интеграции и работе с данными.
https://www.sitepoint.com/5-best-data-for-seo-alternatives-a-senior-expert-breakdown
Подборка без воды для GEO, AEO и SERM: сравнение топ сервисов вроде SE Ranking, Bright Data и SerpAPI с фокусом на то, что важно для фронтенд команд при интеграции и работе с данными.
https://www.sitepoint.com/5-best-data-for-seo-alternatives-a-senior-expert-breakdown
Sitepoint
5 Best DataForSEO Alternatives 2026: SE Ranking, SerpAPI…
Looking for DataForSEO alternatives for GEO, AEO, or SERM work? Here's a no-fluff comparison of the best options including SE Ranking, Bright Data, SerpAPI, etc.
❤4👍1🔥1