Telegram Web
This media is not supported in your browser
VIEW IN TELEGRAM
#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
👍95
#инструмент дня

Как узнать, верный ли 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
👍13🫡3
#такое дня

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

1️⃣Понедельник

100 способов отцентрировать элемент
https://www.tgoop.com/htmlshit/3806

Оказывается, в content-е псевдоэлементов можно использовать переменные. Это позволяет делать, например, анимированные бейджики или уведомления.
https://www.tgoop.com/htmlshit/3808

2️⃣ Вторник

Классная статья по Big O — визуально и интерактивно объясняет сложность алгоритмов. Есть перевод, но лучше идти сразу к оригиналу — там интерактив
https://www.tgoop.com/htmlshit/3809

Команда Motion перешла с TypeScript на .NET / C#. CI-проверки в TS занимали 20+ минут, а компилятор часто падал
https://www.tgoop.com/htmlshit/3811


3️⃣ Среда

У FFmpeg есть логотип — и он основан на алгоритме DCT, лежащем в основе JPEG
https://www.tgoop.com/htmlshit/3813

Simon Gellner сделал идеальный пример кружка статуса через clip-path и маску. Всё настраивается CSS-переменными, а ещё там используется любопытный API DiceBear для генерации аватарок
https://www.tgoop.com/htmlshit/3815

5️⃣ Четверг

Если парсинг JSON стал постоянным источником боли — попробуй jsonrepair. Он чинит незакрытые кавычки, лишние запятые и другую питонячесть вроде True
https://www.tgoop.com/htmlshit/3817


5️⃣ Пятница

Фронтенд-разработка выматывает сильнее, чем кажется
https://www.tgoop.com/htmlshit/3818

#css #js #tools #animation #bigo #typescript #dotnet #json #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
10
#фишка дня

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

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

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

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

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

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

В 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
8👍2🫡1
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня

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

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

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

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

Чо, котаны, надо такое понимать, или ну нахер? :)
🤩61🫡1
Forwarded from Alfa Digital
Заходите на юбилей 🥳

29 октября наше A?.Frontend Community празднует свой третий день рождения и организует грандиозный митап. Вас ждут доклады о микрофронтендах, OpenAI и вайб-кодинге в разработке, а ещё диджей-сет, квиз, демо-зоны и, конечно, праздничный торт.

Подробнее, что в программе:

➡️ «Миграция фронтенд-кода: лёгкая поддержка проектов» — Иван Усынин, технический лидер разработки, Альфа-Банк.

➡️ «JavaScript на большом экране: как укротить WebOS и не сломать пульт от ТВ» — Антон Халин, старший разработчик, VK.

➡️ «Dreamcoding или как вернуть искру разработки, на примере трёх проектов» — Зар Захаров, Rutube.

➡️ «Эволюция OpenAI API — как это влияет на взаимодействие с AI в продуктах, которые мы разрабатываем» — Андрей Мелихов, ведущий разработчик интерфейсов, Yandex Cloud.

➡️ 3… 2… 1… Quiz от A?.Frontend Community с розыгрышем юбилейных призов.

➡️ Networking party c диджеем, активностями и демо по докладам.

Регистрируйтесь по ссылке. Встречаемся 29.10 в 19:00 в Санкт-Петербурге или онлайн.

#анонс



@alfadigital_jobs — канал о работе в IT и Digital в Альфа-Банке
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1311
#инструмент дня

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
9👍5🤩2
Фронтенд, покодим на 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 октября.
🤡43👎2🤬1
#видео дня

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

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

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

#video #vite
🤡95👍3🫡1
#статья дня

Давно я не вспоминал Злых Марсиан! А они не прекращали писать в блог. На сей раз — как организовать поиск в 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
14👍2
Сейчас фреймворки закрывают большинство задач в современных интерфейсах. Но до сих пор есть проекты, на которых придется обойтись без готовых решений. Фронтенд-разработчик Илья Пономарев рассказывает, как собираются интерфейсы в условиях ограниченного инструментария. Илья более 10 лет работает с крупными клиентами из ритейла, фармы и финансового сектора. 

Больше полезных материалов для разработчиков, менеджеров и веб-дизайнеров, а также вакансии в проектные команды крупных брендов — в канале Далее.
🫡21🤬1
#фишка дня

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

Код:
const a = [1, 4, -2, 5, -6];
let i;
for (i = 0; i < a.length && a[i] > 0; i++);
// i: 2
🤡14🤩3🤬2🫡2👍1👎1
#статья дня

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

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

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

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

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
👍7🤩41
2025/10/12 02:54:37
Back to Top
HTML Embed Code: