Dev Ninja Tools
By Dariusz Krolikowski, first presented at DevOpenSpace 2017
Chrome Dev Tools
- In-/Decrement CSS values:
Up / Down
: increment / decrement by 1Alt + Up
: increment by 0.1Shift + Up
: increment by 10Ctrl + Up
: increment by 100
- Analyze hover styles
:hov
for CSS:hover
effects- Debugger (
F8
) for JS effects
- Toggle element classes
- Add/remove classes
- DevTools snippets
- Alternative to bookmarklets
- Throttle CPU / Simulate 3G Network
- Capture full site screenshot:
- Open Command Menu: Ctrl + Shift + P
Capture full size screenshot
Bookmarklets / Browser Addons
Userscripts
- Browser AddOn: Tempermonkey / Greasemonkey
- Manual
Text Snippets
- Tools:
- PhraseExpress (Windows, macOS)
- Textbausteine Plus (Windows)
- WriteYours (Windows)
- Use cases:
- salutation (
sgdh
) - form data (name, e-mail, phone number)
- auto-correct (
udn
→und
) - symbols/emojis (
→
,✔
,✘
)
- salutation (
Emmet
- Dynamic snippets for HTML and CSS
- ID:
#container
- Class:
.item
- Tags:
li.item
- Chaining:
li#id.item
- Nesting:
ul>li
,ul>li.list-item
- Multiplication:
ul>li.list-item*10
- Lorem Ipsum:
lorem
- ID:
- Available for most editors natively or as a plugin
- Enable for JSX/React in VSCode:
API Documentation Browsers
Windows
Shift
+ Right click- File/folder: "Copy as path"
- Explorer: "Open command prompt here"
- Create .dotfiles in Windows Explorer
- Put a dot at the end of the file name:
.gitignore.
- Turn on "Show file extensions"
- Put a dot at the end of the file name:
- Task bar
Shift
+ Left click: Open another instanceCtrl
+Shift
+ Left click: Open an instance with admin rights
Shortcuts
- Problem: learning new shortcuts may be difficult
- Common approach: print a shortcut cheatsheet and start learning it →
- Instead/additionally: create your own shortcuts for the most common tasks
- One at a time to prevent information overload
- Use identic basic shortcuts across all editors
- Display shortcuts:
- Eclipse: MouseFeed
- IntelliJ IDEA: Key Promoter
Bash
- fzf - Fuzzy finder
- My bash aliases
Git Aliases
- My git aliases
View log files
- Notepad++
- VSCode: LogFile Highlighter