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
npm i valtio makes proxy-state simple
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' })
Mutate from anywhere
You can make changes to it in the same way you would to a normal js-object.
setInterval(() => {
++state.count
}, 1000)
React via useSnapshot
Create a local snapshot that catches changes. Rule of thumb: read from snapshots, mutate 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.count}
<button…2. Starship
The minimal, blazing-fast, and infinitely customizable prompt for any shell!
starship
/
starship
☄🌌️ The minimal, blazing-fast, and infinitely customizable prompt for any shell!
Website · Installation · Configuration
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.
🚀 Installation
Prerequisites
- A Nerd Font installed and enabled in your terminal (for example, try the Fira Code Nerd Font).
Getting Started
Note: due to the proliferation of different platforms, only a subset of supported platforms are shown below. Can't see yours? Have a look at the extra platform instructions.
-
Install the starship binary:
Install Latest Version
From prebuilt binary, with Shell:
sh -c "$(curl -fsSL https://starship.rs/install.sh)"To update the Starship itself, rerun the…
3. Microsoft - Web Development for Beginners
24 Lessons, 12 Weeks, Get Started as a Web Developer
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'.
Hearty thanks to our authors Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!
Getting Started
Teachers, we have included some suggestions on how to use this curriculum. We'd love your feedback in our discussion forum!
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…
4. 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
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)
About
- base on element-ui
- Table Component base on element-plus
- rewrite Table is WIP
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
Security Scorecards
- Motivation
- Goals
- Scorecard Checks
- Usage
- Public Data
- Adding a Scorecard Check
- Troubleshooting
- Supportability
- Contributing
Motivation
A short motivational video clip to inspire us: https://youtu.be/rDMMYT3vkTk "You passed! All D's ... and an A!"
Goals
-
Automate analysis and trust decisions on the security posture of open source projects.
-
Use this data to proactively improve the security posture of the critical projects the world depends on.
Scorecard Checks
The following checks are all run against the target project by default:
| Name | Description |
|---|---|
| Active | Did the project get any commits in the last 90 days? |
| Automatic-Dependency-Update | Does the project use tools to automatically update its dependencies? |
| Binary-Artifacts | Is the project free of checked-in binaries? |
| Branch-Protection | Does the project use Branch Protection ? |
| CI-Tests | Does the project run tests in CI, e.g. GitHub Actions, Prow |
6. Beautiful React Diagrams
A collection of lightweight React components and hooks to build diagrams with ease
beautifulinteractions
/
beautiful-react-diagrams
💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
A tiny collection of lightweight React components for building diagrams with ease
💡 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
rendererprops. - 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.
filebrowser
/
filebrowser
📂 Web File Browser
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.
trimstray
/
the-book-of-secret-knowledge
A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more.
"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.
📔 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.
abalabahaha
/
eris
A NodeJS Discord library
Eris 
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");
var bot = new Eris("Bot TOKEN");
// Replace TOKEN with your bot account's token
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("messageCreate", (msg) => { //…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.
semantic-release
/
semantic-release
📦🚀 Fully automated version management and package publishing
📦 🚀 semantic-release
Fully automated version management and package publishing
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
- Fully automated release
- Enforce Semantic Versioning specification
- New features and fixes are immediately available to users
- Notify maintainers and users of new releases
- Use formalized commit message convention to document changes in the codebase
- Publish on different distribution channels (such as npm dist-tags) based on git merges
- Integrate with your continuous integration workflow
- Avoid potential errors associated with manual releases
- Support any package managers and languages via plugins
- Simple and reusable configuration via shareable configurations
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.
Oldest comments (0)