Большая коллекция гайдов по производительности в вебе

Список включает в себя статьи про производительность HTMLя, скриптов, шрифтов и самих сайтов

#jsarticle #javascript #frontend #webdev #perf

​​Vime - настраиваемый, расширяемый, доступный и не привязанный к фреймворкам медиа плеер

- Поддерживает HTML5, YouTube, Vimeo и другие источники видео
- Сделан по стандартам доступности, имея все нужные aria параметры
- Поддерживает интернационализацию
- Работает как на компьютере, так и на мобильных устройствах
- Можно стилизиовать плеер с помощью CSS переменных
- Тёмная и светлая тема из коробки
- Легковесная - ~25KB сама либа, ~47KB вместе со стандартным UI Vime
- Написан на TypeScript, поэтому типы из коробки

Несмотря на то, что Vime не зависит от фреймворков, он легко интегрируется с React, Vue, Svelte, Stencil и Angular.

#jslib #frontend #javascript #typescript #webdev #media #react #stencil #svelte #angular #html5 #html

​​ts-node-dev - CLI наподобие nodemon для быстрого перезапуска Node.js приложений, написанных на TypeScript

Гораздо быстрее node -r ts-node/register, т.к. использует один и тот же процесс для компиляции TypeScript

#jstools #typescript #nodejs #backend #webdev

​​Вышел Node.js 14.13

В новой версии Node.js наконец-то теперь можно использовать именованные импорты для CommonJS модулей, например: import { mod } from 'cjs-module'

До этого в Node.js попытка сделать именованный импорт выкидывала ошибку

Ещё одно полезное добавление - glob-паттерны в поле exports. Полезно, когда нужно экспортировать все ф-ции из библиотеки, при этом не создавая отдельный index.js: "./features/*": "./dist/features/*"

#jsrelease #nodejs #javascript

​​three-font-outliner - THREE.js библиотека для создания форм из глифов текста в рантайме

- Шрифт можно загрузить как и из URLа, так и из буфера
- Можно настраивать размер и направление текста

#jslib #threejs #3d #frontend #javascript #webdev

Вышел pnpm 5.8

- Новая настройка shell-emulator. С помощью этой настройки postinstall скрипты будут выполняться в эмуляторе. Будет полезно для пользователей Windows.
- Новый флаг --filter для исключения пакетов. С помощью этого флага можно исключать файлы, папки и модули

#javascript #jsrelease #pnpm #jstools

​​Reno - простой, минималистичный роутер для использования вместе с std/http

Reno не является фреймворком по типу Express. Reno только содержит в себе роутер и ф-ции для форматирования запросов (send / json)

Reno используется вместе с std/http, где объект запроса (req) передаётся как параметр роутера

#jslib #javascript #deno #backend #typescript

Создание масштабируемого GraphQL API с помощью AWS CDK, TypeScript, AppSync, DynamoDB и AWS Lambda

#graphql #aws #jsarticle #javascript #backend #typescript #webdev #appsync #dynamodb #lambda #serverless

JWT авторизация в Node.js с помощью Passport.js

#nodejs #javascript #jsarticle #backend #webdev #jwt #auth #passport

Создание простого чата на Go, Vue и WebSocket

#golang #vue #websocket #fullstack #jsarticle #webdev #javascript

Управление состоянием в React с помощью Context API, без Redux

#jsarticle #react #frontend #webdev #javascript

Замыкания в JavaScript

#jsarticle #javascript

Milliparsec - крошечный парсер запросов для Node.js

- Интегрируется с Express, Koa, tinyhttp и встроенным http модулем
- Весит всего 800 байтов
- Поддерживает JSON, urlencoded формы и обычный текст
- Не имеет зависимостей
- Написан на TypeScript (= типы из коробки)

#jslib #javascript #typescript #nodejs #backend #webdev

​​QEdit - простой, но мощный виджет редактора кода для браузера

- Расширяется с помощью API для плагинов
- Подсветка синтаксиса с помощью Highlight.js или Prism
- Автоформатирование кода при помощи специального плагина
- Гибкая настройка редактора

#jslib #javascript #frontend #webdev

Бесконечная прокрутка в React

#jsarticle #javascript #react #frontend #webdev

​​Shoulders - CLI для отображения списка открытых issues у npm зависимостей

С помощью этой утилиты можно легко найти проблемный модуль (у которого например какой-то баг), и посмотреть открыт ли уже на него issue

Ещё одно предназначение - возможность узнать, как можно помочь модулям, которые вы используете

#jstools #javascript #cli #npm

Мониторинг Node.js приложения

#jsarticle #nodejs #javascript #backend #webdev

Обработка данных на стороне клиента с помощью WebAssembly

#wasm #webassembly #frontend #jsarticle #webdev

Загрузка файлов в React с помощью GraphQL и Google Storage

#jsarticle #javascript #react #graphql #googlestorage #frontend #webdev

Создание веб чата с End-to-end шифрованием с помощью Web Crypto API

#jsarticle #javascript #frontend #webdev

Форматирование дат в чистом JavaScript

#jsarticle #javascript