Vim for
Front-end Developers
Harry Roberts • @csswizardry
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Hey!
Slide 4
Slide 4 text
I’m Harry…
Consultant Performance Engineer
Leeds, UK
@csswizardry
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
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
Clearing the Air
Slide 12
Slide 12 text
Quitting Vim
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
:q
Just like ⌘+Q
Slide 15
Slide 15 text
:wq
Just like
⌘+S ⌘+Q
Slide 16
Slide 16 text
:q!
Force quit
without saving
Slide 17
Slide 17 text
Vim is ugly…
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
…but that’s a
solvable problem
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Getting to Know Your Ex
Slide 22
Slide 22 text
The Ex Editor
Ex is a ‘line editor’
Vim is a ‘screen editor’
Ex is sub-editor within Vim
Slide 23
Slide 23 text
:wq
:%s/FOO/BAR/g
:v/FOO/d
Save and quit
Replace all
instances of
FOO with BAR
Delete all lines
that don’t contain FOO
Slide 24
Slide 24 text
“
“ex was eventually given a full-screen visual
interface, thereby becoming the vi text editor.
“Although there is overlap between ex and vi
functionality, some things can only be done
with ex commands…”
— csswz.it/2D5WLPp
Slide 25
Slide 25 text
ed » em » ex » vi » Vim
1971
1975
1976
1976
1991
Slide 26
Slide 26 text
Vim Has a Steep
Learning Curve
Slide 27
Slide 27 text
Productivity
Time
Slide 28
Slide 28 text
Natural Language
Text Editing
Slide 29
Slide 29 text
[cdyv=][iatf][w{"pt)sB]
Verbs
Motions
Objects
Slide 30
Slide 30 text
c i w
h n o
a s r
n i d
g d _
e e _
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
v a t
i r a
s o g
u u s
a n _
l d _
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
c i p
h n a
a s r
n i a
g d _
e e _
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Reformat Messy Code
Slide 37
Slide 37 text
=it
Reformat code
inside tags
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Tabs vs. Spaces
Slide 40
Slide 40 text
:retab
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
vi}
:retab
Visualise
in braces
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Change Case of Strings
Slide 45
Slide 45 text
gU / gu
Go uppercase Go lowercase
Slide 46
Slide 46 text
gUt:
Go uppercase ’til the :
Slide 47
Slide 47 text
guiw
Go lowercase
in current word
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
gUi}
Go uppercase
in braces
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Alphabetise CSS
Slide 52
Slide 52 text
Alphabetic CSS
1.You’re wrong
2.Automate it with a commit hook etc.
3.Get your editor to do it for you
Don’t do
it manually
Slide 53
Slide 53 text
vi{
:sort
Visualise code in
current braces
Sort it