DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 19th February 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
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. React Simple Animate

React UI animation made easy. Animation from style A to B,CSS keyframes animation, Chain up animation sequences and a tiny size without other dependency

GitHub logo bluebill1049 / react-simple-animate

🎯 React UI animation made easy

React Simple Animate Logo - UI Animation Made Simple

React Simple Animate

React UI animation made easy

npm downloads npm npm Coverage Status

Features

  • Animation from style A to B
  • CSS keyframes animation
  • Chain up animation sequences
  • Tiny size without other dependency

Install

$ npm install react-simple-animate

Docs

Quickstart

Components

import React from "react";
import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate";
export default () => (
  <>
    {/* animate individual element. */}
    <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
      <h1>React simple animate</h1>
    </Animate>
    {/* animate keyframes with individual element. */}
    <AnimateKeyframes
      play
      iterationCount="infinite"
      keyframes={["opacity: 0", "opacity: 1"]}
    >
      <h1>React simple animate with keyframes</h1>
    <
…
Enter fullscreen mode Exit fullscreen mode

2. Hookstate

The simple but very powerful and incredibly fast state management for React that is based on hooks

GitHub logo avkonst / hookstate

The simple but very powerful and incredibly fast state management for React that is based on hooks

Hookstate

The simple but very powerful and incredibly fast state management for React that is based on hooks.

Why? β€’ Docs / Samples β€’ Demo application β€’ Plugins β€’ Release notes

Preface

Hookstate is a modern alternative to Redux, Mobx, Formik without boilerplate. It is simple to learn but very flexible to use. It has got impressive performance and predictable behavior.

Any questions? Just ask by raising a github ticket.

Why Hookstate

hookstate.js.org

Migrating to version 3

hookstate.js.org/docs/migrating-to-v3

Documentation / Code samples

hookstate.js.org/docs/getting-started

Demo application

hookstate.js.org/demo-todolist

Development tools

hookstate.js.org/docs/devtools

Plugins / Extensions

hookstate.js.org/docs/extensions-overview

API reference

hookstate.js.org/docs/typedoc-hookstate-core







3. rich-markdown-editor

A React and Prosemirror based editor that powers Outline and can also be used for displaying content in a read-only fashion. The editor is WYSIWYG and includes formatting tools whilst retaining the ability to write markdown shortcuts inline and output plain Markdown.

GitHub logo outline / rich-markdown-editor

The open source React and Prosemirror based markdown editor that powers Outline wiki. Want to try it out? Create an account:

npm version CircleCI Formatted with Prettier TypeScript Sponsor

rich-markdown-editor

A React and Prosemirror based editor that powers Outline and can also be used for displaying content in a read-only fashion The editor is WYSIWYG and includes formatting tools whilst retaining the ability to write markdown shortcuts inline and output plain Markdown.

Important Note: This project is not attempting to be an all-purpose Markdown editor. It is built for the Outline knowledge base, and whilst others are welcome to fork or use this package in your own products, development decisions are centered around the needs of Outline.

Usage

Install

yarn add rich-markdown-editor
Enter fullscreen mode Exit fullscreen mode

or

npm install rich-markdown-editor
Enter fullscreen mode Exit fullscreen mode

Note that react, react-dom, and styled-components are required peer dependencies.

Import

import Editor from "rich-markdown-editor";
<Editor
  defaultValue="Hello world!"
/>
Enter fullscreen mode Exit fullscreen mode

Clone this repo and run the Storybook with yarn start to see a wide variety of example usage.

Props

id

A unique id for this editor…


4. Fabric.js

Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

GitHub logo fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js

Build Status Code Climate Coverage Status Gitpod Ready-to-Code

Bower version NPM version Downloads per month CDNJS version

Dependency Status devDependency Status

Bountysource Flattr this git repo

Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes β€” rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties β€” color, transparency, z-index, etc. You can also manipulate these objects altogether β€” grouping them with a simple mouse selection.

Non-Technical Introduction to Fabric

Fabric.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML <canvas> element on a webpage using JavaScript. Fabric.js will then allow you to manipulate the size, position and rotation…


5. TailwindCSS

A utility-first CSS framework for rapidly building custom user interfaces.

GitHub logo tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.

Tailwind CSS
A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License Code Coverage


Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For casual chit-chat with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.







6. CASL

CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access

GitHub logo stalniy / casl

CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access

CASL logo

Financial Contributors on Open Collective build CASL codecov CASL Join the chat at https://gitter.im/stalniy-casl/casl

CASL (pronounced /ˈkΓ¦sΙ™l/, like castle) is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access. It's designed to be incrementally adoptable and can easily scale between a simple claim based and fully featured subject and attribute based authorization. It makes it easy to manage and share permissions across UI components, API services, and database queries.

Heavily inspired by cancan.

Features

  • Versatile An incrementally adoptable and can easily scale between a simple claim based and fully featured subject and attribute based authorization.
  • Isomorphic Can be used on frontend and backend and complementary packages make integration with major Frontend Frameworks and Backend ORMs effortless
  • TypeSafe Written in TypeScript, what makes your apps safer and developer experience more enjoyable
  • Tree shakable The core is only 4KB mingzipped and can be even smaller!
  • Declarative Thanks to declarative rules, you can serialize and share permissions between…

7. React Static Tweets

Extremely fast static renderer for tweets.

GitHub logo transitive-bullshit / react-static-tweets

Extremely fast static renderer for tweets.

React Static Tweets

React Static Tweets

Extremely fast static renderer for tweets.

NPM Build Status Prettier Code Formatting

Why?

Twitter's embedding SDK is horribly slow and inefficient. For embedding tweets on your site (including SSR), this solution is 10-100x faster! πŸ”₯

This project takes Vercel's work on static tweet rendering and packages it up into two easy-to-use NPM packages.

Here's a before and after which makes it clear how big of a difference this makes in practice. The first page uses Twitter's official iframe embedding SDK, and the second page uses react-static-tweets.

This project is being used in production by super.so.

Features

Usage

The easiest way to get started is to render tweets client-side (which will fetch the tweet data on-the-fly).

import React from 'react'
…
Enter fullscreen mode Exit fullscreen mode

8. bcrypt.js

Optimized bcrypt in plain JavaScript with zero dependencies.

GitHub logo dcodeIO / bcrypt.js

Optimized bcrypt in plain JavaScript with zero dependencies.

bcrypt.js

Optimized bcrypt in JavaScript with zero dependencies. Compatible to the C++ bcrypt binding on node.js and also working in the browser.

build static donate ❀

Security considerations

Besides incorporating a salt to protect against rainbow table attacks, bcrypt is an adaptive function: over time, the iteration count can be increased to make it slower, so it remains resistant to brute-force search attacks even with increasing computation power. (see)

While bcrypt.js is compatible to the C++ bcrypt binding, it is written in pure JavaScript and thus slower (about 30%), effectively reducing the number of iterations that can be processed in an equal time span.

The maximum input length is 72 bytes (note that UTF8 encoded characters use up to 4 bytes) and the length of generated hashes is 60 characters.

Usage

The library is compatible with CommonJS and AMD loaders and is exposed globally as dcodeIO.bcrypt if neither is available.

…

9. Sass Boilerplate

A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.

GitHub logo HugoGiraudel / sass-boilerplate

A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.

Sass Boilerplate

This is a sample project using the 7-1 architecture pattern and sticking to Sass Guidelines writing conventions.

Each folder of this project has its own README.md file to explain the purpose and add extra information. Be sure to browse the repository to see how it works.

Using the indented syntax

Sass conversion

This boilerplate does not provide a .sass version as it would be painful to maintain both versions without an appropriate build process. However, it is very easy to convert this boilerplate to Sass indented syntax.

Clone it, head into the project and then run:

sass-convert -F scss -T sass -i -R ./  && find . -iname β€œ*.scss” -exec bash -c 'mv "$0" β€œ${0%\.scss}.sass"' {} \

Use with Node-sass

When using node-sass - in order to build that boilerplate, one needs to:

  • install node-sass if not yet installed:
npm install -g node-sass
Enter fullscreen mode Exit fullscreen mode
  • run build command from command…

10. Devicons

An iconic font made for developers. Devicons contains 85 vectorized sharp glyphs . Devicons iconic font is free to use and licensed under MIT.

GitHub logo vorillaz / devicons

Devicons - An iconic font made for developers

Meet Devicons

an iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds.

NPM version Downloads

Devicons is a full stack iconic font ready to be shipped with your next project. Created, handcrafted and coded by Theodore Vorillas Devicons contains 85 vectorized sharp glyphs Devicons iconic font is free to use and licensed under MIT.

Devicons icon set 1.8.0

Devicons

Use Devicons with a single line of code.

Thanks to the wonderful guys of jsdelivr you can now add Devicons into your project by adding the following code into the <HEAD> section of your project's HTML:

<link href='//cdn.jsdelivr.net/npm/devicons@1.8.0/css/devicons.min.css' rel='stylesheet'>

Getting Started

  1. Download and extract the repository
  2. Copy the devicons.css to your project
  3. Copy the fonts folder to your project
  4. Ensure the font urls within devicons.css properly reference the fonts path within your project.
  5. Include a reference to the devicons.css file from every webpage you need to use it.

Install using

…

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)

Collapse
anmolkumar5 profile image
anmolkumar5

Thanks Sharing Nice List