Aleph - React фреймворк для Deno, вдохновлённый Next.js

Как и в Next.js, в Aleph поддерживаются:
- статическая генерация и серверный рендеринг
- файловый роутинг
- HMR и Fast Refresh
- встроенная поддержка CSS импортов

Помимо фич Next.js, у Aleph есть свои собственные:
- Полная поддержка ESM (т.к. в Deno ESM - стандартная система)
- ESM модули как в сервере, так и в браузере, в результате меньший чем в Next.js бандл
- Отказ от поддержки IE11 (поддерживаются Chrome 61+, Edge 16+, Firefox 60+, Safari 11+ и Opera 48+)

#jslib #deno #backend #frontend #fullstack #react #webdev #nextjs

​​GraphQL Helix - гибкая и минималистичная библиотека для создания GraphQL серверов

- не привязан к фреймворкам, и даже к рантаймам. Можно использовать в Node, Deno и даже в браузере
- поддерживает Server push и client pull с помощью директив @defer и @stream
- нет дополнительных зависимостей кроме graphql-js
- гибок в настройке, позволяет реализовать свой GraphQL сервер из маленьких абстракций

#jslib #javascript #backend #webdev #graphql

​​ODiff - JavaScript библиотека для нахождения отличий между картинками

Быстрее своих конкурентов и написана на ReasonML

- Поддерживает .png, .bmp, .jpg
- Можно сравнивать разные форматы (например .jpg vs .png)
- Нет зависимостей для macOS и Linux, но требует libpng для Windows

#jslib #javascript #reasonml #imageprocessing

Докеризация Node.js монорепозитория, использующего Yarn Workspaces

#jsarticle #docker #devops #javascript #nodejs #backend #webdev #yarn

​​Вышел Emotion 11

В новой версии CSS-in-JS библиотеки произошли следующие изменения:

- все пакеты были пеоеопубликованы под новую область – "@emotion". Для автоматической миграции со старых пакетов можно использовать codemod @emotion/pkg-renaming
- ускорена сборка TypeScript проектов
- теперь тему можно объявить как интерфейс внутри модуля emotion
- Stylis (препроцессор и парсер для CSS, который используется в Emotion) был обновлён до 4 версии

#jsrelease #css #frontend #webdev #javascript #react

Вышел Angular 11

Из нового:
- успешно внедрена инициатива Operation Byelog (обработка всех issue и выявление основных потребностей от коммьюнити)
- автоматический инлайн шрифтов
- Component Test Harnesses теперь работают для всех компонентов, а не только для Angular Material
- улучшения отчётов и логирования
- улучшения Angular Language Service
- улучшенная и упрощённая поддержка Hot Module Replacement
- более быстрая компиляция
- экспериментальная поддержка webpack 5
- TSLint и Codelyzer задеприкейчены и заменены на ESLint
- прекращена поддержка IE9, IE10 и IE mobile
- обновлена дорожная карта

useEffect vs useLayoutEffect в React

#jsarticle #react #frontend #webdev #hooks

Разворачивание React приложения на Netlify

#jsarticle #javascript #netlify #frontend #webdev #devops

Введение в FilamentQL - библиотеку для кэширования GraphQL запросов

#jsarticle #javascript #frontend #webdev #graphql

Filepond - гибкая и мощная библиотека для загрузки файлов

- Поддерживает загрузку файлов, директорий, URLов и Data URI
- Можно перекинуть файлы через drag-n-drop, выбор в системе или copy/paste
- Поддержка асинхронных загрузок с помощью AJAX и загрузок кусками (чанками)
- Хорошая доступность из коробки
- Оптимизация, обрезание, изменение размеров и применение фильтров перед отправкой файлов
- Адаптируется и под телефоны, и под компьютеры

#jslib #javascript #frontend #webdev #dnd #fileupload

​​Rockpack — многофункциональный React фреймворк

Включает в себя такие фичи как SSR, сборка, линтинг, тесты, логгирование и локализация

Фреймворк разбит на модули, которые можно легко добавить и убрать

Rockpack был вдохновлён CRA и Next.js

#jslib #javascript #react #frontend #webdev

Вышел TypeScript 4.1

Нововведения в языке:

- Типы в виде шаблонных строк (например type Greeting = Hello ${world})
- Переназначение свойств внутри типов с помощью as (например [K in keyof T as get${Capitalize<string & K>}]: () => T[K])
- Рекурсивные типы с условием (например type ElementType<T> = T extends ReadonlyArray<infer U> ? ElementType<U> : T)

Нововведения в компиляторе:

- paths теперь можно использовать без baseUrl
- при включении checkJs автоматически включается allowJs
- prod и dev версии для React JSX через "jsx": "react-jsx" / "react-jsxdev"

Другие нововведения:
- поддержка @see из JSDoc в редакторах для TS и JS
- свойста с abstract не могут быть асинхронными
- теперь у resolve в промисах должен быть обязательный параметр

#jsrelease #typescript

​​Isomorphic Git - реализация системы контроля версий Git на чистом JavaScript

- Можно использовать как в Node.js, так и в браузере
- Поддерживает все современные браузеры и Node.js >= 10
- Работает большинство фич из Git: push, pull, clone, history, merge, ветки и конфигурация Git
- Имеет CLI и API

#jslib #javascript #frontend #backend #fullstack #git #webdev

​​Вышел uvu 0.5

В новой версии библиотеки для написания unit-тестов была добавлена поддержка ESM (т.е. можно использовать import / export внутри тестов без дополнительных инструментов)

Также улучшилась поддержка для легаси версий Node.js, включая 8.x и 10.x

#jsrelease #uvu #testing #jslib #javascript #nodejs

​​dvm - менеджер версий для Deno без зависимостей

- Кросс-платформенный
- Совместим с уже установленным Deno
- 0 конфигурации

#jslib #javascript #deno #backend #webdev

​​esbuild-loader - Webpack лоадер на основе на esbuild

Значительно ускоряет скорость сборки благодаря тому, что esbuild в разы быстрее Webpack

В отличие от сырого esbuild, с esbuild-loader также можно подключать дополнительные настройки и плагины, как в и обычном Webpack

#jslib #javascript #frontend #webdev #esbuild #esm #webpack

​​Текстовые градиенты в CSS

#css #frontend #webdev #jsarticle

Переход с JavaScript на WebAssembly

#jsarticle #wasm #webdev #frontend #webassembly

Разворачивание Node.js приложения на AWS Fargate с автоматическим масштабированием

#jsarticle #nodejs #backend #javascript #webdev #aws #fargate #devops

​​WMR - многофункциональный инструмент для разработки современных веб-приложений

- HTML страница как входной файл
- Импорт модулей без установки
- Сборка и кеширование для npm модулей
- HMR для модулей, Preact компонентов и CSS
- Быстрая JSX транспиляция
- Поддержка CSS и CSS Modules
- Статика с HMR для графики и CSS
- Оптимизированная сборка для продакшена
- Пререндер страниц во время сборки
- Встроенная поддержка HTTP/2
- Поддерживает плагины для Rollup

#jstools #javascript #frontend #webdev #wmr #hmr #react #preact #rollup #bundling