A Link to the Past

Dirk’s son needed to learn the numbers from 1 to 100 with the help of Zaubermini Hundertfeld. After his son wrecked the book, Dirk created a digital version, that is more fun than the analogue version.

In this talk we will show you how to build a project like that quickly with simple tools like Custom Elements and other browser APIs as well as faucet-pipeline and Github Pages. There might even be a party cannon if you solve the Hundertfeld correctly.

This talk was given together with Dirk Breuer (https://speakerdeck.com/railsbros_dirk).

Transcript

1. How to make your kids think doing home work is kind of cool?
2. With JavaScript Lokas Lukas Lucas und Dirk @DevHouseFriday
3. * Kids in 2nd grade have to learn numbers from 1-100. * On paper. * Like an animal. * It's boring.
5. * Computers are fun. * And numbers can easily be written on the computer. * Learning numbers on computers would be fun. * Let's get digital.
6. Demo Time
8. Select Player Angular React Vue
9. We don't need any help!
10. It's dangerous to go alone! Take this.
11. class ConfettiCannon extends HTMLElement { connectedCallback() { // fire the cannon } } customElements.define("confetti-cannon", ConfettiCannon)
12. as soon as this piece of HTML <confetti-canon/> appears anywhere in the DOM
13. ...And I mean ANYWHERE!
15. No library required! Loading 0kb
16. Old browsers can be polyfilled *coming soon
17. Browsers can do so much now, you rarely need libraries... youmightnotneedjquery.com
18. confetti cannon.js magic cube.js modal dialog.js confetti package app.js uitil package
19. confetti cannon.js magic cube.js modal dialog.js confetti package app.js uitil package
20. confetti cannon.js magic cube.js modal dialog.js confetti package app.js uitil package
21. app.js
22. faucet-pipeline.org * Convert * ...JavaScript * ...TypeScript * ...SCSS * ...Images * ...you name it * Teeny tiny config in JS * 5 minute setup
23. Sharing is Caring
25. WHAT IF I TOLD YOU YOU DON'T NEED ANY SERVER
26. Serverless Serverless
28. * Just a click away * Keep data in gh-pages branch * Configure custom domain * Even TLS provided
29. Thank you! Questions?