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

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

Поддержать на Бусти - https://boosty.to/css-space
Download Telegram
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
Функции и миксины в CSS

Сегодня наткнулся на спецификацию CSS Functions and Mixins Module. Решил полистать и немного залип. В целом, если использовали миксины и функции в препроцессорах, то теперь это будет в CSS, но гораздо мощнее, так как работает с кастомными свойствами, наследованием, каскадом и прочими способностями CSS прямо в браузере.

Вот небольшой пример:

@function --shadow(--shadow-color <color> : inherit) {
result: 2px 2px var(--shadow-color, black);
}


Больше рассказал в блоге
👉 https://shabalin.online/blog/css/functions-and-mixins/
👍5🔥2
Обновки

Телеграмм выкатил сегодня обновки. Теперь в паблики можно писать сообщение администратору. Для этого надо обновить телеграм и в левом нижнем углу появится возможность написать в "личку паблика"

А напишите чего-нибудь приятного в эту личку :3
????????

Поделюсь как я читаю дайджесты:
- Начните с заголовков статей, чтобы получить общее представление о содержании
- Быстро пробегитесь по первым абзацам, чтобы понять актуальность материалов именно для вас
- Выберите наиболее интересные или полезные темы под текущие задачи
- Планируйте чтение: выделите, например, 15 минут утром и 15 минут вечером
- Не пытайтесь прочитать всё сразу — возвращайтесь к дайджесту в удобное время
- При повторном просмотре читайте выбранные статьи более вдумчиво, делая заметки
- Не сожалейте, если прочитали лишь часть: ценность в качестве, а не в количестве
- Используйте закладки для сохранения интересных материалов
- Делитесь инсайтами и ссылками с коллегами — так информация лучше усвоится
👍7
Странные дела

Странный вчера пост вышел, да? Сейчас будет ещё страннее.

Моя короткая история дайджестов

Где-то в 2015 году я понял, что вообще никак не успеваю за развитием фронтенда. Что я только ни делал — всё равно мимо пролетали важные события, новые технологии, подходы и прочее. Тогда я решил, что надо как-то это фиксить. Я нашёл парочку дайджестов и выработал правила, следуя которым я не буду грустить. С ними я поделился в прошлом посте. Всё успеть невозможно, но нужно хотя бы двигаться вместе с индустрией.

В 2020 году я начал делать дайджесты для себя. Даже собрал базу данных с группировкой по темам, по которой мог найти пул статей на определённую тему. Золотые деньки. Тут я понял, что могу делать это регулярно и на постоянной основе. Просто так, ни для кого — а для себя.

В 2022 году я начал публиковать свои дайджесты от лица компании — но не срослось.
В 2023 году я начал публиковать дайджесты внутри компании, от лица компании — но снова не срослось.
В 2024 году я перешёл в другую команду и там продолжил постить дайджесты внутри компании для фронтендеров. Отклика было 0. Как вы поняли — не срослось.

К этому моменту я понял, что делать дайджесты от лица компании для меня не имеет смысла. Для компании это просто очередная метрика, столбик в дашборде. А я-то делаю для души. Компания позволяет делать это на большую аудиторию — которой у меня нет, а хотелось бы.

Ну что, пора начать публиковать для всех, делая это для себя. Учиться монетизировать и не расстраивать читателя.

Сегодня я выпускаю публичную бета-версию:
👉 https://shabalin.online/blog/digest/weekly-digest-1/

Посмотрите, пожалуйста, и дайте мне обратную связь. Я вам за неё буду искренне благодарен.
👍7🔥1