DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 26th March 2021

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・2 min read

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

1. The Magic of CSS

A CSS course to turn you into a magician.

GitHub logo adamschwartz / magic-of-css

A CSS course to turn you into a magician.





2. React Cool Dimensions

React hook to measure an element's size and handle responsive components.

GitHub logo wellyshen / react-cool-dimensions

😎 πŸ“ React hook to measure an element's size and handle responsive components.

REACT COOL DIMENSIONS

A React hook that measure an element's size and handle responsive components with highly-performant way, using ResizeObserver. Try it you will πŸ‘πŸ» it!

❀️ it? ⭐️ it on GitHub or Tweet about it.

πŸ‘€ Looking for a form library? Give React Cool Form a try!

build status coverage status npm version npm downloads npm downloads npm bundle size MIT licensed All Contributors PRs welcome Twitter URL

demo

⚑️ Try yourself: https://react-cool-dimensions.netlify.app

Features

Requirement

To use react-cool-dimensions, you…


3. Nextra

Nextra is a Next.js and MDX powered, no-code Static Site Generator.

GitHub logo shuding / nextra

The Next.js Static Site Generator





4. Fusuma

Fusuma makes slides with Markdown easily.

GitHub logo hiroppy / fusuma

✍️Fusuma makes slides with Markdown easily.

A tool to create slides easily for you ✍ ️

npm Azure Codecov

Features

  • Zero Config
  • Providing various modes
  • Markdown and MDX
  • Themes
  • Code syntax Highlight, MathJax, Diagrams, and Flowcharts
  • Browser-friendly slides
    • All results for lighthouses are perfect
    • Full supporting for SEO and OGP
    • Checking a11y(Accessibility)
  • Customizable JavaScript and CSS
  • A sidebar having agenda and some features

Modes

  • Init Mode
    • Creating a slide, style, configuration file
    • Creating GitHub actions that deploy slides to gh-pages automatically
  • Development Mode
    • Running with HMR
    • Just coding Markdown and sometimes CSS
  • Build Mode
    • Rendering to html and optimizing js,css,md
    • Generating an image of slides as og:image and checking a11y automatically
  • Presentation Mode
    • Speaker Note
    • Timer
    • Recording your page actions and voice
  • Deploy Mode
    • Deploying to GitHub Pages
  • PDF Mode
    • Exporting slides as PDF

Demos

Open in Gitpod

Getting Started

$ npm i fusuma -D
$
…
Enter fullscreen mode Exit fullscreen mode

5. CodeTour

VS Code extension that allows you to record and playback guided tours of codebases, directly within the editor.

GitHub logo microsoft / codetour

VS Code extension that allows you to record and playback guided tours of codebases, directly within the editor.

CodeTour πŸ—ΊοΈ

CodeTour is a Visual Studio Code extension, which allows you to record and playback guided walkthroughs of your codebases. It's like a virtual brownbag, or table of contents, that can make it easier to onboard (or re-board!) to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change. A "code tour" is simply a series of interactive steps, each of which are associated with a specific directory, or file/line, and include a description of the respective code. This allows developers to clone a repo, and then immediately start learning it, without needing to refer to a CONTRIBUTING.md file and/or rely on help from others. Tours can either be checked into a repo, to enable sharing with other contributors, or exported to a "tour file", which allows anyone to replay the same tour, without having to clone any code to do it!

…


6. Sergey

Sergey is a tiny lil’ static site generator. It’s a progressive tool designed to site atop your already brilliant HTML. In essence, Sergey is HTML + partials with slots thrown in for good measure.

GitHub logo trys / sergey

A tiny lil' static site generator

Sergey

The little static site generator

Deploy to Netlify

Sergey is a tiny lil’ static site generator. It’s a progressive tool designed to site atop your already brilliant HTML. In essence, Sergey is HTML + partials with slots thrown in for good measure.

If you’ve ever had to make a change to every header on a totally static website, you’ll know how cumbersome and error-prone it is to copy and paste the changes through all the files. That’s where Sergey comes in. Sergey lets you move that header into a single, importable file, and helps you include it everywhere you need it.

$ npm install sergey

# Build the site
$ sergey

# Run Sergey in dev mode
$ sergey --watch
Enter fullscreen mode Exit fullscreen mode




7. Vidact

A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM

GitHub logo mohebifar / vidact

A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM

Travis (.org) npm

Vidact

Vidact compiles your React source codes to VanillaJS code with No Virtual DOM ℒ️. It is similar to Svelte, but unlike Svelte, Vidact does not introduce a new syntax. It takes in pure React-compatible JavaScript (JSX) and outputs plain JavaScript.

Vidact currently is in alpha phase and has known limitations. It does not fully comply with React's behaviour in some edge cases, and probably never will, but the goal is to get as close behaviour to React as possible. Also, it currently only supports functional components and does not support class components.

How does it work and how is it different from React?

Vidact is a babel-plugin that scans your source code to find what parts of the UI need to be updated in response to a prop or state change and generates a plain JavaScript code that should have the same DOM result as the equivalent…


8. Compiled

A familiar and performant compile time CSS-in-JS library for React.

GitHub logo atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.

Compiled

A familiar and performant compile time CSS-in-JS library for React.

Apache 2.0 @compiled/react PRs welcome

Get started now ➚

Usage

import { styled, ClassNames } from '@compiled/react';
// Tie styles to an element
<div css={{ color: 'purple' }} />
// Create a component that ties styles to an element
const StyledButton = styled.button`
  color: ${(props) => props.color};
`;

// Use a component where styles are not necessarily tied to an element
<ClassNames>
  {({ css }) => children({ className: css({ fontSize: 12 }) })}
</ClassNames>
Enter fullscreen mode Exit fullscreen mode

Extract styles

Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet.

-import {
…
Enter fullscreen mode Exit fullscreen mode

9. Got

Human-friendly and powerful HTTP request library for Node.js

GitHub logo sindresorhus / got

🌐 Human-friendly and powerful HTTP request library for Node.js



Got


Sindre's open source work is supported by the community.
Special thanks to








Human-friendly and powerful HTTP request library for Node.js

Coverage Status Downloads Install size

Moving from Request? (Note that Request is unmaintained)

See how Got compares to other HTTP libraries

For browser usage, we recommend Ky by the same people.

Support questions should be asked here.

Highlights

Install

$ npm install got

Usage

Promise
const got = require('got');
(async () => {
    try {
        const response = await got('https://sindresorhus.com');
        console.log(response.body);
…
Enter fullscreen mode Exit fullscreen mode

10. patch-package

patch-package lets app authors instantly make and keep fixes to npm dependencies. It's a vital band-aid for those of us living on the bleeding edge.

GitHub logo ds300 / patch-package

Fix broken node modules instantly πŸƒπŸ½β€β™€οΈπŸ’¨

patch-package

patch-package lets app authors instantly make and keep fixes to npm dependencies. It's a vital band-aid for those of us living on the bleeding edge.

# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js
# run patch-package to create a .patch file
npx patch-package some-package
# commit the patch file to share the fix with your team
git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"
Enter fullscreen mode Exit fullscreen mode

Patches created by patch-package are automatically and gracefully applied when you use npm(>=5) or yarn.

No more waiting around for pull requests to be merged and published. No more forking repos just to fix that one tiny thing preventing your app from working.

Set-up

In package.json

 "scripts": {
+  "postinstall": "patch-package"
 }
Enter fullscreen mode Exit fullscreen mode

Then

npm

npm i patch-package

You can use --save-dev if you don't need to run npm in production, e.g. if you're making a web frontend.

…

Stargazing πŸ“ˆ

Top risers over last 7 days

  1. Web Development for Beginners +3,032 stars
  2. Free Programming Books +1,105 stars
  3. Coding Interview University +1,059 stars
  4. Developer Roadmap +958 stars
  5. Clone Wars +768 stars

Top risers over last 30 days

  1. Web Development for Beginners +5,463 stars
  2. Free Programming Books +3,320 stars
  3. Vite +3,605 stars
  4. Developer Roadmap +2,810stars
  5. Public APIs +2,743 stars

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

If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Discussion (1)

pic
Editor guide
Collapse
klvenky profile image
venkatesh k

I knew about got from a colleague & it's the best. Gives you best in class defaults. Vscode code tour also looks good.
Thanks.