#ссылка дня

Вы ждали этого. Вы хотели этого. Вы жаждали этого!

Вы рисовали мемы, вы унижали бакендеров, вы унижались сами. Но теперь все проблемы решены!

Итак, 100 способов отцентировать div: https://css-generators.com/center/

Красненькое не надо использовать.

#css #div #center

#фишка дня от Jhey

Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip #бородач

#статья дня

Я уже откровенно боюсь иной раз выкладывать статьи с какой-то теорией или генераторами, потому что обязательно в комментариях будет «есть же ИИ». Таким темпом проще рассказывать о продакт-инициативах (я вот про Story Map недавно узнал, надо?). Но вдруг продактов тоже заменит ИИ? Я бы с удовольствием.

Ладно, к чему это я. Конечно же к очередной статье про Big O aka сложность алгоритмов!

Да, сеньоров вряд ли спросят, разве что бровью поведут, а вот собесы на джунов и мидлов всё ещё очень часто в себе содержат требования или оценить сложность алгоритма, или написать «без квадратов».

Итак, что же тут у нас? А тут у нас и сама статья:
https://samwho.dev/big-o/

И её перевод: https://habr.com/ru/companies/timeweb/articles/942956/

Но честное слово, лучше идите смотреть статью. Там наш с вами любимый интерактив!

#bigo #algorithm #cs

#статья дня

Motion почти 5 лет держали монорепозиторий на TypeScript (~2.5 млн строк). Но со временем разработка стала всё медленнее.
CI прогонял проверки больше 20 минут. Компилятор часто падал.

Это все решилось бы ts-go, но они устали ждать.

Приходилось поддерживать Zod, иначе проверка данных разваливалась. Prisma и Drizzle создавали трудности при рефакторинге. Совместный код между вебом и мобилой ломался при малейших изменениях.
В итоге команда решила перейти на .NET и C#.

Ссылка на статью: https://engineering.usemotion.com/moving-off-of-typenoscript-e7bb1f3ad091?gi=1f6548fc7f1a

Аргументы:
— Entity Framework упрощает работу с данными.
— Синтаксис и структура знакомы после TypeScript.
— Экосистема стабильная, инструменты зрелые.

Теперь их бэкенд пишется на C#, фронт остался на React. По их словам, так быстрее и предсказуемее, чем поддерживать TypeScript на большом масштабе.

Еще интересный момент: для своей системы ИИ-агентов языком исполнения они решили оставить JavaScript, но выполнять чужой Джаваскрипт на джаваскриптовом же бакенде выглядело небезопасно. Возможно, это стало решающим аргументом?

Мнения, котаны?

#typenoscript #zod #dotnet

#codepen дня

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

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

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

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

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

#css #noscript #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

#видео дня

Буквально час назад вышла документалка о 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