#статья дня

Забудьте всё, что вы знали о режимах смешивания aka mix-blend-mode в CSS. А если не знали ничего, почитайте пару моих постов, и возвращайтесь обратно. Например, вот: https://t.iss.one/htmlshit/1757

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

Что если я вам скажу, что изображение выше — это, кстати, реализация циферблата с Apple Watch — целиком и полностью реализовано режимами смешивания и градиентом?

Верится с трудом, да? Весь секрет в том, чтобы выйти за рамки двух слоёв и смешать несколько за раз. Можно добиться потрясающих эффектов, вплоть до dithering.

Статья Скотта Вэндехе как раз об этом: https://cloudfour.com/thinks/the-power-of-css-blend-modes/

Была бы в 2013 году поддержка mix-blend-mode пошире, можно было бы такой техникой сделать имитацию гравировки в моём невыпущенном конструкторе надгробий, кек

#css #mix #blend

#фишка дня

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

Вот только чтобы автоподстановка в браузере работала корректно, указывать значение атрибута autocomplete нужно не email, а username. Такие дела.

С паролем похожая история. На регистрации надо указывать new-password, а на входе — current-password.

Где же почитать подробнее про все эти правила? Вот тут: https://web.dev/sign-in-form-best-practices/

Ну и в спецификации: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute

Помогайте своим пользователями, браузерам и менеджерам паролей.

#html #autocomplete #form

#фишка дня

Знаете ли вы, что такое. ASCII-art?

Ну если нет, смотрим на иллюстрацию. Говорит само за себя.

Давайте сделаем нечто пафосное всего парой значащих строк CSS.

Например, портрет из слов.

Не ASCII-арт, конечно, но на бизнес по дропшиппингу уже тянет, не правда ли? Осталось найти производителей холстов 🙂

https://codepen.io/alinaki/full/MWqbYbO

#css #clip #text

#ссылка дня

Канал Шрифтовой дизайн принёс прекрасное. Давайте по-порядку.

Во Франции есть такой институт EESAB: École européenne supérieure d'art de Bretagne (European Academy of Art in Brittany).

Не Британка, но совпадение забавное. Я в этом мало что понимаю, но это разные школы, если что 🙂

Так вот. Помимо всего прочего, студенты EESAB занимаются диджитал-дизайном, и разрабатывают, в том числе, шрифты! И более того, выкладывают их под открытой лицензией SIL OFL.

Собственно, проекты студентов за последние четыре года лежат тут: https://u270d.eesab.fr/

Очень много крутых гарнитур. И презентация многих из них буквально завораживает.

Заодно немного вскрывается процесс их созидания. А это всегда интересно.

В общем, налетаем-разбираем!

 #fonts

#ссылка дня

TL;DR: Итак, Microsoft, наконец, сподобилась выкатить документацию по WSL2: https://learn.microsoft.com/ru-ru/windows/wsl/

Что такое WSL2?

Оооо, мой дорогой друг, присаживайся. Я расскажу тебе сказку.

Хотя не, не расскажу. Достаточно знать, что WSL2 — это Windows Subsystem for Linux. Несложно догадаться, что уже второй версии. Отличия от первой рассказывать не буду, вторая проще в использовании и поддерживает UI-приложения с некоторых пор.

И так понятно, что твои веб-проекты скорее всего будут крутиться на Linux-серверах, а нет ничего лучше, чем разрабатывать сразу в среде, в которой и будет потом всё непосредственно работать. Да и CLI-утилиты в Windows это какая-то неестественная для этой ОС дичь.

Я уже рассказывал о WSL2 в своём цикле постов про повторение багов Safari на Windows, можете почитать тут: https://t.iss.one/htmlshit/709

Там вроде достаточно. интересно вышло.

Читаем документацию, ставим WSL2, балуемся. Полезнее этого разве что яблоко съесть. И то не уверен.

#linux #windows

#нытьё дня

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

Менеджеры паролей вообще идея классная, но it comes at cost. Я готов принять, что мой типичный рабочий процесс будет периодически прерываться на ввод мастер-пароля и пин-кода, но я не готов мириться с косяками LastPass. Ещё я не могу полновесно протестировать другие решения в том же объёме, что использую LP, по простой причине: это корпоративные пароли и тестовые аккаунты. Очень много тестовых аккаунтов.

Что же не так с LP? Это их интерфейс и нежелание что-либо менять.

1. Начнём с простого. Если я поставил звёздочку на пароль или секретную записку — доступа в список избранного нет.

Ну вот просто нет, ни в боковой панели, ни в меню. Я так и не нашёл. Речь про приложение, если что.

2. Повсеместное использование модальных окон, которые просто не влезают на экран.

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

3. Невозможность скопировать пароль, будучи в пресловутом модальном окне. Очень часто помимо имени и пароля нужен API ключ или SSL-сертификат, поэтому приходится открывать настройки полностью. И там чтобы скопировать пароль — нужно открыть его буквально, для просмотра. Функция Copy username/Copy password доступна только из списка паролей.

4. Редактор паролей не умеет в даже в простые формы. Например, вход в PhpMyAdmin имеет не только имя и пароль, но и выпадающие списки с серверами и базами данных. Что может быть проще, чем запомнить комбинацию имя-пароль-база-сервер? Хрен. Не запоминает ни из браузера, ни из редактора полей в приложении.

5. Расширение для браузера очень агрессивное и пытается подставить себя в любое поле.

Раньше разработчикам советовали с целью предотвращения автозаполнения поля писать в соответствующий атрибут случайные строки. LP легко на такое возбуждается и ставит свои картинки внутрь полей.

6. Кстати, о картинках внутри полей: это вообще что такое? Внаглую на любой дизайн.

7. Расширение для браузера очень нестабильно и плюётся ошибками в консоль браузера в огромных количествах. Ругался с ними в Twitter — не помогло.

8. Раньше на macOS как минимум у них было нативное приложение с гораздо более удобным интерфейсом. Убрали его совсем. Экономия?

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

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

10. Есть кнопка Launch, предположительно — она должна запустить сайт и ввести имя и пароль. Только толку от неё, если всё, что мне нужно — это OAuth сессии? Лучше бы показали кнопки копирования имени и пароля, а не через контекстное меню.

11. Клик по строке с учёткой выделяет её, а не открывает. Надо нажимать на мелкую кнопку «Настройки», которая, естественно, рядом с кнопкой «Удалить». Классика.

12. Про концепцию папок вообще говорить нечего. Папки не появляются в боковой панели и просто делят список на части. Глупо.

13. В погоне за поездом Material UI добавили кнопку +. Что она делает? Не угадали: она создаёт папку. И попутно перекрывает доступ к нижним паролям.

14. Боковая панель разделена на две части, нижняя прилеплена к нижней же кромке экрана и никакого разделителя между ней и верхней частью нет, из-за чего часть элементов скрыта. Но опяять же, ничего более тупого чем боковая панель LP просто нет.

15. Ну и на закуску: руководство LP скрывает информацию о взломах, утечках и их причинах. Поздно раскрывает их, вместо полноценных анонсов просто обновляет старые посты в блоге: «А чо, всё связано же».

Пора заканчивать. Надеюсь, скоро буду пользоваться чем-то иным для менеджмента учёток. А пока, поныли и ладно.

Не будьте как разработчики и дизайнеры LP, котаны и котанессы. Прошу.

#lastpass #scream

#такое дня

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

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

Через несколько часов прихожу, сажусь за работу, открываю письмо с паролем к cPanel — а панель меня не пускает!

Захожу на свежекупленый домен — а там уже крутится какой-то порноскам.

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

Ну и какой-то залётный скрипт вошел в панель под этим дефолтным паролем и установил свои правила.

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

Реагируйте на письма от хостинга сразу, короче.

#ссылка дня

Аж несколько. Fons Mans, нидерландский дизайнер, где-то с год назад прошёлся по кампаниям Spotify, Instagram, Apple и решил их повторить в Figma.

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

1. Instagram Playback 2021: https://www.figma.com/community/file/1052708550618507395/Instagram-Playback-2021

2. Знаменитое Apple Hello Lettering: https://www.figma.com/community/file/1055218259890078705/Apple-Hello-Lettering

Прекрасно подойдет для тренировок SVG-анимаций.

3. Apple App Store Awards: https://www.figma.com/community/file/1049103690945561588/App-Store-Awards-2021

4. Spotify 2021 Wrapped: https://www.figma.com/community/file/1048300248758550250/Spotify-Wrapped-2021

Удачных тренировок 🙂

#design #figma

#статья дня

Всё-таки не могу не выложить и эту статью: https://spectrum.ieee.org/xerox-alto

Практически все концепции современного мира компьютеров были созданы в лаборатории Xerox Alto под пятьдесят лет назад.

Мышь, меню, GUI вообще, оконный менеджер ОС, WYSIWYG — это всё придумали там, а уже потом концепции были скопированы и/или украдены лидерами рынка. Ну, Apple и Microsoft, ага.

Xerox не то чтобы сильно выиграл от этого, но какие-то акции Apple в итоге получил. Продали ли они их или получили через двадцать лет многие миллиарды — мне неизвестно.

Любите ли вы историю компьютеров так же, как люблю её я? 🙂

#retro #history

#фишка дня

Как анимировать элемент по клику на чистом CSS?

Ведь псевдокласс :active даётся ровно в тот момент, когда ты нажимаешь кнопку мыши и тут же пропадает, как кнопка была отжата.

Например, как сделать эффект «копирования» текста, как на видео? Совсем неохота навешивать что-то ещё на onmousedown и onmouseup...

Ответ на самом деле не столь очевиден, как может показаться. И имя ему :not(:active).

Схема работы проста. Навесили конечное состояние перехода на неактивное состояние, а на активное — установили начальное.

Выглядит в итоге как-то так:

https://codepen.io/alinaki/pen/wvEdaWG

И никакого жонглирования классами не надо.

#css #active #click #animation

#статья дня

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

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

Техника называется full bleed. Я не знаю, как точно перевести.

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

Вот так: https://codepen.io/hexagoncircle/pen/gOWjwme

Альтернативный вариант: https://codepen.io/maartenbruggink/full/eYWjxae

Раньше такое делалось жонглированием полями, теперь же у нас есть гриды.

И у небезызвестного Джоша Комо есть статья как раз об этом: https://www.joshwcomeau.com/css/full-bleed/

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

Всем full bleed, котаны!

#css #fullbleed #gallery

#codepen дня

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

Без JS тут не получится. Нужно посмотреть в сторону событий animationend и transitionend.

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

Так что вот: по mousedown класс задали, по animationend сняли. Всё просто: https://codepen.io/alinaki/pen/XWPgMXb

Не переключайтесь.

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

Устал вручную типизировать ответы от API для TypeScript или любого другого типизированного языка?

Есть решение!

https://app.quicktype.io/

Фиганул туда JSON — получил нужную структуру или описание типа, даже с тайпгардами. Уютненько!

Есть расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype

Ещё один мощный инструмент в тему дня: https://transform.tools. Одним типизированием JSON не ограничивается: можно CSS в Tailwind, а можно Flow в TypeScript.

Вот, например, если кто использует Zod — конвертор типов в схему Zod: https://transform.tools/typescript-to-zod

#json #typescript #type

#такое дня

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

Что это такое? Всё просто: это диаграмма принятия Slack'ом решения, показать или нет пользователю push-уведомление о пришедшем сообщении.

Хотя, казалось бы...

#work

#фишка дня

А знали ли вы, что в регулярных выражениях в JS можно указывать не только символы и диапазоны, но и названия групп символов в Unicode (т. н. property)?

Что такое группы Unicode? Ну, например, ASCII, Alpha, Diacritic, White_Space, Emoji. Вроде говорят сами за себя, вот они все: https://unicode.org/reports/tr44/#PropList.txt

Так вот, потребовалось вам, например, отфильтровать только эмодзи из текста (или узнать, есть ли они там вообще), нет ничего проще: /\{Emoji}/u.

Смотрим на видео, благодарим Стефана Юдиса за предоставленное знание.

А, ссылка на MDN, естественно: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes

#js #unicode #regex

#фишка дня

А вот как сделать полосатый текст, да так, чтобы даже переносы учитывались верно?

Вот такой: https://codepen.io/chriscoyier/pen/BaOZpVm

Очень просто! Но не везде... весь секрет в двух штуках:
1. Уже упомянутый в канале -webkit-background-clip: text
2. Единица измерения lh aka line-height, интерлиньяж, буквально.

Правда, поддержка пока только в Chrome (Blink) 😅 Но кого это останавливало когда, верно?

Статья на тему есть в блоге Chris Coyer. По ссылке ещё интересное решение, чтобы сделать... полосатость надёжнее.

#css #zebra #gradient

#заметка дня

Четыре способа убрать слушатель события с кнопки!

1. removeEventListener. Сработает, естественно, только с именованной функцией. Неважно, объявили внутри addEventListener, или снаружи. Обсуждали вот тут: https://t.iss.one/htmlshit/1555

2. Свойство once в настройках addEventListener:

document.querySelector('#btn').addEventListener('click', () => {
console.log('clicked');
}, {once: true});

3. AbortController. Отличная концепция, который подходит для многого, не только для слушателей событий (промисы, например).

Сигнал для него тоже настраивается через свойства addEventListener:

const controller = new AbortController();

document.querySelector('#btn').addEventListener('click', () => {
console.log('clicked');
}, { signal: controller.signal });

// аборт корабля!
controller.abort();

4. Ну или просто склонируйте кнопку саму на себя, так тоже можно 🤡

#js #events

#фишка дня

Эмодзи вместо курсора? Нет ничего проще! Смотрим КДПВ и, конечно, пример: https://codepen.io/alinaki/pen/oNPpQrQ

Конечно, через SVG можно и более интересные курсоры создавать, только придётся через base64 кодирование прогонять: https://yoksel.github.io/url-encoder/

Ну а конкретно для эмодзи-курсоров имеется целый инструмент: https://www.emojicursor.app/

Всем 😜🙈🤡🤖, котаны!

#css #svg #cursor #emoji

#заметка дня

Что делать, если нужная вам библиотека не предоставила типы для всех публичных методов?

Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?

Делать unknown или any? Копировать и переопределять с помощью as?

Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype

Пример использования — на иллюстрации. Ну или ещё можно так:

const createPerson = () => ({
firstName: 'John',
lastName: 'Doe'
})

type Person = ReturnType<typeof createPerson>

Не делайте ерунды, котаны. Читайте документацию.

#typescript #ts #types

#фишка дня

Эмулируем различные особенности зрения легко и просто!

Если залезть в Chrome DevTools, нажать на три кнопки, выбрать Rendering и найти раздел Emulate vision deficiencies, можно легко понять, как видят ваш сайт, например, люди с искажённым цветовосприятием. Дальтоники.

Список эмулируемых особенностей:
1. Нечёткое зрение (тут и близорукость, и дальнозоркость подойдёт)
2. Протанопия (нет красного)
3. Дейтеранопия (нет зелёного)
4. Тританопия (нет синего)
5. Ахроматопсия (нет цвета)

В Chrome 112 нас ждёт ещё возможность имитировать пониженную контрастность (для имитации катаракты, например): https://developer.chrome.com/blog/new-in-devtools-112/#reduced-contrast

А ещё они сделают пункты выбора более понятными :)

#a11y #chrome #devtools