Since acquiring Live Theme, I’ve been forced to up my web dev game.
In an effort to minimize error and save time, I’ve done my best to follow, mimic and learn from some of the best web devs out there via Twitter, blog posts, etc … I’m inspired by this quote as I approach code, design, and even life:
“If you’re having trouble discovering what kind of work you’d really truly enjoy, let yourself be jealous and envy others. You might figure out what you’re looking for.”
One of those that I ‘envy,’ in a good way, is Tom McFarlin. He’s given me a lot of tips and advice in the web development department, a blog any web dev should be following.
Here’s the latest bit of advice that I’ve been floored on how awesome it is:
How-To Setup A Killer Web Dev Environment
Tom has recently referred to what’s in his WordPress developer toolbox, and let me tell you first hand, it’s legit.
Here’s the setup I’m using, based on Tom’s advice:
If you’re using Windows, you should consider migrating.
I used to think it didn’t matter, but since working on a Mac for almost a year, now, I can tell you that I was wrong. When it comes to web dev, I’ve found running on the Mac is a superior setup, IMHO.
Let me quickly tell you what each of these apps are and why this combo is killer:
MAMP
This is essential. If you’re doing any kind of webdev, you better be running a local environment. I’ve setup a dev environment on Windows, and I can tell you, this is a lot slicker (here’s how to use MAMP). Although Tom recommends the pro version, I’ve been running with the free version without much thought. It was only until recently, that I’ve considered going pro. Jumping up to the pro version is really a case by case basis. Try the free version first, then decide.
Coda 2
Coda is great. I really like it. If you already have an IDE that you really love, you can still use this killer combo. If you don’t fully love your editor, give Coda 2 a serious look. It’s really nice. 🙂
Codekit
Now we’re getting into some of the awesome. Not only will Codekit crunch your LESS, when you have your localhost page you’re editing in Chrome or Safari, it auto refreshes every time you save your file. I spent a lot of time editing code over the weekend, and I was nothing but grins and giggles every time Codekit kicked in. There’s even more awesome in Codekit that I’ve yet to dig into, and I’m already happy about my $25 well spent. There’s a 10-day free trial, so if you’re a little hesitant, try it first!
Gitbox
Depending on how much web dev you’re doing, you may not want a Github account. It starts at $7 per month, so it wouldn’t take very many projects to make it worth it. You could always setup private repositories for current projects, and then delete them upon completion, so that you can use the low priced $7 per month option. Github is the monthly service, whereas Gibox (which I’m talking about) is the app that makes Github work really smooth. Github is a really solid way for version control, and Gitbox makes it easy peesy–especially if you install Xcode to enable the comparison feature. When using Gibox with Github, you can comment and keep track of each and every edit you make, making it easy to rollback any change and compare your current version of a file with another. This has saved my bacon several times already.
Conclusion
As I said before, I did some heavy web dev work this past weekend, so I had a chance to really test this setup. I was really impressed with the flow and ease of it all. I thought my previous setups were fairly good, but after this past weekend, I can tell you the benefits from taking advice from pros like Tom, are huge.
What cool stuff have you learned from awesome web devs?
Peter says
Let me ask you this Eric, do you think that as web developers one should get more knowledgeable about less and sass? I’ve been into CSS3 for quite a while now and all the rave that I’ve been reading about has been about less and sass. I m fine with CSS3 in its own and I can’t find a scenario where I need to use object oriented programming in CSS. Is there something I’m missing?
Jason Bradley says
My short answer is both. It depends on if you are planning on using either Bootstrap or Foundation for your framework of choice. If you choose Bootstrap, focus on LESS. If you choose Foundation, choose SASS. I personally like LESS myself, probably because I prefer Bootstrap. Standard Theme is built on top of Bootstrap, so naturally I chose to learn LESS. Another reason why I like LESS is because its compiler is JavaScript versus SASS uses Ruby. Now I do read up on SASS to stay in the know and knowing LESS makes understanding SASS a lot easier.
Eric Dye says
It can really streamline things, but what I like about it the most, you can really mod your CSS styles fast. Take an existing design and transform it, swap color palettes, etc …
Jason Bradley says
I have the exact same setup Eric. I have also worked in Codebox to store snippets of code that I have written and collected over different projects. Let me know if you want some help developing or testing out the new Live Theme.
Eric Dye says
For sure!
web design company montreal says
Deadly combination I must say. You can rock your web development world by having this combination. I think Eric we both have same taste when it comes to Coda 2 specially. I love working with coda 2.
Eric Dye says
Great stuff, eh!
Alejandro García Iglesias says
Hi Eric, first of all I should say you can’t go wrong with your chosen tools. But I cannot stop thinking that it reminds me at how I was like 6 months ago, loving my new Mac, discovering tools like MAMP and Codekit, etcetera. I think honestly that I’ve given some steps into improving my workflow and it feels nicer to me, so I will share it to you if you like, but maybe it’s not your cup of coffee, you should try and decide if you like.
So I tried Coda 2, I looked good, but in the end there was something, I don’t know, it didn’t convinced me, so I went back to the editor I’m loving this year (I’m never 100% happy with IDEs) which is Sublime Text 2. It has so many niceties, little things, but they count a lot. It also has a powerful package manager to install very useful plugins to it, from Sass/Less syntax highlighters to ZenCoding to JS lint, and there are thousands. Also, I love distraction free mode. You can give it a try.
I loved Codekit, until I started working with a co-worker who uses Ubuntu. He does backend stuff mainly with PHP, but sometimes he needed to touch some CSS color or JS code, and he couldn’t run Codekit on Linux, lessc compiler didn’t worked to him and JS was compiled and minified, which he can do with some tools, but needed to know which files where imported by Codekit on my main JS file and he was not happy with all that and everyone except me started to think there was something strange with the workflow. So I started digging in a tool called Grunt.js which is awesome. Basically, it’s a build tool for all kind of web projects. Think of a “make” command but for web. You define some tasks in a gruntfile (like a makefile of make) and every time you run the “grunt” command on the project directory, it builds it completely, it can run tasks to compile Less files, lint, compile and minify JS, etc. It also has a “grunt watch” command which looks for changes in the files and runs all the tasks instantly when something changes. Also, there are hundreds of third-party tasks for you to install. I installed one called macreload, it reloads your browser (only active tab and works only on Mac). That functionality isn’t better than the one on Codekit, but it works. You should make yourself familiar with how NPM installs packages (you will need a packages.json file for third-party Grunt tasks), but it works really nice in both platforms and now we’re all happy because we have something more solid to rely on.
MAMP, you should definitely check the Pro version, it’s a breeze to manage the server with that GUI, specially creating virtual hosts with a couple of clicks.
Regarding Gitbox, I should check that! Looks very nice. I’m currently using Tower as a versioning GUI, but want to try that “autopull” feature of Gitbox, I’m wondering how it could work.
Finally, not sure if you’re using command-line, I’m not a fanatic as that co-worker I mentioned earlier (you can imagine him using Vim as his IDE), but sometimes it’s very handy and you’ll need getting accustomed to it if you want to run Grunt, but it’s joyful to use these tools.
Just my 2cents. Cheers!
Eric Dye says
Great feedback, thank you!
I’ll have to check some of this stuff out. 😀
Eric Dye says
You’re right about MAMP. I jumped on the Pro version about six months ago and love it! 😀
Jose N says
Hello Eric, just came across churchmag recently and its becoming my fav for articles and tutorials. As a developer/ designer new comer i had just recently come across that same kind of mentality as the quote you have in the article. At first i felt like i was biting off someones style, but i realized that i have to carve out a style that i feel comfortable with. And although there are many cool designers that bring a lot of awesome visual creativeness, i like a certain style.
Anyways, my question to you is about Windows dev tools. I hear and read of all these cool dev tools for mac(and they do look awesome) but, what about windows? Any you would recommend for windows7, besides dreamweaver? I have dreamweaver and its cool but i feel like i’m missing something when i start reading of all these mac ide’s. Any insight form you or the other 8bit guys would be cool.God bless.
Grace and Peace!
Alejandro García Iglesias says
Jose N, almost all the tools I recommended in my comment, except for MAMP and Tower, work on Windows. MAMP can be replaced with XAMP wich works very well and for a GUI Git client, not sure on that, but the Git command-line binary is available for Windows (though Windows command-line sucks). There are better command-lines for Windows, you should check Cygwin, which is a “linux-like environment for windows”, and the installation let’s you choose some packages to install and if I’m not remembering wrongly, there was the Git package there.
Best,
Alejandro.
Jose says
Hey Alejandro, thanks for the reply I actually did check some of the things you had posted after I read your comment. And found that sublime
2 has a version for my system. Also got the emmet plug in for that zen coding addition. I downloaded wamp though. What do you think? Should I use xamp instead? I can’t get it to connect as my server yet but I’ll figure it out later.
Again thanks for you advise. And do you have a site I can go to?
Grace and peace!
Alejandro García Iglesias says
I used XAMPP since I started doing web development in the (not so) old Windows days. I’ve tried WAMP and didn’t liked it, so stayed with XAMPP. In my latest Windows days I had switched to EasyPHP before buying my Mac. Both work well, but EasyPHP is updated faster.
And regarding any site you can go to, I think I don’t understand the answer.
Grace and peace for you too, brother.
Eric Dye says
I’ve heard a lot of good stuff about Sublime 2. If you don’t mind throwing down some bucks, I think you’ll really like it.
Eric Dye says
This might help: https://churchm.ag/setting-up-a-local-development-environment-part-1/
Eric Dye says
Here is a standby for a lot of devs: Notepadd++ (check it out here)
However, Intype looks promising as a up and coming (check it out here)
I was in your position a little over a year ago and finally made the jump over to Mac. I will say, that as I enjoy this new toolset, that it would be REALLY hard to go back to Windows. Sure, it was a little rough the first week to learn the subtle differences, but the app library is really solid. Tom from 8BIT migrated, too, and feels the same way.
Glad to have you a part of our community! 😀
Eric Dye says
PS: We are always looking for guest authors and someone coming from a PC angle would be great. 😀
Jose N says
Thanks for the welcome, I hope to learn a lot more during this year. I did see the link you posted for resources on blogs. And it would be awesome to be a guest on a place like this, just let me get a couple more blogs under my belt and get into these new programs(i did get sublime text 2) so i can have something to write about. I do think I’m gonna stick with pc for a while see how it goes.
But for now if you get over to my blog anytime, some feedback form you guys would be very much appreciated. Honesty might not always taste great, but its my favorite flavor!
Grace and Peace!
Eric Dye says
Cool! Stick with it, man!
Sam says
Yet another mac fan boy who thinks macs are better for development but can’t say why. I don’t mean to be critical, I’d love to use anything that would make my life easier (why I read your post) but why can’t ‘macs are better’ people ever muster a sentence of justication? Yes, that was a rhetorical question. From my experience people who are better developers on macs remind me of the saying “a bad workman blames his tools”, are you a web developer, or is it your tools?
Eric Dye says
Does a good craftsman use cheap tools?