ActiveState Community
Navigation
RSS Feeds
Toolbox for front-end coders: HTML, CSS, JS
Posted by florentv
on 2008-11-10 02:41
OS: All / Any
This is a sample toolbox with quite a few snippets, abbreviations, links and ressources for Web front-end coders. If you do HTML, CSS and JavaScript you may be interested in that.
Originally, there were abbreviations for every HTML4 tag. So you could type h3, hit Ctrl+T, and get <h3></h3>. I removed all those very simple abbreviations because Stan Angeloff's HTML Toolkit extension takes care of that need quite well. This extension is great, you should use it. :)
Snippets covering nearly every HTML element are still available in this toolbox (Snippets folder), they're just not duplicated in the Abbreviations folder.
Versions:
- 2009-11-22: Removed 2/3 of HTML abbreviations. Changed a few things. Let's call it a 1.0 release. :)
- 2009-04-14: Added a few snippets for HTML5, and %tabstop0 for many abbreviations. Plus some additions/improvements.
- 2009-01-14: Reorganized the folders as per Nathan's suggestion. With time i found that it made more sense for me as well. There now are three base folders: Abbreviations, Docs and tools, Snippets; each contains one folder per language.
- 2009-01-07: Updating to my latest (and hopefully slightly better) version.
- 2008-11-20: Added some JS ressources.
- 2008-11-19: Added a few JS scripts and quite a few links. Still need some input by JS coders. ;)
| Attachment | Size |
|---|---|
| FrontEndToolbox-1.0.kpz | 137.4 KB |
- Login to post comments
Very nice! The only thing I don't like about it is the way you categorized it, but this is more of a personal preference..
The way I would have done it:
Snippets
.. HTML
.. xHTML
.. CSS
.. Javascript
Tools
.. HTML
.. CSS
etc..
But like I said, this is more of a personal preference :)
I added some JS scripts (and links to scripts) to the package. These are fairly basic stuff for better DOM methods support, document ready event, etc. for the most part.
I still need input on:
1. The whole thing. Have you used it, found it useful, had to reorganize it or modify some snippets?
2. The organisation of folders/snippets. Does it look good for you? How would you do it?
3. The JS part specifically. What are the most useful scripts (preferably not tied to a specific library) for common tasks? (Aim for clarity and overall clarity of the script. A dropdown menu script that doesn't enable keyboard navigation isn't worth considering IMHO, for instance. A script that's not fully cross-browser is not that useful. Etc.)
I now use the interpolation shortcut [[%tabstop0]] a lot in the Abbreviations snippets (the main snippets generally don't use tabstops at all).
In some cases, it's a nice addition, e.g. one that enables you to write "li", hit Ctrl + T, then use the Tab key to move the cursor from
<li>|</li>to<li></li>|.In other cases, it's a bother. I have decided not to put a [[%tabstop0]] after the closing tag of most block-level elements (div, table, etc.), because you're liquely to want to create an empty line inside the element, and then hit Tab to indent the content. A [[%tabstop0]] placed after </div> or after </tr> would disrupt this.
I'm not sure if using [[%tabstop0]] for HTML abbreviations is a good thing altogether. We'll see how it goes.