It's All Been Done Before ...

Lately, I’ve been thinking a lot about the infancy of the Internet — those glory days when the Web was new and everything was different and exciting. Back in 1994, there was no Amazon, no eBay, no PayPal. No broadband. Altavista was the search engine of choice; Google wasn’t even a twinkle in its fathers’ eyes.

The Web was a wild new frontier, full of experimentation and possibility. It was a people place where “information wanted to be free” and people built web sites out of curiosity, altruism, and idealism. It was a world of bright ideas and innovation, when one could get wildly excited about tables, frames, and animated GIFs.

It was a world focused on information sharing, collaboration, and empowerment. You heard a lot of talk about the potential of technology for bringing about social change and “levelling the playing field.” Newsgroups and web forums let people post and share ideas, support one another, and debate important issues.

Then, along about 1997-1998, the corporate world woke up to the profit potential of the Web. In a few short years, the Web was hijacked by big business, commoditized, and transformed into an ecommerce money machine — spelling the end of an era of people power and grass roots innocence.

Soon, nothing wanted to be free. Popular sites began charging for information. Advertising ruled. Then came the consolidations. Big fish gobbled up the smaller fish. Mergers and acquisitions became the order of the day. Only the strong survived.

Then, around the turn of the millenium, a new trend emerged. The blogging phenomenon was born, quietly and with little fanfare — launching a widespread grass roots revolution and a triumphant resurgence of people power. Today, servers everywhere groan under the strain of an estimated 28 million blogs and counting.

These days, I’m experiencing a strange sense of déja vu, coupled with uneasy glimmerings of impending doom. To quote the Barenaked Ladies, it’s all been done before ... Remember Zeal? This novel experiment was based on a breakthrough concept and enjoyed a strong and dedicated user community. It was a forerunner of today’s social bookmarking and tagging sites like Wink, StumbleUpon, and Furl. Today, Zeal is part of the LookSmart network (as is Furl).

The phenomenal growth and impact of blogging; the advent of exciting new technologies; the wild and wooly sense of novelty and innovation; the feeling of community — it all puts me in mind of the heyday of the early Web.

But it’s all still free. The blogging tools, the massive volume of information being pushed out into the blogosphere, the ancillary resources. Sure, some blogs are monetized by AdSense, but this brave new world hasn’t yet sold its soul.

How long til it does? It’s just a matter of time, of course. The corporate hounds are smelling money to be made, and already there are signs that business has awakened to the profit potential of the blogosphere.

Here we go again ...

Web 2.0: Doing the Monster Mashup

I learned a new word recently. According to Wikipedia, mashups are web hybrids that combine content from multiple sources into a single integrated user experience, using APIs, Javascript, and Web 2.0 technologies such as RSS feeds.

I had recognized for a while that this kind of integration is going on, but I didn't know it had a name. Another entry for the jargon dictionaries!

Companies that make their APIs publicly available include eBay, Amazon, Google, Yahoo, Flickr, and Skype, which is why we frequently see mashups pulling content from these sites, along with feeds from Digg, Slashdot, del.icio.us and others.

Typical of this new functionality are sites like Internet Bargain Center, which extracts eBay listings by zip code, and MashMap, a geographic movie listing service. The Flickr amusements I have written about previously here are also examples of mashups.

Already, numerous sites have sprung up to keep track of these hybrids and to announce new mashups as they come onstream. Two notables are Mashup Feed and Programmable Web.

Comments? What do you think of mashups? The greatest thing since sliced bread or a dog's breakfast?

Another Cool Color Tool

I love stumbling across useful online tools and gadgets, especially those that make web design chores easier and more enjoyable. Earlier, I blogged about a useful tool for generating intermediate shades of colour.

Staying on this theme, here's one of the sweetest little color generators I have ever seen. Petr Staníček's site, WellStyled.com, contains a Color Scheme Generator that lets you creates color schemes with a single click of the mouse. Click on one of the color swatches arrayed around the onscreen color wheel and this nifty tool will create a four-colour scheme for you.

This is one of the most elegant applications I have seen. Additional features let you select among five types of colour schemes; choose a web-safe palette, if desired; vary the degree of opacity (he uses the term pastel); even view your colour scheme as persons with various types of color vision impairment might see it.

Available color schemes include monochromatic (various tones of the same hue), complementary (two colors diametrically opposite on the colour wheel), analagous (adjacent colours), triads (three equidistant colours), and tetrads (four equidistant colours).

Truly worthy of your favourites list, (though professionals should note that the model used is closer to classic subtractive (pigments-based) color theory than additive (light-based), and that the RGB conversions are approximate).

Another, similar but less full-featured tool recommended by a reader of this blog is Color Schemer Online. It, too, allows you to click on colour swatches and to lighten and darken schemes.

Have a favorite color tool? Let me know about it via comment. And if you enjoy these posts, please support the site by linking to Random Bytes. Sign up for our feed to be sure not to miss anything.

Google the Math Whiz

This falls into the betcha didn't know category. Or maybe you do, if you're a Google junkie like me ...

Besides being the Net's foremost search engine, Google is a math genius. Its handy calculator feature lets you perform quick arithmetic operations. Just click in the Google search field and type your arithmetic statement, using standard spreadsheet operators (+ to add, - to subtract, * to multiply, and / to divide).

Ask Google 4+4/2, for example, and it will dutifully report back 6. (The 6 result is because multiplication and division are performed before addition and subtraction. To change the order of operations, put parentheses around the numbers to be added, as in (4+4)/2. Now Google will respond with 4.)

Metric Conversions Too!

The math functionality is handy for calculating expenses, the sales tax portion of a bill, all kinds of things. But it gets better. Google will also convert metric to imperial and back again. Ask this digital savant, for example, to compute 285 miles in km and it will tell you that the answer is 458.66304 kilometers. Ask it for 78 f in c and it will tell you that it's 25.5555556 degrees Celsius outside (OK, maybe not outside this house).

Use it to convert to/from metric when you're cooking. Google quickly confirms that 4 cups in litres is 0.94635295 litres, that 6 oz in grams is 170.097139 grams, even that 12 teaspoons in cups is 0.25 US cups.

Like this tip? Stay tuned for more great things you can do with Google. Sign up for our feed to be sure not to miss anything. And if you find these posts helpful, please support the site by linking to Random Bytes.

Build a Three-Column Blogger Template!

Update: need a widget-friendly version of this template for New Blogger? See this post.

Some time back, in writing about the many template hacks this blog has undergone, I promised to share how Random Bytes morphed into three columns from the original two-column Minima design created by Doug Bowman. The volume of queries on this topic in my stats tells me that a lot of other Blogger users want this flexibility.

Fortunately, it isn't hard. Switching the default two-column layout to three requires a few modifications to your template. Here's how to proceed:

1. First, back up your current template, just in case anything goes wrong. I usually just copy it to a Notepad file on my desktop. (Open the Template tab, click inside the template area, press Control+A to select the entire document, and Control+C to copy; then switch to Notepad, press Control+V to paste the document, and Save.)
2. Go back to your Blogger template and scroll to the embedded stylesheet at the top. Add a new style to format the left-hand column. Mine looks like this:
   #SidebarLeft {
   position:relative;
   width: 20%;
   padding-right:.5%;
   float:left;
   margin-left:.5%;
   clear: none;
   text-align: left;
   }
3. Locate the HTML part of the document. To create a left-hand column, as in this blog, open the SidebarLeft div (type <div id="SidebarLeft">) immediately after the <div id="content"> tag. Put a closing </div> before the Main div. This partitions off the left 20% of the screen for a sidebar — now you can put any content you like between this pair of divs. In this blog, I have placed the Archives on the left, along with categories, popular posts, and RSS feed icons. (Note: If you are using another template, the style names may differ, but the same principles apply.)
4. Return to the top of the template and tweak the other main content styles to accommodate the new design element. You'll need to make the central text area narrower and set its left and right margins to auto. You may also need to reduce the width of the existing right-hand column. Experiment with width, padding, and borders of the styles until you have a design that works. Here are the settings I used for this blog:
   #content {
   width:78%;
   margin-top:15px;
   margin-left: auto !important;
   margin-right: auto !important;
   padding:0;
   text-align:left;
   }
   #main {
   width:53.5%;
   float:left;
   padding-left:1.5%;
   padding-right:1%;
   border-left:1px dashed #ccc;
   border-right:1px dashed #ccc;
   }
   #sidebar {
   width:19.5%;
   float:right;
   margin-right:.5%;
   padding-left:.5%;
   }
5. Optional: There may be other styles based on the original Sidebar style that format elements within a column. In Doug Bowman's Minima template, for example, the #Sidebar style is specified with three contextual selectors (ul, li, and p). These control the formatting of bullets and paragraphs in the sidebars. If you want similar formatting for the other side of the screen, locate and clone these styles under the #SidebarLeft designation, as follows:
   
   #SidebarLeft ul {
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   border-bottom:1px dashed #ccc;
   list-style:none;
   }
   #SidebarLeft li {
   margin:0;
   padding:0 0 .25em 15px;
   text-indent:-15px;
   line-height:1.5em;
   }
   #SidebarLeft p {
   color:#666;
   line-height:1.5em;
   }
   
6. Save your template changes and preview your blog. If you're satisfied, re-publish and share your handiwork with the world!

I have provided the complete template here, in case you have problems making the changes described above. Just open the link, view the source code, and save to your desktop or copy and paste into your Blogger template, after deleting the existing code. (Warning: doing this will undo any customization you have done, so you may want to backup first.)

Hope this works for you. If you find these solutions helpful, please consider linking to Random Bytes and sign up for our feed to be sure to receive new articles promptly.

Form Fields Can Really Mess With Your Layout

I was at a friend's house the other day, and got an unpleasant shock when I checked this blog on her computer (XP, running Firefox at 1024 x 768 resolution).

One of the challenges of CSS-based design is the problem of floats jumping around when screen fonts are resized. (You can see it happen for yourself on a lot of blogs and web sites — just press the Control key and scroll the mouse wheel toward you. You may see parts of the screen jump around, especially as the type gets larger.)

I had worked hard to eliminate the problem on this blog, testing the three-column layout on a variety of browsers and at various screen resolutions. (It usually occurs when your floated DIVs and their margins, padding, borders, etc. add up to more than the width of the containing DIV.)

Everything seemed to be working fine on my computer, so I was truly perplexed to once again see a missing right-hand column on her machine, configured identically. It had popped down below the middle column, well off the bottom of the screen. (Tip: if you find this happening on other blogs, try scrolling down to locate the missing content.)

Then it dawned on me: one of the most recent changes I made here was the addition of the FeedBlitz subscription form at the top right of the screen. I hadn't even looked at the code I pasted into my template. The input field had a default size of "26" — too wide for the column. Sure enough, reducing it to "20" solved the problem.

So, another lesson learned: remember to re-test at various screen resolutions and in different browsers whenever you make code changes that could affect site layout. Never assume that — just because you have already thoroughly tested a design — you can rest on your laurels!

Eric Myer's Digital Photo Sleight of Hand

Being a bit of a shutterbug myself, I love surfing photography sites. Here's one that I have been meaning to share with you for a while now.

Eric Myer — not the Eric Meyer of CSS fame — offers a playful little amusement called Stereotypes. Done with Javascript, this innovative game lets you produce composite portraits that result in some truly bizarre-looking individuals. You can even generate a slide show that will combine faces randomly. The strange thing is these digital chimeras look oddly real, like the sort of people you'd expect to encounter at a carnival or lolling about downtown Las Vegas.

Check out Myer's portfolio too. He seems to specialize in portraits, even in his corporate and advertising work. He likes to position his subjects in odd ways or against gaudy backgrounds. The result is captivating. A must-see for anyone interested in portrait work.