How it’s made: Front-end developers spill the beans

In the spirit of discovery and process, I set out to ask 3 front–end developers to share their procedures when making stuff for the Web. We’ll start with the initial set up of their local development environment and end with deploying the final product. A special thanks to @andyunleash, @zakkain and @ChrisVanPatten for opening up the curtain and sharing their secrets.

Table of Contents ✪ Quick Links



Yours Truly


When I develop locally I’m using one thing – MAMP, the free version. I start with all my projects placed in my httpd directory which can be found under /Library/WebServer/share/httpd on Mac. This allows me to use the local web server address 192.168.1.100 to view my projects. I started using this approach because when Adobe Shadow (now Edge Inspect) was released it only worked with actual IP addresses instead of localhost:8888. Since all my project folders are under httpd I use the 192.168.1.100 IP address to scan for the project I wanna work on and then get to it. I can also jump to that IP address on my laptop running Windows 7 to test IE 7-9.

When I’m actually in the trenches coding projects, I’m primarily using Codekit and Sublime Text 2. After I’ve tinkered for a bit, I’ll deploy to a private viewing platform on a live server. I usually deploy a few different ways depending on the situation/context. One way is to set up a sub–domain or folder on my personal server (or an agreed dev server for client work) and upload my files to that destination. Another approach is to use Koding and call it a day. I find Koding to be quite powerful and extremely simple. It’s a really great platform that gives developers the tools they require directly in the cloud (i.e. Terminal, Git, Ruby, Apache, MySQL). Anytime I need to make a project live or test for development, I just say to a client “Go to http://grayghostvisuals.koding.com/<projectname>.” Works like a charm! After I’ve decided where I want things to go, I’ll upload my files using Fetch SFTP (because it’s secure) combined with its remote/local mirroring capabilities. I just say to Fetch “Mirror my project’s local folder against my live server folder and delete and duplicates” and all my files appear magically on the other side.

Since most of my projects use WordPress, requiring an environment that runs PHP and My SQL is important. I can usually get a consistent result on my local environment against the actual live server environment. I don’t use Ruby, nor do I work on Ruby based projects, so having a server with that capability is meaningless for my needs at this time.

I know it may not be the fanciest of workflows, but it works for me right now based on the project size I take on. I know I’ve left out many other bits in my workflow like applications, browser extensions, managing dependencies, favorite web services, but I wanted to keep it light and discuss mainly the local development and deployment tactics. I’ll save the other items previously mentioned for a future discussion. Suggestions for my workflow? Think you’ve got a tip for me that will make my life way cooler, easier? Please share your awesomeness with me.

Check out my tools on Setapp

http://www.setapp.me/users/grayghostvisuals


Andy Howells » Southampton, UK


My development setup is pretty brisk, but covers all the needs I have for front–end development and tinkering with PHP. Mamp Pro is definitely worth the cash, I originally started out using MAMP’s free version but quickly upgraded for the extra functionality and the better GUI for managing services.

Pro–tip for MAMP Pro, if you want to access your sites via mobile/tablet on your local network/wifi – add custom aliases, like below, one replicating your chosen domain and one using .*.xip.io. Then if you open that in your other devices, replacing * for your server machine’s IP Address it will direct to your chosen domain so you can preview and assess. This also helps if you’re using Adobe Shadow (aka Inspect now because of Edge). Note that if you’re using a CMS/Wordpress for example, you’ll need to edit your site/WP URL’s to reflect the URL you’re using to access it, so in this case, mine would be unleashV4.192.xxx.xxx.xxx.xip.io.

In terms of my code editor I love Sublime Text 2 with Zen Coding and Sass. The ability to add plugins of your choosing and fully customise your coding experience is the main draw for me. Snippets also come in super handy, however, I also use CodeBox for managing snippets – you can save, index and search them in a nice app and a dropdown from the menu bar – it’s much easier than having to remember what your snippet starter was so you can just type in the tags you’ve added and quickly find it and copy it over to Sublime.

I mentioned briefly above about using Sass – this is my chosen pre–processor for CSS and being able to shorthand my code is super efficient and allows you to use variables, and create mixins to further speed up the development process. Adobe shadow as aforementioned is super handy for inspecting on mobile/tablet devices – you need to download the app on your chosen device to get it going and combine it with Google Chrome for the best experience. Speaking of which, Google Chrome is in my opinion the best browser to develop in, thanks mostly to the superb inspector.

In terms of uploading and managing code, I combine the power of GitTower (which manages version control aspects of my coding) with BeanStalk which allows us to have our repositories hosted and automatically push our changes and commits to dev, staging and live server environments. Our development server is a meaty virtual server that is accessible via one of our domains, we usually set our customers up on their own subdomain there during the draft stages and use a simple HTPassword protect to block access from prying eyes! On the odd occasion we need to use FTP – which nowadays is pretty rare – I either utilise the application Flow, a simple FTP client for drag and drop from Finder, or every now and then FileZilla (a hangover from my old Windows days, can’t seem to give it up!).

Company

http://unleash-it.co.uk

Twitter

@andyunleash


Zachary Kain » Ontario, Canada


I try to keep my workflow as simple as possible, but there’s a lot of tweaking going on behind the scenes. The first layer is a set of dotfiles which keep all my hotkeys, terminal settings (I use iTerm2) and commands backed up and present across machines. I recently switched from a 15–inch MacBook Pro to a MacBook Air, and the dotfiles save tons of time getting up and running.

The critical component to my workflow is my favorite text editor, Sublime Text 2. Its real power comes from plugins: GIT Integration, Nettuts+ Fetch and SFTP. These plugins together let me not only pull down files and resources quickly, but deploy projects easily either through Git (which I use hand–in–hand with Github) or FTP, usually depending on the client.

On the coding side, my most valuable tools are Zen Coding (now Emmett) + Sass. Sass makes CSS ridiculously powerful, and Zen Coding keeps writing markup from becoming a chore. I do all my prototyping and mock–ups with code in the browser, and Zen Coding combined with a CSS pre–processor makes that far easier than working in Illustrator. I use Mountain Lion’s default Apache server rather than MAMP (mostly because I don’t want the extra bloat on my 128GB SSD), and Sequel Pro to manage my local databases.

When I’m ready to deploy I use Forklift to push & update files over FTP; it’s kind of disorganized but I still drag folders from my ~/Sites directory (my localhost root containing folders for each project) to the live server. For testing my work with PHP I alias sites.dev to 127.0.0.1 in my hosts file so I can just browse to sites.dev/projectName to see the relevant project. This plays well with previewing designs to clients; I use either localtunnel or showoff.io to create a public link to my localhost, and send that link to clients. This isn’t always reliable, so for some projects I maintain a mirror of their live server on my own hosting. I’m trying to streamline that workflow because keeping the local copy, client server and my personal mirror in sync gets to be really confusing. On top of that, if I have to make quick little changes or bugfixes, I’ll use Sublime Text 2′s SFTP plugin to edit the files live and then copy those changes to my local version.

The only missing pieces now are a handful of helper-apps, most of which can be found on the Mac App Store. Characters is a phenomenal menubar app for copy-pasting unicode characters, iA Writer is my writing app of choice, and I couldn’t live without Alfred, which is hands-down the best launcher application out there.

Company

http://amperedesign.com

Twitter

@zakkain

Setapp

http://setapp.me/users/zakkain


Chris Van Patten » Buffalo, New York


At Van Patten Media, we use a “Frankenstein’s monster”–esque combination of tools and utilities to handle local development and deployment. It took a lot of work to set up, but the results mean smooth multi-stage development and easy deployment between multiple servers.

We primarily work with WordPress, so we built our process around it. In fact, we open sourced it as a framework called “wpframe“, which in turn makes use of

Starting a wpframe project just involves a few git commands and takes less than a minute. After running those commands and editing your wpframe project’s config files, you simply run the command vagrant up in your terminal.

Within minutes, you’ll have a ready to install WordPress website—everything short of setting site name and admin login! You don’t even need to enter database credentials. And you thought the WordPress install process couldn’t be faster!

We use Vagrant because it means our local sites are running on an almost exact copy of our remote server. MAMP or similar software often use different versions of PHP and MySQL compared to our production server (and never include the advanced caching software we use). With Vagrant we know that what we develop on is identical to the production environment, meaning we can kill bugs quicker and save more time.

Once we’re ready to share a project with clients, we deploy it to staging. We use Capistrano, a wonderful Ruby utility to help this process. We just run cap staging deploy:setup and then cap staging deploy and within a few minutes the website is installed on the remote server–all we do is enter a password! We have to separately import the database from your dev site, but that’s an easy process too, as we have a Python script that handles the task.

Using Capistrano means that if we make a mistake, it’s painless to fix. Running cap staging rollback will revert to the previously deployed version of a particular website.

Once everything is good to go in the staging site, we run cap production deploy:setup and cap production deploy. Once you import the database from your staging site (again, a painless task with the Python script I mentioned before), it’s boom goes the dynamite. The site is running quickly and painlessly on the remote server and visible to the world!

After that, the process continues sort of like the circle of life. We develop in a local Vagrant copy, then push to staging to give clients a look, then push to production when it’s ready to go live. The process is definitely more involved than what others do (editing live on the server, for instance) but it means that we have mitigated the risk of breaking client sites, and forced ourselves to be more deliberate and meticulous in our work.

NOTE: Chris wrote a more in depth article June 6, 2012 if you’d like to read further about his tools and workflow. http://chrisvanpatten.com/blog/2012/06/dev-setup

Company

http://vanpattenmedia.com

Twitter

@ChrisVanPatten

Personal Blog

http://chrisvanpatten.com



  • Browser Extensions

    • tin.cr

      Edit and save files from Chrome Developer tools. Live reload for Chrome. Any changes you make in Chrome Developer tools get saved to the right file automatically

      http://tin.cr

  • Local Development

    • MAMP / MAMP Pro

      MAMP installs a local server environment in a matter of seconds on your Mac OS X computer

      http://www.mamp.info/en/index.html

    • Vagrant

      http://vagrantup.com
      Virtualized development made easy. Create and configure lightweight, reproducible, and portable development environments.

    • Anvil

      http://anvilformac.com
      Anvil takes your site folder, gives it a .dev URL and makes it run for you. Works for any static HTML sites and Rack apps.

    • Koding

      https://koding.com
      A new way for developers to work in the cloud

    • Yeoman

      http://yeoman.io
      Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

  • Optimization

  • Text Editor

  • Version Control

    • Bitbucket

      https://bitbucket.org
      Unlimited private repositories to collaborate on your code – Git or Mercurial. Free for 5 users.

    • Github

      https://github.com
      Free public repositories, collaborator management, issue tracking, wikis, downloads, code review, graphs and much more…

  • File Transfer

    • Fetch

      Fetch is a reliable, full-featured file transfer client for the Apple Macintosh whose user interface emphasizes simplicity and ease of use
      http://fetchsoftworks.com

    • Forklift

      A simple FTP client for drag and drop from Finder

    • Flow

      A simple FTP client for drag and drop from Finder
      http://fivedetails.com/flow

  • Deploying

  1. Thanks for sharing this! It’s certainly interesting to learn more about how others do their work. Have you tried Brackets? Seems like a cool project, and it’s quite fun to use.

    I use Sublime Text, Transmit, CodeKit and Sequel Pro (database) ;)

    Oh, and MAMP, too. Using them right now to create this site about LAN games, in fact!

    Would you consider CVS-based deployment? We use it at work, and it is super handy.

    1. Hey Jarrod,

      I’ve checked out brackets before and I’m still married to Sublime Text 2. Definitely a cool Open Source project for sure. Maybe it will be something I try in the future, but for now Sublime Text 2 is my work horse.

      In regards to CVS, I’ve never heard of it so I can’t really say if it’s something I would consider. Maybe you can explain it in more detail?

  2. I’m here for Q&A about my workflow or the apps I mention in my section, should anyone want to chat!

  3. Thanks for sharing my setup! I’m happy to answer any questions if anyone has them!

  4. ❧ Antonio shouted:
    2012/11/19 • 11:24 pm

    This is helpful. Koding looks awesome, I just requested an invite. Also a big fan of SequelPro. This came at the right time, I just switched my local dev environment, went from MAMP to an Ubuntu VM.

    Have you tried setting up local hostheaders for your projects using MAMP. I used to setup separate apache virtual host settings in the httpd.conf file. This helped me maintain separate log files for my projects and assign a ServerName variable. This way I could use something like local.sitename.com for the local version of my project.

    1. Hey Antonio,
      “…I just switched my local dev environment, went from MAMP to an Ubuntu VM.”
      Where can myself and others go to learn more about Ubuntu VM and the requirements for system setup?

      “Have you tried setting up local hostheaders for your projects using MAMP.”
      No I haven’t. Would this be more helpful with my usage over using an IP address?

      “This helped me maintain separate log files for my projects and assign a ServerName variable.”
      Totally lost on this one. I don’t mess with the log files much.

      1. ❧ Antonio shouted:
        2012/11/20 • 1:02 am

        Where can myself and others go to learn more about Ubuntu VM and the requirements for system setup?

        Re: Apologies, should have been more specific. By Ubuntu VM, I meant to say that I run Ubuntu server on a virtual machine on my MBP.

        I use VMWare Fusion, but Virtual Box should do the trick as well. It’s pretty simple to get up and running with Apache, MYSQL and PHP. Going this route may be overkill for most cases, but I needed to setup an environment that I can closely manage (for example, managing modules). As far as installing Ubuntu on VMWare Fusion, it’s pretty straight forward, however I found this video after a google search for ‘vmware fusion installing ubuntu server’.

        “Have you tried setting up local hostheaders for your projects using MAMP.” No I haven’t. Would this be more helpful with my usage over using an IP address?

        Re: I prefer the hostheader method over pulling up a site under a sub-directory. So in your case you’re working with say http://192.168.1.100/grayghostvisuals, where http://local.grayghostvisuals.com is my preference. It helps me closely relate the local environment to production.

        I think one good example of where this comes in handy is when running a WordPress multi-site installation. I developed a site where I needed to map a domain name to a subsite (subdirectory) using the MU Domain Mapping plugin. Something that’s not as easy to do going the IP address route.

        “This helped me maintain separate log files for my projects and assign a ServerName variable.”Totally lost on this one. I don’t mess with the log files much.

        Re: It’s really not necessary, I do it to keep things a bit more organized. I believe Apache will default to error.log if you don’t specify a log path.

  5. ❧ Andy Howells shouted:
    2012/11/20 • 12:34 am

    I loved sharing my setup and learning about the others too.

    If anyone has any questions about how we roll at Unleash just give me a shout!

  6. This is awesome, love seeing other people’s workflows. Would be nice to see some screencasts and details regarding the database side of things ^_^

    1. Hey Simon,
      This will be an ongoing feature article for my blog so there will definitely be more parts to come. I’ll definitely consider a screencast for future articles. Thanks for the feedback and stopping by. Glad it was of interest to you. Cheers!

  7. If you’re a php developer I seriously recommend using Zend Server. Installs Apache, php, MySQL and a host of other options. It collects and catalogues all the errors for you, allows you to performance test code etc. The server has a GUI allowing you to choose which extensions you want, analyse what’s been happening etc.

    I’ve only used it on Windows but the installer makes setting up your entire stack a case of pressing the next button about 5 times. The community edition is free too!

    1. Hey Richard,

      I’ll check out Zend Server for sure. I like the idea of the server having a GUI to choose the extensions. I’ve been thinking about just expanding my MAMP prowess and customizing the Apache config which is possible with the free version of MAMP. With a little elbow grease the free version of MAMP can be configured for a bunch of goodies including Virtual Servers .

  8. ❧ Francisc shouted:
    2012/11/20 • 6:06 pm

    So you only talked to people that use Macs?…

    1. Hey Francisc,

      Yeah, for this article it’s all Mac people as a heavy amount do use Mac for their platform of choice.

      Don’t fret though as there will be ongoing articles on this subject including screencasts plus a look into those that use Windows, Linux etc. so we can cover everyone. Stay tuned for many more articles on this topic.

      Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2012/10/15