DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 19th March 2021

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. Awesome Design Tools

The best design tools and plugins for everything

GitHub logo goabstract / Awesome-Design-Tools

The best design tools and plugins for everything πŸ‘‰

Awesome Design Tools

Awesome-Design-Tools

awesome PRs Welcome

Awesome Design Tools as a part of Flawless App family joins Abstract!

Today, we’re excited to announce that Flawless App has joined Abstract, a design delivery platform that brings visibility, accountability, measurability, and predictability to design.

Flawless App was our first company, and we’re proud of everything that we’ve achieved with our 5-person team.

Since 2015, we’ve launched powerful tools for designers and developers β€” among them are Flawless App, Reduce, Flawless Feedback. We’ve also invested a lot of love and care into community-driven initiatives. Awesome Design Tools is one of them.

So what’s next?

Our team has joined Abstract and is focused on building out the Abstract SDK, bringing developers’ experience forward. One unbelievable journey has finished and the new one has just begun. And if you want to know more…


2. github-elements

GitHub's Web Component collection. 16 open source custom elements.

GitHub logo github / github-elements

GitHub's Web Component collection.

github-elements

GitHub's Web Component collection.

We have 16 open source custom elements:

github/auto-check-element

An input element that validates its value with a server endpoint.

Repository | Example

github/auto-complete-element

Auto-complete input values from server search results.

Repository | Example

github/clipboard-copy-element

Copy element text content or input values to the clipboard.

Repository | Example

github/details-dialog-element

A modal dialog that's opened with <details>.

Repository | Example

github/details-menu-element

A menu opened with <details>.

Repository | Example

github/file-attachment-element

Attach files via drag and drop or file input.

Repository | Example

github/filter-input-element

Display elements in a subtree that match filter input text.

Repository | Example

github/g-emoji-element

Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.

Repository | Example

github/image-crop-element

A custom element for cropping a square image. Returns x, y, width, and height.

Repository | Example

github/include-fragment-element

A client-side includes tag.

Repository | Example

github/markdown-toolbar-element

Markdown formatting buttons…


3. Ionicons

Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions.

GitHub logo ionic-team / ionicons

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Ionicons

Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions.

Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Ionic, nor vice versa.

We intend for this icon pack to be used with Ionic, but it’s by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under MIT.

Contributing

Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.

Using the Web Component

The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will…


4. Tailwindcss - Just In Time

An experimental just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.

Tailwind CSS Just-In-Time

Latest Release License

Overview

An experimental just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.

This comes with a lot of advantages:

  • Lightning fast build times. Tailwind can take 3–8s to initially compile using our CLI, and upwards of 30–45s in webpack projects because webpack struggles with large CSS files. This library can compile even the biggest projects in about 800ms (with incremental rebuilds as fast as 3ms), no matter what build tool you're using.
  • Every variant is enabled out of the box. Variants like focus-visible, active, disabled, and others are not normally enabled by default due to file-size considerations. Since this library generates styles on demand, you can use any variant you want, whenever you want. You can even stack them like sm:hover:active:disabled:opacity-75. Never configure your variants again.
  • Generate…

5. Bulletproof Node.js

Implementation of a bulletproof node.js API

GitHub logo santiq / bulletproof-nodejs

Implementation of a bulletproof node.js API πŸ›‘οΈ

Bulletproof Node.js architecture πŸ›‘οΈ

This is the example repository from the blog post 'Bulletproof node.js project architecture'

Please read the blog post in order to have a good understanding of the server architecture.

Also, I added lots of comments to the code that are not in the blog post, because they explain the implementation and the reason behind the choices of libraries and some personal opinions and some bad jokes.

The API by itself doesn't do anything fancy, it's just a user CRUD with authentication capabilities Maybe we can transform this into something useful, a more advanced example, just open an issue and let's discuss the future of the repo.

Development

We use node version 14.9.0

nvm install 14.9.0
nvm use 14.9.0

The first time, you will need to run

npm install

Then just start the server with

npm run start

It uses nodemon for livereloading :peace-fingers:

Online one-click setup

…


6. changesets

A way to manage your versioning and changelogs with a focus on monorepos

GitHub logo atlassian / changesets

πŸ¦‹ A way to manage your versioning and changelogs with a focus on monorepos

πŸ¦‹ changesets πŸ¦‹

A way to manage your versioning and changelogs with a focus on multi-package repositories

View changelog

The changesets workflow is designed to help from when people are making changes, all the way through to publishing. It lets contributors declare how their changes should be released, then we automate updating package versions, and changelogs, and publishing new versions of packages based on the provided information.

Changesets has a focus on solving these problems for multi-package repositories, and keeps packages that rely on each other within the multi-package repository up-to-date, as well as making it easy to make changes to groups of packages.

How do we do that?

A changeset is an intent to release a set of packages at particular semver bump types with a summary of the changes made.

The @changesets/cli package allows you to write changeset files as you make changes, then combine any number of changesets into…


7. Open Source Guides

Open Source Guides are a collection of resources for individuals, communities, and companies who want to learn how to run and contribute to an open source project.

GitHub logo github / opensource.guide

πŸ“š Community guides for open source creators

Open Source Guides

Build Status

Open Source Guides (https://opensource.guide/) are a collection of resources for individuals, communities, and companies who want to learn how to run and contribute to an open source project.

Background

Open Source Guides were created and are curated by GitHub, along with input from outside community reviewers, but they are not exclusive to GitHub products. One reason we started this project is because we felt that there weren't enough resources for people creating open source projects.

Our goal was to aggregate community best practices, not what GitHub (or any other individual or entity) thinks is best. Therefore, we used examples and quotations from others to illustrate our points.

Contributing

This site is powered by Jekyll. Check out our contributing guidelines for ways to offer feedback and contribute.

Licenses

Content is released under CC-BY-4.0. See notices for complete details, including attribution guidelines, contribution terms, and…


8. vscode-icons

Icons for Visual Studio Code

GitHub logo vscode-icons / vscode-icons

Icons for Visual Studio Code

vscode-icons

Version Installs Ratings

Build Status Build Status

Dependencies Status DevDependencies Status

Maintainability Test Coverage Known Vulnerabilities

Average time to resolve an issue Percentage of issues still open


Bring icons to your Visual Studio Code (minimum supported version: 1.40.2)

demo


Installation

To install the extension just execute the following command:

ext install vscode-icons
Enter fullscreen mode Exit fullscreen mode

Some people have reported that they cannot find the extension when they insert the installation command.

If you find yourself in the same position, try:

ext install icons
# or
ext install "vscode-icons"
Enter fullscreen mode Exit fullscreen mode

Security

vscode-icons utilizes NSRI for its subresources integrity check and protection against code injection.

Usage

Once installed and after reloading vscode, you will be presented with a message to Activate the icons.

In case this doesn't happen, navigate to:

  • Linux & Windows => File > Preferences > File Icon Theme > VSCode Icons.
  • MacOS => Code > Preferences > File Icon Theme > VSCode Icons.

Features

vscode-icons is being shipped with a lot of features, like:

Globalization

vscode-icons uses…


9. esbuild-loader

Speed up your Webpack build with esbuild

GitHub logo privatenumber / esbuild-loader

⚑️ Speed up your Webpack build with esbuild

esbuild-loader

Speed up your Webpack build with esbuild! πŸ”₯

esbuild is a JavaScript bundler written in Go that supports blazing fast ESNext & TypeScript transpilation and JS minification.

esbuild-loader lets you harness the speed of esbuild in your Webpack build by offering faster alternatives for transpilation (eg. babel-loader/ts-loader) and minification (eg. Terser)!

Curious how much faster your build will be? See what users are saying.

If you like this project, please star it & follow me to see what other cool projects I'm working on! ❀️

πŸš€ Install

npm i -D esbuild-loader
Enter fullscreen mode Exit fullscreen mode

🚦 Quick Setup

Javascript & JSX transpilation (eg. Babel)

In webpack.config.js:

  module.exports = {
    module: {
      rules: [
-       {
-         test: /\.js$/,
-         use: 'babel-loader',
-       },
+       {
+         test: /\.js$/,
+         loader: 'esbuild-loader',
+         options: {
+           loader: 'jsx', // Remove this if you're not using JSX
+           target: 'es2015' // Syntax
…
Enter fullscreen mode Exit fullscreen mode

10. nodejsscan

nodejsscan is a static security code scanner for Node.js applications.

GitHub logo ajinabraham / nodejsscan

nodejsscan is a static security code scanner for Node.js applications.

nodejsscan nodejsscan icon

Static security code scanner (SAST) for Node.js applications powered by libsast and semgrep.

Made with Love in India Tweet

platform License python

Language grade: Python Requirements Status Build

Support nodejsscan

  • Donate via Paypal: Donate via Paypal
  • Sponsor the Project: Github Sponsors

e-Learning Courses & Certifications

OpSecX Video Course OpSecX Node.js Security: Pentesting and Exploitation - NJS

Run nodejsscan

docker pull opensecurity/nodejsscan:latest
docker run -it -p 9090:9090 opensecurity/nodejsscan:latest
Enter fullscreen mode Exit fullscreen mode

Try nodejsscan online Try in PWD

Setup nodejsscan locally

Install Postgres and configure SQLALCHEMY_DATABASE_URI in nodejsscan/settings.py or as environment variable.

From version 4 onwards, windows support is dropped.

git clone https://github.com/ajinabraham/nodejsscan.git
cd nodejsscan
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python3 manage.py recreate_db # Run once to create database entries
Enter fullscreen mode Exit fullscreen mode

To run nodejsscan

./run.sh

This will run nodejsscan web user interface at http://127.0.0.1:9090

Command Line Interface(CLI) and Python API

njsscan_cli

Presentations

Watch the video

Integrations

Slack Alerts

Create your slack app Slack App and set SLACK_WEBHOOK_URL in nodejsscan/settings.py or as environment variable.

nodejsscan slack alert

Email Alerts

Configure SMTP settings in nodejsscan/settings.py or…


Stargazing πŸ“ˆ

Top risers over last 7 days

  1. Clone Wars +3,980 stars
  2. Awesome Cheatsheets +971 stars
  3. Free Programming Books +745 stars
  4. Discord.js +674 stars
  5. Public APIs +626 stars

Top risers over last 30 days

  1. Vite +4070 stars
  2. Clone Wars +3,980 stars
  3. Ant Design +3810 stars
  4. Free Programming Books +2864 stars
  5. esbuild +2852 stars

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 (3)

pic
Editor guide
Collapse
andrewbaisden profile image
Andrew Baisden

Excellent a few of these are new to me.

Collapse
daviddalbusco profile image
David Dal Busco

Happy to see the ionicons trending, these are my go to icons!

Thanks for the post Iain πŸ‘

Collapse
shinabr2 profile image
ShinaBR2 • Edited

Just one small issue, please make all links open in a new tab.