How to overengineer a meme generator

KRESIMIR “THE DICTATOR” ANTOLIC

JS “TEAM DICTATOR” @INFINUM

@KANTOLIC

WHAT YOU’LL GET?

KNOWLEDGE OF WHAT THE WEB CAN (OR WILL BE ABLE TO) DO

FOR YOU.

TRUST ME. I’M AN ENGINEER.

YOUR EXPERIENCE MAY VARY.

(don’t try this in production kids) (caniuse.com is your friend)

THE PROBLEM?

Most of my customers use IE8.

The Customer

THE GOAL?

GOTTA TRY ‘EM ALL!

THE PROJECT (we will treat it as one)

MEME IMAGE

INPUT

MEME TEXT

BROWSER

THE CHALLENGE?

Client side only.

STUFF WE WILL USE

TOOLS

WEBPACK

• a bundler for javascript and friends

• transforming, bundling, or packaging

• use it for developing and deploying

• a lot of plugins

ES2016 (THE NEW JS)

• “real language”

• use Babel transpiler for transpilation to browser compatible

code (ie8 etc)

SCSS

• who writes css these days

LINTERS ETC

• JS - eslint

• SCSS/CSS - stylelint

• automagic running (precommit) - husky

TESTS

TESTS

• no time (and other excuses)

SVRTAN

THE BASIC PROJECT

MEME IMAGE

INPUT

MEME TEXT

BROWSER

• a few divs

• canvas

• an input

• some js

• small amount of css for prettiness

Show and tell

TECHS

LITTERACY LITERACY

SPELLCHECK

• not. going. to. explain.

<input type="text" spellcheck/>

<textarea spellcheck></textarea>

SPELLCHECK

SHARING IS CARING

DOWNLOAD

• with a link

<a href="somefile.png" download/>

DOWNLOAD

<a href="blob://someblob" download/>

BETTER PHOTOS EVERYWHERE?

PICTURE ELEMENT

• switch case for images to be used based on supported mime

type and/or best resolutions (chosen by the browsers)

• no js!

PICTURE

<picture> <source srcset=“image.png" media="(min-width: 600px)"> <source srcset=“bigger-image.png” media="(min-width: 1200px)"> <img src=“meme-image.png" alt="meme"></picture>

Show and tell

LAZINESS

WEB SPEECH API

• SpeechRecognition (speech-to-something-we-can-use)

[online only :( ]

WEB SPEECH API

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;

const recognition = new SpeechRecognition();const speechRecognitionList = new SpeechGrammarList();recognition.start();recognition.onresult = (event) => { console.log(event.results);};

MAKE IT TALK!

WEB SPEECH API

• SpeechSynthesis (text-to-speech)

• SpeechRecognition (speech-to-something-we-can-use)

[online only :( ]

const synth = window.speechSynthesis;const sayThis = new SpeechSynthesisUtterance('hello all!');synth.speak(sayThis);

WEB SPEECH API

OTHER MEME PHOTOS?

MEDIADEVICES.GETUSERMEDIA()

• recording video, audio

• (also images)

MEDIADEVICES.GETUSERMEDIA()

const constraints = { audio: true, video: true};

navigator.mediaDevices.getUserMedia(constraints).then((mediaStream) => { // do stuff with stream}).catch((err) {});

SAVING IT FOR LATER

INDEXDB

• it’s a database.

• nosql

• you can store stuff in.

• you can store files in.

• you can get stuff that you put. later.

• page refreshes don’t delete it

• large limit

INDEXDB

const request = window.indexedDB.open('memeFiles', 2);let db;request.onsuccess = function(e) { db = e.target.result;};request.onupgradeneeded = (event) => { db = event.target.result; db.createObjectStore('memes', { autoIncrement: true });};

//somewhereconst trans = db.transaction(['memes'], 'readwrite');const store = trans.objectStore('memes');const storeRequest = store.put(imageData);

Show and tell

WORKING WITHOUT THE INTERNETS?

SERVICE WORKERS

• scripts that intercept network request (proxy)

• apps that work offline! (successor to application cache)

• push notifications!

• works only on https

SERVICE WORKERS

const CACHE_NAME = 'cache-name';const urlsToCache = [ '/', '/styles/main.css', '/script/main.js'];

self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME) .then((cache) => { return cache.addAll(urlsToCache); }) );});

APPING IT

WEB MANIFEST

• json application info

• purpose of the manifest is to install web applications to the

homescreen of a device, providing users with quicker access

and a richer experience

WEB MANIFEST

{ “name": "OverMemGen", "short_name": "OverMemGen", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "A overengineered meme generator!", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }], "related_applications": [{ "platform": "web" }]}

THE KITCHEN SINK

POINTER EVENTS

• hardware agnostic representation of input devices that can

target a specific coordinate(touch, mouse)

• we get: pointerdown, pointerup, pointermove, pointerleave,

pointerclick

NOTIFICATIONS

• awareness of any change in the light intensity

WEB AUDIO API

• make your our theme music

AMBIENT LIGHT EVENTS

• awareness of any change in the light intensity

DIALOG

• Yes, H™L has a basic Dialog element

ONLINE/OFFLINE

• detect if you have a network connection

• (for checking Internet status you will still have to ping stuff)

PAGE VISIBILITY

• do stuff when nobody is watching (like dancing)

KARAOKE

• semantic language processing for two-way communication

with a remote host

WHAT TO SAY HERE…

The web is moving forward.

WHY IS THIS IMPORTANT?

NATIVE WEB

CAMERA YUP YUP

CONTACTS YUP NAH

OFFLINE YUP YUP

GEOLOCATION YUP YUP

FILE UPLOAD YUP YUP

GYROSCOPE YUP YUP

ACCEL YUP YUP

PUSH NOTIFICATION YUP ANDROID

MICROPHONE YUP YUP

NOT QUITE THERE YET.

The web is moving forward. And so should we.

go and tinker a bit

RESOURCES

• https://webpack.github.io/

• http://caniuse.com/

• https://developer.mozilla.org/en-US/docs/Web/Manifest

• https://developer.mozilla.org/en-US/Apps/Progressive

• https://developer.mozilla.org/en-US/docs/Web/API/

Web_Speech_API

• https://developer.mozilla.org/en-US/docs/Web/API/

MediaDevices/getUserMedia

• https://developer.mozilla.org/en-US/docs/Web/API/

IndexedDB_API

• https://developer.mozilla.org/en/docs/Web/API/

Service_Worker_API

• https://developer.mozilla.org/en-US/docs/Web/Manifest

Thank you! KRESO@INFINUM.CO

@KANTOLIC

Visit infinum.co or find us on social networks:

infinum.co infinumco infinumco infinum

JOIND

https://joind.in/talk/24b10

The meme Generator!

https://overengineeredme.me/

Github

https://github.com/psyburn/meme-generator