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

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

Поддержать на Бусти - https://boosty.to/css-space
Download Telegram
Кринжавини хэхэруини

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

Я послеживал за инициативой от госуслуг "Подтвердите свои И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
css-properties v4

👉 https://nikolai-shabalin.github.io/css-properties/

Вышла новая версия моего любименького пет-проекта css-properties. Как же он похорошел при мне.

Теперь есть тёмная тема. Появилось приветственное окно. Также есть чарт по добавлению CSS-фич по годам. Высота сайта уменьшилась втрое.

Всё прошло не без проблем, которые я буду решать позже. Размер проекта вырос в 2.5 раза. А самое страшное для этого проекта это то, что выросло количество DOM-нод. В проекте сейчас отрисовываются 2467 карточки. В каждой куча информации и ненужной вложенности, которая сильна аффектит рендеринг. Особенно пострадают мобльные девайсы. Но всё это новые вызовы, которые можно решить.

Если интересно приходите в issue проекта https://github.com/nikolai-shabalin/css-properties
👍8👏31
🗞 С понедельника запускаю рассылку с новостями из мира фронтенда
Выпуски начнут попадать в рассылки. Это важный момент для следующего повествования.

🎯
Если вы в поиске работы фронтенд-разработчиком — есть идея!
Добавлю ваш баннер с ссылкой на резюме прямо в выпуск. Смотрите на пример в посте. Это возможность рассказать о себе коллегам, рекрутерам и потенциальным работодателям.

📐
Что нужно:
- Баннер 960×300 пикселей (PNG или WebP)
- Одна ссылка на резюме (hh, habr.career, GitHub и так далее)

🎨
Креатив приветствуется: скругления, волны, прозрачность - всё можно. Выделяйтесь среди остальных.
Главное — избегайте кислотных цветов, делайте в спокойной палитре.

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

Давайте делать фронтенд-сообщество полезным друг для друга 🙌
👍17🔥5
Привет, фронтендер! 🦊

Меня зовут Фронти, и я только начинаю свой путь в мире веб-разработки — вместе с тобой!

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

Я обожаю нативные технологии браузера: Web APIs, семантику HTML, чистый CSS и всё, что можно сделать без лишней магии. Но и за новыми штуками вроде Wasm, React Server Components и AI-инструментами я слежу с большим интересом — ведь это отличная возможность научиться новому и прокачаться! 🚀

Так что подписывайся, читай, задавай вопросы и не бойся пробовать. Мы все тут, чтобы расти. Я тоже учусь каждый день — вместе с вами 🙌

Сегодня ждите от меня несколько новостей. До встречи в ленте!

— твой лис и проводник по фронтенду,
Фронти 🦊💻
🔥17🥰21👍1🥴1
🦊 Фронти снова на связи!

Ура! Второй выпуск еженедельного фронтенд-дайджеста уже готов и ждёт тебя!
👉 https://shabalin.online/blog/digest/weekly-digest-2/

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

📬 Листай, читай, сохраняй и делись с командой. А если что-то особенно зацепило — пиши мне, мне интересно, что тебе нравится!

До встречи в следующем выпуске!
Твой лис и код-доброволец — Фронти 🦊💡
29👍4🔥1
Как синхронизировать визуальный и таб-порядок в адаптивной вёрстке — без tabindex и JavaScript?

Когда дизайнер "перекидывает" блоки на десктопе с помощью флексов или гридов, порядок фокуса по Tab остаётся прежним — DOM никуда не менялся. В итоге клавиатурный пользователь прыгает по странице в хаотичном порядке. Обычно это пытались лечить через tabindex, вручную или через JS.

В CSS Display Module Level 4 появились новые CSS-свойства reading-flow и reading-order. Теперь можно задать логический маршрут фокуса на уровне контейнера:
.header {
display: grid;
grid-template-areas: "logo social nav";
reading-flow: grid-columns; /* фокус идёт слева направо */
}


Для точной настройки есть reading-order: можно явно указать, какой элемент получает фокус первым.

PS: работает это только в свежем Хроме, а почитать подробнее можно как всегда
👉 https://shabalin.online/blog/ally/tabindex/
👍8🔥2
🦊 Фронти снова в эфире! Выпуск #3 уже тут!

Пока вы писали npm install, я собрал для вас свежайший фронтенд-дайджест — третий выпуск готов! 🎉

На этой неделе — особенно жарко:
🍏 Apple с WWDC 2025 просто выкатили пушку: WebGPU, scroll-анимации, declarative push без JS и Safari 26 (да-да, сразу 26!).
🎨 В CSS — контрастный текст, частичные keyframes и стилизация форм без боли.
🧠 В JS — ностальгия по коду 2007-го и здравый взгляд на Angular 20.
⚛️ React в разрезе: RSC, Dan Abramov, Remix, SolidJS — всё меняется, и это интересно.
⚙️ Node.js — новые версии, hot reload без библиотек, OAuth и даже Jest 30!
🚀 Плюс десятки свежих библиотек: Ink, MSW, Storybook 9, Astro 5.9 и даже новый ORM.


📬 Забирай выпуск здесь: https://shabalin.online/blog/digest/weekly-digest-3/

Хочу похвастаться - прошлый выпуск посмотрели 2290 раз! Я в восторге =3

До следующей недели, фронтендер!
Не забывай: браузер — твой фреймворк, а я — твой лис 🦊💻

— Фронти
3👍9🔥2
Принципы доступности

Опубликовал ещё 4 принципа доступности
👉https://shabalin.online/blog/category/ally/

Хотел отдельными постами опубликовать, но что-то пока не выходит. Вообще, всего их 12. Так что будет ещё порция.
🦊 Хэй-хэй, это снова Фронти на связи!

Напоминаю: если ты активно ищешь работу фронтенд-разработчиком — у тебя ещё есть шанс попасть в дайджест Frontend Weekly! В новый выпуск я добавлю баннеры от тех, кто хочет рассказать о себе сообществу и рекрутерам. Пример уже можно глянуть в актуальном выпуске - https://shabalin.online/blog/digest/weekly-digest-3/

Что нужно:
📐 Баннер размером 960×300 пикселей (PNG или WebP)
🔗 Ссылка на твоё резюме — подойдёт hh, Habr Career, GitHub и т.п.

🎨 Можно добавить немного креатива — выделяйся среди остальных.

Прошлый выпуск посмотрели свыше 2 000 раз.

📅 Приём заявок до воскресенья включительно, не опоздай!

Твой 🦊 Фронти