Не 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?

Введение в 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