Every year each new proposal to ECMAScript which reaches 

 will be added to the standard.
Stage 4 basically means, that the specification text is written down and has at least two major implementations (or browsers in this case).

In the new standard, two new features have been added.

, if you want to know if a certain value is in an 

> [ 1, 2, 3, 4].includes(3)
true
> [ 1, 2, 3, 4].includes(0)
false

This makes constructs like the following a bit more readable:

if (myArray.indexOf(5) > -1) {
  // has 5
}
// or
if (myArray.indexOf(5) !== -1) {
  // has 5
}

> [ NaN ].indexOf(NaN)
-1
> [ NaN ].includes(NaN)
true

Exponentiation is commonly used in mathematics and physics and can now be expressed with the operator 

 in ECMAScript 2016. Very similar to Pythons 

Additionally we can use the assignment form too, similar to 

> 2 * 2 ** 3
16
> 2 * (2 ** 3)
16
> (2 * 2) ** 3
64

Currently, negative number literals cannot be the base of the exponentiation and will throw a syntax error.

> -5 ** 2
Uncaught SyntaxError: Unexpected token **

With ECMAScript 2016 finalized, there has already been progress on ECMAScript 2017 and several futures have already been finalized:

 both will aid you in iterating over object properties.

 will give you own enumerable object values.
Example:

> Object.values({ keyA: 'a', keyB: 'b', keyC: 'c' })
[ 'a', 'b', 'c' ]

let obj = { keyA: 'a', keyB: 'b', keyC: 'c' }
for (let value of Object.values(obj)) {
  console.log(value)
}
// logs 'a', 'b' and 'c'

> Object.entries({ keyA: 'a', keyB: 'b', keyC: 'c' })
[ [ 'keyA', 'a' ], [ 'keyB', 'b' ], [ 'keyC', 'c' ] ]

This may look rather weird but makes it very easy to iterate over an object with key and value using destructuring like this:

let obj = { keyA: 'a', keyB: 'b', keyC: 'c' }
for (let [ key, value ] of Object.entries(obj)) {
  console.log(key, value)
}
// logs 'keyA a', 'keyB b' and 'keyC c'

A very common problem is string padding, especially in command line interfaces and number formating. ECMAScript 2017 will provide two new 

 because it will recognize left-to-right and right-to-left languages and pad the string accordingly.

> '1'.padStart(5)
"    1"
> '1'.padStart(5, '0')
"00005"
> '1'.padEnd(5)
"1    "
> '1'.padEnd(5, '0')
"50000"

 will get all property descriptors of an object, very similar to 

 which gets a single property descriptor. This means, we can get all property 

 of an object and can copy these over to another object (you wouldn't be able to "get" a getter or setter property using the dot or bracket notation).

Example of making a shallow copy of an object:

let objectCopy = Object.create(
  Object.getPrototypeOf(object),
  Object.getOwnPropertyDescriptors(object)
)

That's it for now, I hope you are as excited as me about all the new ECMAScript features which make the language better and more powerful every year! :)

ECMAScript 2016 Approved

I'm using NGINX as a reverse-proxy for FastBoot and to serve the Ember.js application assets.

Rendering your Ember.js application server-side gives you two major benefits. It is now crawlable by any search engine and the page load time should feel much faster, as browsers can render your content before all the JavaScript is downloaded and executed.

Here are the essential parts of my setup for 

# Define the FastBoot server, in my example,
# FastBoot is running on port 8000
upstream fastboot.topaxi.ch {
    server 127.0.0.1:8000;
}

# Define the HTTP server for topaxi.ch
server {
  listen 80;
  server_name topaxi.ch;

  # Define 404 page for undefined Ember FastBoot routes.
  error_page 404 /404.html;

  # Define proxy settings to FastBoot
  location @fastboot {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;

      proxy_pass http://fastboot.topaxi.ch;
      proxy_redirect off;
  }

  # Try-files before proxying to FastBoot,
  # fallback to our defined 404 page,
  # if FastBoot returns a 404 error.
  location / {
    root /path/to/emberapp/dist;
    try_files $uri $uri/ @fastboot =404;
  }

  # Optional, add some aggressive caching headers for fingerprinted assets
  location ~* "^/assets/.*-([a-z0-9]{32})\.(?:css|js|gif|png|jpe?g)$" {
    root /path/to/emberapp/dist;
    expires max;
    add_header Cache-Control public;
    access_log off;
    try_files $uri =404;
  }
}

Now all we need is to setup and run FastBoot.

$ cd /path/to/emberapp
$ ember install ember-cli-fastboot
$ ember fastboot --port=8000 --prod

Your Ember.js application should now be rendered server-side by FastBoot and served by NGINX.

Configure NGINX for FastBoot

 landing in Google Chrome. I was using them before in some Firefox only projects and with support from Google Chrome, I'm sure I will be using them even more as there are a lot of customers who are fine with Firefox + Chrome only browser support for company internal applications.

In this post, I won't go into deep detail why custom properties are awesome and very powerful. If you never heard of custom properties or css variables before, I highly recommend reading 

Philipp Waltons post about CSS Custom Properties

. Besides the powerful feature like cascading the properties, custom properties also enables us to specify some kind of "public API" for our CSS components.

 there are easy ways to bind a component property to a element attribute or element class, but no easy way to bind to a custom CSS property. One possibility is to bind the 

 attribute, but as more properties get involved the component gets bigger and more complicated. This is where my Ember.js addon 

 comes in handy, it allows you to bind custom CSS properties just like attributes or classes.

Lets build a small progress-bar component using 

$ ember new example-app
$ ember install ember-custom-css-properties
$ ember generate component progress-bar

import Component from 'ember-component'

export default Component.extend({
  classNames: [ 'progress-bar' ],
  cssPropertyBindings: [ 'progress' ]
})

This is all we need, when we assign something to the 

 property on our component, it will be available as 

.progress-bar {
  border: 1px solid black;
  height: 24px;
}

.progress-bar::before {
  content: '';
  display: block;
  background: black;
  height: 100%;
  /* Multiply by 1% to cast to a percentage value, this way,
   * we only have to provide a numeric value for `--progress`. */
  width: calc(var(--progress, 0) * 1%);
}

And done! We now have a very simple progress-bar, which accepts a numeric 

 property and displays the current progress.

 will wrap any JavaScript number, CSS numeric value, the string 

 as they can't introduce any CSS XSS vulnerabilities.

 property to the progress-bar component, similar to how the 

I think there are many use-cases and possibilities with this addon from quite static components like my example to complex animated components. I'm really curious what you can build with this! :)

Using CSS Custom Properties With Ember.js

 projects, I've began to use the new upcoming JavaScript async functions. While they are not yet officially included in the standard, they were recently moved to a "Stage 3" proposal on the 

, this means they are ready to be implemented by browser vendors and can be somewhat safely used with transpilers like 

To see the exact meaning of the different stages, see the 

Include the polyfill, as async functions need 

var EmberApp = require('ember-cli/lib/broccoli/ember-app')

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    babel: {
      includePolyfill: true
    },
    // You might want to disable jshint as it does
    // not support async/await yet.
    hinting: false
  })

  return app.toTree()
}

Nothing more is required as Babel enables any JavaScript features that are 

For our example app, we're going to implement a simple login with an acceptance test. The login logic will be handled by 

 which is compatible with Ember.js 2.0 and above.

Before we do anything, we have to write an initializer, which sets the global 

. This change guaranties that async code runs with the Ember run-loop in mind.

import Ember from 'ember'

export function initialize() {
  window.Promise = Ember.RSVP.Promise
}

export default {
  name: 'promise',
  initialize
}

$ ember install simplabs/ember-simple-auth
$ ember generate acceptance-test login

Imagine a login acceptance that looks like this in plain 

import Ember from 'ember'
import $ from 'jquery'
import { module, test } from 'qunit'
import startApp from 'await-test/tests/helpers/start-app'
import { authenticateSession } from 'await-test/tests/helpers/ember-simple-auth'

module('Acceptance | Login', {
  beforeEach() {
    this.application = startApp()
  },
  afterEach() {
    Ember.run(() => this.application.destroy())
  }
})

test('visiting /protected redirects to /login', assert => {
  assert.expect(1)

  visit('/protected')

  andThen(() => {
    assert.equal(currentURL(), '/login')
  })
})

test('visiting /login works', assert => {
  assert.expect(1)

  visit('/login')

  andThen(() => {
    assert.equal(currentURL(), '/login')
  })
})

test('login fails for invalid user', assert => {
  assert.expect(2)

  visit('/login')

  andThen(() => {
    fillIn('input[type=text]',     'topaxi')
    fillIn('input[type=password]', 'notmypassword')
    click('button[type=submit]')
  })

  andThen(() => {
    assert.equal(currentURL(), '/login')
    assert.equal($('.error-message').text(), 'Invalid credentials!')
  })
})

test('login works for valid user', assert => {
  assert.expect(2)

  visit('/login')

  andThen(() => {
    fillIn('input[type=text]',     'topaxi')
    fillIn('input[type=password]', '123456')
    click('button[type=submit]')
  })

  andThen(() => {
    assert.equal(currentURL(), '/')
    assert.equal($('.logged-in-user').text(), 'topaxi')
  })
})

test('a protected route is accessible when the session is authenticated', assert => {
  assert.expect(1)

  authenticateSession(this.application)
  visit('/protected')

  andThen(() => {
    assert.equal(currentRouteName(), 'protected.index')
  })
})

With ES7 async functions, we can get rid of all these 

 function calls which wait for all unresolved Promises (this is one of the reasons we had to replace the global 

import Ember from 'ember'
import $ from 'jquery'
import { module, test } from 'qunit'
import startApp from 'await-test/tests/helpers/start-app'
import { authenticateSession } from 'await-test/tests/helpers/ember-simple-auth'

module('Acceptance | Login', {
  beforeEach() {
    this.application = startApp()
  },
  afterEach() {
    Ember.run(() => this.application.destroy())
  }
})

test('visiting /protected redirects to /login', async assert => {
  assert.expect(1)
  await visit('/protected')
  assert.equal(currentURL(), '/login')
})

test('visiting /login works', async assert => {
  assert.expect(1)
  await visit('/login')
  assert.equal(currentURL(), '/login')
})

test('login fails for invalid user', async assert => {
  assert.expect(2)

  await visit('/login')
  fillIn('input[type=text]',     'topaxi')
  fillIn('input[type=password]', 'notmypassword')
  await click('button[type=submit]')

  assert.equal(currentURL(), '/login')
  assert.equal($('.error-message').text(), 'Invalid credentials!')
})

test('login works for valid user', async assert => {
  assert.expect(2)

  await visit('/login')
  fillIn('input[type=text]',     'topaxi')
  fillIn('input[type=password]', '123456')
  await click('button[type=submit]')

  assert.equal(currentURL(), '/')
  assert.equal($('.logged-in-user').text(), 'topaxi')
})

test('a protected route is accessible when the session is authenticated', async function(assert) {
  assert.expect(1)

  authenticateSession(this.application)
  await visit('/protected')

  assert.equal(currentRouteName(), 'protected.index')
})

Now on to implementing the whole login process.

The authenticator is responsible for to login an user and restore or invalidate the session.

import Ember from 'ember'
//import ajax from 'ember-ajax'
import BaseAuthenticator from 'ember-simple-auth/authenticators/base'

export default BaseAuthenticator.extend({
  async authenticate(credentials) {
    // Example API call to login which would return a session token
    // in a JSON object.
    //let { token } = await ajax('/api/v1/login', credentials)
    let { token } = await mockAuth(credentials)

    return { token, username: credentials.identification }
  },
  async restore(properties) {
    if (isEmpty(properties.token)) {
      throw new Error('No token to restore found')
    }

    return properties
  },
  invalidate() {
    // Example API call to logout
    //return ajax('/api/v1/logout')
    return true
  }
})

 method does not need to await anything, the ember-simple-auth API expects a rejected promise, throwing in an async function rejects the returned promise of 

 function here is only intended for our example and fakes an actual login attempt.
I've implemented it like this:

function mockAuth({ identification: user, password: pass }) {
  return new Promise((resolve, reject) => {
    if (user === 'topaxi' && pass === '123456') {
      resolve({ token: 'some random session token' })
    }
    else {
      reject(new Error('Invalid credentials!'))
    }
  })
}

Setup the router with all routes we're going to use for this example:

import Ember from 'ember'
import config from './config/environment'

const Router = Ember.Router.extend({
  location: config.locationType
})

Router.map(function() {
  this.route('login')
  this.route('protected', function() {
    // Put any route which needs authentication here or make sure
    // to extend the protected route.
    //this.route('user', { resetNamespace: true })
  })
})

export default Router

 action to the application controller, we may need to add logout links on any page so this is a good place to implement his.

import Ember from 'ember'
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin'

export default Ember.Route.extend(ApplicationRouteMixin, {
  actions: {
    invalidateSession() {
      this.get('session').invalidate()
    }
  }
})

Add some indication to the application route when we're logged in:

<h2 id="title">Welcome to Ember</h2>

{{#if session.isAuthenticated}}
  <div class="logged-in">
    Currently logged in as: <span class="logged-in-user">{{session.session.content.authenticated.username}}</span>
    <br>
    <a {{action 'invalidateSession'}}>Logout</a>
  </div>
{{else}}
  <nav>
    {{#link-to 'login'}}Login{{/link-to}}
  </nav>
{{/if}}

{{outlet}}

 in our template, we need to inject the ember-simple-auth session service into our application controller:

import Ember from 'ember'

export default Ember.Controller.extend({
  session: Ember.inject.service()
})

Implement the route, controller and template for our login.

import Ember from 'ember'
import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin'

export default Ember.Route.extend(UnauthenticatedRouteMixin, {
  session: Ember.inject.service(),

  afterModel() {
    if (this.get('session.isAuthenticated')) {
      this.replaceWith('/')
    }
  }
})

import Ember from 'ember'

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  actions: {
    async authenticate() {
      this.set('loading', true)
      this.set('errorMessage', null)

      try {
        let credentials = this.getProperties('identification', 'password')

        await this.get('session').authenticate('authenticator:custom', credentials)
      }
      catch (e) {
        this.set('errorMessage', e.message)
      }
      finally {
        this.set('loading', false)
      }
    }
  }
})

<form class="form-inline {{if loading 'form-loading'}}" {{action 'authenticate' on='submit'}}>
  <div class="form-group login-form-user">
    {{input type="text" value=identification class="form-control" placeholder="Username" disabled=loading autofocus=true}}
  </div>
  <div class="form-group login-form-password">
    {{input type="password" value=password class="form-control" placeholder="Password" disabled=loading}}
  </div>
  <button type="submit" class="btn btn-primary" disabled={{loading}}>
    {{#if loading}}Logging in...{{else}}Login{{/if}}
  </button>
  {{#if errorMessage}}
    <p class="error-message">{{errorMessage}}</p>
  {{/if}}
</form>

 to indicate which route needs authentication.

import Ember from 'ember'
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'

export default Ember.Route.extend(AuthenticatedRouteMixin)

Now we're all set, lets run the acceptance test to check if everything is working as expected:

$ ember test
version: 1.13.8
Built project successfully. Stored in "/home/topaxi/await-test/tmp/class-tests_dist-hJ8RCDwV.tmp".
ok 1 PhantomJS 1.9 - Acceptance | Login: visiting /protected redirects to /login
ok 2 PhantomJS 1.9 - Acceptance | Login: visiting /login works
ok 3 PhantomJS 1.9 - Acceptance | Login: login fails for invalid user
ok 4 PhantomJS 1.9 - Acceptance | Login: login works for valid user
ok 5 PhantomJS 1.9 - Acceptance | Login: a protected route is accessible when the session is authenticated

1..5
# tests 5
# pass  5
# fail  0

# ok

This covered our login process, what's still missing is authorization for our potential API endpoints. This might be implemented like this, but won't be covered fully in this blog post.

import BaseAuthorizer from 'ember-simple-auth/authorizers/base'

export default BaseAuthorizer.extend({
  authorize({ token }, setRequestHeader) {
    if (token) {
      setRequestHeader('Authorization', `Bearer ${token}`)
    }
  }
})

Now that you've learnt to build an authentication with the latest ember-simple-auth module and ES7 async functions, go build something awesome! :)

Using ES7 Async Functions In Ember

I get asked a lot what all the changes from HTML4 to HTML5 were, in this blog post,
we're going through most changes and additions that were introduced with HTML5.

The doctype pre HTML5 was pretty long and cumbersome. The new HTML5 doctype looks like this:

The doctype is case-insensitive, I mostly write it in all lowercase.

In HTML5 SVG and MathML elements may be used directly within a HTML document.

This makes the following example completely valid HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Using SVG in HTML</title>
  </head>
  <body>
    An SVG circle:
    <svg>
      <circle r="42" cx="42" cy="42" fill="rgb(28,77,70)"/>
    </svg>
  </body>
</html>

XML like void elements can now be used in HTML5.
This is aligns HTML5 a bit with XHTML, and makes both of the following two elements valid:

Boolean attributes may omit the equals sign and value.
Example:

Whitespace normalization was removed from attribute values, this means that
whitespaces in 

 or similar attributes aren't ignored anymore and the 

The following elements were removed because one should use CSS to style a document:

The following elements were removed because they hurt accessibility and usability.

The following elements were removed because they can be replaced with other elements.

Several existing attributes were also changed or removed in HTML5, you can read up those changes on the official W3C document on 

While in previous HTML versions the document structure and outline was only defined through the heading elements, in HTML5 sections can be nested and have their own heading hierarchy.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>HTML4 Outline Example</title>
  </head>
  <body>
    <div class="header">
      <h1>topaxi.codes</h1>
    </div>
    <div class="article">
      <h2>A Short Refresh On HTML5</h2>
      <p>...</p>
      <h3>The Doctype</h3>
      <p>...</p>
      <h4>List of Doctypes</h4>
      <ul>...</ul>
      <h3>Specify the characterset</h3>
      <p>...</p>
    </div>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">  
    <title>HTML5 Outline Example</title>
  </head>
  <body>
    <header>
      <h1>topaxi.codes</h1>
    <header>
    <main role="main">
      <article>
        <header>
          <h1>A Short Refresh On HTML5</h1>
        </header>
        <section>
          <p>...</p>
          <h1>The Doctype</h1>
          <p>...</p>
          <h2>List of Doctypes</h2>
          <ul>...</ul>
          <h1>Specify the characterset</h1>
          <p>...</p>
        </section>
      </article>
    </main>
  </body>
</html>

As one can see, each section has it's own hierarchy, the first heading defines at which level the hierarchy starts.

Theres a lot more minor changes to HTML5 I haven't mentioned here, if you're interested, you should look up the original 

A Short Refresh On HTML5

Sometimes in a web application, we need to mark a bit of content as loading.
Most solutions use some kind of JavaScript like 

, but what if we could only add a class to an element instead?

With IE 7 to 9 disappearing from the web, we can do this today with plain CSS using the 

 for the loading throbber.
The loading throbber will be centered using the CSS function 

/*
We set the element we are applying our loading mask to relative
*/
.loading-mask {
  position: relative;
}

/*
Because we set .loading-mask relative, we can span our ::before
element over the whole parent element
*/
.loading-mask::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
}

/*
Spin animation for .loading-mask::after
*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/*
The loading throbber is a single spinning element with three
visible borders and a border-radius of 50%.
Instead of a border we could also use a font-icon or any
image using the content attribute.
*/
.loading-mask::after {
  content: "";
  position: absolute;
  border-width: 3px;
  border-style: solid;
  border-color: transparent rgb(255, 255, 255) rgb(255, 255, 255);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  animation: 2s linear 0s normal none infinite running spin;
  filter: drop-shadow(0 0 2 rgba(0, 0, 0, 0.33));
}

<div class="loading-mask">
  <p>I'm waiting for something...</p>
</div>

: You cannot use this on elements which already define 

 pseudo-elements, as they might override each other.

That's it, there are certainly more possibilities than using a border or picture, try playing around a bit :)

: This work is licensed under the terms of the MIT license. For a copy, see 

CSS-Only Loading Mask

 allows you to group multiple selectors in one, reducing complexity.

Example which matches all links in any heading:

:matches(h1, h2, h3, h4, h5) > a {
  color: rgb(91, 164, 229);
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a {
  color: rgb(91, 164, 229);
}

 is not yet officially supported in any browser, it is available as non-standard pseudo-class with 

With the new CSS Selectors Level 4 specification the 

 pseudo-class got updated and works now similar to the 

 pseudo-class, as it supports multiple selectors as arguments.

.foo:not(.bar, baz) {
  color: rebeccapurple;
}

.foo:not(.bar):not(.baz) {
  color: rebeccapurple;
}

 with multiple arguments isn't supported everywhere yet, it can be easily transpiled using something like 

The :matches CSS pseudo-class

 it is possible to use a maybe future standard feature of CSS called "

Using custom CSS selectors, repeated selectors can be aliased to a shorter pseudo-selector.

/* Define custom selector, note that they must be prefixed with :-- */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;

/* Use custom selector */
:--headings {
  color: blue;
}

The custom selectors basically transform into 

 selectors, most
modern browser support some kind of 

 pseudo-selector.
But cssnext compiles them into simple selectors, supported by all browsers.

Styling checkboxes using custom CSS selectors

As a more complicated example, I'm going to show you how one might implement custom checkboxes or radios.

Implement custom checkboxes and radios for browsers which support 

 can be much more readable with custom selectors.

/*
Select radio and checkbox as :--checkbox, select both types as we will
customize both but style the radio a bit different later.
*/
@custom-selector :--checkbox input[type=checkbox], input[type=radio];

/* Only select radios which are customizable */
@custom-selector :--customizableRadio input[type=radio]:not(:checked), input[type=radio]:checked;

/* Checkboxes and radios are only customizable if `:checked` is supported */
@custom-selector :--customizable input[type=checkbox]:not(:checked), input[type=checkbox]:checked,
                                 input[type=radio]:not(:checked),    input[type=radio]:checked;

/*
Hide the radios and checkboxes by moving them out of the viewport,
some browsers behave weird if they are set to `display: none`
*/
:--customizable {
  position: absolute;
  left: -99999px;
}

:--customizable + label {
  position: relative;
  padding-left: 1.5em;
  cursor: pointer;
}

:--customizable + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(200, 200, 200);
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Make radios round */
:--customizableRadio + label::before {
  border-radius: 50%;
  top: -2px;
  left: 6px;
}

:--customizable + label::after {
  content: '\2713';
  position: absolute;
  top: -1px;
  left: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: green;
  transition: opacity 0.2s;
}

/* Use bullets for radios instead of the check mark */
:--customizableRadio + label::after {
  content: '\2022';
}

:--checkbox:not(:checked) + label::after {
  opacity: 0;
}

:--checkbox:checked + label::after {
  opacity: 1;
}

:--customizable:disabled + label::before {
  border-color: #bbb;
  background-color: #ddd;
}

:--checkbox:disabled:checked + label::after {
  color: #999;
}

:--checkbox:disabled + label {
  color: #aaa;
}

:--customizable:focus + label::before {
  border-color: color(green tint(20%));
  outline: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px color(green a(60%));
}

:--customizable + label:hover::before {
  border-color: green;
}

Which can now be used with the following HTML markup:

<div>
  <input  id="checkbox1" type="checkbox">
  <label for="checkbox1">Checkme</label>
</div>

<div>
  <input  id="radio1" type="radio" name="radio" checked>
  <label for="radio1">Checkme</label>

  <input  id="radio2" type="radio" name="radio">
  <label for="radio2">Checkme</label>
</div>

Custom CSS Selectors

 to create stylesheets. One of my favorite features is the new 

While extremely powerful when used in combination with 

 function is still very useful even without them.

 function takes a color and can apply several "color modifier" or "color adjusters" to modify the given color.

body {
  background-color: color(#ffffff blackness(+ 5%));
}

 and adds 5% "blackness", this is equivalent to:

body {
  background-color: rgb(243, 243, 243);
}

 function everywhere a CSS color value is expected, from font color to background gradients, everything is supported.

A slightly more complex example using gradients:

#color-example {
  background: linear-gradient(to right, white, color(blue blend(lime 50%)), black);
}

As you can see, with the color function you now only need to define your base colors and can derive from them by using any "color adjuster" you want.
This also leads to more comprehensible stylesheets and less "magic" colors (similar to 

With an operator, adjust the red, blue, green or alpha channels of the base color.
Without an operator, set the red, blue, green or alpha channels of the base color.

rgb( ['+' | '-']? [<number> | <percentage>]{3} )
rgb( ['+' | '-'] <hash-token> )

Adjusts the base color in the red, green, and blue channels simultaneously.

 function don't seem to be working using cssnext yet, but I might be doing something wrong.

 function sets or adjusts the hue of the base color.

[saturation( | s(] ['+' | '-' | *]? <percentage> )
[lightness( | l(] ['+' | '-' | *]? <percentage> )
[whiteness( | w(] ['+' | '-' | *]? <percentage> )
[blackness( | b(] ['+' | '-' | *]? <percentage> )

Sets or adjusts the saturation, lightness, whiteness, or blackness of the base color.

To make colors simply lighter or darker, the 

 are the easiest way to achieve this. They work the same as blending either white or black.

blend( <color> <percentage> [rgb | hsl | hwb]? )
blenda( <color> <percentage> [rgb | hsl | hwb]? )

 mix the base color with the given color.

 respects the alpha channel of both colors (while 

 only preserves the alpha channel of the base color).

Finds a color that contrasts with the base color sufficiently to satisfy accessibility guidelines, using the definition of "contrast" given by the 

While I don't know any browser which supports the 

Modifying CSS Colors with the color() function

In ES6 (or ES2015 if you will), one great new addition is the new class syntax, known from almost every other classical object-oriented programming language like Java, C++, etc.

In this post, we're going from the plain JavaScript functions to the new ES6 class definitions.

While JavaScript is object-oriented it uses the so called prototypical inheritance instead of the more common classical inheritance approach.
What this basically means is, objects are constructed from other objects instead of declarative object definitions. JavaScript uses functions as constructors and if called with the keyword 

 they will create a new object using the functions 

function Foo() {
  console.log('Constructing new foo...')
}

Foo.prototype.hello = function() {
  console.log('Hello World')
}

 function, we can instantiate a new object with a 

var foo = new Foo() // Logs 'Constructing new foo...'

foo.hello() // Logs 'Hello World'

 object.
You can lookup and manually set the inherited object by accessing / setting the 

 property on any object. This was non-standard up until ES6.

topaxi.codes

ECMAScript 2016 Approved

Configure NGINX for FastBoot

Using CSS Custom Properties With Ember.js

Using ES7 Async Functions In Ember

A Short Refresh On HTML5

CSS-Only Loading Mask

The :matches CSS pseudo-class

Custom CSS Selectors

Modifying CSS Colors with the color() function

JavaScript Classes - Basics

Centering and aligning with Flexbox

CSS Units

Using ES7 Decorators In Ember

Ember.js route progress with NProgress.js

Use npm without root or sudo rights on Linux

How to install Node.js on Linux using NVM

Hello World