web-development-resources

A list of open source front-end tools and resources for web designers and developers.
https://github.com/milanaryal/web-development-resources

Last synced: about 21 hours ago
JSON representation

[Node.js](http://nodejs.org/) feature module and bundler
- ESLint
- Prettier
- stylelint
- commitlint
- Chokidar
- PurgeCSS
- rimraf - rf` for node. |
- Bower
- linkinator
- Browsersync
- http-server - configuration command-line http server. |
- serve
- server.js
- nodemon - perfect for development. |
- onchange
- Concurrently - js & npm run watch-less` but better. |
- npm-run-all - scripts in parallel or sequential. |
- Parallel Shell
- Concat
- cpy-cli
- del
- express
- node-sass
- npm-check-updates
Package manager
- List of software package management systems
- APT
- Yum
- Homebrew
- winget - us/windows/package-manager/) (aka winget) is a free and open-source package manager designed for Microsoft Windows 10. |
- Chocolatey - level package manager and installer for software packages, built for the Windows platform. |
- yarn
- rvm - line tool which allows you to easily install, manage, and work with multiple ruby environments from interpreters to sets of gems. |
- goenv
- nodenv
- pyenv
- rbenv
Performance testing tools
- WebPagetest
- Google PageSpeed Tools
Placeholder
PNG, JPEG, GIF compressor toolkit
- TinyJPG
- Compress PNG - |
- Compress JPEG - |
- Compress GIF - |
Responsiveness testing tools
- Am I Responsive?
- BrowserStack
- Deviceponsive
- Responsively App - have devtool for web developers for quicker responsive web development. 🚀 |
- Am I Responsive?
- Deviceponsive
Sass frameworks
- Compass - source CSS Authoring Framework. |
- Compass - source CSS Authoring Framework. |
- Compass - source CSS Authoring Framework. |
- Susy
- Compass - source CSS Authoring Framework. |
SVG, PNG, and Font icons library
The type system
- Exploring Responsive Type Scales - Device and Vertical) Rhythm |
- Generate Type Scales With Stackswell
- Material design type system
- Modular Scale
- Type Connection
- Typography for Developers
- Typewolf
- WhatFont - Chrome Extension
- Font Pair
- Type Scale - A Visual Calculator
[Vanilla JavaScript](https://plainjs.com/) plugins
- Anchor.js
- Anime.js
- Favico.js
- Holder.js
- Responsive nav
- Slideout.js
- Tether
- ZeroClipboard.js
- ZeroClipboard.js
- Velocity.js
- Darkmode.js - mode-switch) | 🌓 Add a dark-mode / night-mode to your website in a few seconds |
- Favico.js
- FluidVids.js
- Highlight.js
- Holder.js
- lazysizes.js
- littlefoot.js
- Pace.js
- react-burger-menu - canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations. |
- Responsive nav
- Tabella.js
- Tippy.js
- Tooltip.js
- Turbolinks
- Typeset - processor for your HTML which uses zero client-side JavaScript. |
- Tabella.js
- ZeroClipboard.js
- Prism.js
- Smartcrop.js
- Chartist.js
Webmaster tools
- Schema.org
- Microformats
- Understand how structured data works
- JSON for Linking Data - LD organizes and connects it, creating a better Web. |
- JSON-LD
- Latitude and Longitude Finder
- Microformats
Website icons for browsers
Web tools
- Abstract API's
- AutoDraw
- Binary Translator
- Bootstrap 5 Cheat Sheet
- Color Hex Color Codes - hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. |
- CSS3 Generator
- CSSmatic
- Draw.io
- Flat Colors
- Frontend Dogma frontend development tools - based tools for website developers and owners, for analysis and exploration. |
- Styling Wizard: Google Maps APIs
- Snazzy Maps
- SRI Hash Generator - practice, whenever libraries are loaded from a third-party source. |
- Superdomain
- Web Code Tools
- What's My Screen Resolution
- WebGradients
- Create LaTeX tables online - cells merging is supported together with borders editing. |
- Base16
- Colors.css
- CSS3 Generator
- CSSmatic
- Solarized - Precision colors for machines and people
- Flat Colors
- Color Hunt
- uiGradients
- Draw.io
Wiki

Programming Languages

JavaScript 22 TypeScript 7 CSS 5 Shell 3 HTML 1 Vim script 1 C++ 1 Ruby 1

Categories

SVG, PNG, and Font icons library 59 [Vanilla JavaScript](https://plainjs.com/) plugins 30 CSS library 28 Web tools 27 [Node.js](http://nodejs.org/) feature module and bundler 27 List of lists of lists 21 Design inspiration 21 CheatSheet😎 17 Frameworks 16 CSS tutorials 16 Package manager 12 CDN library 12 CSS reference 11 The type system 10 Wiki 8 [jQuery](http://jquery.com/) plugins 8 Free inspirational snippets and tutorials 7 Webmaster tools 7 JavaScript library 7 HTML forms 6 Responsiveness testing tools 6 Jamstack 5 JavaScript preprocessor 5 Sass frameworks 5 Placeholder 4 Website icons for browsers 4 PNG, JPEG, GIF compressor toolkit 4 HTML preprocessor 4 Browser compatibility wiki 3 HTML5 themes 3 Performance testing tools 2 JavaScript compressor toolkit 2 Front-end components 2 Mobile Web apps frameworks 1 Infographics 1 Mockup placeholder 1

Sub Categories

Keywords

javascript 8 awesome 3 awesome-list 3 nodejs 3 shell 3 npm 3 react 2 css 2 server 2 npm-package 2 npm-module 2 node 2 dom 2 scss 2 typescript 2 component 1 animations 1 responsive-images 1 performance 1 hamburger-menu 1 sidebar 1 lazysizes 1 lazyload 1 transitions 1 lazy-evaluation 1 express 1 bash 1 ruby 1 ruby-installation 1 ruby-versions 1 highlighting 1 language-grammars 1 syntax-highlighter 1 syntax-highlighting 1 command-line 1 hosting 1 http 1 http-server 1 git 1 github 1 list 1 chokidar 1 filesystem 1 fsevents 1 watch-files 1 watcher 1 lists 1 resources 1 unicorns 1 python 1

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

web-development-resources

[Node.js](http://nodejs.org/) feature module and bundler

Package manager

Performance testing tools

Placeholder

PNG, JPEG, GIF compressor toolkit

Responsiveness testing tools

Sass frameworks

SVG, PNG, and Font icons library

The type system

[Vanilla JavaScript](https://plainjs.com/) plugins

Webmaster tools

Website icons for browsers

Web tools

Wiki