DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at stargazing.dev

🚀10 Trending projects on GitHub for web developers - 1st October 2021

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.

GitHub logo 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" />
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo refinedev / refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.



The sweet spot between the low/no code and “starting from scratch” for CRUD-heavy applications.
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

Awesome OpenSSF Best Practices npm version Contributor Covenant

Discord Twitter Follow


how-refine-works

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.

GitHub logo BuilderIO / partytown

Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉

Partytown 🎉

Partytown github fit 2x

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

GitHub logo 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
Enter fullscreen mode Exit fullscreen mode

Library loading time:

- nanocolors     0.885 ms
+ picocolors     0.470 ms
Enter fullscreen mode Exit fullscreen mode

Benchmark for complex use cases:

- nanocolors     1,088,193 ops/sec
+ picocolors     1,772,265 ops/sec
Enter fullscreen mode Exit fullscreen mode

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`)
)
Enter fullscreen mode Exit fullscreen mode

Started as a fork of @jorgebucaran’s colorette with hacks from @lukeed’s kleur. See changes between Nano Colors and colorette.

Nano Colors output


Sponsored by Evil Martians

Replacing chalk

  1. Replace import and use named exports:

    - import chalk from 'chalk'
    + import { red, bold } from 'nanocolors'
    Enter fullscreen mode Exit fullscreen mode
  2. Unprefix calls:

    - chalk.red(text)
    + red(text)
    Enter fullscreen mode Exit fullscreen mode
  3. Replace chains to nested calls:

    - chalk.red.bold(text)
    + red(bold(text))
    Enter fullscreen mode Exit fullscreen mode
  4. If…


5. Twitter, together!

A GitHub action to tweet from a repository

GitHub logo gr2m / twitter-together

⚠️ Archived. See new version at https://github.com/twitter-together/action


6. Prestige

A text-based HTTP client in the browser. An interface-less Postman.

GitHub logo sharat87 / 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.

Prestige light mode screenshot Prestige dark model screenshot

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 (or Cmd+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

GitHub logo iddan / react-spreadsheet

Simple, customizable yet performant spreadsheet for React

React Spreadsheet

Simple, customizable yet performant spreadsheet for React.

Screenshot CI Coverage Status

npm install react react-dom scheduler react-spreadsheet
Enter fullscreen mode Exit fullscreen mode

or

yarn add react react-dom scheduler react-spreadsheet
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo cometkim / espub

Perfect build tool for libraries, powered by esbuild


9. React JS Landing Page Template

A simple react one page landing page templates for startups/companies.

GitHub logo 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

GitHub logo n1ru4l / graphql-live-query

Realtime GraphQL Live Queries with JavaScript

GraphQL Live Query

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. npm version npm downloads
@n1ru4l/graphql-live-query Utilities for live query implementations. npm version npm downloads
@n1ru4l/graphql-live-query-patch-json-patch Reduce live query payload size with JSON patches npm version npm downloads
@n1ru4l/graphql-live-query-patch-jsondiffpatch Reduce live query payload size with @n1ru4l/json-patch-plus npm version npm downloads
@n1ru4l/socket-io-graphql-server GraphQL over Socket.io - Server Middleware npm version npm downloads
@n1ru4l/socket-io-graphql-client GraphQL over Socket.io - Client npm version npm downloads
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🔗

  1. The Book of secret knowledge +1,464 stars
  2. Awesome Guidelines +765 stars
  3. Public APIs +731 stars
  4. Free Programming Books +689 stars
  5. Best websites a programmer should visit +676 stars

Top growth(%) over last 7 days🔗

  1. Run WASM +250%
  2. Front Matter +63%
  3. Codebases +41%
  4. Agrippa +21%
  5. React Windows UI +20%

Top risers over last 30 days🔗

  1. Public APIs +6,466 stars
  2. Free Programming Books +5,110 stars
  3. ML for beginners +4,940 stars
  4. 30 Seconds of code +3,971 stars
  5. Free Code Camp +3,405 stars

Top growth(%) over last 30 days🔗

  1. Milkdown +136%
  2. React Render Tracker +133%
  3. Viteshot +81%
  4. HyperFormula +46%
  5. 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)