никто:
theguardian.com: я веган

...
Вот кого-то распирало, вы поглядите.

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

Как потырить понравившуюся SVG с сайта в учебных, конечно же, целях?

Поставить себе SVG Gobbler!

https://www.svggobbler.com/

Скачать, оптимизировать, посмотреть код — без лишних действий.

#svg #extension #бородач

На сайте рекомендуют только Chrome, но на самом деле такое-же расширение есть и для Firefox
https://addons.mozilla.org/en-US/firefox/addon/svg-gobbler/

#книга дня

На сцене снова (раз, два) Александр Беспоясов. На сей раз с книгой «Refactor like a superhero».

Выложена на Гитхабе, на двух языках: русском и английском. Выбирайте любой, засылайте PR-ы на исправления и дополнения.

Читаем, не стесняемся!

#book #refactor #бородач

#ссылка дня

Сегодня я подобрал максимально красивый ресурс: набор демок на WebGL: https://ykob.github.io/sketch-threejs/

Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально.

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

#js #webgl #бородач

#статья дня

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

Например, основной контент находится посредине и занимает в ширину 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 #бородач

#такое дня

Если вы не знали или не понимали, что такое "секрет Полишинеля", я вам сейчас всё объясню.

Тут выяснилось, что в браузерах на основе движка Blink (Chrome, Brave, Edge, Яндекс.Браузер сами проверите) есть специальное скрытое расширение, которое предоставляет сайтам Google данные о нагрузке на компьютер по каждой вкладке отдельно.

То есть, если Google определяет, что звонок в Meet слишком нагружает систему, он может что-то с этим сделать, ухудшить качество видео или, наоборот, улучшить, если есть запас.

Казалось бы, ну и что такого? А то, что конкурентам подобное недоступно. Тот же Zoom потребует дополнительных телодвижений.

ID расширения: nkeimhogjdpnpccoofpliimaahmaaome
Название: hangout_services.

Предоставляемые дополнением данные отображаются в сервисе meet.google.com в панели "Troubleshooting".

Ну что, это уже недобросовестная конкуренция, или так и надо? :)

#google #chrome

#расширение дня

Ну что, мы с вами уже наворовали SVG со всего интернета, пришло время воровать кнопки!

Видимо, так подумал Анатолий Зенков, создавая своё расширение с незамысловатым названием Button Stealer.

Механизм работы похож на игры без игрового процесса: просто ходите по сайтам, а коллекция сворованных кнопок автоматически пополняется.

Покажи мне свои кнопки и я скажу, кто ты.

#chrome #button #stealer

#статья дня

Итак. Я когда-то вам разгонял про фреймворк RICE. И нет, это не про джаббаскрипт, это про работу. Как сортировать задачи, грубо говоря. Что важно, что менее важно. А что не нужно. Вот тут: https://t.iss.one/htmlshit/1249

Думаете, это просто теория? Вот и народ из Shopify тоже так думал, а в итоге стали переводить своё мобильное приложение на React Native согласно приоритетам, рассчитанным по RICE. Золушки, ага.

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

Собственно, вот оно: https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native

Получилось долго.

#react #native #rice #бородач

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

Предположим, тебе заказали разработку Flutter или React Native приложения. Да даже Cordova или Ionic. Предположим, ты даже справился. Настало время собирать под iOS. И тут облом. Нужна macOS.

Можно купить старый мак, можно завести виртуальную машину, обмазавшись ютубом и tonymacx86.

А можно воспользоваться Docker и вот этим прекрасным репозиторием: https://github.com/sickcodes/Docker-OSX

Куча рецептов прямо в Read.me, куча полезных скриптов. В общем, надо брать и пробовать.

Отпишитесь потом о результатах, ок?) Тоже при случае попробую. Прост мак-то есть)

#docker #macos #бородач

#видео дня

Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).

Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен…

Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёрстки.

Эффективность 9000, короче.

#emmet #filter #blend #бородач

#новость дня

В node.js появилась экспериментальная нативная поддержка TypeScript!

Крепко же их bun приложил...

Ссылка на PR: https://github.com/nodejs/node/pull/53725

По факту происходит отбрасывание типов, поэтому средства вроде Enum и namespace не поддерживаются. Инициатива предоставления стабильного API поверх TypeScript получила название amaro и в дальнейшем планируется выделение в отдельный обновляемый модуль. Работает (кто бы сомневался) при помощи swc, собранного в WebAssembly!

Так что никаких больше ts-node!

node main.ts

...и поехали!

#node #typescript #ts

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

На моей памяти было два веб-приложения, позволяющих в некой мере понять, как работает SVG:
раз и два.

Суть в том, что иногда недостаточно просто взять и нарисовать SVG в редакторе, хочется понять принцип отрисовки, позиционирования, заливки и контуринга.

И да, пусть эти приложения на фоне настоящих редакторов выглядят смешно, настоящие редакторы не спешат делиться своими секретами рендеринга. Хотя наверняка какие-нибудь расширения для люстры, инкскейпа или фигмы должны иметься... но их реализация сильно зависит от движка проекта. Ладно, мы отвлеклись.

Итак, вашему вниманию проект с говорящим названием svg.wtf от Амелии Ваттенберг.

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

Думаю, надо попробовать заслать ей скрипт для переориентации кривых (из моего любимого editor.method.ac), это когда вместо трансформов кривые возвращаются к простым координатам.

В общем, больше редакторов богу редакторов!

#svg #tool #education

#фишка дня

— Криса Койера знаешь?
— Нет
— Дядька мой

Ладно, кроме шуток. Часто CEO вашей компании даёт стримы и уроки по вёрстке? А CEO CodePen — даёт. От скуки, может?

И тема сегодняшнего выпуска — offset-path. Или как заставить объект следовать контуру.

Сразу демо: https://codepen.io/chriscoyier/pen/ZEdpVev

Весь кайф в том, что offset-path принимает не только описание кривой SVG, но и значения боксовой модели вроде border-box, что означает, что в качестве кривой будут границы родителя!

Да, как правило речь почему-то всегда о круге или волне, но, по-моему, следование квадрату не менее эффектно.

Ну и вообще в официальном твиттере компании CodePen много неожиданного вываливают.

#css #path #animation

#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...

Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.

И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols

Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons

Естественно, вы можете скачать SVG и PNG.

Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.

Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.

К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.

#fonts #icons #google #material #бородач

#фишка дня

Вот вы знали, что в слушатель события можно передать AbortSignal и не выкаблучиваться с именованными функциями и вообще перестать слушать много событий разом, если надо?

А вот можно! Как в этом примере от Мэтта Покока.

И больше таких приятных современных вещей описано в статье Марка Грабански. Крайне рекомендую к ознакомлению.

#js #event #abortsignal

#фишка дня

Как-то так получилось, что на мобильных устройствах работать с файлами и буфером обмена ну... неудобно.

И ладно iOS, но на Android тоже интерфейсы такие себе. Даже на Windows Mobile и PalmOS было как-то... стандартнее чтоль.

С другой стороны, появилась идея шэринга, aka share. И она на самом деле отвечает запросам людей: перекинуть файл из одного приложения в другое, а что нам ещё нужно-то?

Итак, встречайте: Web Share API.

Пользоваться очень просто:

navigator.share({
  title: "Будни разработчика",
  text: "Фронтенд и не только",
  url: "https://t.iss.one/htmlshit",
});

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

navigator.share({
  files: [file],
  title: 'hello.png'
});

На десктопе, к сожалению, не работает. Но там у нас иные средства имеются.

#web #share #api

#фишка дня

Используешь сложные CSS-селекторы в JS-коде? Ошибка!

Не используешь при этом CSS.escape? Фатальная ошибка!

Самый яркий пример когда это может пригодиться: useId в React выдаёт код, который непригоден для прямого использования в JS. А ты это потом используешь, да-да.

В общем, смотрим на картинку, просвещаемся.

Ну и дублирую пример текстом, конечно:

document.querySelector(`[href=${CSS.escape('@')}]`); // "[href=\@]"

Так-то. Спасибо Стефану Юдису за эту находку.

#css #escape #бородач

#подарок дня

Когда твой бывший коллега зовёт поговорить за жизнь — и вручает собственноручно отпечатанный и покрашенный кубок 🥰

Приятно!

#фишка дня

Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.

Итак, давайте поясню для тех, кто по ссылкам не ходит.

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

TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.

На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.

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

Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.

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

Кстати, выбор Emoji из всплывающего окошка — туда же.

В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)

Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010

И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.

#javascript #composing #event