#ссылка дня

Казалось бы, что может быть проще 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/

#статья дня

Я много раз начинал и забрасывал статью о том, как справляться с рутиной. Но писать статью — это не в чате «деда» включать. Всё-таки важная штука — аудитория.

Впрочем, здесь мне помогут Александр Беспоясов, Вадим Юмадилов и Андрей Романов. Фамилия Беспоясова должна быть вам знакома – он отметился в Солидбуке.

Итак, какие вопросы разбираются в их лонгриде Фронтенд — это не больно:
— Как решать задачи, а не писать код
— Как не умереть в пиксель-перфекте
— Как вести диалог с дизайнерами

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

И обязательно обратите внимание на прикреплённые к статье материалы. В них есть всё.

#work #frontend #psychology

#фишка дня

Глядите-ка, Chrome DevTools теперь показыают колорпикер на пользовательских свойствах с цветом!

#chrome #devtools #css #color

#фишка дня

Иногда возникает задача поставить перевод строки после строчного (inline) элемента. Без <br/>, без преобразования элемента в блочный.

На помощь приходят псевдоэлементы.

Значение свойства content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.

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

Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием <br/>, но мы уже решили, что он лишний.

#css #tricks #unicode #after #newline

#ссылка дня

В мире явно не хватает ресурсов с иконками. Особенно с SVG-иконками. Держите ещё один: https://www.noscriptrepo.com/

Все изображения свободные и/или бесплатные (естественно, уважайте лицензии). Удобный поиск, коллекции. Иконки можно сохранять (в local storage, аккаунт не нужен).

#noscript #icons #icon #catalog

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

Псевдо-класс :is штука очень и очень новая (пользователи Firefox в этот момент презрительно хмыкают).

Но она уже в релизах всех основных браузеров!

Вы только представьте, теперь можно писать так:

.content :is(h1, h2) {}

...даже в querySelector! Больше никаких глупых ошибок синтаксиса, когда вы забыли два раза написать селектор.

Горячо нами любимый Ван Дамм, который Брамус, делится тремя вещами, которые обязательно нужно помнить при работе с :is:

1. Он прощает ошибки
2. Его специфичность равна специфичности самого «тяжёлого» аргумента.
3. Он не работает с псевдо-элементами. Пока.

Сама статья:
https://www.bram.us/2021/03/19/three-important-things-you-should-know-about-css-is/

Ну и вдогонку — калькулятор специфичности, пусть будет. Правда, о существовании :is он пока не знает, зато вот :not ведёт себя точно так же.

#баг дня

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

Да, IE < 9 не поддерживал больше 4096 правил в одном файле. Это уже много, но можно было подключить второй файл и продолжить.

Так вот, к багу дня. В Chrome есть проблема восьмилетней давности: https://bugs.chromium.org/p/chromium/issues/detail?id=481273

Перевожу: если число селекторов в строке одной композиции больше 4096, «лишние» — проигнорируются. Пример: http://jsfiddle.net/WdyBE/58/

Я понятия не имею, зачем это чинить. Разработчики Chrome, похоже, тоже.

#css #limit #chrome #ie

#заметка дня

Если у вас есть селектор с префиксом и без префикса, например :-webkit-autofill и :autofill или селекторы с разными префиксами (-moz-, -webkit-), никогда не пишите так:

:-webkit-autofill, :autofill {}


Весь селектор станет невалидным. Нужно или разделять их на два разных блока, или же использовать :is:

:is(:-webkit-autofill, :autofill) {}

К сожалению, с псевдоэлементами такое (:is) не прокатит. Так что пишите ваши правила для, например, ::-webkit-progress-bar и ::-moz-progress-bar раздельно.

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

#css #is #prefix #vendor

#фишка дня

Если вам знаком не только JavaScript, а ещё один из языков C-семейства (привет, родной универ), то наверняка вы использовали библиотечную функцию printf:

printf (“It’s %d %s", 10, "here!");

Занимается она тем, что выводит форматирует передаваемые ей аргументы согласно заданному правилу. Нужно вывести целое десятичное число? Указываете %d. Строку? %s. На простом языке – это плейсхолдеры.

Так вот, наша любимая консоль тоже поддерживает подобные спецификаторы формата!

%s - строка
%i or %d - целое число (будет преобразовано)
%f - число с плавающей запятой
%o - выводит элемент DOM
%O - выводит JS-объект

И вишенка на торте: %c позволяет передать CSS выводимому тексту! В формате инлайн-стилей.

#printf #console #js

#статья дня

Вдогонку к различным обучающим играм и конструкторам (например, https://cssgridgarden.com/), рекомендую ещё один полезный ресурс: https://fjolt.com/article/a-guide-to-css-grid

Это статья про CSS Grid, но с интерактивным генератором кода. Поэтому, вполне логично добавить хэштег #инструмент.

Довольно кратко, идеально для быстрого старта.

#css #grid #generator

#баг дня

Есть очень интересное свойство, из рабочих черновиков: overscroll-behavior. За что оно отвечает?

Ну, например, есть у вас страница и диалог чата. Вы скроллите диалог, доходите до конца ленты — и страница тоже начинает прокручиваться. Не очень приятно. И это можно решить, установив на диалог правило overscroll-behavior: contain.

А вот если установить overscroll-behavior: none; на html, можно запретить «pull-to-refresh» («потяните чтобы обновить»).

Сейчас будет сложно.

Баг дня в том, что спецификация здесь недостаточно чётко описывает взаимодействие прокрутки документа и доступной области экрана (вьюпорта, viewport).

Все остальные, относящиесяк к скроллу правила (scroll-padding, scroll-snap-type, scroll-behavior), пробрасываются (propagate) из документа во вьюпорт только из :root-элемента. Т. е. из html.

В итоге Safari и Chrome ожидают установки overscroll-behavior на body. Но это неправильно и скоро будет исправлено.

В общем, ситуация такова: ставьте overscroll-behavior и на html и на body. Тогда в будущем всё будет хорошо.

#css #html #scroll #overscroll

#codepen дня

Модалка на чистом CSS? Да ещё с оверлеем? Реальность!

https://codepen.io/bramus/pen/KKaPJdr

Ага, Ван Дамм. Опять.

Реализована путём вкладывания dialog в details-summary блок. Оверлей же — реализован классическим способом, фиксированный псевдоэлемент.

Прекрасно.

#css #modal #details #dialog

#ссылка дня

Ищете анимированных эффектов появления? Их есть у меня!

https://www.transition.style/ — библиотека эффектов появления/скрытия элементов, в основе которой лежат clip-path-анимации. На каждый можно сослаться, чтобы продемонстрировать коллеге.

И естественно, код можно настроить и тут же быстро скопировать.

#css #animation #library #clip #clippath

#статья дня

…я не говорю, что все поголовно вешают свои обработчики кликов на div. Но наверняка многие до сих пор используют ссылки (спасибо дизайнерам за унификацию). Или просто любой попавшийся элемент.

Не надо так.

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

1. Сбросить стили браузера
2. Унифицировать с a
3. Добавить активных состояний (:focus и :active)
4. Правильно обработать клавиатурную навигацию (:focus-visible) дабы не раздражать нежные фибры души дизайнеров, но уважать остальных людей.

В общем, к делу. Сама статья: https://fvsch.com/styling-buttons

И готовый результат (я переложу его из статьи в CodePen, добавив стили поддержки :focus-visible): https://codepen.io/alinaki/pen/LYxbvOw

#css #button #focus #focusvisible