#фишка дня

— Это код, он не может сделать больно!

Код:

const a = [1, 4, -2, 5, -6];
let i;
for (i = 0; i < a.length && a[i] > 0; i++);
// i: 2

#статья дня

Для субботней статьи дня я решил выбрать чтение полегче:

Что происходит, когда вы посещаете сайт?

А и правда, что? Как давно вы об этом задумывались? А вот на собеседованиях до сих пор спрашивают.

Возможно, кто-то опять заверещит, что знать это — подобно знанию ассемблера. А я отвечу: «А почему бы и нет?».

1. Парсинг URL
2. DNS-резолвинг
3. Установка TCP-соединения
4. TLS-рукопожатие (HTTPS)
5. Отправка HTTP-запроса
6. Обработка запроса на сервере
7. Получение HTTP-ответа (TTFB)
8. Парсинг HTML и построение DOM
9. Загрузка внешних ресурсов
10. Построение CSSOM и render tree
11. Выполнение JavaScript
12. Рендеринг и композитинг (painting)
13. Активация интерактивности
14. Кэширование и CDN
15. Фоновые оптимизации

Ладно, я пошутил. Вот вам крестики-нолики на чистом CSS и без HTML кроме body: https://lyra.horse/fun/tic-tac-nohtml/

#web #interview

#такое дня

React Native-разработчики: радуются, что благодаря нативным виджетам их приложения выглядят прекрасно как в iOS18, так и в iOS26

Flutter-разработчики: ищут способ внедрить нативные элементы без изменения архитектуры фреймворка и находят их.

Разработчики Telegram на Swift: да срали мы на пользователей всех ОС вообще, как получилось так получилось. И за каким-то чудом решили сами сделать виджеты а-ля iOS26 под iOS18.

#liquidglass #fail

#заметка дня

Итак, в разработке пульта на Flutter случилось — конечно же — неожиданное.

И неожиданное это тот факт, что новые телевизоры Samsung не поддерживают получение списка приложений и их иконок. Выдают 401. Выходит, API-то есть, а вот разрешения на использование — нет. И его не получить, потому что Samsung сдвигает свою инфраструктуру в сторону полурабочего SmartThings-облака.

Ну как, новые. Года с 2020. Просто меня интересовал конкретно мой, а он 2019 и документации в принципе исчезающе мало. Tizen и Tizen.

Что же делать?

Да ничего особого не делать. Нужно где-то найти список приложений и их иконки, ведь запуск всё так же остался возможен: по id приложения.

Очевидно, в голову приходит мысль, что для Smart TV должно быть некое подобие аппстора. И действительно: https://www.samsung.com/us/tvs/smart-tv/samsung-tv-apps/

Надеюсь, оно хотя бы SPA? Да! Список приложений получается через эндпоинт /list с вполне однозначным набором параметров: https://vdapi.samsung.com/tvs/tvpersonalize/api/tvapps/appserver/list?country_code=US&language_code=en&offset=0&size=24&order=asc&category=all

Выглядит шикарно! В ответ получаем JSON с полным числом приложений — total — и массивом из 24 позиций. Так, а остальное как?

И тут моя беспокойная голова зачем-то решила проверить, а что там по остальным странам, и я начал перебирать коды стран в адресе самого магазина.

Финский вообще не заработал, французского нет, а в российском не работала постраничная навигация.

Ладно, не первый же раз работаем. Смотрим на список параметров запроса, видим offset и size. Это у нас типичный случай оконной пагинации (помимо курсорной и постраничной). В таких случаях просто передаем что-то вида загрузить 48 приложений начиная с 96. И… не работает. Какой вывод я сделал? Правильно: API сломано.

Посмотреть, работает ли навигация в американском аппсторе, я не догадался. Поэтому решил абьюзить на полную и просто передал 3336 в size с offset 0. Число 3336 не случайно — API сам отдает его с пустой категорией. И, внезапно, я получил ответ, содержащий все приложения. Ждать пришлось весьма долго, я ожидал, что для таких вещей нужен токен. Но нет.

Вывод 1: защищайте свои API.

Ну и мне стоило все же посмотреть на работу американского аппстора. Потому что, как оказалось, offset у них — это страница! То есть, для получения приложений с 11 по 20 надо было передавать не offset=10&size=10, а offset=1&size=10. Сбивает с толку, спасибо, что хотя бы не курсор.

Вывод 2: играешь в CTF — хотя бы немного думай.

Впрочем, своей цели я добился. Списки приложений есть, иконки — там же. Осталось подготовить наборы самых популярных приложений разных стран — и вперёд.

…а ведь Samsung мог просто не закрывать API на телевизоре.

#api #ctf

#ссылка дня

Coinbase Design System (CDS) — это библиотека интерфейсных компонентов от Coinbase для React и React Native, которая задаёт единый визуальный язык во всех их продуктах.

Основная цель — консистентность и кроссплатформенность: те же компоненты работают и в вебе, и в мобильных приложениях, без боли с адаптацией.

В арсенале поддержка тёмной и светлой темы, кастомизация через темы и атомарные стили для скорости.

Анимации у них забавные. И, ожидаемо, различные рекламные блоки аж хорошо вышли.

Крипта упадёт, а дизайн-система останется: cds.coinbase.com

#design #system

#статья дня

В Chrome 139 появилась возможность писать собственные функции прямо в CSS. Теперь можно не дублировать calc() и clamp(), а объявлять их один раз и вызывать как в JS.

Уна Кравец показала 5 примеров:
— --negate() — переворачивает знак числа;
— --opacity() — задаёт прозрачность цвета;
— --fluid-type() — делает адаптивную типографику;
— --conditional-radius() — убирает скругления у края экрана;
— --layout-sidebar() — строит сетку с сайдбаром без медиазапросов.

Дальше — больше: в будущем появятся @mixin и @apply, и CSS наконец-то получит свои настоящие функции. Ну хоть в Хроме теперь будет счастье.

una.im/5-css-functions

#css #function

#статья дня

Джейк Арчибальд решил проверить, как браузеры сегодня показывают картинки «по частям» — ту самую прогрессивную отрисовку, где сначала видишь мутное пятно, а потом — полную версию.

Когда-то это было базовой оптимизацией. При медленном интернете пользователю хотелось показать хоть что-то. Кто помнит, что картинки когда-то могли грузиться как сверху вниз, так и снизу вверх? :)

Формат JPEG буквально изобрёл прогрессивную загрузку и до сих пор работает — но Safari показывает картинку пикселями и заметно грубее, чем Chrome и Firefox, где изображение обновляется плавно.

Прогрессивный JPEG также немного дольше декодируется, но разница в миллисекунды.

JPEG XL должен был стать преемником — и вроде умеет прогрессивный рендеринг, но на практике:

— в Safari его нет вообще;
— в Chromium он пока экспериментальный;
— а декодится формат пугающе медленно.

Арчибальд отмечает, что в тестах JPEG XL показывал результат в 2–5 раз хуже AVIF, что делает его пока что малопригодным для реального веба.

Зато на горизонте появился прогрессивный AVIF.

В Chromium уже можно использовать слои. Этот режим разбивает изображение на два слоя — первый лёгкий, размытый и почти мгновенный, второй — финальный, с полным качеством. Правда, для этого надо пересобрать libavif и собрать изображение заново.

При этом информация с размытого слоя переиспользуется в качественном слое. Такой себе SQIP для богатых.

Safari и Firefox пока это не поддерживают, но сам подход перспективный: он даёт ту же визуальную плавность, что и старый прогрессивный JPEG, при гораздо лучшем сжатии.

Арчибальд подчеркивает: прогрессивность не решает проблему responsive изображений — браузеру всё равно нужно заранее знать, какой размер подгружать, иначе можно легко скачать лишние мегабайты.

Так что, возможно, будущее не в прогрессивных кодеках, а в умных форматах, где превью и финальное изображение встроены вместе, но управляются логикой загрузки.

В статье прекрасные имитаторы загрузки, можно прям байт за байтом отследить всю историю демонстрации изображения. Очень круто.

Ну и будьте готовы — лиса с иллюстрации успеет вам надоесть.

https://jakearchibald.com/2025/present-and-future-of-progressive-image-rendering/

#jpeg #img #avif #img

#ссылка дня

Сначала Bun сделал вызов Node.js и Deno, впихнув невпихуемое и сделав рантайм быстрым. Теперь он выходит на территорию фронтенд-сборщиков, где позиции Node.js и сопутствующих сборщиков казались весьма стабильными.

С Bun 1.3 можно сёрвить HTML-файлы напрямую, а JavaScript, TypeScript, JSX и CSS обрабатываются автоматически. Горячая перезагрузка позволяет видеть изменения мгновенно, а для проектов на React достаточно bun init --react, чтобы получить готовую среду. Сборка для продакшн стала проще: bun build --production оптимизирует проект без лишних конфигов.

Внутри появились новые возможности: поддержка MySQL наряду с PostgreSQL и SQLite, встроенный Redis-клиент, улучшенная маршрутизация, WebSocket, работа с cookies и новые механизмы изолированных установок пакетов. Всё это делает Bun 1.3 полноценной средой, где фронтенд, бэкенд и сборка объединены в одном инструменте.

Теперь Bun действительно бандлит, простите

https://bun.com/blog/bun-v1.3

#bun #node #bundle #webpack

#фото дня

Решил с вами поделиться находкой. Представьте в 1984 году вы купили свой первый компьютер с графическим интерфейсом — в данном случае Apple Macintosh — и вот вам в инструкции объясняют, что же такое скроллинг.

Наглядно, ничего не скажешь :)

#scroll

#дайджест недели, чуть не забыл!

Понедельник

Telegram на Swift внезапно сделал свои «iOS26-виджеты» под iOS18, не дожидаясь будущего.
https://www.tgoop.com/htmlshit/3841

Вторник

Вытаскиваем список приложений для телевизоров Samsung, рассматривая API магазина приложений.
https://www.tgoop.com/htmlshit/3842

Coinbase Design System (CDS) — единая библиотека для React и React Native.
Общий визуальный язык, темы, атомарные стили, адаптивность.
https://www.tgoop.com/htmlshit/3844

Среда

В Chrome 139 появились функции в CSS — можно объявлять свои --negate(), --opacity(), --fluid-type().
Уна Кравец показывает, как обойтись без бесконечных calc() и clamp().
Следом придут @mixin и @apply.
https://www.tgoop.com/htmlshit/3845

Четверг

Джейк Арчибальд проверил, как браузеры рендерят картинки по частям.
Прогрессивный JPEG жив, Safari груб, AVIF умеет слои.
https://www.tgoop.com/htmlshit/3847

Пятница

Bun 1.3 вышел из роли рантайма — теперь он ещё и сборщик.
Поддержка MySQL, Redis, WebSocket, cookies, горячая перезагрузка и bun build --production без конфигов.
https://www.tgoop.com/htmlshit/3849

Суббота

Apple Macintosh, 1984: руководство объясняет пользователю, что такое «скроллинг».
Картинки — лучше любых слов.
https://www.tgoop.com/htmlshit/3850

#заметка дня

Давайте за жизнь поговорим, пока AWS us-east-1 лежит.

Я весьма люблю стендап разного толка. Когда наблюдаешь за развитием персонажей годами (а для особо давних представителей жанра процесс может длиться десятилетия), вполне можно выработать отношение к лирическому герою автора.

Да-да, давайте не забывать, что личность автора и его продукт — вещи разные. Хотя, конечно, без переноса личности автора на личность героя зачастую не обходится.

Ладно, это я к чему. Мне весьма по душе приходится работа Джимми Карра с аудиторией, а особенно — его поздние тейки о жизни, детях и работе. Очень неожиданно получать рабочие советы от автора чаечки, если вы понимаете, о чём я.

Один из таких: «Жизнь, которую ты хочешь получить, лежит за работой, которую ты не хочешь делать».

Где-то здесь кто-то кричит «чекни привилегии», но мы сейчас не об этом.

Так вот, наверное, многие из вас уже прочитали откровение Дмитрия Свиридкина — автора книги про Undefined behaviors в C++ — об уходе из Amazon: https://nekrolm.github.io/blog.html

Я, наверное, никогда не достигну уровня инженеров, подобных Дмитрию, но уровень стресса прекрасно понимаю, ибо кто из нас не пытался яростно рваться наверх, ступая по головам как близких, так и переступая через себя. Стресс, ночная работа, оправдание ночной работы, SMS об упавшем сервере за рулём.

И в моём случае это не то чтобы было совсем в никуда, но точно стоило слишком дорого. И теперь, в почти уже 38, довольно сложно забрутфорсить карьеру. Приходится быть более эффективным.

И тут, собственно, и встаёт вопрос: «А действительно ли я правильно понимаю объём работы, которую я не хочу делать, ради получения той жизни, которую хочу?»

Но при этом есть и люди, которые и в большем возрасте продолжают ловить кайф от подобной скачки. И у них при этом получается! И я очень за них рад.

А мне же остаётся использовать полученный во времена скачек опыт в свою пользу и поднимать планку иначе.

Ведь... Bar is sooooooooo high

А вы, котаны, всё ещё наводите суету или уже иначе карабкаетесь?

#новость дня

React наконец-то съехал от родителей: https://engineering.fb.com/2025/10/07/open-source/introducing-the-react-foundation-the-new-home-for-react-react-native/

Когда-то это был домашний проект Facebook, призванный подлатать их новостную ленту и упростить генерацию мешанины в текстах рекламных объявлений (вы ещё помните такое? рассказать?). Потом код открыли — и случайно изобрели современный фронтенд. JSX, компонентный подход, декларативность — пропаганда вот этого вот всего.

Но чем популярнее становился React, тем нелепее выглядело, что он всё ещё приписан к Meta. Комьюнити писало RFC, спорило в GitHub-тредах, Дэн наше всё писал длинные эссе, а потом всё равно все ждали, пока кто-нибудь из Menlo Park скажет «одобрено». React давно жил как независимый проект — просто юридически оставался семейной реликвией.

Пока запрещенная в России террористическая организация Meta занималась метавселенными, React-мир крутился вокруг Vercel и Next.js. Именно они сделали React пригодным для продакшена: собрали все фичи в удобную платформу и задали курс для всей экосистемы. По сути, Vercel уже несколько лет пишет реальную «дорожную карту» React, а теперь это просто оформилось официально.

Так что да — теперь есть React Foundation, под крылом Linux Foundation. В совете — Meta, Microsoft, Amazon, Vercel, Expo и прочие большие люди. Meta оставляет три миллиона долларов на карманные расходы и обещает не мешать.

Linux Foundation, гы-гы, вот так и настанет вендекапец. Слышали, там уже поиск на React Native?

Ну что, котаны, давно пора было? Или надо было в Apache Foundation? :)

P. S. а ещё я забыл написать что ещё 7 октября вышел React Compiler 1.0, но я его сам что-то ещё не опробовал.

#react #meta #linux

Сегодня делюсь с вами авторским каналом, на который уже давно подписан сам.

Александр Григоренко — опытный фронтенд-архитектор и продуктовый инженер. Он пишет о зрелом инженерном подходе, архитектуре, лидерстве и продуктовой разработке. Ещё у него есть проект Web Audio Lab — образовательная платформа для обучения Web Audio API и синтезе звука, которую он делает с нуля и открыто показывает процесс.

Узнать Александра лучше можно в его постах о ценностях в профессии:
- Личный взгляд на профессиональные ценности в разработке
- Почему я отказался внедрять тёмные паттерны и не получил оффер на фронтенд-лида
- Как я пришёл к цифровому минимализму и приручил хаос

Также он пишет полезные посты про технологии:
- CSS-in-JS умер — да здравствует CSS-in-JS!
- Как построить свою UI-библиотеку на базе Vanilla Extract
- Как я стал официальным переводчиком книги издательства O'Reilly про Web Audio API

Знакомьтесь, подписывайтесь.

Ссылка на канал

#видео дня

Алекс Ильин и Алена Батицкая (Дока) выкатили весьма интересный формат короткого видеоподкаста, больше напоминающий теннисный матч: Code Cleanup.

Подкаст будет посвящён рефакторингу кода. Почему будет? Ну, потому что вот только-только первый выпуск вышел, посвящённый рефакторингу форм в React 19: https://youtu.be/JdMGSgh9uHA

Не просто «а давайте всё поменяем», а почему конкретно и зачем. Ведущие подкидывают друг-другу вопросы и предложения, подхватывая на лету. Потому, собственно, и теннисный матч.

Я очень надеюсь, у них хватит сил продолжать, поскольку получилось весьма забавно и по делу. А ещё я тут сдул пыль с одного старого проекта, потому для меня ещё и вовремя.

#react #podcast #refactoring

#инструмент дня

Нашел тут ESLint-плагин eslint-plugin-react-you-might-not-need-an-effect, вдохновлённый одноимённой статьёй из официальной документации React.

Он пытается отучить нас пихать useEffect везде, где что-то меняется, и напоминает, что часто эффекты просто не нужны — всё можно выразить данными и рендером.

React, впрочем, не стоит на месте: в версии 19.1 появился useEffectEvent, который позволяет выносить логику из эффектов и вроде бы делает их чище и предсказуемее.

Но к этому моменту все уже слегка устали от того, что каждый релиз приносит ещё один способ «наконец-то правильно» писать эффекты.

Плагин же решает вопрос просто: он показывает, где useEffect вам, скорее всего, не нужен. Без философии — только суровая плётка погонщика.

#react #eslint

#фишка дня

«Как компьютер стал современным» журнала 8БИТ от Яндекс Образования

Классная серия статей, в которой просто и понятно рассказывают, как мы смогли от сорокатонных компьютеров прийти к современным MacBook. Главные инженерные, физические и математические открытия, детальные (но простые!) пояснения как работает ПО, программы и интернет.

Отличный контент для тех, кто хочет детальнее понять как работает железо. Почитать можно по ссылке

#инструмент дня

Когда Mac засыпает посреди сборки или загрузки — не обязательно ставить сторонние приложения, чтобы этого избежать. В macOS уже есть встроенный инструмент:
caffeinate

Он мешает системе уснуть, пока вы этого не захотите.

Основные ключи:
-d — не гасить дисплей
-i — не переходить в сон
-m — не «усыплять» диски
-s — держать систему бодрой при подключённом питании
-u — эмулировать активность пользователя

Можно запустить команду вместе со своей задачей:
caffeinate -i npm run build
Пока идёт сборка — Mac не уснёт.

Альтернатива для любителей GUI — старая утилита Caffeine, или другие «keep awake» приложения из Mac App Store.

Накидайте в комментарии вариантов для других ОС.

#mac #sleep #tool