🖥 Hono — простой сверхбыстрый фреймворк для Edges

— npm create hono@latest

Hono работает в любой среде выполнения JavaScript: Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, AWS Lambda, Lambda@Edge и Node.js

🖥 GitHub
🟡 Доки
🟡 Примеры использования

@javascriptv

🖥 docsify — классный JS генератор сайтов с документацией

— npm i docsify

docsify создает сайт документации буквально на лету. В отличие от GitBook, он не генерирует статичные html-файлы. Вместо этого он с умом загружает и разбирает файлы в формате Markdown и потом отображает их в виде веб-сайта.

Чтобы начать использовать docsify, достаточно создать index.html и развернуть его на GitHub Pages.

🖥 GitHub
🟡 Доки
🟡 Примеры использования

@javascriptv

🖥 EmberData — лёгкая библиотека для управления данными в веб-приложениях

— pnpm add ember-data

EmberData позволяет управлять данными в приложении с помощью масштабируемых шаблонов

Некоторые особенности EmberData и её шаблонов:
— упор на производительность и компактность
— поддержка Typescript
— поддержка любых API: GraphQL, JSON:API, REST, tRPC — всего, что угодно

🖥 GitHub
🟡 Доки

@javascriptv

🖥 html-react-parser — инструмент на TypeScript для преобразования HTML в React

— npm i html-react-parser

Вот простой пример использования:

import parse from 'html-react-parser';

parse('<p>Hello, World!</p>'); 

// React.createElement('p', {}, 'Hello, World!')

🖥 GitHub
🟡 Примеры использования

@javascriptv

🖥 Shaka Player — open-source библиотека JS для адаптивных медиа

Shaka Player — это библиотека JavaScript, которая воспроизводит адаптивные медиаформаты такие как DASH, HLS и MSS в браузере, без использования плагинов или Flash. Вместо этого Shaka Player использует открытые веб-стандарты MediaSource Extensions и Encrypted Media Extensions.

Shaka Player также поддерживает автономное хранение и воспроизведение медиафайлов с помощью IndexedDB. Контент может храниться в любом браузере.

🖥 GitHub

@javascriptv

🖥 Oruga — легкая библиотека компонентов UI для Vue.js без CSS-зависимостей

— npm install @oruga-ui/oruga-next

Oruga предлагает набор легко настраиваемых компонентов и не зависит от какого-либо конкретного стиля или CSS-фреймворка (типо Bootstrap, Bulma, TailwindCSS). При этом есть возможность интегрировать любой CSS-фреймворк, если очень хочется.

Oruga предоставляет набор функциональных компонентов, поэтому можно сосредоточиться только на UI/UX аспектах приложения

🖥 GitHub
🟡 Доки

@javascriptv

🖥 p5.js — open-source библиотека JavaScript, заточенная под создание визуализаций, анимаций и т.д.

В p5.js сделан упор на простоту использования и лаконичность
К примеру, вот код для визуализации пузырьковой сортировки:

let values = [];
let i = 0;
let j = 0;

function setup() {
  createCanvas(720, 400);
  for(let i = 0;i<width/8;i++){
    values.push(random(height));
  }
}

function draw() {
  background(220);
  bubbleSort();
  simulateSorting();
}

function bubbleSort() {
  for(let k = 0;k<8;k++){
    if(i<values.length){
      let temp = values[j];
      if(values[j] > values[j+1]){
        values[j] = values[j+1];
        values[j+1] = temp;
      }
      j++;
      
      if(j>=values.length-i-1){
        j = 0;
        i++;
      }
    }
    else{
      noLoop();
    }
  }
}

function simulateSorting(){
  for(let i = 0;i<values.length;i++){
    stroke(100, 143, 143);
     fill(50);
     rect(i*8 , height, 8, -values[i],20);
   }
}

🖥 GitHub
🟡 Примеры использования p5.js

@javascriptv