7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Web News & Insights

Search...

100+ Awesome Web Development Tools and

Resources
BRIAN JACKSON | UPDATED: JULY 5, 2016

89

The best and worst thing about being a web developer is that the web is constantly
changing. While this is exciting it also means that web developers must always be
proactive about learning new techniques or programming languages, adapting to
changes, and be willing and eager to accept new challenges. This could include tasks such
as adapting existing frameworks to meet business requirements, testing a website to
identify technical problems, or optimizing and scaling a site to better perform with the

https://www.keycdn.com/blog/webdevelopmenttools/ 1/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

back-end infrastructure. We thought we would compile a comprehensive list of web

development tools and resources that can help you be more productive, stay informed,
and become a better developer.

Web Development Tools and Resources for2016

A lot fo these web development tools below are ones we use at KeyCDN on a daily basis.
We cant include everything, but here are a couple of our favorites and other widely used
ones. Hopefully, you nd a new tool or resource that will aid you in your development
workow.Note: The tools and resources below are listed in no particular order.

JavaScript Libraries

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/javascript-libraries.webp)

Javascript is one of the most popular programming languages on the web. A Javascript
library is a library of pre-written Javascript which allows easier access throughout the
development of your website or application.For example,you can include a copy of
Googles hosted jQuery library by using the following snippet.

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

jQuery (http://jquery.com/): Afast, small, and feature-rich JavaScript library.

BackBoneJS (http://backbonejs.org/):Give yourJSapp some backbone with models,
views, collections, &events.

https://www.keycdn.com/blog/webdevelopmenttools/ 2/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

D3.js (http://d3js.org/): AJavaScript library for manipulating documents based on

data.
React: (https://facebook.github.io/react/)Facebooks Javascript library developed for
building user interfaces.
jQ (http://jqueryui.com/)uery (http://jqueryui.com/) UI
(http://jqueryui.com/):Acurated set of user interface interactions, eects, widgets,
and themes.
jQuery Mobile (http://jquerymobile.com/):HTML5-based user interface system
designed to make responsive web sites.
Underscore.js (http://underscorejs.org/):Functional programming helpers without
extending any built-in objects.
Moment.js (http://momentjs.com/):Parse, validate, manipulate, and display dates in
JavaScript.
Lodash (https://lodash.com/):A modern utility library delivering modularity,
performance, & extras.

Front-end Frameworks

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/front-end-frameworks.webp)

Front-end frameworks usually consist of a package that is made up of other les and
folders, such as HTML, CSS, JavasScript, etc.There are also many stand-alone frameworks
out there. We are a big fan of Boostrap and the main KeyCDN website is built on it. A solid
framework can bean essential tool for front-end developers.

Bootstrap (http://getbootstrap.com/):HTML, CSS, and JS framework for developing

responsive, mobile rst projects on the web.

https://www.keycdn.com/blog/webdevelopmenttools/ 3/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Foundation (http://foundation.zurb.com/):Family of responsive front-end

frameworks that make it easy to design beautiful responsive websites, apps and
emails that look amazing on any device.
Semantic UI (http://semantic-ui.com/): Development framework that helps create
beautiful, responsive layouts using human-friendly HTML.
uikit (http://getuikit.com/):A lightweight and modular front-end frameworkfor
developing fast and powerful web interfaces.

Web Application Frameworks

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/web-application-
frameworks.webp)

A web application framework is a software framework designed to aid and alleviate some
of the headache involved in the development of web applications and services.KeyCDN
actually hosts a version of AngularJS, HTTP/2 and CORS enabled, that you can use in your
projects completely free. See code below. Fulldocumentation at angularcdn.com
(https://angularcdn.com/).

https://opensource.keycdn.com/angularjs/1.4.8/angular.min.js

Ruby (http://rubyonrails.org/): Ruby onRails is a web-application framework that

includes everything needed to create database-backed web applications, withthe
MVCpattern.
AngularJS (https://angularjs.org/):Lets you extend HTML vocabulary for your web
application.AngularJS is a framework, even though its much more lightweight and
sometime referred to as a library.

https://www.keycdn.com/blog/webdevelopmenttools/ 4/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Ember.js (http://emberjs.com/):A framework for creating ambitious web

applications.
Express (http://expressjs.com/):Fast and minimalist web framework for Node.js.
Meteor (https://www.meteor.com/):Full-stack JavaScript app platform that
assembles all the pieces you need to build modern web and mobile apps, with a
single JavaScript codebase.
Django (https://www.djangoproject.com/): High-level Python Web framework that
encourages rapid development and clean, pragmatic design.
ASP.net (https://www.microsoft.com/web/platform/framework.aspx):Free, fully
supported Web application framework that helps you create standards-based Web
solutions.
Laravel (https://laravel.com/): Afree, open-source PHP web application framework to
build web applications on MVC pattern.
Zend Framework 2 (http://framework.zend.com/):An open source framework for
developing web applications and services using PHP.
Phalcon (https://phalconphp.com/en/): A full-stack PHP framework delivered as a C-
extension.
Symfony (http://symfony.com/):A set of reusable PHP components and a web
application framework.
CakePHP (http://cakephp.org/): A popular PHPframework thatmakes building web
applications simpler, faster and require less code.
Flask (http://ask.pocoo.org/):Amicroframework for Python based on Werkzeug and
Jinja 2.
CodeIgniter (https://www.codeigniter.com/):Powerful and lightweight PHP
framework built for developers who need a simple and elegant toolkit to create full-
featured web applications.

Also make sure to check out KeyCDNs framework integration guides

(https://www.keycdn.com/support/framework-integration-guides/) to see how you can
implement a CDN with the solutions mentioned above.

Task Runners / Package Managers

https://www.keycdn.com/blog/webdevelopmenttools/ 5/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/build-systems-task-
runners.webp)

Tasks runnersare all about automating your workow. For example you can create a task
and automate the minication of JavaScript. Then build and combine tasks to speed up
development time. Package managerskeep track of all the packages you use and make
sure they are up to date and the specic version that you need.

Grunt (http://gruntjs.com/): JavaScript task runner all about automation.

Gulp (http://gulpjs.com/): Keeps things simple and makes complex tasks
manageable, while automating and enhancing your workow.
npm (https://www.npmjs.com/): Pack manager for JavaScript.
Bower (http://bower.io/): A web package manager.Manage components that contain
HTML, CSS, JavaScript, fonts or even image les.

Languages / Platforms

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/programming-
languages.webp)

https://www.keycdn.com/blog/webdevelopmenttools/ 6/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Behind all the web development tools is a language. A programming language is a formal
constructed language designed to communicate with a computer and create programs in
which you can control the behavior.And yeswe realize some of these might not always
be referred to as a language.

PHP (http://php.net/): Popular general-purpose scripting language that is especially

suited to web development.
NodeJS (https://nodejs.org/en/):Event-driven I/O server-side JavaScript environment
based on V8.
Javascript (https://en.wikipedia.org/wiki/JavaScript): Programming language of HTML
and the web.
HTML5 (https://www.w3.org/TR/html5/): Markup language, the latest version of
HTML and XHTML.
Python (https://www.python.org/):Programming language that lets you work quickly
and integrate systems more eectively.
Ruby (https://www.ruby-lang.org/en/):A dynamic, open source programming
language with a focus on simplicity and productivity.
Scala (http://www.scala-lang.org/):Scala is a pure-bred object-oriented language
allowinga gradual, easy migration to a more functional style.
CSS3 (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3): Latest version of
cascading style sheets used in front-end development of sites and applications.
SQL (https://en.wikipedia.org/wiki/SQL): Stands for structured query language used
with relational databases.
Golang (https://golang.org/): Open source programming language that makes it easy
to build simple, reliable, and ecient software.
Rust (https://www.rust-lang.org/): Systems programming language that runs
blazingly fast, prevents segfaults, and guarantees thread safety.
Elixir (http://elixir-lang.org/): Dynamic, functional language designed for building
scalable and maintainable applications.

Databases

https://www.keycdn.com/blog/webdevelopmenttools/ 7/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/databases.webp)

A database is a collection of information that is stored so that it can be retrieved,

managed and updated.

MySQL (https://www.mysql.com/): One of theworlds most popular open source

databases.
MariaDB (https://mariadb.org/):Made by the original developers of MySQL. MariaDB
is also becoming very popular as an open source database server.
MongoDB (https://www.mongodb.org/):Next-generation database that lets you
create applications never before possible.
Redis (http://redis.io/):An open source, in-memory data structure store, used as
database, cache and message broker.
PostgreSQL (http://www.postgresql.org/):Apowerful, open source object-relational
database system.

CSS Preprocessors

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/css-preprocessors.webp)

https://www.keycdn.com/blog/webdevelopmenttools/ 8/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

A CSS preprocessor is basically a scripting language that extendsCSS and thencompiles it

into regular CSS. Make sure to also check out or in-depth post on Sass vs Less
(https://www.keycdn.com/blog/sass-vs-less/).

Sass (http://sass-lang.com/): A verymature, stable, and powerful professional grade

CSS extension.
Less (http://lesscss.org/):As an extension to CSS that is also backwards compatible
with CSS. This makes learning Less a breeze, and if in doubt, lets you fall back to
vanilla CSS.
Stylus (http://stylus-lang.com/):Anew language, providing an ecient, dynamic, and
expressive way to generate CSS. Supporting both an indented syntax and regular CSS
style.

If you are just getting started with a CSS preprocessoryou might want to make the
transition easier by rst using a 3rd party compiler, such as the ones below.

Compiler Sass Less

Language Language Mac Windows

CodeKit
(http://incident57.com/codekit/)

Koala (http://koala-app.com/)

Hammer
(http://hammerformac.com/)

LiveReload (http://livereload.com/)

Prepros (https://prepros.io/)

Scout (http://mhs.github.io/scout-
app/)

Crunch (http://getcrunch.co/)

Text Editors / Code Editors

https://www.keycdn.com/blog/webdevelopmenttools/ 9/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/text-editors-code-
editors.webp)

Whether youre taking notes, coding, or writing markdown, a good text editor is a part of
our daily lives!

Atom (https://atom.io/):Atext editor thats modern, approachable, yet hackable to

the core. One of our favorites!
Sublime Text (http://www.sublimetext.com/):Asophisticated text editor for code,
markup and prose with great performance.
Notepad++ (https://notepad-plus-plus.org/):Afree source code editor which
supports several programming languages running under the MS Windows
environment.
Visual Studio Code Beta (https://www.visualstudio.com/products/code-vs):Code
editing redened and optimized for building and debugging modern web and cloud
applications.
TextMate (https://macromates.com/): A code and markup editor for OS X.
Coda 2 (https://panic.com/coda/): Afast, clean, and powerful text editor for OS X.
WebStorm (https://www.jetbrains.com/webstorm/):Lightweight yet powerful IDE,
perfectly equipped for complex client-side development and server-side
development with Node.js.
Vim (http://www.vim.org/):Ahighly congurable text editor built to enable ecient
text editing.
Brackets (http://brackets.io/):Alightweight and powerful modern text editor;written
in JavaScript, HTML and CSS.
Emacs (https://www.gnu.org/software/emacs/):An extensible, customizable text
editor withbuilt-in functions to aid in quick modications of text and code.

https://www.keycdn.com/blog/webdevelopmenttools/ 10/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Markdown Editors

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/markdown-editors.webp)

Markdown is a markup language in plain text using an easy syntax that can then be
converted to HTML on the y. Note: This is dierent than a WYSIWYG editor. Markdown
editors are sometimes referred to as the in-between WYSIWYG and simply writing code.

StackEdit (https://stackedit.io/): A free online rich markdown editor.

Dillinger (http://dillinger.io/):An online cloud-enabled, HTML5, buzzword-lled
Markdown editor.
Mou (http://25.io/mou/): Markdown editor for developers on Mac OS X.
Texts (http://www.texts.io/): A rich editor for plain text. Windows and Mac OS X.

Some of the text editors we mentioned above also support markdown. For example,
there is a markdown preview package (https://github.com/atom/markdown-preview) for
atom.

Icons

https://www.keycdn.com/blog/webdevelopmenttools/ 11/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/icons.webp)

Almost every web developer, especially front-end developers will at some point or
another need icons for their project. KeyCDN actually hosts a version of Font Awesome,
HTTP/2 and CORS enabled, that you can use in your projects completely free. See code
below. Fulldocumentation at fontawesomecdn.com (https://fontawesomecdn.com/).

https://opensource.keycdn.com/fontawesome/4.5.0/fontawesome.min.css

Font Awesome (http://fontawesome.io/):Scalable vector icons that can instantly be

customized size, color, drop shadow, and anything that can be done with the
power of CSS.
IconMonster (http://iconmonstr.com/): Afree, high quality, monstrously bigand
continuously growing source of simple icons. One of our favorites!
IconFinder (https://www.iconnder.com/): Iconnder provides beautiful icons to
millions of designers and developers.
Fontello (http://fontello.com/): Tool to build custom fonts with icons.

Git Clients / Services

https://www.keycdn.com/blog/webdevelopmenttools/ 12/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/git-clients.webp)

Git is a source code management system for software and web development known for
distributed revision control. When working with teams, using a git client to push code
changes from dev to production is a way to maintain the chaos and ensure things are
tested so they dont break your live web application or site.

SourceTree (https://www.sourcetreeapp.com/):A free Git & Mercurial client for

Windows or Mac. Atlassian also makes a pretty cool team Git client called Bitbucket.
GitKraken (http://www.gitkraken.com/)(Beta): A free,intuitive, fast, and beautiful
cross-platform Git client.
Tower 2 (https://www.git-tower.com/):Version control with Git made easy.In a
beautiful, ecient, and powerful app.
GitHub Client (https://desktop.github.com/):Aseamless way to contribute to projects
on GitHub andGitHub Enterprise.
Gogs (https://gogs.io/):Apainless self-hosted Git service based on the Go language.
GitLab (https://about.gitlab.com/gitlab-com/): Host your private and public software
projects for free.

Local Dev Environments

https://www.keycdn.com/blog/webdevelopmenttools/ 13/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/local-dev-environment.webp)

Depending upon what OS you are running or the computer you currently have access to,
it might be necessary to launch a quick local dev environment. There are a lot of free
utilities that bundle Apache, mySQL, phpmyAdmin, etc. all together. This can be a quick
way to test something on your local machine. A lot of them even have portable versions.

XAMPP (https://www.apachefriends.org/index.html):Completely free, easy to install

Apache distribution containing MariaDB, PHP, and Perl.
MAMP (https://www.mamp.info/en/):Local server environment in a matter of
seconds on OS Xor Windows.
WampServer (http://www.wampserver.com/en/):Windows web development
environment. It allows you to create web applications with Apache2, PHP and a
MySQL database.
Vagrant (https://www.vagrantup.com/):Create and congure lightweight,
reproducible, and portable development environments.
Laragon (https://laragon.org/):A great fast and easy way to create an isolated dev
environment on Windows. IncludesMysql, PHP Memcached, Redis, Apache,
andawesome for working with your Laravel projects.

Di Checkers

https://www.keycdn.com/blog/webdevelopmenttools/ 14/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/di-checkers.webp)

Di checkers can help you compare dierences between les and then merge the
changes. A lot of this can be done from CLI, but sometimes it can be helpful to see a more
visual representation.

Dichecker (https://www.dichecker.com/):Online di tool to compare text

dierences between two text les. Great if you are on the go and quickly need to
compare something.
Beyond Compare (http://www.scootersoftware.com/): A program to compare les
and folders using simple, powerful commands that focus on the dierences youre
interested in and ignore those youre not.

A lot of the free text editors we mentioned above also have plugins or extensions which
allow you to di or compare your les.

Code Sharing / Experimenting

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/code-sharing.webp)

https://www.keycdn.com/blog/webdevelopmenttools/ 15/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

There is always that time when you are on Skype or Google hangout with another
developer and you want him or her to take a quick look at your code. There are great
team tools for sharing code like Slack, but if they arent a member of your team there are
some great quick alternatives. Remember not to share anything secure.

JS Bin (http://jsbin.com/):Tool for experimenting with web languages. In particular

HTML, CSS and JavaScript, Markdown, Jade and Sass.
JSddle (https://jsddle.net/):Custom environment to test your JavaScript, HTML, and
CSS code right inside your browser.
codeshare (https://codeshare.io/):Share code in real-timewith other developers.
Dabblet (http://dabblet.com/):Interactive playground for quickly testing snippets of
CSS and HTML code.

Collaboration Tools

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/dev-collaboration-
tools.webp)

Every great development team needs a way to stay in touch, collaborate, and be
productive. A lot of teams work remotely now. The team at KeyCDN is actually spread
across many dierent continents.Tools like these below can help employees streamline
their development workow.

Slack (https://slack.com/r/0d5amdd3-0h4fmxst%20rel=):Messaging app for

teamsthat is on a mission to make your working lifesimpler, more pleasant, and
more productive. One of our favorites, we use this at KeyCDN!
Trello (https://trello.com/): Flexible and visual way to organize anything with anyone.
We also use this as KeyCDN.
https://www.keycdn.com/blog/webdevelopmenttools/ 16/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Glip (https://glip.com/):Real-time messaging with integrated task management, video

conferencing, shared calendars and more.
Asana (https://asana.com/): Team collaboration tool for teams to track their work
and results.
Jira (https://www.atlassian.com/software/jira):Built for every member of your
software team to plan, track, and release great software or web applications.

Inspiration

Pageissafe TotalSecurity2015

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/developers-inspiration.webp)

We all need inspiration at some point or another. For front-end developers especially,
from time to time, it can be benecial to check out what other people are doing. This can
be a great source of inspiration, new ideas, and making sure your web application or site
doesnt fall behind the times.

CodePen (http://codepen.io/):Show o your latest creation and get feedback. Build a

test case for that pesky bug. Find example design patterns and inspiration for your
projects.
Dribble (https://dribbble.com/):Acommunity of designers sharing screenshots of
their work, process, and projects.

Website Speed Test Tools

https://www.keycdn.com/blog/webdevelopmenttools/ 17/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/website-speed-test-
tools.webp)

The speed of a website can be a critical factor to its success. Faster loading websites can
benet from higher SEO rankings, higher conversion rates, lower bounce rates, and a
better overall user experience and engagement. It is important totake advantage of the
many free toolsavailable for testing website speed.

Pageissafe TotalSecurity2015

Website Speed Test (https://tools.keycdn.com/speed): A page speed test developed

by KeyCDN that includes a waterfall breakdown and the website preview.
Google PageSpeed Insights
(https://developers.google.com/speed/pagespeed/insights/):PageSpeed Insights
analyzes the content of a web page, then generates suggestions to make that page
faster.
Google Chrome DevTools (https://developers.google.com/web/tools/chrome-
devtools/?hl=en): Set of web authoring and debugging tools built into Google
Chrome.
WebPageTest (http://www.webpagetest.org/):Run a free website speed test from
multiple locations around the globe using real browsers (IE and Chrome) and at real
consumer connection speeds.
Pingdom (http://tools.pingdom.com/fpt/): Test the load time of that page, analyze it
and nd bottlenecks.
GTmetrix (https://gtmetrix.com/): Gives you insight on how well your site loads and
provides actionable recommendations on how to optimize it.

You can see a more in-depth list on our post about website speed test tools
(https://www.keycdn.com/blog/website-speed-test-tools/).

https://www.keycdn.com/blog/webdevelopmenttools/ 18/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Web Development Communities

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/web-development-
communities.webp)

Every web developer has been there. They have a problem and what do they do? Well,
theygo to Google to nd a quick answer. The web oers so much content right at our

Pageissafe TotalSecurity2015

ngertips that it makes it easy to diagnose and troubleshoot problems when they arise.
Check out a few good web development communities below.

Stack Overow (http://stackoverow.com/):Community of 4.7 million programmers,

just like you, helping each other.
Front-end Front (https://frontendfront.com/):A place where front-end developers
can ask questions, share interesting links, and show their work to the rest of the
community.
Hashnode (https://hashnode.com/):Global community for software developers to
connect and learn programming from each other.
Rend (https://rend.com/):Community of founders, hackers, and designers who
collect and share the best links on the web.
Google+ Web Developers Group
(https://plus.google.com/u/0/communities/114175980151299757659): Web
developers, web designers, and web coding.
Google+ Web Developers Group
(https://plus.google.com/communities/114947356043496560984):Java, PHP, Ruby,
JavaScript and Python Resources
Facebook WordPress Front-end Developers Group
(https://www.facebook.com/groups/wpfrontenddevs/):WordPress Front End

https://www.keycdn.com/blog/webdevelopmenttools/ 19/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Developers is a group for devs to ask questions, share their work, discuss emerging
trends, and collaborate.
LinkedIn Web Design and Development Professionals Group
(https://www.linkedin.com/groups/139851/prole):Networking and information
sharing resource for professional Web Designers, Web Developers and Web Masters.
LinkedIn Web Site Development Group
(https://www.linkedin.com/groups/2192521/prole): Website design & programming.
LinkedIn PHP Developer Group
(https://www.linkedin.com/groups/2195403/prole):PHP, Mysql, Drupal, Joomla,
Zend, Cake, MVC.
LinkedIn WordPress Developers Group
(https://www.linkedin.com/groups/3722491):WordPress Codex. Using WP as CMS
and CMF.
Webdeveloper.com (http://www.webdeveloper.com/forum/):Where web developers
and designers learn how to build web sites, program in HTML, Java and JavaScript.
Sitepoint Forums (https://www.sitepoint.com/community/):Web development
discussion.

Pageissafe TotalSecurity2015
/r/perfmatters (https://www.reddit.com/r/perfmatters/):The #1 subreddit about
web
performance and web development.
/r/webdev (https://www.reddit.com/r/webdev): Whats new for web developers.

Web Development Newsletters

(https://blog.keycdn.com/blog/wp-content/uploads/2016/02/web-development-
newsletters.webp)The last thing you probably need is another newsletter subscription.
But these guys handpick some of the best web development and performance topics
from around the web so you dont have to!

https://www.keycdn.com/blog/webdevelopmenttools/ 20/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

wdrl.info (https://wdrl.info/):A handcrafted, carefully selected list of web

development related resources. Curated and published usually every week.
webopsweekly.com (http://webopsweekly.com/): A weekly newsletter forWeb
developers focusing on web operations, infrastructure, deployment of apps,
performance, and tooling, from the browser down to the metal.
web tools weekly (http://webtoolsweekly.com/):Afront-end development and web
design newsletter with a focus on tools. Each issue features a brief tip or tutorial,
followed by a weekly round-up of various apps, scripts, plugins, and other resources.
freshbrewed.co (https://freshbrewed.co/): A weekly reading digest for front-end
developers and UX designers.
smashingmagazine.com (https://www.smashingmagazine.com/): Smashing Magazine
is an online magazine for professional web designers and developers. Useful tips and
valuable resources, sent out every second Tuesday.
front-end dev weekly (http://frontenddevweekly.com/):Front-end developer news,
tools and inspiration hand-picked every week.
friday front-end (http://fridayfrontend.com/):Front-end development links
tweeteddaily, emailedweekly.

Pageissafe TotalSecurity2015
/dev tips (https://umaar.com/dev-tips/): Receive a developer tip, in the form of a
gif,
in your inbox each week.
perf.email (https://perf.email/):Abi-monthly newsletter bringing you the most
interesting studies of all things web performance and user-experience.

And of course, you can subscribe to our newsletter if you havent already on the right
hand side of this post.

Summary
As you can see there are hundreds of web development tools and resources available
tohelp streamline your development workow and hopefully aid you in being more
productive.Again we cant list every tool or resource, but if we forgot something
important, feel free to let us know below in the comments.

Related Articles

https://www.keycdn.com/blog/webdevelopmenttools/ 21/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

12 Website Speed Test Tools for Analyzing Web

Performance
(https://www.keycdn.com/blog/website-speed-
test-tools/)
CSS Preprocessors Sass vs LESS
(https://www.keycdn.com/blog/sass-vs-less/)

#PERFMATTERS

250GB Free Trac (https://www.keycdn.com/signup/?

Pageissafe TotalSecurity2015
a=1&utm_source=keycdn&utm_medium=cta&utm_campaign=widget2)
Supercharge your Website with KeyCDN
HTTP/2 - Free SSL - RESTful API - 25 POPs - Instant Purge

26Comments KeyCDNBlog
1 Login

Recommend 9 Share SortbyBest

Jointhediscussion

PeteTNT 5monthsago
Asacontributor/heavyuserI'dliketomentionBrackets,anopensourceeditorfromAdobe
fortexteditorspart.Formoreinformationseehttp://brackets.io/
4 Reply Share

BrianJackson Mod >PeteTNT 5monthsago

Thanksforyoursuggestion.Bracketshasbeenadded.
Reply Share

mrkris 5monthsago
NomentionofPostgres?
3 Reply Share

https://www.keycdn.com/blog/webdevelopmenttools/ 22/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

BrianJackson Mod >mrkris 5monthsago

Thanksforyoursuggestion.WehaveaddedPostgreSQL.
1 Reply Share

RahulRoy>mrkris 5monthsago
That'swhatIwaswonderingtoo!Postgresdefinitelydeservesamention.
1 Reply Share

Justin 4daysago
IwouldalsoaddWebixframework(http://webix.com/)asacoolJavaScriptlibrary
2 Reply Share

Andu@Widgetic.com 5monthsago
Iwouldmentionhttps://thenounproject.comforicons.UsedalltheonesinthelistbutIfind
theseguystobethebest!
2 Reply Share

geminiITSolutionsUK 5monthsago
superbarticle
2 Reply Share

Pageissafe TotalSecurity2015
BrianJackson Mod >geminiITSolutionsUK 5monthsago

Thanks!Gladyouenjoyedit.
Reply Share

DanielBoterhoven 13daysago
GreatResourcesofwebdevelopmenttools.Thanksforsharing.
1 Reply Share

BrianJackson Mod >DanielBoterhoven 13daysago

Gladitwashelpful.
Reply Share

NeyO amonthago
Brilliantpiece!!!justtheinformationiwaslookingfor.Thanks:)
1 Reply Share

BrianJackson Mod >NeyO 13daysago

Thanks,gladitwashelpful!
Reply Share

MatthewRath 2monthsago
Nomentionoflaragonforwindowsdevelopmentenvironment?Wasdevelopedspecificallyfor
laraveldevsbutwillworkwithanyphpbasedsolution.

Betterthenwampinmanyrespectsespeciallythenicefeaturei.e.autogenerationofentriesin
yourhostsfile.Defaultformatis<folder>.dev
1 Reply Share

BrianJackson >MatthewRath 2monthsago

https://www.keycdn.com/blog/webdevelopmenttools/ 23/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources
BrianJackson Mod >MatthewRath 2monthsago

Greatsuggestion,definitelyagreethatLaragondeservesamention.Ihaveupdated
thepostabove.Thanks!
Reply Share

MukeshAgrawal 2monthsago
Luvit,veryinformativeforWebdevelopmentendtoend...Keepitup
1 Reply Share

TahirTaous 3monthsago
IlikeBracketsandSublimeText
1 Reply Share

JonnySmith 5monthsago
Awesomedatawithsimpleandshortmeaning.Superb!!
1 Reply Share

MeBack 5monthsago
VeryfastWebApplicationframework:http://vuejs.organdhttps://webpack.github.ioforTask
Runners/PackageManagers
1 Reply Share

Pageissafe TotalSecurity2015
Niko>MeBack 4monthsago
Vue.jsdefinitelydeservestobementioned.
Reply Share

elijahpaul 5monthsago
Vagrantforlocaldevenvironments?Alsowouldn'tGitLabbeworthamentionasaselfhosted
Gitservice?Greatarticlebytheway.
1 Reply Share

BrianJackson Mod >elijahpaul 5monthsago

Thanksforyoursuggestions.VagrantandGitLabhavebothbeenadded.
Reply Share

jamessteininger 5monthsago
IwouldalsoaddNitrous.ioorc9.io(Cloud9)whichareamazingforwebdevelopment,since
theyeasilyallowyoutosetupmosttypesofenvironmentsinthecloudandyoucanprogram
fromanywhere.WhenIwasincollegethiswasgreatbecauseIcouldsitdownatanylibrary
computerandstillbeabletocrankoutmyRailsapps.
1 Reply Share

Agibragimov 5monthsago
whereisVimandEmacs,ClojurescriptandElm,Purescript,Floobits,Datomic,etc.?
1 Reply Share

BrianJackson Mod >Agibragimov 5monthsago

VimandEmacswerejustrecentlyadded.Andthanksforyourothersuggestionsas
well!
1 Reply Share
https://www.keycdn.com/blog/webdevelopmenttools/ 24/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources
1 Reply Share

AdrienBecchis>BrianJackson 5monthsago
Spacemacs(emacs+vim):http://spacemacs.org
andHapijshttp://hapijs.comnode.jsframeworkdeservetobeinthelist.
ThesetwoandAg'sonehaverealcommunityandaddrealvalue
Reply Share

ALSOONKEYCDNBLOG

AnalyzingHTTPSPerformanceOverhead
2comments7monthsago
thbtIfI'munderstandingthiscorrectly,I
thinkmostofthespeedtestsonthispage
areactuallycomparingHTTPtoHTTP/2.
That'snotthe
WhatistheDifferenceBetweenHTTPand
HTTPS?
4comments2monthsago
BrianJacksonCorrectRicha.Tomoveto
HTTPSyouwillneedanSSLcertificate.See
ourarticleonhowtoorderone:
KeyCDNLaunchesNewPOPinBrazil
1comment6monthsago
DJPRMFAwesome!Keepitgrowing!=)
21WaystoReduceBounceRateonYour
Website
3comments4monthsago
JoeriGreatarticlebutjustshowyourpop
uponexitintentandyourbouncerate
shouldn'tbeanissue

Pageissafe TotalSecurity2015

Subscribe d AddDisqustoyoursiteAddDisqusAdd Privacy

Product

Features (/features)

Network (/network)

Benets (/benets)

Pricing (/pricing)

Sign Up (/signup)

Login (/login)

Company

About Us (/about)

Careers (/careers)

Blog (/blog)

Aliate (/aliate)

Contact (/contacts)
https://www.keycdn.com/blog/webdevelopmenttools/ 25/26
7/5/2016 100+AwesomeWebDevelopmentToolsandResources

Legal (/legal)

Support

Knowledge Base (/support)

Network Status (/status)

Community (https://community.keycdn.com/)

FAQ (/faq)

Tools (https://tools.keycdn.com)

Open Source (/open-source-cdn)

Solutions

Website Performance (/website-performance)

Software Distribution (/software-distribution)

Game & App Delivery (/game-app-delivery) TotalSecurity2015

Pageissafe

CDN Hosting (/cdn-hosting)

Video CDN (/video-cdn)

Ad Serving (/ad-serving)

Connect

GitHub (https://github.com/keycdn)

Made in Switzerland proinity LLC 2016.

https://www.keycdn.com/blog/webdevelopmenttools/ 26/26