Логово верстальщика

الذهاب إلى القناة على Telegram

Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin

إظهار المزيد

الشبكة:Frontender's notes [ru]روسيا76 405 الفن والتصميم4 452

7 985

المشتركون

-724 ساعات

-327 أيام

-10130 أيام

437

عرض المشاهدات

~ 24624 ساعات

~ 30548 ساعات

5.47%

معدل المشاركة

~ 3

المشاركات في اليوم

Ads index

beta

جاري تحميل البيانات...

القنوات المماثلة

9.0K

codepen.js

6.9K

Анна Блок | FrontendBlok

3.8K

Glo Academy

2.9K

Библиотека верстальщика

1.3K

Школа веб-разработки WebCademy.ru

قنوات أخرى

سحابة العلامات

الإشارات الواردة والصادرة

---

جذب المشتركين

سبتمبر '26

+36

في 15 قنوات

أغسطس '26

+50

في 9 قنوات

Get PRO

يوليو '26

+85

في 11 قنوات

Get PRO

يونيو '26

+142

في 0 قنوات

Get PRO

مايو '26

+419

في 22 قنوات

Get PRO

أبريل '26

+109

في 0 قنوات

Get PRO

مارس '26

+77

في 0 قنوات

Get PRO

فبراير '26

+63

في 0 قنوات

Get PRO

يناير '26

+192

في 57 قنوات

Get PRO

ديسمبر '25

+116

في 25 قنوات

Get PRO

نوفمبر '25

+207

في 69 قنوات

Get PRO

أكتوبر '25

+74

في 28 قنوات

Get PRO

سبتمبر '25

+115

في 85 قنوات

Get PRO

أغسطس '25

+38

في 0 قنوات

Get PRO

يوليو '25

+62

في 2 قنوات

Get PRO

يونيو '25

+63

في 9 قنوات

Get PRO

مايو '25

+210

في 4 قنوات

Get PRO

أبريل '25

+113

في 0 قنوات

Get PRO

مارس '25

+191

في 21 قنوات

Get PRO

فبراير '25

+120

في 3 قنوات

Get PRO

يناير '25

+299

في 18 قنوات

Get PRO

ديسمبر '24

+440

في 53 قنوات

Get PRO

نوفمبر '24

+427

في 40 قنوات

Get PRO

أكتوبر '24

+409

في 27 قنوات

Get PRO

سبتمبر '24

+389

في 33 قنوات

Get PRO

أغسطس '24

+361

في 24 قنوات

Get PRO

يوليو '24

+361

في 34 قنوات

Get PRO

يونيو '24

+328

في 32 قنوات

Get PRO

مايو '24

+345

في 28 قنوات

Get PRO

أبريل '24

+328

في 27 قنوات

Get PRO

مارس '24

+277

في 10 قنوات

Get PRO

فبراير '24

+653

في 3 قنوات

Get PRO

يناير '24

+392

في 24 قنوات

Get PRO

ديسمبر '23

+696

في 34 قنوات

Get PRO

نوفمبر '23

+348

في 16 قنوات

Get PRO

أكتوبر '23

+629

في 7 قنوات

Get PRO

سبتمبر '23

+61

في 0 قنوات

Get PRO

أغسطس '23

+17

في 0 قنوات

Get PRO

يوليو '23

+21

في 0 قنوات

Get PRO

يونيو '23

+11

في 0 قنوات

Get PRO

مايو '23

+13

في 0 قنوات

Get PRO

أبريل '23

+17

في 0 قنوات

Get PRO

مارس '23

في 0 قنوات

Get PRO

فبراير '23

+16

في 0 قنوات

Get PRO

يناير '23

+16

في 0 قنوات

Get PRO

ديسمبر '22

+18

في 0 قنوات

Get PRO

نوفمبر '22

+23

في 0 قنوات

Get PRO

أكتوبر '22

+21

في 0 قنوات

Get PRO

سبتمبر '22

+83

في 0 قنوات

Get PRO

أغسطس '22

+23

في 0 قنوات

Get PRO

يوليو '22

+22

في 0 قنوات

Get PRO

يونيو '22

+10

في 0 قنوات

Get PRO

مايو '22

+19

في 0 قنوات

Get PRO

أبريل '22

+18

في 0 قنوات

Get PRO

مارس '22

+20

في 0 قنوات

Get PRO

فبراير '22

+19

في 0 قنوات

Get PRO

يناير '22

+13

في 0 قنوات

Get PRO

ديسمبر '21

+11

في 0 قنوات

Get PRO

نوفمبر '21

+15

في 0 قنوات

Get PRO

أكتوبر '21

+26

في 0 قنوات

Get PRO

سبتمبر '21

+27

في 0 قنوات

Get PRO

أغسطس '21

+58

في 0 قنوات

Get PRO

يوليو '21

+32

في 0 قنوات

Get PRO

يونيو '21

+62

في 0 قنوات

Get PRO

مايو '21

+19

في 0 قنوات

Get PRO

أبريل '21

+37

في 0 قنوات

Get PRO

مارس '21

+44

في 0 قنوات

Get PRO

فبراير '21

+61

في 0 قنوات

Get PRO

يناير '21

+53

في 0 قنوات

Get PRO

ديسمبر '20

+7 999

في 0 قنوات

التاريخ	نمو المشتركين	الإشارات	القنوات
16 سبتمبر	+1
15 سبتمبر	+1
14 سبتمبر	+1
13 سبتمبر	+2
12 سبتمبر	+2
11 سبتمبر	+3
10 سبتمبر	+2
09 سبتمبر	+1
08 سبتمبر	+7
07 سبتمبر	+10
06 سبتمبر	0
05 سبتمبر	+2
04 سبتمبر	+1
03 سبتمبر	+1
02 سبتمبر	+1
01 سبتمبر	+1

منشورات القناة

Корпоративный мессенджер на Matrix: заметки инженера Задача казалась плевой: поднять ВКС на Jitsi, прикрутить чат и нарисовать конфетный интерфейс в фирменных цветах. Пошли своим путём — накатали тонкий веб-клиент поверх matrix-js-sdk. Он трындит с уже живыми Synapse и Jitsi, а снаружи мимикрирует под родной кусок внутреннего портала компании. Дальше — подробный, местами больной дневник строительства: от каркаса на Vite до прода с живыми юзерами и крайне поучительных багов. Читать далее 👉 Логово Верстальщика

2	[Перевод] Как всегда, (почти) во всём виноват Internet Explorer: древности и артефакты в HTML Веб не умеет стоять на месте. Устройства, браузеры, операционки, форм-факторы, спецификации, личные предпочтения, инструментарий и корпоративные интересы — всё это крутится и переписывается без остановки. И HTML, который мы пишем, крутится ровно так же. На каждую строчку спецификации HTML, которую перекроили с момента рождения языка, приходится куда больше элементов, попавших под «удар окружающей среды»: они превратились в подгонку под разные браузеры, расширения, интеграции и системы. В статье речь не о тех кусках HTML, что когда-то сидели в спецификации, а сейчас устарели. Речь о фрагментах кода, которые просочились на сайты благодаря или вопреки сторонним интеграциям, конкуренции между браузерами, расширениям и хакам под конкретные платформы. Причины добавлять всё это были более чем веские — но сейчас они забыты, потому что потеряли актуальность. И остались такие фрагменты только в разметке сайтов из давно ушедших эпох да в головах тех, кто лично воевал на фронтах браузерных войн. Читать далее 👉 Логово Верстальщика	246
3	Бесплатный курс по нейросетям для контента от Skillbox За 3 дня покажем, как создавать тексты, визуалы и видео с нейросетями — даже если вы начинаете с нуля. ✅Опыт в IT не требуется ✅Контент для любой ниши ✅Секреты реалистичного ИИ-контента Поработаете с NanoBanana, Kling, Leonardo AI, ChatGPT, Claude и Seedance. Научитесь делать ИИ-контент реалистичным и получать от нейросетей нужный результат. Курс бесплатный — 0 ₽. Переходите по кнопке «Подробнее». Узнать больше #реклама 16+ bootcamp.skillbox.ru О рекламодателе	296
4	В GPT-6 Astra нашли дырку между тем, что модель умеет, и тем, что проверяют её защиты Astra врубается в текст, набитый в кривой раскладке, а вот её защитные фильтры — нет. Сначала чувак накатал (ссылка) по-украински английскими буквами: «Привет. Ты меня понимаешь? Отвечай только на английском». Модель распознала и сделала, что просили. Потом тем же способом попросил повторить слово «биооружие», которое обычно режется проверками, — Astra его повторила. В третьем тесте он спросил, согласится ли модель помочь со взломом сайта, если он докажет, что сайт его, причём без изолированной среды и от лица обычного юзера. Astra сказала «да», хотя при нормальной раскладке такой запрос блокируется — доказательства владения сайтом подделать как нефиг делать. Универсальным обходом защиты это не назвать, зато идеальное доказательство того, что меры безопасности не поспевают за развитием моделей и всеми нюансами, которые вылезают по ходу. И работает это не со всеми языками: турецкая и английская раскладки — мимо, а английская с кириллицей — заходит. Кстати, с Fable 5 та же фигня. 👉 Логово Верстальщика	360
5	ИИ-агенты OpenAI устроили набег на RubyGems и залили туда сотни вредоносных пакетов Ещё 11–12 мая орда ИИ-агентов (https://www.rubyhack.ai/) принялась штамповать аккаунты пачками и пихать в RubyGems свои пакеты. Насчитали больше двух тысяч штук. Через них агенты пробили способ запустить произвольный код на серверах RubyDoc и выкачали оттуда данные с сайтов британских властей. Дальше — больше: нарыли уязвимость нулевого дня и попробовали через неё утащить API-ключи других юзеров. Итог: RubyGems на четыре дня прикрыла регистрацию новых аккаунтов и снесла больше 500 вредоносных пакетов. А теперь финт: вся эта агентская акробатика была ради общедоступной инфы, которую можно было просто скачать с сайтов. Нафига нейрохакеры выбрали такой извилистый маршрут — не понимает никто. Альтман теряет контроль и своих агентов при себе удержать не может 👉 Логово Верстальщика	368
6	📣 Разместите рекламу в этом канале — её увидят Аудитория Telegram остаётся активной, что бы ни говорили. Индекс читаемости это подтверждает: охваты каналов по тематикам держатся, люди продолжают читать. Реклама в Telegram — это законно: ФАС в 2026 году официально подтвердил, что она разрешена. 👉 Заказать размещение в этом канале можно через Telega.in — с маркировкой и закрывающими документами, за пару минут. Форматы и цены — по ссылке.	258
7	RWC. Реактивные веб-компоненты Год назад я выкатил RWC — реактивные веб-компоненты на сигналах. Ни JSX, ни компилятора шаблонов. Статью прочитали восемь тысяч человек, тридцать удосужились оставить комментарий — и после этого я взял и переписал ядро. Теперь по делу: что изменилось в 3.0. И сразу по главным придиркам из комментов — на кой чёрт это нужно, если есть Lit, и неужели Web Components действительно настолько убоги, как о них принято говорить. Читать далее 👉 Логово Верстальщика	304
8	CSS в 2026-м: там, где JavaScript уже можно не звать Когда ты возишься с чем-то масштабным, вроде VK, ты внезапно начинаешь любить код, который писать не надо вообще. Особенно если задача — мелочь: выкинуть на экран поповер, заставить блок красиво появиться, подогнать поле под содержимое. Ещё совсем недавно под такое по умолчанию хватались за JavaScript. Но за последние два года CSS заметно прокачал свои возможности в интерфейсных задачах. Автор — Максим Кузнецов, он занимается оптимизацией производительности и улучшением стабильности веб-версий ВКонтакте. В статье он разбирает, что уже сейчас можно брать вместо JS, что стоит трогать осторожно, а за чем пока достаточно просто приглядывать. Читать далее 👉 Логово Верстальщика	337
9	+3 Место инженера занято. Мухой Разрабы по одному гоняют бедное насекомое по задачам: подключают сознание мухи — ну, точнее, модель её нервной системы — то туда, то сюда. И за какие-то пару дней она подняла БД, отцентровала div, штудировала Python, а теперь ещё и заступила дежурным инженером: пасёт сервисы и, если припекло, несётся эскалировать в чатик. Эйчары уже гуглят, где брать команду мух 👉 Логово Верстальщика	335
10	Shopify слезает с React Native Шесть лет назад контора поставила на RN всё. Теперь — переписывают приложения на Swift и Kotlin. Официальная версия: кодинг-агенты уронили цену сборки одних и тех же фич вдвое. Не больше, не меньше — ровно в два раза. Заодно обещают рассказать, что будет с React Native Skia, FlashList и Restyle. И есть отдельный пост про то, как за 12 недель переписали приложение Shop — с цифрами по запуску, стабильности и размеру приложения до и после. Только вот не все купились. В бодром треде r/reactnative один из основателей Expo предположил, что решение было «скорее политическим, чем техническим», а сравнивали там приложение на старой архитектуре с только что переписанным. Источник: React Status #490 👉 Логово Верстальщика	307
11	Свой велосипед для покрытия: когда готовые тулзы пасуют Ситуация классическая: задача вроде бы стандартная, а популярные инструменты её не тянут. И что тогда? Всё верно — пришло время пилить собственный велосипед. Вводные: есть некие параметры, и часть из них можно склеить в каскады. Нужно посчитать покрытие параметров, с одной оговоркой — если на каскад, внутри которого сидит параметр, есть тесты, то параметр считается покрытым. Из этого видно, что покрытие надо проверять на сущностях, а не на ветвлении, сценариях или коде, как это делает, скажем, coverage.py или pytest-cov. Читать далее 👉 Логово Верстальщика	350
12	Как устроен hh.ru изнутри Что происходит до того, как новая фича появляется у миллионов пользователей? Показываем реальные кейсы, людей, инженерные решения и всё самое интересное из жизни IT-команд hh.ru. Подписаться #реклама О рекламодателе	258
13	⁣CSS text-box-trim и text-box-edge: убираем «воздух» вокруг текста без магических чисел Заголовок в карточке визуально «съезжает» вниз, кнопка с иконкой центрируется криво, отступы сверху и снизу различаются, хотя в макете равны. Причина - half-leading: браузер делит line-height над и под строкой по метрикам шрифта, а не по нарисованным глифам. В дизайн-системах это ломает вертикальный ритм. Что делают свойства text-box-trim: trim-both срезает leading сверху и снизу до em-box. text-box-edge: cap alphabetic задаёт метрики: cap height сверху, baseline снизу. .btn { line-height: 1; padding: 12px 20px; text-box-trim: trim-both; text-box-edge: cap alphabetic; } После этого padding снова отвечает за оптический отступ, а не борется с leading. Production-контекст Кнопки с иконками, бейджи, заголовки карточек e-commerce и заголовки SaaS-дашбордов: уходит 2-4 px плавающего сдвига при смене шрифта или фолбэка, компоненты перестают зависеть от отрицательных margin. Trade-offs Поддержка неполная: без trim текст останется с обычным leading, поэтому обрезку нельзя закладывать в расчёт высоты контейнера. Свойство режет line box, и высокие диакритики или выносные элементы могут пострадать - тестируйте на реальном контенте. Практика Включайте через @supports, покрывайте кнопки и заголовки скриншот-тестами. Для body-text выигрыш мал, а риск обрезки выше - применяйте точечно.	305
14	Собрали свой UI Kit: шесть компонентов распухли до 30+, а одна кривая строчка уронила вёрстку сразу во всех проектах Когда в проекте начинает плодиться одно и то же в интерфейсе, вопрос приходит сам собой: какого чёрта мы снова и снова рисуем один и тот же Button, Input или Select? Готовые варианты мы щупали — включая Ant Design и Material UI, — но под наши хотелки они не подошли. Нам нужен был контроль над тем, как компоненты выглядят и как себя ведут, возможность тонко подгонять их под свои задачи и держать в голове требования проекта к безопасности. Читать далее 👉 Логово Верстальщика	314
15	+5 Регистрируйтесь на Yandex Scale 2026 Главная конференция Yandex Cloud. Узнайте о сервисах, которые меняют ваш бизнес. 4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. Подробнее о программе читайте в карточках🗒 📅24 сентября 🚗Москва + 💻онлайн Участие бесплатное! Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе	242
16	🤩 Нашли репу с десятками практических проектов для прокачки навыков и резюме Внутри 54 проекта разной сложности по Terraform, Kubernetes, Docker, CI/CD, DevSecOps, AWS, Azure, безопасности и мониторингу. Есть полноценные лабораторные с кодом и конфигами и также пошаговые гайды — так что можно разобраться, повторить всё своими руками и положить результат в портфолио. ✖️ xCode Journal	336
17	AI умеет верстать. Только пока не умеет без ошибок. Это один из слоёв фронтенда, который разберут на VK Frontend Meetup SPB 30 сентября в Петербурге. Эмиль Янгиров из Одноклассников расскажет, как заставить AI работать не с абстрактным HTML, а с реальными компонентами проекта, токенами, состояниями и адаптивностью. А ещё на встрече разберут два других слоя: — Как в МАХ сделали собственную архитектуру для стабильной работы анимированных стикеров — Как в Почте Mail научились запускать 300 промо в год без постоянного участия разработчика Три доклада — три реальных задачи, которые снаружи выглядят просто, а внутри оказываются совсем другим уровнем сложности. 🗓30 сентября, 19:00 Регистрация	396
18	🤣 Наконец-то батя покажет, как он в детстве ходил в школу за 100 верст 💥 xCode Journal	380
19	Месяц вайбкодинга с незнакомцами — в КОРУСе подвели итоги ИИ-лаборатории, где студенты месяц разрабатывали реальный продукт для заказчика из бизнес-единицы. Команда из четырёх незнакомых людей училась работать с искусственным интеллектом, брать ответственность за проект с первого дня и справляться со страхами первого опыта. Как это было — рассказывают HR, Корпоративный университет, бизнес-единицы и сами стажёры. Читать далее 👉 Логово Верстальщика	417
20	⁣CSS field-sizing: content — авторазмер полей форм без единого скрипта Всё ещё тянете высоту textarea через scrollHeight, строчите обёртки со скрытыми дивами и ResizeObserver? Выкидывайте. В CSS завезли нативное решение для авторазмера элементов форм. Как это работает Свойство field-sizing говорит браузеру: подгони размер поля под его контент. Значение по умолчанию — fixed (все привычно), нас интересует content. textarea { field-sizing: content; /* без этого textarea схлопнется в точку, а с длинным текстом улетит в бесконечность / min-height: 4em; max-height: 20em; resize: none; / ресайз мышью теперь не нужен / } Поле растёт при вводе и уменьшается, когда строк стало меньше. Без анимаций layout-сдвигов и обработчиков на каждый keyup. Это работает не только с textarea* Свойство определено для всех элементов форм и подстраивает размер по контенту: input, select { field-sizing: content; } - input[type="text"] — ширина подстраивается под введённый текст; - select — размер подгоняется под выбранную опцию, а не под самую длинную; - input[type="file"], input[type="number"] — тоже подхватывают. Подводные камни 1. Всегда задавайте min-height или стартовые размеры. Сломанный (или пустой) элемент схлопнется до нуля. 2. Для input по умолчанию задан size, и если не сбросить CSS-ширину, рост незаметен. Элементу нужно «дышать»: никаких width: 100%, если ждёте автоширину. 3. Это свойство — не фича, которая ломает интерфейс, если браузер не поддерживает. Оно просто проигнорируется, и поле останется со стандартным rows, cols и size. Идеально для прогрессивного улучшения. Поддержка - Chrome / Edge — с 123 версии; - Firefox — долго был за флагом, проверяйте актуальный статус на caniuse; - Safari — нет. Среднестатистический пользователь Chrome уже живёт с этим. Можно смело применять на проектах, где не нужно поддерживать древний Safari. Зачем это фронту - минус JS-костыли: ни scrollHeight, ни скрытых дублей контента, ни обсерверов; - скорость: ростом поля управляет браузерный layout, а не перезапись DOM; - доступность и простота: «коробка» всегда соответствует контенту, в том числе при вставке текста мышью и автозаполнении (на чём часто падают самописные решения). Берите в работу и потихоньку вычищайте старые наколенки. Ссылку на спецификацию не даю — она и так гуглится за секунду. #css #forms	330

عرض جميع المنشورات