обещанная #фишка дня

Вы могли заметить, что Google стал выдавать результаты поиска с подсвеченным текстом запроса на искомой странице.

Формат URL при этом максимально странный: /#:~:text=highlight. Могу предположить, это сделано чтобы ни при каких условиях не пересечься с любыми возможными параметрами запроса/фрагмента (#).

Было бы глупо не воспользоваться этой возможностью! Простите меня, обладатели Firefox и Safari.

Я обещал фишку, и вот она: начиная с Chrome 89 вы можете управлять внешним видом подсвеченной строки! Я не понимаю такую любовь разработчиков к жёлтому цвету (помните автодополнение?), поэтому очень рад, что мы сможем использовать экспериментальный псевдоэлемент ::target-text чтобы подсветить выбранный кусок текста нужным нам цветом!

::target-text {
  background: cyan;
}

Более того, скоро нам обещают возможность управлять подсветой ошибок через псевдо элементы ::spelling-error и ::grammar-error. Но это потом.

Мы с @kirenkov уже давно планируем провести совместный стрим, но всё никак звёзды не сходились.

Если кто не в курсе, Виталий (@kirenkov) – автор и ведущий YouTube-канала Просто разработка и его Telegram-версии (@prostorazrabotka).

И тут, внезапно, случился Clubhouse :-)

Так вот, в пятницу в 20:00 по Мск, приглашаем вас присоединиться ко встрече: https://www.joinclubhouse.com/event/m30z3XpW.

Тема:
Как не сойти с ума, верстая сайты, когда тебе за 30?

Повестка:
1. Ранее выгорание
2. Нужно бежать чтобы оставаться на месте
3. Мама, мне 33, а я верстаю менюшки
4. Как расти и надо ли
5. Не 10 лет опыта, а 10 раз по году опыта

а так же ответим на ваши вопросы, которые вы можете отправить по ссылке: https://forms.gle/fARKyQvpFcifdk99A, до 20:00 четверга по Мск.

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

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

Ну и конечно же, вы уже можете подписываться на нас в Clubhouse - @bekharsky и @kirenkov (да, никнеймы такие же, как и в телеге).

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

А точнее, даже два. Для начала, начнём со статьи: https://developer.chrome.com/blog/hardware-accelerated-animations/

Нам обещают, что начиная с Chrome 89 SVG- и анимация в процентах будут аппаратно ускорены. Да, вы не ошиблись, если вы раньше писали “translateX: -100%”, это не было аппаратно ускорено, а значит, в худшем случае, могло визуально тормозить (я в курсе про хак с translate3d, но он часто замыливает картинку).

Также ждём аппаратное ускорение bg-color и clip-path (все помнят, что анимирование цвета фона приводит к перерисовке?).

Эта статья стала поводом рассказать о двух инструментах создания SVG-анимаций, как альтернативе Lottie: SVGator и Rive. Оба бесплатны для личного пользования, оба позволяют делать мощные векторные анимации.

Rive больше подходит как альтернатива Lottie, ибо имеет свой отдельный рантайм под множество сред.

Творите и помните, скоро всё это совсем перестанет тормозить :)

Встреча уже через полчаса! Забегайте на уютный стрим.

Поехали.

#codepen дня

Звание воскресного кодпена дня забирает… пустой кодпен. С его прекрасными цитатами.

Это максимально неожиданное предложение, но вы попробуйте и поверстайте на float. Назад возвращаться будет очень хорошо :)

Вообще, цитаты на CodePen появились достаточно давно и иногда бывает действительно забавно.

#заметка дня на скорую руку

Только что в дружественном чате на пустом месте произошла бурная дискуссия. Казалось бы, какой простой вопрос: «У одного блока margin-bottom: 10px, у блока ниже margin-top: 15px. Сколько в итоге будет margin в px между блоками?»

Можно, конечно, посмеяться над вопросом, но это вполне себе типичная задача на собеседовании.

Дайте себе 30 секунд на размышление, но если вы уже держите в голове конкретное число – вы неправы.

Ответ звучит так: «Какова модель расположения этих блоков?». Вопросом на вопрос, в лучших традициях, да.

Ну и кодпен для примера, чтоб уж наверняка: https://codepen.io/alinaki/pen/OJbvOmz

Схлопывание отступов (margin) штука такая.

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

#заметка дня

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

Любителям шлюзов будет другая статья. Хотите — обсудим в чате.

vw+vh

Итак, вам кровь из носу нужно, чтобы сайт был абсолютно резиновым и реагировал на изменение размера окна пропорционально. Прочитали, что нужно использовать vw (viewport width) или vh (viewport height).

1vw это 1% от ширины видимой области экрана включая скроллбар, 1vh от, соответственно, высоты. Я рекомендую vw, ибо чаще всего, ширина макета это константа (я про макеты! не про результат, ниже поясню).

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

Единицы vh и vw – разные по определению! Прямоугольник 10vw на 10vh это не квадрат! Если вы изменяете ширину окна, высота-то остаётся постоянной. И наоборот.

Второе: если уж взялись, то используйте их везде: размер блоков, шрифта, отступы, поля, базис – всё должно быть или в v-единицах (или в процентах, кто понимает). Это же касается, впрочем, и rem.

Третье: чтобы не сидеть с калькулятором (знаю таких кадров лично), я предлагаю воспользоваться следующей функцией для SCSS:

$base-width: 1920;

@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}

@function vw($num) {
@return strip-unit($num) / $base-width * 100vw;
}


Пример:

.my-block {
width: vw(100px);
padding: vw(20px);
}


100px это ширина блока на макете 1920px. Не при разрешении экрана в 1920 по ширине, а на вашем макете от дизайнера. То есть: 100px ➗ 1920px ✖️ 100vw, по формуле простых процентов.

Многих смущает функция strip-unit. Мол, там же единица получается в знаменателе.

Нет, ребята. Не единица. По правилам SCSS 20px ➗ 1 = 20px, а 20px ➗ 1px = 20. Это простая алгебра дробей. Ну и соответственно, 20px ✖️ 100vw не имеет никакого смысла, а 20 ✖️ 100vw — имеет. Не умножайте сантиметры на килограммы (и не смейтесь над мемами с учителями).

Четвёртое: не забывайте про скроллбар, он ненулевой ширины, но при расчёте v-единиц не учитывается.

Пятое: сайт, свёрстанный таким образом, перестаёт зумиться на десктопах. Зато на мобильных – просто сказка, горячо рекомендую.

И шестое: в какой-то момент сайт станет просто мелким :)

rem

С rem (root em), единый размер шрифта корневого элемента, html, верны ровно всё те же утверждения и применима всё та же формула:

$base-font: 16;

@function rem($num) {
@return strip-unit($num) / $base-font * 1rem;
}


Пример:

.my-block {
width: rem(100px);
padding: rem(20px);
}


Почему 16? Потому что 16px это размер шрифта тега html по-умолчанию в любом браузере. Не надо ставить 62.5% на html в надежде получить 10px, я вас умоляю! Да, числа выглядят красиво, но в вашу логику кому-то ещё въехать предстоит. Что понятнее, 10rem из 62.5% или rem(100px)?

Хотя ладно, тут кому как.

Главное: не ставьте никогда размер шрифта html в px, вы потеряете всю красоту доступности rem для людей, которые изменяют размер шрифта браузера по-умолчанию.

К плюсам rem точно можно отнести возможность изменять размер всего сайта простым переключением размера шрифта. Например, на сайте Минэкономразвития РФ так сделана панель для слабовидящих (но ошибка с 16px в корне присутствует).

Второй плюс: когда дизайнер неопытный, он запросто может вам прислать макет в 1440px, например. А большинство экранов имеют размер 1280 и 1366. Не каждый макет можно аккуратно адаптировать. И вот тут магия быстрого изменения масштаба очень нужна. Меняете себе размер шрифта по медиа-запросам и готово.

Минусы – зум будет работать, но не очень адекватно.

Шлюзы, em, правильную резину и проценты я рассмотрю как-нибудь позже.

Краткий вывод

Верстать весь сайт в vh и vw имеет смысл только если у вас реально что-то сложное, с большим количеством просчитанных заранее взаимодействий.

Когда верстаете в px (всё же они проще), шрифт вполне можно указывать в rem, а отступы — в em.

👉 @htmlshit
#css #em #rem #vh #vw

#заметка дня

Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)

Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.

Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!

Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.

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

Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.

Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?

Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).

Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.

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

P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на vw+em, обратите внимание на https://uaz.ru/. Но делать так не надо! Зум у них сходит с ума, потому что на html шрифт указан в vw, о чём я говорил в предыдущей заметке. Но разработчики интересно использовали это в совокупности с @media aspect-ratio.

После поговорим о шлюзах и более сложной математике расчётов размеров шрифта и блоков.

#css #postcss #rem #vw #vh

Написала на css-live о цветах вообще и о цветах в css в частности
https://twitter.com/cssliveru/status/1367475154624925699

#codepen дня

Мне сегодня захотелось поделиться одной своей старой работой на WebGL: https://codepen.io/alinaki/pen/NWbBbEG

Это пульсирующая сетка из шестиугольников (гексагональная). Заодно и на мышь реагирует. Принимаю предложения по улучшению, перенесено как было.

Во всяком случае, благодаря этой работе я узнал о прекрасной библиотеке для составления подобных: https://github.com/vonWolfehaus/von-grid

Там же, кстати, есть ссылка на математическое описание шестиугольных сеток: https://www.redblobgames.com/grids/hexagons/

Учитывая, что они часто используются в играх – почему бы и нет.

#webgl #three #hexagonal

#ссылка дня

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

Если Твиттер вы не любите, всё любезно собрано на GitHub Gist.

#codepen дня

Когда-то воксели казались будущим компьютерной графики, но стали Майнкрафтом :)

И вот у вас есть уникальная возможность нарисовать двумерную картинку и экструдировать (добавить глубины) её в HTML-воксели, вот так вот неожиданно: https://codepen.io/jcoulterdesign/full/vYyzZdo

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

CodePen превращается из простой песочницы в настоящую социальную сеть со своими рок-звёздами и крутыми инструментами.

#ссылка дня

Казалось бы, что может быть проще 100%? Но это не совсем так.

От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.

В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents

Красиво, удобно, понятно.

#css #percent #width #height #position

#заметка дня

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

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

Звучит как что-то древнее. По факту же, скорее, вечное.

Считаем, что у вас имеются техническое задание, техтребование или хотя бы макеты в JPG. Ваш следующий шаг – декомпозиция. Разбиение на части.

На этом моменте сразу приложу пример черновой сметы: https://docs.google.com/spreadsheets/d/1YYx142Og8XSQMiZgITbqEUNYAnn8LMV0Sivsx6m2dz0/edit?usp=sharing

Доступ открыт по ссылке с возможностью комментирования.

Лично я любил декомпозицию покрупнее: по подпунктам каждого пункта ТЗ или же буквально по экранам (макетам). Покрупнее – из-за специфики деятельности на тот момент: требования к проектам быстро менялись.

Совокупность макета и пункта техзадания даёт гораздо более точную оценку, что логично. Колонка «Дни» всегда округляется в большую сторону. Если возникают сомнения в оценке пункта – оцениваете пункт отдельно на соседнем листе таблицы, не стесняйтесь.

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

Да, я осознаю, что упускаю из виду тот факт, что все работают с разной скоростью. У кого-то на условную шапку уйдёт час, а у кого-то два.

Но ребят, это и есть задача сметы, а конкуренцию никто не отменял.

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

Любое сомнение в оценке трактуйте в большую сторону. Всегда добивайтесь наиболее чёткого ТЗ или хотя бы максимального числа комментариев в смете.

Ну и вы всегда можете воспользоваться методом небезызвестного Бобука: возьмите своё время и умножьте его на π/2. Плюс две недели.

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

#работа #оценка #смета

#ссылка дня

Испанский стыд. Когда делает кто-то другой, а стыдно тебе.

Держите немного свежевыжатого: https://www.htmhell.dev/

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

Постарайтесь не найти там себя 😉

#html #css #htmhell

#фишка дня

Ну признайтесь, вы же тоже совсем не сразу узнали о том, что у background-repeat помимо, собственно, нескольких вариантов repeat и no-repeat есть ещё space и round?

А ещё что можно использовать двухпараметровый синтаксис для задания повторения по осям?

Во времена, когда есть MDN, такие вещи, конечно, лежат на поверхности: https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Но многие так и учат по примерам, как деды завещали.

Да, не всегда интерфейсы позволяют это применить, но иметь в виду всегда можно.

#css #background #image

#статья дня

Ну что, пришло время продолжить нашу CSS-in-JS сагу. Наконец-то пришло время поговорить о Styled Components.

Буквально – стилизованные компоненты. Можно дальше не читать.

Шучу. Там немного побольше.

#css #js #react #styledcomponents

#фишка дня

Не забывайте помогать своим пользователям вводить нужные данные. Используйте атрибут inputmode на полях ввода: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Особенно неприятно, когда просят ввести числа, а открывается полная клавиатура. Уж ввод e-mail пережить как-то можно 😊

#css #html #mobile #keyboard

#codepen дня

Анна Тюдор (Ann Tudor) – одна из крутейших разработчиков на CodePen. Я крайне рекомендую ознакомиться с её работами, если вам интересен CSS с математической стороны.

Она зачастую снимает видео о процессе создания своих работ, и вот случился казус: алгоритмы YouTube посчитали одно из недавних видео содержащим сцены сексуального характера. Ну на самом деле, миниатюру. Анна сообщила об этом в своём Твиттере.

Ну да, логично. Что может быть сексуальней CSS-искусства.

#css #art #youtube #video

#игра дня

GDPR и 153-ФЗ сделали из нас джедаев согласия с условиями cookies и обработки данных. Я лично создавал десятки различных окошек соглашений, утомительное и бестолковое занятие.

Но так ли ты хорош в отбивании претензий на личную жизнь?

Попробуй себя: https://cookieconsentspeed.run/