#статья дня

Вильям Кеннеди написал исчерпывающий трактат в защиту 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

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

Кто-нибудь ещё считает, что подсказки и ошибки TypeScript страшно раздражают своей формальностью?

Say no more!

Появилось расширение, переводящее их на человеческий (ну… английский) язык!

КДПВ говорит сама за себя, а пока дам ссылку: https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator

Ну и песочница, чтоб побаловаться и понять: https://ts-error-translator.vercel.app/

Отправьте ей свою ошибку и давайте посмотрим на результат.

P. S. а ошибки типов Styled Components оно переведёт, как считаете?

#vscode #ts #typescript

#опрос дня

Кто требовал вопрос на понимание работы языка, а не на подвохи и внимательность? Готовьтесь отвечать.

#ссылка дня

Поскольку Netlify прокинул меня с вебинаром, придётся на них обидеться.

А пока давайте продолжим тему с вариативными шрифтами.

Наверняка все знают шрифт Roboto — дефолтный на Android и в целом уже очень популярный. Google на днях запилили его вариативную версию — Roboto Flex.

В статье на material.io — https://material.io/blog/roboto-flex — рассказана история его создания и проблемы, с которыми столкнулись авторы.

Ну а взять шрифт можно на Google Fonts: https://fonts.google.com/specimen/Roboto+Flex

#font #css