Ryan Tomayko

bcat -- pipe to browser utility —

I’m pleased to announce the first public release of a small project I’ve been working on: bcat is a command line utility that streams text or HTML input to a web browser. Input is unbuffered and displayed progressively as it’s read from standard input, so bcat works great with programs that generate output over longish periods of time like build tools, tail(1), etc. It’s also useful for previewing HTML output when working on Markdown, Textile, AsciiDoc, Ronn, DocBook, etc. source files.

The plan is to bring as many of TextMate’s excellent HTML output capabilities as is feasible to the shell and to editors like vim or Emacs.

Higher Order Mustache —

Mustache is my favorite template language by far. By far. This is a great example of why. It solves every problem simply and elegantly, or it doesn’t solve it all. Here’s the syntax in its entirety. In his post, Chris talks about how adding very simple lambda support solved the cache block problem. It’s just as suitable as solution for embedding Markdown in templates.

Sweet Justice —

New JavaScript based text justification library looks promising. The default HTML/CSS text justification built into every browser has always sucked, due mostly to lack of word hyphenation.

One of the places I’d really like to have good justification is in Ronn’s HTML based man pages. It uses text-align: justify currently, but I’ve been considering making it non-justified because it’s so horribly bad. Compare it to the proper justified / hyphenated text generated by groff when viewing manpages in a terminal. It’s night and day.

Optimizing Optimizing HTML —

Oh neat. You can drop the type='text/javascript' from your <script> tags, type='text/css' from your <style> (and/or <link rel='stylesheet'>) tags and the browsers won’t care. Also, in 2010, <b> and <i> are cooler than <strong> and <em>, and trailing slashes on self closing tags are lame.

Personally, I like these little tricks for making HTML more human readable but I can’t believe people are actually doing stuff like this in an attempt to compress HTML to gain network/browser efficiencies. I dare someone to actually benchmark those optimizations. Cutting your sucky EULA page in half and trimming away all that shit in your header/sidebar would be much more productive (but still barely worthwhile).

Google Chrome for the holidays: Mac, Linux and extensions in beta —

Google’s shipping official beta builds of Chrome for Mac and Linux. I’ve been using Chromium for a few months now and it’s definitely become my favorite browser. It needs a flash blocking extension and an ad blocker. I’m using userscripts for both but they’re a little janky.

Detecting HTML 5 Features —

Mark has published the second chapter in his upcoming book, Dive Into HTML 5. I still can’t get past the typography. It’s so pretty.

Snakes on the Web —

Jacob Kaplan-Moss somehow pulls a bunch of interesting contemporary web development issues into a coherent essay. This bit on what happens when web apps begin to mature is especially well stated:

This is an impossible situation for framework developers: by optimizing for a quick start, by focusing on common needs, we’re essentially guaranteeing future failure. Remember the “Rails doesn’t scale” pseudo-controversy last year? I guarantee it’s only a matter of time until there’s an angry “Django FAIL” moment.

Frameworks ought to gracefully fade away as you replace them, bit by bit, with domain-specific code. (This is what I meant, above, that inter-op is also a scaling issue.) Right now, they don’t.

I wish more people would write about their experiences growing out of the general purpose web framework. It’s a totally natural thing but most people seem hesitant to talk about it because it’s interpreted as an attack on the framework or community.

Let's make the web faster —

Big giant list of articles, essays, tutorials, and tech talks on making the web faster. This is part of a larger Google Code project that asks, “what would be possible if browsing the web was as fast as turning the pages of a magazine?”

Dive Into HTML 5 —

My God the typography is stunning. There’s currently only a single chapter — on Canvas — but I imagine the others will fill in rather quickly.

8 Simple Ways to Improve Typography In Your Designs —

Measure, Leading, Quotes, Rhythm, Widows, Emphasis, Scale, and Rags. Great piece.

Dive into history, 2009 edition —

Mark Pilgrim: “Anyway, I now realize that there were some hidden assumptions behind my design decisions in 2000. Some of those assumptions turned out to be wrong, or at least not-completely-right. Sure, a lot of people downloaded dip, but it still pales in comparison to the number of visitors I got from search traffic. In 2000, I fretted about my ‘home page’ and my ‘navigation aids.’ Nobody cares about any of that anymore, and I have nine years of access logs to prove it.”

I don’t think most people realize how little site navigation matters anymore. Your site’s navigation is google, topic sites, blogs, and feeds. The “website” is dead. Long live the individual useful resource.

Javascript, it's Python with braces! —

Guyon Morée shows how JavaScript 1.7/1.8 have been moving more and more toward Python with a few side-by-side examples. List comprehensions and generators would definitely be extremely cool to have in browser land.

Advantages and Disadvantages of Learning in a Hypertext environment —

Via Ted Han (@knowtheory): “Hypertext allows information to be organized and connected in a variety of ways that provide the user with a flexible working environment. The following advantages highlight the benefits of working and learning in a hypertext environment…”

Sanitize: A whitelist-based Ruby HTML sanitizer —

Finally, a sane looking sanitization lib that doesn’t try to do too much.

Why specs matter —

I’ve linked to this before and I’ll link to it again.

Showcase Of Clean And Minimalist Designs —

Smashing Magazine shows off a massive catalog of minimalist designs and then attempts to deconstruct them.

The Road to HTML 5: getElementsByClassName() —

Includes a brief history of native support for getElementsByClassName in Mozilla and other browsers.

Why Programmers Suck at CSS Design —

Stefano Mazzocchi: “I have a much simpler and humble goal here: give programmers some tricks and some advice in how to proceed to make their web pages look cleaner, more readable and, hopefully, more professional, elegant and original than before.”

Introducing ActsAsMarkup: A Markdown, Textile, Wikitext, and RDoc Plugin for ActiveRecord —

Interesting Rails plugin from Viget Labs that adds ActiveRecord attribute helpers for various humane markup languages. The markdown variation supports both rdiscount and rpegmarkdown. Cool. Not sure how I missed it when it was released in August.

Conditional classnames —

Using conditional comments to stick an “ie” classname on <body> so that you can target IE from a single CSS file instead of bringing in a separate stylesheet. Nice hack.

class='robots-nocontent' —

Apparently, Yahoo!’s indexer supports marking specific content on a page as “extraneous to the main unique content”. This lets you prevent headers, navigation, and other types of site-level crud from overwhelming the content and the search results will excerpt only content that’s relevant to the page.

From the Yahoo! Web Crawler FAQ: “… apply the robots-nocontent attribute to indicate to search engines any content that is extraneous to the main unique content of the page. Yahoo! Search observes the class='robots-nocontent' present on XHTML elements, such as div, span, and all others.”

"Air Budd Form Builder" meets "/admin Considered Harmful" —

Bill Burcham applies the technique of making form controls inherit style from their container in the Air Budd Form Builder Rails plugin. Cool.

Google's undocumented favicon to png convertor —

I’m using this on all of my “linkings” index pages now (see here, for example). It works pretty well. I really like the idea of integrating a piece of the destination site’s visual identity instead of using a generic del.icio.us/bookmark icon. Some site’s with favicons don’t work properly, however, and I’d give anything to have another parameter that let me override the default globe icon (this one: ). It’d be nice if I could say, grab the favicon for this domain but if it doesn’t exist, give me the favicon for delicious.com ().

Cross Site XMLHttpRequest Design —

Oh, nice. Here’s a high-level design document that describes the new cross-site XmlHttpRequest (their calling it, “XXX”) functionality and ties the other documents floating around out there together. It seems that servers will be able to signal that certain resources are accessible from other domains using HTTP headers or (gasp!) XML processing instructions (PIs). Weird.

Bug 389508 – Implement Cross-site XMLHttpRequest —

Just landed on mozilla trunk a few days ago. See the draft spec for specifics.

HTML5 Validator —

Highly experimental HTML 5 validation service. More info and bookmarklets available on the about page.

Web Development for the iPhone —

“You can specify CSS based on viewport orientation which you determine via javascript and update the orient attribute of the body element. Target the browser with body[orient=‘landscape’] or body[orient=‘portrait’]”

Timeplot —

Very nice and functional JavaScript based timeplot library. Looks good, shows data-points on mouse over, approachable API. Good stuff.

Minimalism —

if any – Another hella-great minimalist design.

Minimalism —

Hilarious! What Mark doesn’t know is that much of my “minimalist redesign” was ripped directly from what he’s had in place for 2-3 years; “administrative debris” was just a convenient alibi.

Babelmark — Markdown Testbed —

Compare (as in, diffs) the output of 15 different Markdown implementations. Includes every Markdown implementation I’ve ever come across and then some…

peg-markdown —

An implementation of Markdown in portable ANSI C that’s roughly 28.5x faster than the canonical Perl implementation on a 179K test file. Looks like a complete implementation; includes smarty and footnote extensions.

Google Doctype —

What Mark Pilgrim has been working on at Google for the past year or so: an encyclopedia of web development.

highlight.js —

JavaScript based source highlighter with support for many languages in separate modules. Similar to the JavaScript Prettifier in that <pre><code> blocks are automatically detected and highlighted without an explicit language class.

What Is the Open Web and Why Is It Important? —

Brad Neuberg (Google Gears): “Our historical closeness to the web creates a kind of myopia, where we can’t see how amazing it is. It’s a billion Library of Alexandria’s dropped into our laps.”

Martian Mindsets —

Sam Ruby filling in for Mark Pilgrim (and featuring Mark Pilgrim in the comments) skewers Joel Spolsky over his “Martian Headsets” piece on the IE8 standards-mode dilemma. I use the word “skewered” in the nicest way possible, of course.

Presentational JavaScript to adjust text line-height in proportion to text column width. —

“If you can’t control the text width the next best thing you can do to compensate for an overly wide text measure is to increase the leading.” — I never considered that but it makes sense.

HyperText.m - source to TimBL's first implementation of hypertext (Sept. 25, 1990) —

From the comments: “HyperText is like Text, but includes links to and from other hypertexts.”

jQuery evangelism —

I need to give jQuery a serious look. Prototype’s Ajax.Request stuff is crippled (no PUT or DELETE) to the point of being worthless; the jQuery selector magic looks a lot more intriguing than what you get with Prototype, too.

css_color.vim - CSS color preview : vim online —

Makes the background of hexadecimal color codes the respective color. So, background-color:#f00 will have a red background in the vim editing window. Nifty.

9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension —

From the comments: “the only things i find [useful] in Web Developer Extension is the shortcut to clear cache… for other things i use Firebug…” — Me too!

Printing a Book with CSS: Boom! —

Bert Bos and Håkon Wium Lie show off some of Prince’s more advanced CSS and HTML features, including styling page size, generating headers/footers, advanced use of the CSS content attribute, page numbering, cross-references, and table of contents.

Håkon's Wium Lie —

Ahh, it turns out Håkon’s Wium Lie (Opera CTO and the guy who first proposed CSS) is on YesLogic’s board, makers of PrinceXML. I’m not sure how I missed that.

What should Microsoft do instead? —

Holy crap, this is insane. Just let people run IE6 and IE7 as separate standalone browsers side-by-side with IE8. As James said in my previous post, they can even rebrand it as “Intranet Explorer” :)

A pool for the W3C validators —

This is a good idea. The w3c hosted validators tend to perform on the bad side of horrible. I’ve run the validator locally but never thought to look for mirrors.

Prince XML: Generating High Quality PDFs from HTML + CSS —

Simple print typesetting using HTML/CSS. Targets the 80% of common print tasks w/ HTML/CSS. I’m going to be looking into mozilla’s cairo PDF output abilities within the next few weeks so it will be interesting to compare.

Run Internet Explorer 5/6/7 Natively in OS X —

This trumps Leopard for most important Mac development this year as far as I’m concerned. Words cannot explain the hatred I’ve developed for booting up multiple Parallels VMs to get at IE.

The Rule of Least Power - W3C TAG Finding 23 February 2006 —

“There is an important tradeoff between the computational power of a language and the ability to determine what a program in that language is doing.”

CSS 3: A Giant Serving Of FAIL —

“… CSS 3 is a joke. A sad, sick joke being perpetrated by people who clearly don’t build actual web apps…”

E-mail is not a platform for design [zeldman.com] —

“But when I say HTML mail still sucks, I don’t mean it sucks because support for design in e-mail today is like support for standards in web browsers in 1998. I mean it sucks because nobody needs it. It impedes rather than aids communication.”

HTML Entity Character Lookup —

Oh wow. I’ve been trying to find a single page that has every unicode character on it with its hex counterpart but this is pretty fantastic.

public-html@w3.org Mail Archives —

Looks like things are starting to heat up over here.

Setting Type on the Web to a Baseline Grid —

Yes! I’ve been doing this for a few months now with the corp. assets and I won’t go back. You can really see the text snap into a vertical rhythm when you hit it.

mjt —

Browser-side JavaScript template engine with concepts borrowed from Kid. Used by Freebase to drive formatting around JSON. Looks interesting.

Less sucky multiple-select lists —

Another interesting take on multi-select lists that uses checkboxes with labels and colors.

Multi-Select Lists vs. Checkboxes —

I’m real close to hating multi-select list boxes right now. Using an overflowed UL of checkboxes has some interesting pros (and cons).

The window.onload problem (still) [peter.michaux.ca] —

Nugget of wisdom: “… developing for the web is frequently about accepting small compromises to big philosophical ideals.”

Implement getElementsByClassName [bugzilla.mozilla.org] —

Awesome. Robert Sayre just checked in his document.getElementsByClassName implementation to mozilla trunk.

53 CSS-Techniques You Couldn’t Live Without —

Very nice list of CSS techniques.

W3C Markup Validator Results for "You, me and the W3C (aka Reinventing HTML)" —

Chairing the WG is one way to fix your validation issues! (yes, I’m just being mean now — ignore me. no but seriously.)

Proposing URI Templates for WebForms 2.0 [whatwg.org] —

Oh, hell yes:

demoroniser - correct moronic and gratuitously incompatible Microsoft HTML —

“The demoroniser keeps you from looking dumber than a bag of dirt when your Web page is viewed by a user on a non-Microsoft platform.”

OpenID for non-SuperUsers [intertwingly.net] —

Sam with a very simple, step by step tutorial on using your site as an OpenID identity provider.

IEs4Linux —

Whose going to get this running on OS X? I guess it doesn’t really matter. I can always X over to a Linux box…

Firebug 1.0 Beta Screencast —

Holy… This is big. Huge big.

CSS-Based Forms: Modern Solutions —

Big list of resources on CSS based forms.

gotAPI.com —

The best attempt I’ve seen at splicing multiple API references together. This uses the external documentation but provides indexing and browsing features.

The Elements of Typographic Style Applied to the Web —

This site is really starting to come along now. The latest addition on how to manage vertical spacing in intervals is something I’ve been wondering about for a while now.

FireBug —

Firefox extension with some promising script debugging/spying features.

AJAX Activity indicators —

Animated GIFs designed to indicate your site is doing something…

timbl's blog | Decentralized Information Group (DIG) Breadcrumbs —

Tim Berners-Lee’s blog. Finally!

Javascript Event compatibility tables —

Nice list of DOM events and the varying support of different browsers.

CSS: Specificity Wars Diagram —

CSS specifity chart based on Sith power levels — to good to be true.

CSS Import™ —

this site rocks

JavaScript Reference —

Decent javascript reference. I really like the format but the cards are images so you can’t use your browser’s find to locate stuff…

Web Building: Style Templates —

Big list of sites that provide CC licensed CSS layouts and tools for generating layouts.

CSS - Quirks mode and strict mode —

Information on quirks vs. strict mode for HTML/CSS rendering: how to trigger, what DOCTYPEs do what, etc.

Web Application Component Toolkit - Template View —

Excellent look at various HTML and XML templating methodologies..

Cascading Style Cheatsheet —

Styled for landscape printing…

Quotations and citations: quoting text —

Some information on using proper q and blockquote elements in HTML and then styling them with CSS to fix all the browser brokeness.

XHTML 1.0 —

The recommendation..

Full CSS Property Compatibility Chart —

red/green/yellow for specific css attribute support in major browsers.

Bring on the tables —

a thorough look at how to use HTML tables correctly.

CSS Negotiation and a Sanity Saving Shortcuts —

Some tips I haven’t seen before for dealing with IE’s broken CSS support. Using conditional comments for ie specific css, setting manual defaults, etc.

Float: The Theory —

A nice breakdown of how float works in CSS, which isn’t always intuitive.

Max Design - CSS Page Layouts —

Various CSS layouts.

WDG HTML 4.0 Element Reference —

One of the nicer reference sheets for HTML 4.0.

Using inline frames (iframe elements) to embed documents into HTML documents —

Everything that you can possibly know about iframes.

Floatutorial: Step by step CSS float tutorial —

Floating images and other objects using CSS.

On Semantics and Markup —

More goodness from the archives of Tim Bray.

Help the Googlebot —

Tips and techniques for helping Googlebot. If you are a symantic markup perfectionist, you probably already have most of these right.

2 Column Tableless Layout —

Methods for creating a 2-col layout using CSS.

Web Colors: html color names, hexidecimal values, hex codes —

Color name chart with hex codes and overlays.

XML/XSLT/CSS/JavaScript/ Treeview component.. —

..that rocks. Quite possible the only javascript treeview I’d ever consider using.

Wrestling HTML —

XML.com: Dealing with tagsoup HTML in Python.

Stylegala Bulletmadness —

A bunch of nice bullet images best used to style UL tags using CSS.

The X-Philes [goer.org] —

List of XHTML Sites

Calendar Popup Widget —

You can never have too many of these to choose from..

W3C members: Do as we say, not as we do —

“…only 21, or 4.6 percent, of 454 member sites Karppinen could access passed the W3C’s own HTML validator…”

Prepare for the transition from HTML forms to XForms —

Uh oh..

HTML 4.01 Specification

HTML 4.0 Entities —

Entity Declrarations / Decimal and Hex values for important unicode code points.