Categories
Links

#c0ffee is the color

A [beautiful list of valid HTML colors which are also english-language words][link]. There’s a poetry to how some of these match up; “defied / #DEF1ED” for example seems perfect somehow?

[link]: http://c0ffee.surge.sh/ “#c0ffee is the color”

Categories
Links

Semantic UI

[Yet another HTML/CSS/JS framework][link], but built so that the classes are understandable in english. It’ll create some HTML bloat, but it has a certain Applescript-y charm to it.

The site is pretty snazzy, too. Very readable, very smooth.

[link]: http://semantic-ui.com/ “Getting Started | Semantic UI”

Categories
Links

Macaw

[The only visual HTML editor I’ve ever seen that looks legitimately useful, well-executed, and outputs good code.][link]

Let’s see if they can deliver.

[link]: http://macaw.co/ “Macaw | The code-savvy web design tool.”

Categories
Links

Garlic.js

>[Garlic.js allows you to automatically persist your forms’ text field values locally, until the form is submitted. This way, your users don’t lose any precious data if they accidentally close their tab or browser.][link]

Uses localStorage if available, to boot. The author suggests marking up your forms with rel=”persist” and that sounds reasonable enough to me.

[link]: http://guillaumepotier.github.com/Garlic.js/ “Garlic.js”

Categories
Links

CSS PANIC

[A whack-a-mole game written entirely in CSS/HTML][link]. No Javascript. Chrome/Safari only.

[link]: http://jsdo.it/GeckoTang/4rXg “CSS PANIC – jsdo.it – Share JavaScript, HTML5 and CSS”

Categories
Links

HTML is the new HTML5

[Ian Hickson:][link]

>The WHATWG HTML spec can now be considered a “living standard”. It’s more mature than any version of the HTML specification to date, so it made no sense for us to keep referring to it as merely a draft. We will no longer be following the “snapshot” model of spec development, with the occasional “call for comments”, “call for implementations”, and so forth.

Behold, [HTML’s living specification][html]. The w3c is still looking to publish a “snapshot” of HTML5.

[link]: http://blog.whatwg.org/html-is-the-new-html5 “The WHATWG Blog — HTML is the new HTML5”
[html]: http://whatwg.org/html “HTML Specification”

Categories
Posts

A Comparative Analysis Of The Differing Approaches Twitter and Facebook Take To “Share” Buttons And What It Might Say, Philosophically Speaking, About Each As A Company

Visually, the “Share” and “Tweet” buttons are very similar, and are structured identically.

On the code-side, however, they are very much the product of two different companies with, I would argue, different outlooks on the web as a whole and HTML specifically.

## Facebook’s “Share” Button

`Share`

There is no such thing as a `share_url` attribute in any published version of HTML. Facebook just made it up because they felt like it, and it was the easiest way for them to do what they wanted. They’re also mis-using the `type` attribute, here. `type` [should be a mime-type string][type], as specified in the HTML documentation, not whatever random data you decide will be helpful.

[type]: http://reference.sitepoint.com/html/script/type “HTML Type Attribute”

It would be possible to see these as harmless and (possibly) clever hacks, but this is not a startup based in a garage, this is a billion-dollar company with hundreds of employees. Philosophically it speaks to Facebook’s general lack of regard for the internet as a whole: Facebook does what it wants, and you can go fuck yourself if it bugs you. In other words: Who has two thumbs, [a $100 billion valuation][value], and doesn’t give a shit about your web standards pedantry? *This guy.*

[value]: http://www.allfacebook.com/facebooks-100-billion-valuation-doesnt-sound-stupid-anymore-2010-04 “Facebook’s $100 Billion Valuation Doesn’t Sound Stupid Anymore – All Facebook”

## Twitter’s “Tweet” Button

``

Twitter uses the [HTML5 `data` attributes][data], which were created for specifically this purpose, which is embedding useful information in HTML without having to make up your own attributes. As a result, Twitter’s code is not only valid and logical, it’s ahead of the curve. Philosophically this says that Twitter considered the ramifications of this a bit more than Facebook has. This code will be embedded in millions of webpages, many of which will never be updated, so it matters in a big way that it be done *right*. Yes, the HTML5-style `data` attributes are a little bit *too* new for some people to get behind, but today isn’t the only thing that matters. Tomorrow is pretty important, too.

[data]: http://html5doctor.com/html5-custom-data-attributes/ “HTML5 Doctor: HTML5 Custom Data Attributes”

In total, what these buttons say about their companies is pretty simple: Twitter cares about being a good web citizen. Facebook? Not so much.


*Update 28 October 2010*: Changed conclusion text for clarity.

Categories
Links

Quirksmode: Introduction to Range

[A useful overview of Ranges in an HTML Document][link], with examples for (of import to myself) getting the text a user has selected so you can do stuff with it.

Of note: None of the examples here seem to work on iOS WebKit.

[link]: http://www.quirksmode.org/dom/range_intro.html “Introduction to Range”

Categories
Links

CSS3 Gradient Buttons That Degrade Well

[Excellent work from Web Designer Wall.][link] I’ve been using a similar approach on a client site lately, but this one has a few tricks I hadn’t considered.

[link]: http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/ “CSS3 Gradient Buttons”

Categories
Links

Pie Guy, a free web game for your iPhone by Neven Mrgan

[Pure HTML, CSS and Javascript][link], no App Store required. [Play it][play].

[play]: http://mrgan.com/pieguy “Pie Guy”
[link]: http://mrgan.tumblr.com/post/257187093/pie-guy “Pie Guy – a free web game for your iPhone – Neven Mrgan’s tumbl”

Categories
Links

Text Rotation with CSS

[Can I get a witness][link]? Not only does it work, it works NOW.

[link]: http://snook.ca/archives/html_and_css/css-text-rotation “Text Rotation with CSS”

Categories
Links

Web Fonts Now, for real

[Zeldman on a proposed webfont permissions table][link]. This seems sort of like attaching a file to a movie that says DO NOT STEAL and expecting it to work.

[link]: http://www.zeldman.com/2009/07/16/web-fonts-now-for-real/ “Web Fonts Now, for real – Jeffrey Zeldman Presents The Daily Report”

Categories
Links

Introducing Typekit

[A platform for css3’s @font-face][link]. The real test of this will be how many hoops you have to jump through to embed a font, and how it handles failure:

>We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

The upside is that having a central place to access these fonts will be great for caching.

[link]: http://blog.typekit.com/2009/05/27/introducing-typekit/ “Introducing Typekit « The Typekit Blog”

Categories
Links

Mozilla Labs Jetpack

[Extending Firefox with open web technologies like jQuery, HTML and CSS][link]. I am thinking of it as the next generation of Greasemonkey.

[link]: https://jetpack.mozillalabs.com/ “Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web”

Categories
Links

Tal Leming on Embedded Web Fonts

A rare take on embedded web fonts from someone who actually makes fonts and sells them for a living. He suggests a DRM system using a “root table” that says what fonts can be used on what domains, but then says this:

>There is nothing that can be done about this. All we can do is present a person with a fork in the road. The person can license the font to give the designer the respect he/she deserves for creating something that the person likes and wants to use. Or, they can ignore the Golden Rule and hack the font.

If that’s the case, and he knows it’s the case, then why not forget the DRM entirely? Why not trust people to do the right thing from the start, and call them out on it when they don’t?

[link]: http://talleming.com/2009/04/21/web-fonts/ “Tal Leming » Web Fonts”

Categories
Links

Dave Shea on Why He’s Backing HTML5

[The points he makes are good ones, and I agree with most of them][link]. The comments are pretty lively on this one, but seem civilized.

[link]: http://mezzoblue.com/archives/2009/04/20/switched/ “mezzoblue § Switched”