50 Awesome Tools and Resources for Web Developers
Design
An amazing resource for high quality textured patterns. A lot of
great artists have contributed there to create a collection of really
sharp and versatile images. Oh, and browsing on their site is quite
enjoyable as well.
Blokk is a font specifically made for mock-ups and demos and is an
excellent looking alternative to Lorem Ipsum. It could come in handy in
the case of an edge of the art design that wouldn’t usually mix well
with latin on it.
Freepik offers a colossal collection of vector art, illustrations,
SVGs, PSDs and stock photos. Everything is free and categorized neatly
so you shouldn’t have any problem finding what you need, although you
might have a hard time choosing, since there are over 1,4 Million items
to date.
This one is a priceless collection of stock photo material. It
features over 20 resources – all of them free and with their licences
politely explained.
You probably know about this one by now but we couldn’t omit it
anyway. It’s Google’s font library which is by far the best place to go
to when in the search of web-friendly fonts.
ByPeople.com is a content network of useful, constantly updated
resources. By People gathers a big deal of beautiful, clean and up to
date graphic freebies, Code Snippets and Useful Resources, organizing
them into lists which can even be bulk downloaded from the site
directly.
Snippler offers its users the ability to upload pieces of useful code
and share it with the rest of the us. There are thousands of snippets
in javascript, php, css, ruby and other languages. As an alternative,
you might want to checkout
CSS-tricks’s snippets, or github’s
gists.
A fun to use color picker. It handles choosing the hue, lightness and saturation of colors in a unique and cool way.
An awesome online service with a brilliant idea behind it. Color
Thief lets you upload an image and get the color palette for it, as well
as its dominating color. Very helpful for making design decisions.
Dribbble is a community of web designers, graphic designers,
illustrators, icon artists, typographers, logo designers, and other
creative types share small screenshots (shots) that show their work,
process, and current projects. A great place to explore new design
ideas.
A front-end framework for building responsive websites. It makes your
websites responsive and look good both on small and on huge screens
with a well done grid system and tons of CSS and JS features. There are
lots of additional
resources and plugins for bootstrap, as well as alternative frameworks like
foundation.
This app makes creating stripe patterns easy as child’s play.
Patterns can be saved and shared with anyone, allowing for collaboration
and remixing.
Project Perfait is an Adobe product that gives us the opportunity to
get important info about a PSD right in your browser. However, it
doesn’t support PSD editng (at least yet).
Coding
Emmet is a plugin for many popular text editors which greatly
improves the speed with which you write HTML by allowing you to
transform CSS-like selectors into full-blown HTML very fast.
On jsbeautifier.org you can find a tool that beautifies any scrambled
or minified piece of JavaScript or HTML code. Another tool that you
might find interesting, is this visual
JSON editor.
CodePen has grown into a platform for showcasing impressive CSS3 and
JS demos. Whether you are on the hunt for cool buttons or simply looking
for some inspiration, do check CodePen out.
The Validator is a free service by W3C that helps check the validity
of Web documents. It can process documents written in most markup
languages and give you insight on what might be wrong with the code.
This tool should be your first step when trying to find bugs with your
HTML.
Mincss is a tool that when given a URL downloads that page and all
its CSS and compares each and every selector in the CSS and finds out
which ones aren’t used. The outcome is a copy of the original CSS but
with the selectors not found in the document(s) removed. Some related
tools that you will find interesting are
refresh-sf for minifying CSS/JS/HTML,
Prefixr and the
autoprefixer library for adding vendor prefixes to CSS3 rules, and the
CSS3 gradient editor.
A wonderful cross-platform app that compiles your less/sass and coffee files automatically.
Jsfiddle.net is an amazing place for writing and sharing code. It
features panels for writing the CSS, Html and script of your project and
also lets you include libraries such as jQuery, AngularJS and others.
Then you can run the code in the app itself or save it and pass it
around.
This is a tool for testing APIs. You choose the request method,
customize headers and POST parameters, add basic authorization or OAuth
credentials, and even follow redirects. Then view the nicely formatted
request and response.
Sublime Text is a sophisticated text editor that lets you type in and
play around with text or code in amazing ways. It rose into prominence
recently, but there are lots of alternatives for the “slickest code
editor” crown. Some that are worth watching are github’s new
Atom editor and Adobe’s
Brackets. Not to mention VIM and Emacs, which have been around for quite a while and have large communities of developers using them.
Cloud9 is a cloud-based development environment that gives you a
terminal to your private Ubuntu VM, among other powerful features.
Alternatives include
Nitrous.io and
Codio and
Code Anywhere, among others.
Heroku was the
first major player in the platform as a service boom that hit developers
by storm. Before it, we relied on cheap hosting providers with horrible
reliability to host our websites (or setting up our own servers). But
heroku introduced git push deployments and we were spoiled for life. If
you want to be in full control of your servers, you might want to try
dokku instead.
Vagrant is a tool for building complete development environments.
With an easy-to-use workflow, Vagrant lowers development environment
setup time to make the “works on my machine” excuse a relic of the past.
There is another popular way for running virtual machines with other
operating systems on your computer –
VirtualBox.
Hosting and Browser
This is an online Website Speed Test to help you analyze the load
speed of your websites and learn how to make them faster. The results
and analysis it gives you are very in-depth and informative. Another
tool that will help you with optimizing the speed of your site is
Google’s Page Speed Insights, which will give you actionable advice.
With domai.nr you can check the availability of a domain name and get
suggestions on similar names. Works quite well, and fast too. One more
tool that comes in handy is
Lean Domain Search, which checks thousands of domains for availability for you.
Browershots is an online tool that simulates how a webpage looks on different browsers and gives you “screen” shots to inspect.
Piwik is an app that gives you extensive information about your users
and their behavior on your website. You can use this in additional to
the venerable
Google Analytics.
Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices.
Measures the size of your browser window. Simple as that but very useful nonetheless.
Image processing
This one is still in beta but still is a great tool for creating
favicons. Instead of giving you just one basic icon,
realfavicongenerator.net lets you create specific icons for every OS.
Pixlr is an amazing image editor with rich functionality. It works
similarly to the way offline image editing software do, with the
difference that this launches straight in the browser. Although it has
been around for a number of years, it is still one of the best free
online image editors out there.
Placeit.net is a tool for creating awesome mock ups for your website
or demo by placing them on the screens of computers and devices in stock
images. It includes hundreds of cool designs to choose from and is
rather easy to use.
Placehold.it helps you create dummy images for usage as placeholders
in designs. After you select the size of your pic you can simply copy
the provided link and put it in the img tag. And of course there is an
alternative with images of
kittens.
This one is called picresize(.com) but what it can do goes beyond
what its name suggests. This neat tool lets you apply filters, crop and
convert the file format of your image.
Collaboration tools
Readonomy is a service that we launched recently. It is a shared
reading list for teams – you learn who reads what in real time, share,
discuss and organize content into collections. Readonomy is also a great
way to keep a team-wide list of bookmarks that everyone can contribute
to.
With HipChat you can team up with your coworkers in real time. Supports file sharing, video chat and real-time screen sharing.
Git made version control accessible to the masses, and Github
revolutionized the way developers collaborate. Github is the most
popular repository hosting website in the world and gives you an
unlimited number of public repositories for free. If you need to host
your private repos for free, though, you can take a look at Bitbucket.
Chrome extensions
This extension shows all events bounded on each dom element. Could be
of quite some help when dealing with complex JavaScript event handlers.
A quick way to find out what the width, height and position of a screen segment is.
A Chrome and Firefox add-on for reading and validating JSONs in the browser.
A chrome app that gives you detailed information about the search position of multiple sites according to a keyword.
A Firefox plug-in that was recently made available to Chrome. It
offers rich functionality when it comes to handling colors in the
browser.
Learning resources
Tutorialzine is the very site you are on right now. We publish
awesome tutorials and articles on web development every week. Browse our
large collections of tutorials and articles and be sure to subscribe for more!
A great place for beginners in coding or people who want to learn a
new language. Features entertaining tutorials on the most popular
programming languages and APIs.
Video courses on Ruby, Javascript, HTML/CSS and iOS development.
There are lessons and exercises here for both elementary and in-depth
stuff.
Bento is a big collection of free coding tutorials. You can find
information here, not only where you can study about the mainstream
languages, but also about things like ‘elixir’ and ‘backbone.js’.
This website’s style may not appeal to all people, but aside from the
unusual sense of humor and pulp fiction references, there is an
astonishing amount of free eBooks on programming languages and
programming itself.
Misc
50. Coding soundtrack
There is nothing more soothing that writing code to the sound of rain. The two most popular sites are
Rainy Mood and
Raining.fm.
The latter one gives you sliders to control the intensity of rain and
thunder. Another site, that gives you the sounds of programmers at work
as a background is
Coding.fm.
