CSS-тени. Глубина, которая действительно ощущается реалистично.

@WebDev_Plus

Изучайте программирование, играя в игры

1. Kubernetes http://k8sgames.com

2. DevOps http://devops.games

3. Linux http://overthewire.org

4. Git http://ohmygit.org

5. Python http://codecombat.com

6. CSS и HTML http://codepip.com

@WebDev_Plus

Сегодня я узнал, что можно безопасно выравнивать элементы внутри контейнера.

Это предотвратит выход контента за пределы экрана, так что пользователь не сможет прокрутить его.

@WebDev_Plus

Одна строка кода, чтобы предотвратить layout shift при изменении видимости скроллбара

@WebDev_Plus

Метод массива some() в JavaScript

Проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Если хотя бы один элемент проходит проверку — возвращает true, иначе false.

Важные моменты:
- Вызывает callback-функцию для каждого элемента массива
- Прекращает итерацию, как только условие выполнено (early exit)
- Возвращает boolean (true или false)
- Пропускает пустые слоты в разреженных (sparse) массивах

@WebDev_Plus

CSS shape() теперь входит в Baseline (новодоступная фича) → https://goo.gle/47nnZBG

Функция shape() позволяет создавать адаптивные (responsive) и сложные контуры (paths) для лэйаутов и анимаций, используя стандартные CSS-единицы, такие как %, rem и calc().

@WebDev_Plus

CSS Custom Highlight API позволяет подсвечивать результаты поиска

— без изменения структуры DOM.

::highlight(search-results) {
    background-color: #ff0066;
    color: white;
}

@WebDev_Plus

hucre — zero-dependency движок таблиц на TypeScript

Создан 8 дней назад и уже набрал 489 звёзд. Поддерживает чтение и запись XLSX / CSV / ODS, а полный gzip-бандл весит всего 18 КБ.

Другими словами, XLSX-парсер упакован в dependency-free «гаджет» размером 18 КБ.

https://github.com/productdevbook/hucre

@WebDev_Plus

Одно из моих любимых новых CSS-свойств — это anchor positioning

.trigger {
  anchor-name: --tip;
}

.tooltip {
  position: fixed;
  position-anchor: --tip;
  position-area: top center;
  position-try-fallbacks: flip-block;
}

Избавляет от сложной логики позиционирования на JavaScript, улучшает производительность.

Самое крутое — это умное перепозиционирование, чтобы избежать overflow.

Простое и чистое решение

@WebDev_Plus

CSS spacing grids обычно приводят к громоздким цепочкам calc() или куче кастомных свойств. Вместо этого можно переиспользовать редко используемую единицу rlh как короткий и гибкий токен для сетки.

@WebDev_Plus

Хочешь увидеть крутой трюк, как получить время (часы, минуты и секунды) с учётом часового пояса?

Вот он , потом поблагодаришь!

Как работает JavaScript:

Script.js
|
|------------------------------|
| Event Loop |
| Call Stack |
| Callback Queue |
| Promises |
| V8 Engine |
| Garbage Collection|
|------------------------------|
|
Async & non-blocking

@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

Нашёл 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

Границы выглядят не такими чёткими, как в Figma?

Figma рендерит внешний stroke иначе, чем браузеры — тонкие границы выглядят более чёткими и более светлыми (или тёмными).

Чтобы добиться такого же эффекта, используйте shadow вместо border.

@WebDev_Plus

Пишите более чистый CSS с помощью nesting.

Теперь в CSS можно вкладывать селекторы напрямую.
Это улучшает читаемость, делает стили более модульными и уменьшает количество повторений.

Никакой препроцессор не нужен.

Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting

@WebDev_Plus

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

Однако, если нужно точно совпасть с макетом из Figma, всё равно придётся использовать тени (shadow).

@WebDev_Plus