Boosting Developer Productivity through Effective Development Tools

Transcript

1. Boosting Developer Productivity
   through Effective Development Tools
   Sandhika Galih | Lecturer & Founder Web Programming UNPAS
   

   View Slide

2. Development Tools
   

   View Slide

3. Development Tools ?
   

   View Slide

4. Developer Tools ?
   

   View Slide

5. “Developer tools are software applications, programming
   frameworks or libraries that serve niche functions meant to
   improve developer productivity, efficiency and experience.”
   - nobledesktop.com, “What Is Developer Tools?”
   

   View Slide

6. PROBLEM Result
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Kenapa ?
    developer repot-repot bikin / pakai tools
    

    View Slide

13. Developer Experience
    

    View Slide

14. “Developer experience refers to how easy or difficult it is for a
    developer to perform essential tasks needed to implement a
    change.”
    - Microsoft, “Developer Experience”
    

    View Slide

15. “Developer experience, or DX for short, describes the overall
    feelings and perceptions a developer has while interacting with
    a technical product.”
    - Getclockwise, “What is Developer Experience”
    

    View Slide

16. “Great DX is all about optimizing the developers’ workflows,
    processes, work environment, and more.”
    - Getclockwise, “What is Developer Experience”
    

    View Slide

17. Developer Experience
    meningkatkan
    

    View Slide

18. Code Editor
    

    View Slide

19. ● Syntax Highlighting
    ● Intellisense
    ● Code Navigation
    ● Snippet
    ● AI Tools
    ● Setting Sync
    ● Emmet
    ● …
    Visual Studio Code
    

    View Slide

20. Emmet
    

    View Slide

21. Keyboard Shortcut
    ● Home / End : Go to beginning/end of line
    ● Alt + ↑ / ↓ : Move line up/down
    ● Shift + Alt + ↓ / ↑ : Copy line up/down
    ● Ctrl + Shift + K : Delete line
    ● Ctrl+D : Add selection to next Find match
    ● Ctrl+K Ctrl+D : Move last selection to
    next Find match
    ● Ctrl+Shift+L : Select all occurrences of
    current selection
    ● …
    

    View Slide

22. Extensions
    ● Prettier
    ● Live Server
    ● Git Lens
    ● Live Share
    ● Auto Rename Tag
    ● …
    

    View Slide

23. Web Browser
    

    View Slide

24. View Slide

25. View Slide

26. Web Browser
    Developer Tools
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. Command Palette: ctrl + p
    

    View Slide

31. Command Palette: > [command]
    

    View Slide

32. Query Selector Shorthand
    

    View Slide

33. Query Selector Shorthand: $(‘selector’)
    

    View Slide

34. Query Selector Shorthand: $$(‘selector’)
    

    View Slide

35. View Slide

36. View Slide

37. Extensions
    ● Web Developer Tools
    ● ColorPick Eyedropper
    ● WhatFont?
    ● CSS Viewer
    ● Mobile Simulator
    ● Wappalyzer
    ● …
    

    View Slide

38. Web Development
    

    View Slide

39. Front-End Developer Tools
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. 2022.stateofcss.com
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. framework
    router
    component
    styling
    

    View Slide

49. View Slide

50. 2022.stateofjs.com
    

    View Slide

51. contoh
    

    View Slide

52. View Slide

53. "Your new, lightweight, Javascript framework."
    - alpinejs.dev
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. Recap
    ● Developer experience penting
    ● Developer tools membantu menciptakan DX yang baik
    ● Semua teknologi ada toolsnya
    ● Kuasai tools
    ● Buat sendiri tools
    

    View Slide

59. Selesai.
    

    View Slide

60. TERIMA KASIH
    @sandhikagalih
    @sandhikagalih
    @sandhika.galih
    discord.gg/wpu
    

    View Slide

61. “Boosting Developer Productivity through
    Effective Development Tools”
    Sandhika Galih - Lecturer & Founder Web Programming UNPAS
    

    View Slide

62. Developer Tools ?
    

    View Slide

63. - nobledesktop.com, “What Is Developer Tools?”
    “Developer tools are software applications, programming frameworks or
    libraries that serve niche functions meant to improve developer
    productivity, efficiency and experience.”
    

    View Slide

64. PROBLEM Result
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. Kenapa ?
    developer repot-repot bikin / pakai tools
    

    View Slide

71. Developer Experience
    

    View Slide

72. - Microsoft, “Developer Experience”
    “Developer experience refers to how easy or difficult it is for a developer to
    perform essential tasks needed to implement a change.”
    

    View Slide

73. - Getclockwise, “What is Developer Experience”
    “Developer experience, or DX for short, describes the overall feelings and
    perceptions a developer has while interacting with a technical product.”
    

    View Slide

74. - Getclockwise, “What is Developer Experience”
    “Great DX is all about optimizing the developers’ workflows, processes, work
    environment, and more.”
    

    View Slide

75. Code Editor
    

    View Slide

76. ● Syntax Highlighting
    ● Intellisense
    ● Code Navigation
    ● Snippet
    ● AI Tools
    ● Setting Sync
    ● Emmet
    

    View Slide

77. Emmet
    

    View Slide

78. Keyboard Shortcut
    ● Home / End : Go to beginning/end of line
    ● Alt + ↑ / ↓ : Move line up/down
    ● Shift + Alt + ↓ / ↑ : Copy line up/down
    ● Ctrl + Shift + K : Delete line
    ● Ctrl+D : Add selection to next Find match
    ● Ctrl+K Ctrl+D : Move last selection to next Find
    match
    ● Ctrl+Shift+L : Select all occurrences of current
    selection
    ● …
    

    View Slide

79. Extensions
    ● Prettier
    ● Live Server
    ● Git Lens
    ● Live Share
    ● Auto Rename Tag
    ● …
    

    View Slide

80. Web Browser
    

    View Slide

81. View Slide

82. View Slide

83. Web Browser
    Developer tools
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. Command Palette: ctrl + p
    

    View Slide

88. Command Palette: > [command]
    

    View Slide

89. Query Selector Shorthand
    

    View Slide

90. Query Selector Shorthand: $(‘selector’)
    

    View Slide

91. Query Selector Shorthand: $$(‘selector’)
    

    View Slide

92. View Slide

93. View Slide

94. Extensions
    ● Web Developer Tools
    ● ColorPick Eyedropper
    ● WhatFont?
    ● CSS Viewer
    ● Mobile Simulator
    ● Wappalyzer
    ● …
    

    View Slide

95. Front-end Developer Tools
    

    View Slide

96. View Slide

97. View Slide

98. View Slide

99. 2022.stateofcss.com
    

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. framework
     router
     component
     styling
     

     View Slide

105. View Slide

106. 2022.stateofjs.com
     

     View Slide

107. contoh
     

     View Slide

108. View Slide

109. "Your new, lightweight, Javascript framework."
     - alpinejs.dev
     

     View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. Recap
     ● Developer experience penting
     ● Developer tools membantu menciptakan DX yang baik
     ● Semua teknologi ada toolsnya
     ● Kuasai tools
     ● Buat sendiri tools
     

     View Slide

115. Selesai.
     

     View Slide

116. TERIMA KASIH
     @sandhikagalih
     @sandhikagalih
     @sandhika.galih
     discord.gg/wpu
     

     View Slide