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
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

Transcript

  1. ‍ A career path 2013 2015 2018 2019 2013 Java

    Web Developer 2015 Frontend Devs 2018 Frontend Devs 2019 Principal Eng
  2. • 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
  3. ‍♂ 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,
  4. ‍♂ 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
  5. 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
  6. 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...
  7. Better DX with Modern Stacks • Learn basic Webpack/Parcel •

    Move to CSS Preprocessor • Move to Modern JS
  8. CI/CD for save your time • Learn basic CI/CD: Travis

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

    Vue / Svelte • Common CI/CD for JS framework
  10. 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.