nirjan-dev / interesting-repos-tools-cheatsheets Goto Github PK
View Code? Open in Web Editor NEWA collection of interesting js and css plugins
A collection of interesting js and css plugins
Simple and highly customizable excel-like spreadsheet
npm install react-datasheet --save
A GraphQL client for React using modern context and hooks APIs that is lightweight (< 2.5 KB size limited) but powerful; the first Relay and Apollo alternative with server side rendering. https://graphql-react.now.sh
๐๐ Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. http://ui.toast.com/tui-editor
React component for the Intersection API
React Intersection Observer is a React component, acting as a wrapper for the IntersectionObserver API. It is fully declarative and takes care of all the imperative parts for you.
React Intersection Observer is good at:
reusing instances: comparing the passed options
performance: chooses smartly when to re-render and when to re-observe
being unopinionated: how to handle visibility changes is left entirely up to the developer
being intuitive: looks like the Native API
streamline the way you develop apps
build responsive and accessible mobile-first projects for the web with an easy to use component library
Simple and powerful tool for creating breakpoints in styled components and emotion. ๐
Immutable state store for react apps with suspense integration.
link to the repo
JavaScript library for reorderable drag-and-drop lists
link to the site
A curated list of awesome framework-agnostic standalone web components
Not sure what colors to use in your designs or where to use them? Happy Colors is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.
What is it?
React Animated Navigator is an extension for react-router, which provides animated transitions between routes, with friendly components and hooks for navigation. It is using react-transition-group to maintain the transitions.
Features
Supports using focal element (aka SharedElement), which is a persistent element significant to the hierarchy that can be tweened. Like animated containers, focal elements enhance continuity by seamlessly transforming their appearance.
Provides many built-in transitions (Fly, Slide, Flip, ... more effects will be added).
Easy to use, and extend with your custom transitions.
Design resources that will help you get things done faster
link to the site
Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufteโs books and handouts. Tufteโs style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.
Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdownโs Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.
A simple, dependency-free state manager for React using hooks.
Short code snippets for all your development needs
Mailmeteor is the easiest and privacy-first Gmail mail merge add-on. Run campaigns so that each of your recipients gets a personalized email.
Desktop javascript scratchpad app link to the site
link to the repo
react-interactive-paycard
Inspired from a vue project vue-interactive-paycard, I decided to recreate the same on React as a part time fun project. I did some minor changes on the animations and optimizations on the code.
A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with reactjs and also fully responsive
Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.
BackstopJS
Visual regression testing for web apps.
Supports screen rendering with Chrome-headless. Add your own interactions with Puppeteer and ChromyJS scripting.
BackstopJS was created by Garris Shipon with contributions from these amazing engineers.
Opensourced under the The MIT License.
a list of javascript interview questions and thier solutions link to the repo
Vanilla Web Components. A place for framework-free, transpiler-free, scaffolding-free web components.
Rallax.js is a vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies. See documentation.
Next-Generation full text search library for Browser and Node.js
Web's fastest and most memory-flexible full-text search library with zero dependencies.
Takes CSV or tab-delimited data from Excel and converts it into several web-friendly formats, include JSON and XML.
[Pure Javascript OCR for more than 100 Languages] ๐๐๐ฅ (http://tesseract.projectnaptha.com/)
A list of 24 cool tips and tricks on functional programming
A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.
Powered by Gatsby
Starting from v2, Docz is entirely built using GatsbyJS. It's optimised for a lightning fast development experience and speedy build times. This also allows you to leverage GatsbyJS's huge ecosystem of plugins and tools.
Zero config
No need to worry about complex configuration settings to build and run your documentation. With Docz you can create customizable sites with a single command.
Easy to customize
Using component shadowing you can create your own theme or customize the provided theme to make your documentation website stand out.
Based on MDX
MDX is Markdown + JSX, it brings the world of components to Markdown. MDX makes it possible to import and use your components in Markdown-style files. Docz fully leverages this, and provides many built-in components that augment and speed up your documentation workflow.
Fully pluggable
Plugins provide a great way to add functionality to your application without changing your code. With Docz, you can hook into the dataflow and build steps of your application using GatsbyJS and Docz plugins.
TypeScript support
Docz provides native TypeScript support for TSX components and can generate documentation from your prop types and comments in your code. All exported Docz components are built using TypeScript. Check out the API section for more information.
A vanilla, lightweight (~19kb gzipped ๐), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
Hooks for building fast and extendable tables and datagrids for React
Features
Lightweight (5kb - 12kb+ depending on features used and tree-shaking)
Headless (100% customizable, Bring-your-own-UI)
Auto out of the box, fully controllable API
Sorting (Multi and Stable)
Filters
Pivoting & Aggregation
Row Selection
Row Expansion
Column Ordering
Animatable
Virtualizable
Resizable
Server-side/controlled data/state
Extensible via hook-based plugin system
link to the site
list of 24 cool articles on css tips and tricks
A dead simple library to screenshot test React components
All you need is to install react-screenshot-test and configure Jest:
// jest.screenshot.config.js
module.exports = {
testEnvironment: "node",
globalSetup: "react-screenshot-test/global-setup",
globalTeardown: "react-screenshot-test/global-teardown",
testMatch: ["**/?(*.)+(screenshot).[jt]s?(x)"],
transform: {
"^.+\\.[t|j]sx?$": "babel-jest", // or ts-jest
"^.+\\.css$": "react-screenshot-test/css-transform",
"^.+\\.scss$": "react-screenshot-test/sass-transform",
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"react-screenshot-test/asset-transform"
},
transformIgnorePatterns: ["node_modules/.+\\.js"]
};
You can then generate screenshots with jest -c jest.screenshot.config.js -u, just like you would with Jest snapshots.
A neat way to unsubscribe from observables when the component destroyed
React query
Hooks for fetching, caching and updating asynchronous data in React
This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.
link to the site
link to the repo
Vegetarian friendly state for React
Features
Zero configuration
No boilerplate
React hooks based API
Computed properties - i.e. derived data
Data fetching / side effects
Persist state to session/local storage
Testing helpers
Extensive TypeScript support
Global, shared, or component level stores
React Native supported
Redux Dev Tools supported
Hot Reloading supported
The task library that just works build by microsoft
link to the site
A JSX-based page builder for creating beautiful websites without writing code. Blocks comes with built-in components that are carefully designed and implemented with Theme UI.
The editor reads and writes production-ready React code, making it an innovative tool for teams.
It's open source and MIT licensed.
STATE DEBUGGER FOR REACT
The only time-travel debugging tool you need to develop your React application by tracking, visualizing, and reverting state changes.
(The fastest JSON Schema Validator. Supports draft-04/06/07) [https://ajv.js.org]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.