Create a delightful web with good DX

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

Transcript

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

   View Slide

2. ‍ A career path
   2013 2015 2018 2019
   2013
   Java Web Developer
   2015
   Frontend Devs
   2018
   Frontend Devs
   2019
   Principal Eng
   

   View Slide

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
   

   View Slide

4. Connect with me
   

   View Slide

5. What is delightful website?
   ☕
   

   View Slide

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,
   

   View Slide

7. How to increase your
   Web speed?
   

   View Slide

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

   View Slide

9. Only request necessary
   resources.
   2.
   

   View Slide

10. Compress everythings.
    3.
    

    View Slide

11. How to increase your
    Web Engagement?
    

    View Slide

12. Research and give what
    users needs
    1.
    

    View Slide

13. Keep it simple
    2.
    

    View Slide

14. Keep it fast
    3.
    

    View Slide

15. How to increase your
    Web Security?
    

    View Slide

16. Https for the win.
    1.
    

    View Slide

17. Secure your network
    2.
    

    View Slide

18. Pen-test before release
    3.
    

    View Slide

19. Nobody’s 100% secure
    4.
    

    View Slide

20. What is DX?
    ⏳
    

    View Slide

21. View Slide

22. View Slide

23. Developer is also Users
    

    View Slide

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
    

    View Slide

25. ‍ It’s coding time.
    Let’s get our hands dirty!
    

    View Slide

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
    

    View Slide

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

    View Slide

28. Basic Website
    ● Learn basic HTML, CSS, JS
    

    View Slide

29. CSS Framework Teaser
    ● Using CSS Framework:
    Bootstrap / Bulma / Tailwind
    

    View Slide

30. Better DX with Modern
    Stacks
    ● Learn basic Webpack/Parcel
    ● Move to CSS Preprocessor
    ● Move to Modern JS
    

    View Slide

31. Git for Collaborations
    ● Learn basic Git
    ● Learn free static hosting:
    GH Pages/Netlify
    

    View Slide

32. CI/CD for save your time
    ● Learn basic CI/CD:
    Travis CI / CircleCI
    ● Static Code Analysis:
    Codacy /Code Climate
    

    View Slide

33. JS Framework Teaser
    ● Learn basic JS Framework:
    React / Vue / Svelte
    ● Common CI/CD for JS framework
    

    View Slide

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.
    

    View Slide

35. Download slide
    https:/
    /s.id/delightful-web
    

    View Slide

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

    View Slide

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

    View Slide

38. Thank You!
    

    View Slide