#статья дня

Полку шикарных визуализаторов прибыло!

Итак, помните мои мучения с игрой по кривым Безье? Или обучающий инструмент по SVG?

Так вот, теперь есть просто шикарное интерактивное руководство от Richard Ekwonye (я даже пытаться это транслитерировать не буду)! Вы только посмотрите, какава красата: https://blog.richardekwonye.com/bezier-curves

Каждый элемент на странице интерактивен, за точки можно подёргать, на элементы можно понажимать. Потрясающий уровень проработки, объяснены и основные принципы, и применение их в SVG.

В общем, если не почитать — то хоть зайдите подёргать за рычажки 🙂

#bezier #svg

#красивое дня

Если вам скажут, что разработка сайтов это не искусство — покажите этому... человеку вот такое: https://codesandbox.io/s/enter-portals-9m4tpc

Я уже минут двадцать просто залипаю.

А секрет-то "просто" в блендинге сцен... Даже документация есть: https://github.com/pmndrs/drei#meshportalmaterial

Вообще, обратите внимание на упомянутую библиотеку drei: это набор полезностей под react-three-fiber на которых можно собирать прекрасное.

#webgl #бородач

#статья дня

TIL, что браузерам можно указывать на приоритет сетевых операций: в fetch, в загрузке картинок, и в загрузке скриптов.

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

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

Или какие-то картинки чуть более важные, чем другие. Хотелось бы иметь возможность отложить их загрузку, даже если браузер хочет решить иначе.

Для этого у нас есть свойство priority в методе fetch, атрибут fetchpriority для изображений и async и всё тот же fetchpriority в загрузке скриптов.

А подробнее в статье Алекса МакАртура: https://www.macarthur.me/posts/priority-hints

Пока только в Chrome и уже очень скоро в Safari: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-178#Web-API

#fetch #priority

#статья дня

В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня".

И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации).

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

И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество!

Лигатуры, маленькие заглавные буквы, цифры в старом стиле, моноширинные цифры, надстрочные и подстрочные символы, половинная ширина...

И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: https://helpx.adobe.com/fonts/using/open-type-syntax.html

Есть на русском: https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html

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

Всем st, котаны!

#opentype #font #features

#ссылка дня

Компании и корпорации предоставляют огромное количество инструментов для разработчиков. В том числе — бесплатных.

Это, впрочем, позволяет некоторым продуктам и решениям абьюзить систему, но суть пока не в этом.

Парни с ресурса https://free-for.dev/ ставят своей задачей предоставить максимально полный список SaaS-проектов, бесплатных для разработчиков или предоставляющих бесплатное использование на определённых условиях.

Список нарочно ограничен сервисами, иначе был бы практически бесконечен 🙂

Конструкторы, шрифты, хостинг, CDN, платформы для микросервисов, лоу-код и ноу-код решения.

В общем, хороший список. Кто-то вывалил все свои закладки 🙂

 #saas #paas #free

#видео дня

Так, котаны. Стартовала премьера документалки про TypeScript! Вот прямо щас началось.

Идем и смотрим, ага. Кто не смотрит — тот не котан.

https://youtu.be/U6s2pdxebSo?si=fUdbfmInzIOdMEd0

#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.iss.onemo и хуки 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.iss.one/htmlshit?boost

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

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

#игра дня

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

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

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

https://flukeout.github.io/

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

#css #game #diner #flex #grid

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

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

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

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

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

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

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

#фишка дня

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

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

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

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


animation: 1s paused awesomeMixVol1;


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

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

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

#css #keyframes

#статья дня

Не так давно мы все с вами узнали, что многие дизайнеры по миру открывают для себя геометрию для пятого класса с нескрываемым удивлением: https://t.iss.one/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 вы можете попробовать по ссылке.