This tool visualizes how Source Maps work. The Source Map spec allows you translate source code, but to have browsers map positions in translated source code back to their original positions in the original source code. This way you can debug other languages in the browser with the normal debugging tools, even when the actual code runs JS. Say CoffeeScript or maybe even Python.
Kind of the replacement for my tag literal project (below), this project reads your JavaScript source code and translates custom DOM syntax to actual JS. See the interactive demo of the tag literals project below to see how cool that would be.
This is a JS profiler slash code coverage tool that is easy to set up and use. It has no other dependencies but a decent browser. After transforming your JS to be able to track which parts are executed, it will run it and display the results in a heatmap of the source code. This all happens live, real time results. You can also work with two tabs. One tab would run the code and the other tab would show the results. This was a two day project so it's not exactly the cleanest code I've ever written. But it works pretty good :)
The Gonzales project is about parsing JavaScript as fast as possible. Anything is allowed as long as your parser does all the work and does it in JS. This was my response to comparing ZeParser to other JS parsers while ignoring the overhead each parser makes when it produces a parse tree. This project tries to level the playing field.
The successor of ZeParser. This is currently the fastest (ES5) JavaScript parser available. It is very clean and to the point. There is no parse tree and no meta information "out of the box". The parser is very easy to read and extend though, which makes it perfect to use it as a basis for whatever it is you need. It comes with a full test suit.
When 0x10c was announced I was immediately enthousiastic about the idea. When the CPU spec was released I almost immediately created an emulator for it. This is kind of a work in progress, although I don't think I'll ever continue on it. It's mainly up here for reference, and your viewing pleasure.
This demo for JS1K is an interpreter for the Whitespace language.
Wouldn't it be great to simply create DOM elements in your JS without tedious DOM syntax? So much code is required to setup something that's very simple and consise in regular HTML and CSS. Something like this was started with E4X. It also died there. So this is an experiment with a very simple API. You can use this live coding experiment to see how you could use tags as if they were regular expressions, and see what it would translate to in DOM syntax (on the right). That syntax will do exactly what you want it to do. Try it!
This project was created for a workshop I did together with Kornel at FalsyValues. It was a two day workshop and we explained how to create a Mario game on the second day. This project was hacked together in about three days. Includes a simple editor that uses localstorage. I did create an extended version of this project, but that was never published.
This is my first serious (ES5) JavaScript parser. It was used as the basis of Zeon (see below). Written completely in JS it runs both on the client (browser) and server (nodejs). It was succeeded by ZeParser2 (see above).
Zeon is the result of me playing around with parsing js. It is a visual static analysis tool for JavaScript / ECMAScript which completely runs on the client side. It shows you where possible problems might exist in your scripts by way of visual cues. Most JSLint warnings are supported, some type inference is built in and some minor editor bits as well.
JSGoodies (js.gd) is my linkdump and personal link shortner service. I read a lot of tweets and see many interesting links pass by through twitter or other sources. This is where I dump them, in order to keep my own twitter account from being an ever bigger fire hose ;) There's no rss, but you can follow it through @jsgoodies on twitter. Whenever I post anything, it gets pushed to that account automagically.
Coercion is the source of a lot of confusion for people who are new to js. In fact, it's the source for frustration even for seasoned scripters. This tool aims to help you explain what happens behind the scenes of the js interpreter when it compares two values. It follows coercion rules as laid out in the ES5 specification.
This is the result of a hackathon. 24 hours of coding with three people. We were inspired by Syndicate (hence the name Enterprise ;). This is the game as it was when we presented it, after the hackathon.
To end the discussion of whether to add a semi-colon or not in js, I've created an ASI test. It uses my js parser and serves you a few small code examples, without any semi-colons. Can you figure out where the parser will insert a semi-colon? The test has proven to be very difficult, as was obviously intended. So whenever you land into a discussion concerning the use of semi-colons, just make them do this test to win that argument. (Note that this test usesthe very slow esparser (below), and not ZeParser (above)...)
This is an ECMAScript parser (or a JavaScript parser) written in js. While very slow, it was my first successfull attempt at writing a JS parser. It uses the original CFG (a way to specify a language) as input and validates the JS that way. It does a full exhaustive recursive parsing of the input source code and visually displays the syntax parse tree so you can learn from it. While slow, it's very valid. In fact, I still use this to verify minor syntactic edge cases to this day. For my fast parsers see the ZeParser line of parsers, above.
This is a generic CFG parser in javascript. Uses a custom syntax that's close to an actual CFG (so converting it should be easy). You can use it to turn any cfg into a digitally usable format. This is part of my ecmascript parser. The live demo (and static version) also serve as a very good ECMAScript production reference.
This is my own "submission" (I wasn't allowed to actually compete ;) for my js1k competition. It's a brainfuck interpreter. I've basically compressed the code from a small 3k script (already using relatively short notations) down to a 1k script. Used a lot of hacks for it. Be sure to read the blog post about it as well.
I run and maintain the JS1K competition. I started this competition in response to the, in my view, rediculous rules set for the #aea10k competition. The goal is simple, create a pure js demo and keep its size under 1k. A simple shim was given and there are very little rules otherwise. There were over 700 submissions and 380 competing entries in the first year. The site contains many gems, all in 1k of JavaScript.
I like creating fractals. They are simple instructions to do something that looks very complex. The result can't even be seen in the code, only in the output. This specific fractal is the Dragon fractal, or the Jurassic Park fractal. The fractal represents the folding of paper, but the algorithm I've created never reaches the middle fold and so it spins around.
This is my first experiment using the video tag. Uses canvas and video to convert a regular video to an ASCII video. It optionally also uses web workers. A lot of optimization has gone into this project. You can upload your own video and share the results of converting your video. You can read more on the blog post or start converting your own video now.
Used to be my own DOM library. Adds syntactic sugar for manipulating the DOM and applying styles to elements in a time where jQuery was still young. Includes a fade and roll animation. It uses chaining, which allows for neat code. Would not recommend using it anymore. It is not being maintained.
A tile based engine in an era where canvas was still very new. Comes with a complete client-side tile and map editor, which saves everything to local storage. The tiles are actually img elements which was part of the experiment. You can move the actor around and the scene will start scrolling when it reaches an edge. The only place where canvas is being used is the tile editor.
Demonstration that browsers were ready for pure JS based animations (in a time where browsers were still quite slow). This demo is ported from a flash demo. Does not do anything special. Fun fact: the tree would move left-to-right in Opera when I initially released this. They fixed that eventually.
Simple demo demonstrating the parallax effect using divs. It uses divs because canvas was still very young. This was just a proof of concept for me. The demo is interactive, use your mouse.
This was a "plugin" (or whatever) for Google Maps (one for v2 and later ported to v3) that groups clustered markers. This was a feature that Google Maps clearly lacked, but was very desirable. This script extends the work of ClusterMarker.
This script mimics the behavior of the GLayer object in Google Maps (v2). The difference is that you can hook into the loading and displaying of markers. This allows you to load over a thousand markers without pain (that used to be a big problem in GMv2). It used a delegate approach, rather than individual elements to do the event stuff. Major perf increase at the time.