Полный гайд по аутентификации в Next.js

#nextjs #fullstack #javascript #backend #frontend #react #webdev

Вышел Cypress 5

В новой версии end-to-end фреймворка для тестирования добавились следующие фичи:

- автоматический рестарт тестов
- поддержка Shadow DOM

#jsarticle #javascript #cypress #testing #frontend #e2e

Вышел tinyhttp 0.4

В новой версии фреймворка добавилось много новых расширений, перенесённых из Express. Среди них:

- res.type
- res.format
- res.redirect
- req.is
- req.subdomains
- req.acceptsLanguages
- и т.д.

Также у приложения (App) теперь есть две новые настройки - subdomainOffset - для настройки req.subdomains, и bindAppToReqRes - для активации req.app и res.app

#jsrelease #tinyhttp #backend #javascript #typescript #nodejs #webdev #express

​​Создание сложных анимаций в React с помощью Framer Motion

#framer #framermotion #jsarticle #react #frontend #webdev #javascript

​​Elsa - минималистичный, быстрый и безопасный рантайм для JavaScript и TypeScript, написанный на Go

Проект очень похож на Deno, но в отличие от него написан на Go, и поддерживает сборку в исполняемый файл

- Поддерживает URL импорты
- Нет доступа к fs, net и другим модулям, если не указать их в разрешениях
- Поддерживает TypeScript
- Может собирать код как и в бандл (для веба), так и в исполняемый файл (для запуска на компьютере)

На данный момент в Elsa нет HTTP сервера, так что не стоит (пока что) пытаться писать что-то серьёзное на этом движке

Зато, в отличие от Deno, Elsa может собирать JS в бинарник, что открывает много новых возможностей

#jslib #javascript #elsa #deno #golang #backend #runtime

​​Вышел react-three-fiber 5

В новой версии 3D библиотеки для React было исправлено много багов, а также было произведено много разных оптимизаций. Из новых фич:

- теперь не нужно писать "attach" в <geometry /> и <material />

- WebGL 2 включён по дефолту

- из useThree теперь возвращается viewport - значения границ и дистанций экрана

- Поддержка XHR и ошибок в useLoader. Теперь когда можно управлять XHR, появилась возможность создавать полосы загрузки для ожидания подгрузки моделей

- в примитивах (<primitive />) теперь не нужно писать dispose={null}

#jsrelease #javascript #frontend #webdev #threejs #reactthreefiber #3d #react

Первое знакомство с Moon.js

Введение в Moon.js, очень быструю и минималистичную UI библиотеку, похожую на Vue

#jsarticle #javascript #moon #vue #frontend #webdev

Разбираем тестовое задание на должность фронтенд-разработчика на Vue.js

#jsarticle #javascript #frontend #vue #webdev

CJS to ESM - инструментарий для конвертирования JavaScript из CommonJS (легаси) в ECMAScript модули

Можно использовать как в виде CLI, так и с помощью JavaScript API. Можно даже внедрить как TypeScript плагин.

Будет полезно для перехода с легаси CommonJS системы на стандартизированную, единую систему модулей ECMAScript в Node.js. Также может пригодиться для конвертации из одной системы в другую, чтобы можно было использовать Node.js библиотеки в фронтенд приложениях.

#jslib #javascript #nodejs #jstools #esm #cjs #commonjs

Запуск Go в браузере с помощью WebAssembly и веб воркеров

#jsarticle #frontend #webdev #webassembly #golang #webworkers

URLCat - маленькая библиотека для создания URLов

В отличие от ручного создания URLов, URLCat эскейпит всё что нужно, легко строит параметры запросов и убирает дупликаты слешей

Поддерживает TypeScript, работает как в Node.js так и в браузере

Библиотека будет полезна для построения запросов в REST API на фронте

#jslib #javascript #frontend #webdev #url

​​Graffiti - минималистичный GraphQL фреймворк

Основан на файловой системе, где каждый .js файл становится GraphQL схемой. Из этих файлов генерируется готовое GraphQL API.

Из коробки вы получаете:

- Автоматический GraphQL API
- Реляции между GraphQL типами
- Доступ к GraphQL Playground (для dev режима)
- Кастомные резолверы
- Кастомные сложные реляции
- Автоматическая перезагрузка при изменении схем (в dev режиме)
- Расширяемость с помощью плагинов

Библиотека вдохновлена Next.js, где все страницы экспортированы в отдельных файлах, которые образуют удобную структуру приложения

#jslib #javascript #graphql #backend #webdev #nodejs

Интернациолизация React приложений

В статье описан процесс внедрения поддержки разных языков в React код при помощи модуля react-translation

#jsarticle #javascript #frontend #react #i18n #webdev

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

Список включает в себя статьи про производительность 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