Русский
Открыть в Telegram
ААлексей Соин · zencod.ru

Алексей Соин · zencod.ru

@zencod · канал · в индексе с 29.09.2026
19подписчиков
1 024постов в индексе
А
Алексей Соин · zencod.ru
Фотография
Моя коллекция полезных HTML-фич Набор практичных HTML-атрибутов и приёмов для ускорения загрузки и декодирования изображений, корректной локализации текста для скринридеров и удобного отключения интерактивных элементов без костылей. Подойдёт тем, кто хочет прокачать фронтенд на уровне разметки и легко внедрить улучшения в существующие проекты. https://habr.com/ru/companies/ruvds/articles/1021090
13 ·
А
Алексей Соин · zencod.ru
Фотография
Палитра команд для UI: как победить хаос в много модульных интерфейсах Показываем, как единая строка поиска команд по примеру VSCode резко упрощает навигацию в интерфейсах с десятками модулей и скрытыми действиями. Идея помогает уйти от инструкций вида открой слева категорию и найти нужную кнопку в бесконечных меню. https://habr.com/ru/articles/1021812/
17 ·
А
Алексей Соин · zencod.ru
Фотография
Baseline март 2026: 12 браузерных фич, которые уже можно брать в прод В марте 2026 появилось много Widely available возможностей, включая Clear-Site-Data для управляемого сброса кэша и хранилищ, а также новые CSS и WebAPI. https://habr.com/ru/articles/1018200/
14 ·
А
Алексей Соин · zencod.ru
Ссылка
нажмите — покажем
История ffmpeg Видео невыходного дня. Интересный ресёрч на тему того, как небольшая опенсорс библиотека стала основой для огромного числа других проектов. И какие люди за этим стоят. Если что, вы пользуетесь ffmpeg каждый день, даже если не знаете про это. https://youtu.be/Ww8MzcBJUd4
1 · 18 ·
А
Алексей Соин · zencod.ru
Фотография
Соглашения именования дизайн-токенов: практическое руководство. Стюарт Робсон рассказывает, как называть токены, которые масштабируются между командами и продуктами. Он разбирает три уровня токенов (примитивы, семантические и компонентные) и пять подходов к именованию, от категория-свойство-модификатор до многоуровневых структур. Ключевые принципы: единообразие важнее идеала, ясность важнее краткости, смысл важнее визуального описания. #design #component https://www.alwaystwisted.com/articles/design-token-naming-conventions
16 ·
А
Алексей Соин · zencod.ru
Ссылка
нажмите — покажем
От legacy-монолита к микрофронтендам: архитектура современного SPA https://habr.com/p/1036296/
12 ·
А
Алексей Соин · zencod.ru
Видео
IMG_9841.MP4 · 7.5 МБ
Я знаю, чем вы займетесь вечером: с создателем С++ вышло большое двухчасовое интервью 😨 — Бьёрн Страуструп в нем рассказывает об истории С++, о том, что нужно, чтобы создать свой язык, да и вообще нужно ли создавать его сейчас в эпоху ИИ (да); — Про нейросети он, кстати говорит, что ИИ хорош в небольших задачах, которые вы уже сто раз делали. Гений не против нейронок — их, например, можно использовать для документации (хотя и это нужно проверять кожаным разработчикам). — Но при этом ИИ опасен в генерации критически важного кода: модели создают не оптимизированные и дырявые решения, которые невозможно проверять. Самое смешное — он знает сеньоров, которые уходят на пенсию, так как не хотят разбирать этот нейрослоп. Также он говорил о своей мотивации, давал советы и порекомендовал книги для изучения C++. Вообще интервью вышло очень ламповым. Смотрим 🍿
11 ·
А
Алексей Соин · zencod.ru
Фотография
Точные размеры резиновых блоков с round(). Ахмад Шадид рассказывает, как CSS-функция round() дополняет clamp(), округляя плавные значения до удобных шагов, избавляя от дробей вроде 19.7px. Он разбирает размеры шрифтов в карточках, системы типографики и базовые сетки, показывает round() с единицами от контейнера для сохранения визуального ритма при изменении вьюпорта. Также упоминает calc-size() для синхронизации высот соседних блоков. #css #typography https://ishadeed.com/article/css-round/
15 ·
А
Алексей Соин · zencod.ru
Фотография
Массивы, объекты и теперь composites Composites решают боль с сравнением объектов и использованием их как ключей: две структуры с одинаковыми данными считаются равными даже при разном порядке ключей. Это практичный шаг в сторону более надежной работы с составными значениями в JavaScript. https://frontendmasters.com/blog/arrays-objects-now-composites/
16 ·
А
Алексей Соин · zencod.ru
Фотография
Представляем путеводитель по grid lanes. Джен Симмонс анонсирует новый интерактивный гайд по CSS grid lanes. Можно поиграть с песочницей в режимах Waterfall и Brick, разобраться в размерах треков через fr, minmax() и repeat(), а ещё пройтись по шести демо: фотографии, рецепты, газеты, меню, таймлайны и пинборды. Лучше всего работает в Safari 26.4+. #css #layout https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/
12 ·
А
Алексей Соин · zencod.ru
Проект nginx опубликовал JavaScript-модуль njs 1.0.0 Опубликован выпуск njs 1.0.0, модуля для интеграции интерпретаторов языка JavaScript в http-сервер nginx. Njs позволяет использовать сценарии JavaScript в файлах конфигурации для расширения возможностей nginx. Скрипты могут использоваться для определения расширенной логики обработки запросов, формирования конфигурации, динамической генерации ответов, модификации запроса/ответа или быстрого создания заглушек с решением проблем в web-приложениях. Код проекта написан на Си и распространяется под лицензией BSD. Подробнее: https://opennet.ru/65761/ https://opennet.me/65761/
8 ·
А
Алексей Соин · zencod.ru
Фотография
A11y​.quest: 128 вопросов, чтобы прокачать навыки доступности. Дэйв Дэвис сделал интерактивный тест, проверяющий знания по семантическому HTML, ARIA и другим темам. Вопросы отсортированы по сложности, их можно перемешивать и отслеживать точность ответов и серии. #a11y #html https://a11y.quest/
11 ·
Алексей Соин · zencod.ru
Фотография
FM-синтез звука в браузере. Часть 1 Рассмотрим возможности браузеров по синтезу звука. Разберём основы и в качестве практического применения сделаем эмулятор синтезатора Yamaha DX7. Сложно, сложно https://habr.com/ru/articles/1052640
13 ·
А
Фотография
HTTP получил метод QUERY: зачем понадобился безопасный запрос с телом В HTTP стандартизировали QUERY — безопасный и идемпотентный метод чтения, где сложные параметры передаются в теле запроса, а не в URI. https://habr.com/ru/articles/1055310/
15 ·
А
Алексей Соин · zencod.ru
Фотография
Мутанты на проводе или Всевидящий MutationObserver — Когда мир перестаёт быть реактивным, остаётся только наблюдать — TL;DR:  Иногда не нужно менять архитектуру. Достаточно наблюдать и DOM сам расскажет, что произошло. Давненько у нас не было фронтовых баек, а пожалуй что вот оно! 👩‍💻 Уютный мир: ламповый laravel, приятные vue-компоненты, встроенные в шаблоны. Всё живёт в безмятежном неведении надвигающейся катастрофы. 👩‍💻 Но тут появляется внешний JS-скрипт, который начинает управлять состоянием vue-компонента извне. В частности - открывает попап, а vue-форма внутри должна менять своё поведение. Должна, но не может! Классические приемы не работают: 🤦‍♂️ — Пропсы не пробросить - компонент уже смонтирован; — События не проэмитить - нет родителя; — Пересоздавать компонент с переносом логики - слишком жирно. Да и внешний скрипт менять нельзя. Можно было бы отчаяться и уйти из IT на ферму кроликов разводить, но на помощь приходят мутанты-наблюдатели! 🐢 Да, MutationObserver - наше спасение. Всевидящее Око Саурона в мире DOM. Создаём наблюдателя. Теперь он в засаде и зорко наблюдает за всеми изменениями у родителя: const component = el.parentElement as HTMLDivElement | null; let observer: MutationObserver | null = null; onMounted(() => { observer = new MutationObserver(() => { if (component.classList.contains('popup_active')) { // наша логика } }) observer.observe(component, { attributes: true, attributeFilter: ['class'], }); }); Но что бы наблюдатель был не слишком наблюдателен, ограничим его кругозор через фильтр: attributeFilter и следим строго за классом. Ну и, конечно, по-джентльменски освобождаем наблюдателя при смерти компонента. onUnmounted(() => {  observer?.disconnect();  observer = null; }); Если состояние меняется вне зоны реактивности компонента - это не приговор. Мутанты среди нас, и они всегда помогут! ❤️ #vue #mutationobserver #javascript #frontend #web #разработка
12 ·
А
Алексей Соин · zencod.ru
Фотография
Шпаргалки по флексам, гридам, anchor positioning и invoker commands. Килиан Валкхоф делится четырьмя CSS-шпаргалками, которые сделал, потому что постоянно забывал синтаксис anchor positioning и grid-area. Каждая — справочник со свойствами и значениями по своей теме, чтобы держать под рукой. Их можно бесплатно скачать в PDF и PNG в формате A5, готовом к печати. #css #learn https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/
16 ·
Алексей Соин · zencod.ru
Фотография
toast-queue для доступных toast-уведомлений Лёгкая framework-agnostic библиотека для toast-уведомлений с нормальной доступностью, очередью и прогрессивным улучшением. Она берёт на себя показ, скрытие, позиционирование, лимит видимых тостов и объявления для screen reader, так что в приложении остаётся только вызвать add(). На практике удобно, что можно отправлять как простой текст, так и объект с title, description и action, а поведение настраивается и глобально для очереди, и точечно для каждого тоста. https://toast-queue.js.org
1 · 5 ·
Фотография
Как сделать SVG-иконки живее с squash and stretch Разбор приёма squash and stretch для SVG-микроинтеракций. Он помогает сделать иконки и стрелки более естественными и заметными без тяжёлой анимации: можно анимировать path через CSS, а для более широкой поддержки использовать Motion. Практически это даёт более приятный hover-эффект, учитывает prefers-reduced-motion и лучше работает, если вместо обычного state-based hover запускать короткую анимацию по событию. https://www.joshwcomeau.com/animation/squash-and-stretch/
5 ·
А
Ссылка
нажмите — покажем
<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому внутрь можно передать синтаксис Mermaid-диграммы — и она нарисуется. Если не знаете, что такое Mermaid, то это как раз тулза, которая превращает текст вида sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! в Sequence-диаграмму. И там ещё более 30 разных видов диаграмм, которые мы периодически используем в работе. https://www.bram.us/2026/09/10/introducing-mermaid-element-a-custom-element-to-display-mermaid-diagrams/
6 ·
А
Алексей Соин · zencod.ru
Будь осторожнее с SDD Сейчас идёт пик хайпа SDD (Spec Driven Development). Это подход, при котором написанию кода предшествует создание спецификаций (далее - спек), использующихся основой для агентов при генерации кода. На каждой конференции минимум один доклад об этом, всё больше историй успеха, что всю компанию полностью перевели на Agentic SDLC (простыми словами, процесс разработки с помощью агентов), во многих компаниях начинают добровольно-принудительно внедрять этот подход на основе различных фреймворков (OpenSpec, Superpowers, Spec Kit, gsd и т.д.). Но, на мой взгляд, внедрение ради внедрения ни к чему хорошему не приведёт, а только увеличит time-to-market фичей, ухудшит качество и станет источником появления тонны слоп-текста. Сразу оговорюсь, что мне очень импонирует SDD, я его очень давно использую, ещё до агентов, да и вы, скорее всего, используете. Перед написанием кода для сложных фичей пишем технические решения, проводим архитектурные встречи и оставляем какие-нибудь артефакты (типа ADR). На их основе декомпозируем большие задачи на более маленькие и пишем код. С агентами такой подход обрёл новый виток развития, так как именно через спецификацию можно более точно контролировать работу агента. Спеки перенесли в markdown-файлы (рядом с кодом), воркфлоу задаётся spec-driven фреймворками, а агенты делают ровно то, что написано в спеках. Красота. И где-то тут рождаются идеи типа описывать спеки не только верхнеуровнево для сложных фичей, а для каждой задачи. Полгода назад, когда я познакомился с OpenSpec (плагин для агентов, предоставляющий механизм работы по SDD и формированию всех артефактов), я побежал его тестировать на сайд проектах. И оказалось, не всё так радужно, как изначально хотелось бы. Пройдёмся по основным проблемам: 1️⃣ Многие фреймворки (тот же OpenSpec) генерируют main-спецификации (которые описывают актуальное состояние приложения/сервиса/системы) и транслируют идею, что спецификация становится источником истины, а не код. Не только в… Читать полностью →
4 ·

Открытая публичная лента из поискового индекса ChatCrawler — «Google по публичному Telegram»; обновляется по мере обхода площадки. Время — UTC.

Только публичный контент, официальный API Telegram. О проекте · Вопросы · Границы индекса · Убрать страницу из выдачи · Каталог · Поиск · Как мы считаем