Yahoo is toying with the idea of adding a “blade” (or more commonly known as a horizontal accordion) interface to some of it’s search results. The blade interface’s claim to fame was its use in the original Xbox 360 dashboard (2005-2008). I’m not confident this feature will last very long. Microsoft moved away from it with subsequent dashboard updates for the Xbox 360. Maybe Yahoo will have better luck.
As data is becoming a medium itself, journalists need to figure out how to tell a story with overwhelming data. This 50 minute documentary explores data visualization as a storytelling medium.
The full version with annotations and links is available at datajournalism.stanford.edu.
The Event Apart conference series is the top-notch gathering for people who make websites. Making its way across various cities in the U.S., the Event Apart tour stopped in Washington, D.C., which I was fortunate enough to attend. The speakers themselves were amazing but interacting with the attendees in real-time during the talks opened a whole new level to the experience. Below are some of the best tweets I curated from each of the sessions. All of which came from afeedapart.com, the official feed aggregator for An Event Apart.
Zeldman started things off with a presentation covering the history of communication from the printing press to HTML5, and everything in between. In 2010, standards based design is no longer fringe, HTML5/CSS3 are viable technologies, and the mobile web is taking shape.
Nicole developed a technique for managing CSS called Object Oriented CSS. The basic premise is to recognize visual patterns and mark them up consistently. Consistent markup results in more compact and efficient CSS code to style which in turn results in more manageable code and faster performing websites.
@franksedivyDan emphasizes that sites don’t need to look and behave exactly the same in every browser. Case in point, he owns http://dowebsitesneedtolookexactlythesameineverybrowser.com/ and http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/. CSS3 is available in modern browsers today and suitable for non-critical elements of a design. His presentation consisted of several demos showcasing how CSS3 could be used to sweeten interfaces.
Luke covered designing Web applications for mobile platforms first before the desktop. This helps you focus a website down to its bare essentials and functionality. The mobile web is exploding, and in some cases, is the only access someone has to the Internet.
Kristina sure knows how to develop a killer content strategy. A website’s message carries through to other places on the web than just the main website. Customer support, social media, and meta data should all echo the tone of the main message. And there is a lot more to a good content strategy than determining what text goes on the front page. How will this content be produced? Who will update it? How often will we add new content?
Jared pointed out that every site on the web came to be from a series of decisions. He has identified 5 styles to design decisions and when each style might be appropriate for a given project. Oh and university homepages feature images of girls under trees way too much.
Those same design patterns that designers use to make things easy for visitors can be flipped around to trick visitors resulting in profits for the companies that employ them. Harry Brignull goes over some of these “Dark Patterns” in his talk at UX Brighton 2010. He also runs the site darkpatterns.org to catalog various common types of Dark Pattern, and to name and shame organizations that use them.
(via Engadget)
This past weekend I got to attend WordCamp Mid-Atlantic, my first WordCamp ever. This years conference took place at Johns Hopkins University in Baltimore City. The venue was a little tricky to get to and the parking situation was a bit limited, but once I got there I had a great time. The place was packed with all kinds of different people who shared one common interest — they all love WordPress.
The camp was divided into two tracks; beginner and pro. I spent the whole day in the pro track and my summary of the talks are below.
Scott Kingsley Clark – WordPress as a CMS
Scott Kingsley Clark led off the first session of the pro track with WordPress as a CMS. His talk covered how to add more fields to the edit screen besides the usual title, post, tags, and categories we’re all used to seeing. He walked through using a plugin called Pods CMS, which he is a co-author of. To me, it seems a little over complicated. I like to use custom meta fields to extend the data contained in posts or pages. For a non-technical user who isn’t comfortable writing PHP, Pods CMS seems like an acceptable solution to get them up and running.
Brad Williams – WordPress Security
I’ve listened to Brad many times as a regular on the SitePoint podcast so it was good to actually meet him in person. His talk (slides available) on WordPress security was well attended as securing a WordPress install is applicable to every blogger. The tips Brad dished out would help anyone lock down their blog with such methods as checking your file permissions, deleting the admin user, changing the prefix on your database tables, and (most importantly) staying up to date with plugins and core updates.
At the end of his talk he mentioned a list of plugins to help with WordPress security.
For lunch a group of us went across the street to Tambers, an indian burger place. Their burgers are perfectly normal but the last page of the menu had indian dishes. Weird. I also got a chance to meet Lokesh Dhakar, the author of the original lightbox script. He’s a smart guy.
Andrew Nacin – Undiscovered APIs
Photo by Nick Whitmoyer
After lunch, Andrew Nacin gave a talk (slides available) about functions and APIs that aren’t as well known about among developers. Since they aren’t well documented, the only way to learn about them is reading the source. I really got a kick out of his talk because I had been looking at some of these functions for a project of mine. Some neat functions include
It is no wonder Andrew knows all of this stuff, he’s one of the seven core contributors for the WordPress project.
I liked in-depth technical talks like this. I was probably one of the few people who this didn’t go over their head.
Jacob Goldman – Customizing WordPress Admin
Photo by Nick Whitmoyer
Customizing the back-end admin screen of WordPress is a big selling-point for Jacob’s consulting business. He feels the admin screen should be as simplified and tailored to the clients need as possible. And contrary to what others might say, WordPress makes it simple to tweak the admin screens.
Much of what Jacob talked about was removing sections like menu items that aren’t used and the default widgets on the dashboard. He added his own custom widgets to the dashboard to point to a contact form if the clients need more help. Speaking of help, you can also customize the contextual help menu tab that appears on practically every page. Adding your own help text is a great way to avoid people asking you the same questions over and over. At the least, you can tell them to check the help tab on the page you have a question with. WordPress also lets you customize the look and feel by adding your own stylesheet and overriding the default styles.
Jacob’s talk was inspiring for cleaning up the backend. He put a sample theme file that you can copy and paste from into your own theme.
Jane Wells – Closing Keynote
Photo by Nick Whitmoyer
To wrap up WordCamp Mid-Atlantic, we had the opportunity to hear from the head user experience leader for WordPress, Jane Wells. The keynote was delivered over Skype… from within a moving car! The video was a little blocky, but given the circumstances it was easily forgiven. Some of Jane’s keynote was about the upcoming improvements to WordPress. But most of the talk was gossipy Gnu Public License cruft. It wasn’t that interesting to re-hash the same stuff every other blog was blabbering about a month ago.
So that was WordCamp Mid-Atlantic. A huge thanks goes out to Aaron Brazell for organizing the whole thing and all of the sponsors for making the event possible. I look forward to attending other WordCamps in the future and maybe even hosting a talk of my own.
Wikis, like Wikipedia, are great tools for the creation and organization of content. The one thing that gets in the way however, is the special syntax needed to mark-up pages. Links are created by wrapping text in double brackets like [[ and ]]. Extra functionality can be expanded with different characters but honestly, it’s a lot to keep track of.
It’s hard enough formulating the words stuck in your head into a clear, well-written piece of content. Trying to translate your idea into cryptic wiki syntax is a brain-fart waiting to happen. For most folks introduced to an inter-office wiki, the syntax is the straw that breaks the camel’s back. You can kiss any chance of adoption goodbye when you explain that to bold text you need to have three single-quotes on each side of the text.
Thank goodness the MediaWiki+FCKeditor project is around. The goal is to build a usable WYSIWYG editor for the MediaWiki software (and they’re on the right track). Installing the extension is as simple as downloading a folder, copying it to your extensions directory, and adding a line to your localsettings.php file. Then presto, an easy to use interface that sits on top of the edit field translating hairy wiki-syntax to their visual equivalents. If your users can figure out how to use Microsoft Word, then they can understand the MediaWiki+FCKeditor extension. But fear not my die-hard wiki wranglers, the plugin lets you easily switch back and forth between the WYSIWYG editor and wiki syntax.
If you need to give it a try, check it out on this Sandbox page.
So adding one simple extension can make it easier for wiki-novices to get involved creating and editing content while staying out-of-the-way of the wiki-pros. If you need to get normal people involved with a wiki, make sure to add the MediaWiki+FCKeditor plugin to make life easier for everyone.
JavaScript is a fun language. It lets you build almost anything you can imagine. For some reason, I thought it would be fun to build a simulator for the card game War. I started hacking away on the idea in my spare time. It was also a good excuse to learn object-oriented JavaScript to make my card game simulator flexible and modular. After a few weekends I had something that worked (screenshot below). Unfortunately after that life got busy and my war simulator just sat there collecting virtual dust for more than a year.
Fast forward to July 29th when the 10K Apart contest is launched challenging developers to build compelling apps that are 10 kilobytes or less. This would be a fun way to refine my stale war game simulator as well as test my JavaScript coding-foo to squeeze it all in to 10 kilobytes.
One of my first challenges was re-doing the cards. Initially I constructed a single-image sprite containing all of the cards. JavaScript would manipulate the class of a div which would determine how to position the image for the proper card to be displayed. This method led me to discover something Internet Explorer actually gets right with CSS and the other browsers fall short. This image of all of the cards weighed in at 36KB alone. Ouch!
My solution was to use unicode characters for the different suites and letters and numbers for the card values. Child elements of the card held the symbols and I positioned them absolutely within the card element. The final touch was to rotate one of the child elements 180 degrees using the transform CSS property so it would display upside down just like a real card. My image-less approach was just a fraction of the size of using images for cards. But something was still missing.
Playing cards have decorative designs in the middle. It would be too complicated to completely replicate these designs so I came up with the idea to use a Twitter avatar as a background. Thanks to the awesome service provided by http://tweetimag.es/ their RESTful api let me grab any public Twitter users avatar by constructing a simple URL. Browsers provide an easy way to add new CSS rules to a stylesheet via JavaScript so I could dynamically change the background image of a card based on which Twitter names the user provided. This is where the idea for making my War game simulator revolve around Twitter users was born.
A bigger advantage to hooking into Twitter is it makes each game more personal for the player. Pitting two people in a card game battle makes the experience more meaningful then a bunch of plain, virtual playing cards flipping back and forth for a couple hundred of turns. This also has the potential for a viral aspect to my app since I already have atleast two Twitter names that would be interested in the results. In order to share a game I needed to create a way to read in the number of players, their twitter name, and their deck at the start of the game. Using a simple string of characters that represented this data attached to the end of the URL allowed me to do this. All of the values in the deck could be stored as a number or letter since I had unique first letters.
| Card | Encoded Equivalent |
|---|---|
| 0, 1, 2 … 10 | 0, 1, 2 … 10 |
| Jack | j |
| Queen | q |
| King | k |
| Ace | a |
| Hearts | h |
| Diamonds | d |
| Spades | s |
| Clubs | c |
Therefore, the Ace of Spades could be represented as ‘as’, the 10 of Diamonds would be ’10d’ and so on. A full game looks like this: p1-kingkool68:adqhkc2d5d10s3h3d5hjs8dqc9c8h2s9d6c7c9skd10d8c7s7d2c4s|p2-naudebynature:jc6d10cjdkh5c4h6sqdks2has6h4d7h4cac10h9hah3s8s5s3cjhqs
One of my favorite parts of developing this app was creating a way for keeping track of all the different data that results from a single game. For each war I store the turn it occurred on as well as keep track of which player won the war. After each turn I store a copy of the players deck for further analysis after the game concludes. I originally wanted to include a line graph showing the number of cards a player had in their deck as the game progressed. Building that feature was pretty simple thanks to the Google Charts API but in the end it had to be cut in order to get below the 10KB limit.
I was a little ambitious with the functionality that when I was ready to start compressing my code down I was shocked to see my idea bloated to 33KB. That’s more than 3 times the maximum size. A serious slimming down was in order. Pre-populat lists of Twitter users that would make for interesting battles: cut. Charting capabilities mentioned earlier: gone. A brief blurb explaining the game and who I was: removed. Title tags: discarded. Every little bit I could trim down would help. After all this I was down to about 17KB and along way to go to get under 10KB.
Dean Edwards took JavaScript compression to another level with his /packer/ tool. He came up with away to reduce the size of JavaScript by removing white space, stripping comments, and replacing variables with shorter, less-coherent replacements. CleanCSS.com does pretty much the same thing but for CSS. Such optimizations include replacing font-weight:bold; with font-weight:700; color:#ff0000; with color:red; and so forth. These packing tricks helped get me to 13KB but I was running out of ways to optimize further.
My next plan was to modify my HTML. IDs like ‘prepare-for-war’ became a single letter, <strong> elements were replaced with deprecated <b> tags, and the closing </body> and </html> tags were axed since they had no affect on my page. Sidenote: Google chops off the closing </body> and </html> tags which for a site that serves up that volume of pages results in a savings of a couple million dollars in bandwidth bills every year.</end sidenote>
At this point I was so close to coming under 10KB but yet so far. It was time for one more drastic technique. I noticed how well the JavaScript /packer/ tool worked so I decided to combine my HTML and CSS into a single line and use JavaScript to write it out to the page as it was loading. This way I could combine it with my main JavaScript code for the most efficient compression possible. After 3 hours of toiling in vain, I reached the point where my app was under the magic limit. Ten kilobytes is equal to 10,240 bytes. My code weighed in at 10,236 bytes; a mere 4 bytes to spare!
Even after spending hours tediously compressing and optimizing my code, I still had a lot of fun. My biggest challenge wasn’t squeezing everything down, or getting it all to work just right. Rather my biggest challenge was myself and when to determine it was finished. After each piece of functionality I coded I wound up thinking of two more things to make it even better. Once it was submitted to the contest gallery, my app got some luke-warm attention but I’m used to that now. Personal projects I toil over never get the amount of attention I always think they will. I’m anxious to see who wins the 10K Apart contest and whether my War app gets any mention at all from the judges.
But in the end that doesn’t matter. What matters is I got my idea out of my head and into a working state where people could actually try it out, no matter how trivial of an idea it is. And that is what makes the web such a great platform for an individual like myself.
Remember when MapQuest was the online map site? Then Google came along and rained on their parade in 2005 with their dynamic-loading AJAX secret sauce which enabled you to infinitely pan around the map. Ever since then, MapQuest has been dead to me – until now.
The AOL-owned site unveiled their new look today and it is a complete revamp. Their logo took a turn from a comic typeface to a more serious, sans-serif one. Reddish-marroon, out! Green and purple, in! The new branding will certainly take some time but there is more to this re-launch than a new log0.
MapQuest has made their maps look more like paper maps. Well what do I mean by that? The color choices by the MapQuest team are really spot on. You might not really think about it, but the distinct colors used by MapQuest make their maps easier to read. Major interstate highways are blue, secondary highways are an orange color, and streets are yellow. This visual hierarchy of most important roads to least important helps focus your attention as your looking around. Compare this to Google Maps where the colors are so similiar that the roads kind of blend together.
The label style on Google Maps is a bit easier to read than MapQuest as I think Google Maps is better for locating city names and MapQuest is geared more towards a visual search of a map. For a more in-depth analysis about map design, see A Brief Comparison of Google Maps, Bing Maps, & Yahoo! Maps by 41Latitude.
The new MapQuest layout is akin to Google Maps with two-thirds of the screen dedicated to the map and the left third of the page for search and directions. Along the top of the map is a carousel navigation featuring groupings of locations like grocery stores, bars, and gas stations. It’s a well done interface for finding nearby attractions on the map.
Most people stick with MapQuest because they trust their directions over others. After a couple of test searches, I prefer the directions from Google better. But MapQuest is more enjoyable to just browse around. One feature MapQuest did really well is right clicking anywhere on the map will bring up the address of that location. Sure the address is an approximation, but the map bubble that pops up gives the house number, street, city, and zip. Sometimes there is even a 360 degree view just like Google’s Street view. MapQuest’s street view feature is more basic but I find it more intuitive to pan around. It doesn’t take up the whole screen and its easy to just pop in, pop out and continue on your way.
Will I’ll drop Google Maps and make MapQuest my dedicated online mapping service? Probably not. Google Maps has too many extra features for a power user like me (auto complete, public transportation, scroll wheel to zoom in/out). But for those people that feel Google Maps is too complicated and hard to use MapQuest provides a clean, easy to use mapping site that is geared for people like them. I would easily recommend MapQuest to an average computer user while Google is for people who want more features.
The more competition the better for all of us. MapQuest has certainly stepped up it’s game and I can’t wait to see what else they have in store.
CrunchGear recently opened my eyes to ShirtsMyWay.com, a site that lets anyone customize a dress shirt to their exact specifications. The minutia of details that one can pick and choose from is dizzying including the type of fabric; the design of the collar, cuffs, yoke, back, bottom, and pocket; type of buttons, button holes, collar stays, or a monogram; and, of course, the size of the shirt. Coming in at $75 per custom shirt at least, ShirtsMyWay.com is too rich for my blood. Besides, I’m not that great of a shirt designer.
But the site took me back to the days of the dotcom boom where I would spend hours on Customatix.com. The company was started by four Adidas executives in 2000 with the aim of letting anyone create a completely customized shoe. You could pick from a bunch of different styles, choose the colors of various pieces, have your name stitched on the back, pick the laces, and even add a logo from their huge library. I remember making a whole virtual closet full of shoe designs that I had no intention of actually purchasing. I guess that’s why they’re no longer around. Though I did get a friend a gift certificate to the site for her birthday and she did design and order her own custom-made shoes.
On the brighter side, it looks like Customatix inspired the wave of hideous MySpace profiles later in the decade.
