#codepen дня

В чём секрет производительных анимированных градиентов?

В том, что их не надо анимировать!

Анимировать градиент через установку background-position, кейфреймы на цвета или пользовательские свойства, конечно, можно. Но это будет вызывать излишние перерисовки (repaint), читаем.

Работать-то будет: https://codepen.io/P1N2O/pen/pyBNzX

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

Например, очередной лоадер на этой неделе: https://codepen.io/alinaki/pen/zYGvWYN

Одним градиентом рисуем полоски, второй — запихиваем в псевдоэлемент и двигаем его.

Ну вроде ок, не? Кто сделает на шейдерах?

P. S. впрочем, иногда можно и пользовательскими свойствами долбануть по всем фронтам: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk

#css #gradient #performance

#заметка дня

Один из самых проблемных вопросов верстальщиков — не обязательно начинающих — это так называемый “пиксель пёрфект” (pixel perfect). Проще говоря, свёрстанный макет должен полностью соответствовать дизайну вплоть до последнего пикселя.

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

Но всё немного интереснее.

Давайте сразу определимся: правильно свёрстанный макет точен до пикселя по умолчанию. Точка.

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

У блока стоят поля и отступы по 16 пикселей? Нет ни одной причины ставить 15, чтобы «было легче считать» (и такое бывает), а потом проходить по всему макету заново. Ставьте сразу 16, а чтобы помочь себе — пользуйтесь расширениями для браузера, например https://www.welldonecode.com/perfectpixel/

Конечно, так можно дойти до крайности. Я много раз видел как люди бездумно копируют размеры из Sketch, Avocode или Figma, наивно полагая, что уж кому как не им знать о размерах и положении. Это самая большая ошибка, и я уж молчу о том, что редакторы зачастую ставят абсолютное позиционирование всему подряд.

Будьте заранее готовы к тому, что макет – живой. Выделенный блок делится на секции? Используйте проценты во флексах или fr в гридах, делите его относительными единицами. Дизайнер поставил 63 px? Это явно дрогнула рука, не используйте нечётные значения никогда, округляйте до ближайших x4 (в данном случае — 64). Во всех размерах должна просматриваться логика, не могут три кнопки в ряду иметь один размер, а четвёртая – другой.

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

В скором времени я попробую затронуть тему вёрстки изначально неудобных макетов: что делать если вам выдали макет в 1920 пикселей, а большинство ноутбуков до сих пор имеют 1366 и как вести диалог с дизайнером и заказчиком в такой ситуации.

#css #html #pp #pixelperfect

#видео дня

Когда я выкатил пост со шпаргалками по TypeScript в React, поднялся некоторый вой.

Мол, не нужно, навязали, неудобно и так далее.

O RLY? Ну ок. Типы в JS всё равно могут появиться. Например, вот предложение в рабочую группу ECMAScript TC39 от Гила Тайяра:

https://www.youtube.com/watch?v=SdV9Xy0E4CM

В сухом остатке, типы становятся лишь комментариями для их проверки и более ни на что не влияют. Такое себе расширение JSDoc.

Кто-то в восторге, кто-то считает, что уж проще тогда TypeScript использовать.

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

#js #ts #types

#фишка дня

Нормальные «математические» или «операторные» медиазапросы скоро будут доступны не только в Firefox, как я писал в одном из постов, но и в Chrome 104: https://developer.chrome.com/blog/media-query-range-syntax/

Короче говоря, вместо такой вот ерунды:

@media (min-width: 400px) and (max-width: 600px) {
// Styles for viewports between 400px and 600px.
}

Будем писать такую:

@media (400px <= width <= 600px) {
// Styles for viewports between 400px and 600px.
}

Мне нравится больше. Кому ещё — глядите на плагин для PostCSS: https://github.com/postcss/postcss-media-minmax

#css #math #mediaqueries

#книга дня

Для тех, чей взор на типографику распространяется дальше, чем написать margin: 1em 0.

Александра Королькова уже достаточно давно выложила в бесплатный доступ свою книгу “Живая типографика”.

А я свою на Авито покупал когда-то, потому что тираж был полностью распродан…🙂

https://leksandra.livejournal.com/120488.html

Приобщаемся к основам типографики и благодарим автора.

Ссылка из поста: https://yadi.sk/i/oy19NzNjydZjR

#типографика

#codepen дня

Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…

А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.

Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.me/htmlshit/508

А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.

И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV

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

#svg #effect #filter

#ссылка дня

Сегодня я подобрал максимально красивый ресурс: набор демок на WebGL: https://ykob.github.io/sketch-threejs/

Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально. А я когда-то убедил заказчика обойтись вариантом попроще… не знал :)

Все примеры с исходными кодами, есть и весьма практичные, вроде галереи.

#js #webgl

#заметка дня

Пожалуйста, прекратите засорять глобальное пространство имён утилитами из npm/yarn.

Это я о чём:


$ npm i -g gulp
…bla-bla-bla
$ gulp


Не надо! Даже если документация говорит вам это сделать. Или, ещё хуже, рандомный ютубер или блогер.

Используйте для ваших локальных задач npm-скрипты:


$ npm i gulp
…create your scripts
$ npm run gulp


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

Итак, как же работают npm-скрипты?

Если вы зайдёте в каталог node_modules, со всеми пакетами, там будет вложенный каталог .bin. Но вот исполняемых файлов, бинарников, там нет. А есть т. н. символические ссылки, симлинки. А вот уже они указывают на нужный файл в каком-либо конкретном пакете.

Как они узнают, куда указывать? Всё просто: в package.json нужного пакета будет, опять же, секция bin.

Итого, если node run xxx не нашёл скрипта с нужным именем, он полезет за ним в локальное пространство имён. Не найдя приложения в локальном пространстве имён, он полезет в глобальное и запустит приложение.

Почему это полезно?

Да потому что можно держать миллион разных версий gulp/webpack/vite/далее везде и не страдать по этому поводу. Работать будет всегда и везде. А если сюда приплюсовать nvm… Но об этом потом.

Кому интересны подробности, вот вам баззворд для лучшего понимания проблемы: PATH.

Задавайте ваши ответы, котаны.

P. S. inb4 npx

#js #node #run

#статья дня

Я недавно разработал своё расширение для Chrome DevTools. Пока достаточно примитивное, но уже очень помогающее мне в работе. В паблик вряд ли выйдет, но большинство всё равно о моей рабочей среде не знает… Нужен хороший definition of done и отмашка руководства для этого.

Так вот, пока искал информацию там-сям, наткнулся на интервью одного из разработчиков DevTools: https://habr.com/ru/company/jugru/blog/452990/

Двухлетней давности, но крайне занимательное. Редко у кого есть настолько глубокое погружение в задачу. Один тот факт, что Netflix использует свой собственный веб-движок уже достоин интереса.

#chrome #devtools

#предложение дня

Реклама-рекламой, но многие из вас, кто пришёл по моим собственным рекламным постам, могли заметить, что я упоминал, что наша компания ищет фронтов.

Вы думаете, я кликбейтил? Почему не написал никто? Вроде, контакты все есть…

Это вам не канал с мемами, камон.

Короче, поехали. Если вы читаете давно, то уже знаете, а если нет — то узнаете сейчас.

Я работаю Engineering Manager (тимлид, короче) в компании Supermetrics. Стартовал с позиции Senior JS.

Компания занимается добыванием и перекладыванием пользовательских данных из разных мест в разные другие места. С обработкой и без. Это если прям на пальцах.

Короче, открытые позиции:
- Senior Frontend Developer: DWH team
- Senior Full-Stack Developer: Data Studio Team
- Lead Web Engineer - Marketing team

Вот по последнему пункту: очень сложно найти хорошего вордпрессника… Давайте попробуем.

Пишите в контакты на странице или мне. Сделаю реф, если всё понравится.

Дерзайте, котаны.

#фишка дня

Зачем верстать, когда можно не верстать, правда?

Если вам дали задание: “Срочно сверстай нам кнопку Apple Pay для мобил!”, не надо кидаться искать SVG логотипа и шрифт.

Надо просто…

button {
    -webkit-appearance: -apple-pay-button;
}

…и всё.

Естественно, это работает только в Safari. Но на iOS всё — Safari.

Для встроенных WebView лучше и не придумаешь.

#ios #button #applepay

#ссылка дня

Тимлид я ещё довольно молодой, приходится учиться всему на лету и черпать знания отовсюду.

Поэтому, было весьма интересно найти роадмап (карту знаний и умений) по этой теме: https://tlroadmap.io/

Работать с ним можно буквально как с картой, выбирая нужные ветки, или же как с документом: https://tlroadmap.io/guide.html#%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D0%B8-%D0%BF%D0%BE-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8E

Всё написано понятным языком и вообще весьма интересно. И не только тимлидам, конечно же.

#teamlead #learning #roadmap

#видео дня

Я никогда не пробовал в деле генераторы в JavaScript. Ну это вот эти всякие function* и yield. Звёздочка тут — это не указатель. Ещё и хер пойми как произносится…

Так вот. Если я не пробовал их и толком не интересовался, то Анджану Вакил (Anjana Vakil) они дико восхищают. Вы поймёте, когда начнёте просмотр 🤣

Вообще, JS Conf Budapest в этом году какой-то дико угарный, надо было поехать…

Всё рассказано очень поняным языком, рассмотрены несколько вариантов применения. Я даже задумался наше тестовое реализовать на генераторах, можно же на лету среднее считать…

Короче, мой рекоммендасьон: https://www.youtube.com/watch?v=gu3FfmgkwUc

#js #generators

#такое дня

Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»

Ну… как бы… мне даже добавить нечего: https://observablehq.com/@mizinov/area-comparison

#optical #illusion #perception #design

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

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

Воспользуйся https://www.browsers.fyi/

Ну и API, конечно же: https://www.browsers.fyi/api/

Зачем? Ну, а почему бы и нет.

#web #browser #api

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

«Лучший валидатор — это браузер!» — так когда-то отвечал сайт Студии Артемия Лебедева на попытку валидации.

И так-то оно так, но это было много лет назад, во времена дикого разгула браузерных движков.

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

Так вот, суть в том, чтобы не писать ерунды вроде вкладывания ul в p (и удивляться, что всё развалилось), ну или main в footer (и удивляться низким показателям в SEO) и так далее, желательно бы свою вёрстку (или просто отдельные React/Vue компоненты) как-никак валидировать.

Ну и проверять доступность, естественно (хотя бы alt в img).

Как? Ну вот, например, через https://html-validate.org/. Это, собственно, офлайн-валидатор.

А лучше пойти дальше и использовать его в связке с Jest: https://html-validate.org/frameworks/jest.html

Примеры там имеются. Верстайте правильно, котаны.

#html #jest #validation

#заметка дня

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

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

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

Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.

По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.

Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».

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

В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉

Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ

#css #table #keyboard #focus #a11y

#codepen дня

Очередная CSS-картина, очередной фотоаппарат: https://codepen.io/kassandrasanch/pen/WNxJZyz

Что же отличает этот кодпен от остальных?

Автор не поленилась сделать страницу с пошаговой демонстрацией прогресса выполнения: https://www.cssartist.com/inprogress

Крайне забавное зрелище :)

Вообще, у неё на сайте много интересного, но сайт такой лагучий и хреново сделанный…

#css #art

#статья дня

Вечнозелёная (суть, никогда не устареет) статья Павла Лаптева о CSS Grid: https://pavellaptev.medium.com/learning-css-grid-with-the-swiss-2bd02e913fa

Но не просто очередная уровня "две колонки, три строки", а с некоторым историческим экскурсом через газеты и журналы, приводящим в итоге к реализации пары каноничных швейцарских сеток.

А уж кто знает о типографских сетках больше швейцарцев? Да в общем-то, никто. Как и о типографике, впрочем.

Давайте-ка сюда сразу добавим статью про золотой канон в сетках (golden canon grid): https://habr.com/ru/post/479580/

#css #grid #swiss

#видео дня

Раз уж в чате в очередной раз зашли разговоры о (не)нужности знания правил приведения типов в JavaScript и понимания Event Loop, давайте уж выложим нетленки.

1. WTF JS: https://youtu.be/2pL28CcEijU
2. Event Loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ

Тема неустаревающая, тема важная.

Кто-то за неё будет биться до последнего, кто-то скажет, что так писать вообще не надо никогда (и да, не надо).

Но лучше бы это понимать.

И, конечно, https://wtfjs.com/, хотя его стоило бы обновить давно.

#js #wtf