#ссылка дня

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

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

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