⚡️ Class fields, private methods и static class features переходят на stage 4 и станут первыми фичами ES2022!

Наборы красивых ссылок на GitHub

При разработке open source проекта хочется добавить красивую ссылку на репозиторий. Вот несколько шаблонов.

github.blog/2008-12-19-github-ribbons/
tholman.com/github-corners/
#github #ribbons #corners

Какие красивые ссылки встречали вы?

Друг покаялся мне что накостылил в проекте заказчика. Я ему в ответ:

Сервис наш, сущий на серверах
Да прости ты баги наши
И избавь от них пользователей наших
Не веди нас к говнокоду
Но избавь нас от дедлайнов страшных
Ибо искуплением будет нам
Исправление багов прежних наших
А карой - дебаг долгий и унылый
Во имя Лисы, Сафари и Хрома.
Админь.

Разница между Continuous Delivery и Continuous Deployment

Что такое CI/CD?
CI знают, наверное все, это continuous integration (непрерывная интеграция) - быстрая и частая интеграция отдельных изменений в код приложения.
C CD не все так однозначно, это или continuous delivery или continuous deployment в зависимости от того, что именно вам нужно.
Разница между ними маленькая, но существенная.
И то и другое подразумевает быстрые и частые сборки приложения и прогон тестов, но в continuous deployment (непрерывное развертывание) деплой выполняется автоматически, а в continuous delivery (непрерывная доставка) деплой выполняется только после ручного подтверждения.

doam.ru/difference_between_continuous_delivery_and_continuous_deployment/

Event Loop NodeJS: Part 1

Высокая производительность NodeJS обусловлена его архитектурой, в основе которой лежит цикл событий (Event Loop).
Что это и как это работает?
Программа выполняет запрос к асинхронному API, указывая обработчики ответа и продолжает выполнение дальше.
Каждый запрос обрабатывается циклом событий:
1. Event Demultiplexer получает запрос и отправляет его в соответствующую систему.
2. После обработки ввода / вывода Event Demultiplexer регистрирует обработчики этого события, и, когда придет ответ, необходимый обработчик будет добавлен в очередь событий (Event Queue)
3. Когда в очереди имеются события они обрабатываются в порядке их добавления в очередь
4. Если событий больше нет и нет ожидающих ответа запросов, программа завершается
Именно это и есть Event Loop. Он однопоточный и почти бесконечный.

arswarog.ru/post/event-loop-nodejs-p1/

Well-known Symbols

Символ (Symbol) — это примитивный тип данных, представленный в ES2015 / ES6, позволяющий создавать уникальные идентификаторы Их так же можно использовать в качестве ключей для свойств объектов.
Символы, которые JavaScript обрабатывает особым образом, называются хорошо известными символами (Well-known Symbols). Они играют важную роль, поскольку позволяют осуществлять тонкую настройку поведения объектов.

✔️ Symbol.iterator позволяет итерировать объект
✔️ Symbol.hasInstance измененяет поведение оператора instanceof
✔️ Symbol.toPrimitive используется при преобразовании объекта в примитив
✔️ Symbol.toStringTag указывает как преобразовать объект к строке
✔️ Symbol.species используется при создании производного объекта
✔️ Symbol.match, Symbol.replace, Symbol.search, Symbol.split позволяют использовать объект как регулярное выражение
✔️ Symbol.isConcatSpreadable для преобразования объекта в массив

habr.com/ru/post/529560/
#javascript

Поиск текста в файлах Linux

Иногда может понадобится найти файл, в котором содержится определённая строка или найти строку в файле, где есть нужное слово. В Linux всё это делается с помощью одной очень простой, но в то же время мощной утилиты grep. С её помощью можно искать не только строки в файлах, но и фильтровать вывод команд

losst.ru/gerp-poisk-vnutri-fajlov-v-linux
#linux

Вы не знаете деструктуризацию, пока

Синтаксис деструктурирующего присваивания в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.
Кажется это знает каждый, но в какие интересные конструкции это может вылиться?
• установка дефолтных значений
• вложенная деструктуризация
• присваивание с повторением
• распаковка массива в объект
• частичная распаковка
Главное не переусердствовать т.к. это может понизить читаемость кода

habr.com/post/530248
#javascript #basics

Заготовка для HTML

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

habr.com/post/555082
#html
@webcodernotes

Анонс TypeScript 4.6 Beta

- Разрешен код в констукторе перед super()
- Улучшенная проверка рекурсивных типов
- Улучшен вывод типов по ключу объекта
- Добавлен вывод типов в элементах rest оператора по другим элементам
- Больше проверок для JS файлов
- В анализатор трассировки добавлено больше информации, которую можно посмотреть через analyze-trace
Breaking Changes
- TS по умолчанию будет ругаться, если в JS будут ошибки (но это можно отключить комментарием // @ts-nocheck в начале JS файла)

devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/
#typescript #announce
@webcodernotes

Прекращается поддержка AngularJS

Вот и закончилась поддержка AngularJS, CDN и AngularJS.org останутся онлайн, репы будут доступны только для чтения, а npm пакеты будут помечены как устаревшие.
Спасибо этому фреймворку, благодаря ему я сейчас занимаюсь именно фронтендом.

blog.angular.io/cc066b82e65a
#news #angularjs
@webcodernotes

Шпаргалка по flexbox

Флекс — это целый css модуль, включающий набор связанных свойств. Некоторые из этих свойств добавляются к контейнеру, другие — к дочерним элементам.

Свойства флекс-контейнера:

- display обязательное свойство со значением flex или inline-flex активирует функционал flexbox
- flex-direction направление главной оси
- flex-wrap контролирует перенос элементов на новую строку
- flex-flow сокращение для flex-direction и flex-wrap
- justify-content выравнивание вдоль главной оси
- align-items выравнивание вдоль второстепенной оси
- align-content выравнивание содержимого в нескольких строках

Свойства элементов:

- order изменение порядка элементов
- flex-grow коэффициент расширения
- flex-shrink коэффициент сжатия
- flex-basis базовый размер
- flex сокращение для flex-grow, flex-shrink и flex-basis
- align-self выравнивание отдельного элемента вдоль второстепенной оси

habr.com/ru/post/528672/
#css
@webcodernotes

Новые хуки в React 18

✔️ Хук useSyncExternalStore
Предназначен помочь интеграции с внешними сторами.
Его задача получить от стора состояние и корректно его предоставить компоненту с учетом конкурентного режима react.
Также он значительно упрощает код как визуально, так логически.
Хук хорошо описан в видео youtu.be/OBFNraxAyEA

✔️ Хук useId
Генерирует стабильные идентификаторы во время SSR и гидратации. Это переосмысление useOpaqueIdentifier

✔️ Хук useInsertionEffect
Создан для CSS-in-JS библиотек. Предназначен для оптимизации добавления стилей в документ, похож на useLayoutEffect, но не имеет доступа к ссылкам узлов DOM. Так же вызывается только на клиенте

webformyself.com/izuchenie-trex-novyx-api-v-react-18/
#react
@webcodernotes

React v18.0

Долгожданный релиз мажорной версии!

Список обновлений:
- Конкурентный режим
- Пакетная обработка обновлени
- Переходы
- Suspense
- Расширение API клиентского и серверного рендеринга
- Дополнение Strict Mode
- Новые хуки
- useId
- useTransition
- useDeferredValue
- useSyncExternalStore
- useInsertionEffect
- Серверные компоненты все еще в разработке

reactjs.org/blog/2022/03/29/react-v18.html
#react
@webcodernotes

Сверстать календарь в три строчки CSS

CSS Grids может значительно облегчить некоторые задачи верстки. Так, для создания основы календаря достаточно всего трех строк css:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.first-day {
grid-column-start: 3;
}
и html который не содержит ничего лишнего:
<ul class="calendar">
<li class="weekday">Пн</li>
<li class="weekday">Вт</li>
...
<li class="weekday">Вс</li>
<li class="first-day">1</li>
<li>2</li>
...
<li>30</li>
<li>31</li>
</ul>

Весьма интересная идея - использовать grid-column-start для позиционирования первого дня месяца

Согласно caniuse, такой код запустится на любом современном браузере

calendartricks.com/a-calendar-in-three-lines-of-css/
#css
@webcodernotes

Память в браузерах и Node.js: ограничения, утечки и нестандартные оптимизации

Ограничения
Внезапно, память не бесконечна, хотя и позволяет хранить весьма много.
Так, могут быть сложности со строками и массивами больше 512 мб.
Да и сall stack то же не бесконечен: 6к-20к вызовов, а иногда и меньше.

Soft-утечки
- неожиданно долгоживущий объект ссылается на короткоживущий
- долгоживущий объект неожиданно ссылается на короткоживущий
Причины:
- большой объект в замыкании
- неожиданно долгоживущий колбек, например в setInterval или DOMContentLoaded
- большие объекты в кеше
- нет контроля размера кеша

В дебаге поможет
- Memory Allocation Timeline записывает выделение и освобождение памяти, но хватит лишь на несколько минут
- метод трех снапшотов для более сложных и долгих утечек

А вы знали что
- загруженный нодой исходный код модуля не удаляется из памяти
- кеш путей(!) к модулям может разрастаться и до десятков мегабайт

habr.com/post/666870

#browser #nodejs
@webcodernotes

Самая красивая и лаконичная шпаргалка bash

В твиттерской опубликовали ладно скроенную инфографику от sysexplore.com, которая поможет не только ознакомиться с базовой терминологией скриптинга, но и с вычиткой параметров из файла, хэндлинг сигналов (SIGTERM) и проч.

@zen_of_python