#библиотека дня

Скучаете ли вы по тому времени, когда новые JS UI- и не очень фреймворки появлялись каждый день?

Тогда я вам принёс!

https://corset.dev/

Вы ведь так хотели объявлять UI-взаимодействия в CSS-стиле, правда?

Куда уж декларативней…

Но на самом деле, это весьма интересный концепт связывания (биндинга) DOM и действий.

#css #js #ui #framework

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

Знаете же о существовании утилиты less в Linux? Быстрый просмотр файлов.

Но текстовых файлов может быть недостаточно. С JSON тоже хочется работать удобно, находясь в терминале.

И тут на помощь придёт jless!

🌍 https://jless.io/
🐙 https://github.com/PaulJuliusMartinez/jless

Написан на Rust, имеется во многих пакетных менеджерах и в Homebrew.

Очень удобно 👍

#rust #cli #json

#ссылка дня

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

Поэтому, было весьма интересно найти роадмап (карту знаний и умений) по этой теме: 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

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

1) Google Pay. Приходится теперь брать карточки с собой и вспоминать пинкоды. Оплата, одна большая проблема.
2) Spotify не продлить подписку
3) Strava - не работает
4) Занимался на Cambly - не оплатить. + Подорожало ~ в 3 раза .
5) JetBrains - остановил продажи и теперь не понятно как продлить лицензию
6) Netflix - не продлить подписку.
7) GoDaddy - прекращает обслуживание доменов.
8) Paypal - не работает
9) Upwork - приостанавливает работу, хотят как выводить деньги уже не понятно.
10) Hetzner - проблемы с оплатой.

Самые неприятные, это последние 3 пункта. Не прининять валюту, не расплатиться.
Т.е поделать, что-то за доллары на стороне уже не получится, а с таким курсом было бы кстати.
И за кластер не могу заплатить. Дима выше писал, что возможны swift-переводы, но я пока только переписываюсь с тех поддержкой.
Хорошо, что теперь IaC + сегодня сниму бэкапы 📦

Жду отключение хрома и пикселя 🥸

#codepen дня

Огромных летающих 3D-заголовков заказывали?

А я всё равно принёс!

Игры с перспективой и 3d-преобразования творят чудеса, конечно.

https://codepen.io/amit_sheen/pen/BaJmWWj

#css #3d #parallax

#фишка дня

Некоторые люди до сих пор отлаживают фронтенд через console.log(). Ещё более упоротые — через alert().

А чем верстальщики хуже? Давайте отлаживать через аутлайны!!

Не, ну правда: https://dev.to/gajus/my-favorite-css-hack-32g3

Иногда даже полезно. А главное, сниппет выглядит шикарно.

P. S. не отлаживать, а откладывать.

#css #debug

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

Снова фигнюшечки для SVG подъехали: https://svgdoodles.com/

Конкретно это — коллекция “вручную” нарисованных линий, кругов и стрелок, чёрточек…

Но на ресурсе есть ещё ссылки на генератор SVG-градиентов и весьма забавных фонов в виде волны.

#svg #generator #gradient

Блокировали, блокировали, да невыблокировали­

В Шри-Ланке правительство ввело запрет на использование соцсетей из-за массовых протестов граждан.

Дошло в результате до того, что племянник президента запустил VPN и написал в Твиттере, что блокировки «совершенно бесполезны».

Спустя менее 16 часов запрет сняли.

Глава интернет-регулятора Шри-Ланки подал в отставку сразу после вступления в силу приказа о запрете.

Такие дела.

@applespbevent #в_мире #vpn

#codepen дня

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

Давайте исправим положение и сделаем что-то насущное.

Например, сымитируем табло в аэропорту… С его задержками смены линий при смене языка.

Поехали: https://codepen.io/alinaki/pen/ZEaOdKq

Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.

#css #grid #animation #scss

#ссылка дня

О проекте Веб-стандарты вы все наверняка знаете. И о сайте, и о статьях, и о подкасте. Ну и фигура Вадима Макеева в Рунете не последняя.

Так вот, у них во всех статьях и обучающих материалах используется один словарь: https://github.com/web-standards-ru/dictionary

Без единообразия в терминах разработка была бы весьма сложной, согласитесь.

Естественно, это не единственный подобный словарь. Есть ещё как минимум у каждого курса ну или вот например ребята из доков реакта постоянно работают над своим: https://github.com/reactjs/ru.reactjs.org/issues/4

#web #dictionary

#фишка дня

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

Пока только Safari 15.4 поддерживает полностью, но Chrome/Blink давно уже давали эту возможность “за флагом“.

Думаю, будет целая серия таких постов с приятными и удобными фишками нового селектора. Почему бы и нет.

#css #future #has

#статья и #codepen дня

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

И нет, я не про стилизацию сейчас. Например, охота вам сделать… калькулятор. Можно ли?

Можно: https://codepen.io/serg-by/pen/KKZBxpR?editors=0100

Так что counter-increment + :checked — лютая мощная дичь. Не то чтоб я рекомендовал сходу переписывать ваши калькуляторы пластиковых окон и автомоек на это, но иметь в виду очень даже стоит.

Найду примеры с пользовательскими свойствами — тоже скину.

А пока, собственно, вот: https://codersblock.com/blog/checkbox-trickery-with-css/

#css #checkbox #counter

#видео дня

Когда я стал работать в нормальной компании, а не в веб-студии, я внезапно узнал, что оценка задачи происходит в баллах. «Стори поинтах», story points.

И стори поинты это не часы. Это некая условная оценка сложности. И выражается, как правило, в числах Фибоначчи: 1, 2, 3, 5, 8… Близко к экспоненциальной зависимости.

Если кому интересно, статей на эту тему много. Но дальше происходит самое интересное.

Оценка сложности не нужна :) Не в том смысле, что все задачи одинаковы, нет. А в том смысле, что не имеет особого смысла их делить.

Очень часто возникает ситуация, в которой все задачи на спринт оцениваются в 3. Или даже, что чаще, в 5. Ну просто потому что. Потому что так команде удобнее.

И вот, например, доклад именно на тему оценки сложности: https://m.youtube.com/watch?v=QVBlnCTu9Ms

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

Не болейте.

#agile #teamlead #scrum

#codepen дня

Я же обещал продолжение заглядывания в будущее с псевдоселектором :has, помните?

Так вот, если объединить has и контейнерные запросы, можно создавать тупо раскладку мечты: делать шрифт больше в блоке, когда картинки нет, и наоборот.

Для самых умных: да, через + тоже конкретно этот эффект прекрасно достигается :) Но полифилл на контейнерные запросы всё равно будет нужен.

https://codepen.io/una/pen/oNpoqGp

#css #future #has

#фишка дня

Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).

Вот только есть нюанс.

Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?

Использовать селектор атрибута: [readonly].

Пример: https://codepen.io/elad2412/pen/wvpmjGR

Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.

Скелетон вернётся с новыми подробностями о фронтенде завтра.

#css #html #input

#видео дня

Давно стоило и пересмотреть это видео, и выкатить в канал.

Многим из вас знакома концепция DRY: Don't Repeat Yourself. Вот только многие доводят её до абсурда, плодя абстракцию за абстракцией и пытаясь объять необъятное (сам таким был).

Но есть и другой подход, буквально — WET.

Write Everything Twice.

Да-да, пиши-повторяй. Стоит ли тратить время на объединение разных сущностей до того, как это вообще понадобится, или лучше потратить его на закрытие бизнес-потребности?

И вот об этом доклад Дэна наше всё Абрамова на конференции Deconstruct'2019.

Есть транскрипт, кстати: https://www.deconstructconf.com/2019/dan-abramov-the-wet-codebase

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

#video #conference #dry #wet

#статья дня

Немного восьмибитности не желаете?

Я не так давно выкладывал целый сайт в стиле NES, а тут на глаза попалась статья о том, как сделать скруглённые уголки на блоках немного менее… кхрм, скруглёнными.

В стиле восьмибитных приставок: https://lukeb.co.uk/blog/2022/01/17/pixelated-rounded-corners-with-css-clip-path/

На самом деле в статье очень много информации о том, как использовать clip-path, рекомендую.

Ну и чтобы совсем куце не было, давайте ещё восьмибитных прелоадеров на чистом CSS: https://codepen.io/t_afif/full/PopjYgx

#css #clippath #8bit #preloader

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

Предположим, тебе заказали разработку Flutter или React Native приложения. Да даже Cordova или Ionic. Предположим, ты даже справился. Настало время собирать под iOS. И тут облом. Нужна macOS.

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

А можно воспользоваться Docker и вот этим прекрасным репозиторием: https://github.com/sickcodes/Docker-OSX

Куча рецептов прямо в Read.me, куча полезных скриптов. В общем, надо брать и пробовать.

Отпишитесь потом о результатах, ок?) Тоже при случае попробую. Прост мак-то есть)

#docker #macos

#видео дня

Если на кого и стоит подписаться в этом вашем ютубе (ну, помимо Виталия Киренкова, конечно 😜 ) — это ребята из команды Keyframers.

Последнее время они редко выкладывают стримы, но и того, что есть — очень даже хватает.

Кому красиво налипающих бумажек? Их есть: https://www.youtube.com/watch?v=Fdq95qVG7F4

Или техника FLIP, позволяющая достичь высокой производительности анимаций: https://www.youtube.com/watch?v=aDmmj4a_7iI

Ещё, пожалуй, стоит Юрия Артюха упомянуть. Но он по WebGL: https://www.youtube.com/user/flintyara

#youtube #css #animate #webgl

#фишка дня

Есть такая новомодная штука в браузерах современных, Picture-in-picture (как на телевизоре твоего бати). Так вот.

В общем, любое видео, вставленное просто через тег video, может быть переведено в PiP-режим, если иное не указано в настройках.

Ладно, если это контент. А если фон?

К счастью, на все есть атрибут! И название ему disablePictureInPicture.

Правда, в Firefox чот не работает :(

https://w3c.github.io/picture-in-picture/#disable-pip

Mozilla решили, что они выше этого: https://bugzilla.mozilla.org/show_bug.cgi?id=1611831

#html #video