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
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? ⏳
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!