#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform #бородач

#статья дня

Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?

Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!

Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:

Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/

И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/

Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.

Прекрасные инструменты, целый новый мир открывают.

#fonts #tools #бородач

#шпаргалка дня

Настало время пошатнуть величие нашего властелина гридов! Если ты не знаешь, кто это — ты просто не в чате.

Одинаковые колонки на гридах это тебе не 1fr до бесконечности повторять. Там есть свои мерзкие нюансы.

Вес Бос попробовал собрать их все в кучу в одной большой шпаргалке: https://codepen.io/wesbos/pen/xxmPXqd

Как видим, все очень просто и непросто одновременно :( Но разобраться можно.

И заодно немного о minmax: https://dev.to/fasterandworse/css-grid-minmax-behaviour-quirk-1p6h

#css #grid

#заметка дня

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

А что, это же так естественно и удобно, пространство имён не засоряется...

Нет! Нет и ещё раз нет. Каждый раз, когда происходит ремаунт родителя, будет происходит и ремаунт дочернего компонента.

Чем это чревато? Ну, например, объявленный вами инпут будет, как минимум, терять фокус.

Вообще, у Алекса Сидоренко, на чей твит выше я сослался, огромное количество полезных советов о внутрянке React. Крайне рекомендую, котаны. От души.

#react #rerender #antipattern #бородач

#статья дня

Один из самых популярных вопросов на собеседовании, это мемоизация.

Естественно, чаще всего вопрос задаётся в контексте React. Ну уж так повелось почему-то, хотя тема гораздо обширнее.

Три столпа мемоизации в React это React.memo и хуки useMemo и useCallback. Ну и вопрос в том, а стоят ли они того?

Как правило ответы стандартные: мы проигрываем в памяти и процессоре при инициализации, но выигрываем в повторном обращении. И дальше прочее веселье с тем, а как посчитать performance impact и так далее.

А вот парни из Coinbase решили, что не надо считать. А надо сразу оборачивать всё, что угодно, в memo, мол, влияние на инициализацию минимальное, а тратить время на предварительные расчёты неохота.

Ну что же, им слово тогда: https://attardi.org/why-we-memo-all-the-things/

Статья небольшая, выводы стоят рассмотрения.

P. S. как вам новое превью к постам, котаны? Думаю, сверстать его для автоматизации и выложить таймлапс или сделать стрим или типа того...

#react #memo #performance

#ссылка дня

Учиться на чужих ошибках достаточно сложно, чаще всего приходится на своих. Но представьте себе, что ошибка, совершённая лет двадцать назад будет вас преследовать всю жизнь там, где вы этого меньше всего ждёте.

А вот создатели CSS таких ошибок наделали достаточно много. Есть даже список: https://wiki.csswg.org/ideas/mistakes

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

Ну ок, не всё в этом списке стоит квалифицировать как ошибки. Что-то просто можно было сделать лучше, а что-то вообще выстрелило случайно.

Вот краткий список того, что там есть:
1. white-space: nowrap должен был быть no-wrap
2. box-sizing должен был border-box (прим. больно, да?)
3. border-radius должен был называться corner-radius (прим. правда что, какое отношение к границе оно вообще имеет?)
4. взаимодействие flex-basis и width/height слишком сложное (прим. потребовалось две версии флексбокса чтобы всё равно сделать сложную хрень)
5. нынешнему :empty стоило бы именоваться :void, а сам :empty должен был бы игнорировать пробелы (и вот это, кстати, уже исправлено в спецификации!)

Вообще, почитайте. Там много интересного, очень круто.

#css #specification #бородач

#просьба дня

Я знаю, что сторисы в телеге всех раздражают. Но ещё я знаю, что:
1. Вам заходит формат #фишка дня
2. Телега собирается вводить систему рекомендаций

Потому, хоть вас, наверняка, и задолбали этим, я прошу, котаны, бустануть канал: https://t.me/htmlshit?boost

Не сторисов ради, а рекомендаций для.

Но, возможно, #фишка дня в формате сторис вам и зайдёт.

#игра дня

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

Я всегда знал, что вы у меня самые крутаны! ❤️❤️❤️

Итак, игра дня сегодня — CSS Diner: подберёшь стили, голодным не останешься 👹️️️️️️

https://flukeout.github.io/

32 уровня тарелок, огурцов и помидоров. На ночь, наверное, не стоит.

#css #game #diner #flex #grid

Открыта регистрация на 13-й карьерный форум для студентов в сферах IT и биохима!

Участие в форуме BreakPoint — это возможность не только построить карьеру мечты, но и стать лидером в мире технологий и инноваций.

⚡ Что тебя ждёт?
— Мощная и трендовая программа от экспертов; поговорим о метавселенных, клонировании, использовании чата GPT и AI.
— Шанс попасть на стажировку в партнерскую компанию;
— Решение актуальных бизнес-кейсов от компаний-лидеров рынка;
— Воркшоп, кейс-чемпионат и выступление нашего генерального партнера - Сбербанка!
— А также, закрытый чат единомышленников, эффективный нетворкинг и ярмарка вакансий.

⚡ Как попасть на BreakPoint?
Очень просто, нужно заполнить форму регистрации!
Удели ответам особое внимание, ведь от этого зависит твой результат отбора

📅 Когда?
28-29 Октября
📍 Где?
Москва

Участие в форуме бесплатное!
Готов стать лидером технологических изменений?
Тогда скорее регистрируйся:
https://t.me/BreakPointForum_Bot

*Биохим включает в себя следующие направления: нефтегаз, фармацевтика и биотехнологии

#фишка дня

Короче! Вы знали, что в CSS де-факто существуют миксины? И уже много-много лет...

И это анимации aka @keyframes.

Они ведь сами по себе самый что ни на есть настоящий миксин.

Просто подумайте, что может содержаться в @keyframes? Да в общем-то, всё... А какая запись? Да вот такая:


animation: 1s paused awesomeMixVol1;


И вот оно вместе кликает: https://codepen.io/alinaki/pen/eYjexgj

Попробуйте окно уменьшить 💥

Как вам такое? Нестинг завезли, скоупы скоро будут, красота же.

#css #keyframes

#статья дня

Не так давно мы все с вами узнали, что многие дизайнеры по миру открывают для себя геометрию для пятого класса с нескрываемым удивлением: https://t.me/htmlshit/1939

Но мы тут, конечно, не шеймингом заниматься пришли. А серьёзным делом. Поэтому глядите, чего я вам принёс: неожиданно хорошую статью с неожиданного ресурса!

Итак, на VC: Подбираете радиус скругления на глаз? Эти 5 правил помогут скруглять углы как сеньор

TL;DR

1. Внутренний угол связан с внешним: это правило буквально повторяет пост выше.

2. Кружок внутри, угол снаружи: тут немного об оптическом выравнивании (опять же, пост на эту тему).

3. Применяем сглаживание: это про яблочный squircle.

4. Радиус дружит с текстом.

5. Проверка обводкой: по факту, это визуальное доказательство правил 3 и 1.

Этой бы статье да иллюстрации от Шадида...

В любом случае, рекомендую. Сможете спорить с дизайнерами имея опору под ногами.

#css #design #radius

#фишка дня

Используешь сложные CSS-селекторы в JS-коде? Ошибка!

Не используешь при этом CSS.escape? Фатальная ошибка!

Самый яркий пример когда это может пригодиться: useId в React выдаёт код, который непригоден для прямого использования в JS. А ты это потом используешь, да-да.

В общем, смотрим на картинку, просвещаемся.

Ну и дублирую пример текстом, конечно:

document.querySelector(`[href=${CSS.escape('@')}]`); // "[href=\@]"

Так-то. Спасибо Стефану Юдису за эту находку.

#css #escape

Пользователи Angie получили возможность мониторить состояния веб-сервера через визуальную консоль

С новыми версиями у пользователей Angie появилось сразу несколько возможностей организовать мониторинг состояния веб-сервера. Один из них — Console Light — легковесная визуальная консоль для мониторинга активности в реальном времени. Она отображает ключевые показатели нагрузки и производительности сервера.

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

К слову, а демо-версию Console Light вы можете попробовать по ссылке.

#новость дня

Google сегодня 25 лет! По этому поводу у них дудл с антологией логотипов. Не так уж и много поменялось.

Давайте перепись олдов и прочих нонконформистов в комментариях: кто чем пользовался до гугла или хотя бы до прихода гугла в вашу страну?

Я помню, на Апорте искал песни, простите, Арии году так в 2000. Гугла в РФ тогда не было.

Забавно, что российские Яндекс, Рамблер и Апорт появились раньше. Да и вообще по миру Google был очень не первый.

#фишка дня

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

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

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

Не пишите лишнего, котаны!

#http #html #trick

#ссылка дня

Не так давно я обновил логотип канала, до того момента это был символ пустого фрагмента, </>, выражаясь языком React.js, на фоне логотипов кучи Веб-технологий, с которыми я работал.

Нарисовал его бывший коллега, а потом я много раз пытался обновить и освежить. Но терялась душа 🙂 Так что обновлённую версию вы могли встретить разве что в рекламе канала, многие по ней же подписались.

Так вот, я это к чему. Когда это всё происходило, не было ресурса https://icones.js.org/

По его названию можно было бы подумать, что там одни только иконки. Но нет!

Там не только собраны иконки под открытыми или свободными лицензиями, но и изображения флагов, эмодзи и логотипов различных технологий, ресурсов, программ и компаний!

А я потратил тогда кучу времени на поиск логотипов и приведение их в приличный вид... Аж обидно.

Но вот вам, котаны, берите и пользуйтесь 🙂

#icons #logos #emoji #flags

#фишка дня

Я недавно писал пост про реализацию панелей с изменяемым размером. Ну как в редакторах или на том же кодпене: https://t.me/htmlshit/2211

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

Да, многие уже догадались, что речь идёт о свойстве resize: https://codepen.io/alinaki/pen/MWZXzMY

Интересный момент — если элемент блочный, overflow обязательно должно быть hidden.

«Не, погоди, а где панели-то?»

Терпение! Глядите, что придумал небезызвестный Jhey: https://codepen.io/alinaki/pen/zYyaMQB

Суть в том, что создаётся грид:

  grid-template-columns: auto 1fr;

И в первую из панелей вставляется элемент resizer, с включённым нужным нам свойством.

А вот дальше натурально магия: браузеры не дают возможности стилизовать уголок-ручку, за которую надо дёргать, а она очень маленькая.

Джей вышел из ситуации интересным способом: заскейлил элемент в несколько раз и примерно на месте ручки поместил псевдоэлемент. А чтобы остальной блок не мешался — обрезал его через clip-path.

По-моему, это гениально. И работает фактически везде!

#css #trick #resize

#заметка дня

Чем отличаются auto-fit и auto-fill в гридах?

Отвечает Александр Друзь.

Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)

Так в чем же разница, словами? :)

При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.

В общем, всё довольно просто.

#css #grid #repeat #бородач