3 способа реализации вложенных форм в Angular

Создавая сложную форму удобно вынести часть формы в отдельный компонент, например выбор суммы и валюты или ввод адреса.
В angular есть несколько способов это сделать:
1️⃣ Передавать во вложенную форму объект основной формы
✔️ Легко разобраться и реализовать
✖️ Нарушается принцип инкапсуляции
✖️ Требуется создавать атрибут и передавать родительскую форму
✖️ Требуется добавлять свойства для отслеживания статуса формы
2️⃣ Внедрение ControlContainer
Тоже, что и предыдущий способ, но доступ к родительской форме выполняется через DI
✔️ Не требуется создавать атрибут и передавать родительскую форму
3️⃣ Реализация интерфейса ControlValueAccessor
Реализация своего кастомного поля ввода
✔️ Полная переносимость
✔️ Работа как с простым полем ввода
✔️ Легкая реализация валидации прямо в компоненте
✖️ Требуется больше шаблонного кода

dotnetsurfers.com/blog/2020/10/11/3-approaches-for-implementing-nested-forms-in-angular/
#angular

Анатомия юнит тестирования

Юнит тестирование это тестирование одного продакш юнита в полностью контролируемом окружении.
В среднем, на один продакшн юнит приходиться 1-9 тестов.
На 1 строку продакшн кода в среднем приходиться 2-3 строки тестового кода.

⚪ Структура теста: AAA
1️⃣ Arrange - настройка окружения
2️⃣ Act - выполнение тестируемого сценария
3️⃣ Assert - проверка результатов
⚪ Написание теста: AAS
1️⃣ Act - пишем тестируемый сценарий
2️⃣ Assert - пишем проверку результатов
3️⃣ Setup - и только после этого настраиваем окружение
Суть в том, что код, который вы пишите, должен иметь причину своего существования. Важно, чтобы причина была существующей, а не предполагаемой, и эта причина должна иметь в конечном итоге связь с бизнес историей.

Применение принципов SOLID позволит снизить количество тестов и упростить их написание.

habr.com/ru/post/507594/
#testing #tdd

Совместное использование Flexbox и многоточия

Такое интересное поведение достигается использованием min-width: 0

HTML:
<div class="filename">
<span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>
<span class="filename__extension">pdf</span>
</div>

CSS:
.filename {
display: flex;
min-width: 0;
}

.filename__base {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.filename__extension {
flex-shrink: 0;
}

leonardofaria.net/2020/07/18/using-flexbox-and-text-ellipsis-together/
#css

Почему разработчики работают медленно и получают много или ответы на популярные вопросы "маглов".

Довольно свободное но структурированное рассуждение с весьма интересными комментариями. Ну и не без хейта, это же хабр.

habr.com/ru/company/avito/blog/525384/
#live

Какой вопрос к вам как к разработчику наиболее запомнился?

Две статьи про модальные диалоги и про нативный тег <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?