SCSS in TS

В этот раз сразу две статьи, в обоих советы и способы использования популярной библиотеки для реализации CSS in JS с типизацией. Некоторые примеры и советы видимо хотят сделать SCSS in JS
Кратко отмечу интересные пункты:
- Практическое использование на примере реализации списка
- Типизация кастомных props:
styled.h1<{ active: boolean }>`some props`;
- Типизация темы используя .d.ts файл
- Глобальные переменные для стилей
- Удобный способ описания Media Query

carlrippon.com/playing-with-styled-components/
blog.agney.dev/styled-components-&-typescript/
#styledcomponents #typescript #react

Как соощить браузеру что сайт поддердивает цветовые схемы

Как же это прекрасно когда сайт переключается на темную тему вместе со всем окружением.
К сожалению, не все браузеры поддерживают темизацию. Стандартная темизация не всегда настолько хорошая как хотелось бы, на изображении видно что инпуты и кнопки в темной теме остались такими же как и в светлой теме.
Подстроить сайт под темную тему можно используя Media Query:
@media (prefers-color-scheme: dark) { ... }
Так же надо уведомить браузер о поддержке темизации:
<meta name="color-scheme" content="dark light">
или
:root {
color-scheme: dark light;
}

stefanjudis.com/today-i-learned/how-to-tell-browsers-that-your-site-supports-color-schemes/
#browser

А вы используете темизацию?

Пишем кастомный трансформер AST на TypeScript

Бывают ситуации, когда требуется программа, анализирующая текст другой программы, будь то автогенерация кода или же проверка на ошибки. В таких случая не обойтись без парсера кода и понимания того, что он выдает - Abstract Syntax Tree.
Для таких случаев создатели парсера TypeScript предусмотрели специальное API длч преобразования AST -> AST.
В статье описывается процесс написания такого трансформера.

habr.com/ru/post/457770/
#typescript #ast

Приходилось ли вам сталкиваться с AST или обработкой кода?

Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно

TypeScript при стандартных настройках много чего прощает. Это хорошо для упрощения перехода с JavaScript, однако в большом проекте это может привести к ухудшению кодовой базы. Но всего несколько советов позволит TypeScript раскрыть всю свою мощь.
- Никогда не используйте any
- Используйте strict режим, который включает сразу все 6 других настроек строгости. Их также можно включать по отдельности для постепенного рефакторинга.
- Больше иммутабельности, пусть даже только на уровне типов - readonly и as const
- Вывод некоторых типов можно сделать при помощи встроенных служебных типов - Utility Types
- Используйте сужение типов (я об этом писал в t.me/webcodernotes/90)
В некоторых случаях можно заставить TypeScript игнорировать ошибки, добавив в комментарий @ts-ignore, главное с этим не переусердствовать.

habr.com/ru/company/tinkoff/blog/521262/
#typescript

Вёрстка на Grid в CSS. Полное руководство и справочник

Отличная статья по CSS GRID, довольно подробно рассказывается как сетка работает и как с ее помощью сделать различные макеты.

medium.com/@stasonmars/grid-220508316f8b
#css #cssgrid

Приходилось ли вам использовать CSS GRID? Какие впечатления?

Сравнение слияния и перебазирования

Каждый раз я поражаюсь сколько возможностей предоставляет git, и вот одна из них - перебазирование.
Я очень люблю порядок в репозитории и merge коммиты очень его портят (по моему мнению).
В статье описывается разница между git merge и git rebase, как они работают и как их использовать.
Команда git merge <branch> создает новый коммит в текущей ветке, который объединяет ее с <branch>.
Команда git rebase <branch> добавляет коммиты из текущей ветки сразу после <branch>. При этом git последовательно применяет коммит за коммитом, и если происходит конфликт - то останавливается, предлагая пользователю его решить.
Добавив параметр -i можно контролировать процесс: изменить коммит в истории, изменить его описание и слить или поменять порядок коммитов.
Например команда git rebase -i HEAD~5 позволяет исправить что-либо в 5 последних коммитах.

atlassian.com/ru/git/tutorials/merging-vs-rebasing
#git

Какие требования к коммитам у вас?

Как сделать такой эффект

В статье рассказывается и показывается как можно реализовать такой эффект на CSS+JS, с примерами.
Реализация довольно простая, но красивая. Так же в статье показываются еще несколько интересных штучек с похожим кодом и описание фолбека, если JS у пользователя выключен.

css-tricks.com/how-to-recreate-the-ripple-effect-of-material-design-buttons
#css #javascript #material

Центрирование в CSS: полная инструкция

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

В случае с flexbox и css grid центрирование не представляет труда: используем justify-content: center для центрирования по горизонтали и align-items: center для вертикального центрирования (точнее по главное и перпендикулярной оси контейнера).
Для горизонального центрирования inline элементов можно использовать text-align: center,
для блоков - margin: 0 auto.
Так же можно использовать трансформации для блоков с абсолютным позиционированием:
position: absolute;
top: 50%;
transform: translateY(-50%);
Для вертикального центрирования inline элементов можно использовать vertical-align: middle.
В статье имеются и другие способы центрирования.

ishadeed.com/article/learn-css-centering
#css

Несколько Angular-приемов, о которых стоит помнить

Давное не было постов про Angular, исправляюсь😀

✔️ Использование InjectionToken для внедрения глобальных объектов позволяет избежать некоторых неприятных проблем, особенно при использовании Angular Universal
✔️ Порой удобнее унаследовать сервис от Observable или Subject
✔️ Для пользователей с High DPI дисплеями можно добавлять расширенный контент, написав простую директиву
✔️ Не забывайте о пайпах, их легко писать и они могут упростить ваш код
✔️ Двухсторонний биндинг делается очень легко
✔️ RxJS содержит много, нет... МНОГО операторов.
И у них много перегрузок.
✔️ RxJS операторы очень легко создавать свои, комбинируя уже имеющиеся
✔️ Структурные директивы, такие как *ngFor можно создавать самому

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

Какие приемы используете вы?

Componizer

Расширение для VS Code, которое в пару кликов выделяет блок кода в отдельный компонент

marketplace.visualstudio.com/items?itemName=bilelmsekni.componizer
#angular #vscode

Как GitHub и VS Code взаимодейсвуют друг с другом

Microsoft отлично развивает и GitHub и VS Code и их взаимодействие.
✔️ Codespaces. Пока только в раннем доступе, но обещают всем и по цене от 7 руб/час за полноценный VS Code в браузере
✔️ Клонирование GitHub репозитория прямо из VS Code
✔️ Легкая публикация и создание GitHub репозиториев не выходя из VS Code
✔️ Расширенные опции для мерджа, ребейза и т.п. в расширении от GitHub
✔️ Создание и управление issue, pull request прямо из VS Code
✔️ И в целом хорошая поддержка git в VS Code (что MS выносит в отдельные пункты интеграции VS Code и GitHub 😕)

В VS Code появляется столько интересных функций что я уже подумываю перейти на него с Web Storm, но все же VS Code сложно настроить до уровня IDE а не редактора кода.

vscode.github.com
#vscode #github

Какие ваши впечатления от VS Code?

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

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

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