#статья дня

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

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

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

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

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

#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

#заметка дня

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

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

И вот тут на сцену выходят лигатуры.

Что такое лигатура в цифровой типографике? Это замена шрифтом некой комбинации символов на один. А что такое эмодзи? Это лишь ещё один шрифт, который система применяет (или нет, сорян) к определённому диапазону символов.

И вот сочетание из чёрного квадрата и Санта Клауса превращается в чёрного Санту Клауса. Удивительное рядом.

И да, раз это просто несколько символов – к ним можно применять любые средства работы со строками. А пустые символы на самом деле не пустые, это буквально символы склейки: zero-width joiner, чтобы мы были в курсе, что это не отдельные картинки.

Кстати, некоторые из вас наверняка применяют шрифты с лигатурами в своей IDE. Так что не так уж и далеки вы от эмодзи :)

#emoji #ligature #font #unicode

#codepen дня

Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.

Так вот.

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

И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO

Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.

Думаю, стоит попробовать на базе этого кода сделать расширение для Figma…

А то часто встречаю весьма халтурный подход.

#js #grid #img

#статья дня

Те из вас, кто использует Instagram, TikTok, Facebook + Messenger, Snapchat, наверняка замечали, что они открывают все ссылки насильно внутри приложения. Telegram, кстати, тоже (но есть настройка). Наверное же, не просто так?

Конечно не просто так :)

Приложения на голубом глазу встраивают свой код прямо в страницу, которую открывают. И могут трекать всё, что угодно. Особенно этим отличился TikTok. Он логирует вообще всё, вплоть до нажатий клавиш: https://krausefx.com/blog/announcing-inappbrowsercom-see-what-javascript-commands-get-executed-in-an-in-app-browser

Ну а Facebook естественно божится, что они встраивают код, чтобы повысить вашу безопасность :)

Рекомендую внимательно изучить эту статью и инструмент за ней. Заставляет задуматься.

#security #privacy

#видео дня

И продолжая тему трекинга (который на самом-то деле не всегда зловредный и хочет вам навредить) вот прекрасное видео нашёл.

Утилита заставляет ваш компьютер издавать звук каждый раз, когда Chrome посылает данные в Google. Льёт в уши, так сказать. Гляньте, удивитесь.

Ну и ссылка на саму утилиту, для Linux: https://github.com/berthubert/googerteller

#security #privacy

#шпаргалка дня

Ну теперь-то ты точно не забудешь, как работает justify-content…

…пока не придёт время использовать flex-direction: column 🤪

#css #flex #video

#заметка дня

Безопасный фронтенд в 2022 году выглядит так (в оригинальном твите есть совсем спорные моменты, здесь я их стараюсь убрать или уточнить):

1. HTTPS

2. Токен (авторизационный, или рефреш — зависит от вашей спецификации) должен храниться в secure, samesite, httponly куке. Т. е. не быть доступным из JS (в случае XSS, cross-site scripting, внедрения кода, токен нельзя будет вытащить с помощью этого самого внедрённого кода).

Если не используете SSR для хотя бы для логина, fetch-запрос (ajax) вполне себе может выставить вам куку с httponly. Главное соблюсти все остальные условия и правильно выставить атрибут Path=/.

3. Объявляйте CSP (Content security policy), чтобы снизить вероятность проведения XSS.

4. Генерируйте куки заново при каждом входе пользователя. Это нужно для предотвращения session fixation, «застывшей» сессии.

5. Задавайте короткое время жизни кук (опять же, застывшие сессии).

По 2 пункту: я вижу столько кандидатов, сдающих тестовые задания с токеном в local storage… Это ладно. Но невозможность ответить на вопрос, почему это плохо — 🚩

#security #cookie #js