Поиск текста в файлах 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