14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.
Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.
2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.
3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
transform: translateY(100%);
}
Весна — идеальное время, чтобы освоить и обновить навыки по выгодной цене.
При оплате курсов Яндекс Практикума до 30 апреля вы получите:
— 5 дополнительных курсов, подобранных специально под вашу программу
— набор из 5 электронных книг по саморазвитию
А также — скидку 15% для карьерного роста.
Начните сейчас — и уже к осени вы значительно прокачаете свои навыки и сможете уверенно выйти на рынок в пик сезона найма.
Как давно вы от души смеялись? А отдыхали?
Кажется, можно делать это чаще — даже вне зависимости от ответа. Да и лучше это всё совместить и поучаствовать в розыгрыше 10 и 20 тысяч рублей на 🌍Путешествиях.
Переходите в тг-канал команды Яндекс Вертикалей, чтобы посмотреть подробности.
Да, кстати! Я же совсем забыл написать обновление по пульту и магазину 🙂
Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием!
Как оказалось — ну, и ожидалось — пультов в магазине многие десятки. И моё до глупости банальное 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 тоже на подходе.
Спасибо за поддержку!
#статья дня
Когда пакет долго живёт, у него очень легко появляется один большой 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
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
#фишка дня
У скроллящегося сайдбара можно сделать 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)
);
}
#codepen дня
В какую сторону крутится? :)
https://codepen.io/jkantner/pen/bNwOdbw
#threejs #3d
#инструмент дня
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
#статья дня
Разработчики 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
#заметка дня
Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин.
Причина звучит обидно и стыдно: 4.3 Spam. И означать это может всё, что угодно: от того, что использованы чужие закопирайченные ассеты и до того, что я просто взял рандомное приложение с гитхаба и собрал его.
А я ведь им соточку занёс, и вовсе не рублей!
Каюсь, логотипы приложений были взяты с сайта Самсунга, было глупо их не менять. Единственная ли это причина — неизвестно. Возможно, слишком много пультов развелось.
Вот только проблема с теми пультами довольно прозаична: они все требуют подписку. 7 долларов в неделю за пользование посредственным приложением — а, каково?! Весь их бизнес построен либо на отмывании денег, либо на забывчивости людей (примерно как большое количество сервисов резюме).
Но Apple такая ситуация полностью устраивает, 15-30% капают же, почему нет.
Ладно, отбомбившись, я посмотрел ещё раз и решил реализовать некоторые вещи, которые хотел вынести в обновления: визард подключения, переключение между несколькими телевизорами, «умные» сцены вроде включить ТВ и нетфликс, или выключить ТВ через заданное количество минут. На подходе макросы.
Вся суть действий — превратить копию физического устройства в нечто большее, в подобие некоторого умного хаба. Во что-то, напоминающее сервис.
Пульт сейчас в TestFlight, если у кого есть дома телевизор Samsung или LG — отмечайтесь в комментариях, пришлю приглашение. Пульт никаких данных не собирает вообще, в том и была задумка.
Но даже подача приложения на ревью это отдельная история: то размеры скриншотов не те, то видео. Потому в последующих постах я выложу разные полезные сниппеты и подходы, которые помогли мне пройти подачу как минимум до модерации. Надеюсь, получится и дальше.
P. S. Если я всё верно понял, вот и ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHN
#apple #flutter
Как строить карьеру в IT и не раствориться в работе.
Я backend-разработчик и футбольный энтузиаст с системным подходом к спорту.
Играю в разных странах и с разным уровнем соперничества: от локальных матчей до турниров в Азии.
В канале пишу:
— о личном опыте лида в IT и реальных технических решениях 👨🎓
— о развитии своих проектов и о том, чему они учат 📈
— о футбольных движухах в разных странах 🏃♂️
— о том, как не терять форму при плотной работе 💪
— о лайфстайле зимовщика 🧘♀️
Без мотивационных лозунгов.
Без «успешного успеха».
Только практика, дисциплина и честные наблюдения.
👉 Футбольный синьор
Если вам близка идея баланса между карьерой и личной жизнью и интересно заглянуть за кулисы IT, добро пожаловать на канал.
#такое дня
Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»
Ну… как бы… мне даже добавить нечего: mizinov/area-comparison" rel="nofollow">https://observablehq.com/@mizinov/area-comparison (на русском)
#optical #illusion #perception #design #бородач
#молния дня
Обнаружена supply chain-атака на axios. Скомпрометированы версии 1.14.1 и 0.30.4, опубликованные через взломанный аккаунт мейнтейнера.
Что происходит:
— в зависимости добавлен вредоносный пакет
— он выполняется через postinstall без участия пользователя
— скачивает payload с C2 и запускает его (macOS / Windows / Linux)
Под угрозой:
— проекты с axios@^1.14.0 или ^0.30.0 (обновятся автоматически)
Что делать:
— зафиксировать версию на 1.14.0 / 0.30.3
— проверить системы, где делали npm install сегодня
— при необходимости ротировать креды
Подробный разбор:
https://safedep.io/axios-npm-supply-chain-compromise/
Вокруг ChatGPT и AI сейчас много шума, и среди него всё сложнее находить действительно полезные источники.
Это подборка Telegram-каналов про разработку, AI и безопасность без случайных рекомендаций. Внутри:
— автоматизация и инструменты для разработчиков
— OSINT, кибербезопасность и практики ИБ
— работа с AI и примеры промптов
— агенты, инструменты и новости индустрии
Если хочется нормального сигнала вместо шума — вот список:
/channel/addlist/iUFqGiQpZ6NmNjE6
#статья дня
Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.
В Chrome 147, наконец, добавили element-scoped view transitions.
До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.
Выглядело это примерно так:
document.startViewTransition(() => {
list.sort(...)
render()
})
listElement.startViewTransition(() => {
list.sort(...)
render()
})
#инструмент дня
Наткнулся на шрифт Datatype.
Это вариативный шрифт, который превращает текст в… графики. Прямо через лигатуры. Пишешь что-то вроде:
{l:15,45,90,30,75,20,85,95} → получаешь линейный график
{b:30,70,50,90} → столбики
{p:65} → круговую диаграмму
То есть никакого SVG, canvas и прочего.
Сделано это через OpenType-лигатуры + вариативные оси. По сути, шрифт парсит жисон и подменяет символы на нужные глифы. Выглядит интересно.
Где это может быть полезно:
— быстрые прототипы графиков прямо в тексте
— документация
— демки и презентации
Минусы:
— копирование: вставится исходный текст, но не график (логично)
— доступность: скринридеры будут читать это как {l:15,45…}, а не как график (решаемо)
— кастомизация сильно ограничена
Хотя как концепт — очень круто.
Пощупать можно тут:
https://franktisellano.github.io/datatype/
Где используем, котаны?
#font #diagram
#статья дня
Злые Марсиане в очередной раз хвастаются!
Making your site visible to LLMs: 6 techniques that work, 8 that don't
НДС 0% для твоего продукта
Большинство небольших IT-команд думают, что реестр российского ПО - это для корпоратов с юристами и штатом 300 человек. Но это не так. Если у тебя есть:
– мобильное приложение
– SaaS продукт
– B2B сервис для бизнеса
– AI сервис / бот / автоматизация
…то вполне возможно, что продукт можно включить в реестр российского ПО. И вот зачем это делать:
– НДС 0% (и для НДС 5% на УСН тоже)
– возможность работать с госзаказчиками
– репутация: “реестровое ПО” звучит убедительнее, чем “мы стартапчик”.
Если у тебя уже есть продукт и ты хочешь понять, можно ли включиться в реестр - напиши нам.
Разберем бесплатно твою ситуацию, скажем честно:
– можно зайти или нет
– что нужно доработать
– сколько времени займет
– какие выгоды ты получишь.
Пиши или переходи на сайт.
Пока одни думают “это не для нас”, другие уже экономят деньги.
А у Mad CSS офигенский мерч оказался между прочим :)
Читать полностью…
Найти работу фронтендера трудно? Ты просто не там ищешь!
@job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно
Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑💻
❤️ Небольшая, но полезная подборка.
В IT сейчас слишком много шума. Собрана папка с каналами по разработке, аналитике и кибербезопасности.
Без сгенерированных текстов — только реальные кейсы и мысли от практикующих специалистов.
🔥 Забирайте, чтобы оставаться в контексте
#фишка дня
В CSS есть ключевое слово safe, которое используется вместе со значениями выравнивания и не даёт контенту «вылезать» за границы контейнера. Если элемент не помещается при обычном выравнивании, браузер автоматически смещает его так, чтобы он оставался видимым.
Это удобно в адаптивных интерфейсах, где размеры могут меняться и важно не терять доступ к содержимому. safe работает с flexbox, grid и свойствами вроде align-items, justify-content и другими.
Простой пример:
.container {
display: flex;
justify-content: safe center;
}
Выиграй деньги, став чемпионом ИТ-соревнования от МТС
Остались считанные дни до окончания регистрации — призовой фонд 1 500 000 рублей.
True Tech Hack — это три уникальные задачи для инженеров данных, разработчиков и системных аналитиков. За лучшие решения дают деньги и зовут на стажировку. Для всех финалистов — закрытая вечеринка с диджеем в Москве на видовой площадке.
Среди всех, кто зарегистрировался, разыгрывают 2 приставки с геймпадами для облачного гейминга МТС Fog Play и 10 подписок по 20 часов игры.
Регистрация закроется 10 апреля в 10:00 — торопись!
15 апреля на вебинаре поговорим о том, как с нуля построить разработку в облаке
⚫️Обсудим, зачем переносить разработку в облако, какие есть подводные камни
⚫️Подготовим базовую инфраструктуру и развернëм ключевые сервисы разработки
⚫️Соберём, протестируем и развернëм приложение в целевое окружение, оптимизируем раннеры для ускорения сборок
⚫️Настроим безопасность: доступы, секреты, шифрование
⚫️Подготовимся к продакшену и масштабированию
⚫️Ответим на ваши вопросы
Присоединяйтесь! Узнайте, как с нуля построить и запустить инфраструктуру разработки в облаке MWS Cloud Platform.
📆 15 апреля в 14:00 (мск)
Зарегистрироваться
#заметка дня
Чем отличаются auto-fit и auto-fill в гридах?
Отвечает Александр Друзь.
Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)
Так в чем же разница, словами? :)
При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.
В общем, всё довольно просто.
#css #grid #repeat #бородач
#книга дня
Невозможно было пройти мимо, обязательно к прочтению!
#инструмент дня
Как узнать, верный ли JSON тебе передали, или нет?
Ну, общепринято как-то так:
function tryParseJSONObject (jsonString){
try {
const o = JSON.parse(jsonString);
if (o && typeof o === "object") {
return o;
}
}
catch (e) { }
return false;
};
1234 и false к ошибке не приведут. Да и передача null просто вернёт null, который ещё и объект... ну вы поняли.
#codepen дня
Наткнулся на приятный и эффектный пример 3D-интерфейса — Painting Wheel.
Выглядит и ощущается как Three.js, но это CSS-преобразования.
По сути, берётся набор карточек и раскладывается по окружности. У каждой есть свой угол и одно и то же расстояние от центра. За счёт этого из обычного списка получается кольцо. Дальше вся сцена чуть наклоняется и добавляется перспектива.
JavaScript используется только чтобы поменять перспективу.
Ну а чтобы показать, что это всё совсем не запредельно сложно, я решил вытащить непосредственно реализацию кольца в отдельный кодпен: https://codepen.io/editor/alinaki/pen/019d2f65-9738-7ea5-a667-524ee1a68bef
Чтобы стало совсем понятно, я добавил панель управления: можете прощёлкать чекбоксы в верхнем правом углу и настроить любой аспект карусели.
Можно вообще сделать простую бесконечную прокрутку!
Из наворотов — только зум колесом, чтобы было проще рассматривать и понимать происходящее. Понятное дело, ваш ИИ-агент с лёгкостью вытащит код и из оригинального примера, но из упрощённого это делать сподручнее, не правда ли? :)
#css