Hakim El Hattab / hakim.se

JAVASCRIPT

THE FUN PARTS

ABOUT ME

  • Frontend
  • Startups
  • Slides
  • Personal projects
  • Open source

slides.com/hakim/jth/LIVE

CANVAS

DRAWING Basics

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

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

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

Animation Basics

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

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

var x = 0;

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

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

TRAIL

BLOB

Keylight

Example

Sinuous

10k Apart

Constraints

INSPIRATION

EXPECTATIONS

UI

ScROLL FX

MENY

LADDA

Progress Nav

FLIPSIDE

JAVASCRIPT

Why side projects?

REVEAL.JS

THANKS!

hakim.se

@hakimel

TIme left?

CHECKWAVE

FOKUS

KONTEXT

HYPNOS