#статья дня

Что я знаю о скролле? Я устраиваю кулачные бои.

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

Что я знаю о скролле? Вроде бы его в браузеры привозят, так?

Если хотите знать о скролле больше — вышла очумительная статья автора, скрывающегося за псевдонимом Mayank (простите, я чот реального имени не нашёл): https://blog.mayank.co/better-scrolling-through-modern-css

1. Стилизация скроллбаров
2. Подводные камни на разных ОС
3. Предотвращение сдвига при рендере
4. Нужно чтобы контент при скролле не наезжал на фиксированную шапку? И такое есть! Обзор новых фич CSS.

Замечательная статья с кучей примеров.

#css #scroll

#ссылка дня

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

Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.

Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.

Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?

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

И так с любым проектом. Думать надо.

Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/

Мифы о доступности на разных языках. Всем читать, котаны.

#a11y

#статья дня

:has заезжает в Chrome 105!

Я пытался выкатить серию постов про этот селектор, но с одной только Safari это всё было довольно скучно.

И вот, наконец, Chrome!

По этому поводу в блоге разработчиков выложили целую статью на тему с подробными примерами: https://developer.chrome.com/blog/has-m105/

Естественно, открывать надо или в Safari, или в Chrome Canary 🙄

Но это стоит того :)

#has

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

Предположим, тебе заказали разработку Flutter или React Native приложения. Да даже Cordova или Ionic. Предположим, ты даже справился. Настало время собирать под iOS. И тут облом. Нужна macOS.

Можно купить старый мак, можно завести виртуальную машину, обмазавшись ютубом и tonymacx86.

А можно воспользоваться Docker и вот этим прекрасным репозиторием: https://github.com/sickcodes/Docker-OSX

Куча рецептов прямо в Read.me, куча полезных скриптов. В общем, надо брать и пробовать.

Отпишитесь потом о результатах, ок?) Тоже при случае попробую. Прост мак-то есть)

#docker #macos

#фишка дня

Если ты увлёкся добавлением 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/
https://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

Пост был бы неполон без https://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