Posts tagged with “Web Technology”
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.
How do you display a list with a huge number of items? Easy: just paginate – split your list into several pages and let the user click through them one by one. Google does it with their search results, every forum software in existence splits a thread after N posts, my Blog only shows 8 entries at most. It's a solved problem.
Some years ago Microsoft had a different idea with MSN Search (now Bing): Infinite Scroll. If you do an image search on Bing and scroll down far enough, more results will be loaded on the fly and appended to the current page. There's no need to click a Next Page link. I don't know if they were the first to do it, but they certainly were the first I remember.
Today, many sites are using Infinite Scroll or the slightly less ambitious Load More button. And it constantly annoys me. It's not so much that most implementations are done very carelessly, but that the idea is inherently broken and really can't be done right.
Take Twitter for example. Say I'm writing a Blog post about how John Gruber was all the rage about X a few days ago. Naturally, I want to have a link to his tweets from said day in my post, so I visit twitter.com/gruber, click the more button two or three times, till I see those tweets and… now what? How do I link to this page? Do I have to link directly to twitter.com/gruber and tell my readers to click more a couple of times? How often? Well, it of course depends on how chatty he's been since I posted my story.
You might say that this issue could be easily fixed by utilizing the Fragment Part of the URL. So after I click more the URL would change to twitter.com/gruber#20, twitter.com/gruber#40, twitter.com/gruber#60 and so on (or better yet, counting from the first tweet). Now, what if I'd want to link to Grubers first 20 tweets? The URL would be twitter.com/gruber#8900 and the page would load nearly 9000 tweets? I don't think that's a good idea.
The non-link-ability is not the only problem of this technique: How do I jump to the end of the list? Or generally, how do I jump to a specific item (e.g. the first unread post in a forum thread)? What if the page becomes so long that my browser struggles to keep up?
It ultimately boils down to what we gain by using a Load More button instead of Next Page. And the only answer I can think of, is a few milliseconds of time I'd otherwise would've spent waiting for a whole new page to load. I also believe that appending items to a page is even more confusing for the user than going to a new page. After you've clicked more a few times, the list becomes so long that you easily get lost in it.
Pagination might not be as cool as all the AJAX stuff, but for navigating a list of “infinite” size I really can't think of a better approach. It doesn't have to be the old school pagination with a Next Page link though – you could build something that utilizes AJAX, caches the next page in advance, makes use of your mouse' scroll wheel etc. Ultimately it just has to be something that says “you are viewing items 340–380 of 920”: Providing a fixed sized, moving window into a set of items, instead of the fixed position, growing window that is Load More.
Google introduced Chrome Frame today, which is essentially a plugin for Internet Explorer to use Chrome/Webkit as it's rendering engine. This at first may seem like one of Google's Aprils Fool's jokes or an attempt to make Microsoft even more embarrassed of IE. However, when looked at closely, the Idea to bring Chrome to IE is very clever and might actually work!
The problem is clear: While Microsoft certainly fixed many issues of the now infamous IE 6 in their newer versions, IE 8 still has many many problems and is far behind in terms of standard compatibility, features and speed. This has hindered many sites from using new technologies and ideas and oftentimes forces developers to backpedal in order to still support IE. So how do we get people to switch to a different browser?
Imagine you're visiting a website and are greeted with a message like “Your browser is not supported by this website. Please download one of the following browsers...”. Would you do it?
For the average user, the answer is of course no. There are way to many hurdles to overcome. Many people don't even know what a browser is. For them, IE is the Internet. They won't understand why they need to install a new software and they won't know what to do if they wanted to switch. Even if a user exactly knows what a browser is and how to install software, he'd still have to trust the browser vendor that this new software won't do any harm to his PC and he'd also have to invest some time to get familiar with it. It's just not worth the effort.
Now imagine you're visiting this website and you get the message “You need the plugin XYZ to view this site”. Imagine this plugin was created by Google – a company you know and can be sure of that they won't harm your PC. Installation of this plugin is just one click away. You don't have to download or install anything manually and your browser will look and behave exactly the way it used to.
Google Chrome Frame is just that. It's only a plugin, but for web developers it has the same benefits as if the user switched to another browser. If you're working on a high-end website that you can't possibly get working in IE (like Google itself does with Wave), or that just would work better with a standard compliant rendering engine, then Chrome Frame seems like a very good answer.
Avatars are important. They are everywhere and there is virtually no community driven website out there, where you can’t upload an image of yourself or what you want to be associated with. These images help us to immediately recognize our friends without even having to look at their names.
We don’t care too much about what is depicted, but how it looks: the overall color and shapes. Yet, all the default avatars of our beloved Web 2.0 sites look exactly the same. And while Twitter’s default Avatar can at least be considered cute, most others are dull and unimaginative.
Why not create a unique image, based on the users name, on the fly? This avatar could be temporarily used till the user can be bothered with uploading one by himself. This would give even the laziest user a chance to be instantly recognized by his friends.
My InstantAvatar PHP class does exactly this: it generates (more or less) unique avatars on the fly. Here are some examples of what it can do:
Read complete post »
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 »
Clean URLs are everywhere. No Web 2.0 site is complete without them and many of the Internet heavyweights retrofitted their sites in an attempt to please search engines. Many of them completely miss the point.
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.
