Web Stack
4.25K subscribers
822 photos
5 videos
1.79K links
Дайджест web разработчика: статьи, туториалы, практики и полезные инструменты.

Админ: @jem_jem
Реклама: http://bit.ly/2wZeIPj

👉 Дайджест мобильной разработки @mobile_dvlp
Download Telegram
Мокаем сложные API запросы с Mirage JS

Туториал по работе с Mirage JS — как создать фейковые серверы, модели данных и маршруты, чтобы упростить разработку и тестирование. Примеры настройки сложных сценариев.

https://blog.logrocket.com/mocking-complex-apis-mirage-js/
👍31🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
Более точная отладка производительности в DevTools

В DevTools Chrome 134 появился инструмент калибровки CPU throttling, позволяющий создавать индивидуальные пресеты для эмуляции производительности мобильных устройств. Это помогает приблизиться к реальными условиями использования, обеспечивая более точную настройку и выявление проблем производительности.

https://developer.chrome.com/blog/devtools-grounded-real-world?hl=en
4👍2🔥2
Разработка тёмной темы

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

https://www.smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/
🔥3👍1
Подробное руководство по лучшим практикам тестирования Node.js приложений

Более 50 практик, охватывающих такие темы, как стратегия тестирования, настройка БД и инфраструктуры, конфигурация веб-сервера, интеграционное тестирование, работа с данными, очереди сообщений и методы мокинга.

https://github.com/goldbergyoni/nodejs-testing-best-practices#readme
👍4
Экспериментальные функции в React: ViewTransition и Activity

Компонент <ViewTransition> позволяет легко добавлять анимации при переходах между состояниями интерфейса, используя новый API браузера startViewTransition.
Компонент <Activity> предоставляет возможность управлять отображением частей UI, скрывая или показывая их в зависимости от активности.

https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more
👍32🔥1
Эффект в форме капли при наведении

Новые возможности (доступные пока только в Chrome) использования функции shape(), позволяющие делать плавные переходы между произвольными формами на чистом CSS.

https://css-tip.com/blob-hover/
🔥3👍1😁1
Стилизация alt текста

Интересный подход от Энди Белла по оформлению альтернативного текста для изображения, которое не загрузилось.

https://css-tricks.com/you-can-style-alt-text-like-any-other-text/
👍3🔥1
Подмена входящего трафика

Скрытые, но крайне полезные фичи браузера Chrome

https://habr.com/ru/companies/sberbank/articles/923888/
🔥62
Оптимизация индексов базы данных: проблемы, решения, практические рекомендации

https://habr.com/ru/articles/925008/
👍4
Советы VS Code — Как просто восстановить удаленные файлы используя локальную историю

Быстрый способ восстановить файлы за пределами инструментов контроля версий.

https://youtu.be/7r9UwxAkQJY
👍51🔥1
Hoverify — All-in-One браузерное расширение для веб разработчиков

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

https://cssw.io/hoverify
👍42👎1
Представляем border-shape: будущее непрямоугольного веба.

Это экспериментальное CSS-свойство определяет кастомную форму границы элемента, заставляя фон, тени и контуры следовать новой геометрии.

https://frontendfoc.us/link/181213/web
5🔥1
Подробное руководство по настройке списков с помощью CSS

Разбираем свойства list-style-type, псевдоэлемент ::marker для базовой кастомизации и правило @counter-style для создания собственных систем нумерации

https://frontendfoc.us/link/181162/web
👍41🤯1
Начало работы с Popover API

Popover API позволяет браузерам нативно обрабатывать такие элементы, как тултипы, значительно сокращая объем JavaScript и улучшая доступность. Благодаря этому, сложные сценарии открытия/закрытия, взаимодействия с клавиатурой и фокусом теперь реализуются платформой, а не кастомным кодом.

https://www.smashingmagazine.com/2026/03/getting-started-popover-api/
👍32🔥2
Vite 8.0: долгожданный Rolldown

Переход на новый бандлер Rolldown, который значительно ускоряет сборку в 10–30 раз и унифицирует процесс разработки. Также релиз приносит встроенные devtools, улучшенную поддержку TypeScript и новые возможности для SSR.

https://habr.com/ru/companies/first/articles/1009646/
3👍2
Сценарное E2E тестирование для современных JS приложений

Scenetest помогает проверять продукт через inline ассерты и сценарио-оркестрацию с несколькими актерами, чтобы тесты были ближе к реальному пользовательскому пути. Подключайте Vite plugin и пишите спецификации в TypeScript или в исполняемом markdown DSL, а запуск делайте командой pnpm scenetest.

https://github.com/scenetest/scenetest-js
3👎1👌1
Адаптивная гексагональная сетка на современном CSS

Соберите повторяющуюся гексагональную сетку без медиа запросов и JS, используя flexbox, CSS переменные и современные возможности вроде corner-shape и точных вычислений для смещения рядов. Код короче, меньше магических чисел, а размер и gap управляются одной парой переменных.

https://css-tricks.com/responsive-hexagon-grid-using-modern-css/
👍2👎1
SEO и GEO в 2026 году: как настроить статический сайт на Astro с двумя языками

В статье разбирается, как собрать статический сайт на Astro так, чтобы поисковики и языковые модели видели готовый HTML, а не клиентский рендер. Показаны практики POSSE, уникальные meta, canonical и hreflang, а также редирект на нужную языковую версию для стабильного продвижения.

https://habr.com/ru/articles/1016942
🔥21🤔1
Тихие блокеры в robots.txt: как ошибки могут незаметно убрать сайт из Google

Неправильный .robots.txt может остановить обход страниц или скрыть важные директории, из-за чего контент не попадает в поиск. Разбираем типовые ошибки вроде Disallow: /, блокировок ресурсов и синтаксических опечаток, и проверяем конфиг через инструменты Google.

https://dev.to/freedevkit/the-silent-blockers-how-robotstxt-mistakes-can-ghost-your-site-from-google-12h0
🔥3🤔1
Node.js: минимальный HashDoS-устойчивый и быстро обратимый целочисленный хеш для V8

HashDoS атакует детерминированные хеши, провоцируя массовые коллизии и блокируя event loop; в релизе March 2026 для V8 добавили целочисленный хеш, который одновременно трудно предсказать и быстро инвертировать с использованием секретных ключей.

https://nodejs.org/en/blog/vulnerability/march-2026-hashdos
👍3