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

В статье рассказывается и показывается как можно реализовать такой эффект на 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

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

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