#итоги года

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

Удалось ли вам несмотря ни на что достичь поставленных целей или нет, сейчас не важно. Важно, что мы здесь.

Желаю всем выполнения поставленных планов в новом году, котаны!

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

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

Он говорит — Lobster, я говорю — нет. Вон же лигатуры присутствуют, края букв иные. Похоже — но не то.

В общем, стали думать. И тут я вспомнил о сервисе WhatTheFont: https://www.myfonts.com/pages/whatthefont

Даже не использовал никогда. Ну что же, сохранил логотип, загрузил. И... ну и конечно же ни разу не Lobster!

Наиболее близким шрифтом оказался Fourth. Соединение l-s, правда, выглядит иначе, но у шрифта столько настроек лигатур...

В общем, стоящий сервис, можно пользоваться.

А коктейли не всем нравятся, кому-то на вкус как мел.

#fonts #tool

#статья дня

Vite очень быстро набирает обороты. Ещё бы, без необходимости, собственно, сборки на этапе разработки скорость работы (как минимум, старта) увеличивается в десятки раз. Но почему?

Всё просто, Vite и аналогичные утилиты работают с "чистыми" es6-модулями, перезаписывая адреса импорта и предоставляя современному браузеру сделать остальное.

Чувствуете, проблему? Чем больше модулей — тем больше браузеру грузить. Даже локально это может стать проблемой. Собственно, об этом бенчмарки в статье и говорят: https://betterprogramming.pub/is-vite-really-faster-than-webpack-b414f6cc751c

На такой конфигурации Webpack соберёт бандл быстрее, чем браузер загрузит файлы.

Есть ли решение? Конечно, «ленивая» загрузка файлов и модулей!

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

#vite #webpack #rollup

#тред дня

Отличный тред Андрея Ситника о том, что же не так в мире ES-модулей и почему радоваться рано. Тред из конца 2020, но не потерял популярности и сейчас.

Почему вспомнил сейчас? Потому что отлично дополняет предыдущий пост про Vite.

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

https://twitter.com/andrey_sitnik/status/1229753395961044993

Для тех, кто не про твиттер: https://threadreaderapp.com/thread/1229753395961044993.html

#js #es #esnext #webpack #twitter

#фишка дня

Все вы знаете, что в современном JavaScript есть деструктуризация и деструктурирующее присваивание. Грубо говоря:

function f() {
  return [1, 2];
}

const [a, b] = f();

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

let a = 1;
let b = 2;

[a, b] = f();

Да, прекрасно. А если из объекта?

function f1 {
  return {a: 5, b: 6}
};

{a, b} = f1();

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

Обернуть в обычные!

({a, b} = f1());

Так удовлетворили парсер, указав, что новый блок не планируется.

Где это может пригодиться? Ну при рефакторинге дико запутанного императивного кода самое то. Вынести логику, перезаписать переменные и потом разбираться, что же ещё не так.

Правда, это не значит, что надо так делать всегда.

#js

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

Про caniuse.com говорить никому уже не приходится, это база, которая должна появляться как только ты набрал "c" в адресной строке.

Но иногда кому-то из нас приходится верстать... письма. И вот тут начинается веселье.

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

Для таких случаев придуман https://www.caniemail.com/

Всё то же самое, что Can I Use", но про почту.

Больше никаких "а может?.." Определяете целевую аудиторию — и поехали верстать.

#email #css #html #feature

#расширение дня

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

Сегодняшнее расширение пытается решить проблему недостаточного контраста на сайтах: https://fixa11y.com/

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

Полезная вещь, короче, надо сказать.

#css #a11y #contrast

#книга дня

Вы помните такую книгу — «Живая типографика»?

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

Короче, сама-то книга выложена автором в свободный доступ: https://t.iss.one/htmlshit/955

Так вот, выпуск был аж в 2007 году. Естественно, тираж давно распродан и переиздание долго назревало.

И назрело! Александра Королькова стартанула канал, посвящённый подготовке второго издания книги! С прекрасными иллюстрациями с описанием процесса. Вот он: https://t.iss.one/livetypography

За чужой работой можно наблюдать бесконечно, не правда же? Процесс интересен чуть ли не больше результата.

В общем, просвещаемся, котаны!

#font #typography #book

#фишка дня

В эфир с ноги врывается Ли Робинсон с простым, но максимально эффективным способом улучшить читабельность ваших таблиц, унифицировав ширину цифр: font-variant-numeric: tabular-nums.

🔨 Как применять? Вот так: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
👀 Где посмотреть в работе? Вот тут: https://ncaam.vercel.app/66

Пользуемся, отдыхаем.

#css #table #font #monospace

#ссылка дня

Мы тут немного повеселились с 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. Помните, например, в чатах люди свои ники пишут с̶̙̦̙̠̎ ̸̢̡͔̞̮̯͇̞͎̎̉̐̇͑̓́̈́̕͠г̷̍͑̈̓͆͊̀͒̆̇͒̕͠ ̭͜р̵͠ ̡̪͉͉̬̻̝̪̩̟̲̲̙̂̅́͘͜͝я̷͙͍̦̌͌̓́͗͌̇ ̤̹̭͇з̶̽̒̀́̒̒̉̚̚ ̡̧͚̪͇͈̫̜̻̖͎̣̠̏̉̍ͅь̵ ̂̔̒͝ ̬̲̗͕̜͔̠̟͓̖͊̔͆̂͘͠͝ю̵̈́͐͒̓ ̡̮̈̾̒̐̀́̕? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы. Zalgo называется.

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

#xss #naughty #injection

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

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

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

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

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

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

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

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

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

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

#design

#такое дня

Разгребал рабочие завалы и обнаружил кое-что…

Итак, 2011 год. Популярны городские сети и файлопомойки. У нас такая называлась SWAP.

У неё был интерфейс для загрузки файлов людьми, с торрентов и “осла”. Был даже веб-интерфейс для просмотра загрузок и админка для редактирования. Естественно, были и инициативные группы :)

В какой-то момент провайдер решил взять это в свои руки. Начался процесс редизайна.

Вёрстка так себе по современным меркам: ID-селекторы, нет БЭМ, нет семантики (почти). Кое-где даже атомарные классы.. Адаптива не существовало вообще.

Но вот выглядит до сих пор неплохо. И должно работать даже в IE6-7.

Встречайте:
Главная страница
Список фильмов
Страница фильма

Задавайте ваши вопросы по стилю вёрстки и кода. Наверное.

#life #work #retro

#интерактив дня

А поделитесь своими самыми странными, стрёмными или вообще — просто запомнившимися собеседованиями.

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

На тот момент компания была маленькой и процессы были медленные. Кончилось тем, что меня пригласила на собеседование в Хельсинки другая компания, и нынешней я написал: «Так может уже познакомимся уже?». Отсылку поймут не все.

Ну и вместо трех этапов получился один, не считая скрининг. Правда, собеседовали 8 человек разом, включая CEO.

Ну и по ходу пьесы я просил перевод пары терминов у русскоязычных собеседующих…

А в ту компанию, которая, собственно, пригласила я не попал. Недостаточно senior оказался.

Давайте свои прохладные былины.

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

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

Взять Chrome и не выпендриваться.

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

1. Устанавливаем XCode, запускаем.
2. Меню XCode 👉 Open Developer Tool 👉 More Developer Tools...
3. Откроется портал Apple Developer, входим, используя свой Apple ID.
4. Скачиваем
Additional Tools for Xcode, для каждой версии свой.
5. Монтируем скачанный образ DMG (ну кликаем по нему, господи)
6. Идём в директорию Hardware и открываем Network Link Conditioner.prefPane
7. Запустятся настройки системы, там надо будет нажать на мерзкого вида переключатель и выбрать нужный профиль сети.
8. Поздравляю, вы великолепны. А иконка утилиты на панели меню — нет.

А, и это, естественно, ограничит скорость сети по всей системе, не только в Safari.

Короче, Apple — компания странная.

#xcode #tools

#статья дня

Давайте честно, у кого были проблемы с пониманием 3D-преобразований в CSS? А у кого есть?

Да не надо стесняться, у всех были и есть. Кубик на CSS нарисовать могут не только лишь все. А всё почему?

А всё потому что у вас интерактивных тренажёров не было. К счастью, делает их не только Джош Комо, но и вот Брэд Вудс: https://garden.bradwoods.io/notes/css/3d

Сослался я на записки по 3D-преобразованиям, но вообще этот проект — хороший пример того, как можно делать заметки по ходу изучения какой-то темы. От объектов в JS до отладки SQL. Хорошая шпаргалка, рекомендую всем так делать. Ну или хотя бы отрабатывать навыки в кодпене, со временем тоже неплохо накопится.

#css #js #cheatsheet #interactive

#codepen дня

Как понять режимы смешивания (блендинга, mix-blend-mode) в CSS?

Можно, конечно, обмазаться математикой и сидеть дёргать ручки в DevTools, а можно открыть сегодняшний кодпен: https://codepen.io/jh3y/pen/OJXrVME

Для лучшего понимания происходящего слои можно вращать. Выбирайте разные режимы наложения, меняйте фоны — лучше не найти.

Если кому интересно, что это за интерфейс управления такой — это dat.GUI: https://github.com/dataarts/dat.gui

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

#mix #blend #css

#такое дня

Я тут настоящий вынос мозга нашёл. Вы знали, что в CSS де-факто уже не один десяток лет есть нативные миксины? Ну как в LESS/SASS?

Завтра расскажу. Чмоки.

#фишка дня

Я что-то подзатянул с демонстрацией, простите. Тачку в ремонт, потом час на автобусе... Как люди на автобусах ездят? Это ужасно. Я ничего кроме метро и электричек не перевариваю. Ну да ладно.

Короче!

Мне накидали всякого в комментарии, но правильный ответ никто не дал. А состоит он в... в анимациях aka @keyframes.

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

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

animation: 1s paused awesomeMixVol1;

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

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

Как вам такое?

#css #keyframes

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

Даже два. И оба для работы с SVG.

Одной из сильно раздражающих проблем при работе с SVG является, как ни странно, сложность кропа. Ну, обрезки полей, whitespace.

Почему? Ну, потому что многие редакторы (Inksape тот же) делают просто изменение viewBox или ещё трансформами подгоняют кривые.

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

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

Так вот, к чему это я. Точно, к обрезке.

Раз: https://svgcrop.com/
Два: https://editor.method.ac/

Первая утилита обрезает по viewBox. А вот второй редактор — в него можно загрузить SVG с применёнными трансформациями сдвига, выделить и выбрать в меню Object 👉 Reorient path, что перепишет кривые с учётом трансформаций.

Вспомню, как это делать в Inkscape — напишу 🙂

#svg #crop

#игра дня

Sorry old chap. Increase the width of your browser to view this site.

…именно эту фразу вы увидите, открыв представленную ссылку на телефоне.

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

https://git.bradwoods.io/

#git