Будни разработчика: блог лид JS

💳Как платить за Spotify, Cursor, ChatGPT и другие любимые подписки?▫️ Если ты читаешь это, скорее всего, у тебя уже была проблема: надо оплатить подписку или купить иностранный софт, а российскую карту не принимают. Mirocard решает это за пару минут: Это сервис, где можно выпустить виртуальную карту, пополнить рублями через СБП🏦 и платить за: - Midjourney - ChatGPT - Figma - ElevenLabs - Claude - Netflix - Spotify и еще сотни подписок 💎 По промокоду HTML50 выпуск карты со скидкой 50% Открывайте карту в пару кликов и с ней более удобный способ оплаты любимых сервисов! ⚡️ОТКРЫТЬ КАРТУ⚡️

#статья дня Один из самых популярных вопросов на технических собеседованиях: «Что происходит после того, как вы ввели URL в браузере и нажали Enter?» Хорош он тем, что начать можно с «ну, DNS → HTTP → страница», а закончить где-нибудь глубоко в TCP, TLS, системных вызовах, планировщике ОС и внутренностях рантайма. По глубине ответа довольно быстро становится понятно, насколько человек вообще представляет себе весь стек целиком. 200ms — очень хорошая интерактивная версия ответа на этот вопрос. Авторы берут один HTTP-запрос и проводят его через примерно 200 миллисекунд жизни: DNS, TCP, TLS, ядро ОС, Node.js, event loop, Postgres — и затем обратно к клиенту. Причём это не просто очередной огромный лонгрид со схемами. Статья сделана как интерактивное путешествие: запрос буквально двигается по системе, а ты шаг за шагом смотришь, куда он попал, что там происходит и почему. Есть, правда, и небольшой перегиб: местами авторы ныряют в детали уже буквально до уровня железа вашего телефона — что именно делает процессор, память и всё вокруг. Для понимания веб-разработки это далеко не всегда необходимо, но материал от этого скорее выигрывает: появляется ощущение, что ты реально проваливаешься через весь стек слой за слоем. В общем, отличный способ освежить в голове тот самый собеседовательный вопрос, только не в виде заученного ответа на пять минут, а нормально, со вкусом. Ссылка скрыта #web #interview #request

#компонент дня Bramus сделал — натуральное перелистывание страниц с загибами, тенями и всей этой физикой бумажной книжки. Сам эффект давно можно было сделать на Canvas/WebGL, проблема была в другом: содержимое страницы превращалось, по сути, в картинку. Прощай выделение текста, ссылки, accessibility и нормальный DOM. Вот: Ссылка скрыта Кстати, лет шесть назад уже был пост о подобном эффекте, прелесть той статьи — разложена вся геометрия: Ссылка скрыта Но там не 3D, там clip-path и динамические тени. А тут используется экспериментальный HTML-in-Canvas API: браузер умеет отрисовывать настоящий HTML через Canvas/WebGL, при этом исходные элементы остаются живыми DOM-элементами. Поэтому текст можно выделять, ссылки нажимаются, скринридеры продолжают видеть содержимое — а сверху на всё это можно навесить настоящее 3D-деформирование страницы. Удобно? Не то слово! Пока, правда, это работает в Chrome за флагом canvas-draw-element, а сам API ещё меняется. Но направление очень интересное. Нет никаких сомнений, что это попрёт за пределы экспериментов. В лучших традициях Macromedia Flash! #canvas #html #webgl #webgpu

#заметка дня В CSS Fonts Level 5 обсуждают . Его появление связано с тем, что системная настройка размера текста на мобильных устройствах сейчас не гарантирует увеличение текста в вебе. Пользователь увеличивает шрифт в настройках ОС, приложения подхватывают это предпочтение, а браузерам пофигу. На Android Firefox учитывает системный масштаб текста, а Chrome — нет; на iOS Dynamic Type не применяется к обычным страницам в Safari. В результате сайт может выглядеть нормально при стандартных настройках, но оставаться практически недоступным для человека, который рассчитывает на увеличенный системный текст. должен дать странице способ явно поддержать это предпочтение. Браузер включает пользовательский text scale factor в базовый размер шрифта, а дальше масштабирование естественно распространяется через CSS: rem следует за новым базовым размером, тогда как px остаётся фиксированным. Отсюда и практическое последствие: чем больше типографика и размеры компонентов завязаны на относительные единицы, тем лучше интерфейс адаптируется к пользовательскому масштабу. А жёсткие размеры, ограниченная высота и другие предположения о том, сколько места займёт текст, начинают проявляться обрезанием контента и горизонтальным скроллом. Manuel Matuzović протестировал proposal на своём сайте и подробно описал результат: Ссылка скрыта Proposal: Ссылка скрыта #css #font #scale

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер 3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Даниилу Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

#статья дня В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня". И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации). Так вот, к чему это. Я подумал, что раз есть подобное свойство, значит их должно быть много и они должны быть как-то стандартизированы... И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество! Лигатуры, маленькие заглавные буквы, цифры в старом стиле, моноширинные цифры, надстрочные и подстрочные символы, половинная ширина... И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: Ссылка скрыта Есть на русском: Ссылка скрыта Очень крутая и полная, с прекрасными иллюстрациями и примерами конкретных шрифтовых наборов. Всем st, котаны! #opentype #font #features #бородач

Что делать с петабайтами данных в MinIO, если разработка хранилища остановлена? MinIO прекратил активную разработку — продукт зафиксирован в текущем состоянии, патчи безопасности рассматриваются в индивидуальном порядке, обновления не тестируются. Для компаний, у которых на MinIO (или другом open-source S3-хранилище) хранятся петабайты данных, это уже не гипотетический риск, а вопрос времени. 3 сентября показываем на практике, как перенести данные из устаревшего хранилища в другое S3-совместимое — без остановки сервиса. В программе: 🔹 что переносится: объекты, версии, ACL, bucket-policy, lifecycle, теги, ссылки 🔹 техническое переключение с минимальным окном смены endpoint и параллельной работой на обоих хранилищах 🔹 поведение при сбоях синхронизации — перенос с точки останова, а не с нуля 🔹 демо: от подключения источника до полного переключения трафика Для DevOps- и SRE-инженеров, ИТ-директоров и всех, кому остановка сервиса недопустима даже на время миграции. 📅 3 сентября, 16:00 мск Регистрация

#ссылка дня Ну, кто тут пишет плохо неподдерживаемо? Признавайтесь. Can’t Maintain показывает два варианта API и предлагает выбрать тот, за который будущие разработчики скажут спасибо. loading или isLoading, набор булевых пропсов или один variant, отдельные обработчики или нормальная композиция — всего 10 вопросов за игру, после каждого есть объяснение. Кроме игры внутри лежит вполне приличный справочник: 117 паттернов про именование, controlled/uncontrolled-компоненты, render props, discriminated unions, доступность и React 19. Не все ответы стоит принимать за закон, но как повод проверить собственные привычки — отлично. А если зайдёт формат, у автора есть целая серия: такие же тренажёры по TypeScript, адаптивной вёрстке, Git, тестированию, API, SEO и UX. В сумме почти тысяча задач, всё бесплатно и с открытым исходным кодом. #education

#заметка дня Каким бы современным ни был ваш фронтенд, у крупного клиента между браузером и интернетом вполне может стоять Zscaler — корпоративная система безопасности, через которую компании прогоняют веб-трафик сотрудников, фильтруют его и инспектируют HTTPS. С TLS inspection он фактически работает как MITM-прокси: расшифровывает трафик, проверяет его и устанавливает новое соединение до вашего сервера. В результате ваши красивые предположения про HTTP/2, multiplexing и долгоживущие соединения внезапно превращаются в тупую очередь. У Zscaler HTTP/2 зависит от настроек, а некоторые функции вообще откатывают трафик на HTTP/1.1. WebSocket тоже проходит через отдельные политики и ограничения. И вот вы ищете баг во фронтенде, потому что «у банка всё тормозит», а проблема в том, что где-то между вашим кодом и пользователем сидит корпоративный прокси и молча превращает 2026 год обратно в 2012-й. А потом тикет всё равно прилетит вам. #bug #http