Posts tagged with “Javascript”
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!
As Tag Clouds become more and more common in blogging systems, one wonders why this intuitive approach hasn’t been used for other media types like images or videos (or video previews).
The idea to scale elements in their relevance of importance is not new, however it wasn’t possible to do this with images in websites so far. HTML and CSS offer no direct mechanism to position images of different sizes in a pleasing way.
To solve this problem, I developed a simple PHP script that calculates sizes of DIVs based on their importance and arranges them in a fixed-width grid, while closely maintaining their order. The grid is pre-generated by PHP with a width of 768px in order to fit on small screens, but scales with the help of JavaScript to fit in any browser window.
Here’s a demo of how this actually looks in action: Grid-Solver Demo
There are also some real-life examples (both NSFW!) of this technique at pr0gramm.com and pornsnotdead.com.
Read complete post »
