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.
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
myproject.local instead of referring to
In order to setup Virtual servers you need to customize two files (
hosts location :
# # For example: # # 18.104.22.168 rhino.acme.com # source server # 22.214.171.124 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.local
httpd-vhosts.conf location :
#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>
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
into your command prompt to change listing the directories with
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
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.
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
DOSKEY grunt=grunt.cmd $*
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
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
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…
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.
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 my
origin, and then do
git 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.
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.
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/snippets
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.
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.