🚀10 Trending projects on GitHub for web developers - 29th October 2021

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

1. Sucrase

Sucrase is an alternative to Babel that allows super-fast development builds. Instead of compiling a large range of JS features to be able to work in Internet Explorer, Sucrase assumes that you're developing with a recent browser or recent Node.js version.

alangpierce / sucrase

Super-fast alternative to Babel for when you can target modern JS runtimes

Sucrase

Try it out

Sucrase is an alternative to Babel that allows super-fast development builds Instead of compiling a large range of JS features to be able to work in Internet Explorer, Sucrase assumes that you're developing with a recent browser or recent Node.js version, so it focuses on compiling non-standard language extensions JSX, TypeScript, and Flow. Because of this smaller scope, Sucrase can get away with an architecture that is much more performant but less extensible and maintainable. Sucrase's parser is forked from Babel's parser (so Sucrase is indebted to Babel and wouldn't be possible without it) and trims it down to a focused subset of what Babel solves. If it fits your use case, hopefully Sucrase can speed up your development experience!

Sucrase has been extensively tested. It can successfully build the Benchling frontend code Babel React, TSLint, Apollo client, and decaffeinate with all…

View on GitHub

---

2. React Hooks in Svelte

React hook examples ported to Svelte

joshnuss / react-hooks-in-svelte

React hook examples ported to Svelte

React Hooks in Svelte

React Hook examples ported to Svelte.

useState

In Svelte, const [varName, set] = useState(initialValue) becomes let varName = initialValue. The setter function is replaced with JavaScript's assignment operator =.

React example
Svelte example

useEffect

In React, there are 3 ways to useEffect().

1. With null dependencies: useEffect(fn). This runs on every render.
2. With an empty array as dependencies: useEffect(fn, []). This runs during mount, and cleanup function runs on unmount.
3. With a list of dependency vars: useEffect(fn, [a, b, c]). This reavaulates whenever a dependency changes. The cleanup runs whenever dependencies change and during unmount.

This is an example of #2, where the callback runs when component is mounted and cleanup runs when unmounted.

React example
Svelte example

useMemo

React example
Svelte example

In Svelte, all reactive statements are memoized. Instead of const var = useMemo(() => expression, dependencies)…

View on GitHub

---

3. Hiring Without Whiteboards

A list of companies (or teams) that don't do "whiteboard" interviews. "Whiteboards" is used as a metaphor, and is a symbol for the kinds of CS trivia questions that are associated with bad interview practices.

poteto / hiring-without-whiteboards

⭐️ Companies that don't have a broken hiring process

Hiring Without Whiteboards

A list of companies (or teams) that don't do "whiteboard" interviews. "Whiteboards" is used as a metaphor, and is a symbol for the kinds of CS trivia questions that are associated with bad interview practices. Whiteboards are not bad – CS trivia questions are. Using sites like HackerRank/LeetCode probably fall into a similar category.

The companies and teams listed here use interview techniques and questions that resemble day-to-day work. For example, pairing on a real world problem or a paid/unpaid take home exercise. Read (and contribute to) our recommendations for ways to conduct better interviews.

tl;dr

• Discussing a real world problem (with or without whiteboard) is 👍
• Solving CS trivia, technical puzzles, riddles, brainteasers (with or without whiteboard) is 👎

Please open a PR to be added.

Duds

If you've been through an interview with one of these companies recently, and your experience suggests otherwise from their…

View on GitHub

---

4. Fragstore

Tiny (~800 B), easy and simple library to manage your React state. After a store update -> only components that use the updated property are rendered.

aralroca / fragstore

Tiny (~800 B), easy and simple library to manage your React state.

Fragstore

Tiny (~800 B), easy and simple (P)React state management library

After a store update -> only components that use the updated property are rendered

Getting started:

Install it with Yarn:

yarn add fragstore

Or install it with Npm:

npm install fragstore --save

Usage:

Store

The Store is an optional component where you can send the same parameters than the createStore. Sometimes can be useful, for example, when the initial store is defined by an API, or also if you want to change some component state (not store) after some callback.

import createStore from "fragstore";

const { Store } = createStore();

function App() {
  return (
    <Store store={{ 
      username: "Aral",
      age: 31,
    }}>
     {/* rest */} 
    </Store>
  );
}

Fragmented store (meaning of Fragstore)

The power of…

View on GitHub

---

5. FrontEndCollection

Notes for Front-end Software Engineers. Covers common data structure and algorithms, basic web concepts, HTML & CSS & Javascript.

cheatsheet1999 / FrontEndCollection

Notes for Front-end Software Engineers. Covers common data structure and algorithms, basic web concepts, HTML & CSS & Javascript.

FrontEndCollection (Keep updating, hopefully...)

Web Development Basics

HTML

1. What happens when you type in a URL
2. GET vs POST
3. What can we do to improve a website's performance?
4. HTML5 offline storage mechanism
5. Common time and space-complexity
6. What has been deprecated, and what is new on HTML5?
7. How the DOM really works?
8. Inline elements, Block elements, and what are the differences?
9. Several ways to call a function
10. A brief introduction of the differences between "src" and "href"
11. A brief introduction of Call, Apply, Bind
12. Time and space complexity for common sorting algorithm

CSS

1. What is the difference between display:none and visibility:hidden style?
2. What is BFC(Block Formatting Context)

Demo

1. Accordion 🪗
2. ModalBox 💬
3. Drum Kit 🥁
4. Mini Clock 🕑
5. Playing with Variables 🎩

Deep Dive in Javascript

Learn More on BFE.dev

1. Implement Curry()…

View on GitHub

---

6. ml5

ml5.js aims to make machine learning approachable for a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js.

ml5js / ml5-library

Friendly machine learning for the web! 🤖

Read our ml5.js Code of Conduct and software licence here!

This project is currently in development.

Friendly machine learning for the web!

ml5.js aims to make machine learning approachable for a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js.

The library is supported by code examples, tutorials, and sample data sets with an emphasis on ethical computing. Bias in data, stereotypical harms, and responsible crowdsourcing are part of the documentation around data collection and usage.

ml5.js is heavily inspired by Processing and p5.js.

Please read our Code of Conduct, which establishes our commitment to make ml5.js a friendly and welcoming environment.

Usage

Before getting started with ml5.js, review our Code of Conduct. There are several ways you can use the ml5.js library:

• You can use the latest version…

View on GitHub

---

7. TypeScript Boilerplate for 2021

A modern TypeScript project setup, for Node.js and browsers (using esbuild).

metachris / typescript-boilerplate

A modern TypeScript project setup, for Node.js and browsers (using esbuild).

TypeScript Boilerplate for 2021

TypeScript project boilerplate with modern tooling, for Node.js programs, libraries and browser modules. Get started quickly and right-footed 🚀

• TypeScript 4
• Optionally esbuild to bundle for browsers (and Node.js)
• Linting with typescript-eslint (tslint is deprecated)
• Testing with Jest (and ts-jest)
• Publishing to npm
• Continuous integration (GitHub Actions / GitLab CI)
• Automatic API documentation with TypeDoc

See also the introduction blog post: Starting a TypeScript Project in 2021.

Getting Started

# Clone the repository (you can also click "Use this template")
git clone https://github.com/metachris/typescript-boilerplate.git your_project_name
cd your_project_name

# Edit `package.json` and `tsconfig.json` to your liking
...

# Install dependencies
yarn install

# Now you can run various yarn commands:
yarn cli
yarn lint
yarn test
yarn build-all
yarn ts-node <filename>
yarn esbuild-browser
...

• Take a look at all the scripts in package.json
• For publishing to npm, use yarn publish (or…

View on GitHub

---

8. React hooks for Material UI

React hooks for Material UI. For each state, each hook accepts an optional default state and returns a state-setting utility function.

CharlesStover / use-mui

React hooks for Material UI

React hooks for Material UI

Install

• npm install use-mui or
• yarn add use-mui

Supported components

For each state, each hook accepts an optional default state and returns a state-setting utility function (that you should not need but is available to fit any edge cases your may have). For example: a component with a value prop will have an accompanying hook with an optional defaultValue parameter property and setValue state property; a component with an open prop will have an accompanying hook with an optional defaultOpen parameter property and setOpen state property.

function MyTextField() {
  const { handleChange, setValue, value } = useTextField({
    defaultValue: 'Loading...',
  });
  useEffect(() => {
    getAsyncValue()
      .then(asyncValue => {
        setValue(asyncValue);
      })
      .catch(() => {
        setValue('');
      }

…

View on GitHub

---

9. Animated Emojis

Library with animated emojis.

beerose / animated-emojis

Animated emojis 😢💗😡😨😊

Animated Emojis

Library with animated emojis.

Docs

https://animated-emojis.netlify.com/

Install

yarn add animated-emojis # npm i animated-emojis

API

size: Number | undefined
animate: Boolean | undefined

Setup

yarn # npm i

Run docs

yarn docz:dev # npm run docz:dev

Build lib

yarn build # npm run build

View on GitHub

---

10. Checka11y.css

A CSS stylesheet to quickly highlight a11y concerns.

jackdomleo7 / Checka11y.css

A CSS stylesheet to quickly highlight a11y concerns.

---

Checka11y.css

A CSS stylesheet to quickly highlight a11y concerns.

Lightweight • Modern • Accessibile • Customisable • Simple

The first line of defence for testing accessibility.

Designed to quickly highlight some common accessibility errors and warnings that can be easily and quickly rectified.

Recommended before turning to automation tools and scanners such as Lighthouse on Chrome.

Remember not to push this to production!

A great tool for:

• Websites and web applications to begin improving their accessibility.
• Developers and testers/QA to learn more about accessibility and creating accessible websites and applications.

---

Features

Our features are always checked against the W3C accessibility guidelines.

A list of some common a11y concerns Checka11y.css will check for and highlight :

• Check for invalid HTML elements nested inside of <a> and <button>
• Check for missing alt attributes on images
• Check for media that is set to autoplay
• Check <li> is the only direct child of <ol>…

View on GitHub

---

Stargazing 📈

Top risers over last 7 days🔗

1. JavaScript Algorithms +1,625 stars
2. Coding Interview University +860 stars
3. LittleJS +823 stars
4. Free Programming Books +686 stars
5. Awesome +648 stars

Top growth(%) over last 7 days🔗

1. LittleJS +39%
2. Cromwell CMS +32%
3. Pollen +28%
4. Yoha +25%
5. Elecrue +24%

Top risers over last 30 days🔗

1. Public APIs +5,167 stars
2. Uptime Kuma +4,986 stars
3. JavaScript Algorithms +4,793 stars
4. Awesome +3,461 stars
5. Free Programming Books +2,649 stars

Top growth(%) over last 30 days🔗

1. ct +171%
2. Uptime Kuma +136%
3. Refine +136%
4. Agrippa +131%
5. Nice Modal React +99%

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.

Comments

[Jack Domleo]

Really exciting to see Checka11y.css in this list 🙌

[Nitzan Hen]

I'm amazed to see Agrippa as the 4th place in top growth in the last 30 days! Super grateful to all of our supporters!