#фишка дня

Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.

Вот как выделить объект, который не слушается мыши?

Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.

#devtools #tips #chrome #firefox

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

Мозаики (паттерны) это всегда прекрасно. Но соблюсти симметрию, чтобы заполнить поле, может быть не совсем тривиально.

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

И такой есть!

https://patternico.com/

Можно заполнить встроенными иконками (Font Awesome или Line), а можно загрузить свои. Есть даже ссылка на вариант конструктора с эмодзи :) Правда, там убогонькие Emojione, но вдруг кому ок.

В общем, имеет право на жизнь.

#pattern #background #generator

#заметка дня

Не давече чем вчера ко мне прибежал начальник нашего энтерпрайза с мольбой о помощи. «Все пропало», — говорит, — «Значения текстовых полей в форме настроек дублировались, это починили, но теперь не все данные сохраняются. Выручай!».

А все потому что коллега перед тем, как в отпуск уйти, сделал рефакторинг ключей (key) в выводе массивов в React. И почти всё протестировал.

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

Форму я, конечно, починил, косяк был буквально в паре строк. Но придётся коллеге по возвращению скинуть тред небезызвестного Дэна Абрамова: https://mobile.twitter.com/dan_abramov/status/1415279090446204929?s=20

Буквально на пальцах и кружках 🔴🔵🟡 описано, в чем же вообще проблема и зачем React’у так нужны ключи в выводе массивов.

Есть хорошая статья на хабре на эту тему, а также перевод данного треда на русский на гитхабе (картинки сохранены 😉).

#react #key

#фишка дня

Чота меня подзадолбало писать try-catch на каждый async-await вызов.

С “cырыми“ промисами как-то… чище на уровне синтаксиса: then-catch и всё.

Но вот тут пригодились тестовые задания на собеседованиях. У одного инженера я увидел подход, что на иллюстрации. Очень похоже на то, как возвращаются ошибки в Go.

В общем, я почитал об использовании такого подхода и остался доволен.

P. S. конечно, есть и другие примеры: https://gist.github.com/fnky/0a6cd5f39a7ad0ace79a7a4f5c999691

#js #async #await #promise #error #typescript

#такое дня

О господи, он ещё выпускается! Я думал, давно уже полностью в цифру ушли. Вот так встреча.

P. S. Не купил, конечно.
P. P. S. Это журнал о Линуксе и СПО. Мало ли.

#фишка дня

Надоело читать это: «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

#статья дня

Я много раз начинал и забрасывал статью о том, как справляться с рутиной. Но писать статью — это не в чате «деда» включать. Всё-таки важная штука — аудитория.

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

Итак, какие вопросы разбираются в их лонгриде Фронтенд — это не больно:
— Как решать задачи, а не писать код
— Как не умереть в пиксель-перфекте
— Как вести диалог с дизайнерами

Можно, конечно, просто посоветовать перестать ныть и начать вникать, но это будет слишком грубым описанием этой прекрасной работы.

И обязательно обратите внимание на прикреплённые к статье материалы. В них есть всё.

#work #frontend #psychology

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

Я довольно часто выкладываю посты, где КДПВ является кусок кода. Вся рубрика #фишка дня этим питается.

Тут я соберу ссылки на различные сервисы для создания подобных скриншотов. А вы дополните. Поехали:

https://ray.so/
https://carbon.now.sh/
https://codezen.rishimohan.me/
http://codeimg.io/
Что меня забавляет в этой группе — все по-умолчанию делают скриншот в стиле macOS. Зачем? Пёс его знает. Красивое.

https://codeimg.io/
Прелесть этой утилиты — предопределённые размеры изображения под разные соцсети.

https://codekeep.io/
Это, скорее, хранилище сниппетов, нежели инструмент создания скриншотов.

Ну и немного расширений для VS Code:
https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
https://marketplace.visualstudio.com/items?itemName=robertz.code-snapshot
https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Пост был бы неполон без http://codephoto.ru/

С этим сервисом вас ни в один чат не пустят :)

Миру нужна красота.

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

Вы замечали, что в отпуске ногти медленнее растут? Просто положение рук при печати такое же, как при копании. А в отпуске — не печатаешь. Впрочем, я отвлёкся (похвастался).

Глядите, какая штука от Йоксель: генератор SVG-фильтров, буквально — <filter/>.

https://yoksel.github.io/svg-filters/

Размытие, диффузия, тень, смешивание... больше не надо запоминать. Выбираешь нужный, настраиваешь, экспортируешь.

Из таких простых инструментов и складывается сообщество. Кто-то когда-то что-то для себя :)

#css #svg #filter #tool

#ссылка дня

Я не ожидал, что буду первым, кто предложит этот инструмент в чате по тайпскрипту в ответ на недавний вопрос.

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

И вот как раз этим занимается ts-migrate от Airbnb: https://github.com/airbnb/ts-migrate

У нас применялась, знаю ещё несколько вполне себе успешных случаев. Стоит того, чтобы посмотреть.

Конечно, можно просто скармливать транслятору жс, так тоже будет работать. Но менее эффективно и проверка на ошибки сборки будет номинальной.

#ts #js

#встреча дня

А с кем это фотографируется Ахмад Шадид, подаривший нам Defensive CSS и множество офигительно полезных статей?

Неужто с автором канала? Вот так встреча :)

Ахмад презентовал нам сегодня на нашем внутреннем митапе, собственно, Defensive CSS.

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

Заодно побазарили за будущее и прошлое вёрстки, обменялись опытом ведения своих каналов связи с подписчиками и вообще неплохо пообщались :)

#фишка дня

Почему загрузчики-скелетоны на Facebook выглядят лучше ваших?

Всё потому что они будто… сквозные, кажутся едиными. А ваши пестрят.

Как же исправить?

background-attachment: fixed;

Смотрим видео и демо: https://codepen.io/jh3y/pen/LYdrdgX

Вроде и правда получше.

#css #loading #skeleton

#видео дня

Интервью Дугласа Крокфорда — создателя JSON — подкасту «Мы обречены».

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

Кажется, тут не надо ничего пояснять :)

Собственно, интервью: https://www.youtube.com/watch?v=WSqCpWYfTFU

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

#podcast #json #js

#фишка дня

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

Ладно, это глупое предложение. Естественно, все разные.

Но вот такое дело: нажать на кнопку можно клавишей ввода, а можно — пробелом. Есть ли разница?

Оказывается, есть.

Системная кнопка, например, отправки формы (submit) по-умолчанию сработает на событии keydown если во время фокуса вы нажали Ввод. И событие keydown будет вызываться так долго, сколько будет зажата клавиша.

А вот если нажимали пробел — то кнопка сработает на событии keyup. То есть, когда пробел будет отпущен.

Что это значит на практике?

Что зажав пробел, есть время подумать и убрать фокус табом. А с вводом так не прокатит.

Будете делать свои обработчики кнопок — не забывайте о такой мелочи. Это системное поведение.

Спасибо, Adrian Roselli.

#js #button

#статья дня

Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.

Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation

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

Хорошее чтиво на своей работе, да.

Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP

SVG-фильтры + IntersectionObserver и дают такой результат. Для ускорения процессинга пикселизируется не основное изображение, а его миниатюра.

Pixelate all the thi(n)gs!

#js #pixel #effect #filter #svg

#игра дня

Такого я ещё точно не встречал. Вам предлагается найти убийцу, изучая улики, фотографии и рапорты с места преступления. Чтобы собственно все это прочесть и связать воедино — придётся вводить SQL-запросы к имитированной базе данных.

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

https://mystery.knightlab.com/

#db #sql

#статья, а заодно и #инструмент, дня

Я очень люблю заказывать себе и другим футболки с разными глупыми и не очень рисунками. Очень часто найти оригинал изображения не представляется возможным по разным причинам. В наличии только хреновенький растр.

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

Обычно залетаешь в поиск с запросом "image to vector online" и там уже выбираешь между хорошим и бесплатным. Когда не лень, можно побаловаться консольными утилитами вроде http://potrace.sourceforge.net/ или условными Inkscape, люстрой, дровами.

И вот Томас Штайнер взял Potrace, собрал его под WebAssembly и выдал SVGcode. По пути не преминув запилить целую статью: https://web.dev/svgcode/

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

Да и сам SVGCode весьма хорош :)

#svg #pwa #trace

#статья дня

Соскучились по геометрии? Да не врите, по ней невозможно не соскучиться.

Представьте такую задачу: вам надо бесконечно скроллить всего 3-5 слайдов. Причём, скроллить нативно, без дёрганий. Как обычный скролл на мобилах, в общем.

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

Я же предлагаю мыслить в 3d: расположите карусель как… как реальную карусель с задолбавшими всех лошадками. И сделайте её достаточно большой, чтобы нивелировать искажение перспективы.

Не знаете, как? Да вот так же: https://3dtransforms.desandro.com/carousel

freeMode уж сами допишете.

Острожно — геометрия! И CSS 3d-преобразования 🤪

Великолепная статья, такие в школе надо преподавать.

#css #js #carousel #3d

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

В Google Chrome DevTools присутствует такая штука, как Recorder. Это, грубо говоря, инструмент для записи и воспроизведения последовательности взаимодействия пользователя с вашим ресурсом.

Чтобы вытащить его на панель DevTools, нужно нажать «трёхточечное» меню 👉 More tools 👉 Recorder.

Нажать «Начать запись», проделать необходимые операции, ну а дальше — выгрузить в простом JSON, описывающем последовательность, или в виде скрипта для Puppeteer.

И естественно, для этого инструмента уже имеются расширения! Одно из них — Testing Library Recorder.

Как можно догадаться, результатом экспорта будет скрипт для Testing Library.

Я не могу сказать, что результат идеален. Сгенерированный CSS-селекторы всегда выглядят диковато. С другой стороны, он помогает избежать рутины.

Удачи в тестировании, котаны :)

#test #jest #devtools #testinglibrary

#ссылка дня

Хотите обучающих ресурсов? Их есть у меня. Желаете "дорожную карту" для обучения? Тоже.

Вот как вам такой вариант: https://andreasbm.github.io/web-skills/, подходит?

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

И никто не мешает дополнить самим.

#css #web #education