Принципы доступности веб-сайтов: Паритет превыше всего
👉 https://shabalin.online/blog/ally/guiding-principles-parity-is-paramount/
Цель — не создать лучший или даже хороший опыт, а обеспечить сопоставимый опыт для разных пользователей. Интерфейсы не должны быть сложными для одних и простыми для других, хотя некоторые задачи неизбежно сложны, а контент — специфичен. Вы не выбираете, кто заинтересуется или справится. Если изображение служит шуткой, альтернативный текст не должен раскрывать её смысл или объяснять, почему смешно. Он должен передавать ту же шутку другими средствами. Шутка может быть оскорбительной или непонятной — это недостатки инклюзивности, а не доступности.
👉 https://shabalin.online/blog/ally/guiding-principles-parity-is-paramount/
Замыкания в JavaScript
Очередная статья в интернете про замыкание. Пытаюсь показать на практических примерах, где происходит замыкание.
👉 https://shabalin.online/blog/javascript/closure/
Очередная статья в интернете про замыкание. Пытаюсь показать на практических примерах, где происходит замыкание.
👉 https://shabalin.online/blog/javascript/closure/
🔥12👍2
Единицы измерения lh и rlh
Недавно удалось попробовать единицы измерения
-
-
что примечательно эти единицы измерения можно использовать в боксовой модели:
У блока будет отступ равный базовой высоте строки. Всё это позволяет удобнее создать и придерживаться вертикальному ритму.
👉 https://shabalin.online/blog/css/line-height-units/
Недавно удалось попробовать единицы измерения
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/
Период “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/
Помните те времена, когда БЭМ был чуть ли не единственным способом навести порядок в интерфейсах? Мы делили всё на блоки, элементы, модификаторы, аккуратно выстраивали иерархии. В стилевых файлах — миксины, переменные, функции. А где-то рядом кто-то писал шаблоны на Jade или Pug, нарезая интерфейс на аккуратные кусочки.
Уже тогда мы начинали чувствовать: современный фронтенд перестал помещаться в рамки «одного большого файла». Интерфейсы стали сложнее, логика — богаче, а требования к поддержке и масштабированию — выше. Мы всё яснее понимали: пора собирать интерфейсы из маленьких, переиспользуемых компонентов, как из деталей конструктора LEGO.
И не просто «делить на части», а проектировать с прицелом на повторное использование, изоляцию и предсказуемость поведения.
Поддерживать такие кусочки проще. А ещё за ними приятно ухаживать, вычищать мелкие баги, добавлять небольшие улучшения — как садовник, который знает каждый кустик в своём дворе.
Сегодня хочу поделиться мыслями о компонентном подходе — не как о модном термине, а как об обязательной практике для любого серьёзного проекта. Ведь без него современный фронтенд — как машина без моторчика: вроде выглядит знакомо, но далеко не уедет.
Всё там же
👉 https://shabalin.online/blog/longrid/component-driven-development/
👍5🔥1
27 мая. PiterJS
Скоро буду выступать на митапе PiterJS с докладом View Transition API. Приходите послушать оффлайн или смотрите трансляцию.
На следующей неделе принесу анонс.
А что такое view transion API, Коля?
Скоро буду выступать на митапе PiterJS с докладом View Transition API. Приходите послушать оффлайн или смотрите трансляцию.
На следующей неделе принесу анонс.
А что такое view transion API, Коля?
👍13❤1
СберЗдоровье
Компания ищет верстальщика - https://vacancy.sberhealth.ru/vacancies/3976198
Если подходите, то откликайтесь. Пометьте, что по рекомендации Коли Шабалина идёте.
Компания ищет верстальщика - https://vacancy.sberhealth.ru/vacancies/3976198
Если подходите, то откликайтесь. Пометьте, что по рекомендации Коли Шабалина идёте.
🔥5
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
Поговорим про компоненты, послушаем про View Transitions API, поучаствуем в тайной активности - и это всё в 5 метрах от дата-центра Selectel, неплохо, да?) Приходите сами, и берите ваших коллег, друзей и вторых половинок
⏰ Когда: 27 мая (вт), 19:00
📍 Где: Selectel (Цветочная ул., 19, Санкт-Петербург)
📰 Программа
🗣 Василий Беляев
🎤 Как мы компоненты оптимизировали, оптимизировали, да выоптимизировали
🗣 Николай Шабалин
🎤 Склеиваем экраны: как View Transitions API улучшает пользовательский опыт
🎤 Тайная активность
🎫 Регистрация: https://piterjs.org/#meetup=tgc5es_yh9ozv
PiterJS
Ежемесячный питерский митап о JavaScript, Node.js и всём, что окружает современного фронтендера.
👍5❤1🙏1
Copilot
У меня отличные новости для одиночек! Я всегда говорил: "Проводите все изменения в проекте через пулреквесты — даже самые мелкие."
PR — это способ сосредоточиться на конкретных изменениях. Иногда по одному пулреквесту можно понять, работаете ли вы с психопатом или с нормальным человеком. =)
Сейчас в сфере ИИ происходит множество изменений. Недавно GitHub выкатил обновление: теперь в пулреквест можно пригласить Copilot. Он уже нашёл у меня несколько ошибок — это с одной стороны.
С другой стороны, мне кажется, что он просто обязан что-то найти и в любом случае что-нибудь да напишет. Прям как самый токсичный коллега на работе. =)
Чтобы позвать Copilot проверить pullrequest нужно зайти в PR. В секции "Reviewers", которая находится справа, нажать "Request" напротив Copilot. После надо лишь подождать, когда он выполнить свою работу.
У меня отличные новости для одиночек! Я всегда говорил: "Проводите все изменения в проекте через пулреквесты — даже самые мелкие."
PR — это способ сосредоточиться на конкретных изменениях. Иногда по одному пулреквесту можно понять, работаете ли вы с психопатом или с нормальным человеком. =)
Сейчас в сфере ИИ происходит множество изменений. Недавно GitHub выкатил обновление: теперь в пулреквест можно пригласить Copilot. Он уже нашёл у меня несколько ошибок — это с одной стороны.
С другой стороны, мне кажется, что он просто обязан что-то найти и в любом случае что-нибудь да напишет. Прям как самый токсичный коллега на работе. =)
Чтобы позвать Copilot проверить pullrequest нужно зайти в PR. В секции "Reviewers", которая находится справа, нажать "Request" напротив Copilot. После надо лишь подождать, когда он выполнить свою работу.
👍13🔥1😁1
Как прошёл PiterJS
Привет. Вчера прошёл 78 митап PiterJS. На нём я рассказал про анимации с помощью ViewTransition API. Запись доклада есть. Чуть позже его нарежут выложат на YouTube.
Митап прошёл в Selectel. В нём, кстати, провели экскурсию для тех кто пришёл пораньше. Была отличная возможность пошататься по красивому офису и посмотреть на сервера.
Вчера ко мне подошли знакомиться очень много людей. За что я вам благодарен. Это было очень приятно. Обязательно повторяйте это в следующие разы, не стесняйтесь.
PS: Есть вероятность, что я снова появлюсь на следующем митапе PiterJS. Так что подпишитесь на их канал, чтобы следить за новостями
Привет. Вчера прошёл 78 митап PiterJS. На нём я рассказал про анимации с помощью ViewTransition API. Запись доклада есть. Чуть позже его нарежут выложат на YouTube.
Митап прошёл в Selectel. В нём, кстати, провели экскурсию для тех кто пришёл пораньше. Была отличная возможность пошататься по красивому офису и посмотреть на сервера.
Вчера ко мне подошли знакомиться очень много людей. За что я вам благодарен. Это было очень приятно. Обязательно повторяйте это в следующие разы, не стесняйтесь.
PS: Есть вероятность, что я снова появлюсь на следующем митапе PiterJS. Так что подпишитесь на их канал, чтобы следить за новостями
👍23❤2🔥1
Кринжавини хэхэруини
это будет пост в зумерской подаче, так как у меня пропал дар речи
Я послеживал за инициативой от госуслуг "Подтвердите свои ИT‑компетенции". Инициатива помогает подтвердить ваши навыки в программировании, в том числе HTML, CSS и даже гит. В общем, всё Айтишное. Пройдя полностью секции по HTML и CSS я отхватил такого бугурта, что теперь мне придётся менять кресло. Далее по тексту держите контекст, что я пишу про секции HTML и CSS. Остальные я не смотрел.
Сама инициатива хороша. Нужно несколько итераций по улучшению процессов и самое важное - вопросов.
Одна из проблем это то, что можно просто использовать нейронку поверх браузера и подтвердить любой навык. Тут надежда, что никто в здравом уме никогда не будет считать, что человек подтвердивший навык действительно это знает и нужно перепроверять его знания самостоятельно. Адекватного решения для онлайна тут никогда не будет, к сожалению. Поэтому я просто смирился, что ничего нового не придумано.
Также у меня не совпало ожидание и реальность. Я думал госуслуги найдут экспертов и с ними совместно создадут вопросы и ответы, но оказалось, что просто взяли готовый проект hh.ru, а те видимо взяли своего разработчика и из под палки заставили создавать квизы. Любой, кто хоть как-то серьёзно пишет на навыке, который есть в hh.ru поймёт, что работа была проведена плохо. По секциям HTML и CSS, любой студент из HTML1 и HTML2 почувствует, что что-то не так =)
Из того, что бросилось в глаза:
- Автор не открывал спеку HTML5 никогда. Он до сих пор оперирует инлайновыми и блочными элементами, которые были в HTML4. Помните такой HTML4? И я нет!
- Автор считает, что если что-то находится "снизу", то это футер. Совсем забыл, что с помощью HTML мы описываем смысл текста. Визуально футер может находится хоть сверху, хоть сбоку, это не влияет на выбор html-тега
- В вопросах про HTML спрашивают про JSX. Нормальные вообще? =) В общем, там надо было выбрать
- В CSS в одном из вопросов нужно было выбрать описания бесконечной анимации кручения спинера. Так в этом вопросе была два правильных ответа, но выбрать можно было один. Автор совсем не знал, что существует CSS-свойство
- Ещё больше меня поразили вопросы в стиле "лайфхаки прожённого версталы". Такие лайфхаки, которыми мы использовали давным давно и они уже никакому современному верстальщику не нужны. Как это подтверждает навык владением CSS для меня загадка. Я рад, что современные верстальщики не страдают, а создают адаптивные интерфейсы быстро и эффективно с помощью современного API.
Ну в общем: госуслуги положились на hh, а те не смогли, так как вопросы явно создавались не под госуслуги, а под какой-то свой коммерческий продукт и к подтверждению навыка это не имеет никакого отношения. Это просто видение одного человека, которого заставили делать квизы.
Ах да. Пострадать можно тут https://www.gosuslugi.ru/itskills
это будет пост в зумерской подаче, так как у меня пропал дар речи
Я послеживал за инициативой от госуслуг "Подтвердите свои И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 прямо в браузере.
Вот небольшой пример:
Больше рассказал в блоге
👉 https://shabalin.online/blog/css/functions-and-mixins/
Сегодня наткнулся на спецификацию 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/
shabalin.online
Понимаем CSS Functions and Mixins Module Level 1 вместе
Узнаем о модуле CSS Functions and Mixins — новой спецификации в CSS, которая добавляет возможность создавать пользовательские функции и в будущем — миксины. Эти инструменты позволяют разработчикам задавать стили с параметрами, переиспользовать их и делать…
👍5🔥2