<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Lea Verou &#187; Thoughts</title>
	<atom:link href="http://lea.verou.me/category/thoughts/feed/" rel="self" type="application/rss+xml" />
	<link>http://lea.verou.me</link>
	<description>Life at the bleeding edge (of web standards)</description>
	<lastBuildDate>Thu, 02 Feb 2012 14:08:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>On web apps and their keyboard shortcuts</title>
		<link>http://lea.verou.me/2011/12/on-web-apps-and-their-keyboard-shortcuts/</link>
		<comments>http://lea.verou.me/2011/12/on-web-apps-and-their-keyboard-shortcuts/#comments</comments>
		<pubDate>Sat, 17 Dec 2011 02:17:42 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://lea.verou.me/?p=1493</guid>
		<description><![CDATA[Yesterday, I released dabblet. One of its aspects that I took extra care of, is it&#8217;s keyboard navigation. I used many of the commonly established application shortcuts to navigate and perform actions in it. Some of these naturally collided with the native browser shortcuts and I got a few bug reports about that. Actually, overriding [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2011%252F12%252Fon-web-apps-and-their-keyboard-shortcuts%252F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2FtzvwaL%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22On%20web%20apps%20and%20their%20keyboard%20shortcuts%22%20%7D);"></div>
<p>Yesterday, <a href="http://lea.verou.me/2011/12/introducing-dabblet-an-interactive-css-playground/" target="_blank">I released dabblet.</a> One of its aspects that I took extra care of, is it&#8217;s keyboard navigation. I used many of the commonly established application shortcuts to navigate and perform actions in it. Some of these naturally collided with the native browser shortcuts and I got <a href="https://github.com/LeaVerou/dabblet/issues/54" target="_blank">a few bug reports</a> about that.<br />
Actually, overriding the browser shortcuts was by design, and I&#8217;ll explain my point of view below. </p>
<p>Native apps use these shortcuts all the time. For example, I press Cmd+1,2,3 etc in Espresso to navigate through files in my project. People press F1 for help. And so on. These shortcuts are so ingrained in our (power users) minds and so useful that we thoroughly miss them when they&#8217;re not there. Every time I press Cmd+1 in an OSX app and I don&#8217;t go to the first tab, I&#8217;m distraught. However, in web apps, these shortcuts are taken by the browser. We either have to use different shortcuts or accept overriding the browser&#8217;s defaults. </p>
<p>Using different shortcuts seems to be considered best practice, but how useful are these shortcuts anyway? They have to be individually learned for every web app, and that&#8217;s hardly about memorizing the &#8220;keyboard shortcuts&#8221; list. Our muscles learn much more slowly than our minds. To be able to use these shortcuts as mindlessly as we use the regular application shortcuts, we need to spend a long time using the web app and those shortcuts. If we ever do get used to them that much, we&#8217;ll have trouble with the other shortcuts that most apps use, as our muscles will try to use the new ones.</p>
<p>Using the de facto standard keyboard shortcuts carries no such issues. They take advantage of muscle memory from day one. If we advocate that web is the new native, it means our web apps should be entitled to everything native apps are. If native editors can use Cmd+1 to go to the first tab and F1 for help, so should a web editor. When you&#8217;re running a web app, the browser environment is merely a host, like your OS. The focus is the web app. When you&#8217;re working in a web app and you press a keyboard shortcut, chances are you&#8217;re looking to interact with that app, not with the browser Chrome. </p>
<p>For example, I&#8217;m currently writing in WordPress&#8217; editor. When I press Cmd+S, I expect my draft to be saved, not the browser to attempt to save the current HTML page. Would it make sense if they wanted to be polite and chose a different shortcut, like Alt+S? I would have to learn the Save shortcut all over again and I&#8217;d forever confuse the two.</p>
<p>Of course, it depends on how you define a web app. If we&#8217;re talking about a magazine website for example, you&#8217;re using the browser as a kind of reader. The app you&#8217;re using is still the browser, and overriding its keyboard shortcuts is bad. It&#8217;s a sometimes fine distinction, and many disagreements about this issue are  basically disagreements about what constitutes a web app and how much of an application web apps are.</p>
<p>So, what are your thoughts? Play it safe and be polite to the host or take advantage of muscle memory?</p>
<p><strong>Edit:</strong> <a href="http://snook.ca" target="_blank">Johnathan Snook</a> posted these thoughts in the comments, and I thought his suggested approach is pure genius and every web UX person should read it:</p>
<blockquote cite="http://lea.verou.me/2011/12/on-web-apps-and-their-keyboard-shortcuts/#comment-388498093"><p>On Yahoo! Mail, we have this same problem. It&#8217;s an application with many of the same affordances of a desktop application. As a result, we want to have the same usability of a desktop application—including with keyboard shortcuts. In some cases, like Cmd-P for printing, we&#8217;ll override the browser default because the browser will not have the correct output. </p>
<p>For something like tab selection/editing, we don&#8217;t override the defaults and instead, create alternate shortcuts for doing so.</p>
<p>One thing I suggest you could try is to behave somewhat like overflow areas in a web page. When you scroll with a scroll mouse or trackpad in the area, the browser will scroll that area until it reaches it&#8217;s scroll limit and then will switch to scrolling the entire page. It would be interesting to experiment with this same approach with other in-page mechanisms. For example, with tabs, I often use Cmd-Shift-[ and Cmd-Shift-] to change tabs (versus Cmd-1/2/3, etc). You could have it do so within the page until it hits its limit (first tab/last tab) and then after that, let the event fall back to the browser. For Cmd-1, have it select the first tab. If the user is already on the first tab, have it fall back to the browser.</p></blockquote>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2011/12/on-web-apps-and-their-keyboard-shortcuts/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>Vendor prefixes have failed, what’s next?</title>
		<link>http://lea.verou.me/2011/11/vendor-prefixes-have-failed-whats-next/</link>
		<comments>http://lea.verou.me/2011/11/vendor-prefixes-have-failed-whats-next/#comments</comments>
		<pubDate>Fri, 18 Nov 2011 23:37:57 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[standards]]></category>
		<category><![CDATA[Vendor prefixes]]></category>
		<category><![CDATA[W3C]]></category>

		<guid isPermaLink="false">http://lea.verou.me/?p=1458</guid>
		<description><![CDATA[Edit: This was originally written to be posted in www-style, the mailing list for CSS development. I thought it might be a good idea to post it here as other people might be interested too. It wasn’t. Most people commenting didn’t really get the point of the article and thought I&#8217;m suggesting we should simply [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2011%252F11%252Fvendor-prefixes-have-failed-whats-next%252F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2FrYkmw0%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Vendor%20prefixes%20have%20failed%2C%20what%E2%80%99s%20next%3F%22%20%7D);"></div>
<p><em><strong>Edit:</strong> This was originally written to be posted in <a href="http://lists.w3.org/Archives/Public/www-style/" target="_blank">www-style</a>, the mailing list for CSS development. I thought it might be a good idea to post it here as other people might be interested too. It wasn’t. Most people commenting didn’t really get the point of the article and thought I&#8217;m suggesting we should simply drop prefixes. Others think that it&#8217;s an acceptable solution for the CSS WG if CSS depends on external libraries like my own <a href="http://leaverou.github.com/prefixfree" target="_blank">-prefix-free</a> or LESS and SASS. I guess it was an failure of my behalf (&#8220;Know your audience&#8221;) and thus I&#8217;m disabling comments.</em></p>
<p>Discussion about prefixes was recently stirred up again by <a href="http://hsivonen.iki.fi/vendor-prefixes/" target="_blank">an article by Henri Sivonen</a>, so <a href="http://lists.w3.org/Archives/Public/www-style/2011Nov/0271.html" target="_blank">the CSS WG started debating for the 100th time</a> about when features should become unprefixed.</p>
<p>I think we need to think out of the box and come up with new strategies to solve the issues that vendor prefixes were going to fix. <strong>Vendor prefixes have failed and we can’t solve their issues by just unprefixing properties more early.</strong></p>
<h2>Issues</h2>
<p>The above might seem a bold statement, so let me try to support it by recapping the serious issues we run into with vendor prefixes:</p>
<h3>1. Unnecessary bloat</h3>
<p>Authors need to use prefixes even when the implementations are already interoperable. As a result, they end up pointlessly duplicating the declarations, making maintenance hard and/or introducing overhead from CSS pre- and post-processors to take care of this duplication. We need to find a way to reduce this bloat to <strong>only the cases where different declarations are actually needed</strong>.</p>
<h3>2. Spec changes still break existing content</h3>
<p>The biggest advantage of the current situation was supposed to be that spec changes would not break existing content, but prefixes have failed to even do this. The thing is, <strong>most authors will use something if it’s available</strong>, no questions asked.  I doubt anyone that has done any real web development would disagree with that. And in most cases, they will prefer a slightly different application of a feature than none at all, so they use prefixed properties along with unprefixed. Then, when the WG makes a backwards-incompatible change, existing content breaks.</p>
<p>I don&#8217;t think this can really be addressed in any way except disabling the feature by default in public builds. Any kind of prefix or notation is pointless to stop this, we&#8217;ll always run into the same issue. If we disable the feature by default, almost nobody will use it since they can&#8217;t tell visitors to change their browser settings. Do we really want that? Yes, the WG will be able to make all the changes they want, but then <strong>then who will give feedback for these changes?</strong> Certainly not authors, as they will effectively have zero experience working with the feature as most of them don’t have the time to play around with features they can’t use right now.</p>
<p>I think we should accept that changes will break <em>*some*</em> existing content, and try to standardize faster, instead of having tons of features in WD limbo. However, I still think that there should be some kind of notation to denote that a feature is experimental so that at least authors know what they’re getting themselves into by using it and for browsers to be able to experiment a bit more openly. I don&#8217;t think that vendor prefixes are the right notation for this though.</p>
<h3>3. Web development has become a popularity contest</h3>
<p>I&#8217;ll explain this with an example: CSS animations were first supported by WebKit. People only used the <code>-webkit-</code> prefix with them and they were fine with it. Then Firefox also implemented them, and most authors started adding <code>-moz-</code> to their use cases. Usually only to the new ones, their old ones are still WebKit only. After a while, Microsoft announced CSS animations in IE10. Some authors started adding <code>-ms-</code> prefixes to their new websites, some others didn’t because IE10 isn&#8217;t out yet. When IE10 is out, they still won&#8217;t add it because their current use cases will be for the most part not maintained any more. Some authors don&#8217;t even add <code>-ms-</code> because they dislike IE. Opera will soon implement CSS animations. Who will really go back and add <code>-o-</code> versions? Most people will not care, because they think Opera has too little market share to warrant the extra bloat.</p>
<p>So browsers appear to support less features, only because authors have to take an extra step to explicitly support them. <strong>Browsers do not display pages with their full capabilities because authors were lazy, ignorant, or forgetful.</strong> This is unfair to both browser vendors and web users. We need to find a way to (optionally?) decouple implementation and browser vendor in the experimental feature notation.</p>
<h2>Ideas</h2>
<p>There is a real problem that vendor prefixes attempted to solve, but vendor prefixes didn&#8217;t prove out to be a good solution. I think we should start thinking outside the box and propose new ideas instead of sticking to vendor prefixes and debating their duration. I’ll list here a few of my ideas and I’m hoping others will follow suit.</p>
<h3>1. Generic prefix (-x- or something else) and/or new @rule</h3>
<p>A generic prefix <a href="http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref_1.html" target="_blank">has been proposed before</a>, and usually the argument against it is that different vendors may have incompatible implementations. This could be addressed at a more general level, instead of having the prefix on every feature: An @-rule for addressing specific vendors. for example:</p>
<pre>@vendor (moz,webkit,o) {
    .foo { -x-property: value; }
}

@vendor (ms) {
    .foo { -x-property: other-value; }
}</pre>
<p>A potential downside is selector duplication, but remember: <strong>The @vendor rule would ONLY be used when implementations are actually incompatible</strong>.</p>
<p>Of course, there’s the potential for misuse, as authors could end up writing separate CSS for separate browsers using this new rule. However, I think we&#8217;re in a stage where most authors have realized that this is a bad idea, and if they want to do it, they can do it now anyway (for example, by using @-moz-document to target Moz and so on)</p>
<h3>2. Supporting both prefixed and unprefixed for WD features</h3>
<p>This delegates the decision to the author, instead of the WG and implementors. The author could choose to play it safe and use vendor prefixes or risk it in order to reduce bloat on a per-feature basis.</p>
<p>I guess a problem with this approach is that extra properties mean extra memory, but it’s something that many browsers already do when they start supporting a property unprefixed and don’t drop the prefixed version like they should.</p>
<p><strong>Note:</strong> While this post was still in draft, I was informed that Alex Mogilevsky has suggested something very similar. <a href="http://lists.w3.org/Archives/Public/www-style/2011Nov/0346.html" target="_blank">Read his proposal</a>.</p>
<h3>3. Prefixes for versioning, not vendors</h3>
<p>When a browser implements a property for the first time, they will use the prefix <code>-a-</code>. Then, when another browser implements that feature, they look at the former browser&#8217;s implementation, and if theirs is compatible, they use the same prefix. If it&#8217;s incompatible, they increment it by one, using <code>-b-</code> and so on.</p>
<p>A potential problem with this is collisions: Vendors using the same prefix not because their implementations are compatible but because they developed them almost simultaneously and didn&#8217;t know about each other&#8217;s implementation. Also, it causes trouble for the smaller vendors that might want to implement a feature first.</p>
<h3>We need more ideas</h3>
<p>Even if the above are not good ideas, I&#8217;m hoping that they&#8217;ll inspire others to come up with something better. I think we need more ideas about this, rather than more debates about fine-tuning the details of one bad solution.</p>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2011/11/vendor-prefixes-have-failed-whats-next/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>On URL readability</title>
		<link>http://lea.verou.me/2011/08/on-url-readability/</link>
		<comments>http://lea.verou.me/2011/08/on-url-readability/#comments</comments>
		<pubDate>Tue, 30 Aug 2011 15:07:59 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[URLs]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=1251</guid>
		<description><![CDATA[Yesterday, I was watching some season 6 episodes of Futurama (btw, this is their best season ever!) and I noticed the URLs in the website I was in (let&#8217;s call it foo.com). They were like: http://foo.com/futurama/season/6/episode/9 I thought to myself &#8220;hey, this looks very clean and readable&#8221;. And then I noticed that it only has [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2011%252F08%252Fon-url-readability%252F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2FoFGrAU%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22On%20URL%20readability%22%20%7D);"></div>
<p>Yesterday, I was watching some season 6 episodes of Futurama (btw, this is their best season ever!) and I noticed the URLs in the website I was in (let&#8217;s call it foo.com). They were like:</p>
<p>http://foo.com/futurama/season/6/episode/9</p>
<p>I thought to myself &#8220;hey, this looks very clean and readable&#8221;. And then I noticed that it only has 1 less character than its non-rewritten counterpart:</p>
<p>http://foo.com/?futurama&#038;season=6&#038;episode=9</p>
<p>However, I&#8217;m pretty sure you agree that the second one is much harder to read. I <a href="http://twitter.com/#!/LeaVerou/status/108356094467915776" target="_blank">asked for opinions on twitter</a>, and got many interesting replies. Apart from the ones that completely missed the point, these were the core explanations:</p>
<ul>
<li>= and especially &amp; are more complex and look more like letters, so our brain has trouble tuning them out (<a href="http://twitter.com/#!/feather/status/108358461888270337" target="_blank">@feather</a> <a href="http://twitter.com/#!/robert_tilt/status/108410782777229312" target="_blank">@robert_tilt</a> <a href="http://twitter.com/#!/rexxars/status/108427976768622592" target="_blank">@rexxars</a> <a href="http://twitter.com/#!/mrtazz/status/108431965241360384" target="_blank">@mrtazz</a> <a href="http://twitter.com/#!/manchurian/status/108545434011705344" target="_blank">@manchurian</a>)</li>
<li>Slashes have more whitespace around them, so they are less obtrusive (<a href="http://twitter.com/#!/feather/status/108357826916794368" target="_blank">@feather</a> <a href="http://twitter.com/#!/stevelove/status/108393480488878080" target="_blank">@stevelove</a> <a href="http://twitter.com/#!/kenny1987/status/108415712292388864" target="_blank">@kenny1987</a> <a href="http://twitter.com/#!/janl/status/108432181549989888" target="_blank">@janl</a>)</li>
<li>They&#8217;re all visual noise, but we always have slashes in a URL, so using the slash to separate keys and values as well only introduces 1 separator instead of 3 (<a href="http://twitter.com/#!/Bugster/status/108356318741528577" target="_blank">@bugster</a> <a href="http://twitter.com/#!/craigpatik/status/108360564924874752" target="_blank">@craigpatik</a> <a href="http://twitter.com/#!/nyaray/status/108409202522861568" target="_blank">@nyaray</a>)</li>
<li>Slashes imply hierarchy, which our brains process easier than key-value pairs. Key-value pairs could be in any order, paths have a specified order. (<a href="http://twitter.com/#!/sggottlieb/status/108356697109700609" target="_blank">@sggottlieb</a> <a href="http://twitter.com/#!/edwelker/status/108357422292283393" target="_blank">@edwelker</a> <a href="http://twitter.com/#!/stephenhay/status/108410752469180417" target="_blank">@stevenhay</a> <a href="http://twitter.com/#!/jwajsberg/status/108420275258916864" target="_blank">@jwasjsberg</a> <a href="http://twitter.com/#!/stazybohorn/status/108518754878623744" target="_blank">@stazybohorn</a>)</li>
<li>Ampersands and equal signs are harder to type than slashes. They&#8217;re both in the top row and ampersands even need the Shift key as well. (<a href="http://twitter.com/#!/feather/status/108358640787927040" target="_blank">@feather</a>)</li>
<li>Ampersands and equal signs have semantic meaning in our minds, whereas slashes not as much (<a href="http://twitter.com/#!/snadon/status/108394403164467200" target="_blank">@snadon</a>)</li>
</ul>
<div>Regarding hierarchy and RESTful design, the first example isn&#8217;t exactly correct. If it was hierarchical, it should be foo.com/futurama/season<strong>s</strong>/6/episode<strong>s</strong>/9. As it currently stands, it&#8217;s key-value pairs, masquerading as hierarchical. However, it still reads better.</div>
<div>So I&#8217;m leaning towards the first three explanations, although I think all of them have a grain of truth. Which makes me wonder: Did we choose the wrong characters for our protocol? Could we have saved ourselves the hassle and performance overhead of URL rewriting if we were a bit more careful in choosing the separators back then?</div>
<div>Also, some food for thought: Where do you think the following URLs stand in the legibility scale?</div>
<div>http://foo.com/futurama/season=6/episode=9</div>
<div>http://foo.com/futurama/season:6/episode:9</div>
<div>http : //foo.com/futurama-season-6-episode-9  (suggested by Ben Alman)</div>
<div>Do you think there are there any explanations that I missed?</div>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2011/08/on-url-readability/feed/</wfw:commentRss>
		<slash:comments>36</slash:comments>
		</item>
		<item>
		<title>jQuery Pure: Call for contributors</title>
		<link>http://lea.verou.me/2011/06/jquery-pure/</link>
		<comments>http://lea.verou.me/2011/06/jquery-pure/#comments</comments>
		<pubDate>Thu, 09 Jun 2011 18:44:10 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=1095</guid>
		<description><![CDATA[This post is about an idea I&#8217;ve had for ages, but never found the time to actually start working on it. Maybe because it looks like a quite big project if done properly, so it&#8217;s scary to do it on my own without any help. jQuery has a huge amount of code that deals with [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2011%252F06%252Fjquery-pure%252F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2FihFiih%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22jQuery%20Pure%3A%20Call%20for%20contributors%22%20%7D);"></div>
<p>This post is about an idea I&#8217;ve had for ages, but never found the time to actually start working on it. Maybe because it looks like a quite big project if done properly, so it&#8217;s scary to do it on my own without any help.</p>
<p>jQuery has a huge amount of code that deals with browser bugs and lack of implementations. For example, it needs a full-fledged selector engine, to cater for old browsers that don&#8217;t support the <a href="http://www.w3.org/TR/selectors-api2/" target="_blank">Selectors API</a>. Or, it needs code that essentially does what the classList API is supposed to do, because old browsers don&#8217;t support it. Same goes for nextElementSibling (the .next() method) and tons of other stuff. However, not everyone needs all this. Some projects don&#8217;t need older browsers support, either due to the developer mindset or due to their tech-savvy target group. Also, some people only write demos/proof-of-concepts for modern browsers only and don&#8217;t need all this code. Same goes for intranet apps that are only designed for a particular modern browser. Last but not least, this code bloat makes the jQuery library hard to study for educational purposes.</p>
<p>However, even in a browser that supports all the modern stuff, the jQuery API is still more concise than the native methods. Besides, there are tons of plugins that depend on it, so if you decide to implement everything in native JavaScript, you can&#8217;t use them.</p>
<p>What I want to build is a fork of jQuery that is refactored so that all the extra code for working around browser bugs removed and all the code replaced by native functionality, where possible. All the ugliness removed, leaving a small, concise abstraction that only uses the current standards. Something like <strong>jQuery: The good parts</strong>. It could also serve as a benchmark for browser standards support.</p>
<p>The API will work in the exact same way and pass all unit tests (in modern browsers, in cases where they are not buggy) so that almost every plugin built on top of it will continue to function just as well. However, the jQuery library itself will be much smaller, with more elegant and easy to understand code.</p>
<p><strong>So, who&#8217;s with me? </strong>Do you find such an idea interesting and useful? Would you want to contribute? If so, leave a comment below or send me an email (it&#8217;s in the <a href="http://lea.verou.me/about">about page</a>). Also, please let me know if you can think of any other uses, or if there&#8217;s already something like that that I&#8217;ve missed.</p>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2011/06/jquery-pure/feed/</wfw:commentRss>
		<slash:comments>50</slash:comments>
		</item>
		<item>
		<title>On attr() and calc()</title>
		<link>http://lea.verou.me/2010/09/on-attr-and-calc/</link>
		<comments>http://lea.verou.me/2010/09/on-attr-and-calc/#comments</comments>
		<pubDate>Sat, 11 Sep 2010 17:38:40 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[attr()]]></category>
		<category><![CDATA[calc()]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[CSS3 values]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=653</guid>
		<description><![CDATA[I recently posted my first suggestion to www-style, the official W3 mailing list for CSS development. It was about allowing attr() values inside calc(). In this post I&#8217;ll describe in greater detail why I believe this is necessary, since not everyone follows www-style. If anyone has something to add in the discussion, you may post [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2010%252F09%252Fon-attr-and-calc%252F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2FbyefyB%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22On%20attr%28%29%20and%20calc%28%29%22%20%7D);"></div>
<p>I recently posted my first suggestion to <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>, the official W3 mailing list for CSS development. It was about <a href="http://lists.w3.org/Archives/Public/www-style/2010Sep/0019.html">allowing attr() values inside calc()</a>. In this post I&#8217;ll describe in greater detail why I believe this is necessary, since not everyone follows www-style. If anyone has something to add in the discussion, you may post in the list, it&#8217;s public.<span id="more-653"></span></p>
<h3>attr()</h3>
<p>As you can easily <a href="http://www.w3.org/TR/css3-values/#attribute">find out in the specification</a>, the W3 is planning for attr() to play a much bigger role in tomorrow&#8217;s CSS than it played in CSS 2.1, <a href="http://www.w3.org/TR/CSS2/generate.html#propdef-content" target="_blank">where it was originally defined</a>, which opens up exciting possibilities. In a nutshell, we&#8217;re going to be able to use <code>attr()</code> in any property, for any type of value, let it be &lt;length&gt;, &lt;number&gt;, &lt;color&gt; or anything else. If the type is not obvious, we&#8217;re able to define it, via the second parameter and include a fallback value in the 3rd one. We might even be able to do things like <code>float: attr(X</code>); (keywords are still under consideration).</p>
<h3>calc()</h3>
<p>On the other hand, as you&#8217;re probably already aware of, since <a href="http://www.w3.org/TR/css3-values/#calc" target="_blank">calc()</a> is one of the hyped CSS3 features, we&#8217;re finally going to be able to do calculations with different types of units, for example <code>calc(100% - 30px)</code>, which is something web designers requested for years.</p>
<h3>calc(attr())</h3>
<p>You can easily see from the grammar presented in the specification for calc() that it does not allow attr() values to be used as operands in the calculations. To me, this is an obvious oversight. Since attr() values can be used anywhere, including where lengths and numbers are allowed, not being able to use them in calc() is absurd. As <a href="http://lists.w3.org/Archives/Public/www-style/2010Sep/0072.html" target="_blank">David Storey pointed out</a>, this could be enormously useful when used in conjunction with the new form control attributes (min, max, step and the like) or HTML5 custom data attributes (data-x).</p>
<p>Philosophically, it makes perfect sense that attr() should be allowed anywhere a &lt;length&gt; or &lt;number&gt; or &lt;angle&gt; or &#8230; is. <strong>We can&#8217;t expect attributes to only hold semantic and not presentational data, but expect these data to be ready to be utilized for presentation purposes, without any calculations whatsoever</strong>.</p>
<p>The first use case I can think of is the one that inspired me to suggest this. A while ago, I was researching CSS-based bar charts and progress bars. It turned out that there is no practical and purely semantic solution for specifying the bar widths. Either you have <a href="http://www.1080degrees.net/archive/journal/simple_css_bar_graph/" target="_blank">to</a> <a href="http://www.alistapart.com/articles/accessibledatavisualization" target="_blank">include</a> <a href="http://icant.co.uk/csscharts/" target="_blank">inline</a> <a href="http://www.standards-schmandards.com/exhibits/barchart/" target="_blank">styles</a> or you bloat your CSS <a href="http://meyerweb.com/eric/css/edge/bargraph/demo.html" target="_blank">with</a> <a href="http://www.usrecordings.com/test-lab/bullet-graph.htm" target="_blank">countless</a> <a href="http://cssglobe.com/post/1272/pure-css-data-chart" target="_blank">classes</a> <a href="http://www.cssplay.co.uk/menu/barchart.html" target="_blank">or</a> <a href="http://csswizardry.com/2010/02/css-bar-charts-styling-data-with-css3-and-progressive-enhancement/">ids</a>, one for each width or —even worse— bar. In cases where you just want to use the displayed percentage of the bar as its width as well, attr() can actually help. However, as you can see, this is not always the case. Most of the times the bar values are not percentages or you want to also perform calculations on the percentage, for example include padding (because usually you display the number as well) or cut it in half to prevent the bar chart from appearing very big, etc, in which calc() combined with attr() could be a lifesaver.</p>
<p>One could argue that bar charts and progress bars are not legitimate CSS use cases but hacks that work around the lack of cross-browser SVG support, and it&#8217;s very possible that they are right (although the addition of elements like <a href="http://www.w3schools.com/html5/tag_progress.asp" target="_blank">&lt;progress&gt;</a> in HTML5 is by itself an argument for the opposite). However, the use cases are not limited to that. Αny kind of stylistic treatment that is supposed to convey some kind of fraction or number (progress, temperature, distance etc) will benefit from keeping the actual data in a data-x attribute and utilize them via attr() and calc().</p>
<p>Admittedly, coming up with more generic use cases is not very easy, since they greatly depend on the particular application. However, the same difficulty arises when trying to come up with use cases for the attr() function by itself when used for the numerical types (&lt;number&gt;, &lt;length&gt; etc), in properties other than content. Perhaps this is the reason that not even the specification contains any practical examples for it either. I guess almost any real-life use case for attr(*, number|integer|length|angle|frequency|em|px|&#8230;, *) is also a use case for this.</p>
<p>So far I&#8217;m optimistic about it, since almost all participants in the discussion were positive. However, calc() has already started being implemented (by Mozilla), so as time goes by, it will be increasingly harder to make changes to its grammar.</p>
<p>What do you think? How would you use it if it&#8217;s implemented?</p>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2010/09/on-attr-and-calc/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Automatic login via notification emails?</title>
		<link>http://lea.verou.me/2010/08/automatic-login-via-notification-emails/</link>
		<comments>http://lea.verou.me/2010/08/automatic-login-via-notification-emails/#comments</comments>
		<pubDate>Sat, 14 Aug 2010 04:06:58 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[security]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[usability vs security]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=641</guid>
		<description><![CDATA[A couple hours ago, I received a notification email from Goodreads and unlike usually, I decided to actually visit the site (by the way, I believe that Goodreads, i.e. a last.fm for books, is an awesome idea but poorly implemented).When I did, I was quite annoyed to find out that I wasn&#8217;t already logged in, so [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2010%252F08%252Fautomatic-login-via-notification-emails%252F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2FdpqvmG%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Automatic%20login%20via%20notification%20emails%3F%22%20%7D);"></div>
<p><img class="alignleft size-full wp-image-642" title="Email notification example (via Twitter)" src="http://lea.verou.me/wp-content/uploads/2010/08/twitter-notification.png" alt="Screenshot of a Twitter email notification" width="300" height="197" />A couple hours ago, I received a notification email from <a href="http://www.goodreads.com/" target="_blank">Goodreads</a> and unlike usually, I decided to actually visit the site (by the way, I believe that Goodreads, i.e. a last.fm for books, is an awesome idea but poorly implemented).When I did, I was quite annoyed to find out that I wasn&#8217;t already logged in, so I had to remember which one of my many passwords I had used for it and try them one by one. This is not a Goodreads fail, but a fairly common nuisance, since most (if not all) social websites behave that way.</p>
<p><em>&#8220;What if there was some magic involved?&#8221;</em> Bill Scott &amp; Theresa Neil advise interaction designers to ask themselves in <a href="http://designingwebinterfaces.com/" target="_blank">a book I&#8217;m currently reading</a> (highly recommended by the way). Well, I guess, if there <em>was </em>some magic involved, <strong>the site would &#8220;understand&#8221; that my click was initiated from an email and would automatically log me in and let me view whatever I was trying to</strong>.<span id="more-641"></span></p>
<p>What&#8217;s the point of asking for a password if the user can prove they have access to the associated email account? Such access is usually all that&#8217;s needed for someone to break into an account, theirs or not (via the forgotten password feature). So, it doesn&#8217;t help security much, just makes it slightly more time-consuming for potential impostors, while turning legitimate users with a weak memory (like yours truly) away from the site.</p>
<p>I&#8217;m not sure whether it&#8217;s a good or a stupid idea, I&#8217;m not really suggesting it, just expressing a thought. <img src='http://lea.verou.me/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
I have some concerns myself too:</p>
<ol>
<li>It&#8217;s definitely <strong>harder to implement</strong>.</li>
<li>All links sent in notification emails must contain some special token, like reset password links do (I&#8217;ve never seen it implemented otherwise). The tokens in reset password links expire after a while, so probably these should too, for security reasons. And what happens after that? A regular login is required? Doesn&#8217;t this render the whole idea a bit pointless, since notification emails are frequently read 1+ days after they&#8217;re sent?</li>
<li>Usually a frequent user receives a bunch of email notifications per day. <strong>Isn&#8217;t it a bit too risky to have dozens of such powerful emails floating around in your inbox?</strong> On the other hand, it doesn&#8217;t seem more dangerous than using the &#8220;remember me&#8221; feature while logging in: Anyone that manages to get ahold of your laptop for a minute is able to use your account in most SN sites, one way or another. <strong>However, the &#8220;remember me&#8221; feature is a classic case where usability triumphed security</strong>, at least in cases where the computer isn&#8217;t shared.</li>
<li>Thinking of the &#8220;remember me&#8221; feature gives me another idea: It could be <strong>optional and active by default</strong>. Perhaps with a link to easily deactivate the feature in every such email. On the other hand, more options = more confusion.</li>
<li>Also, to avoid the issues stated in #3, this feature could be activated <strong>only if the user in question was inactive</strong> for a while. <strong>Frequent users don&#8217;t need it</strong> that much and even if they did, they don&#8217;t run away so easily, so it&#8217;s not as crucial.</li>
</ol>
<p><strong>What do you think? Mostly useful or mostly evil? </strong></p>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2010/08/automatic-login-via-notification-emails/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>&#8220;Wow, Mona Lisa with pure CSS!&#8221;</title>
		<link>http://lea.verou.me/2010/05/wow-mona-lisa-with-pure-css/</link>
		<comments>http://lea.verou.me/2010/05/wow-mona-lisa-with-pure-css/#comments</comments>
		<pubDate>Tue, 25 May 2010 07:05:45 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Rants]]></category>
		<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[SVG]]></category>
		<category><![CDATA[theoretical]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=563</guid>
		<description><![CDATA[There has been a recent flood of CSS experiments that utilize CSS3 features to convert some meaningless markup to spectacular pictures. It all started when David Desandro used CSS3 to draw the Opera logo. This seemed to inspire lots of other folks who created similar demos: Pure CSS icons Create Social Media Icons in pure [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2010%252F05%252Fwow-mona-lisa-with-pure-css%252F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22%5C%22Wow%2C%20Mona%20Lisa%20with%20pure%20CSS%21%5C%22%22%20%7D);"></div>
<p>There has been a recent flood of CSS experiments that utilize CSS3 features to convert some meaningless markup to spectacular pictures. It all started when <a href="http://desandro.com/articles/opera-logo-css/" target="_blank">David Desandro used CSS3 to draw the Opera logo</a>. This seemed to inspire lots of other folks who created similar demos:</p>
<ul>
<li><a href="http://rathersplendid.net/home/pure-css-icons" target="_blank">Pure CSS icons</a></li>
<li><a href="http://blog.insicdesigns.com/2010/03/create-social-media-icons-in-pure-css/" target="_blank">Create Social Media Icons in pure CSS</a></li>
<li><a href="http://www.romancortes.com/blog/css3-flower/">CSS flower</a></li>
<li><a href="http://desandro.com/resources/curtis-css-typeface/" target="_blank">Curtis CSS typeface</a></li>
<li><a href="http://gabri.me/htmlcss/2010/css3-gradients-coffee-cup/" target="_blank">CSS3 Gradients coffee cup</a></li>
</ul>
<p>I can certainly share their enthusiasm and I am also amazed by their results. Besides that, I think that pushing CSS3 to the edge like that, helps us understand the spec better, which leads us to find and file browser bugs or write comments regarding the spec itself. Filing bugs is crucial at this stage, with all browser vendors gradually adding experimental &#8211;and frequently buggy&#8211; CSS3 support to their products. Also, don&#8217;t get me wrong: I can easily see the benefits of reducing the number of images in a web application interface (far quicker/easier modifications, less HTTP requests and most of the time, less bandwidth).</p>
<p>However, I&#8217;m afraid we&#8217;re losing sight of the big picture. These aren&#8217;t demos that are or will ever be legitimate CSS use cases. Even after universal CSS3 browser support is achieved, they would (and should) still be considered &#8220;hacks&#8221;. Almost all the arguments pro their usage also apply to more suitable ways of including images in web applications:</p>
<ul>
<li><strong>Fewer HTTP requests</strong>: Same with any kind of embedded image (data URIs, inline SVG and so on)</li>
<li><strong>Scalable</strong>: Same with SVG and symbols embedded in custom fonts</li>
<li><strong>Easier to modify:</strong> Same with SVG</li>
<li><strong>Less bandwidth (in some cases):</strong> Same with SVG (and it can be cached too, when not inline)</li>
</ul>
<div>And apart from these, these illustrations require non-semantic crap to be included in the markup which, besides issues of theoretical purity, makes it harder for other people to use them.</div>
<div>As for the <strong>graceful degradation</strong> argument, yes, this does only apply to CSS &#8220;images&#8221;. But in this case, is it really an advantage? I seriously doubt it. People won&#8217;t notice rounded corners if they&#8217;re missing from an interface, but they&#8217;re definitely going to notice a blocky Opera logo. And they&#8217;re not used in thinking that their browser has something to do with how an image renders, so they&#8217;ll just blame the website.</div>
<p>CSS is supposed to enhance the presentation of a document or interface, not to be (ab)used for the creation of illustrations from scratch. It&#8217;s supposed to separate presentation from structure, not generate stuff. There are other technologies that are far more suitable for this (*cough*SVG*cough*). I think we should use our energy and creativity to make CSS3 demos that people will actually use in the future when all this is fully supported, not stuff doomed to be eternally considered hackery.</p>
<p>&#8220;Where should we draw the line?&#8221; one might ask. For example, is a <a href="http://oddvalue.co.uk/blog/2010/02/css3_clock/" target="_blank">Pure CSS analog clock</a> a CSS <strong>ab</strong>use case? Or even my own <a href="http://lea.verou.me/2010/02/iphone-keyboard-with-css3-no-images/" target="_blank">CSS iPhone keyboard</a>? Now <strong><em>that&#8217;s</em></strong> a good question! A rule of thumb seems to be <em>&#8220;if it inherently (=not due to browser support issues) involves a bunch of empty (or with meaningless content) HTML elements, then that&#8217;s a bad sign&#8221;</em> but that might be overly strict. What&#8217;s your take on it?</p>
<p><strong><em>Disclaimer:</em></strong><em> Yes, I&#8217;m fully aware that most of the time, such experiments are created just for fun by their (very talented) authors, which are perfectly aware of all the things mentioned above. However, I&#8217;ve also grown tired of reading comments by people that seem to to think that &#8220;This is the future of the web!&#8221;. Let&#8217;s hope it&#8217;s not.</em></p>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2010/05/wow-mona-lisa-with-pure-css/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Idea: The simplest registration form ever</title>
		<link>http://lea.verou.me/2009/07/idea-the-simplest-registration-form-ever/</link>
		<comments>http://lea.verou.me/2009/07/idea-the-simplest-registration-form-ever/#comments</comments>
		<pubDate>Thu, 23 Jul 2009 17:04:12 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[registration forms]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=361</guid>
		<description><![CDATA[If a web application has some sort of registration system (and most do), the registration page should be one of the most attractive, inviting, usable pages of it. It should make you to want to register, not repulse you. We don&#8217;t want the user to give up in the middle of filling it because they [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2009%252F07%252Fidea-the-simplest-registration-form-ever%252F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Idea%3A%20The%20simplest%20registration%20form%20ever%22%20%7D);"></div>
<p>If a web application has some sort of registration system (and most do), the registration page should be one of the most attractive, inviting, usable pages of it. It should make you to <strong>want</strong> to register, not repulse you. We don&#8217;t want the user to give up in the middle of filling it because they are fed up with it&#8217;s length or bad usability, or -even worse- not even attempt to do so, do we?</p>
<p>The most popular websites usually take this rule to heart and employ the simplest registration forms: Only the basic fields required, and most of the times, even without password/email confirmation.</p>
<p>I was wondering lately &#8211; what would be the simplest possible registration form? <span id="more-361"></span>It should have the minimum number of fields required: Username and password and a field for some kind of human verification.</p>
<p>At this point, some readers might argue &#8220;Hey, why not an email field as well?&#8221;. In my opinion, the email is not always a required field. Let&#8217;s see why it&#8217;s being asked for in most cases: Unique identification (to prevent double accounts) and for sending out notifications for important events. However, it&#8217;s useless for the first purpose due to all these disposable email websites. As for the second purpose, since notifications can be switched off (and if not, then they are essentially considered spam), it could be regarded optional and we don&#8217;t include optional fields in registration forms, do we? <img src='http://lea.verou.me/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> </p>
<p>Of course, in websites that use the email instead of a username to let their users log in, you may just substitute the username field above with an email field (since in that case, the username is what could be considered optional) and we also have two fields. Smart readers might have noticed another pattern here: The only fields that are truly required for a registration form are the same ones that are required for a login form plus a human verification field.</p>
<p>And then it dawned on me: We can make the registration process almost as quick as logging in! We could use the same form for both actions. The submit button label could indicate the dual nature of the form, for instance &#8220;Log in or register&#8221;. If the username (or email) doesn&#8217;t exist, we could then ask the user whether they want to create a new account and present them the human verification field at that point. There is no need for a password verification field, since <a href="http://lea.verou.me/2009/06/on-password-masking-and-usability/">we could just have a checkbox for displaying what the user typed</a>, if they feel insecure about it.</p>
<p>I find 3 inherent issues with this approach:</p>
<ol>
<li>Security. If a login attempt fails, the user will know whether he got the username or the password wrong. However, in most websites, you can easily check whether a username exists anyway, so I don&#8217;t consider this a real concern. I just included it because I&#8217;m certain that if I didn&#8217;t, somebody would point it out to me in the comments.</li>
<li>Despite being a more usable approach by nature, it&#8217;s not by any means a convention yet. Until it becomes one, I&#8217;m afraid that some users will be confused by its extreme &#8230;simplicity! Funny, isn&#8217;t it?</li>
<li>We won&#8217;t be able to employ Ajax verification for the registration form, since it will essentially be a login form as well, and until the user submits, we won&#8217;t know what they plan to do (login or register). Having an Ajax verification script there by default will confuse existing users as hell (as in <em>&#8220;What do they mean by &#8216;Username is taken&#8217;? WTF??&#8221;</em>). So, we have to sacrifice some usability to gain some usability. The question is: Is the usability we gain more than the usability we sacrifice? What do you think?</li>
</ol>
<p>As you can see by the problems mentioned above, it&#8217;s still a rough-on-the-edges idea (I just thought about it and I haven&#8217;t refined it yet), but I think it&#8217;s interesting. What are your thoughts?</p>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2009/07/idea-the-simplest-registration-form-ever/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>9 reasons why I prefer MySQL to MS SQL Server</title>
		<link>http://lea.verou.me/2009/05/9-reasons-why-i-prefer-mysql-to-ms-sql-server/</link>
		<comments>http://lea.verou.me/2009/05/9-reasons-why-i-prefer-mysql-to-ms-sql-server/#comments</comments>
		<pubDate>Sat, 16 May 2009 19:13:36 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Rants]]></category>
		<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[MS SQL Server]]></category>
		<category><![CDATA[MySQL]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=334</guid>
		<description><![CDATA[In the past, I used MySQL for any of my DBMS needs. It wasn&#8217;t really an informed decision based on solid facts, actually I had never really given it any thought. It was what most developers used, it was what vBulletin used (one of the main projects of my company is based on vBulletin), it [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2009%252F05%252F9-reasons-why-i-prefer-mysql-to-ms-sql-server%252F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%229%20reasons%20why%20I%20prefer%20MySQL%20to%20MS%20SQL%20Server%22%20%7D);"></div>
<p>In the past, I used MySQL for any of my DBMS needs. It wasn&#8217;t really an informed decision based on solid facts, actually I had never really given it any thought. It was what most developers used, it was what vBulletin used (one of the main projects of my company is based on vBulletin), it was what most hosts had pre-installed, in other words, it was the popular choice and I went with the crowd.</p>
<p>Unlike most decisions taken that way, this one turned out to be correct (so far at least). In the university where I study (yeah, I do that too occasionally <img src='http://lea.verou.me/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' />  ), there is a great and extremely useful class on Database Systems offered in my semester. The only drawback is that it&#8217;s done on MS SQL Server. Consequently, I had to work with it quite a lot, and my conclusion was that MySQL is far superior (mostly syntax-wise as I don&#8217;t have the deep knowledge required to judge them fairly for other things, so don&#8217;t expect a deep analysis about performance or security &#8211; as far as I&#8217;m concerned, they are equally good at those).<span id="more-334"></span> Here are a few reasons:</p>
<ol>
<li>No ENUM datatype. Yeah, of course I can define a column with a char/varchar type and add a constraint to only allow for particular strings, but this kinda defeats the purpose of <a href="http://dev.mysql.com/doc/refman/5.0/en/storage-requirements.html" target="_blank">memory saving that the ENUM datatype in MySQL offers</a>.</li>
<li>No INSERT IGNORE. Instead you have to go through hell to simulate that in MS SQL Server.</li>
<li>I hate it that I can&#8217;t use &#8220;USING(columnlabel)&#8221; in a JOIN query and I have to use &#8220;ON(table1.columnlabel = table2.colmnlabel)&#8221; all the time. Yeah, I know that the first one isn&#8217;t standard, but it&#8217;s shorter, cleaner, more elegant, and &#8230;you can still use &#8220;ON(&#8230;)&#8221; if you don&#8217;t like it. Having more options is never bad, is it?</li>
<li>With MySQL you may insert multiple rows at once elegantly (&#8220;INSERT INTO tablename (&#8230;), (&#8230;), &#8230;&#8221;), without using the &#8220;INSERT INTO tablename SELECT (&#8230;) UNION ALL SELECT (&#8230;) UNION ALL &#8230;&#8221; hack. Moreover, the elegant MySQL way also <a href="http://troels.arvin.dk/db/rdbms/#insert-multiple">happens to be the standard</a>, a standard that SQL Server doesn&#8217;t follow.</li>
<li>Triggers can only run per statement, and not per row. This isn&#8217;t really important, since for most cases, it&#8217;s more efficient to define a per statement trigger anyway, but it doesn&#8217;t do any harm to have an extra option, does it?</li>
<li>Paging is dead-easy on MySQL: SELECT * FROM foo LIMIT 10,20 . With MS SQL Server you have to <a href="http://www.sqlteam.com/article/server-side-paging-using-sql-server-2005" target="_blank">jump</a> <a href="http://www.asp101.com/articles/gal/effectivepaging/default.asp" target="_blank">through</a> <a href="http://sqltips.wordpress.com/2007/08/10/optimized-solution-of-paging-by-using-count-over-functionality/" target="_blank">hoops</a> to do the same thing, especially if your query is not trivial.</li>
<li>In MySQL, when you want to convert an integer to a hex string, you just call HEX(). In SQL Server you have to call an undocumented function and do some string manipulation to do the exact same thing.</li>
<li>MySQL runs on every platform, whereas with MS SQL Server you&#8217;re stuck with Windows.</li>
<li>Last but not least, MySQL is free (and when it&#8217;s not free, it&#8217;s at least cheap) and opensource <img src='http://lea.verou.me/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </li>
</ol>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2009/05/9-reasons-why-i-prefer-mysql-to-ms-sql-server/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>CMYK colors in CSS: Useful or useless?</title>
		<link>http://lea.verou.me/2009/03/cmyk-colors-in-css-useful-or-useless/</link>
		<comments>http://lea.verou.me/2009/03/cmyk-colors-in-css-useful-or-useless/#comments</comments>
		<pubDate>Mon, 09 Mar 2009 15:41:20 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[CMYK]]></category>
		<category><![CDATA[colors]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[CSS3 values]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=214</guid>
		<description><![CDATA[As someone who dealed a bit with print design in the past, I consider CMYK colors the easiest color system for humen to understand and manipulate. It&#8217;s very similar to what we used as children, when mixing watercolors for our drawings. It makes perfect sense, more than HSL and definately more than RGB. I understand [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2009%252F03%252Fcmyk-colors-in-css-useful-or-useless%252F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22CMYK%20colors%20in%20CSS%3A%20Useful%20or%20useless%3F%22%20%7D);"></div>
<p>As someone who dealed a bit with print design in the past, I consider CMYK colors the easiest color system for humen to understand and manipulate. It&#8217;s very similar to what we used as children, when mixing watercolors for our drawings. It makes perfect sense, more than HSL and definately more than RGB. I understand that most of us are so accustomed to using RGB that can&#8217;t realise that, but try to think for a moment: Which color system would make more sense to you if you had no idea and no experience at all with any of them?<span id="more-214"></span></p>
<p>Personally, even though I have lots more experience with RGB, given the fact that most of my work will be displayed on screen and not printed on paper, when I think of a color I want, I can instantly find out the percentages of Cyan, Magenta, Yellow and blacK needed to create it. I can&#8217;t do that with HSL or RGB, I&#8217;d have to play a little bit with the color picker&#8217;s sliders. I sometimes start by specifying a color in CMYK and then tweaking it via RGB or HSL to achieve the exact color I need (since the CMYK gamut is smaller than the RGB gamut) and I find that much faster than starting with RGB or HSL right away.</p>
<p>Also, when you don&#8217;t have a color picker, it&#8217;s much easier to create beautiful colors with CMYK than it is with RGB. For example the CMYK magenta (0% Cyan, 100% Magenta, 0% Yellow, 0% blacK) is a much better color than the RGB Magenta (255 Red, 0 Green, 100% Blue).</p>
<p>Given the above, I&#8217;ve always thought how much I wanted to be able to specify CMYK colors in my CSS. I agree that sometimes this would result in crippling myself, since as I said above the CMYK gamut is smaller, but it has other significant advantages that I think it would make it a useful option for some people. There are algorithms available for CMYK to RGB conversion, and the browser could use those to display the specified color on the screen. Then, if the user decided to print the page, The CMYK colors could be used as-is for the printer. Another advantage, as none of the current CSS color formats allow us to control that. People who don&#8217;t find the CMYK color system easier for them to understand, they could still use it for their print stylesheets.</p>
<p>Also, graphic designers who decided to switch to web design would find it much easier to specify color values in a format they are already comfortable with.</p>
<p>To sum it up, the advantages that I think this option would provide us are:</p>
<ol>
<li>A color system that&#8217;s easier for most people to understand and manipulate.</li>
<li>The colors you get when combining &#8220;easy&#8221; CMYK values (0%, 50%, 100%) are more beatuful than the ones you get with &#8220;easy&#8221; RGB values (0, 128, 255). Bored people and people without a taste in color selection would create more beatuful websites this way and our eyes wouldn&#8217;t hurt.</li>
<li>We would be able to specify how our colors will get printed, something that is not currently possible at all. Extremely useful for print stylesheets.</li>
<li>It would be easier for graphic designers to switch to web design.</li>
</ol>
<p>And the format is very easy to imagine:</p>
<pre>background-color: cmyk(0, 100, 50, 0);</pre>
<p>or</p>
<pre>background-color: cmyk(0%, 100%, 50%, 0%);</pre>
<p>or</p>
<pre>background-color: cmyk(0, 1, 0.5, 0);</pre>
<p>So, what do you think? Useful or useless?</p>
<p><strong>Edit: </strong>As it turns out, I&#8217;m not crazy! <a href="http://www.w3.org/TR/css3-gcpm/#cmyk-colors">The W3 already considers this for CSS3</a> with the 3rd format (from 0 to 1)! However, no browser supports it yet, not even Webkit nightlies&#8230; <img src='http://lea.verou.me/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p>
<h3>Translations</h3>
<ul>
<li><a href="http://www.cssnolanche.com.br/cores-cmyk-em-css-uteis-ou-inuteis/" target="_blank">Portuguese</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2009/03/cmyk-colors-in-css-useful-or-useless/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Silent, automatic updates are the way to go</title>
		<link>http://lea.verou.me/2009/02/silent-automatic-updates-are-the-way-to-go/</link>
		<comments>http://lea.verou.me/2009/02/silent-automatic-updates-are-the-way-to-go/#comments</comments>
		<pubDate>Wed, 18 Feb 2009 00:39:01 +0000</pubDate>
		<dc:creator>Lea Verou</dc:creator>
				<category><![CDATA[Thoughts]]></category>
		<category><![CDATA[browsers]]></category>
		<category><![CDATA[Google Chrome]]></category>

		<guid isPermaLink="false">http://leaverou.me/?p=100</guid>
		<description><![CDATA[Recently, PPK stated that he hates Google Chrome&#8217;s automatic updates. I disagree. In fact, I think that all browser vendors should enforce automatic updates as violently as Google Chrome does. There should be no option to disable them. For anybody. But what about the user&#8217;s freedom of choice? This might sound a bit facist at [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_hot-pink" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Flea.verou.me%252F2009%252F02%252Fsilent-automatic-updates-are-the-way-to-go%252F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Silent%2C%20automatic%20updates%20are%20the%20way%20to%20go%22%20%7D);"></div>
<p>Recently, <acronym title="Peter Paul Koch">PPK</acronym> stated that <a href="http://www.quirksmode.org/blog/archives/2009/02/state_of_the_br.html#link4">he hates Google Chrome&#8217;s automatic updates</a>. I disagree. In fact, I think that all browser vendors should enforce automatic updates as violently as Google Chrome does. There should be no option to disable them. For anybody.<span id="more-100"></span></p>
<h3>But what about the user&#8217;s freedom of choice?</h3>
<p>This might sound a bit facist at start, but imagine a world where all browsers would get automatically updated, without the possiblity of an opt-out. If you went online, you would be bound to have the very latest version, regardless of how computer (i)literate you were (Many — if not most — home users that don&#8217;t upgrade are like that because they think it&#8217;s too difficult for their computer expertise level). Sure, if you were a developer you wouldn&#8217;t be able to test a website in older browser versions. But why would you need to do so? If everybody had the latest browser version, you would only develop for the latest version and perhaps for the next one (via nightlies and betas, that could still be separate in that ideal world).</p>
<p>Imagine a world where your job wouldn&#8217;t have to involve tedious IE6 (and in a few weeks, no IE7 either), Firefox 2, Opera 9.5 and Safari 3.1- testing. A world where you would spend your work hours on more creative stuff, where you wouldn&#8217;t want to bang your head on the wall because you know you did nothing wrong but the ancient browser that you are currently testing in is just incompetent and YOU have to fix it&#8217;s sh*t. A world where the size of your Javascript code (and the JS libraries&#8217; code) would be half its size and constantly decreasing as new browser versions come out. A world where you would only have 1 CSS file in most websites you develop. A world where you wouldn&#8217;t feel so bad because IE8 doesn&#8217;t support opacity, border-radius or SVG, because you would know that in 1-2 years everyone would have IE9 and it will probably support them. A world where designing a website would be as much fun as designing your personal blog.</p>
<p>Doesn&#8217;t such a world sound like a dream? Would it harm anyone? Users would browse a much lighter and beautiful web, with a more feature-rich and secure browser. Developers would work half as much to produce better results and they would enjoy their work more.</p>
<h3>What about corporate intranets and abandoned sites that won&#8217;t keep up?</h3>
<p>Oh come on, that isn&#8217;t a good enough reason to not make that dream come true! Companies and individuals could be allowed to have an older version of the browser installed <strong>as well</strong>. They still wouldn&#8217;t be able to opt out from the automatic upgrade, but they could apply somehow to have an older version of the browser in the same system as well. Similarly to what happens now with browser betas. People would use the older version to access corporate intranet applications and obsolete sites and the latest version to surf the web. I may be overly optimistic, but I think that if a user had both versions of a browser installed, (s)he would prefer the latest wherever (s)he can. Perhaps another step towards enforcing that would be if the OS prevented an older browser version from being set as the default browser, but I guess that would be too hard to do, especially if the browser in question is not the OS default one.</p>
<h3>Other people who agree with me<a href="http://www.aaronboodman.com/2009/01/update-fail.html" target="_blank"><br />
</a></h3>
<ul>
<li><a href="http://www.aaronboodman.com/2009/01/update-fail.html" target="_blank">Aaron Boodman</a></li>
<li><a href="http://directwebremoting.org/blog/joe/2009/02/04/undoable_silent_autoupdate.html">Joe Walker</a></li>
</ul>
<p>What&#8217;s <strong>your </strong>opinion?</p>

]]></content:encoded>
			<wfw:commentRss>http://lea.verou.me/2009/02/silent-automatic-updates-are-the-way-to-go/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

