#фишка дня

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

А очень просто: указывайте чёткие границы продолжительности цвета — color-stop, в два числа. А учитывая, что background-image способен принимать несколько значений, возможности комбиринирования огромны. Например: https://codepen.io/natszafraniec/pen/JmQmBV

Заметка была бы неполной без одной маленькой детали: чтобы не разбираться в особенностях работы repeating-linear-gradient и понять всю мощь комбинирования свойств, чтобы заполнить весь блок, стоит указать размер фоновой картинки, background-size. В примере выше — это 20% от ширины блока и 100% высоты. Итого, градиент из двух вертикальных полосок повторится пять раз.

#css #gradient

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

Псс, чел, у тебя в проекте тоже пустой README?

I got u.

Гляди сюда: https://readme.so/

Берёшь такой, накидываешь секции, если не можешь придумать, какие нужны, пишешь чуток маркдауна и — 💥 — у тебя README индустриального уровня.

Не благодари.

#readme #tool #git #markdown

#статья дня

Злые Марсиане (Evil Martians, ну это там Андрей Ситник, Роман Шамин, Полина Гуртовая и ещё с десяток прекрасных людей, которые должны быть вам знакомы) выкатили большую статью, подытоживающую использование вариативных шрифтов во фротенде: https://evilmartians.com/chronicles/the-joy-of-variable-fonts-getting-started-on-the-frontend

Как подключать, в чём отличие от обычных, как правильно использовать — всё собрано вместе.

К слову, нелишним будет напомнить, что шрифту Martians Mono очень нужна кириллица и авторы (всё те же Марсиане) обещали добавить её туда за 1000 звёзд на гитхабе. Ерунда осталась, смотрим тут: https://t.me/htmlshit/1296

#fonts #css

Ну что, дамы и господа. Мы с вами сделали это!

https://twitter.com/romanshamin/status/1550573833903538177

#статья дня

Интересно, как поп-культура мотивирует разработчиков на попытки повторить эффекты, обычно достигаемые с помощью инструментов моушн-дизайна вроде After Effects.

Вот и тут, вдохновение — титры сериала Upload.

Вообще, там целая серия статей, титры из: Killing Eve, Ozark, The Marvelous Mrs Maisel и вот Upload.

Прям рекомендую: https://dev.to/robole/how-to-make-a-slick-css-animation-from-upload-tv-series-title-sequence-2h8f

Рассмотрены -webkit-background-clip, clipPath, конвертация текста в кривые в Inkscape (тоже полезно, кстати, по нему мало доков), создание контура. В общем, если вы занимаетесь промо-сайтами, это прям оно.

#svg #animation #clip

#статья дня

npm, Yarn 1, Yarn 2 или pnpm?

Знакомые слова? Если нет, это всё — менеджеры пакетов (библиотек и т. п.) node.js. И каждый из них имеет свои особенности и по поводу каждого из них всегда идут баталии.

На чём запускать новый проект? На что переводить старый? Что быстрее? Что меньше места на диске съест? Что безопаснее?

Итого, сегодня тема — сравнение менеджеров пакетов: https://blog.logrocket.com/javascript-package-managers-compared/

Ну и заодно её перевод на русский язык на Medium.

У нас пока Yarn 1 aka Classic, а что у вас, котаны?

#node #npm #yarn #pnpm

11-12 октября пройдёт конференция ViteConf. Как несложно догадаться, от создателей сверхбыстрого бандлера (сборщика) Vite.

Я его использую в паре проектов и планирую перетащить на рабочие.

Вот, собственно, и на конфу зарегистрировался :)

Онлайн-регистрация бесплатная, к слову.

#vite

#статья дня

Как при помощи нескольких расширений и DevTools узнать, кто твой клиент?

Автор статьи – фронтент-разработчик, который строит свой юнит в компании. Ребята работают на Vue и не понимали спрос на стек.

Сначала они опрашивали лидов, что было долго, а иногда безответно. Потом озарило – поднастроили браузер, накатили несколько плагинов (вот они: Vue, React и Angular) и пошли по самым разным сайтам.

Всего просмотрели первые страницы 182 компаний. Всё собрали в одну таблицу, немного приправили аналитикой и запилили статью: https://habr.com/ru/post/679150/

Вот так распределились доли:
1. React — 74 или 39,36%
2. Vue — 62 или 32,98%
3. Other — 44 или 23,4%
4. Angular — 8 или 4,25%

Кстати, ребята приняли твердое решение оставаться на Vue.

#vue #devtools #react #angular

#фишка дня

Правило position: sticky в своё время было одной из самых желанных в CSS вещей, ведь что может быть более декларативно чем “закрепи элемент вот тут когда я доскроллил вот сюда”?

А вот много лет приходилось писать JS для этой цели. Sticky даже становился частью фреймворков.

Но что делать, если элемент, который вам нужно закрепить, хочется видеть даже тогда, когда родитель выехал за пределы области видимости? Как правило, стики уезжает вместе с ним.

Ответ прост! Поставить «прилипчивый» элемент последним, а родителю задать sticky на высоту контента перед ним. Не элементу!

Вуаля: https://codepen.io/alinaki/pen/rNdYajy

Дым и зеркала :)

#css #sticky

#фишка дня

Для тех, кому был не очень нагляден пример из поста выше, вот новый — от одного из самых активных подписчиков:

https://codepen.io/serg-by/pen/MWVOeBg

Прикрепляем хлебные крошки наверху.

P. S. Господа сомневающиеся, сделайте это на вашем любимом position:fixed и предоставьте :)

#заметка дня

Только что релизнули обновление продукта, которое шло больше 8 месяцев. Чисто технически это примерно на полгода больше, чем стоило бы.

Поддерживать и чинить баги в легаси-коде — очень сложно. Но знаете что сложнее? Писать новое поверх или рядом.

Легаси код — он работает. Он выверен годами. В нём если и есть баги — они точно не про бизнес-логику и скорее всего зависят от внешних условий или порядка операций.

А новый код — он в лучшем случае бездна. Ему ещё только предстоит доказать свою работоспособность. Да и гарантий, что вы перенесли всю бизнес-логику как надо, нет.

Так что же надо делать?

Тесты, господа. Тесты — они гораздо больше помогают в рефакторинге, чем можно подумать.

И покрывать тестами нужно в первую очередь именно старый код, если уж так охота вообще начать это делать (или потребовались новые фишки).

Протестированный легаси-код перестаёт быть чёрным ящиком. Можно начинать заменять его части или всё целиком на новые, можно пилить новые фичи и костыли не боясь всё неожиданно сломать.

Возвращаясь к нашему релизу — в какой-то момент мы стали одновременно с написанием новых фишек чинить поведение основной ветки и утонули в синхронизации.

Поэтому задачи такого плана надо локализовать как можно точнее. И не распыляться.

Ну а если ваш легаси «чёрный ящик» как-то влияет на своё окружение — вы жёстко попали :)

#legacy #tests

#til дня

Реально, самый короткий TIL (Today I Learn) на свете.

Итак, хоть буква μ (мю) и означает звук m, µs (микросекунды) обозначаются в ASCII как us, потому что ms уже занято миллисекундами.

Или потому что u похожа на μ. Надо уточнить 😅

Вот так вот, котаны.

#codepen дня

Звание воскресного кодпена дня забирает… пустой кодпен. С его прекрасными цитатами.

Это максимально неожиданное предложение, но вы попробуйте и поверстайте на float. Назад возвращаться будет очень хорошо :)

Вообще, цитаты на CodePen появились достаточно давно и иногда бывает действительно забавно.

#заметка дня

Самая нервная вещь на свете — это отпуск.

Точнее, подготовка к нему.

Раньше я в отпуске раз в день на час-полтора открывал ноутбук, разгребал потоки задач, правил что-то мелкое ну и дальше по своим делам. Правда, не обходилось без форс-мажоров. Даже увольнял человека как-то раз…

Но это в любом случае так себе стыкуется с семьёй. Всем от тебя всегда что-то надо, да и отдыха не получается.

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

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

Выпустить релизы, дописать задачи команде, заполнить вики-справочники, почистить туду-листы.

Вот я вчера вечером, уже будучи не дома, все это делал, заодно часы списал — отпуск же с сегодняшнего дня 🤫

Так вот. Хорошая подготовка — залог спокойствия.

А захочется покодить — есть у меня задачка, необходимость которой продактам очень сложно объяснить. Просто упражнение для мозга.

Да и архитектуру можно на листочке порисовать.

#vacation

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug

#игра дня

Моя любимая рубрика. Сегодня со вкусом ЭЛТ-мониторов и запахом пыли с кулеров.

Симулятор тимлида! Прям как симулятор хакера в старые добрые :)

Постарайся не выгореть и успеть к дедлайну: https://teamlead.wrike.tech/

Я проиграл.

#game #oldie

#фишка дня

Вышел Chrome 104! Что это значит?

Ну, можно почитать в релиз-нотах, конечно (как правильно перевести-то?), но есть там одна совсем забавная вещь. И она на КДПВ.

Скоро не нужно будет следить за порядком трансформаций в анимациях! Очень и очень классно: https://drafts.csswg.org/css-transforms-2/#individual-transforms

Найду PostCSS-плагин для более полной поддержки, закину позже.

#css #transform

#фишка дня

Продолжение.

Я не нашёл postcss-плагина, но, оказывается, все современные браузеры и так это поддерживают. Так что если кому прям очень надо — можно и написать :)

А вот сразу и статья на web.dev об этом: https://web.dev/css-individual-transform-properties/

Там, кстати, тоже в качестве самой главной причины ввода разделения называется анимация.