Hakim El Hattab / hakim.se

JAVASCRIPT

THE FUN PARTS

— FRont end

— Startups

— Slides.com

— Side projects

— Open source

slides.com/hakim/jth19/LIVE

CANVAS

DRAWING Basics

let canvas = document.querySelector( 'canvas' );
let context = canvas.getContext( '2d' );

canvas.width = 200;
canvas.height = 200;

context.fillStyle = 'red';
context.fillRect( 100, 100, 10, 10 );

Animation Basics

let canvas = document.querySelector( 'canvas' );
let context = canvas.getContext( '2d' );

canvas.width = 200;
canvas.height = 200;
context.fillStyle = 'red';

let x = 0;

setInterval( () => {
    x = ++x % 200;

    context.clearRect( 0, 0, 200, 200 );
    context.fillRect( x, 100, 10, 10 );
}, 1000 / 60 );

TRAIL

Rymd

Origami

BLOB

Keylight

Example

Sinuous

10k Apart

Constraints

INSPIRATION

EXPECTATIONS

UI

ScROLL FX

LADDA

Progress Nav

DOMTree

FLIPSIDE

JAVASCRIPT

Why side projects?

REVEAL.JS

THANKS!

hakim.se

@hakimel

TIme left?

404