#статья дня

Итак. Я когда-то вам разгонял про фреймворк 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

#статья дня

LCP? FID? CLS? INP?

ПНХ, скажете вы.

Нет, отвечу я. Это всего лишь перечисление т. н. Core Web Vitals — важнейших метрик веб-проектов.

Не в курсе что это?

Тогда читаем статью на web.dev: https://web.dev/top-cwv-2023/

Ну и есть в переводе на Хабре: https://habr.com/ru/company/timeweb/blog/714280/

#lcp #vitals #fid

#статья дня

Один мой товарищ любил прыгать с вышки использует светлую тему в редакторе.

Да вообще, если подумать, много кто на работе в IDE работает со светлой темой. Я вот её использую только когда нужен повышенный контраст: на ярком солнечном свете.

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

Некоторые владельцы маков с чёлкой перешли на темные темы лишь бы скрыть чёлку 🤡

Так к чему это я. Действительно ли темные темы так хороши или так плохи для глаз? Что за ними стоит и почему черный цвет в них не используется? Отвечает вот эта статья: https://habr.com/ru/company/timeweb/blog/675526/

Со ссылками, с литературой, с примерами. Сплошное удовольствие читать.

#dark #theme

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

Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.

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

И называется он git-sim, вот так вот буквально.

Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.

Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim

И на GitHub проекта: https://github.com/initialcommit-com/git-sim

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

#git #sim #tool

Я не могу это не форварднуть 😂

Тем временем процесс релиза:

🔥-🌚-🫦\
🥵-😭-😢---😱-🤨-💩-🥳
🤦‍♂-🤬-🍆/