Posts tagged with “Javascript”
My entry for the JS1k contest is a JavaScript Syntax Highlighter implemented in 1023 bytes of JavaScript – just one byte short of the contest limit. I also submitted an uncompressed and somewhat more readable version of the source.
The highlighter recognizes keywords, strings, comments (single and multi line), numbers, regexp and punctuations. And as far as I can tell, it works perfectly. It handles escaped characters as well as /* "strings" in comments */ and "comments // in strings" correctly.
I really doubt that I'm going to win anything with this though, as there are already many other unbelievably awesome demos.
Update: Stripped a few more bytes (1005 now) and formatted the source so it's actually readable. I also made the script a Quine – a program that prints its own source. You can find the new version here.
More than two years ago, I created a Flash Animation for my university class. Today, I converted the whole thing to plain Javascript and HTML5, using the new <canvas> tag to draw and the <audio> tag for music playback. It now runs smoother than it ever did in Flash.
Without further ado: Venetianization / HTML5 Animation
Some technical notes: For the original Flash Animation I used ActionScript 3 and created my own classes. Javascript doesn't have classes per se, but you can build something that looks and feels exactly like it. MooTools did an awesome job at that. Converting my ActionScript classes to MooTools classes was a no-brainer.
I was able to reuse most of the code with some basic search and replace throughout the source. One thing however, that is (to date) completely missing in Javascript, is the ability to analyze the current sound spectrum of an audio file. I ended up extracting the raw values of the spectrum with a sampling rate of 15Hz (which is enough for an animation that initially ran at 30Hz) and put them in a large array in one of the source files.
The thing that annoyed me the most however, is that I now have the music in two different formats: OGG Vorbis for Opera, Firefox and Chrome, and MP3 for Safari. I totally understand that Firefox, being open source and all, can't include MP3 support. What I don't get, is that Apple doesn't support OGG Vorbis – an audio format that is clearly superior to MP3 – instead, they choose to sit on their high horse and twiddle their thumbs. This is exactly the behavior that made Internet Explorer a laughable side note.
Side note: Of course none of this works in any version of Internet Explorer.
Sorry for the lack of updates. I’ve been quite busy with a huge project that I can hopefully show you in some weeks. And I can assure you Yuckfu isn’t dead either.
Another thing I finished up yesterday was my new portfolio. Not that I haven’t done any of these before, but this is one new! And fancy! Did I mention its new?
This time I spent much more time on the actual layout and functionality of the portfolio itself. The main feature is that you can pan the document, just like you would pan the map on Google Maps. This is all done with a small JavaScript, based on the wonderful jQuery library. While the new portfolio makes heavy use of transparent PNGs, the site still looks okay-ish and remains perfectly usable in IE6. It also degrades gracefully for browsers that have JavaScript disabled or the iPhone, which has no notion of onmousemove events.
I also made sure that the print version from all major browsers looks good. The Hartija Css Print Framework is a great starting point for creating specialized print Style Sheets. I only had to tweak some values and remove elements, like the menu, that make no sense in print.
Shaun Inman just released Shortwave, an “extensible quick-search and shortcut system”. It is quiet similar to YubNub or my PL Cmdline in that you use keywords to trigger different search engines.
The problem with all of these tools is the lack of an anonymity. As soon as you want to define your own commands, you’ll have to create an account (YubNub or PL Cmdline), or even upload a file somewhere on your webspace and tell the app the location of this file every time you search for something (Shortwave). So in theory, every search you do through one of these tools can be logged by the website and traced back to you.
I never put a second thought in how to fix this privacy issue, until I realized that Shortwave makes use of a Javascript bookmarklet. So why not move all the functionality on the client sides bookmarklet, instead of passing all commands and search terms through a website? Shaun Inman thought he knew why not:
All searches pass through the Shortwave domain for one very simple, evil-free reason: if all the triggers and destination urls were embedded in the JavaScript bookmark that bookmark would need to be updated every time a new trigger was added–in every browser and on every computer that uses it. That would be an absolute syncing nightmare.
However, you don’t need to put all commnads into the bookmarklet – instead, just let the bookmarklet load an external Javascript file that you put on your website – just like a waves.txt for Shortwave. Sadly my comment in Shaun’s blog stating this idea was quickly deleted (along with my other comment about an XSS vulnerability on the Shortwave site). So here’s my implementation of a Client Side Shortwave I will just call quicksearch.js for the lack of creativity.
Read complete post »
Two weeks ago I filed a bug report on Digg.com, explaining several XSS vulnerabilities and bugs I found. Some of these were (and some still are!) very critical. A day later, I got an automated response to my report:
We’ve contacted our development team who are investigating the issue, and will fix it as soon as possible.
All well and good I thought, but when a few days ago all vulnerabilities were still there, I decided to exploit one of them.
Read complete post »
After two Beta versions of Asaph, here is what I call Asaph 1.0. This is the first proper release, even featuring a readme file and licensing information (GPL v3).
If you’re new to Asaph, watch the screencast on Vimeo.com to see what’s it all about. My own Asaph blog can be found at asaph.phoboslab.org.
Many issues with the RSS-Feed and bugs when editing posts from the admin menu were fixed in this release. I also included another template theme called Stickney which can be activated in the config file.
Download: Asaph version 1.0 – ZIP ~50kb
If you’re updating from a beta version, simply replace all your files (keep the data/ directory!) and edit your settings in lib/asaph_config.class.php. The database layout didn’t change, so there’s no need to invoke the installer.
Read the Asaph project page to learn more.
Based on the wonderful feedback I got on my last post, I just put together a new beta version of Asaph. It fixes the most common problems people had with the last one. This includes:
- Usage of cURL or url fopen wrappers, based on what’s available
- magic_quotes are now reverted automatically
- The RSS Feed should now display images properly
- Lots of smaller bugfixes
Again, to install just unpack the zip, enter your database settings in lib/asaph_config.class.php, upload it to your webserver and point your browser to admin/install.php.
If you already installed the previous version, just replace all the files and skip the install step, as the database layout didn’t change.
Asaph version 1.0 – ZIP ~50kb – Updated: Asaph version 1.0
I have some more plans and ideas for future versions of Asaph. Don’t hold your breath though – this will take some time :)
Over the past few weeks I developed Asaph – a small blogging system, that allows you to instantly post links and images directly from any page on the web. This makes Asaph the most fun to use application if you want to collect and show all the cool things you found elsewhere. Asaph is not a full blown blog and it does not aim to be one – it just does this one task, but it’s pretty good at it.
Watch a screencast to learn what makes Asaph worth using: Asaph Screencast on Vimeo.com
My own Asaph blog can be found at asaph.phoboslab.org.
Asaph is currently in Beta stage. It needs PHP5 and MySQL4 to run. To install, just unpack the zip, enter your database settings in lib/asaph_config.class.php, upload it to your webserver and point your browser to admin/install.php.
Asaph version 1.0 – ZIP ~50kb – Updated: Asaph version 1.0
Feedback is much appreciated!
