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

Пока мы тут эмодзи вместо курсора учились делать — https://news.1rj.ru/str/htmlshit/1861 — небезызвестный Wes Bos запилил целый стартап на тему. Я не шучу, там буквально на главной так написано: https://fav.farm/

В чём суть? Передаёте ссылку вида https://fav.farm/🤡 и получаете фавиконку для вашего сайта. Ну или курсор. Как получаете? В посте выше написано, как.

Но это не было бы так интересно, если бы не одно «но»: Safari не поддерживает SVG в фавиконках. Так что же делать?

Wes придумал запилить на Deno.js скрипт, который генерирует PNG из эмодзи, выдёргивая его из шрифта...

...а чтобы стало веселее — дёргает он их из шрифта от Samsung. А, как вы знаете, эмодзи на самсунгах максимально убогие 😈

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

#emoji #favicon #deno

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

Нужна карусель изображений на сайт? jQuery-плагины не катят? Swiper.js чёртов огромный монстр и уже набил оскомину? Slick.js глючный? Owl не поддерживается? Нужна интеграция с React, Vue, Svelte?

Встречайте: https://splidejs.com/

Splide написан на TypeScript. Лёгкий, быстрый, куча интеграций. Десятки примеров использования сразу на главной странице. Не портит SEO страниц. Lighthouse тоже очень даже зелёный.

Нет зависимостей и поддержка от IE10.

Просто праздник какой-то.

#slider #carousel #gallery #swiper #бородач

#нытьё дня

Итак, тема нытья сегодня: "Почему разработчики ОС с таким упорством вставляют палки в колёса переключателям языков ввода?".

Поясню, что я имею в виду. Начнём с Windows 11.

Мой личный ноутбук — ThinkPad с финской клавиатурой. При установке Windows я указал Eng (US) и Ru (Ru) раскладки клавиатуры, а ОС...

...подсунула мне финскую раскладку для британского английского! Неудаляемую!

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

Кто просил это делать изначально? Вопрос риторический.

Теперь Linux. Конкретно — версии с GNOME.

Баг, повествующий о потере фокуса с поля ввода при переключении языка висит в трекере уже много лет. А точнее — 10. Да, он помечен как просроченный, но проблема-то никуда не делась. И важность "Low" или "Medium". Ну то есть разработчикам похер. А ты, тем временем, чтобы переименовать папку или ввести поле тянулся каждый раз не только переключить язык, но и поставить фокус на место.

Плюс, если у тебя Alt-Shift, во многих приложениях начинали срабатывать индикаторы горячих клавиш (VS Code, например), что тоже сбивало фокус если ты использовал для переключения раскладки не штатную шину GNOME, а что-то стороннее или просто настроил в Tweak Tools.

Теперь перейдём к macOS, которая тоже умудрилась насолить.

На ноутбуках и клавиатурах года так с 2021 есть клавиша с символом глобуса. Как нетрудно догадаться, она переключает раскладку. Но:

1. Кнопка на внешней клавиатуре раньше не работала с ноутбуками, у которых такой кнопки нет (2019 год, например).
2. ОС показывает всплывающее окно, что вызывает задержку переключения до двух секунд
3. Но этого окошку было мало и пару версий macOS назад если курсор мыши находился в месте, где появляется окошко — автоматически выбиралась раскладка, попадающая под курсор. Гениально.

Ну с этим бороться было просто, хоть и смешно:
1. Включаем переключение языка через CapsLock
2. Переназначаем Fn-клавишу на CapsLock
3. CapsLock лично я переназначаю на всех своих машинах на Cmd (mac) или Ctrl (Win, Lin). Потому что я не пианист.

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

P. S. многие проблемы решает однозначное переключение языка кастомным хоткеем сразу на нужный.

#macos #windows #linux

#фишка дня

Я надеюсь, вас не смутит, что я сюда теперь буду иногда скидывать заметки для Windows PowerShell. Просто у меня очередной приступ усталости от Linux на десктопе, так что на личный ноутбук вернул Windows 11. Не знаю, надолго ли.

Вернул — потому что OEM. Не суть.

Так вот. Если вы ставите различные утилиты для разработки, от Git, Node.js через Volta до Android и Flutter SDK, вам нужно постоянно обновлять пути в переменной среды — Env — и перезаходить в консоль, чтобы утилиты стали доступны к исполнению.

Ну если вы не лох какой и пользуетесь консолью, конечно.

Так вот, первое, что меня убило — недостаточно просто запустить новую вкладку в Windows Terminal, как я бы сделал в любом эмуляторе терминала в macOS и Linux. Надо перезапускать всё приложение. Мерзость.

Чтобы этого избежать, нужно выполнить следующую команду: $Env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") .

И всё встаёт на свои места.

#windows #powershell

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

Ну что, пришло время поговорить о серьезных вещах!

А что может быть серьезнее ошибок TypeScript? Правильно, ничего. Уж слишком они формальные. И мы на самом деле уже с вами обсуждали расширение, переводящее их в человеческий вид: https://news.1rj.ru/str/htmlshit/1601

И вот есть ещё одно, стремительно набирающее популярность: https://github.com/yoavbls/pretty-ts-errors

Ссылка на VS Code store: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

Работает с Node и Deno, React и Vue, Solid и Qwik. Далее везде, в общем.

Пробуем, рассказываем о результатах.

Прокачивайте скиллы, котаны.

#typenoscript #ts #vscode

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug #бородач

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

Как тестировать свои (и чужие, ну мало ли какие у вас увлечения) проекты на валидацию всякой дряни?

Очевидный ответ — вводить в поля всякую дрянь.

А где её брать? Не в каждой голове столько всего удержится...

Есть решение: расширения для Chrome под названием Bug Magnet.

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

Тестируйте проекты тщательно, котаны.

#test #extension #chrome

#codepen дня

Давайте немного развлечёмся. Кто-то не так давно в чате канала выкатил большой SCSS-цикл для анимации, но саму анимацию зажал (ай-яй-яй).

Давайте исправим положение и сделаем что-то насущное.

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

Поехали: https://codepen.io/alinaki/pen/ZEaOdKq

Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.

#css #grid #animation #scss #бородач

#статья дня

До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?

Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javanoscript/terminal-for-js-devs/

Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)

#cmd #terminal #бородач

#статья дня

Начиная с iOS и iPadOS 16.4, ваши PWA-приложения могут не только принимать пуши, но и отображать число уведомлений на своей иконке.

Это про Progressive Web App, почему-то в русском языке всё время хочется прибавить слово "приложения", как в CD-диск — "диск".

API максимально простой, всё, что требуется — одобрение от пользователя, а дальше можно установить Service Worker для проверки push-уведомлений и поехали.

PWA становятся реальной альтернетивой растространению приложений через сторы, даже на iOS. Это очень хорошо. Я помню, как мы адски пропихивали промо-приложение в аппстор, и это при том, что жить ему надо было недели три и толку от него потом ноль.

Ну и, собственно, статья от разработчиков WebKit обо всём об этом: https://webkit.org/blog/14112/badging-for-home-screen-web-apps/

#ios #push

#статья дня

Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.

Итак, задумывались ли вы когда-нибудь о том, как происходит процесс создания дизайна интерфейсов или даже целой дизайн-системы? Что за этим стоит?

Я наткнулся на этот лонгрид Данилы Ковчия несколько лет назад, но периодически перечитываю. Материал просто огромный и, честно говоря, пытается покрыть всё разом. Этого бы хватило на несколько статей, уже не говоря о том, что его можно разобрать на посты и цитаты.

Очень грубо говоря — описан весь цикл создания дизайна продукта.

На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.

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

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

#design #ui #widgets

#видео дня

Что приходит в голову при упоминании сложных анимаций?

Ну, Lottie, очевидно. Кто-то что-то нарисовал в After Effects Bodymovin, потом это экспортировали в специально сформированный JSON и, собственно, плеером-плагином запустили в огромном количестве сред, от веба до мобил и десктопов. Да, ваши любимые стикеры и реакции в Telegram тоже Lottie.

Есть ли альтернативы? Конечно! Например, активно набирает обороты Rive. Это векторный редактор, заточенный специально под анимации.

Формат гораздо легче, чем у Lottie, а список поддерживаемых платформ (рантаймов) даже больше. Да, на стороне Lottie сообщество After Effects, но и это решаемо экспортом. Имеется и сайт сообщества со свободно скачиваемыми анимациями.

Ладно, к чему это я. Вот видеоурок по интеграции Rive-анимации в React-приложение: https://youtu.be/5hvhOb9zLeg

Анимация простая, но попробуйте скачать что-нибудь с сайта сообщества и попробовать сами :)

Удачи в анимировании, котаны!

#rive #инструмент #tool #lottie #animation

#ссылка дня

Олды тут?

Когда я начал официальную рабочую карьеру как верстальщик, в 2006 году, не было в интернете ресурса круче по CSS чем http://cssplay.co.uk/

И что-то мне подсказывает, что и нет.

Автору уже тогда было под 60, сейчас 74, но он фигачил и фигачит потрясающе сложные и при этом простые для понимания примеры вёрстки.

В 2009 году, например, в моде были выпадающие мега-меню, у него десятки их примеров. Естественно, без хаков для IE6 тогда не обходилось вообще ничего. Before, after? Забудьте. Flex? Забудьте. Float во все поля.

Коллекция меню поражает воображение. И до сих пор обновляется!

Раскладки на любой вкус и браузер. Всё категоризировано. Тоже обновляется!

Ну и он один из первопроходцев игр на CSS: http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html

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

Не старейте, котаны.

#бородач

#codepen дня

Меня этим видео достали. Мне прислали его все: жена, несколько друзей, мемовник, оно попало в два рабочих чата и личку, в чат канала (раза три), оно лезло из всех твиттер-лент.

В какой-то момент я устал быть душнилой и отвечать всем: "Но... ведь... SVG..."

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

А вот уже достаточно хорошо известный вам бывший деврел Google Джей не поленился и таки сделал этот чёртов переключатель!

Смотрите: https://codepen.io/jh3y/pen/LYgjpYZ

Явно покруче чем наш с Киренковым трёхпозиционный... пора поднимать ставки, котаны :)

Кто пасхалку найдёт?

В общем, меня забавляют эти дуэли. Надо бы поучаствовать в какой-нибудь :)

#tiktok #switch #design #challenge

#фишка дня

Как предотвратить взаимодействие пользователя с элементом?

pointer-events: none — скажете вы.

Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.

Благо, есть решение!

Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?

Ну, исходя из названия inert (инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).

То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).

Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.

Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB

#inert #attribute #html #a11y

#заметка дня

Для меня было небольшой загадкой, почему Vim, а по большей части, Neovim, так завирусился в последнее время.

Я использовал Vim активно лет 12 назад, имел огромный конфиг, но в итоге сполз с него на Sublime, Atom, а потом и VS Code. Причиной стала лучшая поддержка нужных мне инструментов. Vim остался горячо любимым редактором на удалённых серверах. И от конфига я отказался в пользу сырых режимов, это положительно сказалось на работе в разных средах.

К слову, Vim может искать по многогигабайтным логам легко и просто, а эти ваши VS Code и даже Sublime — нет.

Но суть не в этом. Суть в том, что Vim и другие независимые редакторы спасла… Microsoft. Как?

Раньше каждая IDE реализовывала свой механизм работы с конкретным языком. И как правило, это было некое проприетарное (в смысле непереносимое) решение. Но всё изменил приход LSP: Language Server Protocol.

Такого раньше не было: открытый стандарт взаимодействия редактора и языка. Автодополнение, ссылки, определения, документация… А главное, протокол-то открытый.

Поддерживается уже огромное количество языков и редакторов. И тут мы подходим к главному.

О преимуществах Vim есть огромный свежий тред Кирилла Мокевнина, CEO Hexlet: https://twitter.com/mokevnin/status/1567594899859546115

Оригинальный Vim не поддерживает LSP, зато его поддерживает Neovim. И тут все любители модальных редакторов получили второе дыхание.

Но вот я правда был очень удивлён, как Microsoft снова перевернула мир свободного ПО. Это, конечно, поразительно.

#бородач

#ссылка дня

Чем отличается alt от noscript? А border от outline? А *.d.ts от *.ts? А for..in от for..of? А display: none от visibility: hidden? А slice от splice?

Как же я задолбался форматирование применять.

Да весь фронтенд это нагромождение похожих по написанию или даже по сути вещей. Как разобраться?

И тут нам поможет проект https://thisthat.dev/. Он буквально проходится по таким скользким определениям или сущностям и разбирает каждый из них.

Проект открытый, предлагайте ваши == и ===.

#javanoscript #html #css #this

Управляйте проектами команд разработки

Yandex Tracker — сервис для совместной работы. Он поможет легко управлять процессами команды разработки: тимлид сможет планировать проекты и анализировать работу, а команда — общаться с коллегами и следить за приоритетами по задачам.

Tracker поможет эффективно выстроить процессы:

— управляйте задачами: настраивайте типы, статусы, параметры, используйте шаблоны, декомпозируйте;

— работайте по гибким методологиям (Agile) с помощью досок задач;

— контролируйте сроки и формируйте календарный план с помощью Проектов и диаграммы Ганта;

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

— автоматизируйте рутинные действия с помощью триггеров, автодействий, макросов;

— подключайте репозитории исходного кода и привязывайте коммиты к задачам;

— интегрируйте системы для сборки, тестирования, развёртывания приложений.

Вы можете легко перенести процессы в Tracker с помощью API или инструмента миграции.

Попробуйте Yandex Tracker прямо сейчас➡️

#статья дня

Я, честно говоря, плохо понимаю, как я пропустил появление тригонометрических и математических функций в CSS.

Добро пожаловать в ад девятиклассников.

Итак, хотите вы того или нет, но sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), exp() и так далее уже с нами.

Для начала можно попробовать въехать в abs, round, mod вместе со статьёй легендарной Аны Тюдор: https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/

А потом изучить обзорную статью о, собственно, тригонометрических функциях: https://web.dev/css-trig-functions/

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

Посмотрим, что из этого выйдет.

#css #sin #cos #math