An Experiment: WIRED on iPad, Recreated in HTML5 & CSS3

In May 2010, WIRED released the iPad edition of WIRED magazine. Currently each edition is produced using Adobe InDesign.

I decided to see if I could re-create a few of the page layouts from the “iPad Edition Free Preview” included with WIRED’s app using semantic HTML5 and CSS3.

So far I have re-created the “From the Editor” column on the first page which has a fairly simple layout. (Later, if I have time I plan to tackle the second page article which has a more complex column layout.)

Since I don’t own copies of any of the fonts WIRED uses, I made do with a couple somewhat similar but much less nice-looking fonts from Google Web Fonts.

Screen Shots of HTML5 / CSS3 Layouts:
horizontal view vertical view

View live in a new window.

(To toggle between horizontal and vertical views, click the little page icon at the top of the screen.)

NOTE: Since these layouts are intended for view within iPad, they were tested only in Safari and Firefox browsers.

(Magazine page designs, WIRED logo and WIRED magazine cover image copyright by WIRED.)

Printing Table Headers on Every Page

I recently researched how to print table headers on every page for long html tables spanning multiple pages. Following are my findings.

Results of Table Printing Tests

(Tested in IE7, Firefox 3, Chrome 12, Safari 5 and Opera 11.)

Firefox prints table headers on each page automatically as long as table is formatted with th tags wrapped in a thead and the main table content wrapped in tbody.

Example:

<table>
	<thead>
		<tr>
			<th>header 1</th>
			<th>header 2</th>
			<th>header 3</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>content 1</td>
			<td>content 2</td>
			<td>content 3</td>
		</tr>
	</tbody>
</table>

The other browsers still would not print table headers on each page however so I tried Googling a bit more and found this page: http://www.xefteri.com/articles/show.cfm?id=26

I tried adding the following CSS styles based on those from the above page:

table {border-collapse: collapse;}

th, td {padding: 1px 8px;}

th
{background: #CCC;
text-align: left;}

td {border-bottom: 1px solid;}

thead {display: table-header-group;}
tfoot {display: table-footer-group;}
tbody {display: table-row-group;}

After adding these styles, Table headers printed on all pages in IE7 as well as Firefox. Headers still wouldn’t print in Chrome, Safari or Opera however.

Unfortunately, it turns out this is a known bug in Webkit which Safari and Chrome use:
https://bugs.webkit.org/show_bug.cgi?id=34218

I couldn’t find an official bug report for Opera but so far it doesn’t appear there is currently a way to enable printing table headers on multiple pages.

Summary

So until Webkit and Opera add support for this feature, only Firefox and IE6+ enable printing table headers on every page out of the browsers I tested.

Basic Git Commands

Basic Git commands to get you started if you are just starting to use Git for version control.

Conventions:
• Commands you should type into your terminal window are in the Courier New font.
Underlined text is just an example, replace with what’s relevant to what you want to do.

The Absolute Basic Commands to Get You Started

Check the current branch you’re in:
git branch

Switching branches:
git checkout master

Show changes in your branch (which haven’t been committed yet.):
git status

Pull in latest code into a shared branch
(make sure to type the correct branch name:)
git pull origin master

Pull in latest code from shared branch into a private branch to keep it up to date
git pull --rebase origin master

Committing files:
git add .

“.” = all files
You can also enter the file path for one or more specific files

git commit –m "describe change being committed"

Push to remote branch (you should usually do another pull first to check for conflicts):
git push origin master

Fixing Merge Conflicts

After pulling you may occasionally see a message warning that you have a merge conflict in one or more files.

(To fix these you can just open the problem file(s) in your code editor and so a search for “>>” and clean up the problem code then do another git add and commit.)

Revert your changes and overwrite with latest version before you merged:
git checkout file path

Get rid of all your changes (if something goes wrong and you don’t want to commit):
git checkout .

After resolving a merge conflict you can commit again normally:
git commit –m "resolved merge conflict

Working with Branches

Check which branch you are in (returns a list of all your branches with the current one marked):
git branch

Switching branches:
git checkout branch-name

Checkout a new branch which someone else has created and track it
(Make sure to enter the correct branch name or you will get an error):
git fetch
git checkout –t origin/friends-branch-name

Delete an old branch:
git branch –d branch-you-want-to-delete

Create a new duplicate branch to your current one
(”cd” to your main code directory first. Enter any name you like for your new branch.):
git checkout –b your-new-branch-name

After creating a new branch make sure to commit there.

Temporarily Setting Aside Work in Progress

So you don’t have to commit when switching branches or if you only want to commit one small thing:
git stash save "work in progress on foo feature"

You can now edit and commit some other little piece of code if you want
(or switch to another branch temporarily and then switch back):
IE: git add "blah", git commit

Go back to what you were working on:
git stash pop

Useful Utility Commands

Clean up old files so Git doesn’t start responding too slowly (run once a week or so):
git gc

Easy Button Rollovers

A quick and easy cross-browser rollover effect for buttons. (Hover style will only work on links not on inputs for IE6.)

HTML:

<a href="" class="button">Go!</a>
<input class="buttons" type="submit" value="Submit">

CSS:

/* Sample Button Styles */
.button
{background: blue;
border: 1px outset;
color: white;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 4px 8px;}

/* Rollover Effect */
.button:hover
{filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
-khtml-opacity: .75;
-moz-opacity: .75
opacity: .75;}

Follow

Get every new post delivered to your Inbox.