The updated Technology Stack – Part 2

ap_40748_IMG_4148

A few days ago, I wrote about the tools I use for front-end development. In the second part, I’ll write about which software I use to get things done: Editors, themes, plugins, etc.

Sublime Text

Sublime_Text_LogoI have been using Dreamweaver for more than a decade. When I recently tweeted I’d finally given up on it, people were shocked to their bare bones. It is true what they say: old habits die hard. Dreamweaver has always been this all-in-one solution that never failed me. It came with built-in FTP support, project support, great HTML and CSS completion. Javascript and PHP completion failed me on many occasions. However, for the most part, Dreamweaver managed the job. I liked it.

Then one day, I started exploring Sublime Text and I started to see what the difference in approach was: Sublime comes pretty barebones. It’s a text-editor with a nice neat and simple UI. However, you can expand the feature set to whatever you want it to be. There are so many plugins, addons and features which you can just add freely.

And the keyboard combo’s… It takes some getting used to but once you’ve gotten into it you come to realize the hard truth: Dreamweaver is pretty great. However, Sublime Text is more like Iron Man. Pretty damn badass.

Predawn for Sublime

Like all great geeks, I like to use a good looking coding environment. The Predawn theme fits the bill perfectly. In fact, I liked the look so much, it was the initial reason I started using Sublime Text in the first place. It’s a relaxing color contrast and really easy on the eyes, even if you’ve been coding away for hours.

SFTP for Sublime

This is a paid plugin for Sublime Text. It’s one of the main reasons I actually decided that Dreamweaver might be replaceable. What makes this plugin essentially great is the way it saves the project-related FTP details in a file. You could easily add this file in GIT and now everybody on the project can easily use this plugin to sync files up and down the FTP server without having to set up a single thing.

If you’re worried about security you can just add the file to .gitignore and you’re all safe. So what exactly makes this addon so great? Well, just think about what you’d do with a Grunt setup. Build a release, then right-click the build folder in Submlime Text and sync the local folder with the remote folder. There. Your client/colleagues can now see the latest version of the project. No more going into your FTP client, finding the right folder, opening the right server and dragging all the files and then confirm the overwrite-all… Just hit the ‘sync local folder to remote‘ and do other important stuff. Computer’s doing the work for you. The future is here.

Sourcetree & Bitbucket

SourceTree_newlogoGit is awesome. Right? Right?? I have used it for several projects with several clients. Most of the time I ended up working with private Github repo’s (paid) or other paid services like Beanstalk. While I really like git, the problem to use it was either running a git server on my own server (which I didn’t feel like setting up; I’m not exactly a server-management-guru) or paying for a private git repo. Then my Metropoly-colleague Sam, informed me casually that Bitbucket allows unlimited free private git repo’s. I’ve been moving all my software projects (open-source, internal, experiments, etc) to Bitbucket ever since.

Most people use git in Terminal but that’s where I get annoyed. We build websites. We build interfaces that will be used by humans. Why should I be interfacing with software using nothing but text. I’m a visual person. I like to see what the computer is telling me. Sourcetree is a perfect GUI that does everything you need to do with git and even better: I understand how to use it. It makes me feel like I’m a freaking git-guru. And that’s awesome!

CSS Hat

csshatThis is s a paid Photoshop plugin but the amount of time it saves is absurd. Most definitely if you’re using Compass. It’s pretty neat because what this thing let’s you do is just copy/paste SCSS code right from Photoshop into you text editor. Sure, the built-in version of this functionality in Photoshop CC does this as well. But I’ve found CSS Hat to be more accurate, more powerful and I really like that it uses the Compass/Sass/Less mixins based on your preference 😉

MAMP Pro

mamp-pro-logo-bigI have been using Mamp Pro for quite a while now but I still think it’s one of the most important tools I have for web development. The thing I like about it, is the sheer amount of flexibility. You can chose which version of PHP you run, which modules are enabled. You can setup custom hostnames on port 80. You can link these to a dynamic IP service like no-ip.com and host several websites from your home-server and manage all of them with MAMP Pro.

This tool really gives me a faster way of setting up a staging environment. This comes in very handy when running tests, presenting idea’s to friends of projects I’m still building. No need to upload the files to my VPS, set up databases and manage subdomains. This is one of those tools you didn’t know you need them until you’ve used them once.

So that’s it: My toolset for frontend development. Do you use any tools that I might find useful? Or things I’m just completely unaware off and that I just must have in my life? Let me know!

Ronny

view all posts

Ronny is a freelance frontend developer with a wild passion for creativity and a relentless hate against flat design. Ronny spent years as a Flash developer before moving to HTML5 and rediscovering fun and happiness.

0 Comments Join the Conversation →


Leave a Reply

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