А вы знали что...

TypeScript умеет генерировать .d.ts файлы для .js файлов?

tsc --allowJs -d --emitDeclarationOnly src/foo.js

humanwhocodes.com/snippets/2020/10/create-typescript-declarations-from-javascript-jsdoc/
#typescript

Всё, что вы хотели знать о безопасном сбросе паролей

Как сделать сброс пароля на сайте? Или же его лучше напомнить?
В статье разбираются проблемы безопасности связанные с этой функцией.
Краткие советы:
✔️ Не хранить пароли в открытом виде;
✔️ Хранить только хеши от паролей с солью, притом соль хранить в отдельном столбце;
✔️ E-mail - не безопасный канал;
✔️ Не напоминать а сбрасывать пароль;
✔️ Присылать не новый пароль на почту, а ссылку на страницу ввода нового пароля;
✔️ Не показывать, если введен несуществующий e-mail, всегда выводить одинаковое сообщение вида "проверьте ваш почтовый ящик";
✔️ Используйте какой-нибудь второй фактор при сбросе пароля, например секретный вопрос;
✔️ Ответ на секретный вопрос не должен быть общедоступен.
Некоторые советы могут показаться столь логичными что их не стоило бы упоминать, однако история многих взломов показывает что не для всех они столь же логичны.

habr.com/ru/company/vdsina/blog/523690/
#web #security

Какой необычный процесс сброса пароля встречали вы?

Встречаем релиз Node.js 15 и npm 7

Что новенького?
✔️ AbortController
Отмена Promise как в браузере
✔️ N-API Version 7
✔️ npm 7
✔️ Throw on unhandled rejections
Теперь unhandledRejection будет вызывать ошибку а не предупреждение, но можно будет вернуть старое поведение используя флаг --unhandled-rejections
✔️ QUIC
Экспериментальная поддержка протокола QUIC, очень хочется попробовать
✔️ V8 8.6
Обновление V8 c 8.4 до 8.6
Это принесет String.prototype.replaceAll(), Promise.any(), &&=, ||=, ??=

medium.com/@nodejs/node-js-v15-0-0-is-here-deb00750f278
#nodejs

Возможности Angular DI, о которых почти ничего не сказано в документации

Что вы знаете о функции inject?
Она позволяет внедрять зависимости не через конструктор. Это может быть полезно если используется несколько реализаций абстрактного сервиса и вы не хотите в каждой реализации в ручную прокидывать зависимости:
@Injectable()
class LocalStorage extends Storage {
constructor(logger: Logger,
private selfDependency: SelfDepService){
super(logger);
}
}
С inject можно сделать проще
@Injectable()
abstract class Storage {
private logger = inject(Logger);
}

@Injectable()
class LocalStorage extends Storage {
constructor(private selfDependency: SelfDepService){
super();
}
}

Данная функция очень полезна, но она делает зависимости неявными, что усложняет тестирование сервиса, поэтому использовать ее стоит как можно реже.

habr.com/ru/company/tinkoff/blog/523160/
#angular

Как написать свой Virtual DOM

Для лучшего понимания работы фреймворка хорошо попробовать писать свой велосипед фреймворк.
В статье представлен вариант реализации своего Virtual DOM - бесполезно но познавательно.
Хотя если бы все считали написание велосипедов бесполезным, то никогда бы не появилось библиотек и фреймворков.

amorgunov.com/posts/2020-08-03-create-own-virtual-dom/
#react #practice

Писали ли вы свои фреймворки или библиотеки?

Сложение двух чисел с плавающей запятой без потери точности

Думаю все знают что при использовании чисел с плавающей точкой 0,1+0,2 не даст точное значение 0,3 и что это связанно с тем что в двоичном виде невозможно представить ни одно из этих чисел точно, только приближенно.
Однако не многие знают что есть относительно простой способ значительно увеличить точность таких операций. подробности по ссылке.

habr.com/ru/post/523654/
#math

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