#фишка дня

Помните я недавно рассказывал о том, что label может быть прикреплён к button?

Вот ещё забавный трюк: курсор мыши над лейблом вызывает :hover на прикреплённом поле ввода. Пока не знаю, как применить, но интересно.

https://codepen.io/Mamboleoo/pen/mdOrqdq

#label #css #input

#статья дня

Кому действительно суровых будней верстальщика? Статья от подписчика!

Наш давний друг @mazya столкнулся с неординарной проблемой, которая казалась достаточно простой: кнопка с градиентной рамкой.

И по всем заветам правильного подхода к решению вопросов он не стал жмотить решение и написал целую статью об этом: https://telegra.ph/Gradientnye-bordery-na-uporotyj-lad-02-07

Статья дополняется.

По-моему, весьма оригинально.

Приглашаю обсудить возможные улучшения к нам в @htmlshitchat

#svg #css #buttons #gradient #mask

#codepen дня

#css #pattern

Такую милоту можно только на 14 февраля и выдавать. Хотя за ней стоит самый настоящий матан. Интереснейшие мозайки (паттерны, если хотите): https://codepen.io/yuanchuan/pen/xxEXwZw

Вы можете обратить внимание на использование веб-компонента CSS-doodle. Я тоже заинтересовался, полез в настройки кодпена и… и офигел. Вы только посмотрите на это!

https://css-doodle.com/

Целый инструмент для генерации паттернов. Документация и примеры кода выше всяких похвал.

На его основе создан https://tabbied.com/

Правда, результаты работы Tabbied очень напоминают Экспресс-дизайн 😅

Вообще, весьма круто. Пару вечеров убить точно стоит.

#статья дня

Я давно обещал написать статью о Styled Components, особенно когда число вопросов превысило разумные пределы. Но так получилось, что нельзя написать о SC без того, чтобы не объяснить, что такое CSS-in-JS вообще и как мы дошли до жизни такой. Подсказка – в иллюстрации к посту.

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

И как всегда, приглашаю обсудить в @htmlshitchat

P. S. обновлено, кнопка не работает, ибо домен решено не оплачивать. Работают ссылки.

#css #js #cssinjs #jss #styledcomponents

#codepen дня

В @htmlshitchat прилетел прекрасный пример работы с пользовательскими свойствами.

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

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

Итак, немного школьной математики и тригонометрии, немного самописной библиотеки KICSS – и вот у вас по экрану проезжает машина, показывающая прогресс прокрутки.

P. S. CodePen, сам сервис, плохо свёрстан для мобильных устройств и неправильно считает высоту, поэтому пройти стоит по этой ссылке: https://codepen.io/pavlovsk/details/YzppeYX

Такой вид называется “Details view”.

#видео дня

В CSS уже достаточно давно существует возможность выполнять простые арифметические действия, используя calc. Ещё есть min, max, minmax. И их используют не только для расчёта блоков, но и, например, для размера шрифтов в зависимости от ширины экрана. А в совокупности с пользовательскими свойствами…

Но это всё невозможно правильно и легко использовать без понимания типов данных в CSS (вот неожиданный поворот, да?).

Встречайте доклад Софии Валитовой из вКонтакте: https://www.youtube.com/watch?v=PoWpkLeJnBA

Он вышел достаточно давно, но актуальности ни капли не потерял.

#css #math #calc

Несколькими днями ранее, в одном из чатов, зашла речь о чекбоксе с тремя состояниями. И все решения были на JavaScript. Я решил попробовать сделать на чистом HTML и CSS. Вроде, вполне так рабочий вариант -)

Смотреть тут -> CodePen

#html #css

#находка дня

Я нашёл свою первую коммерческую вёрстку! Не помню всех условий заказа, но это было что-то странное.

2006 год!

До этого я в 2002 в школе курсовую делал, это не было коммерцией.

http://sampo.ru/~alinaki/rabbit/

В 2006 году был вовсю IE5.5 в ходу, не было понятия адаптивности и я почему-то считал, что если элемент один – к нему обязательно обращаться по id.

А ещё сломался скрипт тултипа 😕

#фишка дня

На мобильных устройствах 100vh работает совсем не так, как хочется: значение включает в себя панели браузера. Но решение есть! Несколько.

Когда-то один только этот пост принёс мне не один десяток подписчиков. Пришло время обновить. Виталий (канал Просто Разработка) принёс из Твиттера Никиты Голубова новое решение и оно прекрасно работает!

Естественно, реальность немного сложнее, чем иллюстрация, но это уже большой шаг вперёд.

#css #100vh #viewport #height

#фишка дня

Да, кстати. Раз уж мы заговорили о высоте видимой области экрана (viewport), то почему бы заодно не решить одну старую проблему.

Если вы верстали под мобильные устройства, наверняка возникал вопрос – как посчитать высоту экрана после открытия клавиатуры? Ведь window.innerHeight просто даёт полное значение.

А всё просто – на помощь приходит Visual Viewport API. Как именно? На иллюстрации к посту весь код :)

Подсмотрел в Твиттере Rik Schennink

#css #viewport #height #mobile

​​#ссылка дня

Говорят, Apple уберёт TouchBar в будущих моделях ноутбуков, потому что он не прижился. Но нынешние ноутбуки-то пока никуда не денутся.

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

Почему я именно сегодня эту тему поднял? Да как-то так вышло, что тут неожиданно иллюстрация к посту завирусилась. Четыре года пролежала!

А вот, собственно, и исходники виджета: https://github.com/pahund/electron-touch-bar

#apple #touchbar #electron #js

#фишка дня

Зафиксировать заголовки таблиц ещё никогда не было так просто. В статье на CSS-Tricks объясняются принципы работы этого решения: мы фиксируем все заголовочные ячейки (th) таблиц и даём им лишний уровень z-index, чтобы они были поверх обычных ячеек; а чтобы при горизонтальном скролле левые th не перекрывались правыми – их поднимаем ещё выше.

Впрочем, это решение давно с нами: https://codepen.io/estelle/pen/MNwVxW

#css #sticky #table

​​#урок дня

Дэн Абрамов в своей статье о хуках в React говорит нам: «Не врите Реакту о зависимостях хука, указывайте все».

ESlint вторит ему: Этот код нужно исправить.

Но я же умный и без сопливых знаю точные зависимости, поэтому:
// eslint-disable-next-line react-hooks/exhaustive-deps

Мой UI тем временем ведёт себя вот так…

P. S. обратили внимание на ссылку с подсветкой текста? Завтра будет фишка по этому поводу.

P. P. S. Перевод статьи доступен на Хабре, но учтите, что материала там минут на сорок, на любом языке: https://m.habr.com/en/company/ruvds/blog/445276/

#react #hooks #useeffect #eslint

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

Вы могли заметить, что 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