The updated Technology Stack – Part 1

 

Seen as my time with Flash is over, it’s time to write about my post-Flash experiences. Lately I’ve been getting back to learning new things on an almost daily basis. I’ve come to learn a lot about all kind of technologies and frameworks and I wanted to share my current set of tools here in a 2-part article.

So why do I call this the ‘updated technology stack‘? Well, ever since I started coding my entire process revolved about Flash Builder and the Flash Authoring tool. Ever since I started moving away from Flash and heading more towards HTML/CSS and Javascript, I expanded my set of tools massively.

Some of these tools I have been using for quite a while now. Others have become part of my workflow way more recently.

Sass & Compass

compassOne of the first things I learned about is SASS and Compass. It’s essentially CSS preprocessor. You write CSS-like syntax but in a way that enables you to write more with less code. Once you’re done, you compile your code into a CSS file and there is all your CSS with all your fancy selectors and overrides.

Where things really start getting interesting is with the mixins, the functions and the variables. Compass comes with a great deal of fantastic mixins that allow you to just write things once, while compass takes care of the annoying prefixes or crossbrowser approaches. Just great!

Twitter Bootstrap Grid

bootstrap_wordpressI’ve been making responsive layouts in HTML for several years now. However only recently I needed to use an existing CSS framework to achieve that. We decided to use Twitter Bootstrap’s Grid and it was a joy from the very first second.

You just use a few css classes and the rest happens as if it were magic. I love that my biggest problem has become how many columns a specific item needs in a row on a specific screen. No more measuring tape. No more messing about with all kinds of media queries. I only need very few of those for specific bugs and UI elements.

Zend Framework 1.x

Last year, I started using Zend Framework. This a PHP MVC framework with some great tools and utilities ready to go. I was kind of thrown in to the framework without a decent understanding of the philosophy. I didn’t really understand why certain aspects of the framework were implemented the way they are.

It took me some time but once I got that figured out, I totally got the hang of it. I built several websites and applications using it and it really helped my process be more streamlined.

Zend Framework 2.x

So a few months ago, I decided to look into Zend Framework 2. Holy crap! It’s completely different. Where Zend Framework 1 was almost just a touch and go thing, Zend Framework 2 had become very enterprise and very complicated, even for the smallest of tasks.

People that know me, know I shy away from enterprise. There’s a lot of rules for a lot of reasons that make no sense in a lot of cases. I’m sure some very formal dude in a suite is getting all worked up just reading this and that’s okay. I’m not an enterprise developer. I’m a front-end geek. We don’t do complicated for the sake of complicated. I like to just get shit done without worrying about the entire framework imploding if I mess it up.

Grunt Init

The thing I really like about Compass is ‘compass init’ in Terminal. Just execute that command and all of a sudden your directory is ready to compile .scss files into .css files. The thing that I dislike about it though: I wanted to have my own personal template for projects.

As it turns out there was no way of creating a template setup for Compass. However, you can do that with Grunt-init. In fact, you can add multiple templates. Call the command and your desired template and the current folder in Terminal will be populated with the required files. Easy!

Node & NPM

nodejsI’m pretty sure that Node and NPM are the best thing since sliced bread. At least for local tools and smaller projects. I’m not going to judge on the actual performance on large-scale projects. I have been using Node for several years now, but only recently with all the cool and hip projects like Grunt JS has NPM really had an impact on me.

For those of you who don’t know: If you have a package.json file in a directory, you can just call npm install and NPM will install all necessary dependencies in the node_modules folder. This is great in combination with Grunt-init as it allows me to setup a template that requires a few files and get the latest versions of the modules upon every deploy of the template without having to actually update anything. It also adds to the portability of the project files. Really cool!

Grunt JS

grunt-logoSo now we circle back to Grunt JS. This is not the same as Grunt-init. Grunt-init is only the tool to deploy your template. Once deployed, install all dependencies you might need for doing cool stuff in Node using npm install. Once you’ve done that, you can now start a Grunt task. For example tell Grunt to watch any changes in a folder and depending on which changes happen, immediately build files, copy folders or build a project.

I built a setup that has a combination of all kinds of tools I frequently use. As it turns out a lot of people are doing that. There’s lot of great setups out there. The one I’ve done focusses on having no impact to your coding routine, while making sure any repetitive work get’s done the way you want it. It even comes with a basic server. This enables me to kickstart any kind of project in less than a minute. Perfect for all the tiny experiments and tests I run. I also added an FTP upload setup that asks for credentials on the first run and then saves them to a file. Nothing like ‘grunt deploy‘ and just watch Grunt work away while you hang back.

These are the actual front-end development tools that have a direct connection with the actual work I create these days. There so much other stuff out there, so I’m wondering: Which ones are you using and which ones do you think would be worth checking out for me?

Meanwhile, part 2 is coming up in a few days. This is more about actual software, like servers, text-editors and other stuff.

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 *