Telegram Web
🖥 OpenCTI — это open-source платформа на JS, позволяющая организациям управлять своими знаниями и наблюдениями в области разведки киберугроз

OpenCTI была создана для структурирования, хранения, организации и визуализации технической и нетехнической информации о киберугрозах.

Структурирование данных осуществляется с помощью схемы знаний, основанной на стандартах STIX2. Система разработана как современное веб-приложение, включающее GraphQL API и UX-ориентированный фронтенд.
Также OpenCTI может быть интегрирована с другими инструментами и приложениями, такими как MISP, TheHive, MITRE ATT&CK и др.

🖥 GitHub
🟡 Доки

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍1🔥1
🖥 Effect — фреймворк TypeScript, который предоставляет полноценную систему эффектов с богатой стандартной библиотекой

npm install effect

Особенности Effect:
— Масштабируемость. Создание высокомасштабируемых приложений с низкой задержкой благодаря особой модели параллелизма Effect.

— Композиционность. Создание легко поддерживаемого, читаемого и гибкого ПО за счет использования небольших многократно используемых строительных блоков.

— Безопасность ресурсов. Безопасное управление ресурсами даже при сбоях в работе программы.

— Безопасность типов. Позволяет использовать систему типов TypeScript по максимуму, уделяя особое внимание выводу типов и безопасности типов в Effect.

— Обработка ошибок. Позволяет работать с ошибками структурированно и надежно, используя встроенные в Effect возможности обработки ошибок.

🖥 GitHub
🟡 Доки

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍73🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ A,B,C,D.. - Крутая анимация текста. Повторить такую можно с помощью SCSS и библиотеки GSAP.js

1. Импорт библиотек и стилей:
- @import используется для импорта стилей из внешних источников.
- Здесь импортируются стили для создания 3D-текстового эффекта и используются шрифты из Google Fonts.

2. Настройка переменных:
- Устанавливаются глобальные CSS-переменные, которые определяют базовый размер шрифта для текста.

3. Определение структуры страницы:
- Определяются стили для корневого элемента HTML и тела страницы, устанавливается перспектива для трехмерных трансформаций.
- Создаются элементы контейнера для текста, его теней и частиц.

4. Стили и анимации:
- Определяются стили для элементов контейнера и частиц.
- Разные стили и цветовые схемы определяются для разных стилей текста.

5. Импорт библиотек и регистрация плагина анимации:
- Здесь импортируется компонент Those3DTexts из библиотеки "that-3d-text-library".
- Импортируется библиотека анимации gsap (GreenSock Animation Platform) и ее плагин MotionPathPlugin, который используется для анимации движения по пути.

Общий результат кода - это страница с анимированным 3D-текстовым эффектом, который визуально представляет букву "A", а также имеет интересные анимационные эффекты и частицы. Эффект и его визуальное оформление меняются с течением времени благодаря анимации "подпрыгивания" и смене стилей.


📌 Ссылка

@javascriptv
🔥12👍52
🖥 Cytoscape.js — библиотека JS для построения и анализа графов

npm install cytoscape

Cytoscape.js позволяет отображать графы и взаимодействовать с ними.
Библиотека легко интегрируется в разные приложения, как desktop-браузеры, так и мобильные.
Также можно использовать Cytoscape.js в headless-режиме для анализа графов в терминале или на веб-сервере.

🖥 GitHub
🟡 Примеры графов

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍134🔥4😁1🎉1
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 50 оттенков... - Интерактивная палитра цветов, для реализации которой понадобится CSS и JavaScript.

Переключатели цвета с анимацией перехода между двумя выбранными цветами. Код основан на JavaScript и не использует сторонних фреймворков или библиотек.

С помощью данного кода можно создать интерактивные переключатели цвета на веб-странице, которые позволяют пользователям легко выбирать начальный и конечный цвета, а также регулировать количество промежуточных цветов для создания плавных переходов.

Ключевые компоненты и функциональность кода:

1. Классы ColorElement и ColorElementInput:
Они представляют элементы цвета и текстовые поля выбора цвета соответственно. Классы обновляют значение цвета элементов и отображают его на странице с помощью CSS-свойств.

2. Класс DragSpaceDetector:
Позволяет пользователю перетаскивать целевой цвет (последний элемент переключателя) и изменять количество промежуточных цветов, отображаемых в переключателе.

3. Класс TransitionColorPicker:
Он объединяет предыдущие классы и управляет созданием переключателей цвета. Класс обновляет промежуточные цвета в зависимости от количества и отображает их в контейнере. При выборе нового цвета контейнер с промежуточными цветами очищается, и затем обновляется с новым количеством промежуточных цветов, создавая плавные переходы между начальным и конечным цветами.

4. Метод Array.from(document.querySelectorAll('.transition-color-picker')).map(...):
Этот метод ищет все элементы с классом "transition-color-picker" на странице и для каждого элемента создает объект TransitionColorPicker, активируя переключатели цвета на странице.

Таким образом, код является отличным примером интерактивных переключателей цвета и может помочь разобраться в различных аспектах разработки веб-приложений, особенно в работе с DOM, обработке событий, создании пользовательских интерфейсов и анимации.


https://codepen.io/tahazsh/pen/zYMwEXp

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍225🔥3
🖥 Релиз MeteorJS 3.0

meteor update --release 3.0-rc.0
meteor reset


Над данным релизом работа началась примерно в середине 2021 года (обсуждение на github). Основной целью было избавиться от Fibers, т.к. это мешало обновить версию NodeJS до стабильной. Да, метеор был привязан к версии NodeJS 14 последние 3 года!

Что нового?
— Обновили документацию;

— Вместо Fibers теперь используются async методы;

— Вся работа с БД осуществляется через асинхронное API;

— Методы стали асинхронными;

— NodeJS обновлена до 20;

— Добавлена поддержка ARM на Linux;

— Обновлено много пакетов, чтобы поддержать асинхронное API.

Для релиза было сделано 160 задач

🖥 GitHub

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍5🔥3
🖥 Релиз PeerTube 6.2, реализованного на AngularJS

16 июля 2024 года состоялся релиз новой стабильной версии открытого пирингового видеохостинга PeerTube 6.2.

Проект PeerTube — это стриминговая платформа на своём хостинге с поддержкой P2P (использует сеть распространения контента на базе P2P-коммуникаций и связывания между собой браузеров посетителей) для альтернативы YouTube, Dailymotion, Vimeo и Twitch. Разработчиком PeerTube является французская некоммерческая организация Framasoft.

Чтобы выложить видеоролик в PeerTube для всеобщего просмотра, нужно поднять у себя на компьютере инстанс PeerTube. Доступен официальный контейнер Docker. Коммуникация с другими серверами в PeerTube осуществляется по ActivityPub, что позволяет пользователям подписываться на каналы из других инстансов, а также серверов с поддержкой Mastodon, Pleroma и ActivityPub.

В настоящее время в децентрализованной системе PeerTube доступны более тысячи инстансов, а также работает поисковая система Sepia Search.

🖥 PeerTube 6.2 опубликован на GitHub под лицензией AGPLv3.
🟡 Доки

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
8👍3🔥1🤔1
🖥 esbuild — очень быстрый инструмент для сборки фронтенда

npm install --save-exact --save-dev esbuild

esbuild — это чрезвычайно быстрый бандлер, который позволяет ускорить сборку в 10-100 раз.
Модули можно писать и на JavaScript и на Go.

🖥 GitHub
🟡 Доки
🟡 Попробовать в браузере

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍154🎉3
⚛️ Netronэто инструмент для просмотра моделей нейронных сетей, глубокого обучения и машинного обучения.

Netron поддерживает как наиболее популярные фреймворки глубокого обучения – Keras и PyTorch – так и менее известные, и даже scikit-learn.

Установка в виде сервера для python производится стандартным образом через pip. Также можно установить netron в виде отдельной программы командой.

winget install -s winget netron
(для Windows) или
snap install netron
(для Linux).


Он поддерживает форматы ONNX, TensorFlow Lite, Core ML, Keras, Caffe, Darknet, MXNet, PaddlePaddle и другие. Netron также экспериментально поддерживает PyTorch, TorchScript, TensorFlow, OpenVINO и другие.

Установка:
- macOS: .dmg файл или brew install --cask netron
- Linux: .AppImage файл или snap install netron
- Windows: .exe установщик или winget install -s winget netron
- Браузер: Веб-версия
- Python Server: pip install netron и netron [FILE] или netron.start('[FILE]')

Примеры моделей:
- ONNX: squeezenet
- TensorFlow Lite: yamnet
- Keras: mobilenet
- TorchScript: traced_online_pred_layer

📌 Репозиторий

@javascriptv
🔥6👍42
🖥 Parca — инструмент на TypeScript для профилирования запущенных приложений и не только

git clone https://github.com/parca-dev/parca.git
cd parca
make build
./bin/parca


Parca позволяет визуализировать нагрузку на процессор, использование памяти и других ресурсов

Быстрый старт с Docker:
docker run --rm -p 7070:7070 ghcr.io/parca-dev/parca:v0.21.0 /parca


🖥 GitHub
🟡 Доки
🟡 Посмотреть работу Parca онлайн

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥32
🖥 Простая JS-библиотека для создания области для рисования

npm install --save atrament

Atrament — это библиотека JavaScript для рисования и рукописного ввода на HTML-холсте.
Цель Atrament — сделать так, чтобы рисование было естественным и комфортным, а результат — плавным и приятным.

Atrament не хранит контуры штрихов — вместо этого он рисует непосредственно на растровом изображении холста, как чернильная ручка на листе бумаги.

🖥 GitHub

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥192🥰1
🖥 deck.gl — фреймворк для визуализации с поддержкой WebGL2

npm install deck.gl

deck.gl — фреймворк, написанный на TS и JS; разработан для упрощения сложной визуализации больших массивов данных на базе WebGPU/WebGL2.

deck.gl позволяет быстро получить впечатляющие результаты с минимальными усилиями — для этого можно комбинировать существующие слои, или использовать расширяемую архитектуру deck.gl.

deck.gl отображает данные (обычно это массивы объектов JSON) в виде визуальных слоёв: например, иконок, полигонов, текстов

🖥 GitHub
🟡 Доки

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥3🎉2
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Toolfolio

Вышел мощный плагин для стильной записи экрана, который пригодится всем!

Плагин оснащен множеством функций: рисуйте стрелки, увеличивайте курсор, добавляйте эффекты и записывайте видео с вашим лицом в кружочке. Встроенный видеоредактор тоже на месте.

И самое главное — всё это абсолютно БЕСПЛАТНО.

https://screenity.io/en/

@javascriptv
🔥15👍53
2025/07/10 08:18:53
Back to Top
HTML Embed Code: