faster frontend development with textmate

47
faster markup with textmate

Upload: marc-tobias-kunisch

Post on 14-Jul-2015

1.932 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: faster frontend development with textmate

faster markup with textmate

Page 2: faster frontend development with textmate

“the missing text editor for mac os x”

Page 3: faster frontend development with textmate

it’s cheap(€48.75)

Page 4: faster frontend development with textmate

it’s very good

Page 5: faster frontend development with textmate

http://macromates.com/

Page 6: faster frontend development with textmate

bundles for html, css, javascript, jquery, ...

Page 7: faster frontend development with textmate

the html bundle

Page 8: faster frontend development with textmate

⇥ trigger

Page 9: faster frontend development with textmate

doctype ⇥ head ⇥ body ⇥ style ⇥ form ⇥ link ⇥ table ⇥

Page 10: faster frontend development with textmate

select any bundle item⌃⌘T

Page 11: faster frontend development with textmate

insert open/close tag⌃⇧,

(with selection)

Page 12: faster frontend development with textmate

wrap selection in tag⌃⇧W

Page 13: faster frontend development with textmate

add closing tag⌥⌘.

Page 14: faster frontend development with textmate

wrap selection in link⌃⇧L

Page 15: faster frontend development with textmate

wrap each line in tags⌃⇧⌘W

Page 16: faster frontend development with textmate

entities/URL escaping⌘&

Page 17: faster frontend development with textmate

add comment⌘/

Page 18: faster frontend development with textmate

refresh all running browsers⌘R

Page 19: faster frontend development with textmate

show web preview⌃⌥⌘P

Page 20: faster frontend development with textmate

documentation for selected element⌃H

validate html⌃⇧V

html tidy⌃⇧H

Page 21: faster frontend development with textmate

text transformations

Page 22: faster frontend development with textmate

escape trigger

Page 23: faster frontend development with textmate

indent selection

Page 24: faster frontend development with textmate

edit each line in selection

Page 25: faster frontend development with textmate

unwrap selection

Page 26: faster frontend development with textmate

context menu (spell check)⌥ F2

Page 27: faster frontend development with textmate

convert to uppercase⌃U

convert to lowercase⌃⇧U

convert to titlecase⌃⌥U

Page 28: faster frontend development with textmate

join⌃⇧J

Page 29: faster frontend development with textmate

writing css

Page 30: faster frontend development with textmate

change syntax to css⌃⌥⇧C

Page 31: faster frontend development with textmate

escape trigger

Page 32: faster frontend development with textmate

⇥ trigger

Page 33: faster frontend development with textmate

background ⇥font ⇥border ⇥clear ⇥position ⇥! ⇥

you get the idea...

Page 34: faster frontend development with textmate

documentation for selected element⌃H

validate css⌃⇧V

Page 35: faster frontend development with textmate

java script

Page 36: faster frontend development with textmate

fun ⇥ if ⇥

timeout ⇥

Page 37: faster frontend development with textmate

jquery

Page 38: faster frontend development with textmate

get the bundle first

Page 39: faster frontend development with textmate

http://macromates.com/svn/Bundles/trunk/Bundles/

mkdir -p /Library/Application\ Support/TextMate/Bundlescd /Library/Application\ Support/TextMate/Bundlessvn co http://svn.textmate.org/trunk/Bundles/jquery.tmbundle

Page 40: faster frontend development with textmate

$ ⇥ready ⇥.append ⇥.find ⇥

Page 41: faster frontend development with textmate

create your own

Page 42: faster frontend development with textmate

bundle editor

Page 43: faster frontend development with textmate

for example:

green ⇥absolute ⇥letsgo ⇥

Page 45: faster frontend development with textmate

questions?

Page 46: faster frontend development with textmate

thanks!

Page 47: faster frontend development with textmate

marc tobias kunisch

marctobiaskunisch.commindgarden.de

twitter.com/tobestobs