14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#видео дня
Алекс Ильин и Алена Батицкая (Дока) выкатили весьма интересный формат короткого видеоподкаста, больше напоминающий теннисный матч: Code Cleanup.
Подкаст будет посвящён рефакторингу кода. Почему будет? Ну, потому что вот только-только первый выпуск вышел, посвящённый рефакторингу форм в React 19: https://youtu.be/JdMGSgh9uHA
Не просто «а давайте всё поменяем», а почему конкретно и зачем. Ведущие подкидывают друг-другу вопросы и предложения, подхватывая на лету. Потому, собственно, и теннисный матч.
Я очень надеюсь, у них хватит сил продолжать, поскольку получилось весьма забавно и по делу. А ещё я тут сдул пыль с одного старого проекта, потому для меня ещё и вовремя.
#react #podcast #refactoring
#новость дня
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
#дайджест недели, чуть не забыл!
Понедельник
Telegram на Swift внезапно сделал свои «iOS26-виджеты» под iOS18, не дожидаясь будущего.
/channel/htmlshit/3841
Вторник
Вытаскиваем список приложений для телевизоров Samsung, рассматривая API магазина приложений.
/channel/htmlshit/3842
Coinbase Design System (CDS) — единая библиотека для React и React Native.
Общий визуальный язык, темы, атомарные стили, адаптивность.
/channel/htmlshit/3844
Среда
В Chrome 139 появились функции в CSS — можно объявлять свои --negate(), --opacity(), --fluid-type().
Уна Кравец показывает, как обойтись без бесконечных calc() и clamp().
Следом придут @mixin и @apply.
/channel/htmlshit/3845
Четверг
Джейк Арчибальд проверил, как браузеры рендерят картинки по частям.
Прогрессивный JPEG жив, Safari груб, AVIF умеет слои.
/channel/htmlshit/3847
Пятница
Bun 1.3 вышел из роли рантайма — теперь он ещё и сборщик.
Поддержка MySQL, Redis, WebSocket, cookies, горячая перезагрузка и bun build --production без конфигов.
/channel/htmlshit/3849
Суббота
Apple Macintosh, 1984: руководство объясняет пользователю, что такое «скроллинг».
Картинки — лучше любых слов.
/channel/htmlshit/3850
#ссылка дня
Сначала 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
#статья дня
Джейк Арчибальд решил проверить, как браузеры сегодня показывают картинки «по частям» — ту самую прогрессивную отрисовку, где сначала видишь мутное пятно, а потом — полную версию.
Когда-то это было базовой оптимизацией. При медленном интернете пользователю хотелось показать хоть что-то. Кто помнит, что картинки когда-то могли грузиться как сверху вниз, так и снизу вверх? :)
Формат 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
#статья дня
В 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
Коллеги, привет! 👋
На связи команда международной IT-компании Garage Eight. Мы создаём финтех-продукты для сотен тысяч пользователей. И уверены, что крутых результатов можно достигать только в поддерживающей атмосфере. Поэтому мы создали среду, где можно экспериментировать, ошибаться и реально влиять на продукт и процессы.
Живём мы не только работой — ещё хакатонами, митапами, встречами комьюнити и ежемесячными тусовками. И у нас есть новая таска на Q3 — рейтинг работодателей HeadHunter
Мы понимаем, что голосовать за «чужую» команду может быть странно. Но на самом деле ваша поддержка поможет показать, что компании с открытой культурой и уважением к людям должны быть стандартом.
#такое дня
React Native-разработчики: радуются, что благодаря нативным виджетам их приложения выглядят прекрасно как в iOS18, так и в iOS26
Flutter-разработчики: ищут способ внедрить нативные элементы без изменения архитектуры фреймворка и находят их.
Разработчики Telegram на QML: да срали мы на пользователей всех ОС вообще, как получилось так получилось.
#liquidglass #fail
#статья дня
Для субботней статьи дня я решил выбрать чтение полегче:
Что происходит, когда вы посещаете сайт?
А и правда, что? Как давно вы об этом задумывались? А вот на собеседованиях до сих пор спрашивают.
Возможно, кто-то опять заверещит, что знать это — подобно знанию ассемблера. А я отвечу: «А почему бы и нет?».
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
Сейчас фреймворки закрывают большинство задач в современных интерфейсах. Но до сих пор есть проекты, на которых придется обойтись без готовых решений. Фронтенд-разработчик Илья Пономарев рассказывает, как собираются интерфейсы в условиях ограниченного инструментария. Илья более 10 лет работает с крупными клиентами из ритейла, фармы и финансового сектора.
Больше полезных материалов для разработчиков, менеджеров и веб-дизайнеров, а также вакансии в проектные команды крупных брендов — в канале Далее.
#видео дня
Буквально час назад вышла документалка о Vite. Собственно, вот: https://youtu.be/bmWQqAKLgT4
Прекрасная история о единении.
Илья, твой выход!
#video #vite
#инструмент дняgit-absorb — инструмент, который автоматизирует работу с fixup!-коммитами.
Да-да, я тоже про fixup вот только что услышал, когда мне лид про absorb рассказывал.
Когда вы исправляете старый коммит (например, после ревью), многие делают так:git commit --fixup <хэш_коммита>
git rebase -i --autosquash
Git потом «вплетает» эти fixup!-коммиты прямо в нужные места истории.
Красиво, но муторно, особенно если правок много.git-absorb делает всё это сам.
Он смотрит, какие строки вы изменили, определяет, к какому коммиту они относятся, и автоматически создаёт нужные fixup!-коммиты:git add .
git absorb
Дальше — одно git rebase -i --autosquash, и у вас идеальная чистая история, будто вы никогда не ошибались. Идея пришла из Mercurial (hg absorb).
Для тех, кто любит порядок в истории, но не хочет заниматься им вручную.
👉 github.com/tummychow/git-absorb
Я всё равно буду делать атомарные коммиты, впрочем. Я человек простой.
#git #fixup
#такое дня
Некоторые люди серьёзно предъявляют джаваскрипту за подобное.
Другие им говорят: «Ты бы у меня собес не прошёл!»
Чо, котаны, надо такое понимать, или ну нахер? :)
Хотите провести харденинг инфраструктуры? 😎
Эксперты по кибербезопасности расскажут, как выбрать стратегию и ее придерживаться, достигать киберустойчивости и вовремя находить бреши в защите на четырехнедельном онлайн-практикуме «Харденинг ИТ-инфраструктуры».
Старт уже 20 октября. Под руководством опытных менторов — экспертов с многолетним опытом прокачки защищенности инфраструктур — вы научитесь:
🔴 самостоятельно задать системе непротиворечивые настройки зонирования сети, политик ОС, параметров виртуализации и пр.;
🔴 сделать инфраструктуру более устойчивой, опираясь на стратегию результативной кибербезопасности и требования регуляторов;
🔴 проходить аудит без блоков;
🔴 внедрить системный подход к харденингу и не зависеть от внешних консультантов.
❗️ Важно: до создания собственных решений вы сможете разобрать типичные ошибки на реальных кейсах, а свои гипотезы протестировать в песочницах до внедрения в прод.
Присоединяйтесь, больше информации о практикуме — на портале Positive Education.
#фишка дня
Пишешь чат или выводишь данные лога в консоль и хочешь чтобы каждое новое сообщение снизу было видимым?
Ни слова больше! Спека has us covered: https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f
Удивительное дело, конечно, видеть примеры прямо в черновике спецификации :)
Вот, кстати, пример от Брамуса Ван Дамма: https://codepen.io/bramus/pen/PorRORd
Обратите внимание, за нас подумали, что пользователь может поскроллить наверх.
На старых версиях Chrome иногда проявляется баг с пружинящим скроллом — Chrome теряет событие и «снапит» нас назад, но недавно и это пофиксили.
Ну если вы за старое доброе решение на JavaScript, вот, держите хук от Vercel.
#scroll #snap #css #бородач
Сегодня делюсь с вами авторским каналом, на который уже давно подписан сам.
Александр Григоренко — опытный фронтенд-архитектор и продуктовый инженер. Он пишет о зрелом инженерном подходе, архитектуре, лидерстве и продуктовой разработке. Ещё у него есть проект Web Audio Lab — образовательная платформа для обучения Web Audio API и синтезе звука, которую он делает с нуля и открыто показывает процесс.
Узнать Александра лучше можно в его постах о ценностях в профессии:
- Личный взгляд на профессиональные ценности в разработке
- Почему я отказался внедрять тёмные паттерны и не получил оффер на фронтенд-лида
- Как я пришёл к цифровому минимализму и приручил хаос
Также он пишет полезные посты про технологии:
- CSS-in-JS умер — да здравствует CSS-in-JS!
- Как построить свою UI-библиотеку на базе Vanilla Extract
- Как я стал официальным переводчиком книги издательства O'Reilly про Web Audio API
Знакомьтесь, подписывайтесь.
Ссылка на канал
#заметка дня
Давайте за жизнь поговорим, пока AWS us-east-1 лежит.
Я весьма люблю стендап разного толка. Когда наблюдаешь за развитием персонажей годами (а для особо давних представителей жанра процесс может длиться десятилетия), вполне можно выработать отношение к лирическому герою автора.
Да-да, давайте не забывать, что личность автора и его продукт — вещи разные. Хотя, конечно, без переноса личности автора на личность героя зачастую не обходится.
Ладно, это я к чему. Мне весьма по душе приходится работа Джимми Карра с аудиторией, а особенно — его поздние тейки о жизни, детях и работе. Очень неожиданно получать рабочие советы от автора чаечки, если вы понимаете, о чём я.
Один из таких: «Жизнь, которую ты хочешь получить, лежит за работой, которую ты не хочешь делать».
Где-то здесь кто-то кричит «чекни привилегии», но мы сейчас не об этом.
Так вот, наверное, многие из вас уже прочитали откровение Дмитрия Свиридкина — автора книги про Undefined behaviors в C++ — об уходе из Amazon: https://nekrolm.github.io/blog.html
Я, наверное, никогда не достигну уровня инженеров, подобных Дмитрию, но уровень стресса прекрасно понимаю, ибо кто из нас не пытался яростно рваться наверх, ступая по головам как близких, так и переступая через себя. Стресс, ночная работа, оправдание ночной работы, SMS об упавшем сервере за рулём.
И в моём случае это не то чтобы было совсем в никуда, но точно стоило слишком дорого. И теперь, в почти уже 38, довольно сложно забрутфорсить карьеру. Приходится быть более эффективным.
И тут, собственно, и встаёт вопрос: «А действительно ли я правильно понимаю объём работы, которую я не хочу делать, ради получения той жизни, которую хочу?»
Но при этом есть и люди, которые и в большем возрасте продолжают ловить кайф от подобной скачки. И у них при этом получается! И я очень за них рад.
А мне же остаётся использовать полученный во времена скачек опыт в свою пользу и поднимать планку иначе.
Ведь... Bar is sooooooooo high
А вы, котаны, всё ещё наводите суету или уже иначе карабкаетесь?
#фото дня
Решил с вами поделиться находкой. Представьте в 1984 году вы купили свой первый компьютер с графическим интерфейсом — в данном случае Apple Macintosh — и вот вам в инструкции объясняют, что же такое скроллинг.
Наглядно, ничего не скажешь :)
#scroll
Думаешь о переходе в DevOps, но не знаешь, с чего начать?
Это нормально. Всё больше разработчиков смотрят в сторону DevOps — там выше зарплаты, интереснее задачи и виден весь продукт, а не только код.
Но часто мешают сомнения:
🤔 «Я не админ, слишком сложно»
😑 «Потеряю кучу времени»
😬 «Придётся учить всё с нуля»
На деле — у тебя уже есть база: ты понимаешь код, работаешь с Git и умеешь автоматизировать задачи. Этого достаточно, чтобы уверенно перейти в DevOps.
Твой план может выглядеть так:
1️⃣ Linux и CI/CD (Jenkins, GitLab CI, GitHub Actions)
2️⃣ Контейнеры — Docker, Kubernetes
3️⃣ Облака — AWS, GCP или Azure
4️⃣ Pet-проекты и open source
5️⃣ DevOps-задачи в текущей команде
На всё уйдёт 6–12 месяцев при системном подходе.
А если хочешь ускорить процесс и избежать ошибок — запишись на бесплатную консультацию с тьютором.
📍Что ты получишь:
— оценку текущего уровня,
— индивидуальный план перехода,
— рекомендации по инструментам.
🔗 Выбери удобное время — в боте.
Кажется, что путь в DevOps — сплошные грабли, но на деле это ровная дорога, если идти с картой 😉
МТС приглашает всех, кто пишет на С++, Go, Python, JS, Java, C# и других языках, на True Tech Champ — всероссийский чемпионат по программированию. Соревнование будет проходить в двух треках.
Трек 1. Алгоритмический. Индивидуальный зачет [призовой фонд 2 750 000 рублей]
Реши задачи, которые помогут прокачаться в работе с алгоритмами и структурами данных. Похожие задания встречаются на собеседованиях в МТС и других крупных компаниях. До 240 лучших участников попадут в финал и сразятся в лайв-кодинге.
Трек 2. Программирование роботов. Командный формат [призовой фонд 7 500 000 рублей]
Проведи робота по виртуальному лабиринту, затем управляй им дистанционно на офлайн-полигоне, а в финале — пройди испытания на реальной площадке и выбей соперников с платформы.
🎁 Организаторы отправят командам финалистов по одному роботу Waveshare Cobra Flex для кастомизации. После соревнований они останутся у участников в качестве подарка.
📍 Зрелищный шоу-финал с ИИ-технологиями, кодерскими челленджами и выступлениями международных и российских спикеров пройдет 21 ноября в МТС Live Холл.
Стоит участвовать, чтобы:
— Освежить знания и прокачать новые навыки.
— Заявить о себе на всю страну, получить карьерный буст и шанс лично пообщаться с HR-специалистами МТС.
⏰ Регистрация участников до 20 октября на сайте.
#ссылка дня
Coinbase Design System (CDS) — это библиотека интерфейсных компонентов от Coinbase для React и React Native, которая задаёт единый визуальный язык во всех их продуктах.
Основная цель — консистентность и кроссплатформенность: те же компоненты работают и в вебе, и в мобильных приложениях, без боли с адаптацией.
В арсенале поддержка тёмной и светлой темы, кастомизация через темы и атомарные стили для скорости.
Анимации у них забавные. И, ожидаемо, различные рекламные блоки аж хорошо вышли.
Крипта упадёт, а дизайн-система останется: cds.coinbase.com
#design #system
#заметка дня
Итак, в разработке пульта на 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
#дайджест недели
1️⃣ Понедельник
CSS Scroll Snap теперь умеет делать автопрокрутку чата вниз без костылей на JS.
Есть пример прямо в спецификации и демо от Брамуса. Старый баг с Chrome уже пофиксили.
/channel/htmlshit/3823
2️⃣ Вторник
Линус Торвальдс ругает rustfmt за «эвристику», которая ломает историю коммитов.
/channel/htmlshit/3824
Как уменьшить вариативный шрифт с 785 до 58 КБ.
/channel/htmlshit/3826
3️⃣ Среда
› 'wtf' instanceof String — false
› typeof 'wtf' — 'string'
/channel/htmlshit/3827
5️⃣ Четверг
git-absorb автоматизирует fixup-коммиты.
Сам находит, что вы правили, и создаёт нужные fixup! перед rebase.
/channel/htmlshit/3829
Вышла документалка о Vite. Любовные сцены сняты прекрасно:
/channel/htmlshit/3831
5️⃣ Пятница
Evil Martians показали, как сделать офлайн-поиск в Astro без бэкенда.
JSON-индекс на сборке, MiniSearch в браузере — и всё работает мгновенно.
/channel/htmlshit/3832
— Это код, он не может сделать больно!
Код:
/channel/htmlshit/3838
6️⃣ Суббота
Что происходит, когда вы посещаете сайт — пошагово от DNS до рендеринга.
И бонусом — крестики-нолики на чистом CSS и без HTML.
/channel/htmlshit/3839
#js #css #git
#фишка дня
— Это код, он не может сделать больно!
Код:
const a = [1, 4, -2, 5, -6];Читать полностью…
let i;
for (i = 0; i < a.length && a[i] > 0; i++);
// i: 2
#статья дня
Давно я не вспоминал Злых Марсиан! А они не прекращали писать в блог. На сей раз — как организовать поиск в Astro.
Сразу ссылка: https://evilmartians.com/chronicles/how-to-add-fast-client-side-search-to-astro-static-sites
Astro хорош тем, что рендерит всё статично — сайт мгновенно загружается, не требует бэкенда и остаётся простым даже при куче контента.
Впрочем, как и многие другие генераторы.
Но у такого подхода есть боль — нет встроенного поиска.
Evil Martians показали, как добавить быстрый клиентский поиск без внешних API и серверов:
— на этапе сборки Astro создаёт JSON-индекс страниц;
— на клиенте подключается MiniSearch, который ищет прямо в памяти;
— подсветка совпадений, клавиатурная навигация и хоткей Ctrl+K прилагаются.
Результат — поиск, который:
+ мгновенный,
+ не требует серверной логики,
+ работает офлайн и полностью в браузере.
Берём, котаны?
P. S. Вам так Vite не нравится, документалки или Илья? :)
#astro #search #fuzzy
Фронтенд, покодим на Yandex Cup?
Открыта регистрация на Yandex Cup — чемпионат Яндекса для разработчиков с призовым фондом 12 млн рублей и финалом в Стамбуле!
Участники смогут соревноваться за призы и выход в финал, а ещё — пройти собеседование в Яндекс по упрощённой схеме.
В направлении Фронтенд 5 призовых мест:
1 место — 500 000 ₽
2 место — 400 000 ₽
3 место — 300 000 ₽
4 место — 200 000 ₽
5 место — 100 000 ₽
Этапы Yandex Cup: 20–29 октября пройдёт пробный тур для знакомства с платформой и задачами. 2 ноября состоится квалификация, где будут определены 180 финалистов. Финал и церемония награждения пройдут офлайн 5–7 декабря в Стамбуле.
Регистрируйтесь до 29 октября.
Заходите на юбилей 🥳
29 октября наше A?.Frontend Community празднует свой третий день рождения и организует грандиозный митап. Вас ждут доклады о микрофронтендах, OpenAI и вайб-кодинге в разработке, а ещё диджей-сет, квиз, демо-зоны и, конечно, праздничный торт.
Подробнее, что в программе:
➡️ «Миграция фронтенд-кода: лёгкая поддержка проектов» — Иван Усынин, технический лидер разработки, Альфа-Банк.
➡️ «JavaScript на большом экране: как укротить WebOS и не сломать пульт от ТВ» — Антон Халин, старший разработчик, VK.
➡️ «Dreamcoding или как вернуть искру разработки, на примере трёх проектов» — Зар Захаров, Rutube.
➡️ «Эволюция OpenAI API — как это влияет на взаимодействие с AI в продуктах, которые мы разрабатываем» — Андрей Мелихов, ведущий разработчик интерфейсов, Yandex Cloud.
➡️ 3… 2… 1… Quiz от A?.Frontend Community с розыгрышем юбилейных призов.
➡️ Networking party c диджеем, активностями и демо по докладам.
Регистрируйтесь по ссылке. Встречаемся 29.10 в 19:00 в Санкт-Петербурге или онлайн.
#анонс
➿➿➿➿➿➿
@alfadigital_jobs — канал о работе в IT и Digital в Альфа-Банке
#статья дня
Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?
Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!
Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:
Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/
И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/
Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.
Прекрасные инструменты, целый новый мир открывают.
#fonts #tools #бородач
#такое дня
Для чего нужны линтеры и форматтеры? Нет, не для того, чтобы код выглядел красиво, это субъективное. Так для чего же?
Правильно, чтобы он выглядел единообразно. А ещё чтобы раз и навсегда исключить бесконечные споры о запятых, количестве строк и их длине.
Но есть у автоформаттеров и менее очевидная задача — сделать код поддерживаемым Чтобы по диффу сразу было видно, какие строки реально изменились, без гадания на символах.
Из-за этого мы с товарищем когда-то много спорили: когда определение объекта должно «разъезжаться» по строкам, а когда — нет.
В Dart, кстати, решено элегантно:
— есть запятая в конце — будет перенос,
— нет запятой — всё остаётся в одной строке. Сравните:
SizedBox(
height: buttonSize / 3,
),
SizedBox(height: buttonSize / 3),
rustfmtcheck меняет читабельное:
use crate::{
xyz,
abc,
};
use crate::{xyz, abc};
#дайджест недели
1️⃣Понедельник
100 способов отцентрировать элемент
/channel/htmlshit/3806
Оказывается, в content-е псевдоэлементов можно использовать переменные. Это позволяет делать, например, анимированные бейджики или уведомления.
/channel/htmlshit/3808
2️⃣ Вторник
Классная статья по Big O — визуально и интерактивно объясняет сложность алгоритмов. Есть перевод, но лучше идти сразу к оригиналу — там интерактив
/channel/htmlshit/3809
Команда Motion перешла с TypeScript на .NET / C#. CI-проверки в TS занимали 20+ минут, а компилятор часто падал
/channel/htmlshit/3811
3️⃣ Среда
У FFmpeg есть логотип — и он основан на алгоритме DCT, лежащем в основе JPEG
/channel/htmlshit/3813
Simon Gellner сделал идеальный пример кружка статуса через clip-path и маску. Всё настраивается CSS-переменными, а ещё там используется любопытный API DiceBear для генерации аватарок
/channel/htmlshit/3815
5️⃣ Четверг
Если парсинг JSON стал постоянным источником боли — попробуй jsonrepair. Он чинит незакрытые кавычки, лишние запятые и другую питонячесть вроде True
/channel/htmlshit/3817
5️⃣ Пятница
Фронтенд-разработка выматывает сильнее, чем кажется
/channel/htmlshit/3818
#css #js #tools #animation #bigo #typescript #dotnet #json #frontend