#ссылка дня

Итак, Netlify извинился за вчерашнее отсутствие вебинара (опустим тот факт, что я прислал свою личную ссылку, стыд и позор).

Так вот, вебинар. О чём? О Netlify Edge Functions.

Это serverless (обожаю это слово) среда выполнения JavaScript, основанная на Deno.

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

Serverless тут означает, что нет взаимодействия непосредственно с железом, инфраструктурой.

Естественно, они не одни такие. Просто продукт совсем новый и основан на Deno, а не Node.js.

Так что попробую таки пройти вебинар и побаловаться.

#netlify #serverless

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

Забавный обучающий проект посвящённый DOM Events (событиям объектной модели документа). Кликам и фокусам, короче.

Что такое target, bubble, propagation? Всё показано максимально наглядно.

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

Итак, встречайте: https://domevents.dev/

#js #dom #education

#статья дня

Помните, не так давно мы обсуждали правильное использование кодов клавиш?

Как оказалось, есть очень яркий пример, почему нужно использовать code. И пример этот — игры.

Когда-то было решено, что стрелки для перемещения персонажей в FPS-играх использовать неразумно: далеко от остальных клавиш и слишком близко к мыши (для правшей). А вот WASD — самое то. Но вот удивительное дело: половина Европы использует не QWERTY, а AZERTY раскладку. И тут у тех, кто использует key, случается конфуз, как на картинке.

Все примеры и подробности тут: https://www.bram.us/2022/03/31/wasd-controls-on-the-web/

#keyboard #js

#ссылка дня

Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial

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

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

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

Но лучше самим идти и пробовать все примеры.

#css #flex #flexbox #tutorial

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

Помните (конечно же, нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://t.me/htmlshit/375

Так вот, Артём Шибаков (https://twitter.com/ashibakow) разработал автодополнение для Visual Studio Code, автодополняющее CSS-свойства с учётом статистики их использования.

Smart CSS Autocomplete: https://marketplace.visualstudio.com/items?itemName=saionaro.smart-css-autocomplete

Пробуйте, не забывайте отписываться в issues на GitHub и благодарить автора.

#vscode #css #extension

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

Идея для канала, дарю бесплатно!

Берёте, парсите https://tiny-helpers.dev/ и выдаёте по одной утилите в день. А учитывая, что там есть подобные же сборники в подборке… может хватить на всю жизнь.

Шутки в сторону: полтыщи разных околовебных инструментов: от калькулятора цвета до парсера htaccess (кому-то неданво нужно было) и настройки crontab.

Весьма уютно, всё понятно каталогизировано.

#css #web #tool #js

#опрос дня

Что в консоли?

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

Не понимаете CSS-селекторы? Их есть у меня! А точнее, у автора.

https://raw.githubusercontent.com/eludadev/css-docs/main/assets/css_selectors.png

P. S. дежурное напоминание о том, что шпаргалки полезны только тому, кто их пишет.

Хотите пользы от шпаргалки? Хотя бы повторите её.

Вот возьмите и сделайте из этой кодпен и зашлите нам, с удовольствием выкатим.

#css #cheatsheet

#заметка дня

Итак, давайте сразу панч: верстальщику в 2022 году нельзя ориентироваться на физическое разрешение матрицы экрана устройства. Точка.

Если вам заказчик говорит, что у него ноутбук с FullHD разрешением и ваша прекрасная вёрстка поехала к чертям, а у вас на 24” мониторе с тем же разрешением всё отлично — ответ прост. И имя ему масштаб.

Нетрудно догадаться, что объекты на разрешении 1920x1080 на 14” выглядят гораздо меньше, чем на пресловутых 24”. Это простая физика — размер пикселя меньше.

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

В итоге, на таком ноутбуке Windows выставит вам размер шрифта в 125%. Вот только о чём настройки Windows почему-то молчат, так это о том, что все элементы интерфейса станут крупнее, а не только шрифт. И это прям максимально странно.

В итоге интерфейс на 14” экране станет отображаться в эквивалентном разрешении 1536x864 (делите на 1.25). А это совсем не FullHD, не правда ли? А вот настройки монитора упорно скажут вам: «FullHD, чо докопался?». Во многих программах интерфейс ещё и размытый станет…

Второй пример: MacBook с ретина-экраном.

Рекламные материалы Apple упорно твердят нам: разрешение экрана MacBook Pro 13” — 2560x1600. Вот только о чём молчит Apple так это о том, что изображение будет иметь виртуальное разрешение 1280x800 для моделей до 2015 года и 1440x900 — после. Это коэффициенты масштабирования 2 и 1.77 соответственно.

Правда, в macOS, в отличие от Windows и Linux, это масштабирование сделано правильно и шрифты с векторными изображениями будут видны максимально чётко, почти как на бумаге. Их рендеринг происходит по физическим пикселям матрицы.

Растровые изображения будут отображены в реальном разрешении – рендеринг в физические пиксели. Именно по этой причине для ретина-экранов фотографии готовить нужно в двукратном размере (x2 по ширине и высоте, так что формально — четырёхкратном, но так говорить неудобно).

Третий пример. Посмотрите на свой мобильный телефон. Если производитель заявляет разрешение экрана 1080x1920 (вертикально), то в реальности в большинстве случаев это 360x640. С той же логикой, что и в macOS и ровно по тем же самым причинам.

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

Чтобы не попадать в дурацкие ситуации, я могу разве что предложить сразу проверять масштабирование не только в браузере, но и в системе. Ну или использовать #инструмент вроде https://screensizemap.com/ чтобы заранее смотреть разрешение экранов разных устройств.

Кстати, если откроете этот сайт и посмотрите на пример для ThinkPad — получите как раз 1536x864. Потому что Windows на подобных ноутбуках ставит 125% по-умолчанию, из коробки. И да, у меня есть такой ноутбук и именно на нём я впервые и осознал подобную боль.

А чтобы узнать своё разрешение экрана, рекомендую вот этот сервис: http://whatismyscreenresolution.net/

Надеюсь, данные вас не удивят.

Вместо итога

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

В общем, удачи 😉

#screen #css #tool

#codepen дня

…my money don’t jiggle-jiggle, it folds…

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

Я даже видео прикладывать не буду, это надо видеть :)

#codepen #trend

#статья дня

Некоторое время назад вышла отличная статья Уны Кравец (Una Kravets): «Ten modern layouts in one line of CSS».

Я очень не согласен со словом «modern» (современные), потому что, например, трёхколоночная раскладка с шапкой и подвалом (ещё не так давно это был «святой грааль» вёрстки, с подачи газетчиков) появилась не вчера и не десять лет назад. Решению без таблиц тоже сильно больше десяти лет. То же касается и различных сеток.

Но факт есть факт: при помощи display: grid можно буквально в одну строку реализовать не только «Святой грааль», но и множество других вариантов. Мне больше всего понравился clamp.

А на Хабре есть перевод. Я уверен, что многим было бы приятно прочесть и на русском.

Ссылка на перевод: https://habr.com/ru/post/522880/

Ну и ещё раз ссылка на оригинал: https://web.dev/one-line-layouts/

#перевод #css #html

#ссылка дня

Среди новичков (да и не только) зачастую отсутствует понимание того, как же всё-таки выглядят вообще все HTML-теги. Но это-то ладно.

А вот для чего нужен normalize? sanitize? reset? bootstrap? Что происходит-то вообще?

Почему нельзя просто на одной странице всё наглядно показать и сравнить?!

Так можно!

HTML5 Kitchen Sink. Всё в кучу!

https://github.com/dbox/html5-kitchen-sink/

Заходим, переключаем, сравниваем. Разрабатываем своё.

#html #css #reset #normalize

#библиотека дня

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

Встречайте: AnimXYZ,
https://animxyz.com/.

Подход простой: вы указываете нужную комбинацию трансформаций, таймингов, уровней прозрачности, последовательность проигрыша прямо в классах и ставите атрибут xyz. Остальное она сделает за вас: объединит их и проиграет в нужный момент.

Основная моя к ней претензия – атрибут xyz. Для меня остаётся загадкой, почему нельзя использовать валидные data-атрибуты. С другой стороны, в React и Vue такой проблемы у вас не появится вообще.

Я считаю, что ей можно дать шанс. Особенно если вы создаёте различные баннеры.

#css #transitions #animation

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

Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.

Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392

Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.

https://yqnn.github.io/svg-path-editor/

#svg #path

#codepen дня

Фотореалистичное изображение синтезатора Roland MC-500: https://codepen.io/fossheim/pen/BaKQGZJ

Оригинал изображения можно увидеть по ссылке: https://i.pinimg.com/564x/a2/02/a4/a202a4ab33dff87b53ba54db33518b78.jpg

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

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

https://fossheim.io/writing/posts/css-macintosh/

https://fossheim.io/writing/posts/css-polaroid-camera/

#видео дня

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

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

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

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

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

#podcast #json #js

#такое дня

Можете распечатать и подарить любимому тимлиду: https://www.printables.com/model/163302-worlds-best-css-developer-trophy

А накидайте ваших любимых айти-мемов чтоль. В чате-то не стесняетесь :)

#книга дня

Какие книги, возможно, не имеют большого смысла? Ну, по фреймворкам, очевидно. Книги с рецептами тоже в топку (даже кулинарная тут проиграет интернету). В общем, многие устаревают быстрее, чем вы успеваете получать знания.

А что не устаревает? Архитектура, подходы… математика! Уж математика точно для многих тема больная, особенно, если собрались писать игры. И вот классическую книгу по этой теме и хочу вам представить.

«3D Math Primer for Graphics and Game Development», Fletcher Dunn и Ian Parbery. 2011 год с первым изданием 2002. Но такие знания не устаревают, поэтому — вот ссылка на онлайн-версию: https://gamemath.com/

Язык в книге сильно проще классического матанализа. Требуется немного знаний тригонометрии, правда. Да и алгебру никуда не деть :)

Но в целом — шикарная находка.

#book #game