Boosting Developer Productivity
through Effective Development Tools
Sandhika Galih | Lecturer & Founder Web Programming UNPAS
Slide 2
Slide 2 text
Development Tools
Slide 3
Slide 3 text
Development Tools ?
Slide 4
Slide 4 text
Developer Tools ?
Slide 5
Slide 5 text
“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?”
Slide 6
Slide 6 text
PROBLEM Result
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Kenapa ?
developer repot-repot bikin / pakai tools
Slide 13
Slide 13 text
Developer Experience
Slide 14
Slide 14 text
“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”
Slide 15
Slide 15 text
“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”
Slide 16
Slide 16 text
“Great DX is all about optimizing the developers’ workflows,
processes, work environment, and more.”
- Getclockwise, “What is Developer Experience”
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
● …
Slide 22
Slide 22 text
Extensions
● Prettier
● Live Server
● Git Lens
● Live Share
● Auto Rename Tag
● …
Slide 23
Slide 23 text
Web Browser
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Web Browser
Developer Tools
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Command Palette: ctrl + p
Slide 31
Slide 31 text
Command Palette: > [command]
Slide 32
Slide 32 text
Query Selector Shorthand
Slide 33
Slide 33 text
Query Selector Shorthand: $(‘selector’)
Slide 34
Slide 34 text
Query Selector Shorthand: $$(‘selector’)
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Extensions
● Web Developer Tools
● ColorPick Eyedropper
● WhatFont?
● CSS Viewer
● Mobile Simulator
● Wappalyzer
● …
Recap
● Developer experience penting
● Developer tools membantu menciptakan DX yang baik
● Semua teknologi ada toolsnya
● Kuasai tools
● Buat sendiri tools
“Boosting Developer Productivity through
Effective Development Tools”
Sandhika Galih - Lecturer & Founder Web Programming UNPAS
Slide 62
Slide 62 text
Developer Tools ?
Slide 63
Slide 63 text
- 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.”
Slide 64
Slide 64 text
PROBLEM Result
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Kenapa ?
developer repot-repot bikin / pakai tools
Slide 71
Slide 71 text
Developer Experience
Slide 72
Slide 72 text
- 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.”
Slide 73
Slide 73 text
- 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.”
Slide 74
Slide 74 text
- Getclockwise, “What is Developer Experience”
“Great DX is all about optimizing the developers’ workflows, processes, work
environment, and more.”
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
● …
Slide 79
Slide 79 text
Extensions
● Prettier
● Live Server
● Git Lens
● Live Share
● Auto Rename Tag
● …
Slide 80
Slide 80 text
Web Browser
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Web Browser
Developer tools
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
Command Palette: ctrl + p
Slide 88
Slide 88 text
Command Palette: > [command]
Slide 89
Slide 89 text
Query Selector Shorthand
Slide 90
Slide 90 text
Query Selector Shorthand: $(‘selector’)
Slide 91
Slide 91 text
Query Selector Shorthand: $$(‘selector’)
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
Extensions
● Web Developer Tools
● ColorPick Eyedropper
● WhatFont?
● CSS Viewer
● Mobile Simulator
● Wappalyzer
● …
Recap
● Developer experience penting
● Developer tools membantu menciptakan DX yang baik
● Semua teknologi ada toolsnya
● Kuasai tools
● Buat sendiri tools