#статья дня

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

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

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

#design #a11y

#такое дня

Что-то я замотался и пропустил важную дату: каналу вчера стукнуло 4 года 🎉

Я его начинал под названием “Будни верстальщика” и изначально планировал вести в Твиттер-формате с забавными рабочими моментами и просто какими-то цитатами. Но быстро стало понятно, что Телега не про это.

Потом я начал модерить чат @css_ru и заметил, что вопросы у людей одни и те же. На канале стали появляться первые заметки и линкдампы.

Спустя некоторое время GeekBrains включили меня в свою email-рассылку и за сутки присоединилось больше 2000 человек. Это было похоже на взрыв.

Но поскольку в Телеге почти нет органического продвижения, а славы охота — я начал покупать и ставить рекламу. Да, тщеславие — оно такое, выражается админским сленгом “фулл реинвест”.

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

Всем lowercase hex, котаны!

#статья дня

Введение в SVG-анимации для верстальщиков

На моей памяти Хабрахабр умирал уже раза три.

Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.

На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/

Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.

В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).

#svg #css #animate

#фишка дня

Я, конечно, дико извиняюсь, но недавно я впервые сконвертировал SVG в PNG используя средства разработчика в Chrome.

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

Оказалось, в DevTools есть ошеломительная штука: “Capture node screenshot”. Она прекрасно работает, естественно, не только для SVG, но и для любых DOM-нод. К сожалению, прозрачность не поддерживается.

Понятное дело, что фишка эта применима не только для конвертации изображений :)

Сохранить изображение с canvas так тоже не удастся, но эта возможность встроена в контекстное меню самого холста и так.

И ещё — не работает в iframe… эх.

#svg #png #screenshot #devtools

#новость дня

Одной картинкой.

У меня всё.

#статья дня

Вы когда-нибудь задумывались, что же делает шрифты приятным для чтения? Конкретно — кириллические шрифты?

А вот Александра Королькова точно задумывалась. И это неудивительно, она же автор «Живой типографики». Кстати, книга эта официально в бесплатном доступе: https://t.me/htmlshit/955

Так вот. Статья на сайте небезызвестных Паратайп так и называется: «Как разобраться в кириллице».

Конструкция букв, курсивы и наклонные шрифты, кернинг и распределение толщин — всё доступно и понятно.

Вот где клад для нашей жабы, котаны!

#fonts #cyrillic

#видео дня

Кому технического стендапа? Егор Малькевич как всегда: https://www.youtube.com/watch?v=b8k0FLrW4xw

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

Немного поржал с подачи, что Node.js это буквально просто вызовы API над Си.

Какое совпадение, не подскажете, за счёт чего PHP всё ещё держит позиции в крупных проектах? 😬

В общем, на ночь — самое то.

#video #nodejs

#фишка дня

Продолжаем наше путешествие по уже-не-столь-будущему псевдоселектору :has aka родительский селектор.

На сей раз абсолютно прекрасная штука, сочетание :has и object-view-box (aka фокусировка на части изображения):

img {
  object-view-box: inset(var(--top) ...);
}

:root:has(#car:checked) {
  --top: 61%;
  ...
}

Залипаем на видео, смотрим кодпен:

https://codepen.io/jh3y/pen/QWQrVwj

Ах, простите. Смотрим кодпен только в Chrome Canary с флагом Experimental Web Platform Features 😜

Но заглянуть в будущее всегда приятно.

#css #has #future

#ссылка дня

Мы не так давно приняли решение требовать в тестовых заданиях TypeScript по-умолчанию.

Сейчас уже сложно представить, как должен впечатлить нас человек, пишущий на чистом JavaScript. Даже если он использует cutting-edge возможности.

И мы далеко не первые в этом и уж точно не последние. Так что если желаете где-то адекватно работать или просто меньше бояться за стабильность своих проектов — самое время.

Ну а чтобы не было так больно, держите «методичку» по использованию TypeScript в React-приложениях: https://github.com/typescript-cheatsheets/react

Хороших выходных, котаны!

#react #typescript #cheatsheet

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

Всё ещё испытываете проблемы с ветками в Git?

Not anymore!

Только сейчас открывая ссылку https://learngitbranching.js.org/ на вашем компьютере, вы получаете уникальную возможность научиться ветвлениям и слияниям в любимой системе контроля кода.

Или вы любите Mercurial? 🤔

#git #education

#игра дня

Очередной образец игры на CSS, ни строчки JS.

Проведите курсор к бриллианту, не касаясь стен: https://codepen.io/t_afif/pen/YzeNyjR

Очень странно, что она раньше не появилась. Реализация довольно очевидная :)

P. S. Да-да, я в курсе, что на мобиле можно выиграть сразу. Слово «курсор» видим?

#css

#ссылка дня

Вот вы знали, что Apple WWDC не ограничивается одной презентацией новых операционных систем, часов и ноутбуков?

Это же самая настоящая конференция для разработчиков. Как оказалось. А видео с неё рано или поздно попадают сюда: https://developer.apple.com/videos/

И вот там находятся настоящие бриллианты. Видео по дизайну, типографике, программированию…

Ну и, конечно, те самые видео с презентацией багнутых операционных систем тоже имеются :)

Обучаемся, котаны.

#apple #wwdc #video

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

Уметь пользоваться отладчиком должен каждый разработчик.

Особенно когда инструменты становятся всё дружелюбнее, да ещё и встроены в браузер.

Итак, как отследить, какой код вызвал изменение атрибута (или поддерева, или вообще удаления) элемента?

Находим элемент в инспекторе, правой кнопкой – «Break on» ➡️ «attribute modifications» и... и в общем, всё, смотрите видео.

Теперь исполнение остановится по условию и вы сможете посмотреть код, изменивший ваш атрибут, прямо во вкладке «Sources». Там же можно добавить больше точек останова или просто продолжить.

#js #debug #devtools

#такое дня

Щас будет немного хардкора. От вас не требуется понимания языка Python или работы компиляторов языков программирования.

Просто задумайтесь на секунду, в каком забавном мире мы живем: чтобы скачать видео с YouTube иногда требуется разобрать JavaScript на странице. А реализация парсинга кода, достаточного для этой задачи, укладываются в 500 строк на Python: https://github.com/yt-dlp/yt-dlp/blob/master/yt_dlp/jsinterp.py

Не знали, откуда начать свой путь в компиляторы и интерпретаторы языков программирования? Можно прям оттуда :)

#js #python

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

Как часто вы произносите “ой”, работая с Git? Или, того хуже, “упс”? Не говорю уж про “бля”…

Не та ветка, не туда закоммитили, не те файлы, случайно грохнули ветку, зря запушили, не то сообщение, забыли вернуть работу из stash…

Так вот, если Git это бесконечный undo для ваших проектов, то ugit — это undo для Git!

Ссылка: https://github.com/Bhupesh-V/ugit

КДПВ говорит сама за себя.

Какая-то неделя инструментов для Git выходит.

#git

#видео дня

Хук useEffect в React с самого начала был как микроскоп, который работал и выглядел как кувалда. Потому его и используют как кувалду даже там, где нужен микроскоп.

React 18 принёс ещё больше вопросов (отчасти ещё и потому, что документация сильно отстаёт и изначально неверна).

Так что я, конечно, настоятельно рекомендую почитать Дэна Абрамова: https://overreacted.io/a-complete-guide-to-useeffect/

Есть в переводе на Хабре: https://habr.com/ru/company/ruvds/blog/445276/

А чтобы добить знания — глянуть видео о useEffect и его современном значении и правильном применении: https://www.youtube.com/watch?v=HPoC-k7Rxwo

#react #hooks #useeffect

#опрос дня

В каком порядке будут вызваны log*-функции?

Я знаю, вы скучали. Но это не просто опрос, будет чуть-чуть интересно.

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

Собственно, весь опрос был создан ради подводки к этому инструменту: JavaScript Visualizer 9000.

Ссылка: https://www.jsv9000.app/

Когда вы поймёте Event Loop и порядок вызова в JS — подобные опросы вообще перестанут иметь смысл. Так что побалуйтесь примерами, пишите свои, присылайте авторам интересные PR с новыми.

Развиваемся, котаны.

P. S. в комментариях подсказали похожий инструмент: http://latentflip.com/loupe/

P. P. S. ну и статья на тему с чуть иными формулировками: https://dmitripavlutin.com/javascript-promises-settimeout/

#js #education #learning #eventloop