Welcome to zerokspot.com, the personal website of Horst Gutmann.

Archive for javascript

  • Javadoc for JavaScript?

    For personal but also work-related projects I'm currently looking into different coding styles for JavaScript and especially into how to document the source files. As someone who knows Java I was kind of looking for something similar to javadoc. Wikipedia provides a great overview of documentation tools, alby not a complete one. For instance, I couldn't find YUI Doc or pdoc in there.

    Read more about "Javadoc for JavaScript?" ...

    2010/07/11 at 21:13:57

    comments

  • l10n.js: Localise your JavaScripts

    Thanks to a recent article on Ajaxian I just stumbled upon l10n.js, a thin localisation library for JavaScript that build upon the language's native String.toLocaleString() method. Because of this, it gracefully degrades it either the library itself is not available and also if the string to be localised can't be found in a localised form.

    All you need is a localisation file (basically JSON) and the l10n.js library:

    
    <link rel="localizations" href="/path/to/localizations.js"
        type="application/x-i10n+json" />
    <script type="text/javascript" src="/path/to/l10n.js"></script>
    <script type="text/javascript">
    alert("hello".toLocaleString());
    </script>
    

    This example uses one big file for all the localised "hello"s of the world. If you want to stick with one file per language, you can use the "hreflang" attribute with the link-tag.

    This looks like a really nice and clean approach to the whole localised JavaScript issue. One problem, that this solution doesn't handle, though, is variable-replacement. For this you still need some printf- or low-level templating implementation.

    [via ajaxian.com]

    2010/05/16 at 19:04:46

    comments

  • QuickTip: JQueryTools Overlays and Accessibility

    During the latest minor design changes here (no sidebar anymore, yay!) I placed the information that was previously provided within a sidebar next to every entry into a couple of lightbox elements in combination with a small dropdown menu. Both were implemented so that non-javascript-enabled browsers should still be able to at least access the content, but I wasn't yet certain how to add the keyboard navigation to it. 

    Today I browsed a bit around and found a really nice article by Roger Johansson about "Lightboxes and keyboard accessiblity". He basically sums up all my gripes I normally have with lightbox implementations out there; and just to pick one here: They lose focus. Most already come with a keybinding for closing them again, but they normally out of the box don't restore your focus from before entering them. jQuery Tools' overlays seem not to be an exception here, but it is rather simple to give an overlay some memory in this regard :-) 

    Read more about "QuickTip: JQueryTools Overlays and Accessibility" ...

    2009/12/22 at 21:11:07

    comments

  • Custom filebrowser callbacks in CKEditor 3.0

    Last weekend I started playing around a little bit with the recently released CKEditor 3.0. I had wanted to have a WYSIWYG editor for my blog for quite a while now but was always either too lazy in general or just too lazy to write a custom uploader.  Last weekend was perfect for something like that, though, since I didn't receive a book and a DVD-box I had originally planed to spend the whole weekend on ;-)

    Read more about "Custom filebrowser callbacks in CKEditor 3.0" ...

    2009/09/09 at 16:43:21

    comments

  • Cufón: Font-replacement made easy

    For quite some time now I've (at least with half an eye) been looking around for a font-replacement technique that doesn't require Flash, and Cufón by Simo Kinnunen seems to do the job quite well so far. Instead of Flash, it relies on Canvas and VML in a pure JavaScript container.

    Getting it to work is really easy, too: Just upload a font on http://cufon.shoqolate.com/generate/ and you will get a JavaScript file like MyFont_400.font.js. One click to the left you get the main Cufón library that does the actual font-replacement. Link both into your document and then use Cufon.replace('h1') to, for instance, replace the h1-element of your page.

    <script type="text/javascript" src="/js/cufon-yui.js"></script>
    <script type="text/javascript" src="/js/MyFont_400.font.js"></script>
    <script type="text/javascript">
        Cufon.replace('h1');
    </script>
    

    That's all. For starters. Cufón also exposes some options for each replacement and a way to easily bind fonts to dynamically created elements through its API. For now I'm just playing around with it, but it really looks promising :-)

    2009/08/10 at 18:48:13

    comments

  • Want to convert me to Dojo?

    Since I first heard about jQuery back when the discussion started if it should integrated into Drupal's core distribution, I've been using it on nearly every website I've been working on since then. At the recent Barcamp in Munich Wolfram Kriesing presented some of the features the Dojo toolkit has to offer that might make me a switcher. I still like jQuery quite a lot, but I simply wanted to take a look at some of Dojo's features and found a couple of them that I really enjoy using on a project right now :-)

    Read more about "Want to convert me to Dojo?" ...

    2008/11/08 at 20:57:14

    comments

  • Create a Timeline in JavaScript with SIMILE

    From time to time you get to a point, where you want to present information in a way that makes it easy to see and understand their temporal relationship. For these occasions, timelines are a pretty neat tool, yet how do you do something like this within a website in a way that keeps the whole thing interactive?

    Besides the usual suspects (the 1000th Flash/Flex implementation), there are also some JavaScript based solutions, that get the job done quite well. For a project that is part of my master thesis right now, we were looking for a simple timeline tool that could easily be embedded and extended to our needs and found the SIMILE Project of the MIT. Part of this project is also a timeline implementation in JavaScript that is remarkably flexible.

    Read more about "Create a Timeline in JavaScript with SIMILE" ...

    2008/06/25 at 17:41:02

    comments

  • Packing JavaScript with Django

    Since I started messing around with JavaScript a little more for work and also finally used this opportunity for getting some knowledge when it comes to YUI, I was about to look into ways to efficiently deploy separated JavaScript files (or at least I planned to get into this topic this weekend). I guess for Django, there is now - thanks to Pedro Vale Lima - a really nice management command that makes packaging and compressing multiple JavaScripts easy.

    Naturally you could also write an external script using one of the many packers that are already out there, but with the integration right into Django it's just much cleaner :-)

    2008/01/17 at 21:23:33

    comments

  • JQuery 1.2

    Today seems to be a good day for releasing new software. At least that's what Sony and John Resig might have thought when they woke up today :-) And this is a quite special update for the popular JQuery JavaScript library.

    Read more about "JQuery 1.2" ...

    2007/09/11 at 20:26:15

    comments

  • Accesskeys on PennyArcade

    Yet another probably for most people out there quite useless Greasemonkey script. It simply adds "n" as accesskey to navigate to the next comic strip and "b" to navigate to the previous comic strip on Penny Arcade as soon as you're viewing a strip.

    Read more about "Accesskeys on PennyArcade" ...

    2006/12/30 at 17:20:04

    comments

See all tags used for weblog posts