Monday, January 27, 2014

Front-End Development: 5 Things You Should Definitely Learn in 2014

Front-End Development: 5 Things You Should Definitely Learn in 2014

A post by Joseph Howard@

We all know at what a rapid pace the world of web design and development moves. As designers and developers we are set with similar tasks of continually learning and improving to ensure we’re up to date with the latest trends, projects and practices in our continual attempt to stay relevant in such a fast-paced industry.
For front-end developers, improving on existing skills and taking on new best practices, new languages, implementation techniques and deployment are integral. However it’s very easy to fall behind, often through becoming complacent or overly protective of the workflow you’ve become so accustomed to using over the years. There’s nothing wrong with this kind of “If it aint broken, don’t fix it” attitude, however it comes at a risk – one of becoming obsolete, very quickly.
Today, the web is such a vibrant environment full of media, applications and interactivity. Sure, a simple HTML/CSS setup has worked for a long time, and will continue to do so– however we are now seeing a seemingly endless stream of innovative development and deployment projects released everyday.
Some of these are useful and develop a strong community and support network. However they almost always take a significant amount of time to become widely accepted as a recognised development practice.
One way of ensuring you’re at the forefront of the latest web development know-how is to make an active list of things you need to improve on or learn, and commit a structured time management road-map to improvement.
If you haven’t already – here are some useful things you should consider learning in 2014:

Learn and Start Using SASS

You’ve almost definitely heard of SASS right? However (like a lot of people) you may be reluctant to give it a try. Let me put it this way, every developer who currently uses SASS has gone through the exact same notion you’re going through. After years of religiously following your own workflow and structuring CSS files just the way you like them – why should you change? Well, there’s heaps of reasons, all the buzz around SASS wouldn’t be for nothing right? If so many people are using it, there must be something good about it right? Exactly and there’s a lot of things – once you start using it, you’ll wonder why you didn’t earlier. Here’s a few useful links to get started:
Why SASS? – A List Apart.

Learn Grunt

Maybe you’ve heard of Grunt. The name sounds kind of weird I know, but Grunt is a fantastic tool and workflow for designers and front-end developers. It runs on JavaScript and does a whole bunch of tasks for you like compiling and minifying CSS and JavaScript as well as compiling CSS from SASS. But that’s not even the start of it, Grunt can do all sorts of things  (too many to list here). It’s totally customisable and works how and when you want it to work. It says it’s a task runner – but really it’s more than that, it’s a project workflow. To get started with Grunt take a look at these two links below:
First Moments With Grunt (screen cast video) – CSS Tricks.

Learn SVG

You’ve probably heard all the buzz on SVG over the past few months. The truth is, SVG has been around for quite a while, but don’t ask me why it’s only taking off now. Anyway, when combined with CSS and JavaScript, SVG can produce some interesting effects and will no doubt evolve through increased interest throughout 2014. To get started, take a look at these articles:
Getting Started with SVG - Webdesign Tuts+.

Learn CSS Animation

Again, another feature that’s been around for a while. Traditionally most browser animation has been handled via jQuery, however CSS animations are becoming highly mediated lately. The debate continues as to which way of handling animations is the best, however ultimately the choice is up to you. Personally, I find CSS animations and keyframing pretty easy to use and relatively logical in general. Here are some useful links for getting started.
Intro to CSS Animations – CSS Tricks (Screen Cast)
Transitions & Animations - A Beginner’s Guide to HTML & CSS
CSS Keyframe Syntax - CSS Tricks.
Animate.CSS - A useful list of pre-made CSS animations and effects.

Learn Custom Parallax

Some would say the parallax effect has already come and gone, which is probably partly true. However it’s starting to be used in some more subtle ways which can help put the finishing touches on any project. That being said, there are a lot of plugins available for parallax effects, however if you really want to master it, you should really learn create your own custom effect. Here’s some more info:

What front-end development stuff are you using at the moment? Is anything notable you would recommend? Let us know in the comments.

About The Author

Joseph Howard
Hi I'm Joseph Howard. I'm a web-designer and digital media professional and I'm the creator of PencilScoop. You can get in touch with me through your preferred social media account.