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

Кто-нибудь ещё считает, что подсказки и ошибки TypeScript страшно раздражают своей формальностью?

Say no more!

Появилось расширение, переводящее их на человеческий (ну… английский) язык!

КДПВ говорит сама за себя, а пока дам ссылку: https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator

Ну и песочница, чтоб побаловаться и понять: https://ts-error-translator.vercel.app/

Отправьте ей свою ошибку и давайте посмотрим на результат.

P. S. а ошибки типов Styled Components оно переведёт, как считаете?

#vscode #ts #typescript

#опрос дня

Кто требовал вопрос на понимание работы языка, а не на подвохи и внимательность? Готовьтесь отвечать.

#ссылка дня

Поскольку Netlify прокинул меня с вебинаром, придётся на них обидеться.

А пока давайте продолжим тему с вариативными шрифтами.

Наверняка все знают шрифт Roboto — дефолтный на Android и в целом уже очень популярный. Google на днях запилили его вариативную версию — Roboto Flex.

В статье на material.io — https://material.io/blog/roboto-flex — рассказана история его создания и проблемы, с которыми столкнулись авторы.

Ну а взять шрифт можно на Google Fonts: https://fonts.google.com/specimen/Roboto+Flex

#font #css

#ссылка дня

Итак, 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