Giters

maxim-berdnikov / dev-tools

Developer Tools Collection

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

backendfrontendtoolsvscode-extensionwebwebdevwebdevelopment

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.

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

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.

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

JSON

VS Code Extensions

  • Auto Rename Tag - Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  • Babel JavaScript - JavaScript syntax highlighting for ES201x, React JSX, Flow and GraphQL.
  • Better Comments - Improve your code commenting by annotating with alert, informational, TODOs, and more!
  • Blockman - Highlight Nested Code Blocks - Mark/Highlight code blocks.
  • Bracket Pair Colorizer 2 - This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
  • Code Spell Checker - A basic spell checker that works well with camelCase code.
  • Color Highlight - Highlight web colors in your editor.
  • CSS Navigation - Allows Go to Definition from HTML to CSS / Sass / Less; provides Completion and Workspace Symbols for class & id name.
  • env-cmd-file-syntax - This plugin works with vscode. It helps us to highlight the key-value string in .env files (e.g. .env, .env.development and so on).
  • ESLint - Integrates ESLint JavaScript into VS Code.
  • GIT History - View git log, file history, compare branches or commits.
  • GIT Lens - GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • Git Tags
  • GitHub Theme - GitHub theme for VS Code.
  • HTML Snippets - Full HTML tags including HTML5 Snippets.
  • Indent Rainbow - A simple extension to make indentation more readable.
  • Inline Parameters for VSCode - An extension for Visual Studio Code that adds inline parameter annotations when calling a function.
  • Live Server - Launch a local development server with live reload feature for static & dynamic pages.
  • Open in browser - Open files in a browser.
  • Path intellisense - Visual Studio Code plugin that autocompletes filenames.
  • Prettier - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
  • SVG - SVG Coding, Minify, Pretty, Preview All-In-One
  • Theme - Oceanic Next - Oceanic Next color theme, based on original voronianski/oceanic-next-color-scheme.
  • TODO Highlight - Highlight TODO, FIXME and other annotations within your code.
  • Twoslash Query Comments
  • VS Code Faker - Generate fake data inside Visual Studio Code. Fake data is based on Faker.
  • VS Code Great Icons - A big pack of icons (200+) for your files.

Chrome Extensions

GitHub

GitHub Actions

Code Playgrounds

About

Developer Tools Collection

backendfrontendtoolsvscode-extensionwebwebdevwebdevelopment