#ссылка дня

Внимание, важный вопрос!

Что вам больше нравится: Volvo или Porsche?

Прежде чем отвечать, подумайте! Ведь речь идёт не об автомобилях, а о...

...дизайн-системах.

Вот это поворот

Да-да, оказывается, для бесчисленных маркетинговых и корпоративных задач автопроизводителей оказывается выгодно иметь не только отдел разработчиков, но и собственные дизайн-системы.

Давайте на них посмотрим.

Volvo: https://vcc-ui.vercel.app/docs

И их Storybook: https://developer.volvocars.com/design-system/web/?path=/docs/getting-started-1-introduction--docs

Porsche: https://designsystem.porsche.com/v3/

Ребята из Volvo даже блог свой ведут. Например, они ушли от CSS-in-JS назад к CSS ещё до того, как это стало модным: https://vcc-ui.vercel.app/blog/2022-11-23-future-css

Кто найдёт дизайн-систему BMW? :)

Кто использовал эти две?

#css #design #ui #storybook

#фишка дня

Когда-то давно я слышал о таком свойстве, как text-align-last.

Что оно делает? Ну, думаю, всё понятно из иллюстрации :)

Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

С интерактивным примером, как вы любите.

Почему я акцентировал на нём внимание?

Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.

В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(

Но есть же наш уютный канальчик, мы тут всё вспомним :)

#css #thefuturepast

#ссылка дня

Все знают, что в JavaScript возможны утечки памяти, вот только никто их не видел.

Погоди, в смысле, никто? Вот же, целый репозиторий: https://github.com/ufocoder/javascript.iss.onemory-leaks

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

Не позволяйте памяти утечь, котаны! И дополняйте примеры :)

#javascript #memory

#ссылка дня

Я сначала подумал, что это шутка: https://github.com/tc39/proposal-math-sum

Оказалось, совсем и не шутка.

Ваши мнения, котаны?

inb4 https://0.30000000000000004.com/

#фишка дня

Продолбался весь день с подготовкой релиза. С cherry-pick-ами нужных коммитов. Шутки про черрипики точёны оставьте себе.

В чём же проблема?

А в том, что наша команда работает по trunk-модели. Всё сливается в мастер, мастер автоматически релизится как Latest-версия продукта и отправляется в тестирование.

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

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

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

Для этого реализуются различные feature-флаги и прочие условные условности для разделения потоков пользователей продукта по фичам.

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

Плохо когда вы забыли о гигиене и смешали коммиты от двух фичей — свободной к релизу и нестабильной. Или когда не засквошили PR-коммит (мой случай).

Тогда выборка черри-пиков может быть не самым приятным занятием. А грязные черри-пики штука очень неприятная.

Так вот, про что же фишка дня? А вот про то, что в процессе я выяснил: совсем не обязательно делать checkout коммита по его хэшу, можно по сообщению! Буквально:

git checkout ':/add multiselect to ui kit'

Причём, сообщение не надо вспоминать полностью!

В итоге, git выберет ближайший к вам такой коммит. Уютно!

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

#git #til #commit #бородач

#статья дня

Нет, на видео к посту вовсе не очередная реализация Tower Defense на ванильном JavaScript. Тут кое-что покруче.

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

И проблема эта — балансировка нагрузки! А точнее, существующие алгоритмы балансировки нагрузки.

Сразу ссылка на статью: https://samwho.dev/load-balancing/

И перевод: https://habr.com/ru/companies/ruvds/articles/732648/

Но в переводе нет интерактивного примера!

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

Итак, что там за алгоритмы такие:

1. Чистый рандом
2. Карусель и взвешенная карусель (мощнее сервер — больше запросов в него кидаем)
3. Карусель с очередью запросов
4. Подсчёт активных подключений и передача серверу, с наименьшим их числом
5. Активный подсчёт способности серверов обрабатывать запросы и исключение наиболее слабых из них.

Очень крутая статья. Иллютрации и интерактив делают знакомство с алгоритмами весьма увлекающим.

Ну и, заодно, станет понятно, о чём говорить с девопсами, когда ваш чатик начнёт падать :)

#connections #devops

#фишка дня

Как заставить элемент изменять свою ширину... ступенчато?

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

И сегодня у нас аж несколько вариантов, как этого добиться.

1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq

Используем функцию модуля:

width: calc(95vmin + -1*mod(95vmin, 15px));

Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.

2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:

min-width: round(95vmin,15px);

Пример: https://codepen.io/alinaki/pen/VwRMpPY

Но... Chrome опять в обломе.

Да, и в первом и во втором вариантах на коне Firefox и Safari. Как я уже недавно писал, парни из Chrome взяли привычку реализовывать только то, что можно красиво оформить в пост. И реализовали тригонометрические функции, забыв про базу.

Потому нам ничего не остаётся кроме как...

3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR

И секрет будет в правиле:

grid-template-columns: repeat(auto-fill, 15px);

Всем шахмат, котаны :)

#css #trick #math #бородач

#фишка дня

Вы знали, что в CSS можно анимировать кривые SVG?

Криво анимировать кривые...

Вот и я не знал. Посмотрите:

<svg viewBox="0 0 10 10">
  <path d="M5,2 Q 2,5 5,8" />
</svg>

svg path {
  transition: d 0.35s;
}

svg:hover path {
  d: path("M5,2 Q 8,5 5,8");
}

До тех пор пока совпадает число точек и тип кривой, можно набросить переход aka transition и будет красота.

Да, сложные анимации будет сделать непросто, но даже так — довольно забавно.

Ладно, к чему это вообще. Сейчас работает в Chrome и Firefox, а буквально вчера это добавили в WebKit, а значит, скоро и в Safari!

Демо: https://codepen.io/alinaki/pen/dyLKXmJ

#svg #animation #transition #css

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

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

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

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

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач

#ссылка дня

Если у вас есть Chrome Canary (125+), то уже сегодня можно побаловаться такой фичей, как CSS Anchor Positioning.

Короче, можно прилепить один элемент к другому так, что он всегда там будет, несмотря на скролл и так далее. Без расчёта координат и трансформаций. Без прямой зависимости межлу элементами в DOM. Просто указываем ID элемента-якоря в атрибуте anchor и передаём позицию в стили: inset-area: right bottom. Всё.

Это, в целом, продолжение идеи, развиваемой в спецификации Popover.

Уна Кравец как раз сделала инструмент для демонстрации этой возможности: https://anchor-tool.com/

Повторю: только Chrome Canary 125+.

Ну а, конечно, пока этого нет в основных браузерах, нам надо довольствоваться https://floating-ui.com/ aka ex-Popper. Работает очень хорошо.

#css #anchor #tool

Этот комментарий к посту про анимацию кривой SVG определённо стоит выноса в основной поток 🙂

Причём так можно анимировать не только SVG-элементы, но и CSS-свойства с SVG-контуром в качестве значения, напр. clip-path:path(...) или offset-path. Главное, чтобы количество и тип команд в контуре оставалось тем же. Я так выпрямлял offset-path по ховеру в этой демке https://codepen.io/SelenIT/pen/zYLoXdB

🇺🇲Реально ли специалисту в любой области получить greencard США без предложения о работе, без высшего образования, и без знания английского языка? Ответ: да! Рассказываем, как это сделать.

Виза EB-1a дала возможность более 4000 специалистам из разных областей переехать в США в 2022 году. Она выдаётся на срок до 10 лет, по ней можно работать в любой компании, фрилансить и открывать собственный бизнес. И через 5 лет жизни в США претендовать на паспорт!

Чтобы получить эту визу, не обязательно иметь высшее образование, не нужно знать язык на высоком уровне, а заявку можно подать из любой страны. И, пожалуй, самое главное – не нужно обладать каким-то исключительным талантом! Огромное количество специалистов даже не знают, что могут претендовать на эту визу.

Подписывайтесь на наш Telegram-канал, где мы даём массу полезной информации о релокации: https://t.iss.one/relocode

Пишите нам в WhatsApp: +44 7496 949122 или в Telegram: @relocode_dm. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.

#статья дня

Как выделить абзац полоской на всю ширину экрана?

Да вот так: https://codepen.io/t_afif/full/LYQgPgM

Упорото, не правда ли?

Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.

Источник — тред экспериментов в Твиттере.

Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.

И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/

Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/

Я обычно первый способ из второй статьи использовал. Люблю магию.

И вообще, как такая раскладка по-русски будет-то?

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

#заметка дня

В чём разница между селекторами :disabled и [disabled]?

Вот вы не знали (наверное), а она есть!

Псевдокласс :disabled выберет любой элемент, находящийся в отключённом состоянии.

Селектор атрибута [disabled] выберет любой элемент, имеющий атрибут disabled.

Например, <input type="text" disabled/> подпадёт под оба селектора, вне зависимости от того, случилось это на этапе прямого рендера или через установку свойства disabled узлу.

Да не томи уже!

Короче, суть дела в том, что атрибут disabled может быть установлен на fieldset, в таком случае поля будут недоступны, но в селектор input[disabled] не попадёт ничего.

Сложно? Вот пример: https://codepen.io/alinaki/pen/VwgKOPE

Короче, аккуратнее.

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

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

Генераторов треугольников на самом деле достаточно много... было создано лет за 20. Поэтому почти все из используют довольно старые техники. Или же вообще универсальные aka clip path.

Потому, встречаем:
https://css-generators.com/triangle-shapes/

Рассчитаны под один элемент. Пример кода:
/* HTML: <div class="triangle"></div> */
.triangle {
width: 180px;
aspect-ratio: 1/cos(30deg);
clip-path: polygon(50% 100%,100% 0,0 0);
background: linear-gradient(45deg,#FA6900,#C02942);
}

Заценили расчет соотношения сторон, кстати? 🤓

Пользуемся, котаны!

#css #triangle #tool #generator

#codepen дня

Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…

А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.

Помните, я когда-то показывал газету на CSS-grid? Ну вот же: https://t.iss.one/htmlshit/508

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

И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV

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

#svg #effect #filter #бородач

#фишка дня

Замотался, но про вас не забыл, котаны!

Вторая, а может и первая, по популярности фигура на сайтах — это звезда. То рейтинг ей поставят, то маской наложат, то конфетти сделают...

Так вот, из поста про треугольники мы уже в курсе, что clip-path можно применять везде. И даже нужно. Так почему бы не нарисовать им звезду?

«Наверное, потому что задолбаешься точки ставить?», — скажете вы, и будете, в целом, правы. Их там вроде... 10? Десять же, да?

Нет! Оказывается, достаточно пяти!

Глядите чо: https://codepen.io/t_afif/pen/jORvmKG

1. Вариант на тригонометрических функциях:

  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
   ); 

2. Упрощённый вариант, когда всё уже посчитано за нас:

  clip-path: polygon(50% 0,80% 100%,0 39%,100% 39%,20% 100%);

Чтобы понять, как это работает, проще сразу загрузить в генератор clip-path: https://bennettfeely.com/clippy/

Вы не поверите, но это буквально совпадает с тем, как вы безотрывно рисуете звезду карандашом ещё со школьных времён!

#css #star #clip

#такое дня

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

А всё почему? А всё потому, что правительство Фи планирует повысить НДС до 25.5%.

Самые опытные из вас уже поняли, в чём проблема. И будут абсолютно правы. Потому что это не только офигеть какой высокий налог, но и первый случай нецелого значения налога.

А разработчики, как мы давно знаем, работать умеют только с целыми числами.

Если налог всё же будет введён, он резко превратится в лучшем случае в 26%, что вызовет тонну претензий, а в худшем — вызовет ошибки транзакций.

Ладно, скажете вы, нам-то зачем рассказываешь это? Мясо, мясо давай!

А вот и мясо. Глядите, на иллюстрации — API платёжной системы Paytrail. Прямо указано целое число. И ну всё бы ничего, но они обсуждали это... 2 года назад!

Вот: https://github.com/paytrail/api-documentation/issues/28

И тогда пришли к выводу, что не надо. А оно вот как вышло. Уже вовсю начали выдумывать варианты решения.

А сколько финансовых систем ещё в мире? :)

P. S. Я думаю, следующей новостью из Финляндии будет: «В связи со сложностью внесения изменений в информационные системы правительство приняло решение поднять НДС до 26%».

#api

#заметка дня

Что-то по Твиттеру опять пронеслась война тех, кто считает, что надо максимально ограничивать кандидату доступ информации во время собеседования, не пускать его в поиск Google, запрещать спрашивать у ChatGPT, не давать документацию и так далее. И тех, кто, в общем-то, считает наоборот.

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

С документацией всё просто: естественно, надо разрешать доступ. Да даже в университетах разрешают пользоваться конспектами и справочниками. Ну, в нормальных...

Google... ситуация похожа на ChatGPT. Нужно внимательно смотреть, что и как человек гуглит. Как конкретно он формирует запрос и какие ссылки открывает.

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

А потом чтобы показать скриншоты своего проекта, который был закрыт пейволлом!

А вот того, кто во время собеседования гуглил меня, мы не взяли...

А как у вас дела обстоят и опыт?

#work #interview #собеседование #бородач