42 Tools All Speedy Front-End Developers Use

Every developer has a preferred way to code.

Some use only the basics – a text editor and a browser. Others like to incorporate apps, platforms, and tools to make sure everything gets done.

If you fall in the latter category, you’re probably always on the lookout for the next best tool to aid your projects. After all, who doesn’t love something that can reduce your time and increase your productivity?

That’s why we’ve put together a list of the best development tools for those who want to get things done quickly and efficiently.

Take a look.

Download our free resource to find 36 more unique tools for devs not listed here.

Source Control

github

GitHub – GitHub is probably the most well known platform, but not everyone uses it. But if you’re looking to build a site efficiently (especially a static site) then GitHub is perfect. It includes a source-code browser, in-line editing, wikis, ticketing, and more. The best part is that it’s completely open source (that means free!).

bitbucket

Bitbucket – Bitbucket is another free source code host. It’s a distributed version control system that makes it easy for you to collaborate with your team. Approve code review with pull requests, use flexible deployments models, and take advantage of their private and public repositories.

sourcetree

SourceTree – Whether you’re a newbie developer or you just love using Mac, SourceTree is a free Mac client for Git and Mercurial version control systems. Manage all your repositories, hosted or local, through SourceTree’s simple interface.

Other Options

Versions – Another subversion Mac client

Tower – Another Git client for Mac.

Offscale – A tool for database version management

Development Platforms

heroku

Heroku – Heroku is a popular platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Build, manage, scale, and deploy great apps quickly, without needing to worry about updating or patching.

kinvey

Kinvey – If you’re more interested in mobile app development, Kinvey is a back end as a service (BaaS) provider that makes it easy for developers to set up, use and operate a cloud backend for their mobile apps.

firebase

Firebase – Another BaaS, Firebase is a scalable real-time backend for your website. It’s made up of complementary features that you can mix-and-match to fit your needs.

cloud9

Cloud9 – An online IDE that combines a powerful online code editor with a full Ubuntu workspace in the cloud. Simply pick your configuration and develop your app. No need to spend valuable development time on system setup and maintenance.

appharbor

AppHarbor – Used by thousands of developers for everything from simple blogs to high traffic web applications, AppHarbor is a fully hosted .NET Platform as a Service. This PaaS can deploy and scale any standard .NET application to the cloud.

Other Options

Parse – Another mobile app platform

CloudMine – Another BaaS for mobile and web apps

Koding – Browser-based IDE

dotCloud – Deploy, manage, and scale any web app

StackMob – Powering mobile applications

PHP Fog – Cloud platform for PHP

Backrest – Easy creation of SaaS data backends

Codeanywhere – Online code editor

NeptuneIDE – Full-featured, cloud-based IDE for PHP

Fusegrid – ColdFusion in the cloud

Cloud IDE – Code and deploy in the cloud

ToolsCloud – Development environment in the cloud

Bug Tracking, Feedback, and Monitoring

crashlytics

Crashlytics – This powerful and lightweight crash reporting system for iOS and Android is perfect for mobile app developers who need to work out the kinks in their system before, during, and after launch. Every crash report is analyzed and every bug tracked so that you don’t have to do it.

usersnap

Usersnap – If you’re more of a visual person and you prefer snapshots to track bugs or share potential issues with your team (or clients), then Usersnap is a great option. Organize your web projects and create screenshots of any potential problems.

rollbar

Rollbar – Rollbar collects errors that happen in your application, notifies you, and analyzes them so you can debug and fix them in real time. Works with Ruby, Python, PHP, Node.js, JavaScript, and more. It’s “Full-stack error monitoring for all apps in any language.”

Other Options

New Relic – Web application performance management (APM)

Exceptional – Tracks errors in web apps and reports them in real time

BugSense – Mobile app insights and crash reporting

Bugzilla – Server software to help you manage software development

Bugify – Simple PHP issue tracking for small teams

BugHerd – Tracks bugs and allows you to capture and share feedback

Snowy Evening – Bug and issue tracking with Github integration

APIs

twilio

Twilio – Twilio is a cloud communications platform for building SMS, Voice, and Messaging applications on an API. Embed messaging, voice, and video in your apps with their API, and the best part is that you can get started in as little as five minutes. So, if you’re in a rush, you have help.

cloudeo

Cloudeo – If you’re into geo data, then this is the perfect solution for you. Cloudeo is another SaaS that allows you to rent, evaluate, and stream geo data in all of your applications. It’s a unique option for developers needing to include more complicated APIs like this.

embedly

Embedly – On the simpler side of things, Embedly delivers ultra-fast and easy to use products and tools for richer sites and apps. Convert standard URLs into embedded videos, images, and more to engage your audience through rich media.

mailgun

Mailgun – Mailgun is a surprisingly powerful API that lets you send, receive, and track email effortlessly. Easy SMTP integration and a simple, RESTful API removes the messy details of sending transactional or bulk email. Everything is built API first with a focus on simplicity and compliance to standards.

Other Options

Factual – Structured data APIs

PubNub – Cloud-hosted messaging service for real-time apps

Context.IO – Leverage email data in applications with this API

Semantics3 – APIs for product data

Sent.ly – SMS HTTP API using your own Android phone

Looking for even more tools? Check out our list of 36 more tools for devs.

Final Thoughts

Finding the right app, platform, or tool to help you get through projects isn’t easy. A lot of it depends on preference, working style, and sometimes the power of the tool itself to get the job done.

But one thing’s for sure: If you need help moving a project along, there’s probably a tool for that.

This is great for developers who want to get things done as fast and easy as possible. Or at the very least, it can inspire you to create a SaaS, BaaS, or PaaS of your own to help other struggling developers get the job done.

What Your Tech Stack Should Look Like If You’re Building Static Sites

We’ve previously mentioned the many benefits of building static sites over using a traditional CMS like WordPress. But if you’re new to building static sites, it may feel intimidating to create something “from scratch” using a static site generator.

One of the biggest differences in building a static site is the technology involved, which scares many first-timers.

WordPress and other CMS’s may seem like a better choice because they claim to do much of the work for you, but many developers find the flexibility rather limited after a certain point.

And the good news is that building a static site doesn’t mean you’re left without help. In fact, there’s plenty of technology out there that can assist you in equal (or sometimes better) ways.

Here’s what you need to know about having a good tech stack when building static sites.

Which static site hosting service is right for you? Find out here.

Languages

This is going back to the basics, but the first thing you need to consider before you determine your tech stack is what languages you will be using.

Preprocessor languages are programming languages compiled into three types: HTML, JavaScript, and CSS. Examples include CoffeeScript, LESS, HAML, and Dart.

Each offers different syntaxes, features, as well as other benefits, and each static site generator (SSG) will allow for different preprocessor languages. It’s important to determine what language you’re most familiar with before you decide on a SSG.

While you don’t necessarily need to know anything beyond HTML to build a static site, you may want to consider brushing up on a preprocessor language to gain some advantages. Chris Loos over at Urban Insight has 10 reasons for using CSS preprocessors.

Site Generators

Unlike CMS, building a static sites requires generating HTML files that are served “as is” with no other database involved. For many developers, that means using editors like Dreamweaver or Notepad to code everything and then hosting those files to create the finished project.

Thankfully, technology has evolved enough to give us SSGs, tools that allow the creation of static sites in any number of languages.

Some popular SSGs include Jekyll, MetalSmith, Grunt, and Pelican. These SSGs can be used either with markup files as a source or even using a hosted content API such as Contentful, Medium, or yes, even WordPress.

jekyll-1024x516

SSGs help developers perform important tasks such as combining multiple files into one, compiling preprocessor languages, or even packaging code into a mobile application without having to do everything “from scratch.”

So which do you choose?

Well, some SSGs are built for a specific purpose, while others can be used for almost any site. It’s essential to find something that fits your workflow, is actively maintained, and has an active user community for when you have questions. If you need help deciding, we’ve ranked a few of the top options here.

Templates

Of course, if you did want to take a more “from scratch” approach without needing to spend countless hours coding your site, you could always use a static HTML template.

HTML templates come with pre-made features that allow you to fill in the blanks, so if you’re used to plugging components into templates with a CMS but you still want the benefits of static sites, you can find a template to meet your needs.

You can find a variety of pre-made HTML templates on sites like Template.net, Template Monster, and ThemeForest.

Package Managers

Another important aspect of building a static site is packaging your files together. But keeping track of all those packages and making sure they stay updated can be difficult, which is why many developers choose CMS over SSG.

However, there are package managers designed to help you manage things like your libraries, languages, fonts, and even images. A couple of popular package managers include Bower, which allows you to install open source or shared library code, declare dependencies for your projects, and more.

bowerio

APIs

One of the noted downsides to using static sites is the lack of APIs, meaning that there’s little interactivity, which, of course, is the point of doing something “static.” But if you still wanted the functionality of a dynamic site while building a static site, there are a few workarounds you could consider.

Raymond Camden has a tutorial for adding the “read” aspect of an API to your static site using any SSG.

Brandon Brown has another post on how to develop JSON APIs using Surge.

Static Web Hosts

Finally, and perhaps most importantly next to choosing a SSG, you will need a place to host your project once you’re ready to launch.

amazon-web-services-logo-cc90d03c8e148873b8b6cc1a7fdbdf1a

There are many options for static web hosting including traditional shared hosts, online storage with hosting, and a few services even have dedicated static web hosting.

So how do you choose a good host? Here are a few things to look for:

  • What is the cost you’re willing to pay for hosting?
  • Does the host support HTTPs? Do you need HTTPs support?
  • What is the upload method to host files? (GitHub, manual upload, etc.)
  • Does the host offer a Content Delivery Network (CDN)?
  • Do they support form handling?
  • Do they support build automation?
  • How easy is the deploy process?
  • Are there other developer-friendly features like rollback?

A few of the top hosting services for static sites include GitHub Pages and Amazon S3. You want to find a service that will give you the flexibility and support you need for every project. And, while many hosting services are cheap or free, be careful that you’re not undercutting your value.

Check out our cheat sheet of the top 12 static web hosts compared.

Final Thoughts

At the end of the day, choosing a tech stack comes down to finding technology that works well for you and your team and will help you stay productive.

If in doubt, you can always ask around (or check on the links we’ve offered). But, remember that what works well for one developer or site may not work well for yours, so it may require some testing to get things just right.

Remember, one of the benefits of building static is that you also have more flexibility to build your ideal stack, one that fits your needs and helps you do the work faster and keeps things maintained and updated with as little stress as possible.