Верстальщик от бога

Docs as Code и его использование на проектах #почитать Раскрываем Docs as Code: как этот подход меняет создание документации, какие инструменты стоит изучить в первую очередь, и с чего начать внедрение. ⏱Читать статью

Введение в WebRTC #почитать WebRTC - это технология, которая позволяет браузерам и мобильным приложениям обмениваться аудио и видео в реальном времени без необходимости использования промежуточных серверов. Это делает WebRTC идеальным выбором для приложений, которым необходим функционал видеозвонков, стриминга, и аудиовызовов. ⏱Читать статью

Пятничное. Вебмастеры и реликтовый веб #почитать

"Ты помнишь, как все начиналось, Все было впервые и вновь..." Перевернем подзорную трубу и взглянем на маленький интернет конца 1990-х - начала 2000-х годов, где не было регуляторов, не было слежки, не было мошенников, а все ограничения были только техническими.

⏱Читать статью

CSS :has() — проверка наличия потомков или соседних элементов #почитать Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним. Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент. В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка. ⏱Читать статью

Лигатуры в CSS: как сделать текст аккуратнее #почитать Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали, что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости и эстетики текста. В вебе ими управляет свойство font-variant-ligatures. Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв. Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна. ⏱Читать статью

AI во фронтенде — один из самых горячих трендов в разработке Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашают на Yet Another Frontend Night 29 ноября, чтобы обсудить, как AI переворачивает фронтенд-разработку. Это событие для тех, кто уже имеет опыт в этой сфере и хочет активно использовать нейросети в своих проектах. - 5 докладов от фронтенд-разработчиков Яндекса - Активности с реальными кейсами от экспертов - Дискуссии и много нетворкинга в приятной атмосфере Нет времени думать! Скорее регистрируйтесь, чтобы услышать топовых экспертов: - Иван Артамонов (Яндекс Бизнес) — о преимуществах AI-ассистентов и реальных примерах из своей работы. - Павел Осташкин (Международная Реклама) — как создать и встроить собственный MCP-сервер в рабочие процессы. - Валерий Баранов (Яндекс 360) — как MCP-серверы снижают "галлюцинации" и делают дизайн-систему AI-ready. - Александр Иванков (Яндекс Поиск) — опыт разработки AI-помощника и подходы промпт-инжиниринга. - Андрей Дегтярев (Яндекс Браузер) — детальный разбор агентских сценариев и их практического применения. Встречаемся только офлайн 29 ноября в 15:00 в московском офисе Яндекса на Льва Толстого. Не пропустите, посмотреть записи в этот раз не получится! Регистрация и подробная программа https://events.yandex.ru/events/yet-another-frontend-night-2025

Артефакты интернета: GeoCities, «Народ», uCoz и другие хостинг-экспонаты нулевых #почитать Нескончаемые гостевые книги, яркие анимированные баннеры и счётчики визитов… В нулевых каждый компьютерный энтузиаст мечтал о «своём месте» в интернете — даже если это был крохотный персональный сайт. Для этого существовали бесплатные хостинги: GeoCities, Tripod, FortuneCity, «Народ.ру», uCoz и им подобные. Сейчас это web-артефакты, но без них вряд ли были бы возможны современные соцсети и CMS. Я решил немного поностальгировать и вспомнить, как они работали и чем запомнились. Приглашаю под кат. ⏱Читать статью

Замена YouTube Kids #почитать Что делать, когда твой ребёнок признаёт только это приложение? Вот не хочет пользоваться аналогами, и всё тут! Как убрать недостатки в такой ситуации и добавить достоинств? Об этом и поговорим. Какие недостатки YouTube Kids я хотел бы убрать? Невозможно сделать раздачу исключительно русскоязычной. Это может быть особенно плохо, например, для детей с аутизмом, у которых спец-интерес после просмотра мультиков может проявиться в английском (или любом другом) языке, с нежеланием говорить по-русски. Невозможность ограничить доступ к любым мультфильмам, кроме заданного списка. «Замедление» работы сервиса в России. Этот пункт обсуждать я не буду. Казалось бы, можно было бы пользоваться аналогичными сервисами. Но их авторы вместо того, чтобы скопировать в точности интерфейс предшественника, почему-то решают проявить творческие способности там, где они не требуется. И в результате хороший интерфейс превращается в камень преткновения: некоторые дети отказываются им пользоваться. ⏱Читать статью

Opening a Details Element from the URL #почитать Say you’ve got a page with a bunch of <details> elements on it. Your goal is to be able to send someone to that page with one particular details element open. I was doing just this recently, and my first thought was to do it server-side. If the URL was like website.com/#faq-1 I’d see if faq-1 matches an ID of the details element and I’d put the open attribute on it like <details id="faq-1" open>. But no, you don’t get to have the #hash as part of the URL server side (for whatever reason 🤷‍♀️). ⏱Читать статью

👑 Кто работает PM — тот в цирке не смеется Наша сегодняшняя рекомендация — канал с PM юмором. Мы работаем в проджект-менеджменте и уже не смеемся. Но если вас можно рассмешить — welcome в PM Humor

Если увлекаешься технологиями, не пропусти True Tech Champ 21 ноября — масштабный ИТ-фест от МТС 🔥 В программе: 📝 доклады о технологиях будущего от экспертов в ИИ, включая руководителя фундаментальных исследований MWS AI Валентина Малых; 🛻 шоу-битва роботов со спецэффектами и сюжетной линией; 📝 воркшоп по работе с ИИ-агентами от канадского разработчика и автора книги AI Agents in Action Майкла Ланэма, кодинг-практикум с MWS AI и интеллектуальный спарринг с искусственным интеллектом; ◻️ 20+ площадок с активностями: IT-Родео, робофайтинг, лазерный лабиринт и многое другое. 🔴 А в завершение дня — афтепати со звездным хедлайнером. Фестиваль бесплатный, он пройдет 21 ноября в Москве и онлайн. Смотри подробную программу на сайте и регистрируйся — количество мест ограничено.

Lottie — новый стандарт векторной анимации #почитать В области графических форматов в последнее время произошло много интересных событий. Вышла новая спецификация PNG с официальным утверждением формата анимированной графики APNG, хотя его поддержка в браузерах реализована уже довольно давно. В то же время за последние годы набрал большую популярность Lottie — новый формат векторной анимации, легковесная альтернатива анимированным GIF и APNG. Он основан на JSON и содержит текстовые описания элементов объектов и движений, с поддержкой растровых картинок, динамических скриптов и интерактивных элементов. ⏱Читать статью

Дизайн для ленивых: как интерфейсы учатся думать за пользователя #почитать Современные пользователи цифровых продуктов подсознательно стремятся к минимальным когнитивным затратам. Это порождает новый тренд — «ленивый UX», где система берет на себя рутинные решения. В этой статье разберем: - Как алгоритмы упрощают взаимодействие - Примеры удачных и провальных предугадываний - Грань между удобством и навязчивостью ⏱Читать статью

❌ «В IT сейчас работы нет» — слышали такое? А вот и нет 🙅‍♂️ Мы каждый день публикуем новые, живые вакансии с вилкой и прямыми контактами рекрутеров в телеграм. Подборки для всех направлений — от джуна до лида. Есть даже еженедельные интерншипы и стажировки для начинающих. 🔎 Выбирай свой канал: QA → @qa_work PM → @jobs_pm BA/SA → @analytics_jobs .NET → @job_dotnet DS/ML → @dsml_jobs PHP → @work_php Java → @java_dev_job Python → @jobrocket_python 🧩 Или подпишись сразу на все

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

Bounce Rate в веб-дизайне: как удержать пользователей на сайте #почитать Вы замечали, что посетители быстро покидают ваш сайт, едва заглянув на него? Это может быть связано с высоким bounce rate (показателем отказов) — процентом пользователей, которые ушли, не совершив никаких действий. Разберём, почему это происходит и как улучшить ситуацию через грамотный дизайн. В данной статье разберем: - Что такое bounce rate и как его рассчитывают? - Основные причины высокого bounce rate - Влияние bounce rate на SEO - Мифы о bounce rate - Инструменты для отслеживания и анализа bounce rate ⏱Читать статью

Как создать нечитаемый слайдер для Вашего сайта, или свойство BlurText, которого нет #почитать

На просторах сети немало сайтов, и у значительной их части на главной странице находится ОН — Самый Главный Слайдер. Как правило, у него есть некоторый набор отличительных черт: он большой, у него красивые картинки, он содержит очень важную информацию! А самое главное — зачастую, часть его слайдов... нечитаема. И это очень коварная проблема, ведь поначалу ничто не предвещает беды. Дизайнер делает красивый дизайн, верстальщик - качественную вёрстку. Всё идёт отлично! А спустя время заказчик начинает вводить текст, загружает картинку, иии... Оказывается, что картинка подходит совсем не любая. На самом деле, даже не любая картинка зачастую тоже не подходит! А ещё есть разные... кхм... разрешения... кхм... экрана... Простите, слеза в горле застряла.

⏱Читать статью

Optimizing PWAs For Different Display Modes #почитать Progressive Web Apps (PWAs) are a great way to make apps built for the web feel native, but in moving away from a browser environment, we can introduce usability issues. Declan covers how we can modify our app depending on what display mode is applied to mitigate these issues. ⏱Читать статью

Улучшаем тексты в вебе при помощи text-wrap: pretty #почитать В новом Safari Technology Preview реализовано значение text-wrap: pretty, обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty, а затем сравним её с balance и другими значениями text-wrap, чтобы лучше понять, когда какие следует выбирать. Идеи о том, что «хорошо» для типографики произрастают из эпохи, когда набор производился вручную при помощи металла, дерева и чернил. Наборщики тщательно выбирали, где должно находится слово: в конце строки, в начале другой или его нужно разбить дефисом. Их усилия повышали понятность текстов, снижали напряжение глаз и просто увеличивали удовольствие от чтения. Хотя восприятие красоты может быть субъективным, в мире существуют и глубоко укоренившиеся типографские традиции для разных языков и написаний. Эти традиции через века несут человеческую культуру от поколения к поколению. В цифровой типографике все слова располагает компьютер, а не человек. Веб-дизайнеры или разработчики часто создают шаблон, заполняемый различными версиями контента. Типографика в вебе не настраивается вручную, особенно в случае гибкой структуры текста, меняющейся в зависимости от формы и размеров экрана. Что же мы можем сделать, чтобы приблизиться к качеству традиционной типографики, сохранив при этом возможность механизации, привносимую современными компьютерами? Одним из решений может стать text-wrap:pretty. Оно предназначено для обеспечения нового уровня качества типографики в вебе благодаря использованию учитывающих абзацы алгоритмов. ⏱Читать статью