#новость дня

У LastPass утекли бекапы зашифрованных паролей и секретов: https://blog.lastpass.com/2022/12/notice-of-recent-security-incident/

Срочно идите меняйте мастер-пароль, если вы используете LastPass. Срочно меняйте пароли на всех сервисах, где нет 2FA. Да и там тоже меняйте 🙂

Веселье!

#codepen дня

Звание воскресного кодпена дня забирает… пустой кодпен. С его прекрасными цитатами.

Это максимально неожиданное предложение, но вы попробуйте и поверстайте на float. Назад возвращаться будет очень хорошо :)

Вообще, цитаты на CodePen появились достаточно давно и иногда бывает действительно забавно.

#фишка дня

Полтора года назад я разгонял тему про реализацию виджета аккордеона. Ну или collapsible, иначе говоря: https://t.iss.one/htmlshit/591

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

Но тут такое дело... в Firefox уже достаточно давно можно было анимировать высоту ячейки грида через grid-template-rows: https://t.iss.one/htmlshit/834

И вот теперь, наконец, можно и в Chrome и в Safari! Ура, дамы и господа!

Codepen c примером: https://codepen.io/chriscoyier/pen/wvxwgae

Счастье есть, короче говоря.

#css #accordion #collapsible

#эксклюзив дня

Первый эксклюзив канала! Версия 1.0RC шрифта Martian Mono!

Вижу, не все в курсе. Короче, дело такое. Роман Шамин, арт-директор небезызвестных Evil Martians когда-то пообещал ускорить разработку кириллицы для их шрифта за 1000 звезд на Git Hub. Ну так вышло, что мы с вами все ему в этом помогли.

Дело было ещё в июле, набрали быстро. В начале декабря появилась информация, что скоро можно пробовать… И вот мы здесь!

С пылу с жару, я получил сообщение от Романа меньше часа назад, 1.0RC: https://www.dropbox.com/sh/311fqf72c5xbsqq/AAA3BhXhzklDOstIeqCjNJGea?dl=0

Тестируем, оставляем отзывы в комментариях к посту (или потом в issues на Git Hub, как пойдёт).

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

#font

#статья дня

...заодно и #библиотека дня

TL;DR: Компонент-балансировщик текста для React, не оставляющий висячих слов и делающий текст приятнее для чтения: https://react-wrap-balancer.vercel.app/

Если не поняли, что это — смотрим видеоиллюстрацию к посту.

Теперь основная часть, собственно, статья: https://www.ctrl.blog/entry/text-wrap-balance.html

Автор вышеуказанного компонента рассказывает о короткой истории балансировщиков текста, сравнивает версию от газетчиков New York Times и версию от Adobe.

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

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

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

#css #react #font #rendering #fouc

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

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

Можно холодными звонками, можно рекламой, можно через open source-проекты... А можно ещё пилить удобные визуальные инструменты для сообщества!

Например, как генератор CSS-сетки (всё же придётся писать гридов) https://grid.layoutit.com/ от Leniolabs. И у них ещё много есть подобных. Впрочем, тоже open source.

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

#css #grid #tool

#итоги года

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

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

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

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

Сцепились мы с батей по пьяни с коллегой по поводу шрифта на логотипе молочных коктейлей 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