#опрос дня

Помните, я возмущался тем, что вложенность в CSS это ужасно?

Я не собираюсь менять своего мнения, но тут такое дело...

Короче, nesting собираются ввести в стандарт. Но есть проблема.

Никак не могут выбрать синтаксис!

Так что CSSWG в блоге WebKit решили выкатить опрос на общественное суждение: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/

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

Изъявите свою волю 🙂

А там посмотрим.

#css #nesting

#вопрос дня

Мастера Prettier, помощь нужна.

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

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

Конфиг printWidth установлен в 120 символов и Prettier ничтоже сумнящеся вытягивает все ваши объекты и чейнинги в одну строку, хотя вроде как они все гораздо меньше 120 символов в ширину, что отвечает настройке.

Как сделать так, чтобы он перестал это делать? Комбинировать с ESLint? Задавать ignore-pattern?

#новость дня

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

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

Веселье!

#codepen дня

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

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

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

#фишка дня

Полтора года назад я разгонял тему про реализацию виджета аккордеона. Ну или collapsible, иначе говоря: https://news.1rj.ru/str/htmlshit/591

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

Но тут такое дело... в Firefox уже достаточно давно можно было анимировать высоту ячейки грида через grid-template-rows: https://news.1rj.ru/str/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://news.1rj.ru/str/htmlshit/955

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

И назрело! Александра Королькова стартанула канал, посвящённый подготовке второго издания книги! С прекрасными иллюстрациями с описанием процесса. Вот он: https://news.1rj.ru/str/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 оказался.

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