Web Coder Notes


Гео и язык канала: Россия, Русский
Категория: Технологии


Профессионалам и любителям веб разработки: заметки, статьи, новости

Связанные каналы

Гео и язык канала
Россия, Русский
Категория
Технологии
Статистика
Фильтр публикаций


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

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

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

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

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

habr.com/post/666870

#browser #nodejs
@webcodernotes


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

CSS Grids может значительно облегчить некоторые задачи верстки. Так, для создания основы календаря достаточно всего трех строк css:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.first-day {
grid-column-start: 3;
}
и html который не содержит ничего лишнего:

Пн
Вт
...
Вс
1
2
...
30
31


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

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

calendartricks.com/a-calendar-in-three-lines-of-css/
#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


Шпаргалка по 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


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

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

blog.angular.io/cc066b82e65a
#news #angularjs
@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


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

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

habr.com/post/555082
#html
@webcodernotes


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

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

habr.com/post/530248
#javascript #basics


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

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

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


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


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/


Разница между 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/


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

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


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

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

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

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




Тестирование типов с @ts-expect-error

При написании тестов, иногда возникает необходимость проверки именно типизации, особенно если в коде используются дженерики.
Например, если требуется убедиться что при компиляции с определенными типами TypeScript выбросит исключение.
Для этого в версии 3.9 был введен специальный комментарий
// @ts-expect-error
который проверяет следующую за ним строку и скрывает ошибку если она там есть, в ином случае генерирует исключение Unused '@ts-expect-error' directive .
У flow есть аналог $ExpectError, который работает так же.
В отличие от @ts-expect-error директива @ts-ignore подавляет любые ошибки.

dev.to/oliverjumpertz/making-good-use-of-ts-expect-error-in-typescript-1f41
#typescript #testing #tdd


Ведете ли вы какие-то каналы?
Не хотите ли поделиться ссылкой на них?


Подсчет размера блока до его отображения

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

❓Какие решения знаете вы?

dev.to/sstraatemans/calculate-html-element-width-before-render-4ii7
#ui #browser


В какой последовательности выполнится этот код?
Опрос
  •   B D A E C
  •   B D E A C
  •   B E D C A
  •   B E C D A
20 голосов

Показано 20 последних публикаций.

46

подписчиков
Статистика канала