In the spirit of discovery and process once again, I set out to ask 1 front–end developer to share his procedure when making stuff for the Web on a Non–Mac machine including a little share from myself for Windows scenarios. We’ll start with the initial set up of the local environment and end with deploying the final product. A special thanks to @remybach for opening up the curtain and sharing his secrets on Ubuntu.
When you talk about Front–end development you’ll mainly hear Mac as the machine of choice. When it comes to Windows/Ubuntu you’ll hear things like this…
“I’d be interested to see just what the percentage of Non Mac front-end devs are in the community. It can’t be that big?”
“I hear that git is a lot faster on Linux than on Mac or Windows, but had a hard time getting it to work just right.”
“Ugh! The Windows command prompt is reason enough not to use Windows.”
“Doesn’t seem like any other platform would do the trick for devs that love their Mac.”
Let’s just set the record straight and hear from some actual warm bodies using this stuff today. I think you’ll be pleasantly surprised from the results.
Me, Me, Me
Windows 7 Hewlett Packard 15″ Laptop
I’ve always been and always will be a mac guy, but there are those times I do switch and that switch for me means Windows. Why Windows you ask? Well, most Windows based laptops are pretty reasonably priced and my wife wanted a Windows based machine for the house. I also figured this was a great compromise over a Mac laptop as it would also allow me to test IE on an actual Windows environment without spending monthly fees on a service like browser stack.
Fast forward through time and I’ve found myself sitting by the fireplace on weekends with it just to remove myself from the mundane routine of my office space. I began to build my arsenal of tools that I could use on my Windows machine, but also collect those tools that could replicate my Mac environment. What follows are the tools that best replicate what I use on my Mac and make my life that much simpler.
Aside: The more I started using a different platform the more I started to believe that applcations need to have the ability to crossover with ease (just like Sublime Text!). It’s now more important than ever to me that I can switch between the two without feeling completely uncomfortable, but I digress.
Local Development
WAMP is what I choose and it can also mimc my Mac’s MAMP environment extremely well. It would also be beneficial to mention that in my opinion it’s the best stack server software application on the market for Apache, PHP and MySQL needs (especially for all you WordPress junkies and PHP fanatics).
WAMP Virtual Servers
Yup! without a drop in the bucket you can have some actual Virtual servers quickly but it’s gonna require a little elbow grease. This will give you the ability to point to your local environments with a cleaner url like… myproject.local instead of referring to localhost constantly.
Tutorial
http://www.codeforest.net/multiple-virtual-hosts-in-wamp
In order to setup Virtual servers you need to customize two files (httpd-vhosts.conf and hosts)
file : hosts location : C:\Windows\System32\drivers\etc\hosts
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 localhost
127.0.0.1 newproject.localfile : httpd-vhosts.conf location : C:\Program Files\wamp\bin\apache\Apache2.2.17\conf\extra\httpd-vhosts.conf
#This Virtual Host still allows us access to localhost
<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot "C:/Program Files/wamp/www/"
ServerName localhost
ErrorLog "logs/localhost-error.log"
CustomLog "logs/localhost-access.log" common
</VirtualHost>
#
#newproject.local
#
<VirtualHost *:80>
DocumentRoot "C:/Program Files/wamp/www/newproject"
ServerName tugboat.local
<directory "C:/Program Files/wamp/www/newproject">
Options Indexes FollowSymLinks
AllowOverride all
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
</directory>
</VirtualHost>Terminal Adjustments
Yeah, so the bad news is some of your Terminal beauty and bash commands loved on Mac will no longer be available on your command prompt. Luckliy you can customize things for yourself using some DOSKEY trickery (this works equally fine with the GIT bash application as well).
For example, type
DOSKEY ls=dir into your command prompt to change listing the directories with dir to ls.
Git Bash
git for windows royally stinks, because it never reads my directories correctly and there is always problems with push and pull on each subsequent and fresh installations (yeah… plural!). I always come back to manul mode using git bash for Windows.
Sass & Compass
Compass App » The paid way out of things » http://compass.handlino.com
Scout App » The Open Source route » Tutorial and Explanation
I have yet to have scout compile my Javascript like Codekit and I have yet to have anyone reply to me on my numerous communcations via Github or Twitter. Regardless, it still does the job for what I need it to do…complile Sass and Compass without spending money on a tool and keeping things Open Source.
Live Reload
Live Reload does have the ability to use the extensions on Chrome or Firefox so you don’t have to use a <script> tag in your markup which needs to be placed just before the <body> element everytime you want to interact with Live Reload. I will say lately its been misbehaving with the Chrome extension so it would probably be best to use the <script> insertion method it asks for.
NodeJs for windows
http://nodejs.org/download for windows 32bit and 64bit. Easy to install and won’t give you a headache. Installing Node will get you going for Grunt in no time or any other Node project you desire to work on. It also comes with a NodeJS command prompt, but you could also use Git Bash if you prefer. Just remember any DOSKEY commands you enter in GIT bash will have to be replicated once again in the NodeJS command prompt.
Grunt
https://github.com/gruntjs/grunt#installing-grunt
If you decide to use Scout you’ll quickly realize you’re gonna need something for compiling, linting and concatenating your Javascript. This is where Grunt comes into the picture.
If you’re in the same directory as the grunt.js file, Windows tries to execute that file when you type grunt. In order ot chnage this behavior you need to type grunt.cmd instead. An alternative would be to use the DOSKEY command to create a grunt macro, following these directions. This will allow you to use grunt instead of grunt.cmd.
DOSKEY grunt=grunt.cmd $*https://github.com/gruntjs/grunt/wiki/Frequently-Asked-Questions
If you’re gonna use Scout to compile your Sass and Compass then I would certainly install GRUNT to compile your Javascript the same as would with your Codekit config. To use grunt on windows you’ll need to install NodeJS which is extremely quick and painless.
Markdown Editor http://markdownpad.com
@evanw did a phenominal job with this application. I can switch from Mou on my Mac to MarkdownPad without feeling completely uncomfortable. It feels very natural and lets me get going quickly. Another cool aspect is the sweet logo that has some Adobe CS4 characteristics at the time of this writing -what could be so wrong with that! He’s also pretty active in its development and updating. Go evan go!
- Instant HTML Preview
- Easy formatting keyboard shortcuts
- Fully Custmizable
- Custom Stylesheets
- HTML export
- Display Line Numbers
- Distraction Free mode
- Feels Natural to Mou
- render markdown directly to your browser with the click of a switch
TextEditor
Sublime Text is what I use whether it’s Mac or Windows. Some say “A ton of the plugins don’t work in Windows”, but I can say that emmett works just fine folks! Sublime is also very relaxed in its portability just as they say on the downloads page…
Licenses are per–user, rather than per–machine, so you can enjoy Sublime Text on as many computers and operating systems as you wish with your license.
ColorPix : Color Picker
A little tough to maneuver but free and you still have hex, rgba, hsb and cmyk values provided at will. Give it a try if you’re a Frank DeLoupe fan. http://www.colorschemer.com/colorpix_info.php
Deployment
Deployment for me is done in a few diffrent ways. I still use FTP/SFTP using Cyberduck, but there are those times I do ssh into my server to update any of my working projects. Nothing crazy going on here -just some good ol’ fashion file transferring.
Rémy Bach » Freelance/Contract Front-end Developer » London, UK
When I’m at work I generally find myself using OSX (so far, I’ve only worked at digital agencies and this seems to be the norm), but otherwise I jump between Windows and Ubuntu while developing. I would solely use Ubuntu, but for technical reasons, I can’t.
One thing to note is that I use Ubuntu on a netbook, so there’s a restriction by means of a small form factor, but for the most part my setup would work anywhere. The reason for my choice of Ubuntu comes down mainly to it being Unix based, and thus close enough to how I develop on a Mac without the insane price tag.
That being said: allow me to share my Ubuntu/Linux workflow with you…
Ubuntu Setup
Since my setapp (see below) contains apps for all platforms, I’ll (quickly) go through my choicest Ubuntu ones.
- Gnome Classic – As mentioned, I’m on a netbook and Unity really slows things down. This lets me get down to business really quickly when I’m on the go.
- Sublime Text 2 – My favourite text editor.
- Git – My tool of choice for version control.
- Compass – I just run this in the terminal as I haven’t found a GUI for Linux yet (I haven’t looked much to be quite honest). Installation was pretty straight forward: just make sure that all you have rvm installed, and then follow the instructions on the compass install page.
- Chrome – My browser of choice.
- ReText – If you’re a fan of Mou on OSX, or are just after a markdown editor with live preview, this is what you’ll want to install.
- xampp – For running local installs of sites and databases.
- ClipIt – Keep a clipboard history that’s accessible via a keyboard shortcut. You’d be amazed how much you use it.
- Docky – Simulates the OSX dock behaviour.
- GnomeDO – Launch any app with just a few keystrokes (similar to Alfred.app).
- oh-my-zsh – Bash (the shell your terminal runs in) replacement that has quite a few neat features.
Version Control
I’ll usually start out with a project on my local filesystem somewhere, and I’ll just run a git init from the terminal in that folder and I’m good to go. Once I have a repo I consider central (see below), it’s easy for me to jump between machines as I just pull updates from there. If I’m not ready to put the code up in a central repo, I use Dropbox, jsfiddle, or even private gists on Github.
For me, I end up using Git in one of three ways:
- Github – If it’s an open source project that I’m working on myself, I’ll get it up to a point that I’m happy with, create a new repo on Github, run
git remote add
in the terminal making github myorigin, and then dogit push origin master. - Bitbucket – More recently, I’ve come across BitBucket which allows you to set up private repos for free. This is great for cases where I’ve got open source projects that I want to collaborate with others on before making them public because it includes issue tracking, pull requests, and other handy features you would normally need to pay Github for to do privately.
- For all other projects (such as my own site for example), I set up my own “hub” (if you will) on my Rackspace Cloud Server using this amazing guide.
Deploying projects/sites
Let me just expand on that last one just a little bit because it’s such a great way of working. Assuming I follow that guide exactly, then if there are any updates/changes that I make to my local site, all that I need to do once they’re committed and I’ve tested them locally is run the following command in the terminal: git push origin master. Just like that my changes go live.
Now the only difference from what I actually do is that I don’t have that post-update hook because I prefer to ssh in and manually, run git fetch, and then for sanity run git diff and go over all the changes before finally doing a git pull. This is just me satisfying my overly-cautious nature though, so feel free to use the hook to cut out the additional steps.
Development Environment
For developing, I’m a massive Sublime Text fan… if you haven’t tried it yet, you definitely should. I’ve got a blog post about my snippets as well as a Gist for my must have packages. I’ve also been a huge fan of the Twilight colour scheme since my TextMate days, so I use that and Ubuntu Mono as my font as I find that the most pleasing mono-spaced font to read.
One really useful thing that I do has to do with my snippets. I keep a folder on my Dropbox containing all my snippets which I then sym-link into my Packages/User folder so that they’re automatically kept in sync wherever I have sublime installed. The same can be done for your user Preferences if you like, but I find that I like to have them separate. To do this, execute this in your terminal, changing the path to your Dropbox folder as appropriate:
ln -s ~/Dropbox/sublime/snippets ~/.config/sublime-text-2/Packages/User/snippetsAnnoyances
Usual linux annoyances aside (like having to get stuck into the terminal occasionally to fix a broken update/upgrade), the only real issue I have is that Adobe haven’t brought us their Creative Suite for Linux (Photoshop & Fireworks being of interest to me as a web developer). There’s a discussion on getsatisfaction.com about this, but it doesn’t look very hopeful to be quite honest. The best solution to this is probably buying a professional grade virtual machine that particularly mentions Creative Suite support like Crossover, but I can’t personally vouch for how well this works as I haven’t tried it yet myself.
Browser Testing
Ah, good old browser testing. I could recommend running a virtual machine to do this, but it’s much easier to use a site like BrowserStack.
That’s it from me. I’m sure there are things that I do that could be done better, but so far this Ubuntu set up works pretty well for me.
Follow Me…
Blog/Personal Site » remy.bach.me.uk
Github » github.com/remybach
Twitter » @remybach
SetApp » setapp.me/users/remybach
this is fantastic.
I know this is an older article, but I just want to point out that if you really want a *nix development environment without losing out on the windows applications (i.e. photoshop), you can use virtual machines to host linux operating systems within windows itself (the s was not a typo, you can run multiple operating systems at the same time)
Currently the most popular virtualization software for windows is VirtualBox and VMWare player. There also tools like vagrant that assist with websites that use completely different environments.
I’m rebuilding my personal site at the moment(becoming a yearly habit) and I thought I’d try and update my workflow a bit. The problem, as you guys have pointed out, is that almost every front-end developer on the net, the vocal majority at least, is on a Mac.
It gets even worse because some people are really opposed to the idea that front-end development might even be POSSIBLE on a Windows machine and in my opinion that’s a really sad way to look at things. I mean, here we are in the age of open-source but as a developer I have to be basically gated by my choice of hardware/software.
This article has been an interesting read and at least I now have a starting point for my new workflow. Do you have any plans on updating it for 2014?
So far no plans to update this particular article. I can say though the tools listed for myself I would still use today with the exception that I would add Fireapp to compile Sass and Compass instead of using Compass App or Scout.
If you’re curious or have any further questions feel free to ping me on Twitter or you can always ping Remy if you’re an Ubuntu cat, but Remy can also answer Windows based questions as well.
Unfortunately, while it is more than doable to develop using a machine other than Mac there will always be pain points to make your environment right. Thanks for reading and I hope what’s listed here helps you find your way at least. Cheers!