DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 13th November 2020

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・2 min read

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.

GitHub logo alephjs / aleph.js

The React Framework in Deno.

Aleph Poster

Aleph.js

Aleph.js (or Aleph or א, /ΛˆΙ‘ΛlΙ›f/) is a React Framework in Deno, inspired by Next.js
Website | Get Started | Docs | ESM | The Aleph (by Jorge Luis Borges)

Aleph.js in Deno nest badge Chat Twitter Follow

Different with Next.js, Aleph.js don't need webpack or other bundler since it uses the ESM imports syntax. Every module only needs to be compiled once and then cached on the disk. When a module changes, Aleph.js just needs to re-compile that single module, there's no time wasted to re-bundle every changes, and instantly updates in the browser by HMR (Hot Module Replacement) with React Fast Refresh.

Aleph.js works in Deno, a simple, modern and secure runtime for JavaScript and TypeScript. No package.json and node_modules directory needed, all dependencies are imported as URL and managed by Aleph.js:

import React from "https://esm.sh/react@17.0.1"
import Logo from "../components/logo.tsx"
export default function Home()
…
Enter fullscreen mode Exit fullscreen mode

2. Sortable

Create and reorder lists with drag-and-drop. For use with modern browsers and touch devices

GitHub logo SortableJS / sortablejs

Create and reorder lists with drag-and-drop. For use with modern browsers and touch devices

Sortable Β  Financial Contributors on Open Collective CircleCI DeepScan grade npm

Sortable is a JavaScript library for reorderable drag-and-drop lists.

Demo: https://sortablejs.github.io/sortablejs/

todo: add entrypoints table around here somewhere.

Important Notices

Github as CDN deprecation

It was never fully supported, but we've decided to consciously deprecate the use of fetching files directly from GitHub.

This came to our attention when a few tutorials out on the web (we thank you!) which instruct to import SortableJS directly from our GitHub source repository GitHub is used to develop Sortable, not host it.

The correct way to consume sortable in a HTML script is to use an officially supported CDN, such as jsdelivr or unpkg.

These files now trigger console.warn with a message to come here:

  • modular/sortable.core.esm.js
  • modular/sortable.complete.esm.js
  • modular/sortable.esm.js
  • Sortable.js
  • Sortable.min.js

Bower

Bower has been deprecated, which means we will no longer support it Please replace your usage of bower with npm, yarn or a JavaScript package manager of your choice.

Features

  • Supports…

3. Rollup Plugins

The one-stop shop for official Rollup plugins

GitHub logo rollup / plugins

🍣 The one-stop shop for official Rollup plugins

tests cover discord libera manifesto

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
graphql Convert .gql/.graphql files to ES6 modules
html Create HTML files to serve Rollup bundles
image Import JPG, PNG, GIF, SVG, and WebP files
inject Scan modules for global variables
…

4. Animate on scroll library

Animate on scroll library

GitHub logo michalsnik / aos

Animate on scroll library

AOS - Animate on scroll library

NPM version NPM downloads Build Status Gitter

Twitter Follow Twitter URL

❗❗❗ This is README for aos@next ❗❗❗

For last stable release (v2) go here


πŸš€ Demo

🌟 Codepen Examples

πŸ‘‰ 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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
…
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo benmosher / eslint-plugin-import

ESLint plugin with rules that help validate proper imports.

eslint-plugin-import

build status Coverage Status win32 build status npm npm downloads

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

Static analysis

  • Ensure imports point to a file/module that can be resolved. (no-unresolved)
  • Ensure named imports correspond to a named export in the remote file. (named)
  • Ensure a default export is present, given a default import. (default)
  • Ensure imported namespaces contain dereferenced properties as they are dereferenced. (namespace)
  • Restrict which files can be imported in a given folder (no-restricted-paths)
  • Forbid import of modules using absolute paths (no-absolute-path)
  • Forbid require() calls with expressions (no-dynamic-require)
  • Prevent importing the submodules of other modules…

6. Azure SDK for JavaScript

This repository is for active development of the Azure SDK for JavaScript (NodeJS & Browser).

GitHub logo 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/en-us/javascript/azure/ or our versioned developer docs at https://azure.github.io/azure-sdk-for-js.

Azure SDK for JavaScript

Packages Dependencies DependencyGraph

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 or our versioned developer docs.

Getting started

For your convenience, each service has a separate set of libraries that you can choose to use instead of one, large Azure package. To get started with a specific library, see the README.md file located in the library's project folder. You can find service libraries in the /sdk directory.

Each service might have a number of libraries available from each of the following categories:

Client: New Releases

New wave of packages that we are announcing as GA and several that are currently releasing in preview on npm. These libraries allow you to use and consume existing resources and interact with them…


7. react-data-grid

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

GitHub logo adazzle / react-data-grid

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

react-data-grid npm-badge ci-badge

Install

npm install react-data-grid
Enter fullscreen mode Exit fullscreen mode

react-data-grid is published as ES2019 modules, you'll probably want to transpile those down to scripts for the browsers you target using Babel and browserslist.

Example browserslist configuration file
last 2 chrome versions
last 2 edge versions
last 2 firefox versions
last 2 safari versions

See documentation

Example babel.config.json file
{
  "presets": [
    ["@babel/env", {
      "bugfixes": true
      "shippedProposals": true
      "corejs": 3
      "useBuiltIns": "entry"
    }]
  ]
}
Enter fullscreen mode Exit fullscreen mode

See documentation

  • It's important that the configuration filename be babel.config.* instead of .babelrc.*, otherwise Babel might not transpile modules under node_modules.
  • We recommend polyfilling modern JS features with core-js by adding the following snippet at the top of your bundle's entry file
    import 'core-js/stable';
    Enter fullscreen mode Exit fullscreen mode
    • Babel's env preset, if configured correctly, will transform…

8. eDEX-UI

A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support.

GitHub logo GitSquared / edex-ui

A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support.


Logo

undefined
undefined undefined undefined
undefined undefined undefined undefined undefined


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: Screenshots - Questions & Answers - Download - Featured In - Developer 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 Bytes, the only newsletter…





9. VitePress

Vite & Vue powered static site generator

GitHub logo vuejs / vitepress

Vite & Vue powered static site generator

(WIP) VitePress πŸ“πŸ’¨

npm

VuePress' little brother, built on top of vite

Note this is early WIP! Currently the focus is on making Vite stable and feature complete first. It is not recommended to use this for anything serious yet.

npm install -D vitepress
echo '# Hello VitePress' > index.md
# starts dev server
npx vitepress
# build > .vitepress/dist
npx vitepress build
Enter fullscreen mode Exit fullscreen mode

Customization

Configuration can be done via .vitepress/config.js (see src/node/config.ts)

You can develop your custom theme by adding the following files:

.vitepress/theme/Layout.vue

<template&gt
  <h1>Custom Layout!</h1>
  <Content/><!-- make sure to include markdown outlet -->
</template>
Enter fullscreen mode Exit fullscreen mode

.vitepress/theme/index.js

import Layout from './Layout.vue'
export default {
  Layout,
  NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
  enhanceApp({ app, router, siteData }) {
    //
…
Enter fullscreen mode Exit fullscreen mode

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!

GitHub logo bkimminich / juice-shop

OWASP Juice Shop: Probably the most modern and sophisticated insecure web application

JuiceΒ ShopΒ Logo OWASP Juice Shop

OWASP Flagship GitHub release Twitter Follow Subreddit subscribers

Build Status Docker Cloud Build Status Test Coverage Maintainability Code Climate technical debt CII Best Practices GitHub stars Contributor Covenant

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!

Juice Shop Screenshot Slideshow

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.

Discussion (0)

pic
Editor guide