By Louis Lazaris

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

By 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 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

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?

  • 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.

  • Scott Engert

    I plan on learning how to use Angularjs as well. I also plan on learning how to use SASS to create more efficient and faster code.

  • 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.

  • Marcin

    angularjs + Polymer, the new player on WD

  • 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.

  • Iqtidar Ali

    Next: Angular JS !!!

  • shruts

    Probably CORS the “cross domain” thing the OPTIONS method, I just couldn’t get with the error, No ‘Access-Control-Allow-Origin’ header is present on the requested resource’ even after adding header , while accessing data from an api. Would like to know how to send data using HMAC (sha256) to third party api, with simple login form and get method data retrieval.

  • Benjaminos

    I quickly learned the basics of RESTful angular development and I’ve noticed that in an attempt to simplify matters they are teaching you bad habits and slowly correcting them I fear this could lead to longer development than is needed. My advise is do as many courses as you can to get a rounded view on angular. Still love that instant response io example. I’m currently learning angular bootstrap and less or sass haven’t yet settled on one leaning towards sass. Oh and larval, also very cool and an easier learning curve than angular.

  • 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.

  • Here’s my Roundup:

    Adobe Brackets editor – I use SublimeText religiously. I tried Github’s Atom, but I couldn’t be convinced. Brackets, however, impressed me right from the start. Really fantastic features for frontend dev.

    Google Polymer – Once you go web components, there is no turning back – and Polymer makes them so much more pleasant to work it. I was able to prototype an app and plug it right into a backend using Polymer with more ease than any other frontend framework I’ve ever used. I have been on the Angular train for a while, and after using Polymer, I haven’t really needed to use Angular.

    Twitter Flight – Just started hacking at it today, but I have faith in Twitter because Bootstrap was such a game-changer for its time IMO

    Web workers – we need these guys to do our heavy lifting in the background so our UI doesn’t get bogged down. I haven’t been using them but I think they are going to be super important as UI animations get more and more complex.

    Pure-javascript HD video streaming & encoding/decoding – Flash is basically dead, thank god, but I want to dance on its grave. Looking into ffmpeg and things people have made with it.

    And oh, webGL…. this little monster has been taunting me for a while now, “when are you going to learn me, stupid?”

    There is so much more – is anybody else feeling the pace of web development approaching infinity?

  • 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.

  • Brad

    BEM.. and how much I absolutely detest it. I find BEM takes 10x longer than good old fashioned (cascading!) style sheets as I spend more time worrying about my bem syntax than actually styling. I can get on board with nearly any idea or design pattern but so far I have yet to see the advantage of BEM in CSS

  • 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…
    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.

Get the latest in Front-end, once a week, for free.