DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 20th November 2020

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ใƒป1 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. Valtio

Valtio makes proxy-state simple for React and Vanilla

GitHub logo pmndrs / valtio

๐Ÿ’Š Valtio makes proxy-state simple for React and Vanilla

Alt. Description

Valtio

npm i valtio makes proxy-state simple

Wrap your state object

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

Mutate from anywhere

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

React via useProxy

function Counter() {
  const snapshot = useProxy(state)
  // Rule of thumb: read from snapshots, mutate the source
  // The component renders when the snapshot-reads change
  return (
    <div>
      {snapshot.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Subscribe from anywhere

import { subscribe } from 'valtio'
// Suscribe to all state changes
const unsubscribe = subscribe(state, () =>
  console.log(
โ€ฆ
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

Website ยท Installation ยท Configuration

English ย  ๆ—ฅๆœฌ่ชž ย  ็น้ซ”ไธญๆ–‡ ย  ะ ัƒััะบะธะน ย  Deutsch ย  ็ฎ€ไฝ“ไธญๆ–‡ ย  Espaรฑol ย  Franรงais

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

Getting Started

  1. Install the starship binary:

    Install Latest Version

    From prebuilt binary, with Shell:
    curl -fsSL https://starship.rs/install.sh | bash
    Enter fullscreen mode Exit fullscreen mode
    From source on crates.io:
    cargo install starship
    Enter fullscreen mode Exit fullscreen mode

    Install via Package Manager

    With Homebrew:
    brew install starship
    Enter fullscreen mode Exit fullscreen mode
    With Scoop:
    scoop install starship
    Enter fullscreen mode Exit fullscreen mode
  2. Add the init script to your shell's config file:

    Bash

    Add the following to the end ofโ€ฆ


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

Web Development for Beginners - A Curriculum

Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.

Teachers, we have included some suggestions on how to use this curriculum. If you would like to create your own lessons, we have also included a lesson template

Students, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in theโ€ฆ


4. Element3

A Vue.js 3.0 UI Toolkit for Web.

GitHub logo hug-sun / element3

A Vue.js 3.0 UI Toolkit for Web.

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

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 โœจ

Please make sure to read the Contributing Guide before making a pull request. If you have a Element3-related project/component/toolโ€ฆ





5. Security Scorecards

OSS Security Scorecards

GitHub logo ossf / scorecard

OSS Security Scorecards

Security Scorecards

Motivation

A short motivational video clip to inspire us: https://youtu.be/rDMMYT3vkTk "You passed! All D's ... and an A!"

Goals

  1. Automate analysis and trust decisions on the security posture of open source projects.

  2. Use this data to proactively improve the security posture of the critical projects the world depends on.

Public Data

If you're only interested in seeing the results over time, we run this program nightly and publish the results in json format.

This data is available on Google Cloud Storage and can be downloaded via the gsutil command-line tool.

$ gsutil ls gs://ossf-scorecards/
gs://ossf-scorecards/11-11-2020.json
...
Enter fullscreen mode Exit fullscreen mode

The latest results are also always available at https://storage.googleapis.com/ossf-scorecards/latest.json.

The list of projects that are checked each night is available in the cron/projects.txt file in this repository. If you would like us to track more, please feel free to send a Pull Request with others.

Usage

The program only requires oneโ€ฆ


6. Beautiful React Diagrams

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

GitHub logo beautifulinteractions / 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 which can be used as a middleware or standalone app.

Preview

Travis 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 or as a middleware.

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.

Contributing

If you'reโ€ฆ


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 NodeJS wrapper for interfacing with Discord.

Installing

You will need NodeJS 8+. 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");
var bot = new Eris("BOT_TOKEN");
// Replace BOT_TOKEN with your bot account's token
bot.on("ready", () => { // When the bot is ready
    console.log("Ready!"); // Log "Ready!"
});
bot.on("messageCreate", (msg) => { // When a message is created
    if(msg.content === "!ping") { // If the message content is "!ping"
        bot.createMessage(msg.channel
โ€ฆ
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 Spectrum Travis Codecov Greenkeeper semantic-release

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.

Trust us, this will change your workflow for the better. โ€“ egghead.io

Highlights

How does it work?

Commit message format

semantic-release uses the commit messages toโ€ฆ





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

pic
Editor guide