Developer Tools Collection

Contents

• Frontend
  • Design
    • Design Systems/Frameworks
    • Tools
    • Packages
    • Color Palettes
    • CSS Games
  • JavaScript
  • React
  • Animation
  • Gulp
• Backend
  • Node.js
    • Enviroment
  • Others
• Utils
• JSON
• Terminal Commands (Unix)
• Git Commands
• VS Code Extensions
• VS Code Shortcuts
• Chrome Extensions
• SSH Generating
• GitHub
  • GitHub Actions
• Code Playgrounds
• YouTube Channels

---

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

• HTML Colour Codes - Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names. Let's go!
• HTML CSS Color
• Color HEX
• Color HEXA
• Gradient King
• UI Gradients - Beautiful colour gradients for design and code.

Dev Games

• Grid Garden - A game in which you write CSS code to grow your carrot garden.
• Flexbox Froggy - A game where you help Froggy and friends by writing CSS code.
• Regex Learn -

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

• Socket.io

Utils

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

JSON

• What is JSON - An article about JSON format (in Russian).
• JSON Generator
• JSON Server - Fake Local API.
• Mock Service Worker - Fake Local API.
• SWAPI - Star Wars API.
• JSON Placeholder - Fake API.
• My JSON Server - Fake API.

Chrome Extensions

• ColorZilla - Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
• React Developer Tools

GitHub

• GitHub Actions - GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD.
• GitHub Pages - Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
• Readme.md format (docs)
• Readme.md format (user generated)
• Markdown Cheatsheet
• Press "." to open a GitHub Repository in VS Code in Browser

GitHub Actions

• GitHub Actions For GitHub Pages - This is a GitHub Action to deploy your static files to GitHub Pages.
• Heroku Deploy - This is a very simple GitHub action that allows you to deploy to Heroku.

Code Playgrounds

• CodeSandbox
• CodePen