Две статьи про модальные диалоги и про нативный тег <dialog>

Задумывались ли вы о поведении модального окна? Не только что оно должно появиться перед остальным содержимым и закрываться по клику за пределами модалки.
В стандарте HTML описан тег <dialog> о нем и статьи. Полезно будет почитать и тем, кто не собирается этот тег использовать.
Модальное окно
- прерывает пользователя на принятие какого-то решения
- блокирует остальной сайт на время работы с диалогом, в том числе и для скринридеров
- должно получить фокус при открытии
- должно быть удобно и понятно закрываться
- после закрытия возвращать туда, где пользователь был до открытия окна
Тег <dialog> реализует часть этих требований, но, к сожалению, далеко не все браузеры поддерживают этот тег

1️⃣ habr.com/ru/post/521422/
2️⃣ scottohara.me/blog/2019/03/05/open-dialog.html
#ux #html #modal

Наблюдаем за HTML из JavaScript

В WebAPI имеется возможность следить за именениями DOM элементов. Всего существует 3 наблюдателя:
1️⃣ ResizeObserver
Наблюдение за изменением размеров целевого элемента
2️⃣ IntersectionObserver
Наблюдение за пересечением целевого элемента с вышестоящим элементом или областью просмотра страницы
3️⃣ MutationObserver
Наблюдение за изменением атрибутов и текстового содержимого целевого элемента и его потомков

Все они имеют поддерживаются современными браузерами и могут быть очень полезны в некоторых ситуациях, в том числе и парсерах

habr.com/ru/post/525536/
#html #javascript

Не media queries единым

Для реализации адаптивной верстки есть множество средств, хотя на слуху обычно только media queries.
Для выбора изображения с оптимальным разрешением используется:
- тег picture
- атрибут srcset тега img
- указание плотности пикселей
"Умные" размеры элементов достигаются использованием:
- min и max для ограничение максимального или минимального размера
например: width: min(45%, 600px) значит 45% но не более 600px
- clamp для огричения сразу и минимального и максимального значения
- относительных единиц измерений (%, em, rem, vh, vw) вместо абсолютных
И, конечно же, использование media queries
Таким образом у разработчика имеется хороший набор инструментов для реализации адаптивного дизайна.
В случае когда их не хватает, то можно использовать ResizeObserver и media queries из JS.

css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/
#css #responsive

Gatsby vs Next.js

Gatsby - генератор статических сайтов, на выходе простые HTML странички
Next.js - фреймворк для создания динамических сайтов с SSR
Казалось бы, совершенно разные задачи, как их можно сравнивать? И все же у них много общего!

Краткое сравнение:
1️⃣ SEO
✔️ Gatsby ✔️ Next.js
Оба отдают страницу с контентом, которую остается только отобразить
2️⃣ Предварительная генерация HTML страниц
✔️ Gatsby ✔️/✖️ Next.js
Next.js поддерживает статичные сборки
3️⃣ Динамический контент
✖️ Gatsby ✔️ Next.js
Next.js генерирует страницу во время обращения клиента, и потому может отдавать различный контент разным пользователям
4️⃣ SPA приложения на стороне клиента
✔️ Gatsby ✔️ Next.js
Оба повторно запускают React на странице на стороне клиента
5️⃣ Скорость и простота разработки
✔️ Gatsby ✖️ Next.js
Gatsby имеет плагины, которые позволяют получать контент практически из любых источников
В Next.js придется реализовывать получение контента самому

medium.com/@ivaneroshkin/gatsby-vs-next-js-c79714c15704
#framework

Выключатель на CSS переменных

Как думаете
--foo: ;
это валидное выражение?
Как оказалось, да. Значением var(--foo) будет пробел.
И это можно использовать!
Так же напомню что получая значение CSS переменной при помощи var мы можем указать второй параметр - значение по умолчанию, оно будет использоваться если переменная не была объявлена.
Можно даже написать так:
color: var(--foo, var(--are, var(--you, var(--crazy))));
Если нет --foo, берем --are, если --are нет берем --you, в крайнем случае берем --crazy
Если переменная будет пуста то поведение var() будет такое же как и если бы переменная не была объявлена.
Комбинируя, можно создать "выключатель", детали в статье.
Стоит обратить внимание что этот подход имеет недостатки и не подходит для реального использования.

css-tricks.com/the-css-custom-property-toggle-trick/
#css

Настройка Webpack 5 с нуля

Весьма хорошее знакомство с Webpack 5

habr.com/ru/post/524260/
#webpack #frontops

ACID

Эти требования относятся прежде всего к базам данных. Однако их стоит знать каждому разработчику, в числе и фронтенд разработчику.
Фронтенд зачастую состоит из стейт менеджера и слоя отображения данных данных из стейт менеджера. Стейт менеджеры по сути являются базой данных и к ним тоже применимы эти правила. Например redux и reatom соответствуют этим требованиям.

geekbrains.ru/posts/acid_cap_transactions
#database

Памятка размеров элемента на странице

Не думал что буду давать ссылку на stackoverflow, но весьма хорошо описанны различия размеров элементов

stackoverflow.com/questions/21064101
#css #html

Лучшие практики форм логина

Формы входа, как и формы вообще совсем не простая штука, когда делаешь их правильно.
Вот часть чек-листа:
⏺️ Подпись к каждому полю ввода используя нативный label, привязанный к своему своему полю
⏺️ Встроенные атрибуты autocomplete, required, autofocus
⏺️ Использование autocompleete=“new-password” и autocomplete=“current-password” для соответствующих полей для корреткной работы менеджеров паролей
⏺️ Атрибуты для скринридеров
Адаптация для мобильных устройств:
⏺️ Работа с жестами и касаниями а не с мышью
⏺️ Всплывающая клавиатура не должна мешать или скрывать ключевые элементы

web.dev/sign-in-form-best-practices/
#ux

Лучшие практики реализации роутинга в Angluar

1️⃣ Создавайте отдельный файл с роутами к разделам сайта (фичемодулям)
Считаю оптимальным рядом с app.module.ts создавать файл app.routes.ts и хранить в нем только массив роутов
2️⃣ Создавайте аналогичные файлы для каждого фичемодуля (feature/feature.routes.ts)
Так все пути внутри раздела будут храниться в папке модуля этого раздела. Держите app.routes.ts максимально чистым
3️⃣ Добавляйте ленивую загрузку для фичемодулей
В идеале, в app.routes.ts должны быть только пути к модулям и код их ленивой загрузки
4️⃣ Организуйте guards в отдельные папки
Это справедливо для многих других типов файлов

От себя еще добавлю
5️⃣ Выносите в отдельный фичемодуль работу с сессией пользователя - авторизацию, смену пароля и т.д.
Это упрощяет контроль доступа
6️⃣ Всегда в конце списка роутов указывайте роут path: '**' для корректной обработки неверных адресов

wesleygrimes.com/angular/2019/02/24/angular-routing-best-practices-for-enterprise-applications.html
#angular

RSocket

⭕ Бинарный протокол
✔️ Несколько потоков через один физический
✔️ Полнодуплексный, симетричный
✔️ Работает поверх любого полнодуплексного протокола
✔️ Реализации на различных языках
✔️ Backpressure: он может сообщить источнику что получатель еще не принял информацию и источник может приостановить отправку данных
✔️ Возобновление сессия даже после переподключения
✖️ Небольшое комьюнити

Очень интересная альтернатива gRPC

rsocket.io
medium.com/@kirill.sereda/rsocket-2ed25dc920ba
#opensource

Добавление SASS/SCSS в проект на Svelte

Svelte мне нравится тем, что он простой, но при этом функциональный.
Нужен CSS препроцессор? Легко!

Устанавливаем зависимости:
npm install svelte-preprocess node-sass

И слегка правим rollup.config.js:
import preprocess from 'svelte-preprocess';

export default {
plugins: [
svelte({
/* ... */
// Добавляем всего одну строчку
preprocess: preprocess(),
})
}),
/* ... */
}

Все! Можем использовать!
<style type="text/scss">
$color: red;

div {
> p {
color: $color;
}
}
</style>

daveceddia.com/svelte-with-sass-in-vscode/
#svelte #scss

Вновь хочу процитировать основателя AmoCRM Михаила Токовинина:

«Ключ к успешной удалёнке не инструменты, а ответственность. Мысль, которая меня всегда забавляла, как 100-200 лет назад люди управляли большим хозяйством или империей.

Вот ушел Наполеон в очередной поход, а Париж продолжает жить своей жизнью. И нельзя ему быстренько позвонить, что-то уточнить, попросить принять решение. Нет его, и любой вопрос-ответ это минимум пара недель на гонцов туда-обратно. А как управляли российские императоры страной до появления телеграфа? Отправляешь какой-то поход на восток, а через пару лет узнаешь, что у нас теперь ещё и Калифорния есть.

Быстрые коммуникации породили безответственность. Сегодня, когда любой вопрос можно за секунды эскалировать наверх, можно ничего не решать, а бесконечно уточнять. Сотни имейлов, тысячи сообщений, бесконечные конф-коллы — лишь бы не брать на себя ответственность. Эффективная удаленка возможна только когда люди работают самостоятельно, изредка выходя на связь, чтобы скоординировать свои действия.

Это отлично понимаешь, когда работаешь из Калифорнии с Москвой: дал задание и пошёл спать, следующий сеанс связи через 8 часов (разница во времени). Но получается это у единиц, потому что за десятилетия развитых инструментов коммуникаций у большинства людей атрофировались центры принятия решений».

Говоря о разработке, думаю именно ответственность и самостоятельность отличает сеньора от мидла

В чем, по вашему мнению, отличие сеньора от мидла?

Высота строки в HTML

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

В статье детально объясняется разница между этими терминами и показывается способ использования интерлиньяжа в SCSS

css-tricks.com/how-to-tame-line-height-in-css/
#css #typography

Организация CSS

К сожалению к организации и красивому оформлению стилей сайта часто относятся не достаточно серьезно. Однако, по моему мнению, правильно организовать CSS сложнее чем програмный код.
В статье habr.com/ru/post/256109/ описаны разные методики организации кода стилей. Самое главное что нужно помнить - эти методики можно комбинировать!

Так, можно взять за базу SMACSS или Multilayer CSS и на разных уровнях этих методик использовать разные схемы организации кода где-то БЭМ, где-то FUN и т.д.
Важно пределиться со всей структурой и строго ее придерживаться и не забывать про DRY

Также хорошие советы даются в статье learn.javascript.ru/css-format, особенно в части группировки правил селекторов
#css

Как у вас организован CSS?

Введение в git

Это странно, но быстро найти нормальный туториал по гиту оказалось сложно! И это не смотря что это практически стандарт индустрии!

Вот пара статей, которые помогут вам познокомиться с гитом:
Статья codex.so/article/16 дает краткое введение в терминологию и идеи гита.
Статья medium.com/nuances-of-programming/git-54ea2567d76c дает больше практических навыков

Хочу заметить что git и github это не одно и тоже.
git - это программа и ей не требуется github.
github - это онлайн сервис и соц. сеть которая только работает с гитом.

А книга git-scm.com/book/ru/v2 поможет вам подробно изучить этот замечательный инструмент

#git

Команды и концепции git, которые я бы хотел знать годы назад

Git сейчас используется в огромном количестве проектов и практически захватил мир. Не смотря на это, для многих гит это всего лишь команды git add ., git commit, git push.
Однако возможности git огромны, нет, не так ОГРОМНЫ! В статье приведены лишь некоторые из них.

dev.to/g_abud/advanced-git-reference-1o9j
#git

Как JavaScript работает с памятью

В статье описываются основные концепции и алгоритмы работы JavaScript с памятью, такие как:
- отличие стека и кучи
- принципы выделения памяти в них
- сборщик мусора
- подсчет ссылок
- что такое утечки памяти
- как их избегать
Данная статья будет полезна и вне экосистемы JavaScript, т.к. аналогичные концепции и алгоритмы используются и в других динамических языках.

felixgerschau.com/javascript-memory-management/
#engine

Как GitHub сделали глобус на главной

Интересная статья про создание такой необычной главной страницы сервиса

github.blog/2020-12-21-how-we-built-the-github-globe/