Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Create a delightful web with good DX

Create a delightful web with good DX

Presentations with a workshop to show how web development process in the professional technology company

Irfan Maulana

July 21, 2019

More Decks by Irfan Maulana

Other Decks in Programming


  1. Create a delightful web with good DX Irfan Maulana Principal

    Engineer @ Tokopedia
  2. ‍ A career path 2013 2015 2018 2019 2013 Java

    Web Developer 2015 Frontend Devs 2018 Frontend Devs 2019 Principal Eng
  3. • A family man, father of two cutes children •

    Graduate with almost zero skill in coding • 11-finger typers • Have my first laptop in 2011 Fun facts
  4. Connect with me

  5. What is delightful website? ☕

  6. ‍♂ What users expect Secure Secure in network and information

    Speed How fast your website being loaded and ready for interactivity Engaging Good looking, easy navigation, clear call to action, responsive,
  7. How to increase your Web speed?

  8. Don’t put everything into your web. 1.

  9. Only request necessary resources. 2.

  10. Compress everythings. 3.

  11. How to increase your Web Engagement?

  12. Research and give what users needs 1.

  13. Keep it simple 2.

  14. Keep it fast 3.

  15. How to increase your Web Security?

  16. Https for the win. 1.

  17. Secure your network 2.

  18. Pen-test before release 3.

  19. Nobody’s 100% secure 4.

  20. What is DX? ⏳

  21. None
  22. None
  23. Developer is also Users

  24. ‍♂ What web devs wants Easy Integration No more manual

    job running, manual code standard check, manual deployment, etc. Cool Stacks Coding with a cool, modern and latest technology stacks Hot Reload All the results will auto reload and showing the latest when you save the code
  25. ‍ It’s coding time. Let’s get our hands dirty!

  26. Prerequisite • Latest Node.js, alongside with NPM/Yarn • Git •

    Github Account • Cool Text Editor (do not use notepad ya!) • Basic knowledge in HTML, CSS, JS • Fast Internet please
  27. We will learn about • The latest cool tech stack

    for develop website • Collaborations standard in development process • Continuous integration and delivery All with the industry standard...
  28. Basic Website • Learn basic HTML, CSS, JS

  29. CSS Framework Teaser • Using CSS Framework: Bootstrap / Bulma

    / Tailwind
  30. Better DX with Modern Stacks • Learn basic Webpack/Parcel •

    Move to CSS Preprocessor • Move to Modern JS
  31. Git for Collaborations • Learn basic Git • Learn free

    static hosting: GH Pages/Netlify
  32. CI/CD for save your time • Learn basic CI/CD: Travis

    CI / CircleCI • Static Code Analysis: Codacy /Code Climate
  33. JS Framework Teaser • Learn basic JS Framework: React /

    Vue / Svelte • Common CI/CD for JS framework
  34. Key Takeaways • Be curious, never ending learning, adapt with

    latest updates. • The tools made your job easier, but it won’t solve all your job tasks. • The person behind makes a difference.
  35. Download slide https:/ /s.id/delightful-web

  36. Download source code https:/ /s.id/delightful-web-code

  37. Ghibli API https:/ /ghibliapi.herokuapp.com/

  38. Thank You!