Skip to content

maxim-berdnikov/dev-tools

Repository files navigation

Developer Tools Collection

Contents


Frontend

Design

Design Systems/Frameworks

  • Ant Design - A design system for enterprise-level products. An enterprise-class UI design language and React UI library.
  • Bootstrap - Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
  • Material UI - MUI provides a robust, customizable, and accessible library of foundational and advanced components, enabling you to build your own design system and develop React applications faster.
  • TailwindCSS - A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Tools

  • Clippy - The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
  • Pure CSS Loaders - Open source CSS loading animations dedicated for speed, simplicity & dev-friendly.
  • Cubic Bezier - A better tool for cubic-bezier() easing

Packages

  • Classnames - A simple JavaScript utility for conditionally joining classNames together.
  • Eslint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
  • Husky - Husky improves your commits and more 🐶 woof! You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.
  • Node SASS - Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
  • Stylelint - A mighty CSS linter that helps you avoid errors and enforce conventions.

Color Palettes

Dev Games

Testing

  • Jest - Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
  • Testing Library - Simple and complete testing utilities that encourage good testing practices
  • JSBench - Jsbench.me is performance benchmarking playground for JavaScript, heavily inspired and influenced by jsperf.com and jsfiddle.net. It uses Benchmarkjs.com to execute test suites.

Animation

  • AnimateCSS - Just-add-water CSS animations
  • AOS - Animate on scroll library.
  • CSShake - Some CSS classes to move your DOM!
  • Mojs - The motion graphics toolbelt for the web.

Blob Generators

  • Blobmaker.app - Blobmaker is a free generative design tool made with 💕 by z creative labs, to help you quickly create random, unique, and organic-looking SVG shapes.

JavaScript

  • Axios - Promise based HTTP client for the browser and node.js.
  • ChartsJS - Simple yet flexible JavaScript charting for designers & developers
  • Faker - Generate massive amounts of fake data in the browser and node.js.
  • Fast Sort - Fast easy to use and flexible sorting with TypeScript support. For speed comparison of fast-sort vs other popular sort libraries check benchmark section. For list of all available features check highlights section.
  • JustValidate - Lightweight (~4,5kb gzip) form validation in Javascript Vanilla, without dependencies, with customizable rules (including remote validation), customizable messages and customizable submit form with ajax helper.
  • IMask - Vanilla javascript input mask.
  • Plural-RU - Склонение русских существительных и глаголов!
  • SwiperJS - The Most Modern Mobile Touch Slider.
  • Typescript - TypeScript is a strongly typed programming language which builds on JavaScript giving you better tooling at any scale.

React

  • Create React App - Set up a modern web app by running one command.
  • React Helmet - This reusable React component will manage all of your changes to the document head.
  • React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.
  • React Router DOM - React Router is a collection of navigational components that compose declaratively with your application.
  • React Query - Fetch, cache and update data in your React and React Native applications all without touching any "global state".

Gulp

  • Gulp Include - Makes inclusion of files a breeze. Enables functionality similar to that of snockets / sprockets or other file insertion compilation tools.

Canvas

  • Excalidraw - An open source virtual hand-drawn style whiteboard. Collaborative and end-to-end encrypted.
  • Konva.js - HTML5 2d canvas js library for desktop and mobile applications

Backend

Node.js

  • Express - Fast, unopinionated, minimalist web framework for Node
  • Cors - CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.

Enviroment

  • Concurrently - Run multiple commands concurrently.
  • Config - Node-config organizes hierarchical configurations for your app deployments.
  • Dotenv - Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
  • Nodemon - Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

Others

Utils

  • Auto-Changelog - Command line tool for generating a changelog from git tags and commit history.

JSON

Chrome Extensions

GitHub

GitHub Actions

Code Playgrounds