WebDev+ | Веб-разработка

Оставляйте видео видимым даже при переключении вкладок → https://goo.gle/3O03kNA Автоматический режим «картинка в картинке» убирает необходимость ручного переключения и решает проблему потери вовлечённости при уходе со страниц с медиа-контентом. Теперь браузер сам обрабатывает этот переход. @WebDev_Plus

Хорошие новости для веб-типографики: text-indent с ключевыми словами each-line и hanging теперь входит в Baseline Widely Available → https://goo.gle/4c7tO9j Теперь можно делать более сложные, типографские лейауты в духе печатных изданий с помощью CSS, и это стабильно работает во всех основных движках. @WebDev_Plus

Нужно отслеживать, когда элементы попадают в область видимости? 👀 IntersectionObserver вызывает колбэк, когда элементы пересекают порог видимости. Больше не нужны обработчики события прокрутки. ⋅ Ленивая загрузка изображений ⋅ Отслеживание видимости рекламы ⋅ Триггер анимаций при скролле Подробнее - https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver @WebDev_Plus

:only-child теперь матчится даже на элементы без родителя! Селектор :only-child обновили — теперь он может матчить элементы, у которых вообще нет родителя, а не только те, которые являются единственным ребёнком. Небольшое, но полезное выравнивание спецификации во всех основных браузерах. Узнать больше : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:only-child @WebDev_Plus

В следующей версии Bun Встроенный клиент WebSocket в Bun теперь поддерживает Unix domain sockets.

// Plain
const ws = new WebSocket("ws+unix:///tmp/app.sock");

// With a request path (split on first ':', same as the npm `ws` package)
const ws = new WebSocket("ws+unix:///tmp/app.sock:/api/stream?x=1");

// TLS over a unix socket
const ws = new WebSocket("wss+unix:///tmp/app.sock", {
  tls: { rejectUnauthorized: false },
});

Ранее Unix domain sockets поддерживались только в WebSocket-сервере. Теперь поддержка есть и в клиенте, и в сервере. @WebDev_Plus

navigator.credentials.preventSilentAccess() теперь широко доступен! После выхода пользователя вызывайте этот метод, чтобы предотвратить автоматический вход при следующем визите. Это особенно важно для общих устройств и сценариев с несколькими аккаунтами. Подробнее 👇 https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/preventSilentAccess @WebDev_Plus

На Stepik добавили курс «Git с нуля» Этот курс закрывает всю обязательную базу по Git для работы в IT. Подойдёт для:

- разработчиков - девопсов, админов и безопасников - аналитиков, data- и ML-специалистов - тестировщиков - всех, кто хочет уверенно работать с Git в команде

Внутри вся основа, которая реально нужна на практике: от основ системы контроля версий и архитектуры Git до работы с ветками, merge, конфликтами и GitHub. Всё сразу закрепляется на практике с помощью заданий с автопроверкой Материал подаётся простым языком, шаг за шагом, с акцентом на понимание того, как Git работает под капотом, а не просто на запоминание команд После прохождения вы получите сертификат, который можно добавить в резюме В ближайшие 48ч курс доступен со скидкой 25% по промокоду «GIT25»: открыть курс на Stepik

hyphenate-character широко доступен с 2023 года Позволяет управлять символом, который показывается в конце строки при переносе слова. По умолчанию используется auto (‐), но это можно настроить. Полезно для креативной типографики и многоязычных сайтов. https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character @WebDev_Plus

Знал про HTTP-заголовок Clear-Site-Data? 👀 Один заголовок позволяет очистить cookies, storage или cache для вашего сайта. Идеально подходит для logout-флоу. Подробнее : https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data @WebDev_Plus

Год назад не знал, что такое вёрстка. Сейчас мне платят от 50 000 рублей за сайт. График 3-4 часа в день. Работа на удалёнке. В месяц выходит 200 тыс рублей. ИИ убрал самое страшное — барьер входа. Теперь можно быстро сделать сайт через ChatGPT и довести до публикации. Роман Чернов, Fullstack-разработчик с 12-летним стажем, показывает на практике, как с помощью нейросетей зарабатывать на вёрстке сайтов и приложений. 7 дней в бесплатном доступе – пошаговые уроки, помощь кураторов и поиск клиентов. Если можешь открыть браузер — справишься. В итоге своими руками разработаешь реальный сайт, который не стыдно добавить в портфолио или продать. 👉 Проскочить на практикум бесплатно 🔥 Старт завтра.

Cпособ переключить сайт в тёмный режим С нативной и настраиваемой анимацией. Всего 2 строки JavaScript и немного CSS: → http://theme-toggle.rdsx.dev @WebDev_Plus

TypeScript в своей наиболее выразительной форме — Generics (обобщения) — Omit (исключение свойств из типа) — keyof (получение ключей типа) — Literal Union (объединение литеральных типов) Смотри, как это делает код типобезопасным 👇 #TypeScript

Большинство примеров работы с API заканчиваются простым вызовом fetch(). Но в реальных приложениях нужно учитывать медленные сети, сбои, ретраи и многое другое. В этом гайде показывает, как построить production-ready networking на JavaScript. @WebDev_Plus

Быстрый совет по React: не подписывайтесь на данные, которые вы не рендерите — это вызывает лишние ререндеры. Если данные используются только в обработчиках событий, читайте их там. AI-агенты для кодинга часто делают это неправильно. @WebDev_Plus

Только что узнал про background-clip, который решает именно эту проблему. Если установить значение padding-box, фон элемента не будет рисоваться под границей (border). Однако, если нужно точно совпасть с макетом из Figma, всё равно придётся использовать тени (shadow). @WebDev_Plus

Пишите более чистый CSS с помощью nesting. Теперь в CSS можно вкладывать селекторы напрямую. Это улучшает читаемость, делает стили более модульными и уменьшает количество повторений. Никакой препроцессор не нужен. Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting @WebDev_Plus

Границы выглядят не такими чёткими, как в Figma? Figma рендерит внешний stroke иначе, чем браузеры — тонкие границы выглядят более чёткими и более светлыми (или тёмными). Чтобы добиться такого же эффекта, используйте shadow вместо border. @WebDev_Plus

Нашёл UI-библиотеку, которая меня прям бесит. Бесит, потому что всё должно работать именно так. Oat: → 6KB CSS + 2.2KB JS → Ноль зависимостей → Не требует фреймворка → Без этапа сборки → Только семантический HTML Пишешь <button> — выглядит хорошо. Пишешь <dialog> — выглядит хорошо. Пишешь <input> — выглядит хорошо. Никакого className="px-4 py-2 rounded-md bg-blue-500" Никаких <Button variant="primary" size="md"> Просто HTML. Доступность из коробки. Поддержка навигации с клавиатуры. Тёмная тема включена. https://github.com/knadh/oat @WebDev_Plus

Alibaba фактически убила стек автоматизации браузера. page-agent.js — это GUI-агент, который работает прямо внутри веб-страницы. Никакого Selenium. Никакого Puppeteer. Никаких Chrome-расширений. Никакого Python-бэкенда. Просто один script-тег. Он читает DOM как текст (без скриншотов и мультимодальности), подключаешь любую свою LLM и выполняешь команды на естественном языке вроде «заполни эту форму» или «нажми login» — прямо внутри страницы. Юзкейсы реально мощные: → Можно встроить AI-копилота в свой SaaS буквально за несколько строк кода → Превратить 20 кликов в ERP/CRM в одно предложение → Сделать любой legacy веб-приложение доступным через голос или естественный язык 12k звёзд. Лицензия MIT. Построен поверх внутренних механизмов browser-use — но без всего лишнего сетапа. Вот как на практике выглядит «AI-native UX». https://github.com/alibaba/page-agent @WebDev_Plus

Как работает JavaScript: Script.js | |------------------------------| | Event Loop | | Call Stack | | Callback Queue | | Promises | | V8 Engine | | Garbage Collection| |------------------------------| | Async & non-blocking @WebDev_Plus