Boosting Developer Productivity through Effective Development Tools

Transcript

1. Boosting Developer Productivity through Effective Development Tools Sandhika Galih | Lecturer & Founder Web Programming UNPAS
2. Development Tools
3. Development Tools ?
4. Developer Tools ?
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?”
6. PROBLEM Result
12. Kenapa ? developer repot-repot bikin / pakai tools
13. Developer Experience
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”
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”
16. “Great DX is all about optimizing the developers’ workflows, processes, work environment, and more.” - Getclockwise, “What is Developer Experience”
17. Developer Experience meningkatkan
18. Code Editor
19. • Syntax Highlighting • Intellisense • Code Navigation • Snippet • AI Tools • Setting Sync • Emmet • … Visual Studio Code
20. Emmet
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 • …
22. Extensions • Prettier • Live Server • Git Lens • Live Share • Auto Rename Tag • …
23. Web Browser
26. Web Browser Developer Tools
30. Command Palette: ctrl + p
31. Command Palette: > [command]
32. Query Selector Shorthand
33. Query Selector Shorthand: $(‘selector’)
34. Query Selector Shorthand: $$(‘selector’)
37. Extensions • Web Developer Tools • ColorPick Eyedropper • WhatFont? • CSS Viewer • Mobile Simulator • Wappalyzer • …
38. Web Development
39. Front-End Developer Tools
43. 2022.stateofcss.com
48. framework router component styling
50. 2022.stateofjs.com
51. contoh
53. "Your new, lightweight, Javascript framework." - alpinejs.dev
58. Recap • Developer experience penting • Developer tools membantu menciptakan DX yang baik • Semua teknologi ada toolsnya • Kuasai tools • Buat sendiri tools
59. Selesai.
60. TERIMA KASIH @sandhikagalih @sandhikagalih @sandhika.galih discord.gg/wpu
61. “Boosting Developer Productivity through Effective Development Tools” Sandhika Galih - Lecturer & Founder Web Programming UNPAS
62. Developer Tools ?
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.”
64. PROBLEM Result
70. Kenapa ? developer repot-repot bikin / pakai tools
71. Developer Experience
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.”
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.”
74. - Getclockwise, “What is Developer Experience” “Great DX is all about optimizing the developers’ workflows, processes, work environment, and more.”
75. Code Editor
76. • Syntax Highlighting • Intellisense • Code Navigation • Snippet • AI Tools • Setting Sync • Emmet
77. Emmet
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 • …
79. Extensions • Prettier • Live Server • Git Lens • Live Share • Auto Rename Tag • …
80. Web Browser
83. Web Browser Developer tools
87. Command Palette: ctrl + p
88. Command Palette: > [command]
89. Query Selector Shorthand
90. Query Selector Shorthand: $(‘selector’)
91. Query Selector Shorthand: $$(‘selector’)
94. Extensions • Web Developer Tools • ColorPick Eyedropper • WhatFont? • CSS Viewer • Mobile Simulator • Wappalyzer • …
95. Front-end Developer Tools
99. 2022.stateofcss.com
104. framework router component styling
106. 2022.stateofjs.com
107. contoh
109. "Your new, lightweight, Javascript framework." - alpinejs.dev
114. Recap • Developer experience penting • Developer tools membantu menciptakan DX yang baik • Semua teknologi ada toolsnya • Kuasai tools • Buat sendiri tools
115. Selesai.
116. TERIMA KASIH @sandhikagalih @sandhikagalih @sandhika.galih discord.gg/wpu