Будни разработчика
14.5K subscribers
1.29K photos
382 videos
8 files
2.18K links
Блог Lead JS-разработчика
Автор: @bekharsky

По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv

Чат: https://t.me/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
#заметка дня

Чем отличаются auto-fit и auto-fill в гридах?

Отвечает Александр Друзь.

Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)

Так в чем же разница, словами? :)

При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.

В общем, всё довольно просто.

#css #grid #repeat #бородач
6👍3
#такое дня

Олды тут?

#бородач
🫡17🤩2
#заметка дня

Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин.

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

А я ведь им соточку занёс, и вовсе не рублей!

Каюсь, логотипы приложений были взяты с сайта Самсунга, было глупо их не менять. Единственная ли это причина — неизвестно. Возможно, слишком много пультов развелось.

Вот только проблема с теми пультами довольно прозаична: они все требуют подписку. 7 долларов в неделю за пользование посредственным приложением — а, каково?! Весь их бизнес построен либо на отмывании денег, либо на забывчивости людей (примерно как большое количество сервисов резюме).

Но Apple такая ситуация полностью устраивает, 15-30% капают же, почему нет.

Ладно, отбомбившись, я посмотрел ещё раз и решил реализовать некоторые вещи, которые хотел вынести в обновления: визард подключения, переключение между несколькими телевизорами, «умные» сцены вроде включить ТВ и нетфликс, или выключить ТВ через заданное количество минут. На подходе макросы.

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

Пульт сейчас в TestFlight, если у кого есть дома телевизор Samsung или LG — отмечайтесь в комментариях, пришлю приглашение. Пульт никаких данных не собирает вообще, в том и была задумка.

Но даже подача приложения на ревью это отдельная история: то размеры скриншотов не те, то видео. Потому в последующих постах я выложу разные полезные сниппеты и подходы, которые помогли мне пройти подачу как минимум до модерации. Надеюсь, получится и дальше.

P. S. Если я всё верно понял, вот и ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHN

#apple #flutter
👍1710
Да! Да! Дааааааа!
241👍20🤩9🤬1
#статья дня

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

Вашему вниманию представляется focusgroup: https://blogs.windows.com/msedgedev/2026/03/05/making-keyboard-navigation-effortless/

Что делает? А довольно крутую штуку: внутри группы фокус элементов можно будет передвигать клавиатурными стрелками, а не только табом. Захват фокуса произойдёт автоматически, не надо городить скрипты.

В блоге Chrome они тоже отметились: https://developer.chrome.com/blog/focusgroup-rfc

Потестировать можно уже сегодня в Chromium-браузерах: включаете Experimental Web Platform features в about://flags и дальше тут: https://microsoftedge.github.io/Demos/focusgroup/

Очень жду распространения, поддержка клавиатурной навигации штука сложная.

#focus #a11y
9👍2
#инструмент дня

YouTube в 4k в независимом браузере? Да!

Я уже давно посвящаю вас в процесс разработки браузера Ladybird — нового и независимого. Но что-то давно не присылал обновлений. А их полно!

Вот из апрельской рассылки: https://ladybird.org/newsletter/2026-03-31/

В мартовском апдейте Ladybird много простых, но важных вещей. За месяц замержили 352 PR’а от 49 контрибьюторов, причём 19 из них — это люди, которые раньше в проект не коммитили. В целом видно, что разработка идёт непрерывно и без провалов по активности.

Из заметного по движку — добавили AsmInt, свой байткод-интерпретатор на ассемблере для LibJS. Он берёт на себя операции вроде арифметики и сравнений, а в более сложных случаях уже уходит в C++. Параллельно его допиливали в течение месяца: убирали лишние проверки, использовали аппаратные флаги переполнения, кэшировали часто используемые значения. На этом фоне бенчмарки подросли: Kraken ~1.44×, Octane ~1.37×, SunSpider ~1.69×.

Добавили часть Media Source Extensions — теперь есть поддержка VP9 и Opus в WebM, за счёт чего начинает работать выбор качества на YouTube, вплоть до 4K. Пока это доступно только с флагом --expose-experimental-interfaces, и есть проблемы с памятью (буфер не очищается), но сама связка уже функционирует.

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

А главное, собрать его очень легко. Ну, если вы в принципе имеете C++ Toolchain на вашей машине. Главное, cmake поставить не забудьте :)

Ну или я могу скинуть билд под мак. Как раз собираю сейчас.

#ladybird #browser
3🫡2
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня

В CSS есть ключевое слово safe, которое используется вместе со значениями выравнивания и не даёт контенту «вылезать» за границы контейнера. Если элемент не помещается при обычном выравнивании, браузер автоматически смещает его так, чтобы он оставался видимым.

Это удобно в адаптивных интерфейсах, где размеры могут меняться и важно не терять доступ к содержимому. safe работает с flexbox, grid и свойствами вроде align-items, justify-content и другими.

Простой пример:


.container {
display: flex;
justify-content: safe center;
}


Здесь элементы будут центрироваться, но если не помещаются, выравнивание изменится так, чтобы их не обрезало.

Подробнее читать тут: https://iprodan.dev/l/safe-alignment/

#css #flex #safe
20
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня

В какую сторону крутится? :)

https://codepen.io/jkantner/pen/bNwOdbw


#threejs #3d
🤩10👍4👎2
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня

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

Сразу пример со всем кодом и описанием: https://codepen.io/editor/alinaki/pen/019d954a-79e7-7e49-8653-181b0b67ad61

Для этого используется mask-image, а управляет всем scroll timeline: скролл контейнера становится прогрессом CSS-анимации. Дальше анимация меняет стопы градиента в маске, поэтому в начале верхний fade выключен, после начала прокрутки появляется, а в конце исчезает нижний.


@keyframes sidebar-fade-mask {
0% { --fade-top-end: 0%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
8%, 92% { --fade-top-end: 6%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
100% { --fade-top-end: 6%; --fade-bottom-start: 100%; --fade-bottom-end: 100%; }
}

.menu-scroll {
animation: sidebar-fade-mask auto linear both;
animation-timeline: scroll(self block);
mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 var(--fade-top-end),
#000 var(--fade-bottom-start),
transparent var(--fade-bottom-end)
);
}


Важный момент в том, что здесь не двигается сам градиент и не меняется opacity списка. Меняются именно стопы градиента, и из-за этого fade ведёт себя как часть скролла, а не как отдельный декоративный слой.

Если хочется понять глубже, смотреть стоит в сторону animation-timeline, scroll-timeline и обзора scroll-driven animations.

Upd. добавил светлую тему, чтобы разница была виднее.

#css #scroll
👍183🤩2
#фишка дня

Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!


line-height: 1cap;


И вы великолепны.

P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.

#css #бородач
15
#статья дня

Когда пакет долго живёт, у него очень легко появляется один большой index.ts, который реэкспортит почти всё подряд.

В какой-то момент это начинает мешать: вроде бы импортируешь один маленький хелпер, а на практике инструменты идут через общий barrel-файл и поднимают гораздо больший граф модулей, чем реально нужен. На этом особенно быстро начинают болеть тесты и дев-среда, потому что Vitest и Vite очень чувствительны к размеру и связности module graph.

Статья Organize your library with subpath exports как раз про более аккуратный способ это организовать. Идея в том, чтобы не складывать весь публичный API в один вход, а объявлять несколько явных входов через exports в package.json. Тогда вместо условного import { bau, useWow } from 'mylib' можно сделать import { bau } from 'mylib/helpers' и import { useWow } from 'mylib/hooks'.

Снаружи это выглядит как импорт из подпапок, но на самом деле это не доступ внутрь пакета, а специально объявленные публичные entrypoint’ы.

За счёт этого API пакета становится понятнее, внутренности лучше инкапсулируются, а tooling меньше спотыкается о лишние реэкспорты и случайные зависимости. Хороший короткий разбор, если хочется быстро понять сам подход и зачем он нужен.

#vite #barrel #esm
👍11👎1🫡1
Будни разработчика
#заметка дня Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин. Причина звучит обидно и стыдно: 4.3 Spam. И означать это может всё, что угодно: от того, что использованы чужие закопирайченные ассеты и до того, что я просто взял…
Да, кстати! Я же совсем забыл написать обновление по пульту и магазину 🙂

Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием!

Как оказалось — ну, и ожидалось — пультов в магазине многие десятки. И моё до глупости банальное Smart Remote Plus тупо не искалось (кто бы мог подумать).

Пришлось начинать искать. Захотелось что-то короткое. И необычное. Финское, эстонское или карельское слово — подошло бы идеально. И понеслась...

Koti, Koda, Sora, Vire, Lumi — занято. Havu тоже не прокатил.

В какой-то момент наткнулся на Ruum — эстонское «комната», калька очевидна. На этом и остановился. Ruum Hub — идеально.

Итак, встречайте: Ruum Hub! Теперь шарить намного проще 🙂

https://apps.apple.com/fi/app/ruum-hub-smart-remote/id6761381793

Пока для iOS. Выделенная версия под macOS и на Android на подходе. Все, кто ставил из TestFlight — можете обновляться, я как раз починил интеграцию с последней webOS 25 и начал рабоду над LG NetCast. Google TV тоже на подходе.

Спасибо за поддержку!
11👍6
#статья дня

Злые Марсиане в очередной раз хвастаются!

Making your site visible to LLMs: 6 techniques that work, 8 that don't


Ладно, на самом деле — крайне забавный кейс. Заказчик сидел-сидел, пилил чота с Клодом, в итоге решился на заказную разработку. И ему выкинуло, что, мол, Злые Марсиане отлично подходят.

Как вам такое SEO, а? Сразу ссылка: https://evilmartians.com/chronicles/how-to-make-your-website-visible-to-llms

На самом деле, статья большая, с историческими экскурсами и подробностями обсуждений, но сводится всё к одному: LLM-ки любят простой текст и чёткие направления.

А кто-нибудь застал этот максимально дурацкий бред от SEO-оптимизаторов?

Помните же, как они ломали всю крутую семантику, не давали использовать заголовки, не давали прописывать strong, заставляя упихивать все стили в CSS и писать на дивах?

В моей карьере был случай, когда нас заставляли в каждую статью вносить грамматическую опечатку, просто чтобы поймать людей, ищущих с ошибками 🤦‍♂️

Да, Google и прочие в итоге, конечно, стали ранжировать нормальные проекты выше, но ущерб уже был нанесён.

А что же теперь? Как добиться от AI такой же эффективности как у марсиан?

А теперь заполняете llms.txt, вводите отдельные роуты на Markdown-файлы — и вы великолепны.

Зачем Markdown? Ну потому что все SEO потуги по добавлению в статьи смысла, которого нет, для LLM-ок являются просто HTML-мусором. А текст они любят.

Статью всё равно почитайте, там хорошо.

#llm #ai #seo
Please open Telegram to view this post
VIEW IN TELEGRAM
👍85
Как давно вы от души смеялись? А отдыхали?

Кажется, можно делать это чаще — даже вне зависимости от ответа. Да и лучше это всё совместить и поучаствовать в розыгрыше 10 и 20 тысяч рублей на 🌍Путешествиях.

Переходите в тг-канал команды Яндекс Вертикалей, чтобы посмотреть подробности.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤡81🫡1