Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

The hero's journey Slide 1 The hero's journey Slide 2 The hero's journey Slide 3 The hero's journey Slide 4 The hero's journey Slide 5 The hero's journey Slide 6 The hero's journey Slide 7 The hero's journey Slide 8 The hero's journey Slide 9 The hero's journey Slide 10 The hero's journey Slide 11 The hero's journey Slide 12 The hero's journey Slide 13 The hero's journey Slide 14 The hero's journey Slide 15 The hero's journey Slide 16 The hero's journey Slide 17 The hero's journey Slide 18 The hero's journey Slide 19 The hero's journey Slide 20 The hero's journey Slide 21 The hero's journey Slide 22 The hero's journey Slide 23 The hero's journey Slide 24 The hero's journey Slide 25 The hero's journey Slide 26 The hero's journey Slide 27 The hero's journey Slide 28 The hero's journey Slide 29 The hero's journey Slide 30 The hero's journey Slide 31 The hero's journey Slide 32 The hero's journey Slide 33 The hero's journey Slide 34 The hero's journey Slide 35 The hero's journey Slide 36 The hero's journey Slide 37 The hero's journey Slide 38 The hero's journey Slide 39 The hero's journey Slide 40 The hero's journey Slide 41 The hero's journey Slide 42 The hero's journey Slide 43 The hero's journey Slide 44 The hero's journey Slide 45 The hero's journey Slide 46 The hero's journey Slide 47 The hero's journey Slide 48 The hero's journey Slide 49 The hero's journey Slide 50 The hero's journey Slide 51 The hero's journey Slide 52 The hero's journey Slide 53 The hero's journey Slide 54 The hero's journey Slide 55 The hero's journey Slide 56 The hero's journey Slide 57 The hero's journey Slide 58 The hero's journey Slide 59 The hero's journey Slide 60 The hero's journey Slide 61 The hero's journey Slide 62 The hero's journey Slide 63 The hero's journey Slide 64
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

The hero's journey

Download to read offline

Presentation at devtreff.io on API design

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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.

Presentation at devtreff.io on API design

Views

Total views

186

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×