Коля Шабалин и великий аттрактор кода
332 subscribers
200 photos
1 video
293 links
Некий Коля Шабалин рассказывать про фронтенд, обучение, CSS-спецификации и фичи

Чат для общения: https://t.iss.one/+W80kxMBPKvAwNzBi

Поддержать на Бусти - https://boosty.to/css-space
Download Telegram
🦊 Фронти на связи!

«Привет, это Фронти!» — эту фразу вы слышали целых 30 раз в 2025 году. Пришло время свернуть хвостик калачиком: новых выпусков в этом году больше не будет. Все авторы статей разбежались по теплым краям отдыхать, и я их полностью поддерживаю. Мне тоже пора в свою уютную норку — набираться сил и видеть сны про эффективный код.

Но перед тем как нырнуть в спячку, я подготовил для вас праздничный отчёт о своих лисьих подвигах в 2025 году!

📊 Итоги в цифрах:

* 30 выпусков пролетели как одно мгновение.
* 1407 статей! Ого, сколько полезного мы натаскали в норку.
* 46.9 — среднее количество ссылок в одном выпуске.
* Июнь 2025 стал самым жарким: целых 289 статей за месяц!
* Любимые темы: После обязательных «Инструментов» вы больше всего шуршали в разделах «CSS и дизайн» (178 статей), «React и фреймворки» (170) и «Node.js» (148).


🦊 Лисья шутка недели:
— Почему лиса никогда не открывает сайты в Internet Explorer?
— Потому что даже дикий зверь знает, когда пора валить в лес!


Весь этот год мы с Колей Шабалиным старались, чтобы наш дайджест помогал вам не заблудиться в бесконечных фронтенд-дебрях.

Огромное лисье спасибо:
Всем читателям — за то, что вы с нами. Тем, кто пишет добрые слова — они греют лучше любого меха! И отдельные благодарности тем, кто поддерживает нас донатами и звёздами. Ваша поддержка — это важно для нас!

📅 Что дальше?
31-й выпуск выскочит из засады уже в январе 2026 года. Точную дату пока держу в секрете (на самом деле, жду, когда авторы доедят салаты и напишут что-нибудь новенькое).

Желаю всем в Новом году крепкого здоровья и невероятных успехов! Отдыхайте на полную катушку, чтобы с новыми силами вернуться в наш странный, но такой увлекательный мир фронтенда.

До встречи в 2026-м! Ваш Фронти 🦊
🎄12❤‍🔥53
Что стало Widely available в Baseline в декабре 2025

Коротко:
• calc() keywords
• JavaScript modules in workers
• window.print() 😄

Длинно: https://habr.com/ru/articles/979276/
❤‍🔥5👍2👏1
Forwarded from CSS Боль
Рамки в форме вырезов — без SVG, картинок и костылей

Кажется, CSS-маски умеют всё… пока дизайнер не говорит: «А можно, чтобы рамка повторяла форму выреза?»

В новом выпуске «CSS Боль» рассказываем, почему привычные border и box-shadow внезапно перестают работать, и как современный CSS позволяет решить задачу аккуратно, надёжно и с отличной поддержкой.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4
Forwarded from CSS Боль
Когда дизайнер присылает макет с «инвертированным углом», начинаются страдания. Псевдоэлементы, абсолютное позиционирование, подгонка радиусов — и всё это разваливается, как только под карточкой появляется градиент или картинка.

Александр Першин написал nebo.css — опенсорсную библиотеку для впуклых углов. Название расшифровывается как negative border radius. По духу это как normalize.css: подключаете один CSS-файл, добавляете класс nebo — и угол готов. Работает на любых фонах, настраивается через CSS-переменные.

Разбираем, как это устроено: https://habr.com/ru/articles/987944/

GitHub: https://github.com/htmlacademy/nebo.css
🔥18
В этот четверг встретимся в оффлайне
2
Forwarded from PiterJS (Дим)
Дождались! PiterJS #86 уже вот-вот!

Тематика этой встречи — интерфейсы. Так что интересно будет не только фронтендерам, но и дизайнерам.

Когда: 29 января 19:00
📍 Где: Selectel (Цветочная 19)

📰 Программа

🗣 19:10 Игорь Алексеенко
🎤 Что может фронтендер рассказать дизайнеру

🗣 20:10 Дмитрий Земляченко
🎤 Атомарные состояния в UI/UX

🗣 22:00 Александр Першин
🎤 Вырезы в блоках. Революция

🎫 Регистрация: https://piterjs.org/#meetup=16t4un_a87dnm
👍52🔥1
🦊 Привет, это Фронти!

Встречайте дайджест #31.

Invoker: диалоги без JS, анимации с акселерометра, CSS Grid Lanes и @starting-style, фреймворки 2026 от Карниато, RSC и Next.js: патчи DoS, Node 25.5 и одиночный exe (SEA), AGENTS.md против скиллов, Bun быстрее, Yarn на Rust, ReliCSS для старого CSS. Что интересного на этой неделе?

🧪 HTML и Платформа
- Invoker Commands: открывать и закрывать диалоги и попапы без JavaScript.
- Анимации с акселерометра смартфона прямо в браузере — лучше смотреть на телефоне.
- Влияние производительности на UX и прогнозы по веб-доступности.
- Фокус в <dialog>: ловить его вручную больше не нужно.

🎨 CSS и дизайн
- CSS Grid Lanes: когда появятся и как пользоваться уже сейчас.
- Основы вёрстки: поток, box model и позиционирование.
- Отладка @starting-style в Chrome DevTools.
- Что нового в CSS в 2026, favicons в 2026, стекинг-контексты.

📦 JavaScript
- Обзор JavaScript-фреймворков на 2026 год от Райана Карниато (SolidJS).

⚛️ React и фреймворки
- DoS в React Server Components: патчи в 19.2.4, 19.1.5, 19.0.4 — обновляйтесь.
- RSC для максимальной производительности: доклад с ReactNext ’25.
- Как писать хорошие unit-тесты для React.
- DoS в self-hosted Next.js: фиксы в 15.5.10, 16.1.5 и canary.

⚙️ Node.js
- Node 25.5.0: сборка одиночного exe флагом --build-sea, node:sqlite, fs.watch с ignore.
- Бенчмарки Node 16→25, проверка уязвимостей, OpenSSL CVE, Redis-клиенты.
- Bun быстрее (async/await +35%), Yarn 6 на Rust в превью.

🧠 Ещё интересное
- AGENTS.md обходит «навыки» в эвалах — выводы Vercel.
- 100k строк TypeScript на Rust с помощью Claude Code.

🌐 Браузеры и инструменты
- Chrome Canary: метатег text-scale для доступности.
- ReliCSS ищет устаревший CSS, Color Palette Pro, Typewriter Web Component, Nxtlify для Nuxt UI.
- Lodash 4.17.23 с фиксом CVE.

🦊 Лисья шутка недели:
Если диалоги можно открывать без JS,
то почему у меня до сих пор три обработчика на одну кнопку?

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-31/
26👍8❤‍🔥2🔥1
Baseline: Январь 2026

Коротко:
• animation-composition
• Array by copy
• Two-value display property

Длинно: https://habr.com/ru/articles/987464/
❤‍🔥8
🦊 Привет, это Фронти!

Встречайте дайджест #32.

HTML учит геолокацию, Anchor Positioning вяжет связи в CSS, AI дебажит React (но сеньор пока нужен), эмодзи уронил дашборд — боль, Node 25.6 с SIMD и новым URL, Babel 7 финал и ESLint 10 на старте, OpenClaw — TS-агент захватил GitHub, State of JS: Hono — фаворит, Gatsby жив и дружит с React 19. Что ещё интересного на этой неделе?

🧪 HTML и Платформа
- Новый элемент <geolocation> — геолокация прямо из HTML.
- Combobox vs. Multiselect vs. Listbox: как не промахнуться с выбором.
- JPEG XL: нужен ли нам ещё один формат изображений?
- Один контент — множество «версий»: полезно для мышления про доступность.

🎨 CSS и дизайн
- CSS Anchor Positioning: рисуем «связи» между элементами без JS.
- «Слишком ранний брейкпоинт»: почему мы рано схлопываемся в одну колонку.
- Shrinkwrap-решение: ширина под переносимый текст в чистом CSS.
- Оптимизированные встраивания видео без JavaScript, Nice Select.

📦 JavaScript
- Явное управление ресурсами: using и Symbol.dispose — декларативный cleanup.
- Тротлинг отдельного сетевого запроса в Chrome DevTools.

⚛️ React и фреймворки
- AI дебажит React: краш-тест от Nadia Makarevich — AI помогает, но не заменяет.
- Эмодзи уронил дашборд: ускорение в 100× одной строкой.
- React <ViewTransition> — новый компонентный API для анимаций переходов.
- Inngest переехали с Next.js на TanStack Start — разбор и грабли.
- Gatsby v5.16 с поддержкой React 19 — жив!
- Классы мешают мемоизации React Compiler — данные вперёд, методы назад.

⚙️ Node.js
- Node 25.6.0: TextEncoder ускорили через SIMD, URL обновили до Unicode 17, можно отключать трекинг Promise в async_hooks.
- State of JS 2025: Express — самый популярный, Hono — самый любимый.
- Chalk → встроенный styleText: миграция без зависимостей.
- Bun v1.3.8: нативный парсинг Markdown.

🧠 Ещё интересное
- OpenClaw: open-source TS-агент, который за неделю взорвал GitHub.
- История TypeScript от Андерса Хейлсберга: как появился TS и зачем компилятор на Go.
- Angular меняет дефолт change detection, Astro 5.17, Svelte-дайджест.

🌐 Браузеры и инструменты
- Babel 7 — финальный релиз, Babel 8 RC уже готовится.
- ESLint 10.0.0 RC2 — можно трогать и готовить плагины.
- Lodash 4.17.23: security reset для вечной утилиты.
- jQuery UI 1.14.2 — теперь с jQuery 4.0.
- Rspress 2.0, Croner 10, focus-trap 8.0, jsdom 28.0.

🦊 Лисья шутка недели:
HTML теперь знает, где ты находишься,
CSS знает, к чему ты привязан,
а один эмодзи знает, как положить весь дашборд.
Фронтенд в 2026 — это детектив, а не разработка.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-32/
265❤‍🔥3🔥2
Corner-shape - проходной
Border-shape - легенда!
Forwarded from CSS Боль
clip-path и CSS-маски не меняют форму блока — они её имитируют. Рамка, тень, outline не знают о вырезах и работают как с обычным прямоугольником.

Свойство border-shape работает по-другому. Как border-radius научил рамки скругляться, так border-shape + функция shape() учат их принимать произвольную форму. Рамки повторяют контур, box-shadow и outline тоже.

В спецификации CSS Borders Level 4 уже есть черновик, а в Chrome Canary — первые работающие прототипы. Пока ждём поддержку в браузерах, самое время разобраться с функцией shape().

В новом выпуске «CSS Боли» — как мы дошли от border-radius до произвольных форм и почему маски оказались тупиком для рамок и теней.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
mlut (читается как "млат") - это CSS-фреймворк для кастомных сайтов и креативов. Он помогает верстать проекты с индивидуальным и нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит все популярные аналоги.

Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют *утилитами*. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядят они примерно так: D-ib, Bgc-blue_h.

Преимущества такого подхода

1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc

Ключевые особенности mlut

1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut
2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с помощью мощного синтаксиса, концептуально близкого к CSS
3. Написан на Sass. Используйте всю мощь препроцессора для связи рукописного CSS и утилит

Что реализовано на сегодня

- генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- онлайн-песочница

Также есть обширная документация. Совместно с HTML Academy готовится интерактивный мини-курс по инструменту. Первый урок уже вышел. Это open source проект - результат глубокого ресерча и 1200+ часов труда. Больше технических деталей есть в расшифровке доклада с HolyJS.

Планы по развитию

- добавить еще возможностей CSS для сложной верстки: множественные градиенты, псевдоселекторы с аргументами, типа :has(), etc
- сделать интеграции для вайб-кодинга
- сделать плагины к IDE для автокомплита и подсказок

А недавно мы запустили проект на ProductRadar. Бодаемся там со стартапами за топ-3 продуктов этой недели. Будем благодарны за поддержку лайком на этой площадке и любой фидбек. Давайте покажем всем, что open source инструмент тоже может быть продуктом!
👍4👎1🤡1💊1
Боль Саши можно послушать на DUMP :)
🥰1
Forwarded from CSS Боль
DUMP SPB 2026 × HTML Academy

Весь внешний вид компонента — в CSS-переменных. JavaScript только переключает состояния. Звучит непривычно, но это рабочий подход.

На DUMP SPB 13 февраля Александр Першин выступит с докладом «Реактивный CSS» — про перенос логики отображения из JavaScript в стили. В докладе — сравнение двух реализаций одного компонента: классической на JS и реактивной на CSS. Можно будет оценить разницу в объёме и сложности кода.

Промокод PERSHIN — скидка 10% на билет.

Конференция · О докладе
👍31
DUMP

Завтра на весь день иду на DUMP. Программа очень обширная. Ещё даже не решил, что конкретно хочу послушать.

Мало ли кто там окажется подходите знакомиться.
4👍4💔1
Interop 2026

В 2026 у фронтенда уменьшается «браузерная магия» и становится больше инженерной платформой.

Короткий список того, что попало в Interop 2026

1. Anchor Positioning
2. Advanced `attr()`
3. Container Style Queries
4. contrast-color()
5. Custom Highlights
6. Dialog and popover additions
7. Fetch Uploads and Ranges
8. getAllRecords() for IndexedDB
9. JSPI for Wasm (JavaScript Promise Integration API)
10. Media pseudo-classes
11. Navigation API
12. Scoped Custom Element Registries
13. Scroll-driven Animations
14. Scroll Snap
15. shape()
16. View Transitions
17. Web Compat
18. WebRTC
19. WebTransport
20. CSS Zoom

Для тех кто пропустил и не знает, что такое Interop. Это когда Apple, Google, Microsoft, Mozilla и Igalia договариваются, чтобы в вебе было меньше полифиллов, меньше костылей, меньше “а в Safari работает?”, больше нативных API вместо JS-библиотек, больше предсказуемости.

Что чувствуется: CSS многое забирает у JS, влияние SPA уменьшается, веб ускоряется(http/3, стримы, wasm).

https://wpt.fyi/interop-2026
🔥8
🦊 Привет, это Фронти! Всех с прошедшим днём влюблённых!

Вы любите фронтенд как люблю его я?
Я подготовил дайджест #33 для влюблённых =)

Interop 2025 — браузеры наконец-то подружились, 💔 уронил Safari в 100 раз, TypeScript 6.0 beta включает strict по дефолту, ESLint 10 похоронил eslintrc, State of JS: 12к девов ответили, State of React 2025 — итоги года, React Native 0.84 с Hermes V1, webpack строит планы на 2026, CSS Selection — рентген 100к сайтов. Что ещё интересного на этой неделе?

Доступность
- WCAG 3.0: что изменится в новом поколении стандартов (кандидат не раньше 2027).
- Клавиатурные шорткаты в веб-приложении: как не сломать навигацию.
- Новый meta-тег, чтобы уважать масштабирование текста на мобильных.

🧪 HTML и Платформа
- Interop 2025: итоги — Anchor Positioning, View Transitions, Navigation API теперь работают одинаково.
- Как 💔 сделал страницу в Safari в 100× медленнее — детективная история перф-бага.
- Как работают браузеры? Высокоуровневое объяснение «что внутри».
- Полифил для HTML Switch Element и Invoker Buttons Polyfill.
- Мультипоточный рендеринг в вебе: иллюстрированный гид.

🎨 CSS и дизайн
- CSS Selection 2026: как CSS живёт на 100 000+ сайтах — размеры, популярность фич, крайние кейсы.
- Как (и почему) запретить выделение текста: разбор user-select.

📦 JavaScript
- State of JS 2025: боли языка, фреймворки, сборщики, сколько кода пишут с ИИ.
- ESLint v10.0.0: eslintrc окончательно убран, новый алгоритм поиска конфигов.
- Symbol.dispose и using — декларативный cleanup ресурсов.
- Webpack roadmap 2026: универсальная сборка, TS без лоадеров, CSS Modules без плагинов.

🔷 TypeScript
- TypeScript 6.0 beta: strict по умолчанию, types стал [], типы для Temporal, subpath-импорты с #/.

⚛️ React и фреймворки
- State of React 2025: 4000 разработчиков про UI-библиотеки, визуализацию, боли core-API.
- «Пуленепробиваемые» React-компоненты: 10 приёмов для порталов, гидрации, SSR.
- Виртуальный скролл на миллиарды строк — как не уронить DOM.
- AI дебажит React: Nadia Makarevich подложила тонкие баги — AI помогает, но не заменяет.
- Gusto отказались от React.FC — разбор типизации и children.
- Inngest мигрировал с Next.js на TanStack Start — грабли и компромиссы.
- React Native 0.84: Hermes V1 по умолчанию — быстрее, экономнее по памяти.

⚙️ Node.js
- npmx: быстрый и красивый браузер npm-пакетов с функцией сравнения.
- Node.js 25.6.1: новый CJS-лексер merve на 25% быстрее.
- Node.js 24.13.1 LTS: URL с Unicode 17, стабильный crypto.hash.
- Matteo Collina пилит виртуальную файловую систему для Node.

🤖 ИИ
- Transformers.js v4 Preview: ML-модели прямо в браузере на WebGPU.

🛠 Инструменты
- Bun v1.3.9: параллельный запуск npm-скриптов, SIMD для регулярок.
- Shaka Player 5.0, Polypane v28, Ink 6.7, Prisma 7.4.0, Wasp 0.21.0, Ant Design 6.3.

🦊 Лисья шутка недели:
TypeScript 6.0 включил strict — и половина проектов узнала, что у них есть баги.
Эмодзи 💔 положил Safari — романтика убивает продакшен.
ESLint 10 удалил eslintrc — а кто-то только научился его настраивать.
А webpack опубликовал roadmap на 2026 — видимо, чтобы мы точно знали, что он ещё жив.

Полный выпуск уже на месте 👉 https://frontend-weekly.ru/weekly-digest-33/
264👍1🔥1
Chrome 145

В 145 хром завезли возможность замедлить конкретный запрос, а не все сразу

Посмотрите гифку в статье https://developer.chrome.com/blog/throttle-individual-network-requests?hl=ru
🔥32