#ссылка дня

Что-то затянулась вечеринка, я еще вчера это обещал.

Что делает дизайн-систему — завершённой? Я бы даже сказал, цельной?

Сколько последних штрихов нужно, чтобы откинуться на спинку кресла и сказать: «Вот теперь точно всё»?

Так вот, Варя Степанова прошлась по всем известным дизайн-системам и собрала все эти самые последние штрихи на одной Miro-доске: https://miro.com/app/board/uXjVPXCoofw=/

Удивительного объема работа. После представления на конференции я полез сам на доску и прошёлся по ссылкам и примерам. Чего и вам настоятельно рекомендую.

Очень жаль, что организаторы не успели выкатить иллюстрацию к ней :)

#designsystem #mindmap

#статья дня

Что самое опасное может сказать фронтенд-разработчик, верстающий макет или готовящий ui-kit?

Опустим сейчас (несуществующее) разделение на настоящий и ненастоящий фронтенд.

Вот это:

— Я умею нормально называть классы, они у меня всегда уникальные!

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

Ребят, штуки вроде пространств имён, БЭМ, OOCSS, CSS-in-JS, CSS modules появились не потому что их разработчики глупы или ленивы. Они появились потому что все мы люди и толпа может быть как умнее одного человека, так и бесконечно глупее. Ок, если не глупее, то, как минимум невнимательнее.

Ведь подобная ситуация она везде, не только в вёрстке.

Ну вот давайте возьмём для примера Next.js. За базу там взяты CSS-модули, поэтому уже один только этот факт делает вопрос: «А css-модули уже устарели, да?», — некорректным.

Да, «гладить» фреймворк против шерсти не стоит. Да, создать глобальный класс для компонента способом, не предусмотренным документацией (созданием отдельного глобального скоупа) будет проблемой (То же самое касается и css-in-js).

Но зато насколько легче решаются остальные 99% задач!

Короче, чтобы вам сегодня сделать своё понимание кода и его сборки чуть лучше и заодно понять сопутствующие проблемы CSS-модулей горячо рекомендую эту статью: https://habr.com/ru/post/688844/

Как включить их в сборку, как типизировать. Зачем вообще типизировать и как экспорты по умолчанию всё портят.

Прекрасно и максимально понятно написано. Заодно скилл вебпака подтянете :)

#css #cssmodules #webpack

#codepen дня

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

Думали, отладка CSS сложна? Это вы ещё не пробовали задать эти самые слои :)

Вот, прекрасный пример как легко и просто сломать все ваши представления о специфичности селекторов: https://codepen.io/dutchcelt/pen/wvmjKMK

Ух какой простор чтобы искать неиспользуемые классы…

Но! зато я теперь знаю, как заставить мой любимый атрибут hidden действительно хорошо работать. Без этих ваших !important.

Вроде уже стоит того :)

South Hub — IT-кэмп в Сочи для СТО и тех, кто хочет ими стать
Когда?
6 – 8 октября
Где?
Красная Поляна, Сочи
Зачем?
Подняться на уровень выше. Профессионально и физически.

В отеле Novotel Congress соберутся 400 IT-руководителей, тех директора и CEO. На протяжении 3-х дней 45 спикеров будут делиться с участниками своим опытом и мыслями о будущем отрасли в формате лекций и бесконечного нетворкинга.

Помимо конференц-части гостей ждут зрелищные спортивные турниры в баскетбол, FIFA 23 PS 5 и Го, хайкинг по горам, утренние пробежки, много неформального общения, а также вечеринка на закате на высоте 2 200 метров.

Все подробности о кэмпе можно найти на сайте:
https://i.southhub.ru/Pubxk

#опрос дня

Как выбрать li с атрибутом 1?

#заметка дня

Кажется, я должен объяснение за позавчерашний опрос, да?

Давайте разбираться, почему же 1 превращается в \31.

Обратимся к спецификации. Поехали: https://www.w3.org/TR/2018/REC-selectors-3-20181106/

Сразу бахну на вас выдержку из лексической FLEX-нотации:

ident     [-]?{nmstart}{nmchar}*
name      {nmchar}+
nmstart   [_a-z]|{nonascii}|{escape}
nonascii  [^\0-\177]
unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape    {unicode}|\\[^\n\r\f0-9a-f]

Что нас тут волнует? Нас волнует понятия идентификатора и стартовой последовательноти символов в селекторе, так и называются — ident и nmstart.

Как видим, nmstart это или a-z и символ подчёркивания, либо escape-последовательности (nonascii-символы в целом, Unicode), куда попадают и цифры, и математические символы и иероглифы.

Знак дефиса при этом зарезервирован под вендорные префиксы (помните такие? -ms-, -webkit-, -moz-), но его очень даже можно написать через escape-последовательность \- и использовать даже в селекторах по атрибуту — [att].

Итого, атрибут можно написать как _1 и так и использовать [_1], из одной цифры — 1 — только как escape-последовательность — [\31].

А можно как -1 — [\-\31] 🤪Удивительное рядом, короче.

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

Если результат работы какого-нибудь конструктора баннеров можно так соптимизировать — поверьте, он будет оптимизирован. Самому, наверное, не стоит, но всё же.

А если хочется почитать языком попроще — вот есть сравнительно свежая статья на Хабре: https://habr.com/ru/post/682844/

#css #unicode

#til дня

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

Почему плагины? Потому что многие из них или до сих пор являются плагинами к jQuery, или буквально вырасли из них. Так уж повелось.

И вот эти самые обработчики событий получают доступ к this, к инстансу объекта (функции, класса). Например, Selectize.js, покажем какой-то блок над селектом:

function onDropdownClose(value: string) {
    this?.$input.parent().find(‘.alert’).html(value);
}

$(‘select’).selectize({
    hideSelected: true,
    openOnFocus: true,
    onDropdownClose,
})

Куда нас пошлёт TypeScript с этим? Правильно, в «this implicitly has any type».

А что делать-то? Как указать тип this в методе?

Всё очень просто: начиная ещё с версии 2.0 для указания типа this его нужно передать как первый аргумент в функцию. Не бойтесь, остальные implicit аргументы оно не затрёт. Итого:

function onDropdownClose(this: SelectizeInstance, value: string)

И так же с любым конструктором объектов или функцией, принимающей коллбэки как аргумент.

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

#разгон вечера

Кто как форматирует HTML-теги с кучей наложенных атрибутов?

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

А вот моих коллег такое форматирование бесит :)

P. S. а, Prettier же так же делает. Просто на этом проекте он у меня отключён, а в React-проектах я такого не допускаю.

#фишка дня

Я неоднократно выкладывал разные SVG-инструменты и генераторы. Вот, например: https://t.iss.one/htmlshit/447

У многих есть одно общее: генератор блямб. Или капель. Я честно не уверен, как это должно называться по-русски. Blob, короче.

Почему-то эти капли попали в тренды и пока там держатся. Но совсем не обязательно делать их на SVG.

CSS тоже отлично справляется.

На чем это основано? На геометрии кривых :) Эллипсов, точнее. Через слэш задаются вертикальный и горизонтальный радиусы эллипсов соответственно. А дальше — математика спряжения кривых. Вот тут подробнее: https://www.w3.org/TR/css-backgrounds-3/#border-radius

А тут — попопулярнее: https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/

Кто смелый анимировать их? :)

#css #blob

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

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

Заставить дизайнеров интерфейсов слезть с Adobe Photoshop не смогли ни конкуренты от CorelDraw, ни Sketch.

Figma этот тренд смогла переломить, дав решение и дизайнерам, и разработчикам, и менеджерам.

То, что поначалу даже в кривые Безье не умело, превратилось в культ. И будет продано все тому же Adobe за 20 лярдов баксов.

Большие деньги так-то, согласен. Вот только репутация Adobe людям покоя не даёт. Или начнут приводить к интерфейсу продуктов своих, или насильно запихнут в Creative Cloud, или всё и сразу.

Есть ли у альтернативы? Конечно, есть. Вот, например, PenPot: https://penpot.app/

Это проект с открытым исходным кодом! Можно установить себе на сервер, можно (пока бесплатно) использовать в облаке.

Написан на Closure с React. На проектах такого размера и сложности кложуру учить удобно 😵‍💫

Всем карандашей, котаны!

#design

#фишка дня

Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?

Места на экране мало, ещё и клавиатура съест.

Очень просто! Использовать атрибут enterkeyhint!

Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

Поддержка: https://caniuse.com/?search=enterkeyhint

Пользуемся!

#mobile #form #html

#фишка дня

TIL что в CodePen можно просто бросать файлы и он их подхватит. Подумалось, а нет ли возможности извлекать разметку, стили и скрипты из локальных файлов и забрасывать их в CodePen максимально автоматизированно?

Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill

npx codepen-prefill index.html

Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.

#codepen #npm #npx #utility

11-12 октября пройдёт конференция ViteConf. Как несложно догадаться, от создателей сверхбыстрого бандлера (сборщика) Vite.

Я его использую в паре проектов и планирую перетащить на рабочие.

Вот, собственно, и на конфу зарегистрировался :)

Онлайн-регистрация бесплатная, к слову.

И, наконец, стал известен список спикеров!

Evan You — создатель Vue
Rich Harris — создатель Svelte
Daniel Roe — участник основной команды Nuxt

…и ещё с дюжину

Да там вообще все звёзды, рекомендую не пропускать!

#vite

Покупка недвижимости – важное решение. А покупка недвижимости за рубежом – еще более важное и ответственное решение, для которого нужно изучить множество нюансов.

Но есть ли у вас на это время?

👉Недвижимость за рубежом и в Сочи – это канал, которому можно доверять. Команда проекта изучает информацию из разных источников, проверяет её и публикует только актуальное и важное, то, что нужно, чтобы принять решение.

⚡️Каждый день новости, объяснение законодательных изменений, аналитические заметки о состоянии рынка недвижимости, инструкции по релокации и получению ВНЖ, подборки перспективной недвижимости за рубежом для переезда и инвестиций в Турции, в ОЭА и на Северном Кипре.

⚡️Подписывайтесь, включайте оповещения и получайте еще больше новостей: https://t.iss.one/lookoutsochi

#фишка дня

https://www.google.com/search?q=nasa+dart

Брюс Уиллис больше не нужон, посоны!

#запрос дня

Воспользуюсь административным ресурсом, пожалуй.

Дизайнеры тут? Внимание!

Мне для пет-проекта на Flutter надо отрисовать дизайн пульта с иллюстрации. В Figma.

Можно с авторским взглядом, но суть должна остаться — реалистичный пульт смарт-телевизора.

Естественно, все состояния кнопок должны быть отрисованы. Особенно меня волнует O-pad 🙄

Автор оригинальной работы не отвечает, но он, в целом, и так срисовывал пульт Mi.

Я даже оплачу, так-то!

Ну и если вам будет интересно, могу транслировать, как оно там, во Flutter.

#ссылка дня

Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.

1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en

2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings

Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.

Ломайте свои интерфейсы сами и избегайте XSS, котаны.

#xss #naughty #injection

#фишка дня одной строкой

Хватит писать 60 секунд в JS setTimeout как 60 * 1000. Ведь 60e3 работает так же хорошо.

Чмоки.

#крутое дня

Итак, на мой клич с поиском дизайнера для пет-проекта на Flutter откликнулось несколько человек. За что я крайне признателен, котаны! 🥰

И так вышло, что подписчик @Vyrvyra прислала половину готовой работы уже через полтора часа, а готовую — ещё через час. Просто взяла и сделала сразу как надо 🤯 Я вообще спать лёг, не ожидал, что кто-то будет настолько быстр 😅

Так что я, думаю, не ошибусь, если могу её рекомендовать для ваших заказов. И, если она позволит, скину сюда и саму работу.

Но, скорее всего, я вам буду показывать по частям, в зависимости от того, как будет продвигаться процесс. Кнопка за кнопкой :)

Всем пет-проектов и мира, котаны!

#крутое дня

Не то чтоб я собирался всё же сходу показывать дизайн будущего пульта целиком, думал, буду сразу стили на Flutter набрасывать и выкладывать в песочницу, но пара подписчиков захотела это ещё и на HTML/CSS отверстать. Да, @mazya? :)

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

В общем, смотрим, комментируем: https://www.figma.com/file/ZEOa8mgVHabB3pgiEuwCm4/mi-tv-remote-app-control-(Copy)

#flutter #figma #remote