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

Не думал что буду давать ссылку на 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/

Семантическая разметка HTML

Еще в HTML4 можно было создавать сайты с удобной для пользователя разметкой. Но она была удобной только для отображения, для иных манипуляций, таких как поисковая индексация или же подготовка контента для людей с ограниченными возможностями, это были безликие и однообразные блоки. Потому в HTML5 было решено ввести некоторые семантические теги, такие как header, footer, aside, article, section и др.
Семантические теги несут определенную смысловую нагрузку:
nav должен содержать блок навигации
header и footer говорят сами за себя
aside дополнительный контент
article основной контент на странице
section логические блоки контента

Легко запутаться когда использовать section а когда article. Есть простое правило: section формирует часть чего-то ещё, а article это что-то, что само по себе.
aside не обязательно должен находиться сбоку от основного контента, это могут быть, например, связанные ссылки.

medium.com/@stasonmars/semantic-html-c7cd5e6f1ebb

Emoji в JavaScript... это сложно!

Создатели unicode проделали огромную работу, он позволяет закодировать более миллиона кодовых позиций, хотя на данный момент занято всего 143 859 из них. Однако, по факту, unicode позволяет представить значительно больше символов за счет использования комбинируемых символов, которые могут быть обрамляющими, интервальными, безинтервальными и селекторами варианта начертания.
Это значит что для одного отображаемого символа может потребоваться использование нескольких кодовых позиций.
В случае emoji все еще сложнее т.к. они могут набираться из нескольких более простых emoji. Дополнительно это усложняется особенностью представлением JS строк: для кодирования некоторых кодовых позиций может потребоваться несколько символов JS строки, например: "😀".length вернет 2.
Все это может сильно усложнить обработку emoji, в частности их парсинг, что и раскрывается в сегодняшней статье.

thekevinscott.com/emojis-in-javascript/
#unicode #js

9 тяжёлых уроков, которые я усвоил за 18 лет разработки

1️⃣ Оставьте эго за дверью
2️⃣ Языки — это инструмент
С опытом понимаешь что у программирования одинаковая суть вне зависимости от языка.
Знание различных языков позволяет шире взглянуть на всю разработку
3️⃣ Дело не в запоминании алгоритмов, а в их поиске
Знать все нереально, зачастую достаточно знать как правильнее загуглить
4️⃣ Вы будете учиться всю свою карьеру
5️⃣ Работающее лучше идеального
6️⃣ Заставьте код работать, затем оптимизируйте
Однако это не значит что стоит лепить костыли направо и налево, архитектуру нужно делать хорошо сразу, потому как исправлять архитектуру слишком дорого
7️⃣ Последние 10 % проекта занимают 90 % времени
8️⃣ Когда вы в команде, нужна абстракция
Как и во всем - нужна мера. Основной критерий - легкость понимания кода
9️⃣ Сторонние проекты не обязательны, но могут помочь

m.habr.com/ru/post/533372/

Ошибочное понимание принципа DRY

Don't repeat yourself
Звучит просто. Или нет?
Стремление к избеганию дублирования кода может привести к его сильно связанности и нечитаемости - совершенно обратный эффект вместо ожидаемого.
Это происходит потому что принцип DRY имеет смысл применять прежде всего для бизнес логики - бизнес логика должна быть описана только в одном месте.

Также полезным оказалось правило трех повторений:
1. Пишешь новую функциональность — делай частное решение
2. Столкнулся с этой же проблемой второй раз — скопирую код, модифицируй чтобы работал для этого случая и пометь на будущее
3. Встретился с проблемой в третий раз — обобщай
Посыл был в том, что чтобы сделать более-менее хорошее обобщенное решение нужно понимание как это может использоваться. Имея только один вариант можно сделать слишком частное решение и его потом все равно придется модифицировать.
Подтверждение этой мысли я встречался и в своем коде и в коде коллег. Чаще было, что код излишне обобщен.

habr.com/ru/post/349978/
#theory

JS по условию: загружаем скрипты только если они удовлетворяют условиям

Браузер предоставляет возможность узнать некоторые характеристики устройства, где открывается сайт, такие как объем памяти, заряд батареи, количество потоков, скорость и наличие интернет соединения.

Это может пригодиться для адаптации сайта под ограничения устройства. Такая адаптация полезна для тяжеловесных приложений, таких как игры или сложные CRM.

Так же браузер предоставляет возможность узнать часть этой информации не только через JavaScript непосредственно на клиенте, но и на сервере. Для этого достаточно всего лишь добавить соответствующий meta тег, а сама информация будет передана в заголовке запроса.

К сожалению, у разных браузеров набор доступных данных отличается и не все из них могут быть отправлены в заголовках. Так, из Firefox было удалено Battery Status API, т.к. это могло быть использовано в fingerprint.

umaar.com/dev-tips/242-considerate-javascript/
#browser

Паттерн PRPL для создания отзывчивых веб приложений

Этот паттерн описывает структурирование и доставку веб приложений. Название - аббревиатура ключевых этапов загрузки приложения:
1️⃣ Push загрузка ресурсов, притом только тех ресурсов, которые нужны именно этой странице.
Здесь отлично подойдет SSR.
2️⃣ Render инициализация полноценного приложения.
3️⃣ Pre-cache фоновая загрузка и кеширование часто используемых ресурсов.
Для этого отлично подходит Service Worker.
4️⃣ Lazy-load загрузка редко используемых модулей при обращении к ним.

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

addyosmani.com/blog/the-prpl-pattern/
#theory #patterns #ssr

Масштабируемая конфигурация nginx

Игорь Сысоев рассказывает как работают конфиги nginx и как написать конфигурацию, что бы она была удобна, масштабируема и легка в поддержке.

youtu.be/jf3wIN-FwW4
#nginx