HTML is the assembly language of the web

April 19th, 2009

My first computer was a Texas Instruments TI-99/4A. I got it just before going to college. I had been interested in computers since junior high but this was the first time I could afford one. The primary programming options were Extended BASIC and assembly. Writing interesting programs required assembly (because BASIC was too slow) so I learned TI TMS9900 assembly language. I went on to learn a few others including PDP-11 and 8080.

If you have programmed in any assembly language you know how tedious it is. There are so many details to be concerned with that have nothing to do with the problem you are trying to solve — simple instructions, addressing modes, managing registers, and maintaining the call stack to name a few. Because the instructions are so simple you write volumes to accomplish little. Often you would be dealing directly with hardware devices so at the same time as dealing with the many details of the processor’s instruction set you had to understand the idiosyncrasies of the device IO registers.

Once you got some small useful thing working like writing a character to the screen you made it into a reusable library routine so that you didn’t have to write that code again. Libraries helped but the big leap in productivity came with higher level languages. Frederic Brooks wrote in No Silver Bullet: Essence and Accidents of Software Engineering:

“Surely the most powerful stroke for software productivity, reliability, and simplicity has been the progressive use of high-level languages for programming.”

Structured statements replaced compares and jumps. Expressions took the place of numerous instructions. The vast (well not so vast by todays standards) stretches of memory locations were replaced by data structures. The compiler took care of pushing values onto the call stack and popping them on return.

The details were interesting to a point and there was satisfaction in having the level of knowledge needed to program in assembly language. Making the switch to a language like C meant giving up some control but it was well worth it because of the productivity gain.

The switch from assembly to high-level languages didn’t happen instantaneously. Trust had to be won. Early compilers had bugs. People thought they could do better optimization than the compiler, and at first they could, but compilers got better and better. Compilers could also do something that assembly programs couldn’t — they could compile your program so it could run on different types of CPUs.

Writing web applications today reminds me of assembly language programming because there are so many details to be concerned with: HTML, CSS, JavaScript, HTTP, and browser incompatibilities and idiosyncrasies. Then there is the server side technology; pick one of Java servlets, CGI, PHP, .NET etc. and perhaps a framework or two. Also you probably need to know SQL if your application data is stored in a database. Cross cutting issues such as usability, accessibility, security, performance and internationalization add additional dimensions.

The details can be interesting and sometimes frustrating. Do I really need to know that IE make the href attribute an absolute URL when inserting an anchor into the DOM while Firefox does not? (This usually doesn’t matter since if you use the href property you always get the absolute URL but it bit me once.)

I would like to create web applications without having to worry about many of these details. When I say HTML is the assembly language of the web I’m including CSS and JavaScript. I see the Browser as the processor (CPU) and HTML, CSS, and JavaScript as the instruction set. I get the feeling that we should be programming at some higher level.

There are plenty of libraries and frameworks available that help. Some are getting to the point where you don’t need to know much about HTML or JavaScript (GWT, JSF come to mind). JavaScript libraries like jQuery or Dojo are making it much easier to write cross browser code.

So whats wrong? Like I said, some of these frameworks abstract away HTML so you can think in terms of higher level “components”. The problem is they are still just libraries (for the purposes of this article frameworks are just really big libraries). I believe that larger productivity gains are possible from languages rather than libraries. The languages may be domain specific — for creating web applications — but thats OK. The languages could be compiled or interpreted or some combination of both.

One very important thing that happened with the move from assembly to high-level languages is that one relatively small group of people were able to focus on implementing compilers that did great optimization following the best practices for the particular CPU type while another much larger group of people focused on building their applications.

Imagine if best practices like using a hidden token to protect against CSRF or using the POST-Redirect-GET pattern were built into the language.

Imagine if cross cutting concerns and decisions that usually have to be made up front were compiler switches or runtime options. Examples:

  • What level of functionality do old browsers get?
  • Is the back end going to be PHP or J2EE?
  • Do my users have to have JavaScript enabled?
  • Should session state be kept on the client or server?

There are huge opportunities for performance optimizations – on the client, over the wire, and on the server. The optimizations can improve over time independent of the applications. Imagine if css, js, and images were automatically combined, minified, and compressed such that overall response time was minimized.

Yes the abstractions will leak. It will take time for the language implementations to get good enough and for programmers to trust them. I would like to see this happen.

Some may wonder if I actually read “No Silver Bullet” or just pulled a quote from it. After all it says that languages are not a silver bullet. I’m not arguing that they are. I’m saying that they can do better than frameworks. There is enough accidental complexity in building web apps today that a domain specific language could be a big help.

So why hasn’t it happened yet? Perhaps its just that the right framework hasn’t come along yet. Thats the thinking that has given us at least 57 frameworks in Java alone. I think some believe that tools are the answer. It used to be that you could charge money for a compiler. Not so anymore. But that can’t be the problem since most of the frameworks are also free.

Perhaps it is already happening. I have not dug into Links but it sounds just like what I’m talking about.

I plan to write more on this topic in the future.

Comments on “Life above the Service Tier”

March 29th, 2009

I have read Life above the Service Tier a few times now. Its a very good paper, one that really changes your perspective, but I wish it was better. If you work on web applications and you haven’t read this paper I recommend that you go read it now — but do come back.

I agree with the overall reasoning and the conclusion.

So one obvious way to correct the thin client architecture is to implement a true MVC framework on the client side… That means that all “Presentation Flows” must occur within the currently ­loaded web page… So one workable model is the Single Page Application (SPA).

First let me get some minor complaints out of the way.

Continue reading…

Lego robot preview

March 28th, 2009

It’s been too long since my last post. The trouble is that I have too many projects started. So I’m going to announce one of them in the hopes that it motivates me to wrap it up. It is actually something that I’m working on with my kids. It’s a Lego ladder climbing robot. It climbs a free standing K’NEX tower. Here’s a picture of the latest version.

Lego Climbing Robot

A more detailed write up and video will follow.

I also have some software related posts started that I plan to finish soon.

Wooden Computer Case Update

November 28th, 2008

The computer I built recently has been sitting disassembled for over a month. I started trying to solve the two problems I mentioned in the previous post – fan too loud and poor video drivers – but it did not go smoothly and then I got interrupted by other projects.

To solve the video driver problem I decided to get the new Intel D945GCLF motherboard with Atom processor. It uses the Intel 945GC video chipset, for which Linux has good drivers. This is also a Mini-ITX motherboard and I expected it to fit into my wood case without any problems. However they moved the main power connector from the middle of the board to the front edge and the Mini-Box power supply, which plugs directly into the power connector and sits above it, now hangs over the front, which is were the card reader board is. The following picture is of the old motherboard but I circled where the connector moved to. You can see the card reader board and the USB jumper cable that sticks out and overlaps with the power connector.

Wooden Computer Case 13

After considering my limited options I decided what I needed to do was get the power supply raised up about 1/2 inch so that it sits above the card reader. I removed the 2×10 power connector from the power supply by cutting off the plastic connector and desoldering the pins one by one. I cut a new connector with about 3/4 inch of wires from an old power supply. The hard part was getting 20 stranded wires into 20 holes all at the same time. If the wires were longer I would have been able to solder them one at a time. Because they are so short they all have to go in at once. I used half of the connector I removed as a spacer to help hold the wires in the right place but even still they weren’t lined up exactly. I was about to give up. Then I thought of trimming the ends of the wire so they were very short and on an angle. With the ends of the stranded wires coming to a point I was able to get them all to fit into the power supply board. Here is what the new connector looks like.

Wooden Computer Case 14

There was still the problem of the USB jumper connector sticking out too far. I cut off the connector and soldered the wires directly to the header.

Wooden Computer Case 15

Here is what the end result looks like back in the case.

Wooden Computer Case 16

To deal with the case fan being too loud I bought a new fan that runs at a lower speed. I also covered up one of the air holes in the bottom back of the case so that air from the front bottom holes would be drawn across the motherboard. The hope is that with the lower power CPU the system will stay cool even with a slower speed fan. So far this seems to be the case.

To keep an eye on the temperature I installed lm-sensors and the sensors applet. Lm-sensors’ drivers and utilities expose the health monitoring capabilities built into many chips. The sensors applet displays the various sensors such as CPU temp. in a gnome desktop panel. I also got this temperature sensor to measure the temperature of other parts of the case.

One problem with the new motherboard that is reported in many reviews is that the fan on the graphics chip heat sink is very loud. This was not so with the fan on the old D201GLY2 motherboard. I will need to replace this fan. I can’t just take the fan from the old motherboard because I’m using it in another system I built that I’m using as a file server and music source for our whole house audio system.

Its good to have the computer back in the kitchen for the whole family to use. (For more pictures see this previous post.)

More button woes

September 19th, 2008

The HTML button element has given me trouble in the past. My conclusion was to not use the button element except to progressively enhance the look of buttons. This means the button would initially be an input of type button and JavaScript, if enabled, would change it to a button element.

Well at work I’m working on an app that requires JavaScript and all form submissions are done with JavaScript already so I thought it would be safe to switch over to <button>. The server never uses the button names or values (all needed information is in other inputs – hidden or otherwise) so the IE bugs should not be an issue.

This time the problems I found were exposed with Firefox but the real problem was in the web app code even if the browser behavior was surprising.
Continue reading…

Wooden Computer Case

September 10th, 2008

Wooden Computer Case 07

Early this year, perhaps as far back as February, I visited my friend Martin and he showed me a small form factor (Mini-ITX) computer running Ubuntu that he just built. This gave me the idea for a project to replace our old kitchen computer — a Dell Dimension 4100 (Pentium III). The old one was bought at the end of 2000 for about $2500. (Yow! Could it really have been that much? The price must have included a monitor.)

The kitchen computer is for general family use. It is mostly used for Internet browsing, playing music, kid’s games and educational activities. Other than it being slow it takes up a lot of room on the small kitchen desk and doesn’t look very nice.

Goals for the new computer:

  • Low cost
  • Better performance than the computer it replaces but doesn’t need to be cutting edge
  • Small custom wood case that will look good in our kitchen
  • Low power
  • Quiet

Planning

In early April I started researching the computer parts with the information Martin gave me. I looked mostly at Newegg and Mini-Box. Another good resource is mini-itx.com.

Wooden Computer Case 08

Deciding on the Intel motherboard was easy because it had the best price by far among the small form factor motherboards. At the time there was a choice between the D201GLY2A and D201GLYA. I went with the D201GLY2A because it has a better better CPU (Celeron 225 vs. 215) and serial ATA ports. The Intel product page says there is an optional S-Video output but Newegg didn’t sell that model. S-Video is not needed for this computer anyway. Currently the D201GLY2A can be a little hard to find possibly because of the newer Intel D945GCLF with Atom processor.

I downloaded the product specification from Intel so I could determine the correct power and memory requirements. The power supply needs to be ATX12V compliant. The memory must be DDR2 533 MHz SDRAM DIMMs with a maximum of 1GB. The specification also said:

To be fully compliant with all applicable DDR SDRAM memory specifications, the board should be populated with DIMMs that support the Serial Presence Detect (SPD) data structure.

But I did not find any mention of SPD in any of the memory product descriptions.

My first attempt for memory was 1GB Kingston value RAM but this arrived defective and was later replaced with 1GB from Crucial (Model: CT12864AA53E).

Wooden Computer Case 11

Most PC power supplies are large and provide more power than is needed for a system like this. I wanted the case to be small so I ordered the power supply from Mini-Box. Their power supplies are very small and efficient and fit right on the motherboard power connector. They are DC to DC and therefore require a separate AC to DC 12V transformer. These are the external brick style. I got the one with the highest watt rating (110W). I didn’t want a separate power transformer on the desk so I designed the case to include the transformer brick inside it. The brick has a small fan in it but I never saw the fan come on even when the transformer got quite warm.

Other than the memory and possibly the transformer fan all the other parts arrived in excellent condition.

Wooden Computer Case 10

Parts list

From Newegg:

  • Intel motherboard/CPU Celeron 220 D201GLY2A
  • Crucial 1G 240 pin SDRAM DDR2 533 CT12864AA53E
  • Lite-on DVD burner with LightScribe DH-20A4H-08
  • Rosewill card reader 52-in-1 USB 2.0 RCR-102
  • Seagate Barracuda 250GB 7200RPM 16MB SATA2 ST3250410AS

From Mini-Box:

  • Power supply 200W 12V DC-DC PW-200-M
  • 12v/8.5A AC-DC Power Adapter
  • P4-ATX Cable

Total cost of computer components: $306. Most of the parts can now be ordered for less than I paid for them just a few months ago. I planned on using the existing monitor, keyboard and mouse so these things were not needed. Getting the extra small power supply from Mini-Box definitely added to the cost. It would be less expensive to get a case which includes a power supply. But I wanted a wooden case and I wanted it small.

Wooden Computer Case 06

Case design and prototyping

Even before the parts arrived I was considering different designs for the wooden case. A ten inch cube was a strong contender for a while. One important design consideration was that the visible surfaces should be all wood — no mix of wood and plastic. Even the power button must be wood. I toyed with various plans for concealing the card reader/USB slot in a drawer or behind a door and even a hinged cover like a jewelry box.

I thought having the motherboard mounted vertically (on its side) would be best for managing heat but anyway that I tried to arrange the components I ended up with a bigger case than I wanted. I also wanted the DVD drawer to be horizontal.

The components arrived around May 6th as I recall. Now that I could see the parts I could better plan the case layout. I made a cardboard cuboid the size of the outer bounds of the motherboard so that I could try different layouts without having to handle the motherboard.

While still weighing various case design options I wanted to test out the computer components so I assembled them without a case. I mounted the motherboard on a piece of plywood using wood screws. Other parts such as hard drive and DVD were just left loose.

I left all jumpers as is, installed the memory card, and connected the power supply. I connected the hard drive, DVD drive, USB card reader, PS2 mouse and keyboard, and monitor. Without a case there is no power button. An old push button from my junk drawer and a couple of alligator clip cables worked as a temporary solution.

Wooden Computer Case 05

I plugged it in and the green power LED on the motherboard glowed. When I pressed the makeshift power button I was relieved to see the initial Intel boot screen and BIOS messages then momentarily disheartened by a “no bootable device” error. It turned out that I needed to set the DVD jumper to master (I also removed the hard drive jumper for 3 Gb/s operation). Now the computer booted and the Ubuntu 7.10 install CD loaded.

I ran the memory test program from the install CD and it found 73 errors before I stopped it.

I started to install Ubuntu anyway, which was probably a bad idea. There were video problems where the screen had vertical bands out of order. I was using an old CRT monitor and wasn’t sure if that was the problem so I tried a different monitor that was known to work, but it had the same problem. I was getting nervous at this point.

The video was unusable but I found that in low resolution it wasn’t so bad and I could get through the install.

I went through all the install questions and started to install. At 90% complete it failed and rebooted. I assume this was due to the memory errors. I reseated the memory card and ran the memory test again but it still had errors.

I decided to order new memory and return the damaged Kingston memory. I had no trouble returning the memory. Newegg service was excellent.

While waiting for the new memory to arrive I learned that the video problem I was experiencing is a known issue with the video driver for the SiS chip set. This made me feel much better. See this Ubuntu forms thread and this one also for details on the video driver problem and solutions.

Wooden Computer Case 09

The new memory arrived and passed the tests. The Ubuntu 7.10 install completed without problems. A few days later I installed the video driver from Intel support. The install is just a matter of extracting the two files (sis_drv.so, sis_drv.la) and copying them to /usr/lib/xorg/modules/drivers.

OK so back to the case design. I decided to go with a flat horizontal design for the case. The smallest packing that I came up with was the mother board, DVD with hard drive on top and power supply laid out left to right. The transformer was removed from its plastic case. The card reader also had its case removed and went in front of the motherboard. I have no intention of ever using the expansion slot so I could make the height just a smidge higher than the hard drive and DVD drive combined.

Wooden Computer Case 04

Two air intake holes with screens were put in the bottom of the case and exhaust slots at the top of the sides and back. I had hoped that this would be sufficient but test assemblies showed that the power supply gets very hot. The fan never turned on. I tested the fan independently and it worked fine. The transformer logic that turns the fan on may be broken or I may not have put enough load on it to cause the fan to run. Either way I decided that the power supply ran too hot for inside the case and that a system fan would be needed. I didn’t think it would be worth it to return the transformer as I had already started building the case based on the size of it. I tried adding a duct so all the air flowed through the transformer. This kept the transformer very cool but then the hard drive got very warm. I later added a third hole in the bottom on the other side of the hard drive and removed the duct in the hopes that both the hard drive and transformer would stay cool.

All this testing was done before the case was fully glued up and finished.

The case is designed so that it can either be mounted under a cabinet or free standing on a desktop as shown. I haven’t tried the under cabinet mounting yet and I may not because I like the way it looks on the desk under the monitor.

Highlights of case construction

Here are some highlights of how the case is made and what it is made of. I may write more detailed instructions later.

The case is made of cherry for the top, front, sides and legs. The back is maple and the bottom is maple plywood. The cherry came from extra drawer fronts left over from when our kitchen cabinets were installed. The top uses cherry plywood which is hard to find (you won’t find it in Home Depot). In the Boston area Boulter Plywood is a good source.

The brackets to hold the hard drive and DVD drive together and to the case bottom were made out of 22 gauge steel. I contemplated using wood but it would have added too much to the width of the case and wouldn’t have been as strong. I cut the metal with tin snips and folded it into the shapes shown.

Wooden Computer Case 01

The power button was cut from a much longer piece with rabbets routed on each side. Otherwise it would be too small to work with safely. The rod sticking out the back is a nail with the head cut off. It is just a friction fit. It uses a spring from a ball point pen. The switch itself was something that I have had in my junk drawer for so long I don’t remember where it came from.

Wooden Computer Case 03

The eject button was made in a similar way. It is held in place with a small rubber band stretched across two small screws. A dollop of hot melt glue on the back of the button makes it just the right shape to contact the button on the DVD drive.

Wooden Computer Case 02

The back of the front panel needed to be milled to different depths for the buttons, DVD, and card reader. The round holes were made with Forstner drill bits and the larger areas were done on a router table.

The DVD drive drawer front was a challenge. The DVD tray is designed to take a removable drawer front (it comes with both black and beige). The plastic groves/slots that the drawer front clips on to were too small to mill out of wood and there is no room to attach with screws. I decided to cut the plastic drawer front to a smaller size using a scroll saw. I also sanded the face flat. Then I routed a dado in the back of the wooden drawer front and attached the two with rubber cement.

All the rectangle holes were cut with a scroll saw. Some of the card reader slots were so thin that I needed to drill two holes side by side just so the scroll saw blade could be inserted.

All critical cuts were first done on practice scraps of wood. This is very different from working with software where it is easy to go back and make changes after testing. With wood one mistake can cause all the previous work to get trashed. So you practice and test first.

There are six indicator lights on the front (power, DVD, and one for each of the four card slots). I did not include a hard drive activity light. They are barely visible unless lit up. I didn’t want the lights to overwhelm the simple design so they are 1/16 diameter holes with tiny plastic light tubes. The light tube was taken from a Lego Mindstorms part. It was cut into small lengths — just long enough to reach the LED behind it — friction fit and then coated over with polyurethane when the outside was finished.

I added a sheet of 26 gauge steel to the top for RF shielding. I should probably have more all around but I couldn’t justify the extra effort for something that I don’t have the equipment to measure the effects of. So far I don’t notice any RF problems and the case is right under the monitor and next to a cordless phone.

Summary and lessons learned

Overall I’m very happy with the way the case looks and functions.

Wooden Computer Case 12

After the case was fully assembled I updated the OS to Ubuntu 8.04.1. The SiS drivers from the Intel support site don’t work on 8.04 but a working driver can be found in this thread (post #4).

There are two issues one with the case and one with the motherboard/OS.

  1. The case fan is too loud. More to the point the fan is quiet but the moving air is loud. I need to do some trouble shooting here to see if there is anything that can be done to fix the problem.
  2. The lack of good video drivers (ones that will do 3D) from SiS is a let down. I would really like it if Google Earth would work for example. It would be nice if either SiS started supporting Linux or if Intel had chosen a video chip with full Linux support for this board.

I’m considering switching to the newer Intel motherboard with the Adam processor because it has a video chip set with good Linux support.

One minor thing is that the DVD drawer, when ejected, bumps into the keyboard because the desk isn’t deep enough. I just have to remember to slide the keyboard forward when ejecting the DVD.

I think I met all my goals except that it isn’t quiet enough (It is a little louder than the one it replaced). It uses between 33 and 48 watts, which is a little more than my laptop (ThinkPad Z61m) but much less than the old computer. The old computer used between 70 and 95 watts. Measurements were taken with the handy kill a watt device and doesn’t include the monitor or any other peripherals.

The cost was reasonable. You could build it for less today or get a better CPU for the same money. The supplies for the case mostly came from stock I already had. However any reasonable accounting of my time would jack the price way up. But this was for fun so I didn’t track my time at all.