The guy behind the blog nihilogic.dk decided to partake in an exercise of game design using JavaScript. Choosing the classic Super Mario Brothers game, his proof of concept is considered a success. The whole thing weighs in at 14Kb and the entire game is contained in one JavaScript file.

“There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.”

Granted it is very brief and not entirely true to the original gameplay, it is still downright impressive that something like this can even be accomplished with a web-based scripting language.

If you are interested in seeing how the whole thing works, you can sneak a peek at the uncompressed code.

Keeping with the 8-bit video game theme of this post, Tetrageddon.com is an odd Flash site. The style of the music and graphics is in homage to the 8-bit videogames of years past but there are no explicit directions about what to do. Instead you are left to fend for yourself exploring the site and uncovering the wacky consequences of your voyage. The whole thing is “CENTALLY MHALLENGED” to borrow from the sites page title.

Tip: on the main page hold the up arrow key and make sure you allow pop-ups for the site.

If anyone can figure out something interesting to do at Tetrageddon.com let me know in the comments.

For the past month I have been working feverishly on the latest release of America’s Best Graduate Schools put out by U.S.News and World Report. Today we finally launched it to the public and I wanted to show the difference between last year’s release and this years.

The old Best Graduate pages were constructed with several year old PHP code and hosted on a couple of Apache servers. Much of the layout was done with tables (spacer .gifs ugh…) which became very difficult to manage after many annual revisions.

This year we decided to re-do the whole thing with a new look and a new Zope backend. The HTML and CSS code was completely modular for maximum efficiency. It was actually a lot of fun seeing the whole thing come together.

So have a look around the new site and let me know what you think. You can see the official blog post about all of the new features and functionality here. If you want to know some of the technical details, leave a comment. There was a lot of mental energy that went into the design of the site. But now I’m beat from the pre-launch stress and look forward to getting to bed before midnight.

When I heard that Flickr is nearly ready to add video capabilities, I felt a bit queasy. Flickr is the leader in the photo sharing arena by a large margin. The main reason it reached critical mass was because of the community it built around the photos uploaded by users. It is also one of the harder sites to monetize since display advertising clashes with photo viewing and there isn’t enough text content for contextual advertising to work. The $24.95 Pro memberships (which can be given as gifts *wink wink*) keep Flickr from being a total money-sink.

Photos require a large chunk of bandwidth to serve up to the millions of Flickr users, but that is nothing compared to the overhead of video. This is probably a moot point considering the company is running off the pipes of it’s owner, web pioneer Yahoo.

While there are good and bad reasons for Flickr to add video, I don’t think they can compete in such a crowded video-sharing marketplace. Did Vimeo, Viddler, Revver, Daily Motion, Blip.tv, Veoh, and the all mighty YouTube leave anything for Flickr to improve upon? It looks like Flickr will have a long, uphill battle to even catch up to the middle of the pack.

Flickr has a huge community around photos and what they need to do is offer more photo related services. Many artists on Flickr have an account at 3rd party sites for selling prints of their work. Flickr could offer fine-art prints from members that opt-in to sell their photos with the service. This way Flickr would tie the browsing and buying experience together and could make a small profit off of each transaction. An example of another art site doing something similar is DeviantART.com (see my prints.).

DeviantART lets users upload as many photos as they want with no file size limitations, just like Flickr. Every member is eligible to opt-in to the standard print account which allows them to sell their art work and receive a cut of the profits. A Premium print account is available for $24.95 a year and offers more print customizations and a higher share of the profits from a sale. These are not run-of-the-mill snapshot prints like at Walmart or Costco. DeviantART does high quality work. The beauty of this is DeviantART can set a base price which includes a tiny profit with every transaction as well as helping out it’s communities. When community members profit, the company profits as well.

Flickr needs something like this! How could such a megasite sit back and watch it’s users point potential customers off to make a purchase? This is money that they are letting go by under their noses. And what do they plan to do with video anyways? Nobody has figured out a successful way to monetize video.

Flickr already has an intuitive interface for uploading, tagging, and browsing photos, why can’t they add selling photos to that list? I feel offering a way for the community to profit off their work while helping Flickr earn it’s keep makes everyone happy. This is way better than adding the latest me-too feature that is already pervasive throughout the web.

Fred & Sharon from fredandsharonsmovies.com might have the time to help you with your next movie. Check out this convincing advert they put together:

And if you need some eye catching graphics take a look at Mark Chaffer’s work at chaffagraffix.co.uk.

Oh brother, the Internet is full of weird people.

(via Dr. Tiki)

Mauricio Guimaraes is a web designer and illustrator from Brazil. His online portfolio at mauricio.art.br demonstrates this in a unique way by creating an immersible environment that shows off his world.

It is not a very complex site, only having 4 sections in total, but it more than makes up for depth with rich visuals. The drawings are detailed, animations smooth, and overall is just down right fun to explore and poke around. Flash is the perfect medium for a site of this nature as the non-linear layout is hard to translate in HTML. Plus, Mauricio avoided many of the things that depress the user experience of a Flash site like music blaring, lengthy load times, and an non-interactive intro screen.

So if you are ever thinking about doing a pure Flash website, take a good hard look at your requirements and make sure the medium supports the desired user experience.

First, you should probably understand rickrolling.

Now check out this clever Doom mod which features a new weapon designed to rickroll the monsters to death.

You can download the .WAD file to do this yourself if you have ZDoom at http://thekins.googlepages.com/rrdoom.rar

Adobe released it’s Air product today making it official and peeling off the cliche` beta title. Adobe Air allows developers to build desktop applications using web technologies like HTML for structure, CSS for presentation, and JavaScript for behavior. Flash and Flex, Adobe’s own web technologies, are also rolled up in the mix. Professional authoring tools like Flash CS3 and Dreamweaver CS3 saw updates today to allow development within the popular tools. Aptana also offers a free plugin for their open-source development tool Aptana Studio.

I have been playing with Air apps for the last couple of months while the product was still in beta. There are a lot of clever applications that are more like widgets then conventional full-blown desktop programs. For example, the Adobe sample app PixelPerfect was a simple ruler overlay letting you measure anything on your screen. This little tool comes in handy for web development where there aren’t any rulers on the side or measuring tools like in Photoshop. Powerhouse auction site eBay created their own Air app that banishes the concept of refreshing the page so bidders can watch their auctions in real time. But perhaps the biggest crowd of Air apps belongs to Twitter clients. Thwirl, Spaz, Tweetr, and Snitter are just a handful.

I thought John Ballinger had let his Twitter client, Tweetr, go to pasture without an update since the end of November. With each new Air beta release more functionality would break edging me towards Jonathan Snook’s Snitter. But alas, Tweetr is alive again with version 3.0 launching today to coincide with the official Air release. I’m happy as a clam to have my favorite Twitter client back and to see so many great ideas that have seemingly sprung out of Air.

Valentin Agachi’s XHTML Challenge takes the rating meme under the hood letting users compare websites based on their (X)HTML markup. When a challenge is set up between two sites, a PHP script from XHTMLChallege.com slurps up the source code and begins a detailed analysis. Facets for competition include which doctype was declared, validation, content length in bytes, a ratio of content/markup/ and whitespace, use of conditional comments, and the number of table tags used.

As I have written about before, there is more than just HTML that goes into making a sexy source. I think XHTML Challenge could expand their analysis to include the number and positioning of CSS and JavaScript files, use of microformats (which results in more semantic, though bulkier, markup), and total file size of all components. This would paint a better overall picture of all the necessary components that go into a modern design.

Frontend web developers, like myself, take a lot of pride in how we structure our code. HTML coding is all about semantic, well-organized markup that is as small as possible while providing a solid structure for the content. It is good to see that there are others out there like myself that can appreciate the thought and planning that goes in to the under pinnings of a modern website.

XHTML Challenge should not be confused with Command Shift 3 which rates the aesthetics of a site not its code. Maybe the two sites should get together producing the ultimate website rating tool!

via (Web Designer Wall)

I finally finished kingkool68.com this weekend. The purpose of the site is to aggregate all of my activity on the web into one single stream, commonly referred to as a lifestream. To mash all of my RSS feeds of activity together I used SimpleLife, a WordPress adaption of the SimplePie PHP script. For the front end I used jQuery, a JavaScript library, as well as standard HTML and CSS.

Most lifestreams I saw didn’t include a way to for end users to filter out certain items, so I built one into my lifestream application. Using the power of CSS selectors built in to jQuery, I wrote a function to grab the list items with a certain class and then toggle a fade effect. If the item was hidden the script would fade them in, otherwise it would fade them out. You can see the 13 lines of code I wrote to do this for yourself.

Once I finished writing the filter code I noticed it didn’t work in Safari browsers even though it performed flawlessly in Firefox. After debugging and digging around on the net for possible solutions I stumbled upon the Safari Developer FAQ. Did you know you can unlock a debugging menu in Safari? The FAQ provides details on how to reveal it and then by holding Apple+Shift+J shows a JavaScript console alerting you to any errors. I used this to figure out that you can’t use ‘class’ as a variable name even though Firefox doesn’t seem to mind. I haven’t tested the site on any version of Microsoft’s Internet Explorer which is notorious for choking on standard code.

So if you ever wanted to see everything I do on the web, checkout kingkool68.com. And if you want to add me as a friend on any of these popular sites, click the small icons associated with each item to take you directly to my profile for that site. The next step would be to package my modifications up into a WordPress plugin so anyone could run a lifestream just like mine. In the meantime if you have any problems implementing a lifestream on your own, leave a question in the comments of this post and I’ll do the best I can to help out. Happy lifestreaming!

Beats me, but according to willdietcokekill.us it will. Pretty self explanatory site with a clever domain. I wish it would link to some information supporting its stance as I drink Diet Coke every Tuesday for the most part.

Kudos Jon Maxfield of Saint George, Utah!