faster markup with
     textmate
“the missing text
editor for mac os x”
it’s cheap
(€48.75)
it’s very good
http://macromates.com/
bundles for html, css,
 javascript, jquery, ...
the html bundle
⇥ trigger
doctype ⇥
head ⇥
body ⇥
style ⇥
form ⇥
link ⇥
table ⇥
select any bundle item
         ⌃⌘T
insert open/close tag
        ⌃⇧,
      (with selection)
wrap selection in tag
      ⌃⇧W
add closing tag
    ⌥⌘.
wrap selection in link
       ⌃⇧L
wrap each line in tags
     ⌃⇧⌘W
entities/URL escaping
         ⌘&
add comment
     ⌘/
refresh all running browsers
             ⌘R
show web preview
    ⌃⌥⌘P
documentation for selected element
               ⌃H

           validate html
               ⌃⇧V

            html tidy
 ...
text transformations
escape trigger
indent selection
edit each line in
    selection
unwrap selection
context menu
 (spell check)
    ⌥ F2
convert to uppercase
         ⌃U
convert to lowercase
       ⌃⇧U
 convert to titlecase
       ⌃⌥U
join
⌃⇧J
writing css
change syntax to css
     ⌃⌥⇧C
escape trigger
⇥ trigger
background ⇥
font ⇥
border ⇥
clear ⇥
position ⇥
!⇥
you get the idea...
documentation for selected element
               ⌃H

           validate css
              ⌃⇧V
java script
fun ⇥
    if ⇥
timeout ⇥
jquery
get the bundle first
http://macromates.com/svn/Bundles/trunk/Bundles/

mkdir -p /Library/Application Support/TextMate/Bundles
cd /Library/Appli...
$⇥
ready ⇥
.append ⇥
.find ⇥
create your own
bundle editor
for example:

green ⇥
absolute ⇥
letsgo ⇥
http://macromates.com/
       screencasts
questions?
thanks!
marc tobias kunisch

  marctobiaskunisch.com
      mindgarden.de
  twitter.com/tobestobs
Upcoming SlideShare
Loading in …5
×

faster frontend development with textmate

2,359 views

Published on

session for barcamplondon 6 about textmate shortcuts and functionality that makes frontend development easier

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,359
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
18
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

faster frontend development with textmate

  1. 1. faster markup with textmate
  2. 2. “the missing text editor for mac os x”
  3. 3. it’s cheap (€48.75)
  4. 4. it’s very good
  5. 5. http://macromates.com/
  6. 6. bundles for html, css, javascript, jquery, ...
  7. 7. the html bundle
  8. 8. ⇥ trigger
  9. 9. doctype ⇥ head ⇥ body ⇥ style ⇥ form ⇥ link ⇥ table ⇥
  10. 10. select any bundle item ⌃⌘T
  11. 11. insert open/close tag ⌃⇧, (with selection)
  12. 12. wrap selection in tag ⌃⇧W
  13. 13. add closing tag ⌥⌘.
  14. 14. wrap selection in link ⌃⇧L
  15. 15. wrap each line in tags ⌃⇧⌘W
  16. 16. entities/URL escaping ⌘&
  17. 17. add comment ⌘/
  18. 18. refresh all running browsers ⌘R
  19. 19. show web preview ⌃⌥⌘P
  20. 20. documentation for selected element ⌃H validate html ⌃⇧V html tidy ⌃⇧H
  21. 21. text transformations
  22. 22. escape trigger
  23. 23. indent selection
  24. 24. edit each line in selection
  25. 25. unwrap selection
  26. 26. context menu (spell check) ⌥ F2
  27. 27. convert to uppercase ⌃U convert to lowercase ⌃⇧U convert to titlecase ⌃⌥U
  28. 28. join ⌃⇧J
  29. 29. writing css
  30. 30. change syntax to css ⌃⌥⇧C
  31. 31. escape trigger
  32. 32. ⇥ trigger
  33. 33. background ⇥ font ⇥ border ⇥ clear ⇥ position ⇥ !⇥ you get the idea...
  34. 34. documentation for selected element ⌃H validate css ⌃⇧V
  35. 35. java script
  36. 36. fun ⇥ if ⇥ timeout ⇥
  37. 37. jquery
  38. 38. get the bundle first
  39. 39. http://macromates.com/svn/Bundles/trunk/Bundles/ mkdir -p /Library/Application Support/TextMate/Bundles cd /Library/Application Support/TextMate/Bundles svn co http://svn.textmate.org/trunk/Bundles/jquery.tmbundle
  40. 40. $⇥ ready ⇥ .append ⇥ .find ⇥
  41. 41. create your own
  42. 42. bundle editor
  43. 43. for example: green ⇥ absolute ⇥ letsgo ⇥
  44. 44. http://macromates.com/ screencasts
  45. 45. questions?
  46. 46. thanks!
  47. 47. marc tobias kunisch marctobiaskunisch.com mindgarden.de twitter.com/tobestobs

×