#фишка дня

Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?

Места на экране мало, ещё и клавиатура съест.

Очень просто! Использовать атрибут enterkeyhint!

Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

Поддержка: https://caniuse.com/?search=enterkeyhint

Пользуемся!

#mobile #form #html

#статья дня

Любите ли вы Markdown так, как люблю его я?

Даже диаграммы составляю в текстовом виде, как многие мои читатели уже знают: https://t.me/htmlshit/913

Терпеть не могу WYSIWYG с первых дней использования компьютера. Никогда не работает так, как надо, и один хрен никто не знает, как правильно использовать стили и контекст. Что-то не то нажал, и вот у тебя весь документ курсивом. А визивиг-редакторы на сайтах это вообще источник бесконечной боли: мусорная разметка, незакрытые теги, инлайн-стили…

Хотя кому-то проще и на кнопочку В нажать, да… но не суть.

Поэтому я крайне обрадовался новости, что и в Google Docs теперь официально появляется возможность писать Markdown: https://www.theverge.com/2022/3/29/23002138/google-docs-markdown-support-formatting-update

Всё есть текст. Всё будет текст.

#google #markdown

#codepen дня

Хотите фотографической точности? Их есть у меня.

Более ювелирной работы с тенями я не нашёл. Поделитесь?

https://codepen.io/ivorjetski/pen/xMJoYO

#shadow #picture

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

Тема генерации градиентов буквально неисчерпаема. Вот подъехал ещё инструмент: https://components.ai/gradient/rfx04toi2Bx4GLUxPpdV

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

Удобный предпросмотр и экспорт в React-компоненты наличествуют.

#gradient #css #tool

#тред дня

На прошлой неделе сайт правительства Соединённого Королевства — gov.uk — отказался от jQuery.

Т. о. они выкинули 32 кб минимизированного и сжатого кода, который надо не только скачать, но и обработать.

Какие же результаты? Давайте глянем.

Собственно, вот тред: https://twitter.com/TheRealNooshu/status/1509487050122276864
Вот версия для чтения поудобней: https://threadreaderapp.com/thread/1509487050122276864.html

TL;DR

Снижение нагрузки на CPU от 3% до 10% что положительно сказалось на UX пользователей с мобильных устройств.

#js #seo #performance

#фишка дня

Хотите расположить текст вдоль контура (кривой)?

Да без проблем! Смотрим КДПВ. Поддержка только в Chrome!

Ладно-ладно, вот вам демо: http://codepen.io/t_afif/full/eYEQbmg

#css #path #svg

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

Я довольно часто выкладываю посты, где КДПВ является кусок кода. Вся рубрика #фишка дня этим питается.

Тут я соберу ссылки на различные сервисы для создания подобных скриншотов. А вы дополните. Поехали:

https://ray.so/
https://carbon.now.sh/
https://codezen.rishimohan.me/
http://codeimg.io/
Что меня забавляет в этой группе — все по-умолчанию делают скриншот в стиле macOS. Зачем? Пёс его знает. Красивое.

https://codeimg.io/
Прелесть этой утилиты — предопределённые размеры изображения под разные соцсети.

https://codekeep.io/
Это, скорее, хранилище сниппетов, нежели инструмент создания скриншотов.

Ну и немного расширений для VS Code:
https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
https://marketplace.visualstudio.com/items?itemName=robertz.code-snapshot
https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Пост был бы неполон без http://codephoto.ru/

С этим сервисом вас ни в один чат не пустят :)

Миру нужна красота.

#codepen дня

Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.

Так вот.

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

И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO

Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.

Думаю, стоит попробовать на базе этого кода сделать расширение для Figma…

А то часто встречаю весьма халтурный подход.

#js #grid #img

#статья дня

Пожалуйста, прекратите писать shell-скрипты.

Это не моя просьба, а автора статьи: https://pythonspeed.com/articles/shell-scripts/

1. Они по-умолчанию не останавливаются в случае ошибок
2. Использование необъявленных переменных не приводит к ошибкам
3. Пайпы не ловят, опять же, ошибки
4. Вы можете запустить встроенный шелл внутри скрипта, но работать это будет странно

Также автор указывает на те ложные причины, которые «заставляют» нас писать шелл-скрипты.

Есть перевод на русский язык: https://habr.com/ru/company/otus/blog/657841/

Всем bash!

#shell #bash #nix

#такое дня

Вы же в курсе, что почти во всех современных телефонах есть гироскоп?

Но зачем?

Ну... можно зайти на https://gyroco.de/ и понять

...или не понять

#gyroscope #api #js

#библиотека дня

Скучаете ли вы по тому времени, когда новые JS UI- и не очень фреймворки появлялись каждый день?

Тогда я вам принёс!

https://corset.dev/

Вы ведь так хотели объявлять UI-взаимодействия в CSS-стиле, правда?

Куда уж декларативней…

Но на самом деле, это весьма интересный концепт связывания (биндинга) DOM и действий.

#css #js #ui #framework

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

Знаете же о существовании утилиты less в Linux? Быстрый просмотр файлов.

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

И тут на помощь придёт jless!

🌍 https://jless.io/
🐙 https://github.com/PaulJuliusMartinez/jless

Написан на Rust, имеется во многих пакетных менеджерах и в Homebrew.

Очень удобно 👍

#rust #cli #json

#ссылка дня

Тимлид я ещё довольно молодой, приходится учиться всему на лету и черпать знания отовсюду.

Поэтому, было весьма интересно найти роадмап (карту знаний и умений) по этой теме: https://tlroadmap.io/

Работать с ним можно буквально как с картой, выбирая нужные ветки, или же как с документом: https://tlroadmap.io/guide.html#%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D0%B8-%D0%BF%D0%BE-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8E

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

#teamlead #learning #roadmap

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

1) Google Pay. Приходится теперь брать карточки с собой и вспоминать пинкоды. Оплата, одна большая проблема.
2) Spotify не продлить подписку
3) Strava - не работает
4) Занимался на Cambly - не оплатить. + Подорожало ~ в 3 раза .
5) JetBrains - остановил продажи и теперь не понятно как продлить лицензию
6) Netflix - не продлить подписку.
7) GoDaddy - прекращает обслуживание доменов.
8) Paypal - не работает
9) Upwork - приостанавливает работу, хотят как выводить деньги уже не понятно.
10) Hetzner - проблемы с оплатой.

Самые неприятные, это последние 3 пункта. Не прининять валюту, не расплатиться.
Т.е поделать, что-то за доллары на стороне уже не получится, а с таким курсом было бы кстати.
И за кластер не могу заплатить. Дима выше писал, что возможны swift-переводы, но я пока только переписываюсь с тех поддержкой.
Хорошо, что теперь IaC + сегодня сниму бэкапы 📦

Жду отключение хрома и пикселя 🥸

#codepen дня

Огромных летающих 3D-заголовков заказывали?

А я всё равно принёс!

Игры с перспективой и 3d-преобразования творят чудеса, конечно.

https://codepen.io/amit_sheen/pen/BaJmWWj

#css #3d #parallax

#фишка дня

Некоторые люди до сих пор отлаживают фронтенд через console.log(). Ещё более упоротые — через alert().

А чем верстальщики хуже? Давайте отлаживать через аутлайны!!

Не, ну правда: https://dev.to/gajus/my-favorite-css-hack-32g3

Иногда даже полезно. А главное, сниппет выглядит шикарно.

P. S. не отлаживать, а откладывать.

#css #debug

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

Снова фигнюшечки для SVG подъехали: https://svgdoodles.com/

Конкретно это — коллекция “вручную” нарисованных линий, кругов и стрелок, чёрточек…

Но на ресурсе есть ещё ссылки на генератор SVG-градиентов и весьма забавных фонов в виде волны.

#svg #generator #gradient

Блокировали, блокировали, да невыблокировали­

В Шри-Ланке правительство ввело запрет на использование соцсетей из-за массовых протестов граждан.

Дошло в результате до того, что племянник президента запустил VPN и написал в Твиттере, что блокировки «совершенно бесполезны».

Спустя менее 16 часов запрет сняли.

Глава интернет-регулятора Шри-Ланки подал в отставку сразу после вступления в силу приказа о запрете.

Такие дела.

@applespbevent #в_мире #vpn

#codepen дня

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

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

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

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

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

#css #grid #animation #scss

#ссылка дня

О проекте Веб-стандарты вы все наверняка знаете. И о сайте, и о статьях, и о подкасте. Ну и фигура Вадима Макеева в Рунете не последняя.

Так вот, у них во всех статьях и обучающих материалах используется один словарь: https://github.com/web-standards-ru/dictionary

Без единообразия в терминах разработка была бы весьма сложной, согласитесь.

Естественно, это не единственный подобный словарь. Есть ещё как минимум у каждого курса ну или вот например ребята из доков реакта постоянно работают над своим: https://github.com/reactjs/ru.reactjs.org/issues/4

#web #dictionary

#фишка дня

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

Пока только Safari 15.4 поддерживает полностью, но Chrome/Blink давно уже давали эту возможность “за флагом“.

Думаю, будет целая серия таких постов с приятными и удобными фишками нового селектора. Почему бы и нет.

#css #future #has