⇤ На главнуюСова рассылает выпуск #20
Первый выпуск 2023 года! Я выбрал несколько статей, которые прочел сам, а также сервисы-инструменты для web-разработчиков.
Следующий выпуск #21 обещает быть гораздо более сочным (я обнаружил много-много технических ссылок). Но для начала я их прочитаю.
Алгоритм чтения технических книг
Я прочел довольно много технических книг в свое время, но не могу похвастаться, что все запомнил или же получил максимум профита из каждой. Так как мое время ограничено, я не могу сделать абсолютно все, что хочу, даже если потрачу целый год только на выполнение своих хотелок, приходится выбирать как использовать свое время и при этом не забывать об отдыхе.
Не каждая книга будет тебе полезна, но как понять будет ли она полезна именно тебе с твоим опытом и набором навыков, не читая ее полностью? В рамках заботы о своем времени и нервах предлагаю попробовать на себе простенький алгоритм чтения книг по программированию. Когда я понял, что технические книги нет смысла читать так же как и художественную литературу, то есть от начала и до конца, то стал читать гораздо меньше книг, но извлекать их них гораздо больше смысла.
Кстати, пункт 9 я бы сделал обязательным, ведь переработка информации в свой личный формат это лучший способ её усвоить. Иначе зачем вообще читать книги?
Meaningful motion with animations 🇺🇸
Автор спрашивает, как часто мы добавляем в наши интерфейсы красивые анимации? А насколько часто эти анимации несут хоть какой-то смысл, кроме красоты? Что они объясняют пользователю?
По идее, анимация это способ приблизить интерфейс к реальной жизни, к привычным законам физики: ничего не исчезает вникуда и не появляется из ниоткуда. Если что-то упало прямо перед нами, мы посмотрим вверх, потому что будем строить определенные предположения, откуда упал этот предмет, угрожает ли нам что-то еще. Все эти предположения мы строим исходя из предыдущего опыта и наблюдения за окружающим миром. Когда наблюдаемые являения не совпадают с нашим опытом, мы пугаемся и зачастую вынуждены учиться новому взаимодействию.
С интерфейсами примерно такая же история: пользователь получает опыт на других сайтах/приложениях, запоминает определенные паттерны и визуальные якоря в интерфейсах, а затем приходит в ваш интерфейс и пытается сходу использовать свой опыт, чтобы начать получать пользу от вашего приложения. Задача дизайнера и веб-разработчика — не мешать пользователю и максимально ему помогать без всяких всплывающих окон и долгих гайдов “мы тебя за ручку проведем”.
Автор разделяет анимации на две группы state-driven и action-driven. Каждая группа имеет свои причины для анимирования элементов, собственно этим и отличается. Хорошая анимация помогает пользователю разобраться в интерфейсе, запомнить новые паттерны и использовать уже существующие. Так как наши глаза лучше замечают движущиеся элементы, можно услышать совет: свести анимацию на странице к минимуму.
We use too many damn modals 🇺🇸
Очень хороший сайт-статья о модальных окнах. Неплохой обзор проблем модалок и как от них можно избавиться заменив другими визуальными паттернами. Советую проглядеть всем пет-прожект-мейкерам, дизайнерам и вообще веб-разработчикам. Иногда проще скинуть хороший референс в комментариях Figma, чем пытаться объяснять своими словами.
How to replace the 12-column grid 🇺🇸
Это даже больше техническая статья, нежели дизайнерская. Как вообще можно использовать display: grid и display: flex для верстки сеток. В каких случаях выбирать grid, а когда flexbox?
В примерах используется SCSS, но вы можете использовать те же подходы в любом виде стилей, хоть через --custom-css-properties.
Do not self-host email 🇺🇸
Карлос поддерживал сервер для своей личной почты в течении 23 лет, но потом все его письма начали падать в спам, если почта получателя была у больших публичных компаний, вроде Google. Карлос жалуется, что время распределенной и независимой почты подошло к концу, виноваты в этом корпорации, якобы борюшиеся со спамом.
Не хочу пересказывать все, что пишет Карлос, но я тоже сталкивался с подобными проблемами. Мне не очень хотелось платить огромные деньги за хостинг почты маленького стартапа, но ни один способ не помог поднять рабочий почтовый сервер. Письма либо АБСОЛЮТНО тихо исчезали, либо отбрасывались обратно, либо же попадали в спам.
Что отвалится, если выключить Cookies 🇺🇸
Однажды Томас получил репорт об ошибке: приложение не работает, если отключить Cookies. Но это странно, ведь приложение не использует кукис вообще, но при этом ругается на localStorage:
Uncaught DOMException:
Failed to read the 'localStorage' property from 'Window':
Access is denied for this document.
Please add fallback to js provided localStorage, because it makes the app unusable.После некоторого исследования проблемы, оказалось, что браузеры отключают целую массу Web API, при отключении Cookies. Это может быть крайне не очевидно, но в интернете достаточно пользователей с выключенными Cookies. Если не знать, о том, что некоторые API отваливаются в таких случаях, невозможно будет даже показать пользователю подсказку как решить проблему. В современных SPA пользователь увидит просто белый экран и уйдет.
Пришло время для нового Date API 🇺🇸
Сейчас невозможно работать с датой без времени. Например, я пишу финансовый трекер, хочу вытаскивать транзакции за определенный день. Очень удобно работать с датами через new Date, ведь можно сделать date.setDate(date.getDate() + 1) для перехода к завтрашнему дню.
Одновременно с этим возникает проблема с таймзонами браузера и сервера. Иногда таймзона сервера/базы и пользователя в браузере может отличаться на 10-12 часов из-за чего даты “сползают”. Приходится изворачиваться и обмениваться короткими датами "2023-02-27" и отдельно их парсить с обеих сторон.
Можно использовать библиотеки вроде luxon, date-fns, но это все не стандартные решения. Хочется качественное API для работы с датами прям в стандартной библиотеке. Собственно новый Temporal API предлагает решение этих и многих других проблем разработчиков с датами.
Cheatsheets
ZSH Tips and cheatsheet 🇺🇸
Огромный список поддерживаемых команд и синтаксиса ZSH.
Я уверен, что любые универсальные скрипты лучше писать на bash, а еще лучше на sh, чтобы они запускались вообще на всех системах. Но конечно, же будет ли работать скрипт зависит еще и от набора утилит в системе.
Но если писать скрипты для своих девайсов и везде в них установлен zsh, например маки, то этот список может спасти многие часы гуглинга.
Инструменты
Web Code Tools 🇺🇸
Действительно огромный список утилит полезных любому web-разработчику, даже дизайнеру. Здесь и генераторы градиентов, изменение и модификация цветов, превью кучи html-элементов с разными настройками. В том числе всякие генераторы opengraph, structured data и даже Twitter Card.
С одной стороны этот инструмент может быть полезен, для анализа работы стандарных фич в разных браузерах, как отличаются стандартные элементы, как меняется поведение. С другой стороны, сайт можно использовать как справочник с живыми превьюшками, информацией по разным форматам.
Omatsuri
Продолжая тему инструментов для web-разработчиков, хочу поделиться собственным фаворитом. Этот сайт добавить еще +12 инструментов в ваш кейс. Стоит хотя бы иметь ввиду, что такие инструменты существуют, чтобы потом судорожно не гуглить, когда понадобится.
Styles Directory
Каталог стилей оформления страниц. К каждому стилю прилагается исходник в виде html и css.
Думаю это весьма хорошая подборка для поиска подходящего базового оформления, например для своего блога или же документации для js-библиотеки.
Спасибо, что подписываетесь и рекомендуете эту рассылку! Я стараюсь выходить с новыми выпусками чаще. 🧡