Будни разработчика
14.5K subscribers
1.3K photos
383 videos
8 files
2.19K 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
#статья дня

Когда пакет долго живёт, у него очень легко появляется один большой 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 тоже на подходе.

Спасибо за поддержку!
14👍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
👍96
Как давно вы от души смеялись? А отдыхали?

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

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

Наткнулся на шрифт 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
👍14
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня

Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.

В Chrome 147, наконец, добавили element-scoped view transitions.

До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.

Выглядело это примерно так:

document.startViewTransition(() => {
list.sort(...)
render()
})


Теперь можно запустить переход прямо на контейнере списка:

listElement.startViewTransition(() => {
list.sort(...)
render()
})


И в этот момент браузер работает только с этим куском DOM.

На практике это означает, что можно спокойно:
— анимировать список
— параллельно обновить, например, сайдбар
— и одно не будет цеплять другое

Сплошные плюсы.

Собственно, статья:
https://developer.chrome.com/blog/element-scoped-view-transitions

Что ещё в Chrome 147:
https://developer.chrome.com/blog/new-in-chrome-147

#chrome #view #transitions
11
This media is not supported in your browser
VIEW IN TELEGRAM
#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%);
}


Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач
👍14
В Сбере и Т-Банке менеджерил людей. Сейчас — Claude и OpenClaw. Не легче.

Егор у себя в канале рассказывает, как собирает AI-продукты соло — без команды, без кода руками.

Собрал MVP за 3 недели. Потом репозиторий вырос — и AI-агенты начали ошибаться на каждой задаче. Файл не туда положит, логику переиначит, чинит фикс в одном — ломает в трёх. Два дня правил за ним то, что он сам же и сломал, выглядел как идиот. 🫠

Дошло: дело не в модели. Дело в подходе.

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

Что понял:

• писать код — больше не работа. Работа — строить пайплайн, в котором AI не сбивается с задачи.
• контекст — это валюта. Каждый промпт = вопрос «что именно агент должен сейчас видеть, чтобы не угадывать».

Без ретуши — в @itsbulychev.
🤡11👎81
#такое дня

Кто хочет поорать на монитор?

На меня не смотрите, я уже поорал.

Итак, насколько хорошо ты понимаешь даты в JavaScript?

Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.

Итак, вашему вниманию квиз на пограничные условия в JS Date API.

Вперёд, делитесь результатами: https://jsdate.wtf/

У меня всё очень плохо 🫠

#js #date #wtf #бородач
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31
#статья дня

Висящие промисы как простой способ оборвать async-функцию


await new Promise(() => {})


Зачем так делать?

Отмена через throw ненадёжна — её легко случайно поймать в try/catch, и код поедет дальше.


try {
await handler()
} catch (e) {}


С висящим же промисом выполнение гарантированно останавливается.

Где это используется?

В пошаговых workflow, где функция должна завершиться на середине и продолжиться позже.


async function signup(user) {
await step("create-user", user)

if (!user.emailVerified) {
await new Promise(() => {}) // закончили здесь
}

await step("send-email", user)
}


Оркестратор сохраняет прогресс и потом запускает её заново, пропуская выполненные шаги.

Минусы:
— такой код легко сломать случайно: забытый await или лишний Promise — и функция зависнет навсегда
— трудно дебажить: нет ошибки, нет стека, просто «ничего не происходит»
— не подходит для обычного приложения без оркестратора (сам по себе это тупик)
— может путать других разработчиков: выглядит как баг, а не как намеренное поведение

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

А, ну да. Сама статья: https://www.inngest.com/blog/hanging-promises-for-control-flow

#js #promise #halt
👍4🫡1
🏄‍♂️ Приближаем лето всем фронтенд-сообществом

23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды🌴

♦️Приходите обсудить, как прокачать AI-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене.

В программе не только доклады: будут живые дискуссии, командный квиз, стенды с активностями и афтепати!

🔖 Смотрите подробности и регистрируйтесь. Встречаемся только в офлайне, количество мест ограничено.
Please open Telegram to view this post
VIEW IN TELEGRAM
👎2
#фишка дня

А вы знали, что в GitHub Markdown не надо списки нумеровать самому?

1. Раз
1. Два
1. Три


будет буквально преобразовано в

1. Раз
2. Два
3. Три


И не надо париться, когда редактируешь.

P. S. оказывается, есть такая штука, как mdlint, и она на самостоятельную нумерацию очень даже ругается.
🤩81👍1🫡1