Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Aleph.js
The React Framework in Deno.
⚠️ Not yet 1.0. Many things are subject to change. Documentation is lacking in many places. Try it out and give us feedback!
Some demo apps deployed to Deno Deploy with the new architecture:
- React App: https://aleph-hello.deno.dev/
- REST API: https://aleph-api.deno.dev/
- React 18 Suspense SSR: https://aleph-suspense-ssr.deno.dev/
- UnoCSS(tailwind): https://aleph-unocss.deno.dev/
- Monaco Editor: https://aleph-monaco-editor.deno.dev/
- Yew SSR: https://aleph-yew.deno.dev/
- Github OAuth Middleware: https://aleph-github-oauth.deno.dev/
Source code: https://github.com/alephjs/aleph.js/tree/main/examples
Real-world Apps
- Deno Deploy: https://dash.deno.com
- Meet Me: https://meet-me.deno.dev (source)
Get started
Initialize a new project, you can pick a start template with --template flag, available templates
[react, react-mdx, api, yew]
deno run -A -r https://alephjs.org/init.ts
after init, you can run the app with deno tasks:
# go to the app root created by the `init`
cd APPDIR
# run the app in devlopment mode
deno task dev
# run the app in production mode
deno task start
Documentation
The new docs site is working in progress…
2. Sortable
Create and reorder lists with drag-and-drop. For use with modern browsers and touch devices
SortableJS
/
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Sortable 
Sortable is a JavaScript library for reorderable drag-and-drop lists.
Demo: http://sortablejs.github.io/Sortable/
Features
- Supports touch devices and modern browsers (including IE9)
- Can drag from one list to another or within the same list
- CSS animation when moving items
- Supports drag handles and selectable text (better than voidberg's html5sortable)
- Smart auto-scrolling
- Advanced swap detection
- Smooth animations
- Multi-drag support
- Support for CSS transforms
- Built using native HTML5 drag and drop API
- Supports
- Supports any CSS library, e.g. Bootstrap
- Simple API
- Support for plugins
- CDN
- No jQuery required (but there is support)
- Typescript definitions at
@types/sortablejs
Articles
- Dragging Multiple Items in Sortable (April 26, 2019)
- Swap Thresholds and Direction (December 2, 2018)
- Sortable v1.0 — New capabilities (December 22, 2014)
- Sorting with the help of HTML5 Drag'n'Drop API (December 23, 2013)
Getting Started
Install with NPM:
npm install sortablejs --save
Install…
3. Rollup Plugins
The one-stop shop for official Rollup plugins
Rollup Plugins
🍣 The one-stop shop for official Rollup plugins
This repository houses plugins that Rollup considers critical to every day use of Rollup, plugins which the organization has adopted maintenance of, and plugins that the project recommends to its users.
Plugins Found Here
| alias | Define and resolve aliases for bundle dependencies |
| auto-install | Automatically install dependencies that are imported by a bundle |
| babel | Compile your files with Babel |
| beep | System beeps on errors and warnings |
| buble | Compile ES2015 with buble |
| commonjs | Convert CommonJS modules to ES6 |
| data-uri | Import modules from Data URIs |
| dsv | Convert .csv and .tsv files into JavaScript modules with d3-dsv |
| dynamic-import-vars | Resolving dynamic imports that contain variables. |
| eslint | Verify entry point and all imported files with ESLint |
| esm-shim | Replace cjs syntax for esm output bundles |
| graphql | Convert .gql/.graphql files to ES6 modules |
| html | Create HTML files to serve Rollup bundles |
| image | Import JPG, PNG, GIF, SVG, and |
4. Animate on scroll library
Animate on scroll library
michalsnik
/
aos
Animate on scroll library
❗❗❗ This is README for aos@next ❗❗❗
For last stable release (v2) go here
🚀 Demo
🌟 Codepen Examples
- Different built-in animations
- With anchor setting in use
- With anchor-placement and different easings
- With simple custom animations
👉 To get a better understanding how this actually works, I encourage you to check my post on CSS-tricks.
⚙ Installation
Basic
Add styles in <head>:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
Add script right before closing </body> tag, and initialize AOS:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
Using package managers
Install aos package:
yarn add aos@next- or
npm install --save aos@next
Import script, styles and initialize AOS:
import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init()…5. eslint-plugin-import
This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor.
import-js
/
eslint-plugin-import
ESLint plugin with rules that help validate proper imports.
eslint-plugin-import
This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor.
IF YOU ARE USING THIS WITH SUBLIME: see the bottom section for important info.
Rules
💼 Configurations enabled in.
🚫 Configurations disabled in.
❗ Set in the errors configuration.
☑️ Set in the recommended configuration.
⌨️ Set in the typescript configuration.
🚸 Set in the warnings configuration.
🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.
❌ Deprecated.
Helpful warnings
| Name | Description | 💼 | 🚫 | 🔧 | 💡 | ❌ | |
|---|---|---|---|---|---|---|---|
| export | Forbid any invalid exports, i.e. re-export of the same name. | ❗ ☑️ | |||||
| no-deprecated | Forbid imported names marked with @deprecated documentation tag. |
||||||
| no-empty-named-blocks | Forbid empty named import blocks. |
6. Azure SDK for JavaScript
This repository is for active development of the Azure SDK for JavaScript (NodeJS & Browser).
Azure
/
azure-sdk-for-js
This repository is for active development of the Azure SDK for JavaScript (NodeJS & Browser). For consumers of the SDK we recommend visiting our public developer docs at https://docs.microsoft.com/javascript/azure/ or our versioned developer docs at https://azure.github.io/azure-sdk-for-js.
Azure SDK for JavaScript
This repository is for the Azure SDK for JavaScript (Node.js & Browser). It contains libraries for the breadth of Azure services. Management libraries are packages that you would use to provision and manage Azure resources. Client libraries are packages that you would use to consume these resources and interact with them.
Getting started
A few helpful resources to get started are:
- The readme for each package contains code samples and package information. This readme can be found in the corresponding package folder under the folder of the service of your choice in the
/sdkfolder of this repository. The same readme file can be found on the landing page for the package in npm. - The API reference documentation of the latest versions of these packages, can be found at our public developer docs.
- The API reference documentation of older versions, can be found in…
7. react-data-grid
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like
adazzle
/
react-data-grid
Feature-rich and customizable data grid React component
react-data-grid
Features
- React 18.0+ support
- Evergreen browsers and server-side rendering support
- Tree-shaking support and only one npm dependency to keep your bundles slim
- Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
- Strictly typed with TypeScript
- Keyboard accessibility
- Light and dark mode support out of the box. The light or dark themes can be enforced using the
rdg-lightorrdg-darkclasses. - Frozen columns
- Column resizing
-
Multi-column sorting
- Click on a sortable column header to toggle between its ascending/descending sort order
- Ctrl+Click / Meta+Click to sort an additional column
- Column spanning
- Column grouping
- Row selection
- Row grouping
- Summary rows
- Dynamic row heights
- No rows fallback
- Cell formatting
- Cell editing
- Cell copy / pasting
- Cell value dragging / filling
- Customizable Renderers
- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a bug with frozen columns, and the
:dirpseudo class is not supported
Links
8. eDEX-UI
A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support.
GitSquared
/
edex-ui
A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support.
(Project archived oct. 18th 2021)
eDEX-UI is a fullscreen, cross-platform terminal emulator and system monitor that looks and feels like a sci-fi computer interface.
Heavily inspired from the TRON Legacy movie effects (especially the Board Room sequence), the eDEX-UI project was originally meant to be "DEX-UI with less « art » and more « distributable software »".
While keeping a futuristic look and feel, it strives to maintain a certain level of functionality and to be usable in real-life scenarios, with the larger goal of bringing science-fiction UXs to the mainstream.
It might or might not be a joke taken too seriously.
Jump to:
Features — Screenshots — Questions & Answers — Download — Featured In — Contributor Instructions — Credits
Sponsor
Want to help support my open-source experiments and learn some cool JavaScript tricks at the same time?
Click the banner below and sign up to…
9. VitePress
Vite & Vue powered static site generator
VitePress 📝💨
VitePress is a Vue-powered static site generator and a spiritual successor to VuePress, built on top of Vite.
Documentation
To check out docs, visit vitepress.dev.
Changelog
Detailed changes for each release are documented in the CHANGELOG.
Contribution
Please make sure to read the Contributing Guide before making a pull request.
License
Copyright (c) 2019-present, Yuxi (Evan) You
10. OWASP Juice Shop
OWASP Juice Shop is probably the most modern and sophisticated insecure web application! It can be used in security trainings, awareness demos, CTFs and as a guinea pig for security tools! Juice Shop encompasses vulnerabilities from the entire OWASP Top Ten along with many other security flaws found in real-world applications!
juice-shop
/
juice-shop
OWASP Juice Shop: Probably the most modern and sophisticated insecure web application
OWASP Juice Shop
The most trustworthy online shop out there. (@dschadow) — The best juice shop on the whole internet! (@shehackspurple) — Actually the most bug-free vulnerable application in existence! (@vanderaj) — First you 😂😂then you 😢 (@kramse) — But this doesn't have anything to do with juice. (@coderPatros' wife)
OWASP Juice Shop is probably the most modern and sophisticated insecure web application! It can be used in security trainings, awareness demos, CTFs and as a guinea pig for security tools! Juice Shop encompasses vulnerabilities from the entire OWASP Top Ten along with many other security flaws found in real-world applications!
For a detailed introduction, full list of features and architecture overview please visit the official project page https://owasp-juice.shop
Table of contents
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (0)