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
craft.js
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
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
You can use this service for free. I'm looking for sponsors to help us keep up with this service❤️
Quick Start
Add the following code to your readme. When pasting the code into your profile's
readme, change the ?username= value to your GitHub's username.
[](https://github.com/ryo-ma/github-profile-trophy)
Use theme
Add optional parameter of the theme.
[](https://github.com/ryo-ma/github-profile-trophy)
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 this rank if you do your best. Let's aim here first.
B, C
You are currently making good progress. Let's aim a bit higher.
UNKNOWN
You have not taken action yet. Let's act first.
SECRET
This rank is very rare. The trophy will not
3. Medusa
Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences.
Medusa
Building blocks for digital commerce
Getting Started
Visit the Quickstart Guide to set up a server.
Visit the Docs to learn more about our system requirements.
What is Medusa
Medusa is a set of commerce modules and tools that allow you to build rich, reliable, and performant commerce applications without reinventing core commerce logic. The modules can be customized and used to build advanced ecommerce stores, marketplaces, or any product that needs foundational commerce primitives. All modules are open-source and freely available on npm.
Learn more about Medusa’s architecture and commerce modules in the Docs.
Roadmap, Upgrades & Plugins
You can view the planned, started and completed features in the Roadmap discussion.
Follow the Upgrade Guides to keep your Medusa project up-to-date.
Check out all available Medusa plugins.
Community & Contributions
The community and core team are available in GitHub Discussions, where you…
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.
DavidWells
/
analytics
Lightweight analytics abstraction layer for tracking page views, custom events, & identifying visitors
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
- Why
- Install
- Usage
- Demo
-
API
- Configuration
- analytics.identify
- analytics.track
- analytics.page
- analytics.user
- analytics.reset
- analytics.ready
- analytics.on
- analytics.once
- analytics.getState
- analytics.storage
- analytics.storage.getItem
- analytics.storage.setItem
- analytics.storage.removeItem
- analytics.plugins
- analytics.plugins.enable
- analytics.plugins.disable
- Events
- Analytic plugins
- Community Plugins
- Creating analytics plugins
- Plugin Naming Conventions
- Debugging analytics
- TypeScript support
- Contributing
- Setup & Install dependencies
- Development
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.
Minimal CSS Framework for Semantic HTML
A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
Write HTML, Add Pico CSS, and Voilà!
What’s new in v2?
Pico v2.0 features better accessibility, easier customization with SASS, a complete color palette, a new group component, and 20 precompiled color themes totaling over 100 combinations accessible via CDN.
A Superpowered HTML Reset
With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
- Class-light and Semantic
- Great Styles with Just CSS
- Responsive Everything
- Light or Dark Mode
- Easy Customization
- Optimized Performance
Table of contents
- Quick start
- Class-less version
- Limitations
- Documentation
- Browser Support
- Contributing
- Copyright and license
Quick start
There are 4 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…6. Bookmarks
Bookmarks Extension for Visual Studio Code
alefragnani
/
vscode-bookmarks
Bookmarks Extension for Visual Studio Code
What's new in Bookmarks 13.5
- Published to Open VSX
- Adds Getting Started / Walkthrough
- Adds Side Bar badge
- Adds Toggle bookmark via mouse click
- Adds Icon customization
Support
Bookmarks is an extension created for Visual Studio Code. If you find it useful, please consider supporting it.
Bookmarks
It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.
Here are some of the features that Bookmarks provides:
- Mark/unmark positions in your code
- Mark positions in your code and give it name
- Jump forward and backward between bookmarks
- Icons in gutter and overview ruler
- See a list of all Bookmarks in one file and project
- Select lines and regions with bookmarks
- A…
7. You Don't Need JavaScript
CSS is powerful, you can do a lot of things without JS.
you-dont-need
/
You-Dont-Need-JavaScript
CSS is powerful, you can do a lot of things without JS.
English | 简体中文
You Don't Need JavaScript
Please be aware that the demos may exhibit significant accessibility issues, such as problems with keyboard navigation, speech synthesis, and progressive enhancement or degradation.
Style Guide:
## <a id="DemoSubject"></a>Carousel
[<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)
**[⬆ back to top](#quick-links)**
Quick Links
8. Searchbox
Searchbox wizard that output all the markup and styles for your search input field.
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…9. Tooljet
An open-source no-code platform for building and deploying internal tools
ToolJet
/
ToolJet
Low-code platform for building business applications. Connect to databases, cloud storages, GraphQL, API endpoints, Airtable, Google sheets, OpenAI, etc and build apps using drag and drop application builder. Built using JavaScript/TypeScript. 🚀
ToolJet is an open-source low-code framework to build and deploy internal tools with minimal engineering effort. ToolJet's drag-and-drop frontend builder allows you to create complex, responsive frontends within minutes. Additionally, you can integrate various data sources, including databases like PostgreSQL, MongoDB, and Elasticsearch; API endpoints with OpenAPI spec and OAuth2 support; SaaS tools such as Stripe, Slack, Google Sheets, Airtable, and Notion; as well as object storage services like S3, GCS, and Minio, to fetch and write data.
⭐ If you find ToolJet useful, please consider giving us a star on GitHub! Your support helps us continue to innovate and deliver exciting features.
All features
- Visual App Builder: 45+ built-in responsive components, including Tables, Charts, Lists, Forms, and Progress Bars.
- ToolJet Database: Built-in no-code database.
- Multi-Page: Build an application with multiple pages.
- Multiplayer editing: Allows simultaneous app building by multiple developers.
- 50+ data sources: Integrate with external databases, cloud storage…
10. SVGR
Transform SVGs into React components
Transform SVGs into React components 🦁
Watch the talk at React Europe
SVGR is an universal tool to transform SVG into React components.
SVGR takes a raw SVG and transforms it into a ready-to-use React component.
See the documentation at react-svgr.com for more information about using svgr!
Quicklinks to some of the most-visited pages:
Example
Take a 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" …Stargazing 📈
Top risers over last 7 days🔗
- ML for beginners +3,677 stars
- Milkdown +1,705 stars
- Free Programming Books +1,319 stars
- JavaScript Alogorthms +1,195 stars
- Coding Interview University +924 stars
Top growth(%) over last 7 days🔗
- Milkdown +91%
- Replace jQuery +85%
- Generative Art Node +51%
- Ultra +28%
- Assembler +24%
Top risers over last 30 days🔗
- Public APIs +7,466 stars
- Free Programming Books +5,187 stars
- ML for beginners +5,085 stars
- Web Dev for beginners +2,790 stars
- 30 Seconds of code +2,441 stars
Top growth(%) over last 30 days🔗
- Milkdown +128%
- HyperFormula +87%
- Peeky +52%
- release-changelog-builder-action +35%
- 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.
Top comments (0)