#codepen дня

Мы когда-то давно смотрели на интересный пример использования clip-path и маскинга в CSS для создания кружочка статуса пользователя в сети: https://www.tgoop.com/htmlshit/2741

И вот Саймон Гелнер довёл этот пример до идеала! Размер, положение — всё настраивается через CSS-переменные и выглядит шикарно. Вот, можно поиграться: https://codepen.io/simeydotme/pen/ogNWvMN

Кстати, что даже более интересно, там используется прикольный API аватарок! https://www.dicebear.com/

Максимально неожиданная штука, конечно, с весьма интересными решениями по настройке внешнего вида аватарки и даже с предопределёнными генераторами (seed) на тысячи и миллионы вариантов.

Потрясающая находка, я считаю.

#css #svg #api #avatar

#инструмент дня

Как узнать, верный ли 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, который ещё и объект... ну вы поняли.

А что делать, если получение кривого JSON в вашем мире стало нормой? Да, звучит странно, но таких случаев больше, чем кажется.

Ну, во-первых, определиться, что лучше: упасть или попробовать вернуть хоть что-то? Но это утверждение верно и без проблем с JSON.

Мне когда-то опытный Java-разработчик возвращал самодельный JSON с одиночными кавычками. Такое видение было у человека.

Если хоть что-то, вашему вниманию jsonrepair: https://github.com/josdejong/jsonrepair

Справится с комментариями, кривыми кавычками, незакрытыми полями, отсутствующими запятыми, случайными операторами и всяческой питонячестью вроде True.

А ещё иногда модели этим грешат, просто не досылают стрим.

Плохой JSON ближе, чем кажется, котаны :)

#json #repair #fix

#такое дня

Я просто зае**лся, честно скажу. Само написание кода — самое простое, что мы делаем. Всё остальное — это, бл**ь, полный трэш. Эти бесконечные билды, созвоны, тикеты. Постоянно собирать и разбирать этот еб**ый фронт каждую, бл**ь, неделю. Я просто уже, бл**ь, не могу. Я зае**лся. Мой организм уже меня шлёт нах**: у меня третий раз за полтора месяца деплой падает, бл**ь, и состояние непонятно какое. В плане тестов хуже фронтенда работы в мире нет. Просто, бл**ь, полная х**ня.

#фишка дня

Пишешь чат или выводишь данные лога в консоль и хочешь чтобы каждое новое сообщение снизу было видимым?

Ни слова больше! Спека 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 #бородач

#такое дня

Для чего нужны линтеры и форматтеры? Нет, не для того, чтобы код выглядел красиво, это субъективное. Так для чего же?

Правильно, чтобы он выглядел единообразно. А ещё чтобы раз и навсегда исключить бесконечные споры о запятых, количестве строк и их длине.

Но есть у автоформаттеров и менее очевидная задача — сделать код поддерживаемым Чтобы по диффу сразу было видно, какие строки реально изменились, без гадания на символах.

Из-за этого мы с товарищем когда-то много спорили: когда определение объекта должно «разъезжаться» по строкам, а когда — нет.

В Dart, кстати, решено элегантно:
— есть запятая в конце — будет перенос,
— нет запятой — всё остаётся в одной строке. Сравните:

SizedBox(
  height: buttonSize / 3,
),

и

SizedBox(height: buttonSize / 3),

Для единичных значений я предпочту второе, для выражений — первое. И так далее. Именно ради удобного просмотра изменений в PR.

И вот недавно в рассылке ядра Linux Линус Торвальдс пожаловался, что rustfmtcheck меняет читабельное:

use crate::{
  xyz,
  abc,
};

на слипающееся:

use crate::{xyz, abc};

...и делает это по каким-то непредсказуемым эвристикам. Потому что правила Rust оставляют это на усмотрение утилит. В итоге, вместо помощи, форматтер ломает диффы, мешает мёрджам и ухудшает поддержку кода.

Линус подытожил просто: такие инструменты превращают аккуратный код в bass-ackwards garbage — и делают хуже, а не лучше.

Что, котаны, кто-то до сих пор сидит без Prettier? 🙂

Или уже без Prettier?

#format #prettier

#статья дня

Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?

Например, вариативный 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 #бородач

#такое дня

Некоторые люди серьёзно предъявляют джаваскрипту за подобное.

Другие им говорят: «Ты бы у меня собес не прошёл!»

Чо, котаны, надо такое понимать, или ну нахер? :)

#инструмент дня

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

Фронтенд, покодим на 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 октября.

#видео дня

Буквально час назад вышла документалка о Vite. Собственно, вот: https://youtu.be/bmWQqAKLgT4

Прекрасная история о единении.

Илья, твой выход!

#video #vite

#статья дня

Давно я не вспоминал Злых Марсиан! А они не прекращали писать в блог. На сей раз — как организовать поиск в 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

#фишка дня

— Это код, он не может сделать больно!

Код:

const a = [1, 4, -2, 5, -6];
let i;
for (i = 0; i < a.length && a[i] > 0; i++);
// i: 2

#статья дня

Для субботней статьи дня я решил выбрать чтение полегче:

Что происходит, когда вы посещаете сайт?

А и правда, что? Как давно вы об этом задумывались? А вот на собеседованиях до сих пор спрашивают.

Возможно, кто-то опять заверещит, что знать это — подобно знанию ассемблера. А я отвечу: «А почему бы и нет?».

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