#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

#ссылка дня

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

Теперь же Скотт снова нарисовал подобный комикс. В доступной форме объясняющий людям, почему им не нужен Chrome и как он сделал мир хуже.

Все просто: https://contrachrome.com/

Хорошее чтиво на вечер.

#chrome #google

#статья дня

До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?

Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/

Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)

#cmd #terminal

#фишка дня

Как проинспектировать элемент, появляющийся только при наведении мыши или исчезающий после какого-то промежутка времени?

1. Открыть devtools
2. Инициировать появление элемента
3. Нажать F8, чтобы поставить исполнение на паузу
4. …
5. PROFIT!!11

#chrome #devtools

#статья дня

С 54000 звёзд на GitHub до нуля за одно мгновение?

HTTPie расскажет и покажет, как!

https://httpie.io/blog/stardust

На самом деле, всё до обидного просто: владелец репозитория по-ошибке сделал его приватным.

Мораль? Будьте внимательны.

Впрочем, ребята уже набрали обратно 18000 звёзд. Свежих, с пылу с жару. Что, в общем, хорошо.

Заодно в статье предложены интерфейсы, предполагающие предотвращение подобных ситуаций.

Есть перевод на русский, кстати: https://habr.com/ru/company/skillfactory/blog/662155/

#github #rest #api #httpie #tools