Inside the Developer’s Tool Kit: How to Speed Up Your Workflow

The following is a guest post by Matt Trask, a PHP developer based outside Atlanta. In this article he talks about tools he uses to make his workflow more efficient: notably frameworks, CMSs and Text Editors / IDEs. Enjoy!

—

So you want to develop websites? Congratulations! It’s an amazing journey that will have its ups and downs, but you are in great company.

Web developers as a whole are some of the nicest folks you will ever meet. However, you won’t be around these people every day. Meaning you won’t be able to absorb all their awesome knowledge, like knowing what tools to utilize to boost your workflow.

I wrote this post to offer some insights on what I use to make my developing process more efficient. I will discuss frameworks, text editors and IDE’s (no, they are not the same), and other tools you can use to be a more systematic developer.

As you continue to read, bear in mind that I am a PHP developer first and foremost. So the tools I cover and the perspective I have will be that of a PHP developer. However, I will mention Ruby and Python frameworks as well to give you some ideas. (And lots of the stuff I mention can be used by any dev!)

Boilerplates / Frameworks

Frameworks are all the rage right now. And for good reason: they speed up development immensely. But what are boilerplates, or frameworks, exactly?

HTML5 Boilerplate

HTML5 Boilerplate, authored by Paul Irish (A Google Dev) and Nicolas Gallagher (Author of Normalize.CSS), is essentially a file set designed to be the base of any custom web project you would like to start. The downloadable files set up your folder structure with everything you need: the index.html, robots.txt, humans.txt, a JS folder with Modernizr.js, and Normalize.css. Moreover, the HTML5 boilerplate sets up the head of your index.html with all the necessary meta info.

To reuse the boilerplate in the future, all you have to do is save a copy of the files to your machine, and then copy that version to each new project. It’s that simple.

Of course there are other HTML5 boilerplates available, but this is the one I always work with.

CSS Frameworks

Aside from HTML5 boilerplates to help you get started, there are a few awesome CSS frameworks, too. Specifically Bootstrap, Foundation, and PureCSS.

If you’re unsure of which to go with, then try them all. For speed, you cannot beat how fast Bootstrap is to get going. However, Foundation allows you to hide their default styles a bit better.

A ton of devs and businesses use Bootstrap. One thing that has started to occur, with the overuse of Bootstrap, is that it has become a lot easier to pick out developers who lack design skills.

PureCSS, on the other hand, is known for being extremely lightweight. In terms of development the lighter, or smaller, the files you use, the faster your page or app will load.

Really what it comes down to, though, is what you prefer and what you’d like to achieve.

JavaScript Frameworks

Javascript frameworks have become quite popularly lately, too. A few examples are Angular, Backbone, Ember, Meteor, and then Knockout. These frameworks help create dynamic front ends. While these are all fantastic to use, keep in mind that before tackling one of the above, make sure you can code basic Javascript.

One problem I sometimes see with developers is getting caught up in the newest framework. A person decides to apply it to their project, and then get stuck on something simple. The problem is that said developer skipped learning JavaScript, and isn’t in full control of the framework. In the future, I hope I can take you through a Javascript project step by step!

Backend Frameworks

Backend frameworks are where some people lose sight.

These frameworks allow you to define the logic of the web application. With the front end, you are setting the skin. Or the outward appearance. However, the back end code is the brains, if you will. You can code up a database connection, how URL’s respond to buttons, and dynamically generate content based on what user is logged in.

Just like the other boilerplates and frameworks discussed, you shouldn’t use the hippest framework just because everyone else is. Instead, search for the framework that does what you need.

As a PHP developer, I prefer Laravel (which is amazing). Nevertheless, CakePHP or Kohana PHP could get the job done faster for some people.

One of the most important things you need to look for in a framework is how precise and up-to-date the documentation is. I love Laravel partly because of the fantastic documentation that accompanies it. And to make things even better, Jeffery Way has created laracasts.com. Which he calls the Netflix for developers.

Don’t worry—there are backend frameworks for many other languages aside from PHP. For example, there is Django (Python) and Rails (Ruby). I hope to explore these with you in the coming weeks.

CMS

Content management systems (or CMS) are great tools to use to quickly scaffold, or build, websites.

The most popular CMS is WordPress (WP), a blogging platform. Roughly 24% of websites on the web currently are WordPress based sites. WP is highly customizable and easy enough for people with little development skills to use — at least when it comes to blogging and changing info quickly.

Written in PHP, the developers of WordPress created functions that can look at what the user has selected. From that, a web page on WordPress is dynamically created. (Dynamically created pages are created based on what is selected by the user.)

A few other types of CMS’s include PyroCMS (my personal favorite), Drupal, Anchor, Ghost and Magento (for eCommerce).

Text Editors / IDEs

For beginners, this is an area that can cause some confusion. Which text editor do you need? Or should you go for an IDE? Wait — what’s the difference?!

Text Editors

A text editor, like Sublime Text, is just what it sounds like: an application that allows you to edit text in a program. Text editors are low frills. They have a few settings as well as some plugins. Essentially, it is a jacked up version of notepad.

Moreover, text editors allow you to setup tab settings and offer syntax highlighting — which is helpful when it comes to debugging later down the road. Sublime Text is by far the most popular, but others like Brackets, Atom, and Notepad++ are excellent choices, too.

IDEs

On the other hand, an IDE is a full suite of tricks and treats. Generally, but not always, you get things like Git and Github connectivity built in. Many IDEs are specific to a language: meaning the IDE will have full support to help you identify if you have a syntax error, missing brackets, and more.

Generally, it color codes functions to help you stay organized. What I love most about the IDE I use, PHPStorm, is that it offers a code clean up. This allows me to better understand how to write less code.

A popular IDE is Visual Studio, where you get everything. Visual Studio, an IDE for the C# language, gives you full flexibility over the front and back end of an app. Generally, you use Visual Studio for a Windows based app. However, Microsoft just announced that they will be open sourcing C# and .NET.

This means that if you code on a Linux or Mac, you can now develop on Visual Studio and build awesome apps in C#. With this, C# will become quite arguably one of the most powerful languages. (However, that’s a discussion for a later time!)

Aside from PHPStorm and Visual Studio, other IDE’s include PyCharm (Python), NetBeans, and Rubymine (Ruby).

Additional Tools

Before I head out, I want to touch upon a few final tools I use to speed up my dev workflow.

Cloud Based Web Servers

Codio and Koding are web servers in the cloud to replace the old localhost:8888. These give you exactly what you need to develop with. Need PHP 5.6? Add it in an instant. Want to add Linux? All set up. Node.js as your server? Absolutely. These tools offer server setups without having to tinker with the inner workings of your machine — which can be dangerous! Plus, these tools are huge time-savers.

Hosting

Digital Ocean allows you to set up a server configuration in a matter of seconds. In fact, they boast that you can set up a “droplet”, or a virtual server, in 55 seconds. A droplet is a server configuration that can be set to what you need for a given project. My servers generally run PHP 5.5, MySQL, Linux and other things that are easier to create virtually than reconfigure my machine. (Again, saves lots of time.)

Color Selection

Adobe Kuler is a color palette that allows you to experiment with different colors. It supplies the RGB and hex codes, too. It’s fun to play with but also an awesome tool to help select color palettes for your website / application.

Workflow Tools Wrap Up

Lastly, if you’d like, find me on Spotify and look for the dev playlist I’m building. The playlist is called “Dev” (original I know). It’s all kinds of music from when you need something fast paced, to something chill. It’s the perfect background music for coding up something awesome!

If you have any questions, feel free to reach out to me on Twitter. I’ll gladly help you out. And if you happen to be in Atlanta, message me and we can grab some coffee and build something!

—

Thanks Matt for all the helpful information on Frameworks, CMS’s and Text Editors/IDEs! Seriously — these tools are a dev’s LIFE SAVER!  

UPDATE (NOV 26, 2014)

I removed Node.js as a front-end framework – it is for the backend. Also, thanks to a comment below, WebStorm by Jetbrains is another web development IDE. (The comment mentions many other tools that are helpful to developers!)