how to overengineer a meme generator
TRANSCRIPT
![Page 1: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/1.jpg)
How to overengineer a meme generator
KRESIMIR “THE DICTATOR” ANTOLIC
JS “TEAM DICTATOR” @INFINUM
@KANTOLIC
![Page 2: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/2.jpg)
WHAT YOU’LL GET?
KNOWLEDGE OF WHAT THE WEB CAN (OR WILL BE ABLE TO) DO
FOR YOU.
![Page 3: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/3.jpg)
TRUST ME. I’M AN ENGINEER.
![Page 4: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/4.jpg)
YOUR EXPERIENCE MAY VARY.
(don’t try this in production kids) (caniuse.com is your friend)
![Page 5: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/5.jpg)
THE PROBLEM?
![Page 6: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/6.jpg)
Most of my customers use IE8.
The Customer
![Page 7: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/7.jpg)
THE GOAL?
![Page 8: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/8.jpg)
GOTTA TRY ‘EM ALL!
![Page 9: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/9.jpg)
THE PROJECT (we will treat it as one)
![Page 10: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/10.jpg)
MEME IMAGE
INPUT
MEME TEXT
BROWSER
![Page 11: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/11.jpg)
THE CHALLENGE?
Client side only.
![Page 12: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/12.jpg)
STUFF WE WILL USE
![Page 13: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/13.jpg)
TOOLS
![Page 14: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/14.jpg)
WEBPACK
• a bundler for javascript and friends
• transforming, bundling, or packaging
• use it for developing and deploying
• a lot of plugins
![Page 15: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/15.jpg)
ES2016 (THE NEW JS)
• “real language”
• use Babel transpiler for transpilation to browser compatible
code (ie8 etc)
![Page 16: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/16.jpg)
SCSS
• who writes css these days
![Page 17: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/17.jpg)
LINTERS ETC
• JS - eslint
• SCSS/CSS - stylelint
• automagic running (precommit) - husky
![Page 18: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/18.jpg)
TESTS
![Page 19: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/19.jpg)
TESTS
• no time (and other excuses)
SVRTAN
![Page 20: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/20.jpg)
THE BASIC PROJECT
![Page 21: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/21.jpg)
MEME IMAGE
INPUT
MEME TEXT
BROWSER
![Page 22: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/22.jpg)
• a few divs
• canvas
• an input
• some js
• small amount of css for prettiness
![Page 23: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/23.jpg)
Show and tell
![Page 24: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/24.jpg)
TECHS
![Page 25: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/25.jpg)
LITTERACY LITERACY
![Page 26: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/26.jpg)
SPELLCHECK
• not. going. to. explain.
![Page 27: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/27.jpg)
<input type="text" spellcheck/>
<textarea spellcheck></textarea>
SPELLCHECK
![Page 28: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/28.jpg)
SHARING IS CARING
![Page 29: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/29.jpg)
DOWNLOAD
• with a link
![Page 30: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/30.jpg)
<a href="somefile.png" download/>
DOWNLOAD
<a href="blob://someblob" download/>
![Page 31: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/31.jpg)
BETTER PHOTOS EVERYWHERE?
![Page 32: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/32.jpg)
PICTURE ELEMENT
• switch case for images to be used based on supported mime
type and/or best resolutions (chosen by the browsers)
• no js!
![Page 33: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/33.jpg)
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>
![Page 34: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/34.jpg)
Show and tell
![Page 35: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/35.jpg)
LAZINESS
![Page 36: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/36.jpg)
WEB SPEECH API
• SpeechRecognition (speech-to-something-we-can-use)
[online only :( ]
![Page 37: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/37.jpg)
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);};
![Page 38: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/38.jpg)
MAKE IT TALK!
![Page 39: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/39.jpg)
WEB SPEECH API
• SpeechSynthesis (text-to-speech)
• SpeechRecognition (speech-to-something-we-can-use)
[online only :( ]
![Page 40: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/40.jpg)
const synth = window.speechSynthesis;const sayThis = new SpeechSynthesisUtterance('hello all!');synth.speak(sayThis);
WEB SPEECH API
![Page 41: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/41.jpg)
OTHER MEME PHOTOS?
![Page 42: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/42.jpg)
MEDIADEVICES.GETUSERMEDIA()
• recording video, audio
• (also images)
![Page 43: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/43.jpg)
MEDIADEVICES.GETUSERMEDIA()
const constraints = { audio: true, video: true};
navigator.mediaDevices.getUserMedia(constraints).then((mediaStream) => { // do stuff with stream}).catch((err) {});
![Page 44: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/44.jpg)
SAVING IT FOR LATER
![Page 45: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/45.jpg)
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
![Page 46: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/46.jpg)
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);
![Page 47: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/47.jpg)
Show and tell
![Page 48: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/48.jpg)
WORKING WITHOUT THE INTERNETS?
![Page 49: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/49.jpg)
SERVICE WORKERS
• scripts that intercept network request (proxy)
• apps that work offline! (successor to application cache)
• push notifications!
• works only on https
![Page 50: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/50.jpg)
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); }) );});
![Page 51: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/51.jpg)
APPING IT
![Page 52: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/52.jpg)
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
![Page 53: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/53.jpg)
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" }]}
![Page 54: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/54.jpg)
THE KITCHEN SINK
![Page 55: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/55.jpg)
POINTER EVENTS
• hardware agnostic representation of input devices that can
target a specific coordinate(touch, mouse)
• we get: pointerdown, pointerup, pointermove, pointerleave,
pointerclick
![Page 56: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/56.jpg)
NOTIFICATIONS
• awareness of any change in the light intensity
![Page 57: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/57.jpg)
WEB AUDIO API
• make your our theme music
![Page 58: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/58.jpg)
AMBIENT LIGHT EVENTS
• awareness of any change in the light intensity
![Page 59: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/59.jpg)
DIALOG
• Yes, H™L has a basic Dialog element
![Page 60: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/60.jpg)
ONLINE/OFFLINE
• detect if you have a network connection
• (for checking Internet status you will still have to ping stuff)
![Page 61: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/61.jpg)
PAGE VISIBILITY
• do stuff when nobody is watching (like dancing)
![Page 62: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/62.jpg)
KARAOKE
• semantic language processing for two-way communication
with a remote host
![Page 63: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/63.jpg)
WHAT TO SAY HERE…
![Page 64: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/64.jpg)
The web is moving forward.
![Page 65: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/65.jpg)
WHY IS THIS IMPORTANT?
![Page 66: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/66.jpg)
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
![Page 67: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/67.jpg)
NOT QUITE THERE YET.
![Page 68: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/68.jpg)
The web is moving forward. And so should we.
![Page 69: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/69.jpg)
go and tinker a bit
![Page 70: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/70.jpg)
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
![Page 71: How to overengineer a meme generator](https://reader034.vdocuments.net/reader034/viewer/2022042611/5875652e1a28abd80a8b4e21/html5/thumbnails/71.jpg)
Thank you! [email protected]
@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