#фишка дня

Я что-то подзатянул с демонстрацией, простите. Тачку в ремонт, потом час на автобусе... Как люди на автобусах ездят? Это ужасно. Я ничего кроме метро и электричек не перевариваю. Ну да ладно.

Короче!

Мне накидали всякого в комментарии, но правильный ответ никто не дал. А состоит он в... в анимациях aka @keyframes.

Они ведь сами по себе самый что ни на есть настоящий миксин.

Просто подумайте, что может содержаться в @keyframes? Да в общем-то, всё... А какая запись? Да вот такая:

animation: 1s paused awesomeMixVol1;

И вот оно вместе кликает: https://codepen.io/alinaki/pen/eYjexgj

Попробуйте окно уменьшить 💥

Как вам такое?

#css #keyframes

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

Даже два. И оба для работы с SVG.

Одной из сильно раздражающих проблем при работе с SVG является, как ни странно, сложность кропа. Ну, обрезки полей, whitespace.

Почему? Ну, потому что многие редакторы (Inksape тот же) делают просто изменение viewBox или ещё трансформами подгоняют кривые.

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

Гарантии, что любой SVG загрузится в любом редакторе и так в принципе нет. Стандарт слишком большой, мусора напихать можно слишком много.

Так вот, к чему это я. Точно, к обрезке.

Раз: https://svgcrop.com/
Два: https://editor.method.ac/

Первая утилита обрезает по viewBox. А вот второй редактор — в него можно загрузить SVG с применёнными трансформациями сдвига, выделить и выбрать в меню Object 👉 Reorient path, что перепишет кривые с учётом трансформаций.

Вспомню, как это делать в Inkscape — напишу 🙂

#svg #crop

#игра дня

Sorry old chap. Increase the width of your browser to view this site.

…именно эту фразу вы увидите, открыв представленную ссылку на телефоне.

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

https://git.bradwoods.io/

#git

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

Я как-то уже говорил о замечательном инструменте ngrok. Ничего лучше для пробрасывания запросов в локальную сеть и наоборот не придумали. Мы в Supermetrics активно им пользуемся при разработке, поскольку завязаны на внешние сервисы.

Но речь сейчас о совсем ином сервисе предназначенном для немного иных целей. Дело в том, что для демонстрации проблемного кода в чатах оба подходят весьма неплохо.

И я говорю о Netlify, а точнее об их сервисе Netlify Drop.

Если Netlify сам по себе это полноценный CI/CD сервис, то Drop… это буквально то, что написано. Вы просто закидываете каталог с вашим сайтом и –ТААДААААМ! – он испарился. Шучу, он – выкатился в сеть, а вы получили ссылку для демонстрации. Кажется, ничего проще нет (GihHub pages проще, но лишь после настройки).

Можно зарегистрироваться и получить управление сайтом, подключить домен. HTTPS даётся изначально. Ну а дальше… возможности CI/CD весьма широки, ознакомиться не помешает.

В общем, отмазка “не могу же я запихать весь сайт в песочницу” больше не работает :)

#netlify #demo #sandbox

#фишка дня

Если вам в проекте понадобилось вдруг использовать библиотеку  fullPage.js для поэкранной прокрутки — подумайте ещё раз.

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

Гораздо логичнее использовать scroll-snap, который давно и неплохо нативно поддерживается во всех остальных браузерах.

Вот простейший пример, который дальше уже можно наращивать по вашему желанию: https://codepen.io/argyleink/pen/qBRpdEr

Минимум кода, максимум отдачи. А уж оставшиеся фишки можно и дописать или настроить. Зато с этим уж точно не придётся бороться и у вас на руках все нативные события скролла.

#css #scroll #fullpage

#статья дня

Итак. Я когда-то вам разгонял про фреймворк RICE. И нет, это не про джаббаскрипт, это про работу. Как сортировать задачи, грубо говоря. Что важно, что менее важно. А что не нужно. Вот тут: https://t.iss.one/htmlshit/1249

Думаете, это просто теория? Вот и народ из Shopify тоже так думал, а в итоге стали переводить своё мобильное приложение на React Native согласно приоритетам, рассчитанным по RICE. Золушки, ага.

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

Собственно, вот оно: https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native

Получилось долго.

#react #native #rice

#фишка дня

А знали ли вы, что в Chrome DevTools есть возможность эмулировать различные доступные на устройствах сенсоры?

Ну из очевидного: гироскоп, компас, освещённость.

Джей, деврел в Google, замапил сенсоры на 3D-кубик и запилил для нас демо на побаловаться: https://codepen.io/jh3y/pen/KKQZQNj

Открывайте пример, врубайте DevTools, вызывайте сочетанием Ctrl(Cmd)-Shift-P панель команд и ищите там Sensors. Как найдёте — сообщите 😉

#codepen #devtools #sensors

#ссылка дня

Кто-то: Идеальной страницы 404 не существует...

Пежо:
https://www.peugeot.fr/electrique-et-hybride/rouler-en-electrique/autonomie-electrique-2.html

#статья дня

Как выделить абзац полоской на всю ширину экрана?

Да вот так: https://codepen.io/t_afif/full/LYQgPgM

Упорото, не правда ли?

Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.

Источник — тред экспериментов в Твиттере.

Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.

И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/

Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/

Я обычно первый способ из второй статьи использовал. Люблю магию.

И вообще, как такая раскладка по-русски будет-то?

#css #fullbleed

#ссылка дня

Короче, помните я про Penpot писал, как альтернативу Figma?

Ну вот же: https://t.iss.one/htmlshit/1751

Ребята решили релизиться из беты в 1.0 и 31 числа будет трансляция: https://www.youtube.com/watch?v=Q0tLukJmj_k&ab_channel=Penpot

Я, к слову, поковырялся и накидал им багов по этому поводу.

И да, Penpot всё так же, как и Figma полгода назад, не в состоянии правильно загрузить официальный логотип W3C SVG.

Ну что же делать, Figma не сразу продалась, а код открыт. Учим Closure aka кложуру?

#penpot #design

#фишка дня

Надоело читать это: «To push the current branch and set the remote as upstream, use
git push --set-upstream origin fix/bug-1359»?

А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.

Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote

Ну или просто взгляните на КДПВ.

#git #remote

#фишка дня

Оказывается, почти год назад в Firefox приземлилась фича, позволяющая раскрасить оверлей-скроллбар на маках и андроидах!

https://bugzilla.mozilla.org/show_bug.cgi?id=1719948#c15

Вот только в Chrome она так и не доехала... но у нас же никто не отбирал старые добрые -webkit-префиксы, правда?

Так что теперь можно сделать так: https://codepen.io/alinaki/pen/oNMMaGW

...и будет сносно выглядеть везде.

Правда, не знаю, зачем 😅

#scroll #css #firefox

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

Что делать, если API не готов, моки писать лень, а приложение разрабатывать надо?

Ну или, например, портфолио отсутствует, а хочется сделать условную книгу контактов или приложение для знакомств? Откуда данные-то брать? Забивать lorem ipsum тоже неохота...

На помощь придёт генератор случайных юзеров!

https://randomuser.me/

Ну и естественно, есть и полноценный генератор случайных данных, в котором всё, что вам нужно сделать — это описать их схему и пару правил генерации: https://randomapi.com/

Так ваше приложение из портфолио будет выглядеть максимально реально. Да и в продакшене не придётся ждать кого-либо ещё.

#api #random

#такое дня

Когда-то давным давно, во времена первых браузеров и изобретения JavaScript, кто-то подумал, что было бы неплохо получать доступ к элементам в глобальном пространстве имён. Речь идёт в том числе об атрибуте name для ссылок.

Вам все знакомы якоря вида #cheatsheet в адресной строке браузера. Да-да, хештеги не взялись из ниоткуда.

Так вот, пока браузеры пытались договориться (не пытались), что же должно быть индикатором доступа, name или id, вышло так, что IE сделал элементы с id свойствами не только объекта document, но и объекта window. А остальные, естественно, скопировали.

Что это значит? А то, что если вы добавили id элементу, то этот стал доступен как переменная в глобальном пространстве ваших скриптов. Без объявления! Буквально вот так: https://codepen.io/alinaki/pen/zYLJVZN

Если кому интересно подробнее почитать, что куда и как попадает, спецификация ответит на этот вопрос: https://html.spec.whatwg.org/multipage/dom.html#dom-tree-accessors

Но если коротко: не надо это использовать если вы не на хакатоне. Приведёт к таким спагетти, что мало не покажется.

А вот знать надо.

#js #dom #node

#дополнение дня

Несмотря на то, что из описаного выше следует, что id должен быть уникальным, всё чуть сложнее.

Пример:
https://codepen.io/alinaki/pen/abjROWb

«Но я же вижу, что работает!!»

Работать-то работает, но в CSS. Валидатор вас при этом наругает.

Но только кого это волнует, правда?

CSS и рендеринг вообще срезают по пути столько углов просто потому, что задача браузера не наказать разработчика, а показать контент. И они в этом очень хороши.

Лучший валидатор это браузер, если помните.

Но только не надо с ноги залетать в чаты и говорить, что у вас-то в CSS всё работает и дублирующиеся id это нормально. Не нормально.

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

Как потырить понравившуюся SVG с сайта в учебных, конечно же, целях?

Поставить себе SVG Gobbler!

https://www.svggobbler.com/

Скачать, оптимизировать, посмотреть код — без лишних действий.

#svg #extension

#ссылка дня

Немного неожиданного контента хотите?

Не так давно открылся сайт DOTOWN с семью сотнями иконок в стиле 8-битных игр от дизайн-студии под руководством экс-дизайнера Nintendo:

https://dotown.maeda-design-room.net

Все изображения можно использовать бесплатно без ссылок, в том числе и в коммерческих проектах! Есть ряд ограничений.

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

Да, на японском. Но кого это вообще останавливало?

#icons #8bit #бородач

#такое дня

Вот спросили в чате по поводу этого расширения: https://t.iss.one/htmlshit/1781, SVG Gobbler.

Мол, нафиг оно надо, можно же из девтулзов скачать. И так-то оно так, но есть нюансы. Например, хочется просто посмотреть, а как некое такое делают, из каких составных частей. Или просто взглянуть на количество используемых иконок. Да и вообще, что может быть лучше облегчения процесса работы.

С другой стороны, я тут зашел на https://www.fooconf.fi/ и хотел скопировать их логотип в рабочий чат.

…а он в CSS background как base64. Вот я писал о таких инструментах: https://t.iss.one/htmlshit/576

И Gobbler такое не поддерживает!! Время для пулл-реквеста? Со стримом.

#svg

Внезапно, с сегодняшнего дня повторы постов, которые вы так любите, будут помечаться хештегом #бородач

Дискасс в каментах, если надо.

#заметка дня

Я обещал про нытьё тимлида. Ну давайте поноем.

Технически, я engineering manager, что чуть больше, но то такое.

Итак, должен ли тимлид/менеджер кодить?

Короткий ответ: да. Но вот что и когда? И вот тут я начинаю сыпаться.

Почему люди (ну, кодеры) становятся тимлидами (или менеджерами)? Потому что, внезапно, они были достаточно хороши в своей работе по мнению вышестоящих менеджеров и/или инженеров.

Что это значит? Что они достигли максимального уровня комфорта, компетентности, если хотите.

Ещё можно сказать, что они освободили место для кодеров получше.

Естественно, отсюда вытекает следующее: когда у меня типично тимлидские проблемы, мне хочется просто уйти с головой в какую-нибудь интересную (или просто долгую) задачу. Но это путь в никуда.

Болото кода может засосать глубоко и надолго. А проблемы клиентов, митинги, планирование — никто не отменял. В итоге не получается нормально ни там, ни там.

Совсем без планирования тоже нельзя, можно в итоге упустить нечто важное. Потому, нужна категоризация кодерских задач для тимлида.

Аврал я помещать в категории не буду. Его наличие означает, что уже всё.

1. Есть свободное окно. Планы закреплены, команда занята, довольна и понимает, что делать, цели намечены — ок, можно продолжать.
2. Ты лучший в том, что собрался делать. Можешь качественно и быстро сделать задачу — вперёд, но не забывай о процессах. Будь примером.
3. Не блокируй критичные узлы. Условно, не надо лезть в аутентификацию, а потом спрыгивать с неё, как будто ничего не было, вешая задачу на кого-то из команды. Не смог спланировать правильно — не начинай.

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

Справляюсь ли я с этим на данный момент? Хороший вопрос! Но я пытаюсь, правда :)

#teamlead #manager #code #problems