DEV Community: Jochem Stoel

RunwayML - Next Generation Machine Learning for Creators

Jochem Stoel — Fri, 29 May 2020 06:27:41 +0000

Despite maybe some minor improvements here and there, machine learning has been and in many ways still is primarily for experienced developers. Not anymore. Runway brings the power of artificial intelligence to your creative projects with an intuitive and simple visual interface. Start exploring new ways of creating today.

A few words

Some of you know that I keep introductions to an absolute minimum and like to dive right into the material but this article is about a product (more specifically a commercial product) and because of that I want to say the following.

As much as I would love to be involved some day, I am not not affiliated, associated or in any way officially connected with Runway. I do not get paid to write this. The only reason for writing this article is my own professional opinion about the quality of this product, my experience with it so far and my personal interest in machine learning in general. I highly recommend it to anyone (developer or not) who shares this interest.

You have probably seen some of the amazing things we can do nowadays with the help of machine learning. If you are a creative person like a musician or designer then you have undoubtedly imagined what else is possible and quite likely have a few ideas of your own. With Runway you can turn these ideas into a working prototype today with a few mouse clicks.

Runway is focused primarily on accessibility to people in creative professions. If you are a developer then you will find that Runway does not fall short.

Installation

Installing Runway is pretty simple. It doesn't require any development environment or stuff. All you need to do is navigate to https://runwayml.com/ and download the installer by clicking the button on the top right corner of the page. The application is not that large, a little over 200MB. Once downloaded, just click 'next' a couple of times. I think it is currently only for Windows but it is a Chromium application so I don't think it will stay that way. Besides, a browser version has been announced.

Getting Started

Once the Runway application is installed, getting started is quite easy. Start the program and the splash screen will look something like the following.

(in my opinion this splash screen is redundant and might as well be removed because the interface contains these menus too)

I will briefly describe what a model is but don't worry, you do not have to understand this in great depth if you are using Runway as a creator.

A machine learning model is a file that has been trained to recognize certain types of patterns. You train a model over a set of data, providing it an algorithm that it can use to reason over and learn from those data. The training data you feed to the machine learning model needs to be represented as numbers in order.

Once you have trained the model, you can use it to reason over data that it hasn't seen before, and make predictions about it. For example, let's say you want to build an application that can recognize a user's emotions based on their facial expressions. You can train a model by providing it with images of faces that are each tagged with a certain emotion, and then you can use that model in an application that can recognize any user's emotion.

That's enough of that. Thanks to Runway, you don't have to deal with the complexity of these systems. Just select the model you need and run it.

Runway offers an abundance of ready to use popular machine learning models such as StyleGAN(2) for image synthesis, GPT-2 for text generation, pose detection in images and videos, style transfer of two images and a variety of other fun and interesting things to play with. This includes StyleGAN models trained by the Runway community on various collections of images and a whole bunch of other cool stuff.

There are many different types of models and I can't possibly talk about all of them here so I will go through a few of these models that are popular and I use a lot myself.

GPT-2

A state of the art text synthesis model that can generate coherent paragraphs of text of any kind, autocomplete your sentences and even answer questions about a given text.

Paper
Code for the paper
Talk to Transformer Demo website using GPT-2
TextSynth Another online demo with more examples

GPT-2 can be fine-tuned on custom datasets. This means that if you feed it a large number of movie descriptions, it will generate an infinite amount of new unique movie descriptions. Fine-tune it on chat logs and it will generate more dialog. I did many fun and pointless experiments with GPT-2 (spiritual text generator, a Flash episode generator, ...) which are all available as gists or repositories on my GitHub.

At the time of writing this article, only 117M and 345M are available. I've been asking about this but they don't give any indication when the 774M and 1558M model will be available.

StyleGAN(2)

Generative Adversarial Networks, or GANs for short, are effective at generating large high-quality images.

My favorite model is StyleGAN.

The Style Generative Adversarial Network, or StyleGAN for short, is an extension to the GAN architecture that proposes large changes to the generator model, including the use of a mapping network to map points in latent space to an intermediate latent space, the use of the intermediate latent space to control style at each point in the generator model, and the introduction to noise as a source of variation at each point in the generator model.

The resulting model is capable not only of generating impressively photo-realistic high-quality photos of faces, but also offers control over the style of the generated image at different levels of detail through varying the style vectors and noise.

Why not use Google Colab or Paperspace?

Personally I have used Google Colab for training a lot and even though I am grateful for the free service, I have always been keeping my eyes open for something better. Google Colab sessions have a time limit of approximately 12 hours and may occasionally timeout at random for no apparent reason. To save any type of progress in Colab, you need to connect to Google Drive or some other host to store your files after training and to import them when you wish to continue. Every time you use Google Colab, everything needs to be installed and configured again. You can't use it in production or rely on it for these reasons. Spinning up a server on Paperspace and doing the training there is not ideal either. It can take quite some time before you finally have the development environment all set up (expensive time) and to deploy anything for real world applications, the system must stay up and running 24/7 which is not affordable.

A number of extensions for third party applications are already available and more are being created almost every day. This includes extensions for Adobe Photoshop and Unity. Utilize style transfer models, turn a picture into an anime character or synthesize images inside Photoshop with the click of a button.

Screenshot of the Adobe Photoshop plugin

https://github.com/runwayml/RunwayML-for-Photoshop

Unity

https://github.com/runwayml/RunwayML-for-Unity

Although there is an abundance of models already available on Runway, every project is unique and it is not unlikely that your project might require some custom solution. Maybe you or a developer in your team created a model that your project needs. You can import your own machine learning models to Runway and this is fairly easy to do. I might write an article about this at some point.

Of course you can also choose to share your ported models with others, which is something I highly recommend.

Deploy trained models and use them in your web application using a simple intuitive no-bs API.

One major reason if not the biggest reason for my decision to invest time in Runway is the recent introduction of hosted models.

Look. I am developer. I know a thing or two about stuff. So far got things to run locally at home, hosted remotely on a GPU powered VPS or running temporary on Google Colab. Deployment however, has so far been virtually impossible simply because of how resource intensive (expensive) it is. Deploying a trained machine learning model into a running web application requires it to be available all the time. Not just be online 24 hours a day but also able to handle multiple requests at the same time for different users. Several thousands of dollars a month to host a machine like that for projects that are not yet in a development stage where such numbers are realistic is no option for me.

Runway solves this problem for me entirely.

Once a hosted model is queried, it starts up the model remotely if it hasn't started already. (this will take a minute or two) Once it started you can do inference in real-time. When a model has not been used for so many minutes, it will automatically shut itself down and go back to sleep. An active model (one that is constantly being used) will stay awake. Only initial startup causes a small delay (only once) in which it is probably a good idea to show a loading screen. Users that are subscribed to the creative plan can host unlimited amount of models. (!)
In my opinion the costs of hosted models are very reasonable. They kept it at an absolute minimum. Runway does not charge users for the time it takes to start a hosted model or to shut it down. Credits only go to actual usage and are about $0.005 per query or something.

A software development kit (SDK) is a collection of software development tools in one installable package. They ease creation of applications by having compiler, debugger and perhaps a software framework. They are normally specific to a hardware platform and operating system combination.
In this case, the Runway SDK refers to a collection of tools that simplify communication between your application and the Runway service/API.

The ability to not only utilize but also manage highly complicated machine learning models programmatically with such high level of abstraction that you can do it with a few lines of JavaScript code in the browser or your Node application brings a lot of potential.

Pipelines are a form of computer organization in which successive steps of an instruction sequence are executed in turn by a sequence of modules able to operate concurrently, so that another instruction can be begun before the previous one is finished.

You can use the output of a hosted model as the input of the next model, provided it is the right format, then repeat this as long as you need. In development, this we generally call pipelines.

For example:

Model 1 takes some input vector and produces a base64 image.
Model 2 takes image input and outputs an image too.
Model 3 takes image input and outputs text.

The pipeline in this case will send the output of model1 to model2 and from model2 to model3 so that you end up with something that takes a vector as input and outputs text.
I might write an article in the future to provide a few examples on what this looks like in the simplest form of (JavaScript) code, using the Runway SDK.

It is very easy to get in touch with the Runway team. It is my experience that they are friendly and professional. If you think that you found a bug or experience any problems then you can count on it that they will look into it right away and fix the problem if there is one. They are open to feature suggestions (after all, every feature I suggested is now a reality) and they happily involve users in the process of beta testing new stuff.
However, personally I am not overwhelmed with enthusiasm. I do not find them very engaging or responsive on a social level. They don't think with you or participate in a brainstorm session. It is unlikely that they are the ones to initiate a dialog with you. They are friendly but they are not your friend. I have expressed my love and intention to get involved a number of times and suggested many ways I can be useful but received little response. There is absolutely nothing wrong with this. How you handle support as a business is a choice.
A great thing about the Runway team is that they are available on Slack for direct communication. On their Slack channel you can also connect with other members/users of the community, exchange ideas and share your projects. For those (interested in) using Runway I highly recommend introducing yourself there as well.

Runway is still in beta version so the community is relatively small. However it is a very active and engaged community which I think is a lot more important. People are sharing their trained models, their ported models, their creative works and their ideas on the Runway platform itself but also on places like Github and YouTube.
There are numerous courses, showcases and YouTube video's that show just how wonderful and creative people can be in the way they utilize machine learning thanks to Runway.

The creator plan of Runway costs about $10 a month that you can pay with your credit or debit card. Additionally you can purchase credits to train and run your models. Whether you are willing to make this investment is of course entirely your business. All I can say is that I spend this with love because it is a minimal investment for a product/service that fast forwards the development of my projects and my own creative expression by at least a few years.

Runway is constantly adding new features and it impossible to talk about them all here. Personally I am looking forward to the Web Version that has been announced. I have not had the pleasure of using it yet but I expect it to be pretty much the same as the desktop application, only running in the browser. This means that pretty soon you can even use your phone!

I can talk about Runway for hours and I am itching to dive in some code examples but that is outside the scope of this article so I'm going to stop here and conclude.

Runway is the Swiss army knife of machine learning. It lets you rapidly prototype your machine learning projects. Discover an ever-growing collection of features and extensions. It has an API and SDK. Since recently you can even deploy your applications in the cloud using Runway, making it also very interesting for developers like myself that want to use machine learning in their web applications.
As a developer you have certain requirements. As a creator too. Runway offers both. It is a commercial product but very affordable compared to any other current alternative out there. Because it is still in early stage of development, there are some things that I like and some things I really don't. I am looking forward to the future and I will dive into some code real soon.

Runway lives up to its name. It accelerates your creative process and helps you lift your ideas off the ground.

RE: Add dark mode to any website with just a few lines of code

Jochem Stoel — Mon, 17 Feb 2020 20:17:47 +0000

Today I saw this article by @albertomontalesi about adding a 'dark mode' to your website. I have done such a thing already years ago but in a different way (it was a chrome extension example) and since I haven't posted anything in months, why not?

Obviously this is not the ultimate way to enable a dark mode, partially because it will make anything look inverted (even images and videos) but it should be educational to at least some of you.

Difference

Alberto talks about setting some properties in CSS and loading CSS files with JavaScript. Although I am using CSS here too, it is not stored in other files but written inline. Also, this will work on any website. Try it out and copy paste the toggle function to your favorite website's console.



function toggle() {
    let q = document.querySelectorAll('#nightify')
    if(q.length) {
        q[0].parentNode.removeChild(q[0])
        return false
    }
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.setAttribute('id', 'nightify');
    s.appendChild(document.createTextNode('html{-webkit-filter:invert(100%) hue-rotate(180deg) contrast(70%) !important; background: #fff;} .line-content {background-color: #fefefe;}'));
    h.appendChild(s); 
    return true
}

toggle() // woa! everything is dark!

localStorage

I will not talk about setting your preference in the localStorage because he does a good job explaining that.

Chrome extension

This thing was originally a chrome extension so I'll show that bit too. If you want to know more about how to make a chrome extension, look for chrome extension here on dev.to for some fine articles.

manifest.json

This JSON file says the extension wants permission to access every tab, a browser action button will be added to the chrome menu and it will load background script script.js which you can find below.



{
    "name": "NightTime",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Toggle the darkness.",
    "permissions": [
      "<all_urls>"
     ],
    "browser_action": {
      "name": "Nighty"
    },
    "background": { 
      "scripts": ["script.js"]
    }
}

script.js



chrome.browserAction.onClicked.addListener(tab => { //Fired when User Clicks ICON
    chrome.tabs.executeScript(tab.id, {
            "file": "contentscript.js"
        }, result => { // last statement of contentscript
            console.log("Toggle night time...") // Notification on Completion
    })
})

contentscript.js

This toggle function is the same as above. The last line result = toggle() reflects the result in script.js right before the call to console.log. Our toggle function basically says here that if our style element already exists, remove it. If it doesn't, add it.



function toggle() {
    let q = document.querySelectorAll('#nightify')
    if(q.length) {
        q[0].parentNode.removeChild(q[0])
        return false
    }
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.setAttribute('id', 'nightify');
    s.appendChild(document.createTextNode('html{-webkit-filter:invert(100%) hue-rotate(180deg) contrast(70%) !important; background: #fff;} .line-content {background-color: #fefefe;}'));
    h.appendChild(s); 
    return true
}

var result = toggle()

That's all!

Google article recommendations on a desktop device?

Jochem Stoel — Thu, 20 Jun 2019 01:21:39 +0000

On Android, the Google homepage shows 'suggested articles' with unusually accurate content.

I would like to access this feed on a desktop computer but they only show on mobile devices. Does anyone know a simple way to achieve this? An API, RSS feed or some other format would be ideal but just HTML is a good start.

What do you imagine JavaScript looks like in 5 or 10 years?

Jochem Stoel — Thu, 06 Jun 2019 12:06:48 +0000

We've come a long way since the introduction of ES6, Node and the various new standard APIs. What do you imagine (or want) JavaScript to look like a decade from now? :)

Support for ECMAScript2019 syntax highlight of class privates?

Jochem Stoel — Mon, 25 Mar 2019 23:22:42 +0000

My Visual Studio Code doesn't talk ECMAScript10 yet. Class privates (using # notation) cause syntax errors similar to the ones you get in browsers. I want this to stop. Do I need to update some configuration setting or download an extension? I did not find one. If no syntax definition exists yet then somebody make one.

Chrome Canary and Chrome Dev now support ECMAScript10

Jochem Stoel — Fri, 08 Mar 2019 18:40:09 +0000

Chrome Canary and Chrome Dev now support ECMAScript10. That means we get to play with private class variables and a few new Object properties!

"JavaScript's New Private Class Fields, and How to Use Them — SitePoint"

I know it is a short post for my doing but I'm just too excited!

Who cares about SoloLearn.com?

Jochem Stoel — Mon, 11 Feb 2019 01:08:09 +0000

I discovered that the local government here recommends SoloLearn.com to unemployed people who want to become a developer. I was once bored and finished all of these SoloLearn courses in a day. They sent me a cute little certificate for each course.

Personally I feel this is a load of crap. It hasn't really taught me anything and I sincerely doubt SoloLearn is going to make the difference on my resume but I am highly opinionated and arrogant.

So I want to know your experience, have you ever applied for a job or come across an organisation that cares about SoloLearn or has even heard of it? Any type of self study has value of course and the lessons are not bad perse but are these courses/certificates really worth anything when you are applying for a job in the real world?

Execute a child process that is not on the filesystem but in memory?

Jochem Stoel — Tue, 29 Jan 2019 00:23:22 +0000

I have been hanging on something for a while, maybe someone can explain it to me as if I'm five.

Is it possible to execute a child process from memory? For instance HTTP request an executable file foo.exe and exec/spawn it from buffer? I can't imagine it has to be on the filesystem.

I tried npm installing browserfs but I get stuck on the same thing.

(the lack of) Keybase Filesystem Events

Jochem Stoel — Thu, 13 Dec 2018 20:25:09 +0000

For one of my clients (small company) it seemed like a useful feature to notify employees when someone added, removed or renamed a file on their shared Keybase team folder so that they don't have to check every time.

The idea originated when I saw that in the compact window of the Keybase GUI, you see a list of recent file changes. I asked Keybase support if I can read the events somehow from somewhere. After all, it is an Electron application.
The keybase filesystem does not implement any real events, so I created a hacky little script that simulates them.

I wrote a hacky little script that globs the k:/team/name folder and emits changes. I simply run this script periodically (every 30 seconds) as a sort of cronjob.

To break it down:

glob a personal or team folder
compare result with previous run
if a new file is added, emit a create event
if a file is no longer there, emit a delete event
if the mtime (last modified time) of the file changed, emit change event

To check whether a file has been renamed is a little trickier because the old file will be detected as missing/deleted and the renamed file will be seen as a new file. In order to make this work, when a file is supposedly created and another one is deleted, compare the mtime of the new file to the old file. If they are the same it is veeeeeeeery likely that it has been renamed. (can't think of much exceptions)

I know ... its hacky but hey; but the following is currently tested and working on all operating systems which is better than nothing at all.

/* filesystem I/O and child process */
const fs = require('fs')
const childProcess = require('child_process')

/* events */
var Emitter = require('./emitter')
var emitter = new Emitter() 

/* subscribe to all events and use console.log as temporary callback */
emitter.on('*', console.log) // probably pipe to some GUI / notification

/* buffer file for file list */
const oldFiles = 'teamname.json'
/* the directory to watch */
let directory = 'k:/team/teamname/**/*'

/* buffer file otherwise initialize empty array */
let old = fs.existsSync(oldFiles) ? JSON.parse(fs.readFileSync(oldFiles, 'utf8')) : []

/* normalize object with lstat data to JSON compatible format */
const normalize = files => JSON.parse(JSON.stringify(files))

/* start time */
let start = Date.now()

/* match all files and directories */
let files = normalize(JSON.parse(childProcess.execSync(`glob --json "${directory}"`).toString()).map(file => [file, fs.lstatSync(file).mtime]))

/* time it took = end time - start time */
let end = Date.now()
let difference = end - start

emitter.emit('done', { took: difference/1000 }) // seconds

Array.prototype.has = function(file) {
    for(let item of this) {
        if(item[0]==file[0])
        return true
    }
    return false
}

Array.prototype.hasmtime = function(mtime) {
    for(let item of this) {
        if(item[1]==mtime)
        return item
    }
    return false
}

let newfiles = []

/* iterate old files */
old.forEach((file, index) => {
    let [f, mtime] = file 
    let fl 
    /* find new file with filename = this old filename */
    fl = files.filter(file => file[0] == f)
    /* because map returns array */
    if(fl.length > 0) { 
        fl = fl[0]
        /* if mtime has changed, emit change event */
        if(mtime!=fl[1])
            emitter.emit('changed', fl)
    }
    /* if new files does not have this current old file */
    if(!files.has(file)) {
        /* check to see if a file with exactly the same mtime exists */
        let changed = files.hasmtime(file[1])
        if(changed) {
            /* veeery likely that file is renamed */
            emitter.emit('rename', { from: file[0], to: changed[0]})
        } else {
            /* file no longer exists and no same mtime file found */
            emitter.emit('deleted', file)
        }
    }
})

/* if a new file does not exist anywhere in old files */
files.forEach(file => !old.has(file) ? (emitter.emit('new', file) && newfiles.push(file)) : null)

/* finally, write the new files to file for next iteration */
fs.writeFileSync(oldFiles, JSON.stringify(files))

Wrap this up in a setInterval and voila!

Note: depending on your internet speed and the amount of files/directories it takes about 5 to 15 seconds to glob the whole folder. Take that into account when deciding the delay between each run. Also, it is not always (almost never) that important that the notifications are immediate. (30 seconds to a minute is acceptable)

Note: you can find the the Emitter class I used in this article.

Note: I am using this for keybase but this will also work on local folders, FTP and shared network folders.

Todo: you can improve the certainty that a file is renamed by not only checking the last modified time but also check if the filesize is the same. You can read the filesize from lstat just like the last modified time.

Write your own chainable Event Emitter class for Node and Browser

Jochem Stoel — Sat, 08 Dec 2018 10:24:03 +0000

It is saturday morning, I am still waiting for coffee so let's do something trivial to warm up for the day.

Write your own chainable Event Emitter class for Node and Browser

An event emitter in JavaScript generally has three methods.

addEventListener

Add / register a listener that will be called when an event is dispatched.

removeEventListener

Remove / unregister an event listener.

dispatchEvent

This method is used to trigger an event of a certain type.

The class

First of all we make sure Emitter is instanciated and not called as a function.

function Emitter() {
    if (!(this instanceof Emitter)) throw new TypeError('Emitter is not a function.')
    // ...
}

Declare a private variable to store listeners. This array is going to be populated with more arrays where array[0] is the event type and array[1] the callback function.

/**
 * Store event handlers here.
 * @type {Array}
 * @private
 */
let handlers = []

addEventListener

This method will add/register a new event listener for events of the provided type by adding an item of type array to handlers where array[0] is the type and array[1] the callback.

/**
 * Add event listener.
 * @param {string} event type 
 * @param {function} callback function
 */
this.addEventListener = (type, fn) => {
    handlers.push([type, fn])
}

Once instanciated, you call addEventListener as follows:

emitter.addEventListener('message', message => console.log('received a message!', message))

removeEventListener

We also need to be able to remove event listeners we no longer need. To do this, we need to remove all items in handlers where item[0] is the event type.

/**
 * Remove event listener.
 * @param {string} event type 
 * @param {function} callback function
 */
this.removeEventListener = (type, fn = true) => {
    handlers = handlers.filter(handler => !(handler[0] == type && (fn == true ? true : handler[1] == fn)))
}

emitter.addEventListener('ready', console.log) // console.log will be called when a ready event happens
emitter.removeEventListener('ready', console.log)  // console.log will no longer be called on ready events

dispatchEvent

The method to trigger an event is called dispatchEvent in the browser. In Node environments it is generally called emit.
We are going to slightly modify this function so that it supports wildcard event types (as seen in https://www.npmjs.com/package/eventemitter2). Additionally besides the event data, a a second argument type is given to the event handler. When you implement wildcard event type support, this argument is useful to determine what's what.

// without the type argument, this event could be anything
emitter.addEventListener('*', (event, type) => console.log(`an event of type = ${type} was emitted.`))
emitter.addEventListener('user:*', (event, type) => console.log(`something usery happened.`))

/**
 * Dispatch event.
 * @param {string} event type 
 * @param {any} event data
 */
 this.dispatchEvent = (type, data) => {
    handlers.filter(handler => new RegExp("^" + handler[0].split("*").join(".*") + "$").test(type)).forEach(handler => handler[1](data, type))
 }

getEventListeners

Perhaps you want to be able to get/list all event listeners (of a certain type).

/**
 * Get list of event handlers (of a type) or all if type is not specified
 * @param {string} [event type] (optional) 
 */
 this.getEventListeners = type => {
    if (!type)
        return handlers
    let fns = []
    handlers.filter(handler => handler[0] == type).forEach(handler => fns.push(handler[1]))

    return fns
}

clearEventListeners

Let's also add this extra method that will clear all event listeners by reinitializing handlers.

/**
 * Clear event listeners
 * @param {string} [event type] (optional)
 */
    this.clearEventListeners = () => { handlers = [] }

So far

Our Emitter class now looks something like this.

function Emitter() {
    if (!(this instanceof Emitter)) throw new TypeError('Emitter is not a function.')

    let handlers = []

    this.addEventListener = (type, fn) => {
        handlers.push([type, fn])
    }

    this.removeEventListener = (type, fn = true) => {
        handlers = handlers.filter(handler => !(handler[0] == type && (fn == true ? true : handler[1] == fn)))
    }

    this.dispatchEvent = (type, data) => {
        handlers.filter(handler => new RegExp("^" + handler[0].split("*").join(".*") + "$").test(type)).forEach(handler => handler[1](data, type))
    }

    this.clearEventListeners = () => { handlers = [] }

    this.getEventListeners = type => {
        if (!type)
            return handlers

        let fns = []
        handlers.filter(handler => handler[0] == type).forEach(handler => fns.push(handler[1]))

        return fns
    }
}

Congratulations! You have a working event emitter class. Try it yourself:

var emitter = new Emitter()
emitter.addEventListener('ready', console.log)
emitter.addEventListener('foo.*', (event, type) => console.log({type,event}))
emitter.dispatchEvent('ready', Date.now())
emitter.dispatchEvent('foo.bar', 'blabalbla')
emitter.removeEventListener('ready', console.log)
emitter.clearEventListeners()

But we are not done, I promised a chainable event emitter. Chainable means that the Emitter is a singleton that always returns itself, allowing you to keep calling methods on it.

Shortcuts

Because we don't like to write addEventListener and dispatchEvent all the time, let's add these shortcuts. These shortcuts all return this at the end to make chains.

 /**
     * Shortcut for addEventListener.
     * @param {string} event type 
     * @param {function} callback function 
     */
    this.on = (type, fn) => {
        this.addEventListener(type, fn)
        return this /* chain */
    }

    /**
     * Shortcut for removeEventListener
     * @param {string} event type 
     * @param {function} callback function 
     */
    this.off = (type, fn) => {
        this.removeEventListener(type, fn)
        return this /* chain */
    }

    /**
     * Shortcut for dispatchEvent
     * @param {string} event type 
     * @param {any} event data
     */
    this.emit = (type, data) => {
        this.dispatchEvent(type, data)
        return this /* chain */
    }

     /**
     * Shortcut for clearEventListeners
     * @param {string} event type 
     */
    this.clear = type => {
        this.clearEventListeners(type)
        return this
    }

    /**
     * 
     * @param {string} [type]
     */
    this.list = type => this.getEventListeners(type)

Now our Event Emitter class can be accessed like:

emitter.on('message', message => console.log(message).on('open', onOpen).on('error', console.error).emit('ready', { status: 200, details: 'this is a ready event'})

Final result: class Emitter

Your final Emitter class should look something like this:

/**
 * Simpler EventTarget class without the need to dispatch Event instances.
 * @constructor
 * @returns {Emitter} new instance of Emitter
 */
function Emitter() {
    if (!(this instanceof Emitter)) throw new TypeError('Emitter is not a function.')

    /**
     * Store event handlers here.
     * @type {Array}
     * @private
     */
    let handlers = []

    /**
     * Add event listener.
     * @param {string} event type 
     * @param {function} callback function
     */
    this.addEventListener = (type, fn) => {
        handlers.push([type, fn])
    }

    /**
     * Remove event listener.
     * @param {string} event type 
     * @param {function} callback function
     */
    this.removeEventListener = (type, fn = true) => {
        handlers = handlers.filter(handler => !(handler[0] == type && (fn == true ? true : handler[1] == fn)))
    }

    /**
     * Dispatch event.
     * @param {string} event type 
     * @param {any} event data
     */
    this.dispatchEvent = (type, data) => {
        handlers.filter(handler => new RegExp("^" + handler[0].split("*").join(".*") + "$").test(type)).forEach(handler => handler[1](data, type))
    }

    /**
     * Clear event listeners
     * @param {string} [event type] (optional)
     */
    this.clearEventListeners = () => { handlers = [] }

    /**
     * Get list of event handlers (of a type) or all if type is not specified
     * @param {string} [event type] (optional) 
     */
    this.getEventListeners = type => {
        if (!type)
            return handlers

        let fns = []
        handlers.filter(handler => handler[0] == type).forEach(handler => fns.push(handler[1]))

        return fns
    }

    /**
     * Shortcut for addEventListener.
     * @param {string} event type 
     * @param {function} callback function 
     */
    this.on = (type, fn) => {
        this.addEventListener(type, fn)
        return this /* chain */
    }

    /**
     * Shortcut for removeEventListener
     * @param {string} event type 
     * @param {function} callback function 
     */
    this.off = (type, fn) => {
        this.removeEventListener(type, fn)
        return this /* chain */
    }

    /**
     * Shortcut for dispatchEvent
     * @param {string} event type 
     * @param {any} event data
     */
    this.emit = (type, data) => {
        this.dispatchEvent(type, data)
        return this /* chain */
    }

     /**
     * Shortcut for clearEventListeners
     * @param {string} event type 
     */
    this.clear = type => {
        this.clearEventListeners(type)
        return this
    }

    /**
     * 
     * @param {string} [type]
     */
    this.list = type => this.getEventListeners(type)
}

module.exports = Emitter

Done!

Good job, you have successfullly copy pasted my code!

Re-implementing jQuery methods in the HTMLElement prototype

Jochem Stoel — Thu, 06 Dec 2018 12:22:51 +0000

It is almost 2019 and people have generally come to the agreement that jQuery is deprecated. I for one have a very different perspective on that but that is for some other time. So why do people still use it? Old habits? Convenience? It turns out that the majority of people that use jQuery only use it for a select few methods.

I thought it'd be fun and educational for n00b programmers to re-implement those jQuery methods onto the HTMLElement prototype.

QuerySelector

Lets first define a shortcut for the document querySelectors. $ is for a single element and $$ is for all matches. We want to be able to provide a second context argument like jQuery that defaults to the whole document. I am assuming ES6+ where default values in function declarations are supported.

/**
 * $ for document.querySelector
 * $$ for document.querySelectorall
 * with optional context just like jQuery (defaults to document)
 */
window.$ = (query, ctx = document) => ctx.querySelector(query)
window.$$ = (query, ctx = document) => ctx.querySelectorAll(query)

$('h2') // will return single _&lt;h2&gt;_ element
$$('h2') // will return array with all _&lt;h2&gt;_ elements

Using the context argument we can select all <p> elements within another element (<article></article>)

$$('p', $('article'))

NodeList iteration

You have to admit, the jQuery.prototype.each is pretty neat too. Add a property each to the NodeList prototype and set the value to a function that casts the NodeList to an Array and then iterates it using the callback function provided.

/**
 * This allows you to "forEach" a NodeList returned by querySelectorAll or $$
 * similar to jQuery.prototype.each
 * use: $$('li').each(callback)
 */
Object.defineProperty(NodeList.prototype, 'each', {
    value: function (fn) {
        return Array.from(this).forEach((node, index) => fn(node, index))
    }
})

Attributes

Another common jQuery method is attr. We can use attr to read and write attributes of elements in the DOM using a single method. We will add one tiny feature to our method. It returns all attributes when no arguments are provided.
With attr also comes removeAttr (remove attribute) and has to determine an argument exists.

/** 
 * single method to get/set/list attributes of HTMLElement. 
 * get argument id:     $('div').attr('id')
 * set argument id:     $('div').attr('id', 'post123')
 * list all arguments:  $('div').attr()  // Fuck yeah
 */
HTMLElement.prototype.attr = function (key, value) {
    if (!value) {
        if (!key) {
            return this.attributes
        }
        return this.getAttribute(key)
    }
    this.setAttribute(key, value)
    return this
}

/**
 * remove attribute from HTMLElement by key
 */
HTMLElement.prototype.removeAttr = function (key) {
    this.removeAttribute(key)
    return this
}

/**
 * check whether a DOM node has a certain attribute.
 */
HTMLElement.prototype.has = function(attribute) {
    return this.hasAttribute(attribute)
}

innerText and innerHTML

/** 
 * single function to get and set innerHTML
 * get:  $('body').html()
 * set:  $('body').html('<h1>hi!</h1>')
 */
HTMLElement.prototype.html = function (string) {
    if (!string)
        return this.innerHTML
    this.innerHTML = string
    return this
}

/** 
 * single function to get and set innerText
 * get:  $('body').text()
 * set:  $('body').text('hi!')
 */
HTMLElement.prototype.text = function (string) {
    if (!string)
        return this.textContent
    this.innerText = string
    return this
}

Append and prepend

The following append method allows you to insert a HTML element at the end of the specified target element. The prepend method will insert it just before.

/**
 * append HTMLElement to another HTMLElement
 * like jQuery append()
 */
HTMLElement.prototype.append = function (child) {
    if (child instanceof HTMLElement) {
        this.appendChild(child)
        return this
    }
    this.append(child)
    return this
}

/**
 * prepend HTMLElement to another HTMLElement
 * like jQuery prepend()
 */
HTMLElement.prototype.prepend = function (sibling) {
    if (sibling instanceof HTMLElement) {
        this.parentNode.insertBefore(sibling, this)
        return this
    }
    this.parentNode.insertBefore(sibling, this)
    return this
}

Removing elements

Removing an element in JavaScript happens by accessing its parent node to call removeChild(). Yeah weird I know.

HTMLElement.prototype.remove = function() {
    this.parentNode.removeChild(this)
}

As you probably know, you can not use arrow functions in jQuery. However

$('#foo').remove()
// or
$$('div').each(element => element.remove())

Parent

Get the parent of a node.

/** 
 * get a HTMLElement's parent node
 * use: $('h1').parent()
 */
HTMLElement.prototype.parent = function () {
    return this.parentNode
}

Events

Modern JavaScript libraries implement on, off and emit to get, set and dispatch events.

/**
 * add event listener to HTMLElement
 * $(document).on('click', event => ...)
 */
HTMLElement.prototype.on = function (event, callback, options) {
    this.addEventListener(event, callback, options)
    return this
}

/**
 * remove event listener from HTMLElement
 * $(document).off('click', callback)
 */
HTMLElement.prototype.off = function (event, callback, options) {
    this.removeEventListener(event, callback, options)
    return this
}

/**
 * dispatch an event on HTMLElement without needing to instanciate an Event object.
 * $(document).emit('change', { foo: 'bar' })
 */
HTMLElement.prototype.emit = function (event, args = null) {
    this.dispatchEvent(event, new CustomEvent(event, {detail: args}))
    return this
}

DataSet

And last but not least a nice method to access data attributes.

/**
 * single method to get/set/list HTMLElement dataset values
 * get:  $('div').data('color')     assuming <div data-color="..."></div>
 * set:  $('div').data('color', '#0099ff')
 */
HTMLElement.prototype.data = function (key, value) {
    if (!value) {
        if (!key) {
            return this.dataset
        }
        return this.dataset[key]
    }
    this.dataset[key] = value
    return this
}

Define

This is unrelated to jQuery but still a nice shortcut.

/**
 * Convenient shortcut 
 * use:   define('property', { ...descriptor })
 */
Object.defineProperty(window, 'define', {
    value: (property, ...meta) => meta.length == 2 ? Object.defineProperty(meta[0], property, meta[1]) : Object.defineProperty(window, property, meta[0]),
    writable: false,
    enumerable: true
})

Now we can do for instance this:

/** 
 * now | single statement accessor that returns current time
 * @returns {number} 
 */
define('now', {
    get: Date.now
})

The identifier now will return the current time. You don't have to call it as a function, simply accessing it will do.

setInterval(() => console.log(now), 10)
/*
1543930325785
1543930325795
1543930325805
1543930325815
1543930325825
1543930325835
*/

Gist

For your convenience, a gist with all that is above.
https://gist.github.com/jochemstoel/856d5b2735c53559372eb7b32c44e9a6

What website(s) do you wish had an API?

Jochem Stoel — Mon, 03 Dec 2018 14:49:12 +0000