После код-ревью. Объяснения последуют через минуту.

#тред дня

Понравилась мне идея сохранять хорошие треды из Твиттера, потому что искать их потом сложно, а ссылаться на них охота.

Сегодня поговорим о код-ревью в треде от Олега Климакова.

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

Поехали.

1. Тред про код ревью. Зачем он нужен, как его готовить и как не испытывать эмоции как на картинке.

2. Для начала - зачем это всё?

Если вы работаете в продуктовой компании, то жизненный цикл почти каждого продукта будет соответствовать принципу Парето - 20% времени мы пишем новый код. 80% времени поддерживаем старый.

3. Во время поддержки проекта, мы хотим чтобы все разработчики как можно быстрее вникали в то, что написано. Для этого есть много способов, все они прекрасны и хорошо работают вместе.

4. Способы чтобы иметь хорошо поддерживаемый код:

✅Покрытие тестами
✅Ведение документации
✅Код ревью

И все эти способы нужно уметь готовить. Есть тесты которые только мешают, бесполезная документация и бессмысленный код ревью.

5. Что даёт код ревью:

➕Проверку кода по многим критериям (неочевидные места, композиция, комментарии)
➕Шаринг знаний о проекте. Не только 1 человек знает что там пишется в другом проекте или части проекта, а все.
➕Шаринг знаний о технологиях. Найти велосипеды и выдать свои

6. Способов поддерживать код «качественным» есть много, но все их нужно правильно готовить. Нужно уметь писать тесты, нужно уметь писать документацию и нужно правильно организовать код ревью

Дальше советы из моей практики. На объективность не претендую.

7.

❌Ревьюить только джунов и новых коллег
✅Ревью проходят все и проводят все

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

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

9.
❌Обсуждать на код ревью стиль
✅Настроить у себя на проекте инструменты которые автоматически будут исправлять стиль перед коммитом

В JS это eslint и prettier. Не тратьте время своё и коллег на вкусовщину. Договоритесь заранее и пропишите правила. Если спорите - голосуйте.

10.
❌Ничего не проверять
✅Обращать внимание на композицию, магические переменные, оптимизацию (там где это имеет смысл).

Ваша задача как ревьюера получить такой код, который в случае болезни разработчика вы завтра будете поддерживать и не потонете.

11.
❌Агрессия, негатив, «токсичное» поведение в комментах
✅Старайтесь отмечать не только негативные стороны, но и хвалить за позитивные.

Комменты должны быть: «Давай попробуем сделать …» «Может попробуем вынести…» а не в духе: «это плохой код» «перепиши» и так далее

12.
❌ Мердж реквест висит без ревью трое суток
✅ Выработать расписание.

Например вы занимаетесь ревью в начале работы и вечером. Исправления проверяете во время перерывов, пока проект билдится например. Хотфиксы, понятно, работают по-другому.

13.
❌ Ревьюеру запускать код и заниматься ручным тестированием.
✅ Разработчик поставляет уже проверенный код

Если ветка планирует вливаться, то она должна быть проверена тем, кто в ней написал. Ревьюер по умолчанию считает, что написанный код работает как надо

#работа #pr #github #twitter

#статья дня

Вообще, это скорее даже тянет на хештег #фишка.

Есть такой способ навигации по странице, как якоря. Расставляете ссылки формата <a href=“#news”>News</a> и, собственно, раздел: <section id=“news”>bla</section>.

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

Как с этим боролись раньше? А довольно забавным образом.

Вместо всей секции ссылались на некий элемент: <a name=“news”></a>, который сдвигали отрицательным margin или position: relative на величину высоты шапки. Грубовато, но работало!

К счастью, теперь это не нужно! Пруф: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

TL;DR: scroll-padding-top на :root или scroll-margin-top на целевой элемент.

Прям прекрасно. Очевидно, работает не только для якорей, но и для scroll-snap интерфейсов.

И уже можно использовать.

#css #scroll #margin #anchor

#такое дня

Я не знаю, куда отнести эту дичь, но на HDR-мониторах можно получить цвет белее белого: https://kidi.ng/wanna-see-a-whiter-white/

Звучит как какой-то бред, но посмотрите на видео. Текст и правда кажется белее белого.

Секрет в том, что совсем свежие браузеры поддерживают HDR-видео, но о чём забыли упомянуть – что при этом вся страница переходит в HDR.

Таким образом, можно передать значение фильтра brightness больше 100% и получить эффект слишком яркого белого:

filter: brightness(10);
backdrop-filter: brightness(10);
text-shadow: 0 0 10px #ffffff;

Это надо видеть своими глазами :) Применение? Да пёс его знает, говорю же — такое…

#css #hdr #backdrop

#вопрос дня

Что будет выведено в консоль?

#заметка дня

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

Например, как сделать красивую градиентную тень?

Да очень просто! Как и всегда, ответ на этот вопрос – псевдоэлемент. Поместили,  подвинули, размыли. Готово.

Вот даже живой пример: https://codepen.io/argyleink/pen/WNxeBKa

Похоже на Philips Ambilight, не правда ли? Ну так давайте оживим: https://gifted-nightingale-ba0eea.netlify.app/

Добавляйте в ваши коллекции, но лучше – запоминайте принцип.

#css #gradient #shadow

#фишка дня

Когда-то меня дико восхитили ползунки в программах создания музыки: визуально они имитировали фейдеры и триммеры (переменные резисторы) реального звукорежиссёрского пульта, но можно было нажать на них мышкой и двигать мышь куда хочешь после этого по всему экрану. Значения менялись соответственно направлению движения.

Короче говоря, ты не был ограничен активной областью контрола.

Так вот, в инструментах разработчика Chrome Canary появилась утилита Length. Стало возможным изменять числовые значения, перемещая мышь. Принцип такой же, как в музыкальных редакторах и некоторых дизайнерских программах:

- зажали Shift — увеличили шаг до 10 пунктов;
- зажали Alt — уменьшили шаг до 0.1 пункта.
- кликнули — появилось меню выбора единиц измерения.

Красота!

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

P. P. S. оказалось, и сейчас можно скроллить на числе. Я попробовал — мне не понравилось, слишком чувствительно. Тоже можно зажимать Shift и Alt.

#devtools #chrome

#ссылка дня

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

Целый репозиторий всяческих :hover-правил: https://github.com/IanLunn/Hover

Название оригинальное: Hover.css :)

Есть и демо-страница: http://ianlunn.github.io/Hover/

Не могу сказать, что вы найдёте какие-то откровения там, но чекнуть стоит. Эффект завёрнутого уголка довольно забавный. Да и общий подход.

#css #hover #github

#фишка дня

Когда разработчикам Microsoft Edge делать нечего, они 3D-модель DOM в Edge DevTools запускают. Да, как в Firefox. Chrome такую штуку не имеет.

Честное слово, с трудом представляю, зачем это нужно… но отладить какие-то проблемы с z-index вполне можно.

Да и… красивое.

Так вот, фишка немного не в этом. Фишка-то в том, что доступ к этому инструменту можно, нажав Ctrl/Cmd-Shift-P и введя там 3D.

Знакомое сочетание?

Да, это командная панель, которую когда-то миру показал Sublime Text и потом потырили все, кому не лень. Вы точно ей пользовались в Atom и Visual Studio Code.

Так вот, эта панель команд и в Chrome DevTools тоже имеется. Теперь не надо ковырять меню в поисках нужного редкого инструмента!

Удобно.

#3d #zindex #edge #chrome #devtools

#ссылка дня

Grass is green,
Hyperlinks are blue,
Because in April 1993,
Mosaic decided that that would be its hue
© Bramus

https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/


#css #history

#статья дня

Рейтинг в виде звёзд это, наверное, самая универсальная штука на свете. Лично я считаю, что цифры справляются не хуже, но уж как есть.

И вот, небезызвестный Ахмад Шадид с очередной реализацией, теперь на SVG: https://ishadeed.com/article/star-rating-svg/

Как всегда, читать стоит не ради самой реализации — может, вам звёздный рейтинг и не пригодится-то никогда — а ради объяснения нюансов работы с SVG.

#svg #css #star #rating #widget

#фишка дня

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

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

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

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

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

#css #scroll #fullpage

#такое дня

Вроде вторник, а ощущений на целый понедельник.

Пришлось доказывать сейлзам из крупного провайдера чатов поддержки, что бывают интерфейсы в 300 пикселей шириной. На десктопе. И да, с миллионной аудиторией.

Давайте пиццу закажем чтоль.

.toppings {
  float: right;
}

#фишка дня

Я не ожидал, что простая подводка к мему вызовет столько бурления. Как-нибудь расскажу ещё о том, чем же я таким занимаюсь. А пока давайте к новостям.

В Chrome 95 (сейчас это Chrome Canary) появился API для забора цвета со страницы. Пипетка, короче.

API неофициальный, но Google как всегда бежит впереди паровоза.

Впрочем, почему бы и нет. Для экспериментов самое то, а потом кто-нибудь и полифиллы подгонит.

Демо: https://codepen.io/bramus/pen/mdwPWEL

#js #chrome #color #colorpicker

#статья дня

Ахмад Шадид выпустил большую статью-обзор методов маскирования и обрезки изображений. Сравниваются CSS и SVG-подходы. Огромное количество примеров и иллюстраций.

https://ishadeed.com/article/thinking-about-the-cut-out-effect/

Ну и демо, конечно же, для Ъ: https://codepen.io/shadeed/pen/GRmyPjK

Вообще, если коротко: белым обозначаем то, что хотим оставить, а чёрным — то, что хотим скрыть.

#css #svg #clip #mask

#статья дня

В недавней заметке про кнопки и role="button" я упомянул, что переключатели и чекбоксы — вещи разные. Вот, прикладываю обещанное объяснение: https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8

Используйте переключатель:

1. Для вызова мгновенной реакции системы на включение опции.
2. Для выделения несвязанных элементов в группе.

Используйте чекбоксы:

1. Когда форму после пометок требуется отправить отдельным действием.
2. Если требуется множественный выбор.
3. Для выделения связанных элементов в группе.

#css #checkbox #switch #ux

#статья дня

Роман Шамин из «Злых марсиан» (Андрей Ситник оттуда, если вы не в курсе кто это — shame on you) о том, как минимальными усилиями со стороны дизайнера добиться максимальной доступности интерфейсов.

https://teletype.in/@romanshamin/a11y-for-designers

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

#design #a11y

#фишка дня

Потребовалось мне получить тип для неизменяемых данных. Для константы, короче. В моём случае это был список операторов сравнения для выбора:

const operators = [
  {
    label: ‘Equals’,
    value: ‘==’,
  },
  {
    label: ‘Not equals’,
    value: ‘!=’,
  },
  …
];

И вот надо же мне типизировать использование этих операторов. Но как? Не руками же.

И выход есть:

const operators = [
  …
] as const;

type Operators = typeof operators[number][‘value’];

В итоге, виртуально получаем вот это вот:

type Operators = "==" | “!=“;

Красота.

#typescript #types #const