Будни разработчика

#статья дня Тут Google недавно внедрил в Chrome насколько давно напрашивающийся, настолько же пока что неудобно реализованный режим разделённого просмотра. Split view, если по-русски. Если добавят оверлейные кнопки — станет, конечно, чуть удобнее. И всё бы ничего, но вот вскрыл он одну интересную проблему. И проблему эту в своей новой статье Ахмад Шадид обозначил как ранний брейкпоинт. Статья вот: https://ishadeed.com/article/too-early-breakpoint/ И суть-то проблемы довольно ясна: мобильная вёрстка — очевидно, будучи удобной не только для мобильных устройств, не должна вставать между пользователем и контентом. В качестве примера — журнал Time. Заняли половину экрана сайтом — и уже непонятно, что и почему происходит. Ну и, конечно, это всё не имело бы смысла, не приведи Шадид несколько чуть более разумных примеров адаптивности. P. S. Кто-то использует Notepad++? Их сервер был атакован и пребывал скомпрометированным до декабря 2025. Разработчик теперь заверяет в том, что проблема устранена, и призывает обновиться до последней версии. Будьте внимательны! https://notepad-plus-plus.org/news/hijacked-incident-info-update/ #css #media #adaptive

Техдиректор AI Center Tinkoff (ex Yandex Go Senior EM) ведёт канал «Архитектура стартапа» - про то, как проектировать и масштабировать продукты, где в проде уже есть LLM/агенты, RAG, наблюдаемость, безопасность и стоимость инфраструктуры.🎯Без «воды» и хайпа: разборы архитектурных решений, практики платформы, грабли роста и что реально работает в больших системах.🧠Подписаться: 'https://t.me/+ANAWfA9PtHZmMDBi?erid=2W5zFJJ4Ki8' rel='nofollow'>https://t.me/+ANAWfA9PtHZmMDBi?erid=2W5zFJJ4Ki8

#фишка дня Использование position: sticky уже так-то стало обыденностью. А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять? Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries. Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи? Или, наоборот, не прерывать просмотр рекламы? :) Запросто: https://codepen.io/alinaki/pen/WbvMOPB

    
        
@container scroll-state(stuck: top) {
  .pip {
    width: 200px;
    transform: translate(-50%, 0%)
      translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
  }
}
{}
    

Обратите внимание, translate можно складывать, получая интересную математику в итоге :) А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере). #css #scroll #state #бородач

Вас добавили в чат «Первые шаги в JavaScript» 💯 Прокачайте навыки в веб-разработке на бесплатном курсе Академия Selectel выпустила новый курс по JavaScript. Если вы хотите освоить синтаксис и базовые конструкции языка — первые три модуля для вас. После обучения вы сможете: 🔹 работать с переменными let, var и const, 🔹 создавать простые функции и работать с DOM, 🔹 писать логические конструкции и тернарные операторы if/else. Получите промокод на бесплатную работу с сервисами Selectel, а после финального теста — сертификат о прохождении. Изучите основы JavaScript и создайте свой первый пет-проект → Реклама. АО "Селектел". erid:2W5zFJ4GZwW

Проект от подписчика! Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать. Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать! Привет! Меня зовут Игорь Хочу поделиться расширением, которое я изначально сделал для себя, а потом решил выложить публично - AI Chat Messages Toolkit. Еще сделал лендинг для продвижения и связи с будущими пользователями Мой юзкейс Часто использую AI-чаты для ресерча: в транспорте, перед сном, просто накидать идеи. Проходит время - и я уже не помню, *где именно* задавал нужный вопрос. Начинается бесконечный скролл длинного чата Я решил это упростить Что делает расширение • Парсит DOM страницы чата локально • Находит мои сообщения • Показывает их списком в боковой панели • Клик по сообщению > чат скроллится к нужному месту • работает в ChatGPT, Claude, Perplexity, Gemini и Copilot Важно Никакие данные не собираются, не сохраняются и никуда не отправляются - всё происходит прямо в браузере на открытой странице Дальше думаю про Pro-версию. Например, шаринг полезных Q&A-пар в Notion или куда-нибудь еще Если вы тоже используете AI-чаты для ресерча - буду рад фидбеку, идеям и юзкейсам в комментариях

#ссылка дня Вчера — впервые за шесть лет — побывал на местном JS-митапе, aka HelsinkiJS. Не надо на меня так смотреть, я не ходок по митапам. Но на нескольких конференциях, впрочем, был. И как-то так получилось, что помимо пива и пиццы были и доклады. И вот один из них — «Как нарисовать карту?» — был весьма интересен и его результат прекрасно подходит под формат канала. Автор — Скотт Стрит — постарался объяснить и показать, как работают библиотеки отрисовки карт. Какие форматы, какие решения. Ну и, собственно, шаг за шагом рассказал и показал процесс конвертации мировых координат в координаты элементов сетки и отрисовки их в SVG. Например, как из описания линии формата MapLibre (там protobuf, но в виде текста как-то так):

    
        
{
  "layers": [
    {
      "version": 2,
      "name": "roads",
      "extent": 4096,

      "features": [
        {
          "id": 42,
          "type": "LINESTRING",

          "tags": [0, 0],

          "geometry": [
            9,
            1024, 2048,
            26,
            2048, 0,
            1024, 1024,
            2048, 0
          ]
        }
      ],

      "keys": ["class"],
      "values": [
        { "string_value": "primary" }
      ]
    }
  ]
}
{}
    

Путем прямого чтения команд:

    
        
9                → MoveTo, count=1
1024, 2048       → dx, dy

26               → LineTo, count=3
2048, 0          → dx, dy
1024, 1024       → dx, dy
2048, 0          → dx, dy
{}
    

...получается описание кривых в SVG. Тут надо понимать, что сами плитки — тайлы — кодируются как квадрат 4096*4096, а, стало быть, координаты — относительно тайла. К сожалению, слайдов доклада в наличии нет, но есть, собственно демо и репозиторий. Конечно, там сейчас всё достаточно минималистично — дороги, парки, дома — но если вам было интересно, как это всё работает — подойдёт прекрасно. #svg #maplibre #map

14 февраля Яндекс проводит свою главную фронтенд-конференцию — «Я 💛 Фронтенд». Это большой ивент для тех, кто делает современные интерфейсы и хочет понимать, куда движется фронтенд. В программе много тем про ИИ, и лично для меня самая интересная — про безопасное использование LLM в разработке. Сейчас LLM уже используют почти все, но чаще всего это выглядит как «прикрутили — и поехали». А вот разговор про безопасность, ограничения и реальные сценарии применения — это как раз то, чего сильно не хватает в публичных обсуждениях. Тема важная, потому что от этого напрямую зависит, не превратится ли ИИ в источник техдолга и странных багов через полгода. Ещё будут доклады про влияние локального ИИ на архитектуру веб-приложений, контекстно-ориентированную адаптивность и практическое применение веб-компонентов — без абстракций, с прицелом на продакшен. Отдельно упомяну Code in the Dark. Это тот самый формат, где нужно верстать без превью, инспектора и подсказок — только редактор, HTML и CSS. Хорошая штука и для участников, и для зрителей — сразу видно, кто правда чувствует вёрстку. Кроме докладов будут и другие активности: CSS арт-челлендж, сборка TravelTech-приложения, разбор практических кейсов и другие интерактивы от команд Яндекса. Можно не только послушать, но и руками попробовать. Участвовать можно онлайн или офлайн в Москве. Программа и регистрация — по ссылке.

#видео дня Решил сохранить эту нестареющую классику прямо на канале. Где-то доступен и оригинал на ютубе, но я чот не смог его найти... В общем, доклад с коротким названием Wat был представлен аж в 2012 году и язвительно проходится по фишкам разных языков и интерпретаторов. Там четыре минуты, время точно найдёте. Поменялось ли что-то с тех пор? Ну, нет. Есть и не менее легендарные доклады, но я тут подумал, что было бы приятно получить от вас примеры в комментариях, котаны. Валяйте. P. S. в докладе есть не только описания неопределённого поведения, но и хрестоматийные примеры. Это теперь они хрестоматийные, конечно.

#такое дня А вот вам и пример, почему важно знать и понимать наследие веба. Написал я, понимаете ли, пост про тег <plaintext>, а он сломал вёрстку на агрегаторе каналов Telemetr. Сейчас это просто plaintext, а завтра — XSS? :) Не надо так, котаны.