Retrospective web development exercise for the 2011 archive. Make a small local form with a title and a message. Submit it with a missing title. The next page should show where the problem happened and preserve the message you already typed. Use a nearby error message and escape submitted values … Continue reading →

Retrospective web development exercise for the 2010 archive. Open a two-column page and drag the window narrower until the article becomes hard to read. Write down the point where it happens. That gives you a better starting point for a layout change than picking a width because it matches one … Continue reading →

Retrospective web development exercise for the 2009 archive. Take two pages from a small site and mark the pieces that repeat. The heading and article usually belong to the individual page. The masthead, navigation, and footer are candidates for a shared template. Make the change with just two pages. Add … Continue reading →

Retrospective web development exercise for the 2008 archive. Open a small site and put the mouse aside. Press Tab from the address bar and see where focus goes. If you can open the first menu item but can’t reach the second, check whether it’s a real link or an element … Continue reading →

Retrospective web development exercise for the 2007 archive. Start a local repository with an HTML file and a stylesheet. Commit the working page, change only the link color, and run git diff. The useful part is seeing the exact decision you made before you save it. Commit the color change … Continue reading →

An early Ajax request might return a fragment of HTML. JSON gives the browser a different option. The server sends named values, and the page decides how to display them. PHP 5.2 is a useful point in the timeline for this exercise because JSON support was bundled and enabled by … Continue reading →

The navigation that helps you move around a website can take up valuable space on a printed page. Try making a print stylesheet for an article without changing the screen layout. @media print { .site-menu, .sidebar { display: none; } body { color: black; background: white; } .article { width: … Continue reading →

Python 2.5 added sqlite3 to the standard library in September 2006. A small SQLite database is enough to try saving website notes without setting up a separate database server. Use Python 3 for this recreation. import sqlite3 db = sqlite3.connect("notes.db") db.execute("CREATE TABLE IF NOT EXISTS notes (title TEXT)") db.execute("INSERT INTO … Continue reading →

jQuery 1.0 was released in August 2006. One way to understand its appeal is to look at a small interaction. A link or button can find an element on the page and change its visibility without each page having to write the same setup code. Here is a recreation using … Continue reading →

Before trying a redesign, it helps to be able to answer two questions. What did I change, and how do I get the old version back? A version-control system gives you a place to record both answers. For a retro exercise, use a local Subversion repository and a tiny site … Continue reading →