#ссылка дня

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

Во Франции есть такой институт 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

#статья дня

Сколько языков вы можете насчитать в браузере?

HTML, CSS, JavaScript, SVG... XML туда же в целом. Ну, это если брать современные.

А что если есть ещё один? И он позволяет делать потрясающие эффекты. И язык этот — GLSL. OpenGL Shading Language. С-подобный язык описания шейдеров.

И вот в представленной статье рассказывается, как сделать эффект сливающихся блямб на Three.js и GLSL: https://mofu-dev.com/en/blog/gooey-shader/

Вообще, шейдеры штука максимально мощная. Даже в вебе. Достаточно посмотреть на галерею https://www.shadertoy.com/

Математики море, конечно :)

#glsl #webgl #threejs

#фишка дня

Давайте вдогонку к шейдерам реализуем похожий эффект на чистом CSS. World of Goo, если вы понимаете, о чём я.

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

Но как добиться эффекта соединения двух капель? Выкрутить контраст на 11!

Если ты не знаешь, что такое выкрутить на 11, ты не настолько стар, как я. Поздравляю. Вообще это из фильма This is Spinal Tap. Неважно.

Помните пост про режимы наложения? Вот этот: https://t.iss.one/htmlshit/1836

Секрет эффекта в том, что выкручивание контраста сильно повышает резкость картинки и даёт возможность творить странное.

Короче, смотрим тут: https://codepen.io/alinaki/pen/wvEmroe

Думаю, есть, как минимум, ещё вариант с SVG.

#goo #css #blob

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

Кто сократил время билда с шестидесяти секунд до четырёх?

Правильно, я. С помощью этого милого крабика с КДПВ.

Проект называется Rspack: https://www.rspack.dev/

Чем хорош помимо скорости?

Ребята не стали придумывать велосипед, а сделали Webpack-подобный инструмент с аналогичным API для плагинов и максимально совместимым конфигом.

Поддержка sass-loader, postcss-loader, less-loader из коробки. Удобная (и понятная!) работа с ассетами, адекватное управление путями.

Да, не все плагины работают из коробки. Например, NormalModuleReplacementPlugin не заработал. Но за ускорение в 15-20 раз я готов немного переделать процессы (а не переделывать всё вообще, как предлагает тот же Turbopack).

Для некоторых лоадеров имеются замены, чем я не преминул воспользоваться. Больше никаких MiniCssExtractPlugin. Поддержка HTML тоже из коробки.

В общем, мне нравится. Одобрение на внедрение я получил, проведём аудит кода и вперёд.

И вам рекомендую попробовать.

#webpack #rust #rspack