?10 Trending projects on GitHub for web developers – 14th May 2021

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

1. Slidev

Presentation Slides for Developers

slidevjs
/
slidev…


This content originally appeared on DEV Community and was authored by Iain Freestone

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

1. Slidev

Presentation Slides for Developers

GitHub logo slidevjs / slidev

Presentation Slides for Developers (Public Beta ?)


Slidev

Presentation slides for developers ?‍??‍??‍?

NPM version NPM Downloads Docs & Demos Themes
GitHub stars

Video Preview


Status: Public Beta ?
Made possible by my Sponsor Program ?

Slidev - Presentation Slides for Developers | Product Hunt

Motivation

I always found myself spending too much time styling and layouting slides when using apps like PowerPoint / Keynote / Google Slides. Whenever I need to share code snippets, I would also need to use other tools to generate the highlighted code as images over and over again.

So as a frontend developer, why not solve it the way that fits better with what I am good at?

Documentations and guides on Sli.dev

Features

2. Serverless Next.js Component

Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components

GitHub logo serverless-nextjs / serverless-next.js

⚡ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components

Serverless Next.js Component

logo

serverless GitHub contributors Financial Contributors on Open Collective npm latest npm alpha Build Status End-to-end Tests Codacy Badge codecov Tested Next.js versions Cypress.io Platforms

A zero configuration Next.js 9.0 serverless component for AWS Lambda@Edge aiming for full feature parity.

Please review features for a list of currently supported features.

Contents

⚠️ This README reflects the latest changes on the master branch. It may or may not yet be published to the latest (stable) or alpha release in npm. Please go to Releases, find the correct @sls-next/serverless-component version you are using, and open the README for that release for more accurate information. If a feature is listed in this README but not working, please first try upgrading to the most recent alpha release in npm.

Motivation

Since Next.js 8.0, serverless mode was introduced which provides a new low level API which projects like this…

3. Prism

Lightweight, robust, elegant syntax highlighting.

GitHub logo PrismJS / prism

Lightweight, robust, elegant syntax highlighting.

Prism

Build Status npm

Prism is a lightweight, robust, and elegant syntax highlighting library. It's a spin-off project from Dabblet.

You can learn more on prismjs.com.

Why another syntax highlighter?

More themes for Prism!

Contribute to Prism!

Prism depends on community contributions to expand and cover a wider array of use cases. If you like it, consider giving back by sending a pull request. Here are a few tips:

  • Read the documentation. Prism was designed to be extensible.
  • Do not edit prism.js, it’s just the version of Prism used by the Prism website and is built automatically. Limit your changes to the unminified files in the components/ folder. prism.js and all minified files are also generated automatically by our build system.
  • The build system uses gulp to minify the files and build prism.js. With all of Prism's dependencies installed, you just need to run the command npm run

4. medium-zoom

A JavaScript library for zooming images like Medium

GitHub logo francoischalifour / medium-zoom

?? A JavaScript library for zooming images like Medium

Demo

medium-zoom

A JavaScript library for zooming images like Medium

version MIT license downloads
gzip size no dependencies travis

Medium Zoom Demo

? Playground? Demo? Storybook

Contents

Features

  • ? Responsivescale on mobile and desktop
  • ? Performant and lightweightshould be able to reach 60 fps
  • ⚡️ High definition supportload the HD version of your image on zoom
  • ? Flexibilityapply the zoom to a selection of images
  • ? Mouse, keyboard and gesture friendlyclick anywhere, press a key or scroll away to close the zoom
  • ? Event handlingtrigger events when the zoom enters a new state
  • ? Customizationset your own margin, background and scroll offset
  • ? Pluggableadd your own features to the zoom
  • ? Custom templatesextend the default look to match the UI of your app

Installation

The module…

5. Gestalt

A set of React UI components that supports Pinterest’s design language

GitHub logo pinterest / gestalt

A set of React UI components that supports Pinterest’s design language

Gestalt

NPM Version gestalt

Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.

Visit the official Gestalt Documentation

Installation

The package can be installed via npm:

npm i gestalt --save
npm i gestalt-datepicker --save

Or via yarn:

yarn add gestalt
yarn add gestalt-datepicker

Usage

Gestalt exports each component as ES6 modules and a single, precompiled CSS file:

import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';

That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS.

Development

Gestalt is a multi-project monorepo. The docs and components are all organized as separate packages that share similar tooling.

Install project…

6. KaTeX

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

GitHub logo KaTeX / KaTeX

Fast math typesetting for the web.

KaTeX

npm semantic-release CI codecov Discussions jsDelivr katex.min.js size Gitpod ready-to-code

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

  • Fast: KaTeX renders its math synchronously and doesn't need to reflow the page. See how it compares to a competitor in this speed test.
  • Print quality: KaTeX's layout is based on Donald Knuth's TeX, the gold standard for math typesetting.
  • Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.
  • Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.

KaTeX is compatible with all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 11.

KaTeX supports much (but not all) of LaTeX and many LaTeX packages. See the list of supported functions.

Try out KaTeX on the demo page!

Getting started

Starter template

<!DOCTYPE html>
<!-- KaTeX requires the

7. Rooks

Essential hooks to super charge your components!

GitHub logo imbhargav5 / rooks

Essential hooks ⚓ to super charge your components!




Build Status Release script All Contributors


A super awesome collection of regularly used custom hooks as utils for React.

Complete Documentation

Image from Gyazo

List of all hooks

8. colors.css

Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.

GitHub logo mrmrs / colors

Smarter defaults for colors on the web.

colors.css 3.0.0

Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.

Stats

903 85 85
bytes selectors declarations

Installation

With npm

npm install --save-dev colors.css

With Git

git clone https://github.com/tachyons-css/colors.css

Usage

Using with PostCSS

Import the css module

@import "colors.css";

Then process the CSS using the tachyons-cli

$ npm i -g tachyons-cli
$ tachyons-cli path/to/css-file.css > dist/t.css

Using the CSS

The built CSS is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

<link rel="stylesheet" href="path/to/module/css/colors.css">

Development

The source CSS files can be found in the src directory. Running $ npm start will process the source CSS and place the built CSS in the css directory.

The CSS

/*
  COLORS
  Better default colors

9. Draftail

A configurable rich text editor built with Draft.js. Draftail aims for a mouse-free, keyboard-centric experience.

GitHub logo springload / draftail

?? A configurable rich text editor built with Draft.js

Draftail

npm Build status Coverage Status Netlify Status

?? A configurable rich text editor built with Draft.js. Check out our demos!

Screenshot of Draftail

Features

Draftail aims for a mouse-free, keyboard-centric experience. Here are important features worth highlighting:

  • Support for keyboard shortcuts. Lots of them!
  • Paste from Word. Or any other editor. It just works.
  • Autolists – start a line with - , * , 1. to create a list item.
  • Shortcuts for heading levels ##, code blocks ```, text formats **, and more.
  • Undo / redo – until the end of times.
  • Common text types: headings, paragraphs, quotes, lists.
  • Common text styles: Bold, italic, and many more.
  • API to build custom controls for links, images, and more.
  • Compatibility with the draft-js-plugins ecosystem to build more advanced extensions.

This project adheres to Semantic Versioning, and measures performance and code coverage. It uses Flow types. We also try to follow accessibility best…





10. Supercons

A friendly, open source React iconset

GitHub logo lachlanjc / supercons

A friendly, open source React iconset

Supercons

A friendly set of open source React icons.

Preview & search the iconset

Massive credit to @superbryntendo for the original set of icons & aesthetic inspiration.

Predecessor projects: spectrum-icons, @hackclub/icons

Banner with fun styling of Supercons

Usage

yarn add supercons
# npm i supercons
import React from 'react'
import Icon from 'supercons'
export default () => (
  <div style={{ color: 'magenta' }}>
    <Icon glyph="like" size={128} />
    <Icon glyph="cloud" size={32} />
  </div>
)

Built with/supports TypeScript.

Props

Prop Type Default Details
glyph String, required like See docs
size Number or string 32 Sets width & height
as React component svg Must render svg tag

You can also pass any other props. Remember to make your icons accessible with aria-label or title, use aria-hidden if they’re purely…

Stargazing ?

Top risers over last 7 days

  1. Coding Interview University +1,630 stars
  2. Web Development for Beginners +1,572 stars
  3. The Book of Secret Knowledge +1,447 stars
  4. 30 seconds of code +1,330 stars
  5. Public APIs +1,209 stars

Top growth(%) over last 7 days

  1. Mantine +63%
  2. useStateMachine +49%
  3. react-icon-blur +46%
  4. WinBox +32%
  5. Grafar +24%

Top risers over last 30 days

  1. Coding Interview University +6,612 stars
  2. Public APIs +6,491 stars
  3. Web Developer Roadmap +4,995 stars
  4. Free Programming Books +4,799 stars
  5. Supabase +4,753 stars

Top growth(%) over last 30 days

  1. github-elements +116%
  2. React Flow +97%
  3. superplate +95%
  4. SimpleR State +63%
  5. Supabase +62%

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.


This content originally appeared on DEV Community and was authored by Iain Freestone


Print Share Comment Cite Upload Translate Updates
APA

Iain Freestone | Sciencx (2021-05-14T13:57:46+00:00) ?10 Trending projects on GitHub for web developers – 14th May 2021. Retrieved from https://www.scien.cx/2021/05/14/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-14th-may-2021/

MLA
" » ?10 Trending projects on GitHub for web developers – 14th May 2021." Iain Freestone | Sciencx - Friday May 14, 2021, https://www.scien.cx/2021/05/14/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-14th-may-2021/
HARVARD
Iain Freestone | Sciencx Friday May 14, 2021 » ?10 Trending projects on GitHub for web developers – 14th May 2021., viewed ,<https://www.scien.cx/2021/05/14/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-14th-may-2021/>
VANCOUVER
Iain Freestone | Sciencx - » ?10 Trending projects on GitHub for web developers – 14th May 2021. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/14/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-14th-may-2021/
CHICAGO
" » ?10 Trending projects on GitHub for web developers – 14th May 2021." Iain Freestone | Sciencx - Accessed . https://www.scien.cx/2021/05/14/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-14th-may-2021/
IEEE
" » ?10 Trending projects on GitHub for web developers – 14th May 2021." Iain Freestone | Sciencx [Online]. Available: https://www.scien.cx/2021/05/14/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-14th-may-2021/. [Accessed: ]
rf:citation
» ?10 Trending projects on GitHub for web developers – 14th May 2021 | Iain Freestone | Sciencx | https://www.scien.cx/2021/05/14/%f0%9f%9a%8010-trending-projects-on-github-for-web-developers-14th-may-2021/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.