This is still an ongoing project, and partially an experiment but here is my game plan:

Make The Standard Design Light/Flexible

The site right now is actually pretty simple in design and structure. It’s a grid layout, everything is modular and ID/classed up. I’m a slight performance junkie and graphically impaired, so image use is pretty minimal and I’ve sprited what I could to make the design as light weight as possible. The core site itself is actually just a few requests. Everything that can benefit from being so is minimized/gziped to lessen the payload down the wire. JS is only included on pages where it’s needed. Light payloads and minimal requests are the name of the game.

This benefits all platforms. Even with 45 thumbnails from Project 365 images on one page, I still can load it all about 2.5 seconds on my laptop. That’s not terrible. Some say “think mobile first”. I say “think performance everywhere”. There’s no reason why performance should be limited to mobile.

Rejigger For Mobile

Step two is to adjust the site for mobile. In my case that means hiding some less useful things, and some size and layout related changes to fit on a smaller screen. Like I said, I’m not serving up a separate mobile site. My pages are already rather light and saving 1 KB doesn’t seem worth it to me just yet. I just want my existing site to not feel like a desktop site. This is more about usability. Performance wise I optimized with mobile in the back of my head while working on the desktop experience.

I didn’t want to include a separate mobile stylesheet since my changes are intended to be subtle and minimal. Besides, that’s a separate request for mobile users. Instead I appended to my existing stylesheet with something like this:

@media only screen and (max-device-width: 480px) {
    body  {
        min-width: 0;
        width: auto;
    }
    #page {
        min-width: 0;
        width: 100%;
    }
    /* and so on... */
}
@media screen and (max-device-width: 480px) and (orientation:landscape) {
    /* landscape specific css */
}

Like I said, I intended for my changes to be pretty subtle. This works pretty well. The one thing it can’t really handle is images. I tend to be pretty light on image use, so it’s not a deal killer for me. However I may eventually look at better solutions in the responsive image world. For now I’ll just make the editorial decision to keep image use tame.

In general my philosophy has been:

• Does this have value in a mobile context? (no: hide it, yes: continue)
• Can I adjust the layout/design to make this not suck on mobile? (no: hide it, yes: continue)
• Is this more work than it’s worth? (no: do it, yes: hide it)

Final Thoughts

I’ve still got some more polish to do, I know <pre/> blocks don’t look/feel right and the comments area is still not quite there. The image gallery experience is not even started. But overall it’s still better than the desktop experience I was serving just hours ago.

Perhaps one day the paradigm will shift on this blog, but I don’t see that happening just yet. Most of what benefits mobile also benefits the desktop experience. This approach gives me an improved mobile experience with minimal hassle. I also benefit from not needing two do work twice as I would if I had a separate mobile experience. That means more time to be productive.

For Users

New Look For Tabs

One of the first things that you’ll notice is tabs on top. This paradigm really makes more sense since the tab defines not just the content but the environment it’s viewed (prev/next button, URL bar). It’s also just much sleeker looking. After a few minutes you’ll likely agree this is a better approach than tabs under.

Another nice touch is if you enter a URL that’s already open in another tab, you’ll be given the option to switch to that tab. Perfect for those of us who end up with 50 tabs by lunch time.

It also just feels tighter and less intrusive on the web browsing experience.

App Tabs

App Tabs are a great way to pin sites you use constantly (webmail, Twitter, Facebook, etc.) to your browser and make them easily accessible throughout the day. I suspect many webmail/Facebook addicts will really dig this feature. To use it, right clicking on a tab and “Pin as app tab”. Don’t need it? Don’t use it, it’s not forced upon you.

Tab Groups

Tab groups are simply a way to group your tabs so that you can stay a little more organized through the day. For example you might group tabs for “personal” and “work” then switch between the two groups a few times per day, rather than navigating through 50 tabs to find what you’re looking for. The tab groups interface also gives you a more visual way of navigating tabs and a search feature for searching for a particular tab. I personally like it for searching through the dozen bugzilla bug reports I have open through the day. It takes a little effort to work into your workflow, and I’m personally not quite there yet, but once you do it seems to really be handy. Again you can ignore it if you feel no need.

Goodbye Status Bar

The status bar you used to see at the bottom of the window is gone for most people. If you have an add-on that relies on it, for now it will still show (one of my computers still has it). Just another few pixels for web content. It does take slight getting used to for the technical folks who watch the connections as we’ve been used to looking at that bar for 15 years or so. For the rest of you, it’s just more web on your screen to fill with photos of cats and amusing captions.

Polish

Like every Firefox release, there’s little polish, cleanup, simplifications everywhere. To many to go into each individual tweaks but you’ll see some, and others you correctly won’t see as unused and outdated options are gone.

Sync

Sync is now built-in. Settings, passwords, bookmarks, history, open tabs. It’s encrypted on your computer then sent, so the only one who can view the data is you. I’ve called this the ultimate security model in the past. It’s optional, you don’t have to use it, you don’t loose anything by not using it, other than the ability to sync multiple computers obviously.

Add-on Manager

The add-on manager got some love in 4.0.

OMG Fast!

Firefox 4 is faster in almost every respect. First of all, it seems much more responsive on startup. Its JägerMonkey JavaScript engine has really made a difference in various benchmarks including Kraken, Sunspider, and V8. It also has hardware accelerated graphics. Even on Windows XP, which is still fully supported (ahem).

Out Of Process Plugins (Mac)

Windows and Linux got this in Firefox 3.6, the Mac version was a little behind schedule. Plugins now run outside of the Firefox process. That means when a plugin like Flash crashes, it won’t take out your entire browser. As Windows users will tell you, this makes a big difference in terms of stability.

Do Not Track

Simply put it’s a way to tell websites and advertisers that you don’t want to be tracked. It’s obviously up to websites/advertisers to honor the flag.

To enable it go into Preferences and under the “Advanced” tab select the “General” sub-tab and check the “Tell web sites I do not want to be tracked” checkbox.

For Developers

Support for WebM Video

I’ve discussed WebM on this blog before and won’t repeat what I’ve said before. WebM is an open standard, it looks great.

WebGL

WebGL is amazing. Check out some of the demos by Mozilla or gathered by the Chromium team.

Take a look at Flight of the Navigator and remember: this is the web!

Fix for the CSS :visited hole

Just a FYI, this no longer works.

Web Console

This replaces the old Error Console and in many ways is almost like Firebug Lite. It’s got some great features like HTTP headers and will make it a lot easier to quickly debug things if you’re using a computer without Firebug already installed. If you are a web developer make sure to take a look.

Do Not Track Header

This is a feature that’s been in the news quite a bit, and mentioned above. When enabled all HTTP requests will include the following header:

DNT: 1

HTTP Strict Transport Security

A HTTP header to tell browsers to only use HTTPS to communicate with the site. As more sites start to switch to HTTPS this is a great way to mitigate some potential attack vectors.

CSS border-radius

If you’re a web developer or designer you’ve likely tried to do this before using images and realized how much it sucks. Now you can do it with the simplicity of CSS.

CSS -moz-calc

Do calculations to determine the size and shape of an object. I can’t tell you how many times this would have been realy helpful.

HTML5 Parser

Faster, more powerful, more consistent, futuristic!

Partial Support For HTML5 Forms

Forms in HTML5 are pretty awesome. I won’t go into detail on HTML5 forms here, but you should check them out.

SVG Animation with SMIL

Exactly what the title says. I suspect this will result in some really cool things over time, and some really pointless things that we’ll still find amusing.

Of course that’s not all, just the stuff I really find to be the most interesting.

What makes them so brilliant is that they are actually 100% true. I spent a summer cleaning up just this type of stuff. It’s true, it’s out there, it’s painful.

Here’s a cool little optimization. By using a data: url you can use the font inline by encoding in base64. For example:

@font-face {
    font-family: "My Font";
    src: url("data:font/opentype;base64,[base-encoded font here]");
}

body {
    font-family: "My Font", serif
}

You can see this in action here. This seems to work fine in Firefox 3.5, and Safari 4 (presumably any modern WebKit based browser). Other browsers will simply act as if they don’t support @font-face.

In practice I’d recommend putting it in a separate stylesheet rather than inline css so that your pages are smaller and css can be cached for subsequent page views.

Data url’s are part of Acid2, which most modern browsers either pass or plan to pass. If you use an Open Type font you’d get pretty decent compatibility (IE only supports Open Type). Using True Type you’d still get pretty good compatibility sans IE. Check the @font-face page on MDC for more details. Unlike images, browsers that support @font-face are likely to support data: url’s as well, making this a pretty good solution.

Special thanks to Open Font Library for having some nice free fonts with awesome licensing. This post was partially in response to a comment left the other day on my @font-face hacks blog post.

Cool Trick!

Rule #1 of Steve Souders popular book “High Performance Web Sites” is simply:

Make Fewer HTTP Requests

That said, @font-face can be essentially as an image sprite by creating your own font with the glyphs you want. Unlike image sprites they aren’t hacky in nature requiring tricky coordinates, nor are they obnoxiously memory intensive (and a drag on mobile devices). Firefox also loads fonts last, so you can be assured it won’t slow down the rest of your page. They also degrade nicely for devices that don’t support them.

Of course this changes webdesign to use simpler icons and pick 1 color per glyph… but there are some pretty interesting enhancements for example the ability to scale. Fonts are designed to resize much better than an image.

The other caveat is that this can make your markup slightly ugly. However it’s not so bad when your building something in JavaScript. Consider for example implementing Pac-Man. Rather than a dozen images, or some complex sprite you can simply move <em>p</em> around. You can have quite a few glyphs in 1 font file.

Of course you can also use <canvas/> or a data: url to embed images, but IE doesn’t support <canvas/> and only recently started supporting data:. IE has supported OpenType (not TrueType) fonts since IE 4.

I’d be curious if anyone actually implements this and how well it works in practice. It’s not a true replacement for image sprites, but for a few cases, such as simple icons, it could actually do the trick.

Um What?

This trick can also be engineered to work against the way the web traditionally works. For example, I could create a ROT13‘d font or any other encoding I imagined. This essentially lets you remap the way characters are on the page, and the way they appear. For example on the page may appear:

<span class="rot13font">rknzcyr@qbznva.gyq</span>
<small><strong>Note:</strong> Do not copy/paste my email address</small>

That looks like a totally invalid address, but with a ROT13 font, you’d know what it is… though if you copy/paste it you’re going to get the encoded version. (I could in theory course engineer some JS to ROT13 the string). This also could deter some spam bots, which lore says have found ways around JS munging.

Conclusion

Moral of the story: @font-face can be fun for more than just typography. Cult of Helvetica be damned… all you typography geeks.

The internet is a notorious waste of paper. One could argue there’s no need for printing online content since you could easily save it either as text, the entire page, or print to a PDF file (my personal preference). The main source of waste is due to the design of the page resulting in sometimes several useless pages and 1 page of useful content. The rest of them simply go in the recycling bin, or worse the trash. Some clever users preview first and only print the pages they want. Most just print.

There are a few software products out there that try and reduce the amount of wasted printing such as GreenPrint, though it requires installation, companies hate buying site licenses for this type of stuff, etc. Personally I think they are a pain and prefer to do it myself.

If every site were to include a printable stylesheet, the number of wasted pages would drop dramatically.

Without a printable stylesheet a short post on this blog would take 3 pages to print out, 2 of which were worthless navigational elements. The pages are also awkward to read. With a printable stylesheet the output not only looks nicer but is reduced to 1. That saves ink, paper and sanity.

Separate printable pages suck. They are so 1999. Nobody goes there anymore and they often drop content such as images which you may want to have.

When you look at some of GreenPrint’s statistics you can’t help but wonder how much would be saved if more sites had printable stylesheets that tried to reduce the amount of unnecessary printing is done. I’d guesstimate just getting rid of some useless design elements in printable output could likely reduce the amount of ink consumed by 30-50%.

For developers looking to get started A List Apart has a great tutorial on them. Most developers know how to do it, but printable stylesheets become an afterthought in the development process.

The Code

WordPress.com

You’ll notice a comment sure to make any web developer laugh on WordPress.com’s login page

	<link rel="stylesheet" href="http://wordpress.com/wp-admin/wp-admin.css?version=MU" type="text/css" />
	<!--[if IE]>
		<style type="text/css">#login h1 a { margin-top: 35px; } #login #login_error { margin-bottom: 10px; }</style>< ![endif]-->
	<!-- Curse you, IE! -->

The guys behind WordPress a while back took the site BrowseHappy under its wing. WordPress has always been a strong believer in web standards, so this isn’t surprising (though still amusing). Did you also know that the guys behind it (Automattic) don’t have job titles? Unless you consider “Chief BBQ Taste Tester” to be a real job title. Matt, I hope your job doesn’t kill you with a heart attack.

Facebook

The geniuses over at Facebook feel the same and put the following on the top of their IE conditionally included stylesheets:

/*  ------------------------------------------------------------------------
                    Facebook | IE/PC Hacks | getfirefox.com
    ------------------------------------------------------------------------  */

popurls

The ever so popular popurls has the following comment in the header of the page.

<!--

  __   __
 (  \,/  )
  \_ | _/  IN THE FUTURE EVERY URL WILL BE POPULAR FOR 1.5 SECONDS
  (_/ \_)                  - thomas and the wise popurls butterfly

-->

RedHat

RedHat was one of the earlier corporate sites to redo itself into a standards based design. They have great respect for those who came before them. In their master css file they have the following tribute as well as a little remark about Netscape 4.x:

/* 	redhat.com MASTER style sheet

	a tip of the red hat to Zeldman, Bowman, Meyer, Shea, Cederholm, Newhouse, Holzschlag,
	and many, many other css and web standards pioneers who have inspired us. 

	the css, layout and validation status of redhat.com is a work-in-progress. numerous
	web-building worker bees are working furiously to correct the bugs, minimize the hacks
	and validate the code. stay tuned. 

-------------------------------------------------------------------- created June 2004 */
@import url("global.css");
...
@import url("dig.css");

/* ---------------------------------------------------------------- ns4 styles - bah! */

table {
	border: 1px;
	}
...

Panic Software

Panic Software has a cool little piece of code for those who browse the product page for Coda (awesome product btw) with IE and don’t have at least version 6.0:

		<!--[if lte IE 6]><p id="iewarning"><img src="/extras/ripoff/images/ie-warning.gif" alt="IE Warning" title="We hear Firefox is nice!" /></p>< ![endif]-->

I hear it’s pretty nice too.

Panic also has a comment in the head of their homepage that reads:

<!-- This homepage design is not long for this world. Enjoy it while you can!   -->

Twitter

Twitter (who redirects to drop the ‘www’ btw) is a very popular service these days. In their html they mark which server served up the data. You’ll see it in the form:

  <!-- served to you through a copper wire by bennu.twitter.com at 24 Nov 19:08 in 11 ms (d 0 / r 8). thank you, come again. -->

Copper eh? No fiber in your data center? I won’t judge, as long as your bandwidth is plentiful.

WordPress.com

Here’s a bonus from WordPress. While many analytics programs use a 1px transparent “tracker gif” to manage statistics, WordPress did something a little different. At the very bottom on the left hand side, you can see the face of WordPress analytics in all it’s tiny glory.

Mozilla

This technically applies to more than just Firefox. You’d be surprised to see how many times kungFuDeathGrip is in the code base.

Many Sites using Google Products/Services

Many people have noticed strange Google tags on sites such as:

code
<!--googleoff: index-->
all
<!--googleon: index-->
over

This isn’t a “SEO” practice, despite some misconception on the web. This is used by the Google Search Appliance, a product made by Google which many websites use to power their own search engines to tell the engine what to read and what to ignore. It wouldn’t be practical for Google to use these “in the wild”. The reason is that spammers could effectively hide an alternate website within those comments. Google’s business is based largely on accurate search results. Spammers have already tried to abuse the css property display: none;. This would be even better. You can find code like this on Apple.com among many other sites.

Webmasters can however optimize their side for AdSense using a technique recommended by Google:

<!-- google_ad_section_start -->

<!-- google_ad_section_end -->

This tells Google to give weight to a certain part of your page when deciding what ad to display on the page. This is good for cases where you feel other material on your page is influencing the ads and resulting in off-topic ads.

Infrastructure/Platform

Microsoft

Microsoft‘s offering against Linux and Apache is IIS on Windows. Which one would expect they themselves use. What they don’t tell you is that they also have used Akamai (with over 25,000 servers), which uses Linux. They have used Akamai for many things like DNS, and caching files. Rather than “Powered By Windows Server” maybe they should append “hiding behind Linux”.

Myspace.com

Myspace.com was previously Adobe/Macromedia’s model customer because it was written in ColdFusion, and said to be the biggest ColdFusion site on the net (and one of the biggest sites on the net). Many think it still is, but it’s not. While many url’s suggest it might be because they end in .cfm it’s actually running ASP.net and has been since aprox, 2006. You can confirm this by viewing the headers on some of their pages. You’ll see:

X-AspNet-Version: 2.0.50727

MTV.com

MTV.com‘s site has search powered by a Google Search Appliance. MTV is also owned by Viacom who sued Google, the parent company of YouTube. The folks at MTV awesomely admitted the irony during relaunch on their blog.

Global Crossing

Tier 1 networking provider Global Crossing really wants you to know how fast they are. Doing a trace could turn up something like this:

  7    15 ms    13 ms    14 ms  COMCAST-IP-SERVICES-LLC.tengigabitethernet1-4.ar5.NYC1.gblx.net [64.208.222.58]
  8    14 ms    13 ms    13 ms  tengigabitethernet1-4.ar5.NYC1.gblx.net [64.208.222.57]

Yes that’s right, they use 10 GigE! Just FYI.

Goofy

Firefox 2.0

In Firefox 2.0, go to “About Firefox” (under the help menu for Windows, under the Firefox menu for Mac), and click on credits. You’ll notice Stephen Colbert. He wrote it single handedly, but added some other names because he’s a nice guy. Bonus: I’m on the list too. Above him because I’m better than him. That’s right, I said it.

Handy

Chase

Chase for some reason puts it’s login form in plain text. The submit url is https, but it doesn’t feel right. They do have a SSL enabled login page, but for some reason they hide it. Here it is for those interested:

https://chaseonline.chase.com/online/home/sso_co_home.jsp

Google

For some reason, most of Google’s services are insecure by default. By simply going to https, you can use SSL for added security.
Gmail: https://mail.google.com
Google Calendar: https://www.google.com/calendar
Google Reader: https://www.google.com/reader

On the next page is the 2008 US Presidential Candidate Campaign sites…

A few months ago Jesse Ruderman introduced jsfunfuzz, which is a tool for fuzz testing the js engine in Firefox. It turned up 280 bugs (many already fixed). Because the tool itself is not horded behind a firewall it’s also helped identify several Safari and Opera bugs. It’s a pretty cool way to find some bugs.

The WebKit team has now released SunSpider a javascript benchmarking tool. Something tells me this will lead to some performance improvements in everyone’s engine. How much will be done for Firefox 3.0 is a little questionable considering beta 2 is nearing release, though you never know. There’s been some nice work on removing allocations recently. So just because it’s beta, you can’t always assume fixes will be minor in scope.

Another test that many are familiar with is Acid 2 which essentially is checking CSS support among browsers. Ironically this one too was released when Gecko is somewhat late in the development cycle.

Efforts like this really help web development by allowing browser developers to have a baseline to compare their strengths and weaknesses. Having a little healthy competition as motivation can be pretty helpful too .

It got me thinking. If SVG can accurately handle percentages, why couldn’t SVG be the layout engine that CSS has struggled to be? Leaving CSS to do what it does very well (text manipulation). For example:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>Sample with SVG Binding</title>
  <link rel="stylesheet" media="all" href="/style/tabbed-pages"></link>
  <link rel="layout" media="all" href="/layout/test.svg"></link>
</head>
 <body id="robert.accettura.com">
 <div id="header">
  <h1>Header</h1>
 </div>
 <div id="content">
    <h2>This is a title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer cursus erat. Fusce pharetra. Nullam vestibulum fringilla augue. Quisque sed neque eu nisl malesuada gravida. Mauris arcu lacus, malesuada sit amet, imperdiet sit amet, laoreet nec, magna. In pretium lacinia eros. In vel eros. Nullam sed orci. Integer sollicitudin ante suscipit diam. Sed tincidunt, libero et bibendum mattis, eros lacus nonummy purus, eu interdum erat augue nec tellus. Donec at lacus. Aliquam luctus. In hac habitasse platea dictumst. Vivamus pede urna, auctor eget, aliquet nec, auctor non, libero. Nulla facilisi. Etiam ornare fermentum est. In tempus porta dolor. Phasellus at felis.</p>

<p>Vivamus sollicitudin justo vel turpis cursus suscipit. Mauris id nisi. Sed metus ipsum, ultrices ac, dignissim in, auctor ut, dui. Aliquam tempor mollis metus. Sed vitae neque vitae massa interdum viverra. Ut feugiat ipsum vitae purus. Maecenas consectetuer pede ac ante. Aenean pharetra. Nulla facilisi. Cras tincidunt massa a augue. Sed a augue. Integer magna massa, vestibulum a, semper ut, vehicula a, dui. Fusce dignissim venenatis lectus. Fusce nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porttitor lorem et purus. Praesent posuere tempor lectus. Donec a lorem. Praesent ante ligula, convallis et, porta nec, dapibus vel, odio. Integer tellus ipsum, viverra nec, suscipit in, convallis quis, mi.
 This is a Title This is a header</p>
<p>Posted By: <a href="#">Robert</a></p>
 </div>
<div id="sidebar">
Sidebar
</div>
<div id="footer">
This is the footer
</div>
</body>
</html>

And the new svg layout:

< ?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://web.resource.org/cc/"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="100%"
   height="100%"
   id="robert.accettura.com"
   version="1.0">
  <g id="robert.accettura.com"
     transform="translate(-274,-107.6479)">
    <rect style="opacity:0.84736843;fill:black;fill-opacity:1;fill-rule:nonzero;stroke:#34343c;stroke-width:1.33481812;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="header"
       width="100%"
       height="86.7892"
       x="274.66742"
       y="108.31531" />
    <rect style="opacity:0.84736843;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#34343c;stroke-width:0.82362348;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="content"
       width="100%"
       height="282.67288"
       x="0"
       y="194.84891" />
    <rect style="opacity:0.84736843;fill:#f2f2f2;fill-opacity:1;fill-rule:nonzero;stroke:#34343c;stroke-width:0.82362348;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="sidebar"
       width="100%"
       height="282.67288"
       x="100%"
       y="194.84891" />
    <rect style="opacity:0.84736843;fill:black;fill-opacity:1;fill-rule:nonzero;stroke:#34343c;stroke-width:2.00462627;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="footer"
       width="100%"
       height="38.995373"
       x="275.00232"
       y="477.3645" />
  </g>
</svg>

And here is the above SVG example in case you want to view it in your SVG-capable browser.

This SVG was made using Inkscape, and hand edited by me (I don’t code SVG, so it’s a true “hack”). Total time to do this: 5 min.

The trick here would be the id’s of the elements in the SVG align with the elements of the html. All subelements are rendered within the SVG’s matching element.

The end result would be something like this:

So is this a reasonable thing to do? I don’t know, but considering how far SVG editing has come, having a vector based layout language sounds really ideal. Something where a tool can do most of the hard work is ideal. Something intuitive is ideal.

Using gzip on SVG also yields decent results. So file size wouldn’t be too bad.

The technical side of implementing such a thing on a browser may be a whole other deal. But from a developer point of view, it would be a really cool way to create webpages.

So there’s my excessively random thought of the day.