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
bluebill1049
/
react-simple-animate
π― React UI animation made easy
React Simple Animate
React UI animation made easy
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>
<β¦2. Hookstate
The simple but very powerful and incredibly fast state management for React that is based on hooks
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, Recoil, etc. It is simple to learn, easy to use, extendable, very flexible and capable to address all state management needs of large scalable applications. It has got impressive performance and predictable behavior.
Any questions? Just ask by raising a github ticket.
Why Hookstate
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
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.
outline
/
rich-markdown-editor
The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
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
or
npm install rich-markdown-editor
Note that react, react-dom, and styled-components are required peer dependencies.
Import
import Editor from "rich-markdown-editor";
<Editor
defaultValue="Hello world!"
/>
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.
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.
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.
tailwindlabs
/
tailwindcss
A utility-first CSS framework for rapid UI development.
A utility-first CSS framework for rapidly building custom user interfaces.
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
stalniy
/
casl
CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access
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 6KB 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.
transitive-bullshit
/
react-static-tweets
Extremely fast static renderer for tweets.
React Static Tweets
Extremely fast static renderer for tweets.
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.
This project is being used in production by super.so.
Features
-
β‘ Fast - 10-100x faster than using Twitter's iframe widget. -
π₯ Solid - Used in production by super.so, addpotion.so, Twitter Search and react-notion-x. -
π Simple - TypeScript + React.
Install
npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns
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'
import { Tweet } from 'react-static-tweets'
export default Example({ tweetId }) => (
<Tweet id={β¦8. 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.
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.
KittyGiraudel
/
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-sassif not yet installed:
npm install -g node-sass
- 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.
Meet Devicons
an iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds.
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
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
- Download and extract the repository
- Copy the
devicons.cssto your project - Copy the
fontsfolder to your project - Ensure the font urls within
devicons.cssproperly reference thefontspath within your project. - Include a reference to the
devicons.cssfile 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.
Latest comments (1)
Thanks Sharing Nice List