Javascript

🖥 CryptPad — open-source приложение на JS для совместной работы над документами; со сквозным шифрованием

git clone https://github.com/cryptpad/cryptpad.git cryptpad
cd cryptpad
git checkout 2024.6.0
npm ci
npm run install:components
./install-onlyoffice.sh

CryptPad — это инструмент на JavaScript для совместной работы над документами — т.е. все изменения синхронизируются в режиме реального времени.
Передаваемые данные пользователей CryptPad шифруются сквозным шифрованием.

🖥 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

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

— npm install @oruga-ui/oruga-next

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

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

🖥 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

🖥 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

🖥 Красивая 3D карусель для изображений на HTML, CSS и JavaScript

Вот весь код:
🖥 GitHub

@javascriptv

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

— pnpm add ember-data

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

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

🖥 GitHub
🟡 Доки

@javascriptv

🖥 OpenUI5 — open-source JS фреймворк, который позволяет создавать веб-приложения корпоративного уровня

— npm i @openui5/sap.f

Если кто вдруг не знает, есть классный фреймворк JavaScript — OpenUI5 с массой полезных возможностей
Вот некоторые из них:
— богатая библиотека визуальных компонентов
— возможность расширять стандартные компоненты и писать свои
— поддержка MVC, причем View может быть объявлен как HTML, XML, JSON или Javascript
— модели данных (oData, XML, JSON) и их привязка к визуальным компонентам
— поддержка HTML шаблонов

🖥 GitHub
🟡 Доки
🟡 Пример веб-приложения

@javascriptv

🔤🔤 Интересный проект: энтузиаст создал бесплатный клон After Effects!

И что самое крутое - работает прямо в браузере, бесплатно и даже без регистрации. Интерфейс похож на After Effects, и все функции находятся на привычных местах. Один энтузиаст сумел превзойти всю Adobe!

Попробовать можно здесь: https://pikimov.com/

@javascriptv

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

— npm i docsify

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

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

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

@javascriptv