Skip to content

jbrencis/frontend-tools

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

191 Commits

README.md

README.md

 
 

Repository files navigation

Front-end development tools (mostly)

Table of contents

Tools catalog / search / discovery / comparison service ↑ ↑ ↑

  • AlternativeTo - A free service that helps you find better alternatives to the products you love and hate.
  • awesome - A curated list of awesome lists.
  • awesome-react-components - Catalog of React components / libraries.
  • Best of JavaScript - A place to find the best components to build amazing web applications.
  • CSS Script - A Javascript & CSS code library aims to provide the newest, best and free CSS & javascript resources for web/mobile developers and designers.
  • headlesscms.org - A list of content management systems for JAMstack sites.
  • iReact - Helps you discover the most fantastic, powerful React Components and Libraries, and makes it easy for you to pick one that’ll work for you.
  • JavaScripting - The definitive source of the best JavaScript libraries, frameworks, and plugins.
  • JavaScriptOO - Every javascript project you should be looking into with examples, categories, install commands, CDN links, project and author stats, and more.
  • jQuery Plugins - Categorized collection of jQuery plugins.
  • JqueryScript.Net - One of jQuery Plugin websites that provide web designers and developers with a simple way to preview and download a variety of Free jQuery Plugins.
  • JSter - A catalog of frontend JavaScript libraries.
  • JS.coach - An opinionated catalog of open source JS packages.
  • LibHunt - Our goal is to help you find the software and libraries you need. All lists have been crafted by many experts from the relevant GitHub communities.
  • Libraries.io - Helps developers find new open source libraries, modules and frameworks and keep track of ones they depend upon.
  • MicroJS - Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!
  • Node Frameworks - Hand-picked registry of Node.js frameworks.
  • NPMCompare - Search and compare npm packages.
  • npms - A better and open source search for node modules.
  • npmsearch - Search for node packages on the npm registry.
  • npm trends - Compare package download counts over time.
  • Pika - Search modern ESM packages on npm.
  • Redux Ecosystem Links - A categorized list of addon libraries for Redux, as well as other libraries that are closely related.
  • StackShare - Discover & discuss the best software tools & services.
  • StaticGen.com - A leaderboard of top open-source static site generators.
  • Unheap - A tidy repository of JavaScript plugins.
  • VueScript.com - Aims to offer latest free Vue.js components for web application developers.
  • webcomponents.org - A place to publish, browse and search for reusable web UI components.

ECMAScript / JavaScript ↑ ↑ ↑

JavaScript variant / compiler / transpiler ↑ ↑ ↑

  • Babel - a JavaScript compiler.
  • Bublé - fast, batteries-included ES2015 compiler.
  • TypeScript - a typed superset of JavaScript that compiles to plain JavaScript.

JavaScript framework ↑ ↑ ↑

  • Angular 2 - a development platform for building mobile and desktop web applications.
  • Aurelia - a JavaScript client framework for mobile, desktop and web leveraging simple conventions and empowering creativity.
  • choo - framework for creating sturdy frontend applications.
  • cyclow - a reactive frontend framework.
  • Ember - a framework for creating ambitious web applications.
  • HyperApp - a JavaScript library for building frontend applications.
  • Mithril - a modern client-side Javascript framework for building Single Page Applications.
  • qooxdoo - a universal JavaScript framework that enables you to create applications for a wide range of platforms.

JavaScript UI (view) library / framework ↑ ↑ ↑

  • Cell - A self-constructing web app framework powered by a self-driving DOM.
  • Inferno - An extremely fast, React-like JavaScript library for building modern user interfaces.
  • jComponent - A component library for creating reusable components with jQuery.
  • Marko - A friendly (and fast!) UI library that makes building web apps fun.
  • Melody - A fast and memory efficient library for creating highly dynamic user interfaces.
  • Monkberry - Blazingly fast, small and simple JavaScript library for building web user interfaces.
  • Moon - A minimal & fast UI library.
  • Nerv - A blazing fast React alternative, compatible with IE8 and React 16.
  • Preact - Fast 3kb alternative to React with the same ES6 API.
  • Ractive.js - A JavaScript library for building reactive user interfaces in a way that doesn't force you into a particular framework's way of thinking.
  • React - A JavaScript library for building user interfaces.
  • Riot - Simple and elegant component-based UI library.
  • Svelte - Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time.
  • Vue.js - Simple yet powerful library for building modern web interfaces.

React-based library / framework / platform ↑ ↑ ↑

  • Ant Design - An enterprise-class UI design language and React-based implementation.
  • Blueprint - A React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications.
  • dva - React and Redux based, lightweight and Elm-style framework.
  • Electrode - A platform for building universal React/Node.js applications with standardized structure, best practices, and modern technologies baked in.
  • Elemental UI - A UI Toolkit for React.js Websites and Apps.
  • Essence - The Essential Material Design Framework.
  • Grommet - The most advanced UX framework for enterprise applications.
  • libreact - a collection of most essential React utilities you will probably need in any project.
  • Material-UI - A Set of React Components that Implement Google's Material Design.
  • react-md - A set of React components and sass files for implementing Google's Material Design.
  • React-MDL - A set of React components build on top of Material Design Lite.
  • React Toolbox - A set of React components that implement Google's Material Design specification.
  • ReactXP - A library for cross-platform app development using React and React Native.
  • Rebass - Configurable React Stateless Functional UI Components.

Vue-based library / framework ↑ ↑ ↑

  • BalmUI - next generation Material UI for Vue.js.
  • Buefy - a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.
  • Element - a Vue.js 2.0 UI Toolkit for Web.
  • iView - a high quality UI Toolkit built on Vue.js.
  • Keen UI - a lightweight collection of essential UI components written with Vue.js and inspired by Material Design.
  • Muse UI - a Vue 2.0 and Material Design based UI component library.
  • Quasar Framework - build responsive websites, hybrid mobile Apps (that look native!) and Electron apps using same code, with VueJs 2.
  • Vuetify.js - a component framework for Vue.js 2.
  • Vue Material - lightweight framework built exactly according to the Material Design specs. It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.

Front-end / CSS framework ↑ ↑ ↑

  • Blaze - an open source modular toolkit. It provides great structure for building websites quickly with a scalable and maintainable foundation.
  • Bootflat - an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework.
  • Bootstrap - an open source toolkit for developing with HTML, CSS, and JS.
  • Bulma - a modern CSS framework based on Flexbox.
  • Flat UI - a beautiful theme for Bootstrap.
  • Foundation - the most advanced responsive front-end framework in the world.
  • Froala Design Blocks - a set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites.
  • GroundworkCSS (outdated) - a fully responsive HTML5, CSS and Javascript toolkit.
  • Ink - an interface kit for quick development of web interfaces, simple to use and expand on.
  • inuitcss - extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects. It does not provide you with UI and design out of the box, instead, it provides you with a solid architectural baseline upon which to complete your own work.
  • Kube - clean, minimalistic and fast to implement CSS & JS framework for professional developers and designers alike.
  • Leaf (outdated) - a CSS framework based on Google's material design.
  • Material Components for the web - modular and customizable Material Design UI components for the web. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.
  • Material Design Lite - lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.
  • Material Framework - a simple responsive CSS framework that allows you to integrate Material Design in any web page or web app.
  • Materialize - a modern responsive front-end framework based on Material Design.
  • Metro UI - sleek, intuitive, and powerful front-end framework for faster and easier web development. Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.
  • Polymer - libraries, tools and patterns to help developers build modern Progressive Web Apps, taking full advantage of cutting-edge platform features like Web Components, Service Workers and HTTP/2.
  • Semantic UI - a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
  • Spectre.css - a lightweight, responsive and modern CSS framework.
  • Tailwind CSS - a utility-first CSS framework for rapid UI development.
  • Topcoat - CSS for clean and fast web apps.
  • Turret - a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
  • UIkit - a lightweight and modular front-end framework for developing fast and powerful web interfaces.
  • Small CSS library / toolkit ↑ ↑ ↑
    • Basscss - low-Level CSS Toolkit, a lightweight collection of immutable utilities designed for speed, clarity, performance, and scalability.
    • Cutestrap - a sassy, opinionated CSS Framework. A tiny alternative to Bootstrap.
    • mini.css - a minimal, responsive, style-agnostic CSS framework.
    • Mobi.css - a lightweight, scalable, mobile-first css framework.
    • Picnic CSS - an invasive CSS library to get your style started.
    • Pure - a set of small, responsive CSS modules that you can use in every web project.
    • Skeleton - a dead simple, responsive boilerplate.
    • Tachyons - create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
    • Wing - a beautiful CSS framework designed for minimalists.

Shim, polyfill ↑ ↑ ↑

  • core-js - modular standard library for JavaScript. Includes polyfills for ECMAScript 5, 2015, 2016, 2017.
  • ECMAScript Shims - a community host for shims and polyfills that are compliant to EcmaScript specs.
    • es5-shim - monkey-patch a JavaScript context to contain all EcmaScript 5 methods that can be faithfully emulated with a legacy JavaScript engine.
    • es6-shim - provides compatibility shims so that legacy JavaScript engines behave as closely as possible to ECMAScript 6.
    • es7-shim - contains shims that can be used to monkeypatch a JavaScript context to contain all ECMAScript 7 methods that can be faithfully emulated with a legacy JavaScript engine.
  • Intl.js - compatibility implementation of the ECMAScript Internationalization API (ECMA-402) for JavaScript.

Web development ↑ ↑ ↑

  • Next.js - a JavaScript framework that lets you build server-side rendering and static web applications using React.

Mobile development ↑ ↑ ↑

  • Ionic - the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies.
  • NativeScript - an open source framework for building truly native mobile apps with JavaScript and CSS.
  • React Native - build native mobile apps using JavaScript and React.

Desktop development ↑ ↑ ↑

  • Electron - a framework that lets you write cross-platform desktop applications using JavaScript, HTML and CSS.
  • NW.js - an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js.
  • Proton Native - a React environment for cross platform native desktop apps.

Data / model / state management library ↑ ↑ ↑

  • Breeze - the data management library for developers of rich client applications written in JavaScript. If you store data in a database, query and save those data as complex object graphs, and share these graphs across multiple screens of your JavaScript client, Breeze is for you.
  • Cerebral - a state controller with its own debugger.
  • freactal - a composable state management library for React.
  • JSData - inspired by Ember Data, JSData is the model layer you've been craving. It consists of a convenient framework-agnostic, in-memory store for managing your data, which uses adapters to communicate with various persistence layers.
  • Microstates - a functional runtime type system designed to ease state management in component based applications. It allows you to declaratively compose application state from atomic state machines.
  • MobX - a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
  • NuclearJS - reactive Flux built with ImmutableJS data structures.
  • Redux - a predictable state container for JavaScript apps.
  • Rematch - Redux best practices without the boilerplate.
  • Transis - a JavaScript data modeling library useful for creating rich client-side experiences.
  • WatermelonDB - build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast.

Database ↑ ↑ ↑

  • AlaSQL - JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.
  • DataScript - immutable database and Datalog query engine for Clojure, ClojureScript and JS.
  • ForerunnerDB - a NoSQL JavaScript JSON database with a query language based on MongoDB (with some differences) and runs on browsers and Node.js.
  • LokiJS - a fast, in-memory document-oriented datastore for node.js, browser and cordova.
  • Lowdb - a small local database for small projects (powered by lodash API).
  • NeDB - embedded persistent or in memory database for Node.js, nw.js, Electron and browsers, 100% JavaScript, no binary dependency.
  • PouchDB - an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser. It enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back online, keeping the user's data in sync no matter where they next login.
  • RxDB - reactive, serverless, client-side, offline-first database.
  • TingoDB - an embedded JavaScript in-process filesystem or in-memory database upwards compatible with MongoDB at the API level.

Internationalization (i18n), localization (l10n) ↑ ↑ ↑

  • FormatJS - a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people. It includes a set of core libraries that build on the JavaScript Intl built-ins and industry-wide i18n standards, plus a set of integrations for common template and component libraries.
  • Globalize - a JavaScript library for internationalization and localization that leverage the official Unicode CLDR JSON data. Globalize provides number formatting and parsing, date and time formatting and parsing, currency formatting, message formatting (ICU message format pattern), and plural support.
  • i18next - an internationalization-framework written in and for JavaScript. It provides you with a complete solution to localize your product from web to mobile and desktop.

JavaScript utility library ↑ ↑ ↑

  • 101 - a modern JS utility library.
  • Lodash - a modern JavaScript utility library delivering modularity, performance & extras.
  • Mout - a collection of modular JavaScript utilities that can be used in the browser as AMD modules or on node.js.
  • Sugar - a Javascript utility library for working with native objects.
  • Underscore - a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

JavaScript module system and loader ↑ ↑ ↑

  • SystemJS - dynamic ES module loader.
  • AMD:
    • curl.js (outdated) - a small and very fast AMD-compliant asynchronous loader.
    • require.js - a JavaScript file and module loader.
  • CommonJS:
    • Cajon - a JavaScript module loader for the browser that can load CommonJS/node and AMD modules. It is built on top of RequireJS.
    • Inject (outdated) - AMD and CJS dependency management in the browser.
    • require1k - a minimal, and yet practically useful, CommonJS/Node.js require module loader for the browser in under 1000 bytes.
  • ECMAScript 6:
    • @pika/web - run npm dependencies directly in the browser. No Browserify, Webpack or import maps required.

Module and asset bundler ↑ ↑ ↑

  • Browserify - lets you require('modules') in the browser by bundling up all of your dependencies.
  • FuseBox - a bundler/module loader that combines the power of webpack, JSPM and SystemJS. It will compile and bundle your code within a fraction of a second, yet offering a comprehensive loader API.
  • gluejs - package Node/CommonJS modules for the browser.
  • Lasso.js - JavaScript module bundler that also provides first-level support for optimally delivering JavaScript, CSS, images and other assets to the browser. Offers many different optimizations such as a bundling, code splitting, lazy loading, conditional dependencies, compression and fingerprinted resource URLs.
  • Microbundle - zero-configuration bundler for tiny modules.
  • Parcel - blazing fast, zero configuration web application bundler.
  • @pika/pack - developer tool that uses simple, pre-configured build plugins to create your modern package.
  • Poi - develop powerful web app with no build configs until you need.
  • Rollup - a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
  • SystemJS Builder - provides a single-file build for SystemJS of mixed-dependency module trees.
  • webpack - a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Package manager ↑ ↑ ↑

  • Bower - a package manager for the web.
  • Duo - a next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizing and writing front-end code quick and painless.
  • jspm - registry and format agnostic JavaScript package manager for the SystemJS universal module loader.
  • npm - a package manager for JavaScript.
  • pnpm - fast, disk space efficient package manager.

CSS processor ↑ ↑ ↑

  • EQCSS - A CSS Extension for Element Queries & More.
  • Less - The dynamic stylesheet language.
  • PostCSS - A tool for transforming CSS with JavaScript.
  • Sass - An extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more.
  • Stylus - Expressive, robust, feature-rich language, providing an efficient, dynamic, and expressive way to generate CSS.

Linting, validation, checklist ↑ ↑ ↑

  • Front-End Checklist - an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production.
  • webhint - a linting tool for the web.
  • Web Developer Checklist - the ultimate checklist for all serious web developers building modern websites.
  • CSS
    • CSSLint - a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.
    • stylelint - a mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
  • HTML
    • HTML Inspector - a highly-customizable, code quality tool to help you write better markup.
    • HTMLHint - the static code analysis tool you need for your HTML.
  • JavaScript and variants
    • ESLint - the pluggable linting utility for JavaScript and JSX.
    • JSHint - a tool that helps to detect errors and potential problems in your JavaScript code.
    • TSLint - an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.
    • XO - opinionated but configurable ESLint wrapper with lots of goodies included.

Testing ↑ ↑ ↑

  • AVA
  • BackstopJS - automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.
  • CodeceptJS - acceptance testing framework for NodeJS. CodeceptJS is a testing framework for end-to-end testing with WebDriver (or others). It abstracts browser interaction to simple steps which is written from a user perspective.
  • Cypress - a test engine that runs unit and integration tests in your browser.
  • Enzyme - a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
  • Intern
  • Jasmine
  • Jest
  • Karma
  • Mocha
  • QUnit
  • Sazerac - data-driven testing for JavaScript. It helps you create simple, readable tests and works with Jasmine, Jest, and Mocha.
  • tape
  • TestCafe - a pure node.js end-to-end solution for testing web apps. It takes care of all the stages: starting browsers, running tests, gathering test results and generating reports.
  • Testem

Debug ↑ ↑ ↑

  • ndb - an improved debugging experience for Node.js, enabled by Chrome DevTools.
  • stacktrace.js - generate, parse, and enhance JavaScript stack traces in all web browsers.
  • Vorlon.JS - an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript, powered by node.js and socket.io.
  • weinre - a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
  • Wireshark - the world’s foremost and widely-used network protocol analyzer.
  • Use new Error().stack or console.trace() to print stack trace (see Force Stack Traces with JavaScript).

Documentation ↑ ↑ ↑

  • docsify - A magical documentation site generator.
  • documentation.js - The documentation system for modern JavaScript.
  • Docusaurus - A project for easily building, deploying, and maintaining open source project websites.
  • Docute - The fastest way to create a documentation site for your project.
  • Docz - It has never been so easy to document your things!
  • ESDoc - A documentation generator for JavaScript (ES6).
  • JSDoc - An API documentation generator for JavaScript.
  • x0 - Document & develop React components without breaking a sweat.
  • YUIDoc - A Node.js application that generates API documentation from comments in source, using a syntax similar to tools like Javadoc and Doxygen.

Minification ↑ ↑ ↑

  • Minify - a minifier of js, css, html and img files.
  • Node-minify - a light Node.js module that compress javascript and css files.
  • CSS
    • clean-css - a fast and efficient CSS optimizer for Node.js platform and any modern browser.
    • Crass - a CSS minification, pretty printing, and general utility library written in JS.
    • cssnano - a modern, modular compression tool written on top of the PostCSS ecosystem.
    • CSSO - a CSS minifier with structural optimizations.
    • CSSWring - a CSS minifier for PostCSS.
  • HTML
    • HTMLMinifier - a highly configurable, well-tested, JavaScript-based HTML minifier.
    • Minimize - a HTML minifier based on the node-htmlparser. Minimize is focussed on HTML5 and will not support older HTML drafts.
  • Images
    • SVGO - a Nodejs-based tool for optimizing SVG vector graphics files.
  • JavaScript
    • Babel-Minify - an ES6+ aware minifier based on the Babel toolchain.
    • UglifyJS - a JavaScript parser, minifier, compressor and beautifier toolkit.

Task runner, build tool ↑ ↑ ↑

  • Brunch - fast front-end web app build tool with simple declarative config, seamless incremental compilation for rapid development, an opinionated pipeline and workflow, and core support for source maps.
  • cross-env - run scripts that set and use environment variables across platforms.
  • Grunion - run multiple commands using glob patterns.
  • Grunt - the JavaScript task runner.
  • Gulp - a toolkit for automating painful or time-consuming tasks in your development workflow.
  • npm-run-all - a CLI tool to run multiple npm-scripts in parallel or sequential.
  • nps - all the benefits of npm scripts without the cost of a bloated package.json and limits of json.
  • npx - execute npm package binaries.
  • Pkg - this command line interface enables you to package your Node.js project into an executable that can be run even on devices without Node.js installed.
  • scripty - a tool to help extract npm scripts into their own files.
  • shx - a wrapper around ShellJS Unix commands, providing an easy solution for simple Unix-like, cross-platform commands in npm package scripts.
  • Taskr - a fast, concurrency-focused task runner.
  • xclap - an advanced and flexible JavaScript task executor and build tool.
  • ygor - JavaScript task runner for when npm run isn't enough and everything else is too much.

Automation ↑ ↑ ↑

  • np - a better npm publish.

Boilerplate, scaffolding ↑ ↑ ↑

  • Create React App - create React apps with no build configuration.
  • create-react-library - CLI for easily creating reusable react libraries.
  • nwb - a toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it).

Component development ↑ ↑ ↑

  • BlueKit - automatically generates a library from your React components with editable props and live preview.
  • component-playground - a component for rendering React Components and ES6 code with editable source and live preview.
  • Kit - tools for developing, documenting, and testing React component libraries.
  • React Cosmos - dev tool for creating reusable React components.
  • React Live - brings you the ability to render React components and present the user with editable source code and live preview.
  • React Styleguidist - isolated React component development environment with a living style guide.
  • Storybook - a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

Analysis, performance, optimization ↑ ↑ ↑

  • Bundle Buddy - a tool to help you find source code duplication across your javascript chunks/splits.
  • Lighthouse - an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, and more.
  • Optimize your libraries with webpack - tips to make your webpack bundle smaller.
  • Source map explorer - analyze and debug space usage through source maps. The source map explorer determines which file each byte in your minified code came from.
  • Webpack Bundle Analyzer - webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
  • WebPagetest - run a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds.

Version control ↑ ↑ ↑

  • Git ↑ ↑ ↑
    • Husky - Git hooks made easy. Husky can prevent bad git commit, git push and more.
    • Sourcetree - visualize and manage your repositories through simple Git GUI.
    • TortoiseGit - a Windows Shell Interface to Git. Provides overlay icons showing the file status, a powerful context menu for Git and much more.

Development server ↑ ↑ ↑

  • Node.js-based ↑ ↑ ↑
    • Browsersync - keep multiple browsers & devices in sync when building websites.
    • EasyMock Server - a simple but powerful mock server.
    • freddie - front end development server.
    • http-server - a simple, zero-configuration command-line http server.
    • JSON Server - get a full fake REST API with zero coding.
    • Live Server - a simple development http server with live reload capability.
    • lite-server - lightweight development only node server that serves a web app. lite-server is a simple customized wrapper around BrowserSync to make it easy to serve SPAs.
    • local-web-server - the modular web server for productive full-stack development.
    • Puer - more than a live-reload server , built for efficient frontend development.
    • servedir - a simple Node web server for offline development and testing: running servedir from a directory will create a quick local web server.
    • server-with-benefits - a static Node.js file web server with options for proxing requests and delaying/mocking responses.
    • Superstatic (with proxy) - an enhanced static web server that was built to power. This version adds in the superstatic-proxy by default.
  • With PHP support ↑ ↑ ↑
    • AppServ - a full-featured of Apache, MySQL, PHP, phpMyAdmin.
    • Devserver - a complete and ready-to-use development environment. Devserver is portable, modular, fully configurable and easy to update and extend.
    • Uniform Server - a lightweight server solution for running a web server under the WindowsOS.
    • UwAmp - free Wamp Server with Apache MySQL PHP and SQLite.
    • VertrigoServ - a complete free WAMP server allowing PHP development for Windows.
    • WampServer - a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database.
    • WPИ-XM - a free and open-source web server solution stack for professional PHP development on Windows.
    • WTServer - a portable, preconfigured, lightweight, fast and stable server stack for developing php mysql applications on windows, based on the excellent webserver Nginx.
    • XAMPP - a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl.

Node.js version management ↑ ↑ ↑

  • n - interactively manage your Node.js versions.
  • node package - npm package that installs a node binary into your project, which means you can have a local version of node that is different than your system's, and manage node as a normal dependency.
  • nodenv - manage multiple NodeJS versions.
  • Nodist - a node.js and npm version manager for the windows.
  • nvm (Node Version Manager) - simple bash script to manage multiple active node.js versions.
  • nvm-windows - a node.js version management utility for Windows.
  • nvs (Node Version Switcher) - a cross-platform utility for switching between different versions and forks of Node.js. NVS is itself written in node JavaScript.

Editor, IDE ↑ ↑ ↑

  • Atom - a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
  • Brackets - with focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers.
  • Geany - a small and lightweight Integrated Development Environment.
  • Light Table - a next generation code editor that connects you to your creation with instant feedback. Light Table is very customizable and can display anything a Chromium browser can.
  • Notepad++ - a free source code editor and Notepad replacement that supports several languages.
  • PSPad - text editor for developers for Microsoft Windows systems.
  • Visual Studio Code - a new type of tool that combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle. Code provides comprehensive editing and debugging support, an extensibility model, and lightweight integration with existing tools.

API ↑ ↑ ↑

Playground, online development ↑ ↑ ↑

  • CodePen - a playground for the front end side of the web. It's a place to build and deploy a website, show off your work, build test cases, and find inspiration.
  • CodeSandbox - an online web application editor. Makes it easier to create, share and reuse web projects with others.
  • ESNextbin - create browser programs in ES2015 code and import modules from NPM in browser.
  • Flems.io - a playground for web development. It's ideal for prototyping ideas & sharing working front-end code examples. Also see Flems module which can be used for easy self hosting or embedding.
  • Glitch - the friendly community where everyone can discover and create the best stuff on the web.
  • JS Bin - an open source collaborative web development debugging tool. Write code and have it both save in real-time, but also render a full preview in real-time.
  • jsFiddle - an online playground for your JavaScript, HTML, CSS.
  • Repl.it - simple, reliable, and portable cloud coding interface. A community of teachers, students and engineers.
  • RequireBin - create programs in the browser using modules from NPM.
  • RunKit - a node playground in your browser.
  • Webpackbin - a service to share and teach code, using webpack to bundle the code.

Site generator ↑ ↑ ↑

  • CMS.js - fully client-side, Javascript site generator in the spirit of Jekyll that uses plain ol' HTML, CSS and Javascript to generate your website.
  • DocPad - a dynamic static-site generator. That is a content management system that takes content from several sources, like files on your computer, and renders them into incredibly fast static output.
  • Gatsby - blazing-fast static site generator for React.
  • Hexo - a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.

Emulator, simulator ↑ ↑ ↑

  • Responsinator - helps website makers quickly get an indication of how their responsive site will look on the most popular devices.
  • Screenfly - allows you to view your website on a variety of device screens and resolutions.

Browser extension ↑ ↑ ↑

Benchmark ↑ ↑ ↑

Hosting, cloud services ↑ ↑ ↑

  • 000webhost & hostinger.ru - zero cost website hosting with PHP, MySQL, Cpanel & no ads.
  • 5apps Deploy - a turn-key deployment and hosting platform for client-side web apps.
  • Appback - provides a backend as a service (BaaS) for web and mobile applications.
  • Backendless - a leading mBaaS and powerful Mobile Application Development Platform that enables rapid development of feature-rich mobile, desktop and browser-based applications.
  • Cloudant - a highly scalable and performant JSON database.
  • Cloudnode - a place to get your Javascript web applications up and running.
  • Firebase - a cloud-hosted database. Data is synchronized in realtime to every connected client.
  • HackMD - best way to share knowledge in markdown.
  • Heroku - a cloud platform that lets companies build, deliver, monitor and scale apps.
  • JSONbin - a free JSON storage and JSON hosting service.
  • Microsoft Azure - quickly create powerful cloud apps for web and mobile clients.
  • Modulus - application container platform. Deploy, scale, and monitor apps in the language of your choice.
  • Myjson - a simple JSON store for use in your client side web and/or mobile applications.
  • Netlify - builds, deploys, and hosts your front end.
  • now - allows you to take your JavaScript (Node.js) or Docker powered websites, applications and services to the cloud with ease, speed and reliability.
  • Nuclino - the easiest way to organize and share knowledge in teams. Create real-time collaborative documents and connect them instantly like a wiki. Use the tree, board, and graph view to explore and organize your knowledge visually. It's great for meeting notes, product requirements, docs, decisions, and more.
  • OpenShift - Red Hat's Platform-as-a-Service (PaaS) that allows developers to quickly develop, host, and scale applications in a cloud environment.
  • Pastebin - a website where you can store any text online for easy sharing.
  • Rentry.co - a pastebin/publishing service with markdown support, preview, custom urls and editing. Fast, simple and free.
  • Surge - static web publishing for front-end developers.

Guide, reference, practices, recipes ↑ ↑ ↑

Books ↑ ↑ ↑

Examples ↑ ↑ ↑

  • Hacker News readers as Progressive Web Apps - a list of unofficial Hacker News clients built with a number of popular JavaScript frameworks and libraries. Each implementation is a complete Progressive Web App that utilizes different progressive technologies to provide a fast, reliable and engaging experience.
  • simpl.info - simplest possible examples of HTML, CSS and JavaScript.

Useful articles & resources ↑ ↑ ↑

Table of contents ↑

About

Links to front-end development tools

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published