14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
🏄♂️ Приближаем лето всем фронтенд-сообществом
23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды🌴
♦️Приходите обсудить, как прокачать AI-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене.
В программе не только доклады: будут живые дискуссии, командный квиз, стенды с активностями и афтепати!
🔖 Смотрите подробности и регистрируйтесь. Встречаемся только в офлайне, количество мест ограничено.
#такое дня
Кто хочет поорать на монитор?
На меня не смотрите, я уже поорал.
Итак, насколько хорошо ты понимаешь даты в JavaScript?
Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.
Итак, вашему вниманию квиз на пограничные условия в JS Date API.
Вперёд, делитесь результатами: https://jsdate.wtf/
У меня всё очень плохо 🫠
#js #date #wtf #бородач
#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 #бородач
#статья дня
Висящие промисы как простой способ оборвать async-функцию
await new Promise(() => {})
try {
await handler()
} catch (e) {}
async function signup(user) {
await step("create-user", user)
if (!user.emailVerified) {
await new Promise(() => {}) // закончили здесь
}
await step("send-email", user)
}
В Сбере и Т-Банке менеджерил людей. Сейчас — Claude и OpenClaw. Не легче.
Егор у себя в канале рассказывает, как собирает AI-продукты соло — без команды, без кода руками.
Собрал MVP за 3 недели. Потом репозиторий вырос — и AI-агенты начали ошибаться на каждой задаче. Файл не туда положит, логику переиначит, чинит фикс в одном — ломает в трёх. Два дня правил за ним то, что он сам же и сломал, выглядел как идиот. 🫠
Дошло: дело не в модели. Дело в подходе.
В маленьком репо контекст помещался целиком — в большом агент стал работать по обрывкам: даёшь задачу, подтягивает 5 файлов, а нужны 12. Делает правдоподобно — а оно не работает.
Что понял:
• писать код — больше не работа. Работа — строить пайплайн, в котором AI не сбивается с задачи.
• контекст — это валюта. Каждый промпт = вопрос «что именно агент должен сейчас видеть, чтобы не угадывать».
Без ретуши — в @itsbulychev.
#статья дня
Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами 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 #бородач
#книга дня
Невозможно было пройти мимо, обязательно к прочтению!