Navigation
RSS Feeds
Toolbox for front-end coders: HTML, CSS, JS
Hi all,
In a previous post, i offered an extended HTML-CSS Toolbox. I've been working on it lately, reorganizing it completely, using Abbreviations together with regular snippets at last, etc. And, for the sake of completedness, i thought that i'd add JavaScript ressources to this toolbox, so that it would cover the core client-side languages of the Web.
So here it is, with a new name, reorganized snippets, more documentation links, Abbreviations, etc.
I will gladly welcome your comments and suggestions. In particular, i need some help for the JavaScript part. My knowledge of JavaScript is quite limited (basics + occassionnal UI stuff with jQuery). So:
- Did i miss something on the documentation side?
- I didn't include any JS snippets, although i did create the folder in anticipation. What should/could i put in there?
In the future i hope to be able to refine this toolbox package, and maybe package it as an extension that will be available through the extension repository.
Versions:
- 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 |
|---|---|
| ClientSideLanguages-0.9.5.kpz | 161.42 KB |
| ClientSideLanguages-0.9.7.kpz | 167.96 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.