DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 20th November 2020

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

1. Valtio

Valtio makes proxy-state simple for React and Vanilla

GitHub logo pmndrs / valtio

🧙 Valtio makes proxy-state simple for React and Vanilla

valtio



npm i valtio makes proxy-state simple

Build Status Build Size Version Downloads Discord Shield

Wrap your state object

Valtio turns the object you pass it into a self-aware proxy.

import { proxy, useSnapshot } from 'valtio'
const state = proxy({ count: 0, text: 'hello' })
Enter fullscreen mode Exit fullscreen mode

Mutate from anywhere

You can make changes to it in the same way you would to a normal js-object.

setInterval(() => {
  ++state.count
}, 1000)
Enter fullscreen mode Exit fullscreen mode

React via useSnapshot

Create a local snapshot that catches changes. Rule of thumb: read from snapshots in render function, otherwise use the source. The component will only re-render when the parts of the state you access have changed, it is render-optimized.

// This will re-render on `state.count` change but not on `state.text` change
function Counter() {
  const snap = useSnapshot(state)
  return (
    <div>
      {snap.
Enter fullscreen mode Exit fullscreen mode

2. Starship

The minimal, blazing-fast, and infinitely customizable prompt for any shell!

GitHub logo starship / starship

☄🌌️ The minimal, blazing-fast, and infinitely customizable prompt for any shell!

Starship – Cross-shell prompt

GitHub Actions workflow status Crates.io version Packaging status
Chat on Discord Follow @StarshipPrompt on Twitter Stand With Ukraine

Website · Installation · Configuration

English   Deutsch   Español   Français   Bahasa Indonesia   Italiano   日本語   Português do Brasil   Русский   Українська   Tiếng Việt   简体中文   繁體中文

Starship with iTerm2 and the Snazzy theme

The minimal, blazing-fast, and infinitely customizable prompt for any shell!

  • Fast: it's fast – really really fast! 🚀
  • Customizable: configure every aspect of your prompt.
  • Universal: works on any shell, on any operating system.
  • Intelligent: shows relevant information at a glance.
  • Feature rich: support for all your favorite tools.
  • Easy: quick to install – start using it in minutes.

Explore the Starship docs  ▶

🚀 Installation

Prerequisites

Step 1. Install Starship

Select your operating system from the list below to view installation instructions:

Android

Install Starship using any of the following package managers:

Repository Instructions
Termux pkg install starship

BSD

Install Starship using any of the following package managers:


























Distribution Repository Instructions
Any crates.io cargo install starship --locked
FreeBSD FreshPorts pkg install starship
NetBSD pkgsrc pkgin install starship






3. Microsoft - Web Development for Beginners

24 Lessons, 12 Weeks, Get Started as a Web Developer

GitHub logo microsoft / Web-Dev-For-Beginners

24 Lessons, 12 Weeks, Get Started as a Web Developer

GitHub license GitHub contributors GitHub issues GitHub pull-requests PRs Welcome

GitHub watchers GitHub forks GitHub stars

Open in Visual Studio Code

Web Development for Beginners - A Curriculum

Learn the fundamentals of web development with our 12-week comprehensive course by Microsoft Cloud Advocates. Each of the 24 lessons dive into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage with quizzes, discussions, and practical assignments. Enhance your skills and optimize your knowledge retention with our effective project-based pedagogy. Start your coding journey today!

🧑‍🎓 Are you a student?

Visit Student Hub page where you will find beginner resources, Student packs and even ways to get a free certificate voucher. This is the page you want to bookmark and check from time to time as we switch out content monthly.

📣 Announcement - New Curriculum on Generative AI was just released!

Don't miss our NEW 12 lesson curriculum on generative AI!

Each lesson includes an assignment to complete, knowledge check and challenge to guide you on…


4. Element3

A Vue.js 3.0 UI Toolkit for Web.

GitHub logo hug-sun / element3

A Vue.js 3.0 UI Toolkit for IT Education. Build with JS&TS

Introduction

A Vue.js 3.0 UI Toolkit for Web.

Install

npm install element3 -S
Enter fullscreen mode Exit fullscreen mode

Quick Start

import { createApp } from 'vue'
import App from './App.vue'
// import style
import 'element3/lib/theme-chalk/index.css'
import Element3 from 'element3'

// global import
createApp(App).use(Element3).mount('#app')

// or according to the need to import
import {
  ElLink,
  ElButton
  // ...
} from 'element3'

createApp(App).use(ElLink).use(ElButton)
Enter fullscreen mode Exit fullscreen mode

About

Documentation

To check out live docs, visit website

Questions

TODO

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Changelog

Detailed changes for each release are documented in the CHANGELOG.

Contribution ✨

use yarn instead of npm

Please…





5. Security Scorecards

OSS Security Scorecards

GitHub logo ossf / scorecard

OpenSSF Scorecard - Security health metrics for Open Source

OpenSSF Scorecard

OpenSSF Scorecard OpenSSF Best Practices build CodeQL Go Reference Go Report Card codecov SLSA 3 Slack

Overview

Using Scorecard

Checks

Other Important Recommendations

Scoring

Contribute

FAQ

Overview

What is Scorecard?

We created Scorecard to help open source maintainers improve their security best practices and to help open source consumers judge whether their dependencies are safe.

Scorecard is an automated tool that assesses a number of important heuristics ("checks") associated with software security and assigns each check a score of 0-10. You can use these scores to understand specific areas to improve…


6. Beautiful React Diagrams

A collection of lightweight React components and hooks to build diagrams with ease

GitHub logo antonioru / beautiful-react-diagrams

💎 A collection of lightweight React components and hooks to build diagrams with ease 💎

CI/CD License: MIT Coverage Status npm GitHub stars

beautiful-react-diagrams


A tiny collection of lightweight React components for building diagrams with ease

Diagrams banner

💡 Why?

Javascript diagramming libraries are often difficult to integrate in React projects.
Different patterns not always fit the React nature and having a component's state in in sync with an external diagramming library might be quite difficult especially when the latter had been built in a different paradigm (such as MVC, for example).

For this reason we created beautiful-react-diagrams an easy-to-customise functional diagramming library to build diagrams with ease.

🎓 Principles

  • Lightweights: import nothing but a single lightweight javascript.
  • Controlled components: exports controlled components only.
  • Renderers: the involved components can be easily replaced with your own by using the renderer props.
  • Easy to style: built using CSS vars only.

☕️ Features

  • Concise API
  • Small and lightweight
  • Easy to use
  • Easy to customise

Contributing


7. File Browser

Web File Browser which can be used as a middleware or standalone app.

GitHub logo filebrowser / filebrowser

📂 Web File Browser

Preview

Build Go Report Card Documentation Version Chat IRC

filebrowser provides a file managing interface within a specified directory and it can be used to upload, delete, preview, rename and edit your files. It allows the creation of multiple users and each user can have its own directory. It can be used as a standalone app.

Demo

url: https://demo.filebrowser.org/

credentials: demo/demo

Features

Please refer to our docs at https://filebrowser.org/features

Install

For installation instructions please refer to our docs at https://filebrowser.org/installation.

Configuration

Authentication Method - You can change the way the user authenticates with the filebrowser server

Command Runner - The command runner is a feature that enables you to execute any shell command you want before or after a certain event.

Custom Branding - You can customize your File Browser installation by change its name to any other you want, by adding a global custom style sheet and by using your own logotype if you want.


8. The Book of Secret Knowledge

A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more.

GitHub logo trimstray / the-book-of-secret-knowledge

A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more.

Master

"Knowledge is powerful, be careful how you use it!"

A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools, and more.

Pull Requests MIT License

Created by trimstray and contributors

📔  What is it?

This repository is a collection of various materials and tools that I use every day in my work. It contains a lot of useful information gathered in one piece. It is an invaluable source of knowledge for me that I often look back on.

🚻  For whom?

For everyone, really. Here everyone can find their favourite tastes. But to be perfectly honest, it is aimed towards System and Network administrators, DevOps, Pentesters, and Security Researchers.

ℹ️  Contributing

If you find something which doesn't make sense, or something doesn't seem right, please make a pull request and please add valid and well-reasoned explanations about your changes or comments.

A few simple rules for this project:

  • inviting and…





9. Eris

A NodeJS wrapper for interfacing with Discord.

GitHub logo abalabahaha / eris

A NodeJS Discord library

Eris NPM version

A Node.js wrapper for interfacing with Discord.

Installing

You will need NodeJS 10.4+. If you need voice support you will also need Python 2.7 and a C++ compiler. Refer to the Getting Started section of the docs for more details.

npm install --no-optional eris

If you need voice support, remove the --no-optional.

Ping Pong Example

const Eris = require("eris");
// Replace TOKEN with your bot account's token
const bot = new Eris("Bot TOKEN", {
    intents: [
        "guildMessages"
    ]
});

bot.on("ready", () => { // When the bot is ready
    console.log("Ready!"); // Log "Ready!"
});

bot.on("error", (err) => {
  console.error(err); // or your preferred logger
});

bot.on(
Enter fullscreen mode Exit fullscreen mode

10. semantic-release

semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes and publishing the package.

GitHub logo semantic-release / semantic-release

📦🚀 Fully automated version management and package publishing

📦🚀 semantic-release

Fully automated version management and package publishing

Join the community on GitHub Discussions Build states OpenSSF Scorecard semantic-release: angular

npm latest version npm next version npm beta version

semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes, and publishing the package.

This removes the immediate connection between human emotions and version numbers, strictly following the Semantic Versioning specification and communicating the impact of changes to consumers.

Trust us, this will change your workflow for the better. – egghead.io

Highlights






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)