A Link to the Past

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

B049f961d55097ef9104ff4b275a517b?s=128

Lucas Dohmen

November 30, 2018
Tweet

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.
  4. None
  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

  7. None
  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!

  14. None
  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

  24. None
  25. WHAT IF I TOLD YOU YOU DON'T NEED ANY SERVER

  26. Serverless Serverless

  27. None
  28. * Just a click away * Keep data in gh-pages

    branch * Configure custom domain * Even TLS provided
  29. Thank you! Questions?