#фишка дня

Тут ко вчерашнему опросу в нашем чате было сказано, мол, input type=“image” это что-то из времени, когда верстали таблицами.

Не, ну так-то да. Зачем использовать картинку для отправки формы вместо нормальной полноценной кнопки, тега button? Это, кстати, касается и input type=“button”. Да так-то незачем, но всегда есть «но».

Поле ввода-картинка по-умолчанию отправляет координаты клика по ней, x и y. А если задать полю ввода атрибут name, например, pic, то будет pic.x и pic.y. Гляньте сами: https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html

Работает вообще везде, JS не требует. Можно реализовать капчу для бедных или игру. Я вот в интерактивных комиксах когда-то использовал. Или, например, для фокус-кропа одним кликом.

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

#input #forms

#codepen дня

Talk is cheap, show me your... variable fonts!

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

А пока, давайте попробуем сделать забавный эффект: https://codepen.io/tin-fung-hk/pen/QWQLeOM

Как всегда, код простой для понимания, стоит побаловаться.

#fonts #css #js

#оффтоп дня

Точнее, ну как, оффтоп… мы все пользуемся Телеграмом и, в целом, бесят некоторые вещи всех одинаково.

Итак, сегодня на повестке дня индикатор непрочитанных реакций в чатах. Злосчастное сердечко.

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

1. Длинный тап (долгое нажатие) или клик правой кнопкой мыши на этом сердечке: “Read all reactions”.

2. На iOS нужно сделать 10 тапов по шестеренке/аватарке: “Reindex unread counters”. Там, кстати, много полезного, целое инженерное меню.

3. В Android-версии для доступа в инженерное меню необходимо сделать два длинных тапа по версии телеги в настройках, внизу. И выбрать “Read all chats” или “Reset chats”.

Пост дополняется...

И не нервничайте так.

#telegram #feature

#такое дня

Разгребал рабочие завалы и обнаружил кое-что…

Первую коммерческую работу, из 2006 года, я уже показывал: https://t.me/htmlshit/518

Пришло время показать ещё кое-что. В продакшен не пошло по разным причинам :)

Итак, 2011 год. Популярны городские сети и файлопомойки. У нас такая называлась SWAP.

У неё был интерфейс для загрузки файлов людьми, с торрентов и “осла”. Был даже веб-интерфейс для просмотра загрузок и админка для редактирования. Естественно, были и инициативные группы :)

В какой-то момент провайдер решил взять это в свои руки. Начался процесс редизайна.

Вёрстка так себе по современным меркам: ID-селекторы, нет БЭМ, нет семантики (почти). Кое-где даже атомарные классы.. Адаптива не существовало вообще.

Но вот выглядит до сих пор неплохо. И должно работать даже в IE6-7.

Встречайте:
Главная страница
Список фильмов
Страница фильма

Задавайте ваши вопросы по стилю вёрстки и кода.

Завтра скину полную реализацию таб-меню с этих страниц, если интересно :)

#life #work #retro

#статья дня

Вильям Кеннеди написал исчерпывающий трактат в защиту single-page applications aka SPA aka веб-приложений.

Рекомендую ознакомиться: https://williamkennedy.ninja/javascript/2022/05/03/in-defence-of-the-single-page-application/

Пойдёт в копилку любимых статей, наряду с руководством об упорядочивании файлов в веб-приложениях от Дэна Абрамова: http://react-file-structure.surge.sh/ 😉

#article #jff

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

Тут недавно в комментариях проскочил вопрос, чем так удобна командная оболочка zsh (Z shell) и набор расширений к ней Oh My Zsh. Чем оно лучше bash и вообще — ну зачем?

Ну короткий ответ — Tab умнее :)

Длинный — плагинами! Я не буду распыляться сейчас вообще, просто покажу один из свежих: автодополнение по npm-скриптам! Поддерживаются npm, yarn и pnpm.

Видео говорит само за себя, но что конкретно мне нравится — отображается не только команда, но и сам скрипт!

https://github.com/grigorii-zander/zsh-npm-scripts-autocomplete

Я сам только начинаю путь в zsh, но дефолтные настройки того же Oh My Zsh очень удобные.

#zsh #plugin #tool #linux #macos #wsl

#такое дня

Продолжаем погружение в ретроспективу вёрстки и дизайна из начала 2010-х. Конкретно, 2011 год :)

Пару дней назад я показал здесь практически целиком отвёрстанный проект: https://t.me/htmlshit/1095

Сегодня же посмотрим на полную версию меню оттуда, прямо вот тут.

Это было очень весёлое время: выпадающие меню на пике популярности, даже были так называемые мега-меню, когда в одном пункте отображалось информации больше, чем на некоторых страницах. К счастью, это время ушло — на мобильные устройства подобную навигацию было дико сложно переносить. Апофигеем этого, как вы можете помнить, стал интерфейс Ribbon в MS Office. До сих пор его ненавижу.

Вёрстка этого меню, опять же, должна была работать на IE6, отсюда и отсутствие before-after псевдоэлементов, например. А вот почему я не использовал технику sliding doors для табов — хороший вопрос…

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

В общем, я считаю, что смотрится до сих пор круто. А вы? :)

#retro #menu #css

#заметка дня

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

В Heroku уже две недели творится неладное. Сначала утекли OAuth-токены (включая интеграцию с GitHub), теперь оказалось, что ещё и хешированные, конечно, но все же доступы к БД.

Не завидую я ни им, ни их клиентам, в общем: https://status.heroku.com/incidents/2413?updated

Мимо меня вся эта истерия сервисов деплоя как-то мимо прошла, мне проще было сервер развернуть в своё время. Есть в этом и плюсы, и минусы, конечно.

В общем, берегите себя и свои данные :).

#heroku #security

#ссылка дня

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

Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.

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

Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.

Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers

Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.

Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).

#docs #explainers #process

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

Лучший email — текстовый email.

Жаль, что маркетологи считают иначе… и продолжают требовать красиво свёрстанные письма, с картинками, таблицами, поддержкой IBM Lotus и Outlook Express 2010… брр.

Можно, конечно, обратиться к признанным мастерам табличной вёрстки. Но вот беда — их с каждым годом становится всё меньше.

Поэтому давайте обратимся к современным способам: MJML.

Mailjet Markup Language. Mailjet — это контора такая есть… или была. Короче говоря, набор React-компонентов для простой вёрстки писем.

Репозиторий: https://github.com/mjmlio/mjml

Все ещё лень верстать даже так? У них есть шаблоны и онлайн-редактор!

Сказка, короче.

#email #markup #mjml