Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
1. ct.css
ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s
tags.
csswizardry
/
ct
Let’s take a look inside your <head>…
🧠 ct.css – Let’s take a look inside your <head>
Computed tomography of the head uses a series of X-rays in a CT scan of the head…
— wikipedia.org/Computed_tomography_of_the_head
Your <head> is the single biggest render-blocking part of your page—ensuring
it is well-formed is critical. ct.css is a diagnostic CSS snippet that exposes
potential performance issues in your page’s <head> tags.
Example Output
- Red: This is an error and should be addressed.
- Orange: This could be problematic in certain scenarios.
- Green: This is fine and is purely informational.
- Solid: This file is the problem.
- Dashed: Another file(s) are causing problems with this file.
Simple Usage
Paste this anywhere in your HTML:
<link rel="stylesheet" href="https://csswizardry.com/ct/ct.css" class="ct" />
Chrome Snippet
Run Snippets Of JavaScript On Any Page With Chrome DevTools
(function(){
var ct = document.createElement('link')
ct.rel = 'stylesheet';
ct.href = 'https://csswizardry.com/ct/ct.css';
ct.classList.add('ct');2. refine
refine is a React-based framework for building data-intensive applications in no time
refinedev
/
refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
Refine is as an open source, React meta-framework for enterprise. It provides a headless solution for everything from admin panels to dashboards and internal tools
What is Refine?
Refine is a React meta-framework for CRUD-heavy web applications. It addresses a wide range of enterprise use cases including internal tools, admin panels, dashboards and B2B apps.
Refine's core hooks and components streamline the development process by offering industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state management, and i18n.
Refine's headless architecture enables the building of highly customizable applications by decoupling business logic from UI and routing. This allows integration with:
-
Any custom designs or UI frameworks like TailwindCSS, along with built-in support for…
3. Partytown
Relocate resource intensive third-party scripts off of the main thread and into a web worker.
BuilderIO
/
partytown
Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉
Partytown 🎉
- Introducing Partytown: Run Third-Party Scripts From a Web Worker
- How Partytown's Sync Communication Works
- How we cut 99% of our JavaScript with Qwik + Partytown
- Partytown is now in Beta
A fun location for your third-party scripts to hang out
Partytown is a lazy-loaded library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.
Note: Partytown is still in beta and not guaranteed to work in every scenario. Please see our FAQ and Trade-Off sections for more info.
The philosophy is that the main thread should be dedicated to your code, and any scripts that are not required to be in the critical path should be moved to a web worker. Main thread performance is…
4. Nano Colors
A tiny and fast Node.js library to ANSI colors to terminal output. 4x times faster than chalk and use 5x less space in node_modules
ai
/
nanocolors
Use picocolors instead. It is 3 times smaller and 50% faster.
Deprecated
DEPRECATED: Use
picocolors instead
It is 3 times smaller and 50% faster.
The space in node_modules including sub-dependencies:
- nanocolors 16 kB
+ picocolors 7 kB
Library loading time:
- nanocolors 0.885 ms
+ picocolors 0.470 ms
Benchmark for complex use cases:
- nanocolors 1,088,193 ops/sec
+ picocolors 1,772,265 ops/sec
Old docs
A tiny and fast Node.js library to ANSI colors to terminal output.
import { green, bold } from 'nanocolors'
console.log(
green(`Task ${bold('1')} was finished`)
)
Started as a fork of @jorgebucaran’s
colorettewith hacks from @lukeed’skleur. See changes between Nano Colors andcolorette.
Replacing chalk
-
Replace import and use named exports:
- import chalk from 'chalk' + import { red, bold } from 'nanocolors'
-
Unprefix calls:
- chalk.red(text) + red(text)
-
Replace chains to nested calls:
- chalk.red.bold(text) + red(bold(text))
-
If…
5. Twitter, together!
A GitHub action to tweet from a repository
gr2m
/
twitter-together
⚠️ Archived. See new version at https://github.com/twitter-together/action
⚠️ Archived.
Please use the new action instead: twitter-together/action
6. Prestige
A text-based HTTP client in the browser. An interface-less Postman.
Prestige
A text-based HTTP client, by Shri. Available at prestige.dev.
Under all the abstractions, it's just stardust interacting with text.
This is a powerful, text-based, in-browser, HTTP client app geared towards web developers and API testing professionals.
Check out the User Guide to learn how Prestige can be a powerful addition to your toolset.
Discussion on Hacker News. Join us on Discord.
If you face any problems or have a suggestion, please reach out on Discord or create an issue.
Features
- Define requests in plain text, hit
Ctrl+Enter(orCmd+Enter) to execute and view results. - Write plain, familiar Javascript for templating within your requests.
- Shows all responses in a redirect chain, if request redirects.
- Save your Prestige documents to Gist.
- Export requests as cURL commands. Please open an issue if you'd like to see more export formats.
- Isolated cookie management.
- …
7. React Spreadsheet
Simple, customizable yet performant spreadsheet for React
iddan
/
react-spreadsheet
Simple, customizable yet performant spreadsheet for React
React Spreadsheet
Simple, customizable yet performant spreadsheet for React.
npm install react react-dom scheduler react-spreadsheet
or
yarn add react react-dom scheduler react-spreadsheet
Features
- Simple straightforward API focusing on common use cases while keeping flexibility
- Performant (yet not virtualized)
- Implements Just Components™
8. nanobundle
Yet another bundler for tiny modules, powered by esbuild
9. React JS Landing Page Template
A simple react one page landing page templates for startups/companies.
issaafalkattan
/
React-Landing-Page-Template
A simple react one page landing page templates for startups/companies
React JS Landing Page Template
**
🛎️🛎️ Good news! New & improved V2 is out
**
Description
This is a ReactJS based landing page template, fit for a startup company/service with a one page view. The design is inspired by a template from Free-CSS.com All 'visual' data can be easily modified by changing the data.json file.
Make it Yours!
1. Preps
You will need to have Node JS installed on your pc.
2. Clone Files
After cloning the files, you will have to run yarn followed by yarn start in the CLI
3. Add your own data
Change the data in the data.json file as well as add any images to public/img/
You can also change styles by modifying the public/css files
If you need the contact form to work, you also need to create an EmailJS account, and modify the src/components/contact.jsx file to replace your own service…
10. Live Query
Realtime GraphQL Live Queries with JavaScript
n1ru4l
/
graphql-live-query
Realtime GraphQL Live Queries with JavaScript
Real-Time with any schema or transport
Why Live Queries? - Read the introduction Post - Learn how Live Query Tracking works
Packages in this Repository
| Package | Description | Stats |
|---|---|---|
@n1ru4l/in-memory-live-query-store |
Live query implementation. |
 
|
@n1ru4l/graphql-live-query |
Utilities for live query implementations. |
 
|
@n1ru4l/graphql-live-query-patch-json-patch |
Reduce live query payload size with JSON patches |
 
|
@n1ru4l/graphql-live-query-patch-jsondiffpatch |
Reduce live query payload size with @n1ru4l/json-patch-plus
|
 
|
@n1ru4l/socket-io-graphql-server |
GraphQL over Socket.io - Server Middleware |
 
|
@n1ru4l/socket-io-graphql-client |
GraphQL over Socket.io - Client |
 
|
todo-example-app |
Todo App with state sync across clients. | - |
Motivation
There is no mature live query implementation that is not tied to any specific database or SaaS product. This implementation should serve as an example for showcasing how live queries can be added to any GraphQL.js schema with (almost) any GraphQL transport.
GraphQL already has a solution for real-time: Subscriptions. Those are the right tool for responding to events. E.g. triggering a sound or showing a toast message because someone poked you…
Stargazing 📈
Top risers over last 7 days🔗
- The Book of secret knowledge +1,464 stars
- Awesome Guidelines +765 stars
- Public APIs +731 stars
- Free Programming Books +689 stars
- Best websites a programmer should visit +676 stars
Top growth(%) over last 7 days🔗
- Run WASM +250%
- Front Matter +63%
- Codebases +41%
- Agrippa +21%
- React Windows UI +20%
Top risers over last 30 days🔗
- Public APIs +6,466 stars
- Free Programming Books +5,110 stars
- ML for beginners +4,940 stars
- 30 Seconds of code +3,971 stars
- Free Code Camp +3,405 stars
Top growth(%) over last 30 days🔗
- Milkdown +136%
- React Render Tracker +133%
- Viteshot +81%
- HyperFormula +46%
- Authelia +44%
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)