What are You Going to Learn This Month in Front-end Development?

Louis Lazaris

In March, I wrote an article on the abundance of tools and technologies in the industry today, and how overwhelming it can feel. The article resonated nicely with many in the industry.

Many agreed that although we are ‘drowning’ in tools, and it can be intimidating, the best approach is to focus on the tools and technologies that are going to help us become more productive and solve problems.

So I thought it would be cool to open up the discussion and ask everyone: What are you going to learn next?

Is it a new language? A new CSS framework? A grid system? Maybe you haven’t touched Sass yet (shame on you! :). Maybe you want to become more familiar with a back-end technology, to complement your front-end stack. Or maybe it’s a new JavaScript library or framework. Whatever it is, I’d like to hear about it.

But I’ll go first.

What I’ve Neglected

Here’s a short list of some stuff I’ve been meaning to enhance my understanding of (or get started with!) and that I’ve simply procrastinated for far too long:

SVG

SVG is huge and it’s here to stay. It has great browser support, and can be polyfilled or you can declare some kind of fallback or conditional. A great starting point is Chris Coyier’s recent SVG roundup. There’s also SitePoint author Joni Trythall’s upcoming SVG book (if you haven’t noticed yet, Joni is becoming to SVG what Hugo is to Sass).

In addition to the tons of articles and tutorials on the subject, there are a number of SVG-related tools worth looking into, many of which I’ve listed in my newsletter.

WAI-ARIA and Accessibility

It’s good to see WAI-ARIA is finally getting the attention it deserves. We’re no longer wasting our time debating pointless HTML semantics but we’re doing our best to add practical semantic value to our documents. WAI-ARIA can do that.

While I personally have some basic WAI-ARIA knowledge, I’m still guilty of not delving deeply enough into this subject. If you have WAI-ARIA on your hit list, you might want to start with The Accessibility Project website or MDN’s ARIA resource page. There’s also Stephan Max’s introduction to ARIA published recently on SitePoint.

As a related study, there’s the HTML5 Accessibility website, which provides info on which new HTML5 features have accessibility support in the different browsers.

Above-the-fold CSS and the Critical Rendering Path

This is another one I’d like to delve into more deeply. Basically, the idea is that we automate our sites to ‘inline’ our CSS rules that apply to above-the-fold content (theoretically going against what we’ve been taught for years).

Ben Edwards wrote up a discussion on the topic over at CSS-Tricks and my first introduction to the concept was this great post by Aqeel, who has followed up with a related grunt task.

As a starting point, if you want to see whether your website or app could benefit from this technique, you might want to run the filmstrip test on WebPagetest.org.

Of course, the critical rendering path isn’t only about CSS, so there’s lots to learn in that area.

AngularJS / Backbone.js / Ember.js

I’m really late to the game on this one.

There are many other competitors in the JavaScript MVC dogfight, but AngularJS, Backbone.js, and Ember.js seem to be the top three.

I’d like to look more into using one of these, but haven’t had the practical opportunity or the necessity. If I had to choose one today, I’d probably go with Angular, as it seems to be the favourite, although the learning curve is apparently steeper compared to similar frameworks.

I long for the days when simple unobtrusive JavaScript was the primary best practice we had to concerned about! But those days are gone and it seems that any kind of serious app development should involve one of these frameworks or, at the very least, a similar methodology.

If you’re looking to get started with one of these, you might want to check out this Angular course or this beginner’s guide to Backbone.js, both on SitePoint’s sister site, Learnable.

What About You?

Those are four specific areas I’m still looking into or would like to branch further into soon. What are you looking to learn?

And don’t be shy about commenting on simpler stuff — we’re all at different levels. Some developers would consider my list pretty basic!

So let us know in the comments: What are you going to learn this month?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://kbrec85.com/ Kyle Breckenridge

    I’m also very interested in the above the fold css stuff. Been following everything The Filament Group has been doing and it looks really interesting. I’m also planning on spending more time learning better way to handle font loading as some projects are going over 100k in fonts alone.

  • http://viii.in Vinay Raghu

    Trying to enhance my learning on web components and how frameworks in the future will be utilizing the power of web components.

  • android apk

    Hello Admin Please Tell Me How to Fix this. Google Ad Service is Disable on My Blog. Reason is

    MODIFIED ADS: Publishers are not permitted to alter the behavior of Google ads in any way. This includes resizing ad frames to cut off parts of ads or hiding the Ads by Google moniker.

  • http://www.spectrakey.co.uk/web James Warren

    I’ve been learning AngularJS over the last couple of months and I must say I have found it a very rewarding and powerful framework.

  • http://timseverien.nl/ Tim Severien

    Right… here we go:
    SVG, WAI-ARIA, AngularJS, Components, ECMAScript 6, WebGL (without any libs), C++, some general knowledge about design patterns and (slightly embarrassed) Git.

  • M S

    “I long for the days when simple unobtrusive JavaScript was the best
    practice! But those days are gone”

    So now obtrusive JavaScript is the best practice?
    Please do explain how and why and when that happened.

    • LouisLazaris

      What I meant was that it’s no longer the extent of our JS development. It’s still “best practice” but in a much more advanced form (templating engines, MVC libs, etc).

      I think I should have worded that differently, but I just meant it was no longer the only thing we had to worry about. :)

      • M S

        Yeah, maybe you should word it so it doesn’t say the exact opposite of what you mean.

        There are plenty of people in the business who cant think properly for themselves, read texts like this, and suddenly you start coming up against arguments like:
        “unobtrusive JavaScript? LOL yo fool, haven’t you heard NOBODY uses that anymore! I red it om the internets.”

        • LouisLazaris

          I updated the wording to say what I intended.

          My focus in that sentence was on the word ‘simple’, the fact that ‘simple’ unobtrusive JS was all we were concerned with (e.g. don’t use inline onclick handlers). But now it’s so much more than that, and that’s what I was trying to express. Of course, you’re taking my sentence completely out of its context. The next sentence completes the thought.

          Anyhow, thanks for the feedback.

  • Greg

    Some sort of BEM / OOCSS, even with SASS team projects get out of hand with CSS completely unmaintainable. Maybe next Game Development with Canvas, always been a dream of mine.

  • moorealastair

    Symfony at the moment. As a Drupal developer, I need to get on board with Symfony development for the changes that we’re going to see in Drupal 8. And improving the way I structure my CSS (in Sass).

  • binarytheme

    Great Post

  • ajaykarwal

    I’ve just recently started using SASS (had some exposure to LESS previously) and I’m already seeing the power of it. Defo want to experiment more.

    Other than that…
    Angular
    Git
    HTML5 Canvas
    API’s in general (prob start with Twitter)

  • Bnny

    People seem to running around to different libraries and frameworks. Most of them never parked and still wondering if they suited well. Believe me, there is nothing better than just keep it as it was.. plain JS and PHP for example. But for JS you can use MVC pattern and PHP OOP. Write your own libraries what works great for you and with enough logic for others to understand. Libraries like lazy-load, Infinity-scrolling, Responsive etc. and still clean code and much faster than any “stunning” (ugh) framework.

    For me, I’m focusing on mobile web applications. 80% uses mobile/tablet for normal website visiting.
    2d and 3d depth mobile navigation in web. Just my own JavaScript. There is no framework or library that will do it for me.. lol.