HTML Screencast (Inserting Tags)

Here you have it, the first screencast to demonstrate HTML editing (8 MB).

It’s a bit short in content as it only shows how to create HTML tags (and a bit of multi-line editing towards the end), but at seven and a half minute, I figured it was best to keep it like that, and I guess tag creation is the number one productivity gain for HTML writers.

Update: Be vary of kernel panics if you pause and restart this video (see comments). Probably only a problem on Intel Macs.

Update 2: I have re-encoded the screencast as H.264 with 10fps and automatic key frame generation. I think that’s fairly standard, so hopefully no more kernel panics or crashing Quicktime. And if you wonder, yes, it’s now 306 KB larger!

The things demonstrated are (from the HTML bundle):

  • Insert Open/Close Tag (With Current Word)
  • per tag snippets
  • Wrap Selection in Open/Close Tag
  • Wrap Each Selected Line in Open/Close Tag
  • Insert Closing Tag

And my sidestepping show how to re-indent, fold, and edit a bunch of list items, including how to edit the end of each line, when they have variable lengths, using Edit Each Line in Selection.

21 Comments

  1. 28 Apr 2006 | # Andrew Dupont wrote…

    I'll report this to Apple as well, but I wanted to let you know that I get a kernel panic whenever I try to pause and restart this movie in QuickTime. It's happened three times now. It might just be my machine (MacBook Pro) or the result of some weird confluence of events, but I thought I'd mention it in case anyone else had the same problem.

  2. 28 Apr 2006 | # jim wrote…

    Andrew Dupont: :( same for me here on a dualg5. i can start and stop but cant move back or forward. dont get a kernel panic but it kills quicktime.

    anyway, well done screencast! keep on rulin.

  3. 28 Apr 2006 | # Allan Odgaard wrote…

    It works for me (Dual G5). Though single-stepping it backwards is a tad quirky because I saved this with very few key frames (but it does work for me).

    I am using Quicktime Pro, maybe that matters.

  4. 28 Apr 2006 | # Bryce Thornton wrote…

    Yep, I get the kernal panic as well on my Dual Core iMac. I'm glad it's not just my machine!

  5. 28 Apr 2006 | # Adam wrote…

    Yeah, when I opened this video (after downloading it to my desktop so I could get play control) I skipped ahead, looking for the "Edit each line" section, since that's all I was interested in. After skipping ahead, QT Player started beach-balling, and intermittently playing audio while video remained frozen. Upon perhaps my third pause-again-play-again attempt, QT crashed. Something appears to be wrong with your Quicktime files — are you compressing them in an odd way? If you're using any crazy custom options, I'd lose them and just go with a straight Sorenson / H264 codec compression.

  6. 28 Apr 2006 | # Adam wrote…

    (I use Quicktime Pro as well.) Oh, and I'm on a Dual G5, not an intel.

  7. 28 Apr 2006 | # A daffy wrote…

    Your screencast are great and I learn so much new every time. I think I have to go through the manual and test every single command out there. Didn't i.e. know about the Unwrap Paragraph etc in the Text menu.

    while true print thanks

  8. 28 Apr 2006 | # mike wrote…

    I learn a lot from the screencasts as well. I quickly went to follow along with this new and discovered that ctrl+< doesn't insert open/close tags for me. I'm guessing one of the bundles I have installed is breaking it, along I don't know which one. Any ideas?

  9. 28 Apr 2006 | # Allan Odgaard wrote…

    mike: start by checking if you have the Automation -> Run Command -> HTML -> Insert Open / Close Tag.

    To “reset” your bundles to the default, simply move them away from ~/Library/Application Support/TextMate (or /Library/… if you have a svn checkout there).

  10. 29 Apr 2006 | # Allan Odgaard wrote…

    mike: also be aware that on US keymaps the < character is obtained usng ⇧, (shift comma) so ⌃< is really ⌃⇧, (control shift comma).

  11. 01 May 2006 | # Quentin Stafford-Fraser wrote…

    Allan –

    This is great – the more of these I see, the more I appreciate TextMate!

    Is there/should there be a central location where screencasts are listed – perhaps on the wiki? The 'TextMate in action' link on the front page probably misses quite a few now…

  12. 02 May 2006 | # bochenn wrote…

    strange…i can only hear the voice but i get a white screen. no video. any help? i'm new on mac 's. on windows it works just great. thanks

  13. 08 May 2006 | # Scrafford wrote…

    My own issue is quite different — it's with the command itself. I was quite excited watching the video, but when I tried it, I got this message:

    /tmp/temp_textmate.JNZ4Fa:17: parse error when single_no_arg: "<#{tag} />" ^ (The "JNZ4Fa" portion changes with each attempt. And I'm mousing the command to make sure there's no keymapping problems.)

    Blowing away the existing bundles didn't seem to do anything. I'm no regex wizard; does anyone have any ideas?

  14. 09 May 2006 | # karl wrote…

    (BBedit User) TextMate is really cool. Last time I tried I was thrilled by the options and certain features. I'm still sticking to BBedit for now, maybe because by habits, but also I remember when I tried the TextMate demo version to have things missing.

    • no syntax checker
    • no contextual editing of attributes and elements complying to the DTD you are using.

    In fact, I would love to have a mix of both tools :) World is never perfect ;)

    things on my wish list:

    • an RDF/n3 editor
    • an XML editor. Load the XML Schema or RelaxNG or DTD. and then you have contextual editing. Big lack in the Mac world if you remove all the java apps.

    Really good job from the TextMate team. Encouraging. I'll give it another try.

  15. 09 May 2006 | # Allan Odgaard wrote…

    Scrafford: Unfortunately I recently “broke” the command so that it requires Ruby 1.8 (the default for Tiger users).

    You can fix this locally by going into the bundle editor (Window menu), and edit the Insert Open/Close Tag command (in the HTML bundle) to be the following:

    #!/usr/bin/env ruby
    single = /^(img|meta|link|input|base|area|col|frame|param)$/i
    single_no_arguments = /^(br|hr)$/i
    
    tag = STDIN.read
    if(tag == '')
      print("<${1:p}>$2</${1/\\s.*//}>")
    elsif(single.match(tag))
      print("<#{tag} $1/>")
    elsif(single_no_arguments.match(tag))
      print("<#{tag} />")
    else
      print("<#{tag}>$1</#{tag.strip[/^\S+/]}>")
    end
    
  16. 12 May 2006 | # marios wrote…

    The screencast is quite clean now, also the voice is clearly hearable, after playing around a little with equilizer settings on my g4mini.

    I initially found aout about Textmate from Cameron Adams Site and kept reading a couple of reviews and forum posts in order to verify, whether this could be the right tool for me to author both XHTML and TXP.

    The new manual is very nicely wrritten also, After my second day with this texteditor, I feel that I should defenitely learn to use it, learn as many shortcuts I can handle and study the manual. It feels very natural to work with and it's extensibility for various other uses is obvious, after inspecting this app a little indepth.

    However,I keep forgetting the various shortcuts, it's a little like learning the bicycle.A cheatsheet print would be definetly usefull in the beginning.

    I think personally, that this app is better for me then BBedit (Too bloated) and purchase is on my priority list.

    regards, marios

  17. 18 May 2006 | # marios wrote…

    < a href="http://www.consking.com/screencasts/customize_bundle_tabbing5.mov">Hereis one screencast, that shows, how to create and customize a snippet bundle for absolute beginners, just like myself. Note.: There is no sound, since I don't have the necessary equipment yet.

    regards

  18. 07 Nov 2006 | # Jeremy wrote…

    I am so curious… What software do you use for screencasts?

  19. 07 Dec 2006 | # Jim wrote…

    I'm just downloaded the demo version (Version 1.5.4 (1324)) after watching this screencast and am really impressed.

    However, for some reason when typing br and then hitting the return key, the tag doesn't close itself (even when I set the doctype to xhtml 1.0 strict). Any ideas why this might be?

    Cheers,

    Jim

  20. 10 Mar 2007 | # seth wrote…

    Just downloaded textmate (i'm slow) to give this a whirl and it doesn't quite work as in the screencast. Single tags don't get the trailing slash and the tags aren't mirrored when I edit them. Any idea what gives?

  21. 10 Mar 2007 | # Allan Odgaard wrote…

    seth: as for single tags no longer being XHTML, search Help → Release Notes for TM_XHTML.

    Tags being mirrored, that’s only when inserting them.

Comments closed, you can use the mailing list for discussion.