Коля Шабалин и великий аттрактор кода
338 subscribers
230 photos
2 videos
328 links
Некий Коля Шабалин рассказывать про фронтенд, обучение, CSS-спецификации и фичи

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

Поддержать на Бусти - https://boosty.to/css-space
Download Telegram
Межгэповые декорации

Мы постоянно используем gap и в грид‑, и во флекс‑контексте благодаря спецификации CSS Box Alignment Module Level 3.

Чтобы красиво оформить пустоту, появившуюся благодаря gap, приходилось прибегать к множеству псевдоэлементов и порой нелёгкой математике в calc(), чтобы полосы внутри gap не накладывались друг на друга.

Вчера вышла в черновике спецификация CSS Gap Decorations Module Level 1, которая позволяет рисовать внутри gap полосы — и всё это без математических расчётов и псевдоэлементов: новые свойства автоматически обрезают линии в нужных местах.

Посмотрите примеры в статье:
👉 https://shabalin.online/blog/css/gap-decoration/
🔥82👍1
139 Firefox станет первым браузером с Temporal

👉https://shabalin.online/blog/javascript/firefox-first-browser-temporal/

Temporal — это новая встроенная API JavaScript, пришедшая на смену устаревшему Date. Она даёт неизменяемые объекты для дат, времени, часовых поясов и длительностей, устраняет баги со скрытой тайм‑зоной и упрощает арифметику («плюс месяц», «разница в днях») без сторонних библиотек.
🔥91
Напишу микросервис недорого

Сегодня провёл лайв для курса по node.js =)

В блоге вышла ещё одна статья, но я хочу оформить её как следует. Позже расскажу подробнее
🔥12
Цветной вывод в Node.js

Только сегодня узнал, что в 21 версии ноды появилась нативная возможность красить вывод в терминал. Я всегда использовал для этого либо picocolor, либо chalk.

import { styleText } from 'node:util';

console.log(styleText('magenta', 'Привет, мир!')); // фиолетовый текст
console.log(styleText('bgGreen', 'Успех!')); // зелёный фон
console.log(styleText('redBright', '🔥 Срочно чиним!')); // ярко-красный


А если хотите больше деталей, то добро пожаловать
👉
http://shabalin.online/blog/javascript/tips/node-styles/
🔥4👍1
Какие А-уровни по WCAG нужны на проекте

Наверняка слышали про уровни доступности по WCAG: A, AA, AAA. Это на вас не кричат, это вы повышаете доступность вашего интерфейса

С этими уровнями не всегда понятно к какому уровню стремиться. Хочется ААА, но он почти недостижим и требует огромных трудозатрат. Может тогда АА подойдёт? Всё так!

А почему можно почитать в заметочке
👉 https://shabalin.online/blog/ally/wcag-level-a/
🔥4
CSS Hell

Отличная игра на знание CSS. Нужно передвинуть кружочки в нужное место, используя одно или два свойства.

https://csshell.com/
🔥5
Compute Pressure Level 1

Спецификация Compute Pressure Level 1 позволяет следить за нагрузкой процессора.

У нас появляется возможность следить за пятью значениями:
- nominal: Всё хорошо, запас мощности.
- fair: Нагрузка умеренная, автономность может падать.
- serious: Процессор сильно греется, возможен троттлинг.
- critical: Устройство близко к пределу — пора снижать нагрузку.

И в связи с этим замедлять процессы, например отдавать похуже качество видео или замедлять частоту кадров

Подробненько тут
👉 https://shabalin.online/blog/javascript/%D1%81ompute-pressure/
🔥4
Принципы доступности веб-сайтов: Перфекционизм — враг

Тут в интернете завирусились принципы доступности веб-сайтов. Решил каждый день делиться с вами.

Ничто не является и не может быть на 100 % доступным. Любой, кто заявляет, что его продукт полностью доступен, либо лжёт, либо не понимает доступности, а чаще — оба сразу. Допустимо выпускать работу с недоступными элементами, если она вскоре станет более доступной. Делайте максимально возможное в заданных ограничениях. Если ограничения неразумны — оспаривайте их. Возможно, вам кажется, что вы не лучший специалист по доступности, но вы тот, кто может сделать достуность. Не оставляйте работу несуществующим «супергероям» по доступности.


👉 https://shabalin.online/blog/ally/guiding-principles-perfection/
👍4
Принципы доступности веб-сайтов: По умолчанию или смерть

Очередной принцип от Хейдона Пикеринга

Доступность принципиально не работает в качестве плагина, дополнения или опционального состояния. Если интерфейс предлагает опцию включить доступность, он недоступен. Низкоконтрастный переключатель, включающий высокую контрастность? Считайте, что вы проиграли. Категорически не работает и не может работать программное обеспечение для наложения доступности. Добавление доступных вещей поверх недоступных вещей не решает того, что должно быть решено. Конкретные функции, предлагаемые сторонними разработчиками, несущественны. Не поддавайтесь идеологии post hoc доступности любой ценой. Минимальный жизнеспособный продукт (MVP) без доступности не является даже минимально жизнеспособным.


👉 https://shabalin.online/blog/ally/guiding-principles-default-or-death/
Принципы доступности веб-сайтов: Паритет превыше всего

Цель — не создать лучший или даже хороший опыт, а обеспечить сопоставимый опыт для разных пользователей. Интерфейсы не должны быть сложными для одних и простыми для других, хотя некоторые задачи неизбежно сложны, а контент — специфичен. Вы не выбираете, кто заинтересуется или справится. Если изображение служит шуткой, альтернативный текст не должен раскрывать её смысл или объяснять, почему смешно. Он должен передавать ту же шутку другими средствами. Шутка может быть оскорбительной или непонятной — это недостатки инклюзивности, а не доступности.


👉 https://shabalin.online/blog/ally/guiding-principles-parity-is-paramount/
Замыкания в JavaScript

Очередная статья в интернете про замыкание. Пытаюсь показать на практических примерах, где происходит замыкание.

👉 https://shabalin.online/blog/javascript/closure/
🔥12👍2
Единицы измерения lh и rlh

Недавно удалось попробовать единицы измерения lh и rlh:
- 1lh — высота одной строки текущего шрифта при заданном line-height.
- 1rlh — то же, но относительно корневого элемента, как rem по отношению к em.

что примечательно эти единицы измерения можно использовать в боксовой модели:
.element {
padding-block: 1rlh;
margin-block: 1rlh;
}


У блока будет отступ равный базовой высоте строки. Всё это позволяет удобнее создать и придерживаться вертикальному ритму.

👉 https://shabalin.online/blog/css/line-height-units/
👍6🔥4🙏1
Node.js 24 здесь

Период “Current” — ближайшие пол-года. LTS-ветка — с октября 2025 года.

Коротким списком пройдусь по обновлению:
🔥 V8 13.6: Float16Array, using для явного управления ресурсами, RegExp.escape, Memory64, Error.isError.
📦 npm 11: быстрее установка, прокачанный audit, умнее workspaces-кэш.
🧵 AsyncLocalStorage ➜ AsyncContextFrame: меньше оверхеда при трейсинге async-цепочек.
🌐 URLPattern глобально: паттерн-матчинг для URL без импорта.
🛡 Permission Model: теперь --permission, ближе к стабильности.
🧪 node:test ждёт саб-тесты сам — меньше await’ов.
⚡️ Undici 7: ещё быстрее fetch и поддержка HTTP 103 Early Hints.
🪄 Сборка под Windows: MSVC убрали, переход на ClangCL.

Чуть длиннее на сайте:
👉 https://shabalin.online/blog/javascript/nodejs-24/
👍3
Component Driven Development

Помните те времена, когда БЭМ был чуть ли не единственным способом навести порядок в интерфейсах? Мы делили всё на блоки, элементы, модификаторы, аккуратно выстраивали иерархии. В стилевых файлах — миксины, переменные, функции. А где-то рядом кто-то писал шаблоны на Jade или Pug, нарезая интерфейс на аккуратные кусочки.

Уже тогда мы начинали чувствовать: современный фронтенд перестал помещаться в рамки «одного большого файла». Интерфейсы стали сложнее, логика — богаче, а требования к поддержке и масштабированию — выше. Мы всё яснее понимали: пора собирать интерфейсы из маленьких, переиспользуемых компонентов, как из деталей конструктора LEGO.
И не просто «делить на части», а проектировать с прицелом на повторное использование, изоляцию и предсказуемость поведения.

Поддерживать такие кусочки проще. А ещё за ними приятно ухаживать, вычищать мелкие баги, добавлять небольшие улучшения — как садовник, который знает каждый кустик в своём дворе.

Сегодня хочу поделиться мыслями о компонентном подходе — не как о модном термине, а как об обязательной практике для любого серьёзного проекта. Ведь без него современный фронтенд — как машина без моторчика: вроде выглядит знакомо, но далеко не уедет.

Всё там же
👉 https://shabalin.online/blog/longrid/component-driven-development/
👍5🔥1
27 мая. PiterJS

Скоро буду выступать на митапе PiterJS с докладом View Transition API. Приходите послушать оффлайн или смотрите трансляцию.

На следующей неделе принесу анонс.

А что такое view transion API, Коля?
👍131
СберЗдоровье

Компания ищет верстальщика - https://vacancy.sberhealth.ru/vacancies/3976198

Если подходите, то откликайтесь. Пометьте, что по рекомендации Коли Шабалина идёте.
🔥5
Нейронки нейроночки мои

В новой версии VS Code(1.100) можно сфокусироваться на изображении, нажать Ctrl+ и сгенерировать alt-текст. Работает как в HTML, так и в markdown.

PS: а я продолжаю готовиться к PiterJS. Митап должен быть в следующий вторник
👍16🔥3
Forwarded from PiterJS (Ivan Voropaev)
PiterJS #78! Ну наконец-то!

Поговорим про компоненты, послушаем про View Transitions API, поучаствуем в тайной активности - и это всё в 5 метрах от дата-центра Selectel, неплохо, да?) Приходите сами, и берите ваших коллег, друзей и вторых половинок

Когда: 27 мая (вт), 19:00
📍 Где: Selectel (Цветочная ул., 19, Санкт-Петербург)

📰 Программа

🗣 Василий Беляев
🎤 Как мы компоненты оптимизировали, оптимизировали, да выоптимизировали

🗣 Николай Шабалин
🎤 Склеиваем экраны: как View Transitions API улучшает пользовательский опыт

🎤 Тайная активность

🎫 Регистрация: https://piterjs.org/#meetup=tgc5es_yh9ozv
👍51🙏1
Copilot

У меня отличные новости для одиночек! Я всегда говорил: "Проводите все изменения в проекте через пулреквесты — даже самые мелкие."
PR — это способ сосредоточиться на конкретных изменениях. Иногда по одному пулреквесту можно понять, работаете ли вы с психопатом или с нормальным человеком. =)

Сейчас в сфере ИИ происходит множество изменений. Недавно GitHub выкатил обновление: теперь в пулреквест можно пригласить Copilot. Он уже нашёл у меня несколько ошибок — это с одной стороны.
С другой стороны, мне кажется, что он просто обязан что-то найти и в любом случае что-нибудь да напишет. Прям как самый токсичный коллега на работе. =)

Чтобы позвать Copilot проверить pullrequest нужно зайти в PR. В секции "Reviewers", которая находится справа, нажать "Request" напротив Copilot. После надо лишь подождать, когда он выполнить свою работу.
👍13🔥1😁1
Как прошёл PiterJS

Привет. Вчера прошёл 78 митап PiterJS. На нём я рассказал про анимации с помощью ViewTransition API. Запись доклада есть. Чуть позже его нарежут выложат на YouTube.

Митап прошёл в Selectel. В нём, кстати, провели экскурсию для тех кто пришёл пораньше. Была отличная возможность пошататься по красивому офису и посмотреть на сервера.

Вчера ко мне подошли знакомиться очень много людей. За что я вам благодарен. Это было очень приятно. Обязательно повторяйте это в следующие разы, не стесняйтесь.

PS: Есть вероятность, что я снова появлюсь на следующем митапе PiterJS. Так что подпишитесь на их канал, чтобы следить за новостями
👍232🔥1
Кринжавини хэхэруини

это будет пост в зумерской подаче, так как у меня пропал дар речи

Я послеживал за инициативой от госуслуг "Подтвердите свои ИT‑компетенции". Инициатива помогает подтвердить ваши навыки в программировании, в том числе HTML, CSS и даже гит. В общем, всё Айтишное. Пройдя полностью секции по HTML и CSS я отхватил такого бугурта, что теперь мне придётся менять кресло. Далее по тексту держите контекст, что я пишу про секции HTML и CSS. Остальные я не смотрел.

Сама инициатива хороша. Нужно несколько итераций по улучшению процессов и самое важное - вопросов.
Одна из проблем это то, что можно просто использовать нейронку поверх браузера и подтвердить любой навык. Тут надежда, что никто в здравом уме никогда не будет считать, что человек подтвердивший навык действительно это знает и нужно перепроверять его знания самостоятельно. Адекватного решения для онлайна тут никогда не будет, к сожалению. Поэтому я просто смирился, что ничего нового не придумано.

Также у меня не совпало ожидание и реальность. Я думал госуслуги найдут экспертов и с ними совместно создадут вопросы и ответы, но оказалось, что просто взяли готовый проект hh.ru, а те видимо взяли своего разработчика и из под палки заставили создавать квизы. Любой, кто хоть как-то серьёзно пишет на навыке, который есть в hh.ru поймёт, что работа была проведена плохо. По секциям HTML и CSS, любой студент из HTML1 и HTML2 почувствует, что что-то не так =)

Из того, что бросилось в глаза:
- Автор не открывал спеку HTML5 никогда. Он до сих пор оперирует инлайновыми и блочными элементами, которые были в HTML4. Помните такой HTML4? И я нет!
- Автор считает, что если что-то находится "снизу", то это футер. Совсем забыл, что с помощью HTML мы описываем смысл текста. Визуально футер может находится хоть сверху, хоть сбоку, это не влияет на выбор html-тега
- В вопросах про HTML спрашивают про JSX. Нормальные вообще? =) В общем, там надо было выбрать className, как аналог атрибута class в HTML

- В CSS в одном из вопросов нужно было выбрать описания бесконечной анимации кручения спинера. Так в этом вопросе была два правильных ответа, но выбрать можно было один. Автор совсем не знал, что существует CSS-свойство rotate, которое в браузерах работает с 2020 года и предложил этот вариант в надежде, что это не работает, а это работает =)

- Ещё больше меня поразили вопросы в стиле "лайфхаки прожённого версталы". Такие лайфхаки, которыми мы использовали давным давно и они уже никакому современному верстальщику не нужны. Как это подтверждает навык владением CSS для меня загадка. Я рад, что современные верстальщики не страдают, а создают адаптивные интерфейсы быстро и эффективно с помощью современного API.

Ну в общем: госуслуги положились на hh, а те не смогли, так как вопросы явно создавались не под госуслуги, а под какой-то свой коммерческий продукт и к подтверждению навыка это не имеет никакого отношения. Это просто видение одного человека, которого заставили делать квизы.

Ах да. Пострадать можно тут https://www.gosuslugi.ru/itskills
🙈10🔥3👍1