Share your front end workflow: Here's mine

November 11, 2013


I think its about time I did my first real workflow post. I don't think this is talked about enough in development. I really have to give it to people like Paul Irish and Addy Osmani for showing people how to use awesome tools and get work done faster.

When I was a student, in my computer science classes it was almost taboo to ask too many questions about workflow. This could be an entirely self-made limitation but I felt weird asking people how they developed their code.

Watching Paul Irish's video on workflow was really eye opening for me because it made me realize I've been doing it wrong for so long! So I think there needs to be more openness about how we develop things because it can only benefit developers as a whole.

Sublime Text

I became hooked on Sublime Text as a student web developer because it was super light weight and had a nice file tree on the side for managing large projects. Seemed better than TextWrangler and other Mac alternatives to me. It wasn't until recently that I really became in touch with how powerful it is. The package control plugin is immensely powerful and puts you in touch with a large community of developers that extend Sublime Text's functionality. For that reason alone its worth the download, but there is still so many more features. If you want to see some more features and get a handle of how to use Sublime Text in a meaningful way, check out this YouTube video series. The vid is about version 2 but it should still be very beneficial if you're using version 3.

Must have plugins:

  • Package Control
  • Emmet
  • There are many other handy ones but these ones are so important I think they should come pre-bundled.

Git

In the past, Git is something I never took the time to learn. I'm in the process of learning how to use it now and I'm completely in awe of how useful it is. It makes me feel silly for not taking the time to learn it earlier! There is no better guide than the book Pro Git (which is graciously provided online for free) to learn how it works. It's kind of long but it is completely worth it! Trust me you'll be happier working with git.

If you're more of a visual learner, I have just the video for you. It is kind of long but well worth the time:

(also make sure you check out Linus Torvalds' video on git that he mentions)

BitBucket

Many people think of GitHub when they think of git hosting, but for me BitBucket is where its at. They offer everything GitHub does as well as unlimited private code repositories.

SourceTree

Now that you've learned what Git is and know of repository hosting companies like BitBucket, its time to get to work. If you're comfortable using git on the command line then more power to you, but I like to visualize the git process. For this, there is none better than SourceTree. Made by the nice people who run BitBucket, SourceTree is a fully functional free git GUI.

Conclusion

This was a very short intro to the tools I use to develop websites. I plan on sharing more stuff like this in the future so I created a "Workflow" category on my blog in hopes that I'll fill it with content eventually. One thing I didn't mention is how I've just recently started using Yeoman (yo, grunt, bower) to manage web development. I don't know enough about that to intelligently comment on that, but it seems very promising and I'll probably make a post about that in the future. These tools fill in the missing gap that I've been wondering about for a couple years now and that is "how do I deploy a website with the least amount of effort?"

Also, this is no means the "right" way to do web development, but it is something that works for me so far. Feel free to leave a comment with your workflow and tools you use to accomplish it.