Notes from Front-end London, January 2016

Taking part in the IndieWeb - Calum Ryan

  • back in the late 90s
    • things like geocities were the best free way to put content onto the internet
    • lovely things like
      • marques
      • the time
      • a ring of links to other sites
      • "beautiful" images
  • then things like myspace
    • Tom was everyone's friend
    • One page for everything you wanted to put up
    • A good learning ground for some basic HTML/CSS
  • about 2005
    • putting our content into hosting arrangements where you don't actually own the space
    • mega silos
      • pretty much anybody with a login could access your content
      • the content host claims ownership of your content
      • nothing you can do if they go down, content is just lost
  • why do people use these thing?
    • free
    • very simple interface to make it accessible
  • declining interest in having your own website
    • other things are just easier
  • interconnectivity
  • enter IndieWebCamp
    • working on an open source platform, a wiki for how to keep your data a bit safer
    • better solutions to publish content and host your own data
    • IndieWebCamp !=
  • key goals for IndieWebCamp
    • your content is yours - when you post something on the web, it should be yours
    • be better connected - should go to all services (that you want)
    • content is hosted by you, then linked to on the favorite silo of the day
    • you are in control - post how, and when, you want, links are permanent
  • IndieWebify.Me - how indie web is your website?
  • how do I Indie Web?
    • get a domain
    • choose your hosting
      • advise paid-for
      • GitHub pages is a good free option
      • Known - free with some paid features (or host yourself)
    • identify who you are (rel="me" attribute on social links)
      • microformats for articles, people, places
    • POSSE (Post on your Own Site first, then Syndicate Elsewhere)
    • @webmentions
      • notify another URL when you link to it on your site (superseded pingback)
      • rel="webmention" source="my-website-page" target="their-website-page"
      • first W3C working draft 12th Jan
  • Bridgy
  • build a better experience than the silos
  • one example: using [twillio API] to text content to your website, then syndicated to twitter
  • come along to IndieWebCamp camps or fortnightly events
  • get involved!

The Miracle of Generators Generators are dashed jolly spiffy - Bodil Stokke

slides available on

  • iterators
    • for going over a collection, instead of strictly arrays
    • i = ponises.values();; {"value: "next value", "done": true/false}
    • for (let i of ponies)
  • symbols
ponies = {
    [Symbol.iterator]: () => {
        let c = 0;
        return {
            next: () => {
                c += 1;
                if (c === 1) return {value: "foo", done: false};
                else if (c === 2) return {value: "bar", done: false};
                return {done: true};
  • you can do nice things like an infinity iterator, a counter that counts forever (you don't need a fixed array)
    • lazy loading array as values are only evaluated when .next() is called
  • can wrap an iterator around an iterator
  • can change the order or wrapping without issue, end up like a lazy sequence library
  • end up quite like closure


infinity = function*() {
    let c = 0;
    white (true) {
        yield c++;
  • function will pause at execution of yield until the .next() is called again
  • will end up with infinite potential to as many as you need without the worry of an infinite loop
fiveup = function*() P
    let c = 0;
    while (true) {
        c = yield c;
        c = c + 5;

i = fiveup(); // 0 // 5 // 25

Promises with generators

unit = v => new Promise((res) => res(v));

promises = function*() {
    console.log(yield unit('omg'));
    console.log(yield unit('wtf'));
    console.log(yield unit('bbq'));

// iterate over a series of resolved promises
run = (iter, val = null)) => {
    const next =;
    if (!next.done) {
        next.value.then(result => run(iter, result));
  • you can write synchronous looking code to do decidedly async things
  • returning from a generator gives a value with the final {done: true}
fetchText = function*(url) {
    return yield (yield fetch(url)).text();
// Type checking for JS

maybe = (val) => ({
    then: (fn) => val != null ? fn(val) : null;

prop = (key, obj) => maybe(obj[key]);

things = function*() {
    const dash = yield prop('dash', ponies);
    const pie = yield pprop('pie', ponies);
    return dash + 'is friends with' + pie;
  • yield can hide away the promise .then chains and just deal with values
  • this is a Monad (kind of like a cute puppy in a burrito)
  • Promises are totally Monads

How to not use jQuery - Callum Macrae

  • jQuery, 2005 (11 years ago)
  • var is function-scoped, let is block-scoped
function foo ({name, colour}) {
    console.log(name + ' likes ' + colour);
foo({name: 'Callum', colour: 'orange'});
// jQuery

// Vanilla
let users = document.querySelectorAll('.selector')
for (let user of users) {
user.nextElementSibling / previousElementSibling / parentElementSibling

user.textContent // not innerText

$user.css('background-color', '#000') = '#000'

$(document).on('click', '.user', function() {
document.addEventListener('click', function(e) {
    if ('.user')) {
// plus lots of other options
options = $.extend({
    foo: 'bar'
}, options)

    foo: 'bar'
}, options)
  • jQuery animations vs CSS transitions and requestAnimationFrame
  • A lot of this isn't in browser yet, as it's ES6
    • check out Babel

But when would you want to use jQuery?

  • Old IE, IE8 pretty much requires it
  • checkout and plug in your analytics data to see what your user-base supports
  • low barrier to entry, juniors and backend devs can write it easily
  • there are a LOT of libraries for it, often the ones you want depend on it
  • 110 browser quirks fixed by jQuery in modern browsers

More ES6

  • ES6 Classes, syntax sugar around what we've got already
  • ES2015? because they'll be doing smaller, yearly releases of JS
  • ES2016 will be coming soon...


  • Everything jQuery does, can be done without it
  • it can make your life a lot easier though
  • Babel adds less bytes than jQuery
  • jNearly, coming to a browser near you