Wednesday, September 03, 2008

Geekitude

71% Geek

Sorry but my daughter made me do it.

Wednesday, August 13, 2008

Tuesday, August 12, 2008

The real history of the personal computer

A friend sent me a link to an excellent recounting of the real roots of the personal computer in an article on the Computer World site. In the article, Forgotten PC history: The true origins of the personal computer, Lamont Woods recounts the creation in San Antonio of the CPU that would eventually become the Intel 8008, the primordial ancestor of the hearts of the vast majority of today's personal computers. The similarities between what happened with CTC/Datapoint -- Intel interaction related to computer hardware and the Digital Research -- Microsoft interaction related to software struck me as I read this piece. It even continues with a couple of the people involved with these creations, Tim Patterson and Federico Faggin, although Faggin got the far shorter end of the stick from Intel than Patterson did from Microsoft.

Saturday, July 26, 2008

Roll your own tag clouds on Wordle

Here's a little something my daughter turned me onto from her blog. I guess most people would recognize a "tag cloud" if they saw one but they might not know it by name. There's a web site called Wordle that will let you easily create your own custom tag cloud directly using the text in the RSS feed from your web site. The result for this blog looks like so:

Tuesday, July 22, 2008

Links to miscellanious interesting stuff

This is a little cubby hole where I'll squirrel away links to things that look like they may be handier tomorrow than they are today.
stackoverflow
Stack Overflow is a collaboratively edited question and answer site for programmers — regardless of platform or language.

Pencil
About all I can say is WOW! With the power of the underlying Mozilla Gecko engine, Pencil turns your excellent Firefox 3 browser into a sketching tool with just a 400-kilobyte installation package.

Jackcess
Jackcess is a pure Java library for reading from and writing to MS Access databases. It is part of the OpenHMS project from Health Market Science, Inc..

Processing.js
John Riesig has ported the Processing visualization language to JavaScript, using the Canvas element and the demos on his blog are quite remarkable.

JNode.free(your Mind)
Open source, free, Java-based operating system. I've wondered about the utility of such a thing in the past but I'm still not sure that, outside of use on smart phones, this is anything more than a chess-playing dog. The big problem with the concept is that regardless of the portability of the application layer you still have to have a native code kernel that locks you into a specific processor familiy -- in this case Intel. Sure you can move it around by porting the nano-kernel but that doesn't totally free up your choices if you want complete portability on a USB stick.

BeanKeeper
Yet another object persistence layer. This one claims to be extremely easy to use with only three classes to learn.

CorneliOS
CorneliOS is an easy-to-use and cross-browser "Web Desktop Environment", "Web Operating System" or "Web Office" and comes with a set of cool applications.

Apache Roller
A full featured blog done in Java

Vayala (Google Code)
Vayala is a multipurpose chat client for developers. It offers a platform and an easy to use Eclipse plugin. Based on multicast technology each client is automatically connected to one network of chat client without a central server or much configuration or installation effort. You add the Eclipse view and you are connected to your colleagues. In addition to basic chat functionality you can also exchange files, graphics and much more.

JSmooth - Java Executable Wrapper
JSmooth is a Java Executable Wrapper. It creates native Windows launchers (standard .exe) for your java applications. It makes java deployment much smoother and user-friendly, as it is able to find any installed Java VM by itself.

walterzorn.com
Some very nice looking Javascript libraries for drawing images and doing DHTML stuff

Smashing Magazine
A great gathering of web and graphics resources, converters, tutorials and stuff

Cheap Silk Screen Tutorial
Cool, cheap and easy to do.

Streamripper
Record streaming media off the Internet

Using PHP with Tomcat

Notepad++
One of my favorite editors is SciTE. This uses the same editing engine.

Geany
Another cool editor based on the Scintilla editing engine like SciTE and Notepad++

Wiki on a Stick
Amazing little one page fits all wiki

Roma
Create a full working application in short time writing only POJOs! Roma will render your POJOs as Ajaxed Web Pages, will store your business POJOs in the database, etc.

Saturday, May 24, 2008

I Will Derive

One of the funniest things I've ever seen in the way of geek music satire!

Wednesday, April 16, 2008

Ok, the top of the wish list


So if anyone's looking for that perfect "get on his good side" thing for me then here it goes. A little while back ASUS created a very small PC called the Eee. Well they're back with the upgraded version and this review of it says, "Bring it on." For the same price you can either get less storage and Windows XP or 20 Gig of storage and Linux. I'll take the latter.

Wednesday, April 05, 2006

Engineering Web Pages

Introduction
I hang around a web-centric forum called WebDeveloper.com, which is run by Jupiter Media. To a large extent I try to answer questions and assist folks in creating web sites in the manner considered the best practice in the 21st century. As an adjunct to that I've considered writing up a tutorial describing my particular take on page construction. If I can pull it off within the confines of Blogger then that's what this article will eventually be.

I want to thank Cheval, another member of WebDeveloper.com for allowing me to use his basic design, code and image as a starting point. One of the hardest parts of doing something like this for me is coming up with a test design in the first place. Eventually the raw material from this project will be attached to a message in the original thread at WebDeveloper.

Recurring Themes
There are a couple of ideas that drive modern software development. First, that software development is an engineering practice more than it is an art or craft. In a nutshell, engineering is the consistent application of a set of standard techniques to solving problems. You recognize a kind of problem and you know what subset of all the tools you have available will best help you solve it.

The second idea is separation of concerns. In the case of web site development that comes down to separation of content from presentation. (Ok there is the third concern of behavior but we're ignoring that for now.) Content is expressed in a structured way in HTML. A web page is a structured document. The presentation of the content is handled by Cascading Style Sheets, CSS. CSS describes how the HTML content will look.

What have we got here?
Let's kick this off by looking at the original design and implimentation. It's an about page for a club and a single image formed the basis for the page. Visually, it has a banner, a nav bar and news section in a left column and a large content box to the right.

The initial implimentation was to use the image as-is with area tags and onclick handlers for the nav links. A couple of overlaid, absolute positioned divs formed the News and Content areas. Had this been worked up in old school fashion using the Adobe/Macromedia set of tools then the design image would have been sliced-n-diced into a dizzying array of unintelligable table cells and the site maintainer would have to revisit the complete design/construction cycle to do something as trivial as add another link to the nav bar. As it was the page sort of worked but those News and Content divs were misbehaving and that brought Cheval to the forums looking for help. Instead of patching around the problems I recommended he just go ahead and do the page "right" (and I reserve the right to define right the "right" way).

Content is King
Old school 20th century thinking starts with looking at the design and imagining how to write HTML to make a page that looks like that design. In other words, the trick was to code the presentation of the page in the HTML that also encodes the information (content) expressed in that page. Here in the new millenium the first thing we do is look at the design and imagine what the structure of the content should be on that page. When I looked at the test page online, here's what I saw.

I saw headings, paragraphs and a list of links -- the semantic structure of the information presented on the page. Here is one way of marking up the page with semantic, structural HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Walled Lake Central Equestrian Team</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0;
background: #fff;
color: #000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Walled Lake Central Equestrian Team</h1>
<div id="nav">
<h2>Navigation</h2>
<ul>
<li><a href="/about.html">Home</a></li>
<li><a href="/calendar.html">Calendar</a></li>
<li><a href="/contacts.html">Contacts</a></li>
<li><a href="/join.html">Join</a></li>
<li><a href="/links.html">Links</a></li>
<li><a href="/members.html">Members</a></li>
<li><a href="/paperwork.html">Paperwork</a></li>
<li><a href="/pictures.html">Pictures</a></li>
<li><a href="/results.html">Results</a></li>
<li><a href="/rules.html">Rules</a></li>
<li><a href="/news.html">Old</a></li>
</ul>
</div>
<div id="news">
<h2>News</h2>
<div>
<h3>News!</h3>
<p>Please view the calendar for new fundraising
opportunities. You should have all gotten this email too!
</p>
</div>
</div>
<div id="content">
<h2>Content</h2>
<div id="inner">
<h3>Welcome!</h3>
<p>The Walled Lake Central Equestrian Team is devoted
to learning and having fun.
Here the riders compete is saddleseat, western,
and huntseat classes.
There are also jumping and timed events.
The competitions encourage a cooperative, democratic
process of fair and good horsemanship.
</p>
</div>
</div>
</div>
</body>
</html>

And that produces this not so exciting but quite understandable and almost totally unstyled result. From this point on there should be no need to touch the HTML again. We've got the content down and now the job of presentation begins. It also means that the only code snippets I'll need to include from now on will be styles. That is they'll be part of the embedded style sheet at the top of the page.

Colorize it like Ted used to do
The next thing on our plate is to set the colors and sizes of the structural divisions of the page. It's a lot easier to get these things right quickly if you use Firefox with the ColorZilla and MeasureIt extensions installed. The blue-ish page background color has a value of #3153d8 and the sort of golden background of the content sections is #c58933. After determining the size of the divs that form the wrapper and content areas the stylesheet is updated like so.
html, body {
margin:0;
padding:0;
border: 0;
background:#3153D8;
color:#000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: center;
}
div#wrapper {
width: 700px;
margin: 0 auto;
border: 1px solid black;
}
div#nav, div#news, div#content {
background: #C5B933;
}
div#nav, div#news {
width: 170px;
}
div#content {
width: 475px;
}
h2 {
background:#3153D8;
}
h3 {
}

Along with sizing everything there is the matter of centering the overall page (which is contained withing the wrapper div) in the browser window. The div#wrapper style of margin: 0 auto; should do that nicely but to slap training wheels on for Internet Explorer we'll put text-align:center; on the body (the container of div#wrapper). This produces the following result in IE and Firefox respectively.
The difference is because IE mistakenly centers block elements like divs when given the text-align:center style. Believe it or not you just get used to fixing little messes like that as you go. It's also a good example of why you should use a standards compliant browser as your primary preview tool then tweak the layout for IE's problems.

Now push 'em around a bit
With the background colors and div sizes in place, now there's the little issue of putting the divs in the right positions on the page. We'll use float positioning on the Navigation and News divs to put them on the left side of the page. (If you do them one at a time you'll see why the clear is in there.)
div#nav, div#news {
width: 170px;
float: left;
clear: left;
}

Now that's begining to look a lot like the original design if your eyesight is anywhere as near as bad as mine. There are a couple of other positioning and coloring tweaks that we can do with both the divs and the headings, which haven't been touched yet. Let's give all the div headings a background color so they will show off their placement better. Right now they're the same color as the page background. Eventually the backgrounds will become images but that can wait until near the end.

The other adjustment we'll make in this pass is to put some padding on the wrapper div to space the other divs away from the wrapper border. Hey, everybody needs a little space. In this case I think about 10px will do the job. (We use padding on the wrapper instead of margins around the contained divs to avoid a margin doubling bug in IE.) The news div needs a little top margin to separate it from the navigation. So here's the next set of CSS adjustments and the resulting page.

div#wrapper {
width: 700px;
margin: 0 auto;
padding: 10px;
border: 1px solid black;
}
div#news {
margin-top: 10px;
}
div#content {
width: 475px;
}
h1 {
width: 720px;
background:#aaa;
}
h2 {
background:#aaa;
}

But that nav bar looks so wrong
Now to make that unordered list of links into a real navigation bar...

Monday, January 30, 2006

Google decides a little evil is good for you

I guess everyone has heard that all the search companies are rushing to see who can bend over the farthest for the Chinese government but here are a couple of searches that make it crystal clear just how bad it is.

Search images for "tiananmen" on the non-Chinese Google and this is what you get.



Search images for "tiananmen" on the Chinese Google and you basically get a load of vacation pictures and postcards. Note that since this link takes you to the Chinese Google, feel free to try some good queries of your own and post the results here in comments.

Friday, December 30, 2005

Software Patents

To paraphrase an old adage

Those that can, do. Those that can't, license patents.

Wednesday, December 21, 2005

Free food with strange people

Not much else to be said. ;)

Except that every one of these ex-coworker has been brightsized* since this picture was taken.
*brightsized
Had enough sense to leave the company

Dilbert