Extra FutureA [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”
[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”
[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.”
>[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”
[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”
[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”
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
`Tweet`
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.
[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”
[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”
[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”
[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”
[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”
[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”
[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”
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”
[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”