Successfully reported this slideshow.
Your SlideShare is downloading. ×

The hero's journey

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Puppet testing
Puppet testing
Loading in …3
×

Check these out next

1 of 64 Ad
Advertisement

More Related Content

Similar to The hero's journey (20)

Advertisement

Recently uploaded (20)

The hero's journey

  1. 1. The hero’s journey @ddprrt • fettblog.eu
  2. 2. workingdraft.de @workingdraft
  3. 3. technologieplauscherl.at @plauscherl workingdraft.de @workingdraft
  4. 4. technologieplauscherl.at @plauscherl scriptconf.org @scriptconf workingdraft.de @workingdraft
  5. 5. technologieplauscherl.at @plauscherl scriptconf.org @scriptconf workingdraft.de ? @workingdraft
  6. 6. A different talk this time
  7. 7. All ducks are wearing dog masks
  8. 8. All ducks are wearing dog masks
  9. 9. The hero’s journey
  10. 10. ! call to adventure crossing the threshold metamorphosis the ultimate boon returning the boon abyss the road of trials
  11. 11. ! Act 1 Act 2 Act 3
  12. 12. Act 1: The beginning
  13. 13. call to adventure crossing the threshold "
  14. 14. Mentor
  15. 15. Mentor
  16. 16. call to adventure crossing the threshold " starting a new project working with a new technology
  17. 17. call to adventure crossing the threshold " starting a new project working with a new technology
  18. 18. next.js pages/index.js export default () => <h1>Hello World</h1> package.json { "name": "hello-world", "scripts": { "dev": "next", }, "dependencies": { "next": "latest", "react": "^16.0.0", "react-dom": "^16.0.0" } }
  19. 19. vue.js index.html <!doctype html> <html> <head><title>Hello world</title></head> <body> <div id="app"> {{ message }} </div> <script src=“https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
  20. 20. A Git API GET /api/v1/repo/fettblog.eu/ POST /api/v1/repo/ PUT /api/v1/repo/fettblog.eu/ DELETE /api/v1/repo/fettblog.eu/
  21. 21. A Git API GET /api/v1/repo/fettblog.eu/ POST /api/v1/repo/ PUT /api/v1/repo/fettblog.eu/ DELETE /api/v1/repo/fettblog.eu/ C R U D
  22. 22. call to adventure crossing the threshold " rely on familiar patterns
  23. 23. call to adventure crossing the threshold rely on familiar patterns
  24. 24. Rule 1: Rely on familiarities
  25. 25. Act 2: The road of trials
  26. 26. road of trials the abyss " metamorphosis
  27. 27. next.js pages/index.js import Link from ‘next/link’ export default () => <> <h1>Hello World</h1> <Link href=‘/about’><a>About</a></Link> </> pages/about.js export default () => <> <h1>Hello About</h1> </>
  28. 28. next.js Piercing the framework import Head from ‘next/head’ export default () => <> <Head> <title>A podcast about JavaScript</title> </Head> <h1>Hello World</h1> </>
  29. 29. next.js next.config.js const withTypescript = require('@zeit/next-typescript') const withCSS = require('@zeit/next-css') const withMDX = require('@zeit/next-mdx')() module.exports = withTypescript()
  30. 30. next.js next.config.js const withTypescript = require('@zeit/next-typescript') const withCSS = require('@zeit/next-css') const withMDX = require('@zeit/next-mdx')() module.exports = withCSS(withTypescript())
  31. 31. next.js next.config.js const withTypescript = require('@zeit/next-typescript') const withCSS = require('@zeit/next-css') const withMDX = require('@zeit/next-mdx')() module.exports = withMDX(withCSS(withTypescript()))
  32. 32. next.js about.js import ArticleLayout from '../components/ArticleLayout'; import About from '../articles/about.mdx'; import Head from 'next/head'; export default () => <ArticleLayout> <Head> <title>About ScriptCast</title> </Head> <About /> </ArticleLayout>;
  33. 33. Rule 1: Rely on familiarities Rule 2: Learn with experience
  34. 34.   GET /analytics/fettblog? fromTimestamp=1545165334269& toTimestamp=1545165634269& page=index& metrics=visits,exits
  35. 35.   GET /analytics/fettblog
  36. 36.   GET /analytics/fettblog   GET /analytics/fettblog? from=now-2d
  37. 37.   GET /analytics/fettblog   GET /analytics/fettblog? from=now-2d   GET /analytics/fettblog? from=now-2d& pages=(index,about,react)
  38. 38.   GET /analytics/fettblog   GET /analytics/fettblog? from=now-2d   GET /analytics/fettblog? from=now-2d& pages=(index,about,react)   GET /analytics/fettblog? from=now-2d& pages=(index,about,react)& metrics=visits
  39. 39. Rule 1: Rely on familiarities Rule 2: Learn with experience Rule 3: Sensible defaults
  40. 40. road of trials the abyss " metamorphosis
  41. 41. road of trials the abyss " metamorphosis
  42. 42. Act 2.5: The abyss
  43. 43. Baumi does Backend server.js const express = require('express'); const next = require(‘next'); const app = next(); const handle = app.getRequestHandler(); The Abyss!
  44. 44. Baumi does Backend server.js const express = require('express'); const next = require(‘next'); const app = next(); const handle = app.getRequestHandler(); app.prepare() .then(() => { const server = express(); server.get('/api', fetchRSS()); server.get('*', (req, res) => handle(req, res)); }); The Abyss!
  45. 45. Opening the framework import App, { Container } from 'next/app' import React from ‘react'; export default class MyApp extends App { render () { const { Component, pageProps } = this.props; return <Container> <Component {...pageProps} /> </Container> } } _app.js
  46. 46. Opening the framework import App, { Container } from 'next/app' import React from ‘react'; import Player from ‘../components/Player’ export default class MyApp extends App { render () { const { Component, pageProps } = this.props; return <Container> <Component {...pageProps} /> <Player /> </Container> } } _app.js
  47. 47. PUT /api/corner payload: [ ‘baby’ ]
  48. 48. { "index": { "title": "The blog post!", "content": "...", "date": "2019-01-20", } }
  49. 49. { "index": { "title": "The blog post!", "content": "...", "date": "2019-01-20", } } { "index": { "title": "The best blog post evarr!", "content": "...", "date": "2019-01-20", } }
  50. 50. Rule 1: Rely on familiarities Rule 2: Learn with experience Rule 3: Sensible defaults Rule 4: Document wisely
  51. 51. road of trials the abyss " metamorphosis
  52. 52. road of trials the abyss " metamorphosis
  53. 53. Act 3: The boon!
  54. 54. noob
  55. 55. noob
  56. 56. noob
  57. 57. fin.

×