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

Не понимаете 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://news.1rj.ru/str/htmlshit/392

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

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

#noscript #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

#заметка дня

Зачем валидировать почту регулярками, если в браузере в общем-то всё есть?

Создаём элемент на лету, заполняем его нужными атрибутами, передаём email — и просто используем встроенный API. Спасибо Леонадру Элиасу.

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

И ещё из всего этого следует один интересный вывод, тянущий на полноценную библиотеку. Кто догадается, какой?

#input #validation #js

✅Новый формат получения IT специальности - Буткемп. Что это такое?

Буткемп — методика, которую использовали в лагерях для подготовки солдат. Чтобы стать полноценным бойцом, в обычных условиях новобранцу нужно 3-4 года. В условиях Bootcamp такого результата достигали за 4 месяца. Эффективность методики обоснована тем, что на период кемпа человек полностью погружается в процесс обучения и быстрей воспринимает информацию. Сейчас этот метод обучения активно используют в Гарварде, IT-компаниях, бизнес-проектах и образовательных программах.

Для обучения IT специальностям (прежде всего программирование) формат начали использовать в 2011 году в США. Он быстро доказал свою эффективность и стал популярным. К примеру, за 2020 год IT буткемпы выпустили 24975 американцев. Для стран бывшего СССР, это новый формат.

В 2018 году в России открылся первый - Эльбрус Буткемп. С тех пор его выпускниками стали 752 человека. 93% из них нашло работу в течение 3 месяцев после выпуска. 

Буткемп работает как оффлайн (Москва и Санкт-Петербург), так и онлайн.

Подробнее о формате Буткемп можно узнать на мероприятии в ближайший понедельник

#фишка дня

А давайте ещё больше безумных идей богу безумных идей.

Как вам фильтрация списка на CSS? Уж точно покруче FizzBuzz задачи на собеседовании.

А достигается волшебство путём использования селекторов пот атрибутам:

[term] { display: none; }
[term*="a" i] { display: list-item; }

i — означает case-insensitive, регистронезависимый ввод.

Пример на CodePen: https://codepen.io/jh3y/pen/NWyaomN

Пример, конечно, выглядит малость упорото — он на JS генерирует вышеописанный код на CSS, но даже при всём этом — выход весьма декларативен и позволяет поиграть эффектами скрытия-отображения элементов на ура.

Просто считайте это вашим маленьким DSL (domain-specific language, язык под задачу).

Основная идея: не забывайте, что у вас и такое есть под рукой.

#css #js #attributes