This…

“The complete JavaScript toolkit” Skillshare course is free this week!

Chris Heilmann smiling behind his laptop as the course is finished

This July Skillshare released my course called The Complete JavaScript Toolkit and you can access it by signing up for a 2 months trial of Skillshare.

I am happy to announce that for this week, this course is now completely free. You need still to sign up for a Skillshare login, but you don’t need a Credit Card and you don’t need to sign up for the two month trial period.

So what’s keeping you? check out the course here

As a reminder, here is what you will learn in the course:

The videos are the following. We deliberately kept them short. A huge benefit of this course is to discover your own best way of working whilst watching them. It is a “try things out while you watch” kind of scenario:

  • Introduction (01:46) – introducing you to the course, explaining what we will cover and who it is for.
  • JavaScript today (08:41) – JavaScript isn’t writing a few lines of code to make websites snazzier any longer. It became a huge platform for all kinds of development.
  • Uses for JavaScript (06:25) – a more detailed view on what JavaScript does these days. And how the different uses come with different best practices and tooling.
  • Finding JavaScript Zen (04:15) – how can you stay calm in this new JavaScript world where everything is “amazing”? How can you find out what makes sense to you and what is hype?
  • Evolved Development Environments (10:22) – all you need to write JavaScript is a text editor and all to run it a browser. But that’s also limiting you more than you think.
  • Benefits of Good Editors (12:34) – by using a good editor, people who know JavaScript can become much more effective. New users of JavaScript avoid making mistakes that aren’t helpful to their learning.
  • Version Control (09:15) – using version control means you write understandable code. And it has never been easier to use Git.
  • Debugging to Linting (06:01) – debugging has been the first thing to get right to make JavaScript a success. But why find out why something went wrong when you can avoid making the mistake?
  • Keeping Current in JavaScript (05:11) – JavaScript moves fast and it can be tricky to keep up with that is happening. It can also be a real time-sink to fall for things that sound amazing but have no life-span.
  • Finding the JavaScript Community (03:59) – it is great that you know how to write JavaScript. Becoming part of a community is a lot more rewarding though.
  • Asking for Help (05:47) – gone are the days of writing posts explaining what your coding problem is. By using interactive tools you can give and get help much faster.
  • Final Thoughts (01:11) – thanks for taking the course, how may we help you further?

I wrote this to make myself more content and happy in this demanding world, and I hope it helps you, too. Old-school developers will find things to try out and new developers should get a sensible way to enter the JavaScript world.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

This was FrontendNE 2018 – well, from my POV

Last week I swapped the 18 degress in Berlin with snowy rain in Newcastle, England. Why? To attend the 2018 edition of the FrontendNE conference and I am happy that I did.

The plane taking me back to Berlin

All in all this was a lovely, cozy and well-organised event. As an extra, it had an audience you don’t come across at a lot at other events. The reasons were threefold. A good location – the big hall of a brewery with proper stage audio equipment. A very affordable ticket price. And the loveliness of the organisers with a no-nonsense MC demeanour and not a hint of arrogance.

The crowd at the event

I like single-track events. It means the organisers have to work harder to ensure each slot is a winner for the audience. In this case, the line-up and topics were diverse and there was a lot to take away.

Val Head : Choose Your Animation Adventure

Val is a well-known authority on anything animation on the web. She has authored quite a few books and courses on the topic. And she teaches people to make things move without making your users queasy or drain the battery of their devices. In this talk she explained different techniques to animate on the web. Starting with CSS animations, past vanilla JS and up to animation libraries. This was a very pragmatic talk explaining the pros and cons of each technoloy with warts and all. Val is a very chipper and engaging speaker, and I am happy she thawed out the audience as the first to step up. Looking forward to the video.

Léonie Watson : You’re only supposed to blow the bloody doors off!

Leonie showing off screen readers

Leonie is an accessibility expert giving sensible and actionable advice on how to create accessible interfaces on the web without overshooting the mark. Yes, there is such a thing as adding too much to make your widgets accessible. Often adding a lot of ARIA also means it is your job to make it work with all kind of assistive technology. Something you can avoid by using the appropriate HTML elements and guiding the user. Hence Leonie’s talk, a nod to The Italian Job. Leonie is a superb presenter. It is great to see a visually impaired person wield stage technology and presentation software as if there is nothing much to it. I liked this talk as it fell neither into the “legal accessibility” nor the “everything works if you only use $thing” camps. Instead, Leonie showed that accessibility is like any other thing. It is a matter of looking into what you are doing and trying your best to make it work. Often this means doing less and the simple thing instead of trying to cater to needs you can’t even know about.

Jack Franklin : A red LEGO brick is always red: components on the web

Jack Franklin is a development lead at thread (the company partly responsible for my swanky style). He showed how they made it much easier to maintain and improve this product using a component approach. Web components are nothing new, of course. Making them work and perform in browsers natively is still trickly though. That’s why many component talks are about the framework du jour and opinionated. Jack did a great job not falling into this trap but showed the real benefits of components. For example hot-fixing a display issue with the certainty that you won’t affect the rest of the page. A great, no-nonsense talk about the subject, well worth a watch.

Niels Leenheer : Having fun with WebBluetooth

Oh how I rooted for this talk to work. Niels is a lovely person and oozes having fun playing with technology. That’s why it was grim to see this talk’s tech demos fail at the Halfstack conference in London earlier this year. Niels still managed to make it a good talk, but seeing him lug lots of hardware to an event just to see it all fail because of connectivity issues was grim. In essence, what Niels proves with this talk is that the specification of Bluetooth and Low-End Bluetooth is a terrible mess. And that with borderline self-flagellating reverse engineering you can do fun things with Web Bluetooth. It is a mess with a lack of standards and at times a total disregard for security. But Niels did a lovely job getting us excited anyways. Top tip though: do not fly back with him as airport security doesn’t like his suitcase full of Bluetooth marvels.

Sara Vieira : Your brain does not have a fix flag

Sara explaining that is hard to be normal

Sara’s talk was the big surprise. It wasn’t a tech talk, although she is highly capable of giving those, too. It was instead a no holes barred account of her life story dealing with and overcoming anxiety. A very important talk about a mental health issue that is tough to understand for people and hard to empathise with. I hope that the video of this will do the rounds and inspire people to care more and those affected to find the strength to find help.

Ian Feather : Frontend Resilience

I wished I had seen more of this talk, but I was bricking it as I was up next. Ian works for BuzzFeed and showed the many ways they ensure the site stays up even when everything is against you. Instead of having a “this is how to make your site performant and everything will be rosy” Ian talked shop. CDNs not working like you expect them, data feeds timing out, the whole horror show of network connectivity. I’m looking forward to seeing this.

Chris Heilmann : 7 things you can do to become a happier JavaScript developer

Hated it. Knew all the content. Boring. Also, what’s with that accent?

General conference feedback

Everything worked nicely and people were very well fed and watered. Actually there was a lot of yummy food left over, which was a shame. The timing worked out, the breaks were well-timed. The location was gorgeous with a lovely park outside full of dogs and swans and their interplay.

The after-party was at a location that had pool billiards, minigolf, bowling and many other things. The food was plenty, two vouchers for drinks ensured that people got merry and charming and not annoying. I only used the bowling lane as I had a lot of people come up to me and ask me questions. I heard from witnesses that parts of the sounds in the karaoke room violated the Geneva convention but that may have been hearsay (or what’s left of the hearing).

The self-demeaning jokes of the organisers on stage, “turns out using sketch for print wasn’t the best idea, just imagine those missing letters” showed that this event was a labour of love and not a way to make money. I like when an event outside the usual spaces for events works out that well. I have the same fondness for Beyond Tellerand, as Duesseldorf isn’t a hub of web news either. I am very happy to have contributed to this event in Newcastle and hope that more will come soon.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Power Surge – optimize the JavaScript in this HTML5 game using Firefox Developer Edition

Power Surge!

The Firefox Developer Tools team wanted to find a fun way to show off the great performance tools we’ve just added to the Firefox Developer Edition browser. We partnered with Przemys?aw Sikorski (aka rezoner) author of Playground.js and the arcade puzzle game QbQbQb, to create “Power Surge,” a fun game which shows off how the new Performance tools can help developers find slow JavaScript code. The special twist is that the more you optimize the code in the game, the more ships and powers you win in gameplay!

First off, check out this quick screencast from Mozilla engineer Harald Kirschner on how Power Surge works:

To get going with Power Surge:

We’d really like to hear back from you about Power Surge! Tweet to us at @FirefoxDevtools and @mozhacks to share your solutions.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

This developer wanted to create a language selector and asked for help on Twitter. You won’t believe what happened next!

Hey, it works for Upworthy, right?

Yesterday in a weak moment Dhananjay Garg asked me on Twitter to help him with a coding issue and I had some time to do that. Here’s a quick write-up of what I created and why.

Dhananjay had posted his problem on StackOverflow and promptly got an answer that wasn’t really solving or explaining the issue, but at least linked to W3Schools to make matters worse (no, I am not bitter about the success of either resource).

The problem was solved, yes (assignment instead of comparison – = instead of === ) but the code was still far from efficient or easily maintainable which was something he asked about.

The thing Dhananjay wanted to achieve was to have a language selector for a web site that would redirect to documents in different languages and store the currently selected one in localStorage to redirect automatically on subsequent visits. The example posted has lots and lots of repetition in it:

function english()
{
if(typeof(Storage)!=="undefined")
  {
  localStorage.clear();
  localStorage.language="English";
 window.location.reload();
  }
}
 
function french()
{
if(typeof(Storage)!=="undefined")
  {
  localStorage.clear();
  localStorage.language="French";
  window.location.href = "french.html";
  }
}
window.onload = function() {
if (localStorage.language === "Language")
  {
   window.location.href = "language.html";
  }
else if (localStorage.language === "English")
  {
   window.location.href = "eng.html";
  }
else if (localStorage.language === "French")
  {
  window.location.href = "french.html";
  }
else if (localStorage.language === "Spanish")
  {
  window.location.href = "spanish.html";
  }

This would be done for 12 languages, meaning you’ll have 12 functions all doing the same with different values assigned to the same property. That’s the first issue here, we have parameters on functions to avoid this. Instead of having a function for each language, you write a generic one:

function setLanguage(language, url) {
	localStorage.clear();
 	localStorage.language = language;
 	window.location.href = url;
 }
}

Then you could call for example setLanguage(‘French’, ‘french.html’) to set the language to French and do a redirect. However, it seems dangerous to clear the whole of localStorage every time when you simply redefine one of its properties.

The onload handler reading from localStorage and redirecting accordingly is again riddled with repetition. The main issue I see here is that both the language values and the URLs to redirect to are hard-coded and a repetition of what has been defined in the functions setting the respective languages. This would make it easy to make a mistake as you repeat values.

A proposed solution

Assuming we really want to do this in JavaScript (I’d probably do a .htaccess re-write on a GET parameter and use a cookie) here’s the solution I came up with.

First of all, text links to set a language seem odd as a choice and do take up a lot of space. This is why I decided to go with a select box instead. As our functionality is dependent on JavaScript to work, I do not create any static HTML at all but just use a placeholder form in the document to add our language selector to:

<form id="languageselect"></form>

Instead of repeating the same information in the part of setting the language and reading out which one has been set onload, I store the information in one singular object:

var locales = {
    'us': {label: 'English',location:'english.html'},
    'de': {label: 'German',location: 'german.html'},
    'fr': {label: 'Français',location: 'french.html'},
    'nl': {label: 'Nederlands',location: 'dutch.html'}       
};

I also create locale strings instead of using the name of the language as the condition. This makes it much easier to later on change the label of the language.

This is generally always a good plan. If you find yourself doing lots of “if – else if” in your code use an object instead. That way to get to the information all you need to do is test if the property exists in your object. In this case:

if (locales['de']) { // or locales.de - the bracket allows for spaces
	console.log(locales.de.label) // -> "German"
}

The rest is then all about using that data to populate the select box options and to create an accessible form. I explained in the comments what is going on:

// let's not leave globals
(function(){
  // when the browser knows about local storage…
  if ('localStorage' in window) {
    // Define a single object to hold all the locale 
    // information - notice that it is a good idea 
    // to go for a language code as the key instead of
    // the text that is displayed to allow for spaces
    // and all kind of special characters
    var locales = {
        'us': {label: 'English',location:'english.html'},
        'de': {label: 'German',location: 'german.html'},
        'fr': {label: 'Français',location: 'french.html'},
        'nl': {label: 'Nederlands',location: 'dutch.html'}       
    };
    // get the current locale. If nothing is stored in 
    // localStorage, preset it to 'en'
    var currentlocale = window.localStorage.locale || 'en';
    // Grab the form element
    var selectorContainer = document.querySelector('#languageselect');
    // Add a label for the select box - this is important 
    // for accessibility
    selectorContainer.innerHTML = '<label for="languageselectdd">'+
                                  'Select Language</label>';
    // Create a select box 
    var selector = document.createElement('select');
    selector.name = 'language';
    selector.id = 'languageselectdd';
    var html = '';
    // Loop over all the locales and put the right data into 
    // the options. If the locale matches the current one,
    // add a selected attribute to the option
    for (var i in locales) {
      var selected = (i === currentlocale) ? 'selected' : '';
        html += '<option value="'+i+'" '+selected+'>'+
                 locales[i].label+'</option>';
    }
    // Set the options of the select box and add it to the
    // form
    selector.innerHTML = html;
    selectorContainer.appendChild(selector);
    // Finish the form HTML with a submit button
    selectorContainer.innerHTML += '<input type="submit" value="go">';
    // When the form gets submitted…
    selectorContainer.addEventListener('submit', function(ev) {
      // grab the currently selected option's value
      var currentlocale = this.querySelector('select').value;
      // Store it in local storage as 'locale'
      window.localStorage.locale = currentlocale;
      // …and redirect to the document defined in the locale object
      alert('Redirect to: '+locales[currentlocale].location);
      //window.location = locales[currentlocale].location;
      // don't send the form
      ev.preventDefault();
    }, false);
  }
})();

Surely there are different ways to achieve the same, but the important part here is that an object is a great way to store information like this and simplify the whole process. If you want to add a language now, all you need to do is to modify the locales object. Everything is maintained in one place.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)