The document discusses overengineering a meme generator by utilizing various modern web technologies including Webpack, ES2016, SCSS, linters, tests, the Picture element, Web Speech API, MediaDevices API, IndexedDB, Service Workers, the Web Manifest, and more to add features like spellchecking, downloading, better image support, text-to-speech, video/audio recording, offline support, notifications, and turning the project into a native-like PWA. The goal is to experiment with cutting-edge web capabilities and push the limits of what can be done on the client-side alone.

1. How to overengineer a
meme generator
KRESIMIR “THE DICTATOR” ANTOLIC
JS “TEAM DICTATOR” @INFINUM
@KANTOLIC

2. WHAT YOU’LL GET?
KNOWLEDGE OF WHAT THE WEB
CAN (OR WILL BE ABLE TO) DO
FOR YOU.

3. TRUST ME.
I’M AN ENGINEER.

4. YOUR EXPERIENCE MAY
VARY.
(don’t try this in production kids)
(caniuse.com is your friend)

5. THE PROBLEM?

6. Most of my customers use IE8.
The Customer

7. THE GOAL?

8. GOTTA TRY ‘EM
ALL!

9. THE PROJECT
(we will treat it as one)

10. MEME IMAGE
INPUT
MEME TEXT
BROWSER

11. THE CHALLENGE?
Client side only.

12. STUFF WE WILL USE

13. TOOLS

14. WEBPACK
• a bundler for javascript and friends
• transforming, bundling, or packaging
• use it for developing and deploying
• a lot of plugins

15. ES2016 (THE NEW JS)
• “real language”
• use Babel transpiler for transpilation to browser compatible
code (ie8 etc)

16. SCSS
• who writes css these days

17. LINTERS ETC
• JS - eslint
• SCSS/CSS - stylelint
• automagic running (precommit) - husky

18. TESTS

19. TESTS
• no time (and other excuses)
SVRTAN

20. THE BASIC PROJECT

21. MEME IMAGE
INPUT
MEME TEXT
BROWSER

22. • a few divs
• canvas
• an input
• some js
• small amount of css for prettiness

23. Show and tell

24. TECHS

25. LITTERACY
LITERACY

26. SPELLCHECK
• not. going. to. explain.

27. <input type="text" spellcheck/>
<textarea spellcheck></textarea>
SPELLCHECK

28. SHARING IS CARING

29. DOWNLOAD
• with a link

30. <a href="somefile.png" download/>
DOWNLOAD
<a href="blob://someblob" download/>

31. BETTER PHOTOS
EVERYWHERE?

32. PICTURE ELEMENT
• switch case for images to be used based on supported mime
type and/or best resolutions (chosen by the browsers)
• no js!

33. 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>

34. Show and tell

35. LAZINESS

36. WEB SPEECH API
• SpeechRecognition (speech-to-something-we-can-use)
[online only :( ]

37. 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);
};

38. MAKE IT TALK!

39. WEB SPEECH API
• SpeechSynthesis (text-to-speech)
• SpeechRecognition (speech-to-something-we-can-use)
[online only :( ]

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

41. OTHER MEME PHOTOS?

42. MEDIADEVICES.GETUSERMEDIA()
• recording video, audio
• (also images)

43. MEDIADEVICES.GETUSERMEDIA()
const constraints = {
audio: true,
video: true
};
navigator.mediaDevices.getUserMedia(constraints)
.then((mediaStream) => {
// do stuff with stream
}).catch((err) {});

44. SAVING IT FOR LATER

45. 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

46. 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
});
};
//somewhere
const trans = db.transaction(['memes'], 'readwrite');
const store = trans.objectStore('memes');
const storeRequest = store.put(imageData);

47. Show and tell

48. WORKING WITHOUT THE
INTERNETS?

49. SERVICE WORKERS
• scripts that intercept network request (proxy)
• apps that work offline! (successor to application cache)
• push notifications!
• works only on https

50. 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);
})
);
});

51. APPING IT

52. 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

53. 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"
}]
}

54. THE KITCHEN SINK

55. POINTER EVENTS
• hardware agnostic representation of input devices that can
target a specific coordinate(touch, mouse)
• we get: pointerdown, pointerup, pointermove, pointerleave,
pointerclick

56. NOTIFICATIONS
• awareness of any change in the light intensity

57. WEB AUDIO API
• make your our theme music

58. AMBIENT LIGHT EVENTS
• awareness of any change in the light intensity

59. DIALOG
• Yes, H™L has a basic Dialog element

60. ONLINE/OFFLINE
• detect if you have a network connection
• (for checking Internet status you will still have to ping stuff)

61. PAGE VISIBILITY
• do stuff when nobody is watching (like dancing)

62. KARAOKE
• semantic language processing for two-way communication
with a remote host

63. WHAT TO SAY HERE…

64. The web is moving
forward.

65. WHY IS THIS IMPORTANT?

66. 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

67. NOT QUITE THERE YET.

68. The web is moving
forward.
And so should we.

69. go and tinker a bit

70. 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

71. 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