You are currently browsing the archives for the javascript tag.

[whatever] in JavaScript

Those last days, there has been a lot of fuss all around about Orto1 and HotRuby. I've also heard of a project of OCaml bytecode interpreter in JS, though I have no link for it at this time. Having some Java/Ruby/OCaml bytecode interpreted in JavaScript is quite nice, but I just can't see what's new/interesting about that.

There are quite a few other languages for which a JS interpreter is available: Basic, Scheme, Lisp, Prolog. Even Javascript can be interpreted in JS using Narcissus2. If this is not enough for you, I can add Brainfuck or even other esoteric languages.

I guess you'll say that all of those bring nothing interesting to the browser and that using compiled bytecode instead of parsing/interpreting source code is much faster. The latter can be easily forgotten, what about an x86 interpreter3 ?

Nevertheless, what is the easiest thing to write ?

  • plain JavaScript, with a powerful library such as JQuery
  • some bloated Java using cluttered GUI tools which were not built to output web components

A few years ago, writing some JavaScript meant dealing with cross browser issues. Today, JS is much more friendly, thanks to a lot of libraries. Moreover, I'm pretty sure the next move will be SSJS4, is there a reason (other than because I can) for porting Java/Ruby to JS ?

  1. John Resig talks about it here []
  2. It's disturbing, I know []
  3. Some guys really have a lot of free time.. []
  4. I'll write an article about that someday []

JavaScript RegExp Oddities

While fooling around with some RegExp, I realized that those actually were functions. I thought it was quite funny and I started toying a little with them, and came across this very unusual result:

// applying a regexp and matching against it seem to be the same…
/(a+)/("aaaaa");       // == ["aaaaa", "aaaaa"];
"aaaaa".match(/(a+)/); // == ["aaaaa", "aaaaa"];

// except when using the "global" flag…
/(a+)/g("aaaaa");       // == ["aaaaa", "aaaaa"];
"aaaaa".match(/(a+)/g); // == "aaaaa"

I'm really trying hard to figure out why I get these results, but just can't.

Does anyone have an idea ?

SILC

SILC here stands for Stuff I'd Like to Code (there's a pun here…) and is an experimental recurring article concept.

About three or four times a week I have the urge to code something (usually completely useless), so I launch vim and start typing some code. Then for some reason or another, I save the file, quit, and never open it again. Those reason are usually one of the following :

  • WTF: The concept is awesome, but it's completely useless
  • YAL: I'd have to use XXX in order to have easy bindings to YYY, and XXX would be yet another language to learn (where XXX might be perl and YYY some random library)
  • Yawn: It's too easy
  • Nike (just do it): I've resolved all the interesting problems, I know exactly what the code will look like, I just have to type it and debug, and that's boring
  • 10pm: I've been coding for a few hours, it's late, and I still need a few hours to finish. The next day I won't even open the file again…
  • N00b: It's just too difficult to implement

Anyway, I do this quite (too) often, so I thought I'd share.

[WTF] Javascript Lexer

One cool thing would be to implement a lexer framework in JavaScript using the awesome search and don't replace trick in order to catch tokens and store them in an array. It would run faster than the usual tokenizers (due to regex optimizations) and it would be more concise, I guess.

src.replace(regex, function (match) {
  /* whatever */
});

[YAL] ncurses rss reader

My feed aggregator is Google Reader. It's fine, but there's a huge delay before a feed is updated. On the other hand, I read mail with mutt, go on IRC with irssi, write text using Vim and use pytone as a music player (any obvious pattern ?). So naturally, I'd like to have a curses based feed reader.

There are a few out there, but they have cluttered ui. I'd like something plain and simple : a togglable left sidebar for feeds/groups of feeds, and the articles ordered by date on the right. That's all. When selecting the article I'd like to have it piped through w3m to get a readable output, and have the ability to open the page in my browser. None of the feed readers I cited can do that, and it's a shame.

The natural reaction to such a frustration is I'll code it myself. There are good Python libraries to deal with RSS files, and a nice interface to ncurses. But then again, I'm no Python jedi master and dealing with ncurses is a curse. So I won't do it.

[10pm] HamlJS

Do you know haml? It's a really nice concept. However, there are only two implementations: in Ruby and PHP. A JavaScript implementation would be nice, and useful. But I got mixed up with the lexing, and spent a few hours on it, and then just went to sleep and never touched the source again.

Arguments’ names in JavaScript

This is more of a reminder to myself, but it can be useful to anyone wishing to add a little more reflection to JS :

Function.prototype.args = function () {
  return this.toString()
    .match(/\(([^)]*)\)/)[1]
    .replace(/\s*/g, ").split(',');
}
function foo (bar, baz, quux) {
  return 42;
}
foo.args();
// = [bar, baz, quux]

JSlide, JavaScript slideshows

A few days ago I came across S5, a nice script for doing slideshows in the browser. However, I didn't like a few things in it, and one of them is that one presentation has to take up all the space on the screen. One nice thing I wanted to be able to do is to embed a presentation in, say, a blog article. That's how I came with JSlide…

You can watch an example here, and see how it degrades when there is no javascript here.

Here's the way to create your own presentations :

First you have to download the following files (and the prototype library) :

Next, add the following markup to your page/article/whatever :

<div style="width:400px; height:300px; margin:0 auto">
  <div class="jslide">
    <!– Meta information : each line is optional –>
    <div class="meta">
      <div class="title">[title]</div>
      <div class="author">[author]</div>
      <div class="company">[company]</div>
      <div class="date">[date]</div>
    </div>

    <!– This generates automatically the titlepage –>
    <div class="frame titlepage"> </div>

    <!– A simple slide –>
    <div class="frame">
      <h3>[title]</h3>
      [content]
    </div>

    <!– A slide, shown steps by steps –>
    <div class="frame">
      <ul class="steps">
        <li>[step 1]</li>
        <li>[step 2]</li>
        <li>[step 3]</li>
      </ul>
    </div>
  </div>
</div>

That's it. You can also add the fullscreen class to the div having the jslide class if you want the slideshow to start in fullscreen (of course, this will work for only one slideshow on the page…).