#codepen дня

Есть тут любители механических клавиатур, кому на работе или жена запрещает использование из-за клацанья?

I got you!

Глядите, какая штука, симулятор механической клавиатуры:
https://codepen.io/ykadosh/pen/bGKgxbe

Набираете циферки на своей — клацает экранная. Ну разве не прелесть?

Прелесть.

#keyboard #sound

#статья дня

Задумывались ли вы о то, как нарисовать веревку? Канат, если точнее.

А как нарисовать веревку по заданному контуру? В SVG, короче.

А вот Станко, автор блога MuffinMan, задумался. И нарисовал. Сначала в блокноте, все как я люблю 😻

Собственно, статья: https://muffinman.io/blog/draw-svg-rope-using-javascript/

Снабжена подробными инструкциями, кодом, иллюстрациями и математикой. Каждый блок статьи предваряется картинкой с текущим статусом. И в конце будет генератор веревок — собственно, цель повествования.

Красивое.

#svg #js #math

#такое дня

Как часто вы видите новые браузеры?

Не очередное изделие или, скорее, поделие на движках WebKit, Blink и Gecko, а прям нечто новое, на своём движке.

Думаете, нет такого? А вот господа из проекта SerenityOS не думают. А просто сделали.

SerenityOS это такая Unix-подобная операционная система с графическим интерфейсом из девяностых. Ну и как-то случайно у них получилось в 2019 году сделать движок LibWeb, который тогда просто парсил HTML и назывался LibHTML. Ну и для выполнения скриптов набросали LibJS.

Откуда скриншот? С моего компа, я сам скомпилировал и собрал браузер несколько минут назад 🙂 И вы тоже можете, по инструкции. Очень просто.

Забавное чувство.

#browser #unix

#новость дня

СВЕРШИЛОСЬ!

Apple наконец-то, почувствовав угрозу, начала превращать PWA (Progressive Web Apps) в что-то более близкое к нативным приложениям.

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

Так вот, ранее такие приложения-ярлыки даже пуш-уведомления принимать не могли. Но начиная с iOS 16.4 — смогут!

Анонс от Apple: https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/

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

Вообще, в Safari 16.4 приземлится много всего интересного: https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes, ознакомьтесь.

#apple #safari #ios

#такое дня

Чат-бот поисковика Bing, кажется, может сотворить революцию. Я только пока не знаю, в чем.

Товарищ Андропов!

Я хочу сообщить вам о деятельности Сергея Бехарского, работающего веб-мастером в издательстве "Хекслет". Этот человек занимается антисоветской пропагандой и подрывом идеологии коммунизма. Он распространяет ложную информацию о HTML и CSS, утверждая, что эти технологии будут заменены роботами на рынке труда. Он также изготавливает и пьет финский квас с брусникой, который содержит алкоголь и нарушает трезвость советского народа. Он поддерживает контакты с западными агентами через социальную сеть Twitter, где он публикует свои провокационные сообщения.

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

С уважением,
Ваш верный товарищ.

#фишка дня

Всем JavaScript!

Ждём объяснений от экспертов в комментариях, да? 🧐

Да ладно. Побитовые операции — они такие.

Так и живём. Расставьте тут точки с запятыми сами :)

#статья дня

Ахмад Шадид: «Сегодня я искал изображения по запросу «container queries», и 8 из 15 иллюстраций были моими».

Скромненько так, да? А всё потому что у Ахмада одни из самых крутых статей по базе CSS. Его статьи про контейнерные запросы (суть, медиа-запросы, но от ширины контейнера) великолепно написаны и иллюстрированы. Но этим не ограничивается.

Вот и очередная статья про условные выражения вообще подытоживает много лет развития условий в CSS: https://ishadeed.com/article/conditional-css/

Медиа-, контейнерные запросы, @supports, различные настройки для flex и grid, has и +, focus-within — всё это условия, комбинируя которые можно достичь крутых результатов.

Есть перевод на Хабре: https://habr.com/ru/company/ruvds/blog/716496/

Условностей вам, котаны и котанессы.

#css #queries #condition

P. S. к слову, контейнерные запросы доступны во всех стабильных версиях современных браузеров!

https://web.dev/cq-stable/

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

#презентация дня

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

Итак, что у нас сегодня? А сегодня у нас прекрасное. Презентация Ивана Акулова с конференции 3perf: React Concurrency, Explained.

Сразу ссылка: https://3perf.com/talks/react-concurrency/

Рассмотренные топики:
1. React 17 и блокирующее выполнение
2. То же, но в React 18
3. useTransition()
4. <Suspense>
5. Проблемы

Демки тоже включены 🙂

В общем, это прям лучший транскриб, что я видел на данный момент. Очень удобно.

#react #concurrency #suspense

#статья дня

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

Нет? А вот мне приходилось... то ещё ощущение. Но есть вероятность, что понадобится и тебе.

Итак, какие есть варианты, помимо просто картинок?

1. Сочетать градиенты
2. border-image
3. SVG data-uri
4. Маскирование
5. Houdini API
6. Ну и далее везде — SVG.

Всё это есть в статье Шарлотты Дан «Fancy frames with css»: https://charlottedann.com/article/fancy-frames-with-css

Примеры крутые, пользуемся.

#css #frame #gradient

#ссылка дня

Matt Pocock, автор отличных обучалок и интересных подсказок по использованию Typescript опубликовал очень полезную библиотеку https://github.com/total-typescript/ts-reset, которая закроет недостатки вывода стандартных описаний типов.

Сам он ее сравнивает с решениями по сбросу CSS, но в данном случае все намного интереснее.

Наверняка вам часто приходилось выносить в модуль парсинг JSON и отдельно явно указывать вывод, либо просто "глушить вывод" по-месту... а что если вам не нужно больше этого делать и лишь один раз указать волшебный импорт?

import "@total-typescript/ts-reset/json-parse";

const result = JSON.parse("{}"); // unknown

А хотите, нормальный вывод Array.filter в случае приведения к булевому значению?

import "@total-typescript/ts-reset/filter-boolean";

const filteredArray = [1, 2, undefined].filter(Boolean); // number[]


Всё это и еще сверху описано в репозитории с примерами.

#подписчик #typescript

#учебник дня

А вы знаете, что вчера произошло? Да нет, не знаете. Наверное.

А вчера были выпущены завершающие модули учебника от деврелов Google Chrome с удивительным названием «Learn HTML!»: https://web.dev/learn/html/

Пресс-релиз от Рейчел Эндрю: https://web.dev/learn-html-available/

Вообще, у них много разных учебников, даже отдельный по картинкам есть, ибо это нынче непросто: https://web.dev/learn/

Дерзайте, котаны и котанессы.

#book #course #learn #html

#ссылка дня

Когда-то давно мы с Виталием Киренковым, автором канала «Просто: разработка» (в телеге и на ютубе) запилили красивый анимированный переключатель тем в браузере.

Причём, трёхпозиционный: авто, день, ночь. Получилось красиво, но я не смог выжать адекватную работу, без моргания, на мобильных устройствах. Так что в продакшен (на сайт канала) так и не пошло.

Вот оно, если кому интересно: https://codepen.io/alinaki/pen/gOLzbQE

Так вот, ссылка дня — это коллекция анимированных переключателей попроще. Скажем так, сильно попроще: https://toggles.dev/

Но их много, они оттестированные и довольно симпатичные.

Пользуемся.

#switch #dark #light

#статья дня

Забудьте всё, что вы знали о режимах смешивания 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 для обслуживания хостинга были легкоугадываемые.

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

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

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