DEV Community

Iain Freestone
Iain Freestone

Posted on

πŸš€10 Trending projects on GitHub for web developers - 17th September 2021

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

1. craft.js

A React Framework for building extensible drag and drop page editors

GitHub logo prevwong / craft.js

πŸš€ A React Framework for building extensible drag and drop page editors

craft.js

Live Demo

Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task.

There're existing libraries that come with a fully working page editor out of the box with a user interface and editable components. However, if you wish to make customisations such as modifying the user interface and its behavior, it will most definitely involve modifying the library itself.

Craft.js solves this problem by modularising the building blocks of a page editor. It ships with a drag-n-drop system and handles the way user components should be rendered, updated and moved - among other things. With this, you'll be able to build your own page editor exactly how you want it to look and behave.

Docs

Examples

These examples should give you an idea on the flexibility of Craft.js.

Both these examples look…


2. Github Profile Trophy

Add dynamically generated GitHub Stat Trophies on your readme

GitHub logo ryo-ma / github-profile-trophy

πŸ† Add dynamically generated GitHub Stat Trophies on your readme

Github Profile Trophy

πŸ† Add dynamically generated GitHub Stat Trophies on your readme

Quick Start

Add following code to your readme.
Change the ?username= value to your GitHub's username.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)

Use theme

Add optional parameter of theme.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)

More detail

About Rank

Ranks are SSS SS S AAA AA A B C UNKNOWN SECRET.

Rank Description
SSS, SS, S You are at a hard to reach rank. You can brag.
AAA, AA, A You will reach the rank if you do your best. Let's aim here first.
B, C You are in a growing process.
UNKNOWN You have not yet taken action. Let's act first.
SECRET The rank is very rare. The trophy will not be displayed until the conditions are met.

Secret Rank

The acquisition condition is secret, but you can know the condition by reading this code.

There are still few secret trophies.
Therefore, if you come…


3. Medusa

Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences.

GitHub logo medusajs / medusa

Take ownership of your commerce stack

Medusa

Medusa

Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences

Medusa is released under the MIT license. Current CircleCI build status. PRs welcome! Discord Chat Follow @medusajs

πŸš€ Quickstart

  1. Install Medusa CLI

    npm install -g @medusajs/medusa-cli
    Enter fullscreen mode Exit fullscreen mode
  2. Create a new Medusa project

    medusa new my-medusa-store --seed
    
  3. Start your Medusa engine

    medusa develop
    Enter fullscreen mode Exit fullscreen mode
  4. Use the API

    curl localhost:9000/store/products | python -m json.tool
    Enter fullscreen mode Exit fullscreen mode

After these four steps and only a couple of minutes, you now have a complete commerce engine running locally. You may now explore the documentation to learn how to interact with the Medusa API. You may also add plugins to your Medusa store by specifying them in your medusa-config.js file.

πŸ›’ Setting up a storefront for your Medusa project

Medusa is a headless commerce engine which means that it can be used for any type of digital commerce experience - you may use it as the backend for an app, a voice application, social commerce experiences or a traditional e-commerce…


4. Analytics

A lightweight analytics abstraction library for tracking page views, custom events, & identify visitors. Designed to work with any third-party analytics tool or your own backend.

GitHub logo DavidWells / analytics

Lightweight analytics abstraction layer for tracking page views, custom events, & identifying visitors

npm npm bundle size GitHub

A lightweight analytics abstraction library for tracking page views, custom events, & identify visitors.

Designed to work with any third-party analytics tool or your own backend.

Read the docs or view the live demo app

Table of Contents

Click to expand

Features

  • Extendable - Bring your own third-party tool & plugins
  • Test & debug analytics integrations with time travel & offline mode
  • Add functionality/modify tracking calls with baked in lifecycle hooks
  • Isomorphic. Works in browser & on server
  • Queues events to send when analytic libraries are loaded
  • Conditionally load third party scripts
  • Works offline
  • TypeScript support

Why

Companies frequently change…


5. Pico.css

Minimal CSS Framework for semantic HTML. Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

GitHub logo picocss / pico

Minimal CSS Framework for semantic HTML

Pico.css

Minimal CSS Framework for semantic HTML
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

Examples Β· Documentation

Pico.css

CSS Gzipped Github release npm version License

demo.mp4

Class-light and semantic
We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.

Great styles with just one CSS file
No dependencies, package manager, external files, or JavaScript.

Responsive everything
Elegant and consistent adaptative spacings and typography on all devices.

Light or Dark mode
Shipped with two beautiful color themes, automatically enabled according to the user preference.

Table of contents

Usage

There are 3 ways to get started with pico.css:

Install manually

Download Pico and link /css/pico.min.css in the <head> of your website.

<link rel="stylesheet" href="css/pico.min.css">
Enter fullscreen mode Exit fullscreen mode

Install from CDN

Alternatively, you can use unpkg CDN to link pico.css.

<link
…
Enter fullscreen mode Exit fullscreen mode

6. Bookmarks

Bookmarks Extension for Visual Studio Code

GitHub logo alefragnani / vscode-bookmarks

Bookmarks Extension for Visual Studio Code


Bookmarks Logo

What's new in Bookmarks 13.2

  • New Sticky Engine
  • Adds Virtual Workspaces support
  • Adds Workspace Trust support
  • Full Remote Development support
  • Improved Multi-root support
  • Adds Cross-platform support
  • Improved Side Bar usability

Support

Bookmarks is an extension created for Visual Studio Code. If you find it useful, please consider supporting it.

Sponsors


Eliminate context switching and costly distractions. Create and merge PRs and perform code reviews from inside your IDE while using jump-to-definition, your keybindings, and other IDE favorites.
Learn more



Improve your Bookmarks experience with Tabnine code completions! Tabnine is a free powerful Artificial Intelligence assistant designed to help you code faster, reduce mistakes, and discover best coding practices - without ever leaving the comfort of VSCode

No more memorizing coding syntax, worrying about typos, neglecting to add that crucial comma, or even search for coding solutions online. Start reducing your development costs, deliver reliable code faster, and explore best…

7. You Don't Need JavaScript

CSS is powerful, you can do a lot of things without JS.

GitHub logo you-dont-need / You-Dont-Need-JavaScript

CSS is powerful, you can do a lot of things without JS.

You Don't Need JavaScript

Join the community on Spectrum

Please note these demos should be considered as CSS "Proofs of Concepts". They may have serious issues from accessibility point of view (keyboard navigation, speech synthesis, etc.), or progressive enhancement/degradation/etc.

Style Guide:

## Subject

[<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page)

***
&nbsp;
Enter fullscreen mode Exit fullscreen mode

Β 

Quick links

  1. Accordion / Toggle
  2. Carousel
  3. Counter of checked check-boxes
  4. Flip on click
  5. Floating label on Textfield
  6. Font-Face (Latin)
  7. Info on hover/ Popover
  8. Image Gallery
  9. Menu
  10. Mobile menu off canvas
  11. Burger menu
  12. Fancy menu
  13. Modal/Popup
  14. Mouse tracking
  15. Parallax scrolling
  16. Tabs
  17. Todo List
  18. Tooltips
  19. Treeview
  20. Twitter Heart Animation
  21. Dynamic Image Colorizing
  22. Ripple Effect
  23. Responsive Counter Showing # of Items That Didn't Fit Screen
  24. Neumorphism Card Design

Accordion / Toggle

⬆ back to top


Β 

Carousel

⬆ back to top


Β 

Counter of checked check-boxes

⬆ back to top


Β 

Flip on click

⬆…


8. Searchbox

Searchbox wizard that output all the markup and styles for your search input field.

GitHub logo Shipow / searchbox

πŸ” Searchbox wizard that output all the markup and styles for your search input field.

SEARCHBOX

Just a searchbox generator

use the generator

http://shipow.github.io/searchbox/

use the mixin in your project

https://github.com/Shipow/searchbox/blob/master/scss/_searchbox.scss

html

<form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-custom">
  <div role="search" class="sbx-custom__wrapper">
    <input type="search" name="search" placeholder="Search your website" autocomplete="off" required="required" class="sbx-custom__input">
    <button type="submit" title="Submit your search query." class="sbx-custom__submit">
      <svg role="img" aria-label="Search">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-18"></use>
      </svg>
    </button>
    <button type="reset" title="Clear the search query." class="sbx-custom__reset">
      <svg role="img" aria-label="Reset
…
Enter fullscreen mode Exit fullscreen mode

9. Tooljet

An open-source no-code platform for building and deploying internal tools

GitHub logo ToolJet / ToolJet

An open-source no-code platform for building and deploying internal tools πŸš€


Build and deploy internal tools

ToolJet is an open-source no-code framework to build and deploy internal tools quickly without much effort from the engineering teams. You can connect to your data sources such as databases ( like PostgreSQL, MongoDB, Elasticsearch, etc ), API endpoints ( ToolJet supports importing OpenAPI spec & OAuth2 authorization) and external services ( like Stripe, Slack, Google Sheets, Airtable ) and use our pre-built UI widgets to build internal tools.

GitHub issues GitHub stars GitHub license

Features

  • Visual app builder with widgets such as tables, charts, modals, buttons, dropdowns and more
  • Mobile πŸ“± & desktop layouts πŸ–₯
  • Dark mode πŸŒ›
  • Connect to databases, APIs and external services
  • Deploy on-premise ( supports docker, kubernetes, heroku and more )
  • Granular access control on organization level and app level
  • Write JS code almost anywhere in the builder
  • Query editors for all supported data sources
  • Transform query results using JS code
  • Import endpoints from OpenAPI specs
  • …

10. SVGR

Transform SVGs into React components

GitHub logo gregberge / svgr

Transform SVGs into React components 🦁

svgr

Transform SVGs into React components 🦁

License Donate npm package npm downloads Build Status Code Coverage Code style Dependencies DevDependencies Gitpod Ready-to-Code

Try it out online!

Watch the talk at React Europe

SVGR transforms SVG into ready to use components. It is part of create-react-app and makes SVG integration into your React projects easy.

Docs

See the documentation at react-svgr.com for more information about using svgr!

Quicklinks to some of the most-visited pages:

Example

Take an icon.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none" 
…
Enter fullscreen mode Exit fullscreen mode

Stargazing πŸ“ˆ

Top risers over last 7 daysπŸ”—

  1. ML for beginners +3,677 stars
  2. Milkdown +1,705 stars
  3. Free Programming Books +1,319 stars
  4. JavaScript Alogorthms +1,195 stars
  5. Coding Interview University +924 stars

Top growth(%) over last 7 daysπŸ”—

  1. Milkdown +91%
  2. Replace jQuery +85%
  3. Generative Art Node +51%
  4. Ultra +28%
  5. Assembler +24%

Top risers over last 30 daysπŸ”—

  1. Public APIs +7,466 stars
  2. Free Programming Books +5,187 stars
  3. ML for beginners +5,085 stars
  4. Web Dev for beginners +2,790 stars
  5. 30 Seconds of code +2,441 stars

Top growth(%) over last 30 daysπŸ”—

  1. Milkdown +128%
  2. HyperFormula +87%
  3. Peeky +52%
  4. release-changelog-builder-action +35%
  5. Giscus +31%

For all for the latest rankings please checkout Stargazing.dev


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

If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.

Discussion (0)