<?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>Thoughts From Eric &#187; Tools</title>
	<atom:link href="http://meyerweb.com/eric/thoughts/category/tech/tools/feed/" rel="self" type="application/rss+xml" />
	<link>http://meyerweb.com/eric/thoughts</link>
	<description>Things that Eric A. Meyer, CSS expert, writes about on his personal Web site; it&#039;s largely Web standards and Web technology, but also various bits of culture, politics, personal observations, and other miscellaneous stuff</description>
	<lastBuildDate>Wed, 08 May 2013 19:05:40 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>A Precise CSS3 Color Table</title>
		<link>http://meyerweb.com/eric/thoughts/2012/05/18/aprecise-css3-color-table/</link>
		<comments>http://meyerweb.com/eric/thoughts/2012/05/18/aprecise-css3-color-table/#comments</comments>
		<pubDate>Fri, 18 May 2012 20:26:02 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1863</guid>
		<description><![CDATA[I couldn’t find the exact table of CSS colors that I wanted, so I created my own.  (Now with sorting!)]]></description>
				<content:encoded><![CDATA[<p>In the course of expanding my documentation of color values, I failed to find a table that listed all 147 SVG-and-CSS3-defined keywords along with the equivalent RGB decimal, RGB percent, HSL, hexadecimal, and (when valid) short-hex values.  There were some tables that listed some but not all of those value types, and one that listed all the value types (plus CMYK) along with a few hundred other keywords, but none that listed all of the CSS keywords and value types.  And none that I saw used precise values for the RGB percent and HSL types, preferring instead to round off at the expense of some subtle differences in color.</p>

<p>So I <a href="http://meyerweb.com/eric/css/colors/">created my own table, which you can now find</a> in <a href="http://meyerweb.com/eric/css/">the CSS area of meyerweb</a>.  Most of it is dynamically generated, taking a list of keywords and RGB decimal equivalents and then calculating the rest of the values from there.  The presentation is still a work in progress, and may change a little or a lot.  In particular, if I can’t find a better algorithm for determining which rows should have white text instead of black, I’ll probably shift away from the full-row background colors to some other presentation.  <ins>(Update: it’s been greatly improved, so I’m sticking with the full-row backgrounds.  For now, anyway.)</ins></p>

<p>My thanks to <a href="http://www.xanthir.com/">Tab Atkins</a> for his donation of the RGB-to-HSL routine I adapted as well as help improving the pick-light-or-dark-text algorithm; and to the people who responded positively on Twitter when I mused about the idea there.</p>

<p><strong>Update 25 May 12:</strong> the table now allows sorting (both directions) on the Keyword, RGB Decimal, and HSL columns.  The sorting and styling code uses methods like <code>el.classList.remove()</code> so it may not function well, or at all, in older versions of Internet Explorer.  The numeric sorts also appear to be borked in Opera and Chrome for no reason I can discern, and it’s not like I did anything fancy in the JavaScript—exactly the opposite, I’d wager.  (Speaking of which, I’m sure my JavaScript is an non-stop amateur-hour horrorshow.  I’m okay with that.  If you aren’t, you might want to avert your gaze.)  If there’s a simple fix that doesn’t screw up other browsers, like Safari and Firefox, I’m interested.  If not, then we’ll all just have to live with it.</p>

<p><strong>Update II 25 May 12:</strong> thanks to the folks who responded to <a href="http://stackoverflow.com/questions/10759018/how-can-i-reliably-subsort-arrays-using-dom-methods">my question over at StackOverflow</a> as well as on Twitter, the sorting is now stable across browsers.  Bonus: I feel like thanks to everything I’ve learned along the way, the JavaScript in general is getting halfway to decent.  Go me.

</p><p>As always: share and enjoy!</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2012/05/18/aprecise-css3-color-table/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Transiently Damaged PDF Attachments</title>
		<link>http://meyerweb.com/eric/thoughts/2012/04/05/transiently-damaged-pdf-attachments/</link>
		<comments>http://meyerweb.com/eric/thoughts/2012/04/05/transiently-damaged-pdf-attachments/#comments</comments>
		<pubDate>Thu, 05 Apr 2012 21:24:26 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Questions]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1732</guid>
		<description><![CDATA[I have this very odd problem that seems to be some combination of PDF, Acrobat, Outlook, Thunderbird, and maybe even IMAP and GMail.  I know, right? The problem is that certain PDFs sent to me by a single individual won’t open at first.  I’ll get one as an email attachment.  I drag the attachment to [...]]]></description>
				<content:encoded><![CDATA[<p>I have this very odd problem that seems to be some combination of PDF, Acrobat, Outlook, Thunderbird, and maybe even IMAP and GMail.  I know, right?</p>

<p>The problem is that certain PDFs sent to me by a single individual won’t open at first.  I’ll get one as an email attachment.  I drag the attachment to a folder in my (Snow Leopard) Finder and double-click it to open.  The error dialog I immediately get from Acrobat Professional is:</p>

<blockquote><p>There was an error opening this document. The file is damaged and could not be repaired.</p></blockquote>

<p>Preview, on the other hand, tells me:</p>

<blockquote><p>The file “<em>[redacted]</em>” could not be opened.  It may be damaged or use a file format that Preview doesn’t recognize.</p></blockquote>

<p>When this happens, I tell the person who sent me the file that The Problem has happened again.  She sends me <em>the exact same file</em> as an attachment.  Literally, she just takes the same file she sent before and drags it onto the new message to send to me again.</p>

<p>And this re-sent file opens without incident.  <em>Every time.</em>  Furthermore, extra re-sends open without incident.  I recently had her send me the same initially damaged file five times, some attached to replies and others to brand-new messages.  All of them opened flawlessly.  The initially damaged file remained damaged.</p>

<p>Furthermore, if I go through the GMail web interface, I can view the initial attached PDF (the one my OS X applications say is damaged) through the GMail UI without trouble.  If I download that attachment to my hard drive, it similarly opens in Acrobat (and Preview) without trouble.</p>

<p>A major indication of damage: that first download is a different size than all the others.  In the most recent instance, the damaged file is 680,302 bytes.  The undamaged files are all 689,188 bytes.  If only I knew why it’s damaged the first time, and not all the others!</p>

<p>So far, I’ve yet to see this happen with PDFs from anyone else, but then I receive very few attached PDFs from people other than this one (our events manager at An Event Apart, who sends and receives PDFs and Office documents like they’re conversational speech—an occupational hazard of her line of work), and it only seems to happen with PDFs of image scans that she’s created.  Other types of PDFs, whether she generated them or not, seem to come through fine; ditto for other file types, like Word documents.  I’d be tempted to blame the scanning software, but again: the exact same file is damaged the first time, and fine on every subsequent re-attachment.</p>

<p>I’ve done some Googling, and found scattered advice on ways clear up corrupted-PDF-attachment problems in Thunderbird.  I’ve followed these pieces of advice, and nothing has helped.  In summary, I have so far:</p>

<ol>
<li>Set <code>mail.server.default.fetch_by_chunks</code> to <code>false</code>.</li>
<li>Set <code>mail.imap.mime_parts_on_demand</code> to <code>false</code>.</li>
<li>Set <code>mail.server.default.mime_parts_on_demand</code> to <code>false</code>.</li>
<li>Tried the Thunderbird extension <a href="http://nic-nac-project.org/~kaosmos/index-en.html#openattach">OPENATTACHMENTBYEXTENSION</a>.  That failed, and so I immediately uninstalled it because handling files by extension alone is just asking to be pwned, regardless of your operating system or personal level of datanoia.  (I wouldn’t have left it installed had it worked; I just wanted to see if it <em>did</em> work as a data point.)</li>
</ol>

<p>Here’s what I know about the various systems in play here:</p>

<ul>
<li>I’m using Thunderbird 11.0.1 on OS X 10.6.8.</li>
<li>The attachments are always sent via Outlook 2010 on Windows 7.</li>
<li>The software used for the scanning is the HP scanning software that was installed with the scanner.  Scans are saved to the hard drive, renamed, and then manually attached to the email.  On resend, the same file is manually attached to the email.</li>
<li>My email account is a GMail IMAP account.</li>
</ul>

<p>So.  Any ideas?</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2012/04/05/transiently-damaged-pdf-attachments/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Finding Unicode</title>
		<link>http://meyerweb.com/eric/thoughts/2012/03/01/finding-unicode/</link>
		<comments>http://meyerweb.com/eric/thoughts/2012/03/01/finding-unicode/#comments</comments>
		<pubDate>Thu, 01 Mar 2012 16:14:44 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1665</guid>
		<description><![CDATA[In which I am confronted with a possibly inappropriate text character, try to figure out what it is, succeed, and tell you how you can do the same (thanks to some helpful advice from the Twitters).]]></description>
				<content:encoded><![CDATA[<p>A little while back, I was reading some text when I realized the hyphens didn&#8217;t look quite right.  A little too wide, I thought.  Not em-dash wide, but still…wide.  Wide-ish?  But when I copied some of the text into a BBEdit window, they looked just like the hyphens I typed into the document.</p>

<p>Of course, I know Unicode is filled with all manner of symbols and that the appearance of those symbols can vary from one font face to another.  So I changed the font face, made the size really huge, and behold: they were indeed different characters.  At this point, I was really curious about what I’d found.  What exactly was it?  How would I find out?</p>

<p>For the record, here&#8217;s the character in question:</p>

<blockquote><p>−</p></blockquote>

<p>Googling “−” and “− Unicode” got me nothing useful.  I knew I could try the Character Viewer in OS X, and eventually I did, but I was wondering if there was a better (read: lazier) solution.  I asked the Twittersphere for advice, and while I don’t know if these solutions are any lazier, here are the best of the suggestions I received.</p>

<ul>
<li><a href="http://unicodelookup.com/">Unicode Lookup</a>, a site that lets you input or paste in any character and get a report on what it is and how one might call it in various encodings.</li>
<li>Richard Ishida&#8217;s <a href="http://rishida.net/scripts/uniview/lite">UniView Lite</a>, which does much the same as Unicode Lookup with the caveat that once you’ve input your character, you have to hit the “Chars” button, not the “Search” button.  The latter is apparently how you search Unicode character names for a word or other string, like “dash” or “quot”.</li>
<li><a href="http://earthlingsoft.net/UnicodeChecker/">UnicodeChecker</a> (OS X), a nice utility that includes a character list pane as well as the ability to type or paste a character into an input and instantly get its gritty details.</li>
</ul>

<p>Any of those will tell you that the − in question is MINUS SIGN, codepoint 8722 (decimal) / 2212 (UTF-16 hex) / U+2212 (Unicode hex) / <i>et cetera, et cetera</i>.  Did you know it was designated in Unicode 1.1?  Now you do, thanks to UnicodeChecker and this post.  You’re welcome.</p>

<p><strong>Update 2 Mar 12:</strong>  Philippe Wittenberg <a href="http://meyerweb.com/eric/thoughts/2012/03/01/finding-unicode/#comment-646524">points out in the comments</a> that you can add a UnicodeChecker service.  With that enabled, all you have to do is highlight a character, summon the contextual menu (right-click, for most of us), and have it shown in UnicodeChecker.  Now <em>that’s</em> the kind of laziness I was trying to attain!</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2012/03/01/finding-unicode/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
		<item>
		<title>Seeing the matrix()</title>
		<link>http://meyerweb.com/eric/thoughts/2011/04/12/seeing-the-matrix/</link>
		<comments>http://meyerweb.com/eric/thoughts/2011/04/12/seeing-the-matrix/#comments</comments>
		<pubDate>Tue, 12 Apr 2011 14:41:39 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Projects]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1511</guid>
		<description><![CDATA[<a href="http://easy-designs.net/">Aaron Gustafson</a> and I created a tool for anyone who wants to resolve a series of CSS transforms into a <code>matrix()</code> value representing the same end state.  Behold: <a href="http://meyerweb.com/eric/tools/matrix/">The Matrix Resolutions</a>.]]></description>
				<content:encoded><![CDATA[<p>Over the weekend, <a href="http://aaron-gustafson.com/" rel="friend colleague met">Aaron Gustafson</a> and I created a tool for anyone who wants to resolve a series of CSS transforms into a <code>matrix()</code> value representing the same end state.  Behold: <strong><a href="http://meyerweb.com/eric/tools/matrix/">The Matrix Resolutions</a></strong>.  (You knew that was coming, right?)  It should work fine in various browsers, though due to the gratuitous use of keyframe animations on the <code>html</code> element&#8217;s multiple background images it looks best in WebKit browsers.</p>

<p>The way it works is you input a series of transform functions, such as <code>translateX(22px) rotate(33deg) scale(1.13)</code>.  The end-state and its <code>matrix()</code> equivalent should update whenever you hit the space bar or the return key, or else explicitly elect to take the red pill.  If you want to wipe out what you&#8217;ve input and go back to a state of blissful ignorance, take the blue pill. </p>

<p>There is one thing to note: the <code>matrix()</code> value you get from the tool is equivalent to the end-state placement of all the transforms you input.  That value most likely does <em>not</em> create an equivalent animation, particularly if you do any rotation.  For example, animating <code>translateX(75px) rotate(1590deg) translateY(-75px)</code> will not appear the same as animating <code>matrix(-0.866025, 0.5, -0.5, -0.866025, 112.5, 64.9519)</code>.  The two values will get the element to the same destination, but via very different paths.  If you&#8217;re just transforming, not animating, then that&#8217;s irrelevant.  If you are, then you may want to stick to the transforms.</p>

<p>This tool grew out of the first <a href="http://r4g.co/">Retreats 4 Geeks</a> (which was <strong>AWESOME</strong>) just outside of Gatlinburg, TN.  After some side conversations betwen me and Aaron during the CSS training program, we hacked this together in a few hours on Saturday night.  Hey, who knows how to <em>party</em>?  Aaron of course wrote the JavaScript.  Early on we came up with the punny name, and of course once we did that the visual design was pretty well chosen for us.  A free TTF webfont (for the page title), a few background images, and a whole bunch of RGBa colors later we had arrived.  Creating the visual appearance was a lot of fun, I have to say.  CSS geeks, please feel free to view source and enjoy.  No need to say &#8220;whoa&#8221;—it&#8217;s actually not that complicated.</p>

<p>So anyway, there you go.  If you want to see the <code>matrix()</code>, remember: we can only show you <a href="http://meyerweb.com/eric/tools/matrix/">the door</a>. You&#8217;re the one that has to walk through it.</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2011/04/12/seeing-the-matrix/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Reset v2.0</title>
		<link>http://meyerweb.com/eric/thoughts/2011/01/26/reset-v2-0/</link>
		<comments>http://meyerweb.com/eric/thoughts/2011/01/26/reset-v2-0/#comments</comments>
		<pubDate>Wed, 26 Jan 2011 18:52:08 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Projects]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1473</guid>
		<description><![CDATA[Earlier today, I updated the "meyerweb reset" to v2.0 final.]]></description>
				<content:encoded><![CDATA[<p>Earlier today, I updated the <a href="http://meyerweb.com/eric/tools/css/reset/">CSS Tools: Reset CSS page</a> to list the final version of Reset v2.0, as well as updated the <a href="http://meyerweb.com/eric/tools/css/reset/reset.css"><code>reset.css</code></a> file in that directory to be v2.0.  (I wonder how many hotlinkers <em>that</em> will surprise.)  In other words, it&#8217;s been shipped.  Any subsequent changes will trigger version number changes.</p>

<p>There is one small change I made between <a href="http://meyerweb.com/eric/thoughts/2011/01/10/reset-2-0b2-paring-down/">2.0b2</a> and 2.0 final, which is the replacement of the &#8220;THIS IS BETA&#8221; warning text with an explicit lack of license.  The reset CSS has been in the public domain ever since I first published it, and the Reset CSS page explicitly said it was, but the file itself never said one way or the other.  Now it does.</p>

<p>Thanks to everyone who contributed their thoughts and perspectives on the new reset.  Here&#8217;s to progress!</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2011/01/26/reset-v2-0/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>Reset Revisited</title>
		<link>http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/</link>
		<comments>http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/#comments</comments>
		<pubDate>Mon, 03 Jan 2011 20:55:00 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1438</guid>
		<description><![CDATA[It was close to four years ago now that I <a href="http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/">first floated</a> (ha!), <a href="http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/">publicly</a> <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/">refined</a>, and then <a href="http://meyerweb.com/eric/tools/css/reset/">published at its own home</a> what's become known as the "Eric Meyer Reset".  It's time for a revisit.]]></description>
				<content:encoded><![CDATA[<p>It was close to four years ago now that I <a href="http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/">first floated</a> (ha!), <a href="http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/">publicly</a> <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/">refined</a>, and then <a href="http://meyerweb.com/eric/tools/css/reset/">published at its own home</a> what&#8217;s become known as the &#8220;Eric Meyer Reset&#8221;.  At the time, I expected it would be of interest to a small portion of the standards community, provoke some thought among fellow craftspeople, and get used occasionally when it seemed handy.  Instead, it&#8217;s ended up almost everywhere.</p>

<p>(This occasionally backfires on me when people use it in the CSS of e-mail campaigns, it&#8217;s exposed by older mail clients, and people then mail me to demand that I unsubscribe them from the mailing list.  But that&#8217;s not the worst backfire—I&#8217;ll get to that in just a minute.)</p>

<p>Four years is long enough for a revisit, I&#8217;d say.  I spent a little time working on and thinking about it over the holidays.  Here&#8217;s where I ended up.</p>

<pre><code>/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
</code></pre>

<p>Some of you may be thinking: &#8220;Hey, it&#8217;s the <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 Doctor reset</a>!&#8221;  Actually, no, though I did use their work as a check on my own.  I felt like that one went a bit far, to be honest.  What I have above is simply the reset I had before with the following changes:</p>

<ul>
<li>Removed <code>font</code> from the selector of the first rule.  It&#8217;s been long enough now, I think.  We can let that one go.</li>
<li>Removed <code>background: transparent</code> from the declaration block of the first rule.  I don&#8217;t think it really served any purpose in the long run, given the way browsers style by default and the CSS-defined default for <code>background-color</code> (which <code>background</code> encompasses, of course).  Its removal will also stop causing table-appearance glitches in old versions of IE, if that&#8217;s of interest.</li>
<li>Added <code>font: inherit</code> to the declaration block of the first rule.  There are still older versions of IE that don&#8217;t understand <code>inherit</code>, but support is now widespread enough that I feel this can go in.  I left <code>font-size: 100%</code> as a sop to older browsers, and override it with the next declaration in those browsers that understand.</li>
<li>Added HTML5 elements to the selector of the first rule.  While this is probably unnecessary right now, those elements being about as styled as a common <code>div</code>, it&#8217;s in the spirit of the thing to list them.</li>
<li>A separate rule to make blocks of those HTML5 elements that generally default to blocks.  This is more backward-looking, as the comment suggests, and it&#8217;s a prime excision candidate for anyone adapting these styles to their own use.  However, if you&#8217;ve ever known the pain of HTML5 markup shattering layouts in, say, older versions of Firefox, this rule has a place.</li>
<li>Removed the &#8220;cellspacing&#8221; comment near the end.  It used to be the case that lots of browsers needed the support, but that&#8217;s a lot less true today.</li>
<li>And then the big one, trying to correct the biggest backfire of the whole enterprise: I commented out and subtly altered the commentary on the <code>:focus</code> rule without removing it entirely.</li>
</ul>

<p>On that last point, defining an invisible focus was the biggest blunder of the original reset.  In hindsight, it&#8217;s really a obvious unforced error, but when I published the reset I literally had no conception that it would be just copied (or, worse, hotlinked) blindly in a thousand sites and frameworks.  As the new advocacy site <a href="http://www.outlinenone.com/">outlinenone.com</a> points out, I did say right in the style sheet that one should define a focus style.  I put in a value of <code>0</code> in the same spirit I zeroed out paragraph margins and set the <code>body</code> element&#8217;s <code>line-height</code> to <code>1</code>: by taking everything to a &#8220;plain baseline&#8221;, the thoughtful craftsperson would be reminded to define the focus style that made most sense for their site&#8217;s design.</p>

<p>Instead, focus outlines were obliterated wholesale as lots and lots of people, not all of them craftsmen, just copied the reset and built on top of it without thinking about it.  I can&#8217;t find it in my heart to fault them: most construction workers don&#8217;t think about how beams and rivets or even riveters are made.  They just bolt &#8216;em together and make a building.</p>

<p>Perhaps some of the pain would have been eased if I had said in the comment, as I do now, &#8220;remember to define <em>visible</em> focus styles&#8221;.  But I doubt it.</p>

<p>So in this revision, I&#8217;ve altered the rule and commentary to raise its visibility, but more importantly I&#8217;ve commented out the whole rule.  This time, copiers and hotlinkers won&#8217;t destroy focusing.  Some may still uncomment it and change the value back to <code>0</code>, of course, but that could happen anyway.  With luck, this change will help educate.</p>

<p>As was the case in 2007, comments and suggestions are most welcome, and may well result in changes that make it into the final version.  Also, my thanks to the <a href="http://html5doctor.com/">HTML5 Doctor</a> crew for publishing their variant, which I used as a sanity check; and <a href="http://www.iraqtimeline.com/maxdesign/" rel="acquaintance">Michael Tuck</a>, whose research into <a href="http://sixrevisions.com/css/the-history-of-css-resets/">the history of resets</a> got me looking back and interested in moving things forward.</p>

<p><strong>Addendum 3 Jan 11:</strong>  as the previous paragraph says, and the version number (2.0b1) heavily implies, <em>this is not a final version</em>.  It may well change, either due to errors on my part (one of which has already come to light) or changes of mind due to discussions in the comments.  You can take this version and use it if you want, but I don&#8217;t particularly recommend it because&#8212;again&#8212;changes are likely.</p>

<h4>Translations</h4>
<ul>
<li><a href="http://www.clearboth.org/wiki/doku.php?id=document:css:eric_meyer_reset">Korean</a> by Kyung il Park</li>
</ul>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/feed/</wfw:commentRss>
		<slash:comments>76</slash:comments>
		</item>
		<item>
		<title>A Textile Filter for BBEdit?</title>
		<link>http://meyerweb.com/eric/thoughts/2010/10/11/a-textile-filter-for-bbedit/</link>
		<comments>http://meyerweb.com/eric/thoughts/2010/10/11/a-textile-filter-for-bbedit/#comments</comments>
		<pubDate>Mon, 11 Oct 2010 19:46:49 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1392</guid>
		<description><![CDATA[In which people way smarter than me show me how to create a standalone Textile filter for BBEdit and I share the results with you.]]></description>
				<content:encoded><![CDATA[<p>A few days back I tweeted <a href="http://twitter.com/meyerweb/status/26758063723">a request for a Textile filter for BBEdit</a>, which is one of those things people have asked for over the years but has never actually appeared.  There&#8217;s been a Markdown filter since forever, but since I find myself on Basecamp a lot for business reasons and Basecamp uses Textile I&#8217;d really prefer to stick to one syntax instead of constantly confusing myself by switching between two similar syntaxes.</p>

<p>(And I prefer to use BBEdit because I like it a lot, know it well, and have no compelling reason to switch.  Please take any thoughts of text-editor snobbery or flamewars elsewhere.)</p>

<p>In response, the mighty <a href="http://theodicius.net/">Arlen Walker</a> told me how to install Xcode, the Text::Textile module, and a short Perl script to drop into  <code>~/Library/Application Support/BBEdit/Unix Support/Unix Filters</code>.   I did that, and it all worked, but I was unhappy with the <code>&lt;span class=&quot;caps&quot;&gt;</code> that default Textile litters all over.  I tried to disable it, failed, <a href="http://twitter.com/meyerweb/status/27051385833">tweeted for help,</a> and was contacted by the incredible <a href="http://bradchoate.com/">Brad Choate</a> (who wrote the Text::Textile module!).</p>

<p>The upshot of all this is that Brad not only told me how to disable the <code>span</code>s, but how to convert Textile to a standalone BBEdit filter that, so far as I can tell, shouldn&#8217;t require installation of either Xcode or Text::Textile.  I&#8217;m pretty sure about this, but since I&#8217;ve already installed Text::Textile I can&#8217;t be entirely certain.  Who wants to test it out?</p>

<p>All you have to do is download <code><a href="http://meyerweb.com/eric/tools/bbedit/TextileSA_pl.zip">TextileSA_pl.zip</a></code>, unzip it, and drop the Perl script into <code>~/Library/Application Support/BBEdit/Unix Support/Unix Filters</code>.  Once you do that, it should immediately become available in BBEdit, even if BBEdit is already running.  (At least that&#8217;s what happens in BBEdit 9.x.)  Here&#8217;s a test file to Texile-ize if you&#8217;re so inclined:</p>

<pre><code>h1. Testing the BBEdit Textile filter

This is _awesome_!  &quot;Arlen&quot;:http://theodicius.net/ and &quot;Brad&quot;:http://bradchoate.com/ are the *bomb*.</code></pre>

<p>There&#8217;s a bug at the moment that means double-quote marks don&#8217;t get smart-encoded, but Brad&#8217;s aware of it and plans to fix it.  Also, this does a straight Textile run with nothing disabled, so it will in fact still litter <code>&lt;span class=&quot;caps&quot;&gt;</code> around any sequence of uppercase letters (like those in, say, &#8220;BBEdit&#8221;).  If you can&#8217;t stand that even during testing, open up <code>TextileSA.pl</code> and insert the following <em>after</em> line 2312:</p>

<pre><code>my $css_flags = $textile-&gt;css();
$css_flags-&gt;{'class_caps'} = '';
$textile-&gt;css($css_flags);</code></pre>

<p>If you don&#8217;t mind (or even like) those <code>span</code>s, then of course you can slip that part.</p>

<p>The &#8220;SA&#8221; in <code>TextileSA.pl</code> stands for &#8220;StandAlone&#8221;, by the way.  I&#8217;ll drop that once I&#8217;m sure this actually works and pass it along to the BBEdit gang.</p>
]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2010/10/11/a-textile-filter-for-bbedit/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Better PDF File Size Reduction in OS X</title>
		<link>http://meyerweb.com/eric/thoughts/2010/02/25/better-pdf-file-size-reduction-in-os-x/</link>
		<comments>http://meyerweb.com/eric/thoughts/2010/02/25/better-pdf-file-size-reduction-in-os-x/#comments</comments>
		<pubDate>Thu, 25 Feb 2010 18:17:15 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Mac]]></category>
		<category><![CDATA[Speaking]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1306</guid>
		<description><![CDATA[Being a brief recounting of the successful quest for reduced-size PDFs that don't look awful.]]></description>
				<content:encoded><![CDATA[<p>
One of the things you discover as a speaker and, especially, a conference organizer is this:  <em><a href="http://www.apple.com/iwork/keynote/">Keynote</a> generates really frickin&#8217; enormous PDFs.</em>  Seriously.  Much like Miles O&#8217;Keefe, they&#8217;re <strong>huge</strong>.  We had one speaker last year whose lovingly crafted and beautifully designed 151-slide deck resulted in a 175MB PDF.
</p>
<p>
Now, hard drives and bandwidth may be cheap, but when you have four hundred plus attendees all trying to download the same 175MB PDF at the same time, the venue&#8217;s conference manager <em>will</em> drop by to find out what the bleeding eyestalks your attendees are doing and why it&#8217;s taking down the entire outbound pipe.  Not to mention the network will grind to a nearly complete halt.  Whatever you personally may think of net access at conferences, at this point, not providing net access is roughly akin to not providing functioning bathrooms.
</p>
<p>
So what&#8217;s the answer?  <a href="http://www.panic.com/blog/2010/02/shrinkit-1-0/">ShrinkIt</a> is fine if the slides use lots of vectors and you&#8217;re running Snow Leopard.  If the slides use lots of bitmapped images, or you&#8217;re not on Snow Leopard, ShrinkIt can&#8217;t help you.
</p>
<img src="http://meyerweb.com/pix/2010/quartzfilter-saveas.png" alt="" class="pic"/>
<p>
If the slides are image-heavy, then you can always load the PDF into Preview and then do a &#8220;Save As&#8230;&#8221; where you select the &#8220;Reduce File Size&#8221; Quartz filter.  That will indeed drastically shrink the file size—that 175MB PDF goes down to 13MB—but it can also make the slides look thoroughly awful.  That&#8217;s because the filter achieves its file size reduction by scaling all the images down by at least 50% <em>and</em> to no more than 512 pixels on a side, plus it uses aggressive JPEG compression.  So not only are the images infested with compression artifacts, they also tend to get that lovely up-scaling blur.  Bleah.
</p>
<p>
I Googled around a bit and found “<a href="http://www.hoboes.com/Mimsy/hacks/quality-reduced-file-size/">Quality reduced file size in Mac OS X Preview</a>” from early 2006.  There I discovered that anyone can create their own Quartz filters, which was the key I needed.  Thus armed with knowledge, I set about creating a filter that struck, in my estimation, a reasonable balance between image quality and file size reduction.  And I think I&#8217;ve found it.  That 175MB PDF gets taken down to 34MB with what I created.
</p>
<p>
If you&#8217;d like to experience this size reduction for yourself (and how&#8217;s <em>that</em> for an inversion of common spam tropes?) it&#8217;s pretty simple:
</p>

<ol>
<li>Download and unzip <a href="http://meyerweb.com/eric/tools/mac/quartzfilter-reduce-file-size-75.zip">Reduce File Size (75%)</a>.  Note that the &#8220;75%&#8221; relates to settings in the filter, not the amount of reduction you&#8217;ll get by using it.</li>
<li>Drop the unzipped <tt>.qfilter</tt> file into <tt>~/Library/Filters</tt> in Leopard/Snow Leopard or <tt>/Library/PDF Services</tt> in Lion.  (Apparently no <code>~</code> in Lion.)</li>
</ol>

<p>
Done.  The next time you need to reduce the size of a PDF, load it up in Preview, choose &#8220;Save As&#8230;&#8221;, and save it using the Quartz filter you just installed.
</p>
<p>
If you&#8217;re the hands-on type who&#8217;d rather set things up yourself, or you&#8217;re a paranoid type who doesn&#8217;t trust downloading zipped files from sites you don&#8217;t control (and I actually don&#8217;t blame you if you are), then you can manually create your own filter like so:
</p>

<img src="http://meyerweb.com/pix/2010/quartzfilter-reducefilesize.png" alt="" class="pic"/>

<ol>
<li>Go to <tt>/Applications/Utilities</tt> and launch ColorSync Utility.</li>
<li>Select the &#8220;Filters&#8221; icon in the application&#8217;s toolbar.</li>
<li>Find the &#8220;Reduce File Size&#8221; filter and click on the little downward-arrow-in-gray-circle icon to the right.</li>
<li>Choose &#8220;Duplicate Filter&#8221; in the menu.</li>
<li>Use the twisty arrow to open the duplicated filter, then open each of &#8220;Image Sampling&#8221; and &#8220;Image Compression&#8221;.</li>
<li>Under &#8220;Image Sampling&#8221;, set &#8220;Scale&#8221; to <tt>75%</tt> and &#8220;Max&#8221; to <tt>1280</tt>.</li>
<li>Under &#8220;Image Compression&#8221;, move the arrow so it&#8217;s halfway between the rightmost marks.  You&#8217;ll have to eyeball it (unless you bust out <a href="http://iconfactory.com/software/xscope">xScope</a> or a similar tool) but you should be able to get it fairly close to the halfway point.</li>
<li>Rename the filter to whatever will help you remember its purpose.</li>
</ol>

<p>
As you can see from the values, the &#8220;75%&#8221; part of the filter&#8217;s name comes from the fact that two of the filter&#8217;s values are 75%.  In the original Reduce File Size filter, both are at 50%.  The maximum size of images in my version is also quite a bit bigger than the original&#8217;s—1280 versus 512—which means that the file size reductions won&#8217;t be the same as the original.
</p>
<p>
Of course, you now have the knowledge needed to fiddle with the filter to create your own optimal balance of quality and compression, whether you downloaded and installed the zip or set it up manually—either way, ColorSync Utility has what you need.  If anyone comes up with an even better combination of values, I&#8217;d love to hear about it in the comments.  In the meantime, share and enjoy!
</p>

<h4>Translations</h4>
<ul>
<li><a href="http://www.fatcow.com/edu/pamyanshenne-pameru-pdf-be/">Belorussian</a> courtesy Patricia Clausnitzer</li>
<li><a href="http://www.extrememarkup.com/internet/translations/bessere-pdf-datei-groessenreduzierung-os-x">German</a> courtesy <a href="http://beraz.de/">Andreas Beraz</a></li>
</ul>

<p><strong>Update 2 Aug 11:</strong> apparently there have been changes in Lion—<a href="https://discussions.apple.com/thread/3196406?start=0&#038;tstart=0">here&#8217;s an Apple forum discussion of the problem</a>.  There are two workarounds described in the thread: either to <a href="https://discussions.apple.com/message/15703647#15703647">open and save files with ColorSync Utility itself,</a> or to <a href="https://discussions.apple.com/message/15801490#15801490">copy the filter to another folder in your Library</a> (or install it there in the first place, above).</p>

<p><strong>Update 27 Mar 12:</strong> edited the Lion install directory to remove an errant <code>~</code> .  Thanks to Brian Christiansen for catching the error!</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2010/02/25/better-pdf-file-size-reduction-in-os-x/feed/</wfw:commentRss>
		<slash:comments>45</slash:comments>
		</item>
		<item>
		<title>Inspector Scrutiny</title>
		<link>http://meyerweb.com/eric/thoughts/2010/02/15/inspector-scrutiny/</link>
		<comments>http://meyerweb.com/eric/thoughts/2010/02/15/inspector-scrutiny/#comments</comments>
		<pubDate>Mon, 15 Feb 2010 14:54:23 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Commentary]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1283</guid>
		<description><![CDATA[It's been said that web inspectors—Firebug, Dragonfly, and so forth—are not always entirely accurate.  The real truth is that web inspectors repeat to us the lies they are told, which are the same lies we can be told to our faces.]]></description>
				<content:encoded><![CDATA[<p>
It&#8217;s been <a href="http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/">said before</a> that web inspectors—Firebug, Dragonfly, the inspectors in Safari and Chrome, and so forth—are not always entirely accurate.  A less charitable characterization is that they lie to us, but that&#8217;s not exactly right.  The real truth is that web inspectors repeat to us the lies they are told, which are the same lies we can be told to our faces if we ask directly.
</p>
<p>
Here&#8217;s how I know this to be so:
</p>
<pre>
body {font-size: medium;}
</pre>
<p>
Just that.  Apply it to a <a href="http://meyerweb.com/eric/css/tests/medium-font.html">test page</a>.  Inspect the <code>body</code> element in any web inspector you care to fire up.  Have it tell you the computed styles for the <code>body</code> element.  Assuming you haven&#8217;t changed your browser&#8217;s font sizing preferences, the reported value will be <code>16px</code>.
</p>
<p>
You might say that that makes sense, since an unaltered browser equates <code>medium</code> with &#8220;16&#8243;.  But as we saw in &#8220;<a href="http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/">Fixed Monospace Sizing</a>&#8220;, the <code>16px</code> value is <em>not</em> what is inherited by child elements.  What is inherited is <code>medium</code>, but web inspectors <em>will never show you that</em> as a computed style.  You can see it in the list of declared styles, which so far as I can tell lists &#8220;specific values&#8221; (as per <a href="http://www.w3.org/TR/CSS2/cascade.html#value-stages">section 6.1 of CSS2.1</a>).  When you look to see what&#8217;s actually applied to the element in the &#8220;Computed Styles&#8221; view, you are being misled.
</p>
<p>
We can&#8217;t totally blame the inspectors, because what they list as computed styles is what they are given by the browser.  The inspectors take what the browser returns and prettify it for us, and give us ways to easily alter those values on the fly, but in the end they&#8217;re just DOM inspectors.  They don&#8217;t have a special line into the browser&#8217;s internal data.  Everything they report comes straight from the same DOM that any of us can query.  If you invoke:
</p>
<pre><code>var obj = document.getElementsByTagName('body')[0];
alert(getComputedStyle(obj,null).getPropertyValue('font-size'));</code>
</pre>
<p>
&#8230;on <a href="http://meyerweb.com/eric/css/tests/medium-font.html">a document being given the rule I mentioned above</a>, you will get back <code>16px</code>, not <code>medium</code>.
</p>
<p>
This fact of inspector life was also demonstrated in &#8220;<a href="http://meyerweb.com/eric/thoughts/2010/02/10/rounding-off/">Rounding Off</a>&#8220;.  As we saw there, browsers whose inspectors report integer pixel values also return them when queried directly from the DOM.  This despite the fact that <a href="http://meyerweb.com/eric/css/tests/font-size-rounding.html">it can be conclusively shown</a> that those same browsers are internally storing non-integer values.
</p>
<p>
Yes, it might be possible for an inspector to do its own analysis of properties like <code>font-size</code> by checking the element&#8217;s specified values (which it knows) and then crawling up the document tree to do the same to all of the element&#8217;s ancestors to try to figure out a more accurate computed style.  But what bothers me is that the browser reported computed values that simply aren&#8217;t accurate in the first place.  it seems to me that they&#8217;re really &#8220;actual values&#8221;, not &#8220;computed values&#8221;, again in the sense of <a href="http://www.w3.org/TR/CSS2/cascade.html#value-stages">CSS2.1:6.1</a>.  This makes <code>getComputedStyle()</code> fairly misleading as a method name; it should really be <code>getActualStyle()</code>.
</p>
<p>
No, I don&#8217;t expect the DOM or browsers to change this, which is why it&#8217;s all the more important for us to keep these facts in mind.  Web inspectors are very powerful, useful, and convenient DOM viewers and editors, essentially souped-up interfaces to what we could collect ourselves with JavaScript.  They are thus limited by what they can get the browser to report to them.  There are steps they might take to compensate for known limitations, but that requires them to second-guess both what the browser does now and what it might do in the future.
</p>
<p>
The point, if I may be so bold, is this:  never place all your trust in what a web inspector tells you.  There may be things it cannot tell you because it does not know them, and thus what it does tell you may on occasion mislead or confuse you.  Be wary of what you are told—because even though all of it is correct, not quite all of it is true, and those are always the lies that are easiest to believe.
</p>
]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2010/02/15/inspector-scrutiny/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Pseudo-Phantoms</title>
		<link>http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/</link>
		<comments>http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 17:41:10 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/?p=1180</guid>
		<description><![CDATA[In the course of a recent debugging session, I discovered a limitation of web inspectors (Firebug, Dragonfly, Safari&#8217;s Web Inspector, et al.) that I hadn&#8217;t quite grasped before: they don&#8217;t show pseudo-elements and they&#8217;re not so great with pseudo-classes.  There&#8217;s one semi-exception to this rule, which is Internet Explorer 8&#8242;s built-in Developer Tool.  It shows [...]]]></description>
				<content:encoded><![CDATA[<p>
In the course of a recent debugging session, I discovered a limitation of web inspectors (Firebug, Dragonfly, Safari&#8217;s Web Inspector, et al.) that I hadn&#8217;t quite grasped before: they don&#8217;t show pseudo-elements and they&#8217;re not so great with pseudo-classes.  There&#8217;s one semi-exception to this rule, which is Internet Explorer 8&#8242;s built-in Developer Tool.  It shows pseudo-elements just fine.
</p>
<p>
Here&#8217;s an example of what I&#8217;m talking about:
</p>

<pre><code>p::after {content: " -\2761-"; font-size: smaller;}
</code></pre>

<p>
Drop that style into any document that has paragraphs.  Load it up in your favorite development browser.  Now inspect a paragraph.  You will not see the generated content in the DOM view, and you won&#8217;t see the pseudo-element rule in the Styles tab (except in IE, where you get the latter, though not the former).
</p>

<a href="http://www.flickr.com/photos/meyerweb/4071955467/"><img src="http://meyerweb.com/pix/2009/firebug-crop.png" class="pic border" alt="" /></a>

<p>
The problem isn&#8217;t that I used an escaped Unicode reference; take that out and you&#8217;ll still see the same results, as on <a href="http://meyerweb.com/eric/css/tests/pseudos-inspector-test.html">the test page I threw together</a>.  It isn&#8217;t the double-colon syntax, either, which all modern browsers handle just fine; and anyway, I can take it back to a single colon and still see the same results.  <code>::first-letter</code>, <code>::first-line</code>, <code>::before</code>, and <code>::after</code> are all basically invisible in most inspectors.
</p>
<p>
This can be a problem when developing, especially in cases such as having a forgotten, runaway <a href="http://www.positioniseverything.net/easyclearing.html">generated-content clearfix</a> making hash of the layout.  No matter how many times you inspect the elements that are behaving strangely, you aren&#8217;t going to see anything in the inspector that tells you why the weirdness is happening.
</p>
<p>
The same is largely true for dynamic pseudo-classes.  If you style all five link states, only two will show up in most inspectors&#8212;either <code>:link</code> or <code>:visited</code>, depending on whether you&#8217;ve visited the link&#8217;s target; and <code>:focus</code>.  (You can sometimes also get <code>:hover</code> in Dragonfly, though I&#8217;ve not been able to do so reliably.  IE8&#8242;s Developer Tool always shows <code>a:link</code> even when the link is visited, and doesn&#8217;t appear to show any other link states.  &#8230;yes, this is getting complicated.)
</p>
<p>
The more static pseudo-classes, like <code>:first-child</code>, do show up pretty well across the board (except in IE, which doesn&#8217;t support all the advanced static pseudo-classes; e.g., <code>:last-child</code>).
</p>

<a href="http://www.flickr.com/photos/meyerweb/4072718108/"><img src="http://meyerweb.com/pix/2009/iedevtool-crop.png" class="pic border" alt="" /></a>

<p>
I can appreciate that inspectors face an interesting challenge here.  Pseudo-elements are just that, and aren&#8217;t part of the actual structure.  And yet Internet Explorer&#8217;s Developer Tool manages to find those rules and display them without any fuss, even if it doesn&#8217;t show generated content in its DOM view.  Some inspectors do better than others with dynamic pseudo-classes, but the fact remains that you basically can&#8217;t see some of them even though they will potentially apply to the inspected link at some point.
</p>
<p>
I&#8217;d be very interested to know what inspector teams encountered in trying to solve this problem, or if they&#8217;ve never tried.  I&#8217;d be <em>especially</em> interested to know why IE shows pseudo-elements when the others don&#8217;t&#8212;is it made simple by their rendering engine&#8217;s internals, or did someone on the Developer Tool team go to the extra effort of special-casing those rules?
</p>
<p>
For me, however, the overriding question is this: what will it take for the various inspectors to behave more like IE&#8217;s does, and show pseudo-element and pseudo-class rules that are associated with the element currently being inspected?  And as a bonus, to get them to show in the DOM view where the pseudo-elements actually live, so to speak?
</p>
<p>
<small>(<strong>Addendum:</strong> when I talk about IE and the Developer Tool in this post, I mean the tool built into IE8.  I did not test the Developer Toolbar that was available for IE6 and IE7.  Thanks to <a href="http://www.bogglethemind.com/">Jeff L</a> for pointing out the need to be clear about that.)</small>
</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Announcing Followerlap</title>
		<link>http://meyerweb.com/eric/thoughts/2009/07/06/announcing-followerlap/</link>
		<comments>http://meyerweb.com/eric/thoughts/2009/07/06/announcing-followerlap/#comments</comments>
		<pubDate>Mon, 06 Jul 2009 17:22:50 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Projects]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://meyerweb.com/?p=1138</guid>
		<description><![CDATA[A new micro-tool to find out how much overlap there is between the followers of two Twitter accounts.]]></description>
				<content:encoded><![CDATA[<p>
Last week, I got an <a href="http://twitter.com/supernovia/status/2424654400">interesting inquiry</a> from <a href="http://novapages.com/">Velda Christensen</a>:
</p>

<blockquote cite="http://twitter.com/supernovia/status/2424654400"><p>@meyerweb *wondering just how many of your followers follow @zeldman and vice-versa*</p></blockquote>

<p>
I had no idea.  Furthermore, I didn&#8217;t know of a tool that could tell me.  So I built one: <a href="http://meyerweb.com/eric/tools/followerlap/">Followerlap</a>.
</p>
<p>
As it turned out, the Twitter API made answering the specific question pretty ridiculously easy, thanks to <a href="http://apiwiki.twitter.com/Twitter-REST-API-Method%3A-followers%C2%A0ids"><code>followers/ids</code></a>.  All it takes is two API requests, one for each username.  The same would be true of <a href="http://apiwiki.twitter.com/Twitter-REST-API-Method%3A-friends%C2%A0ids"><code>friends/ids</code></a>, on top of which I suspect I&#8217;ll fairly shortly build a tool quite similar to Followerlap.
</p>
<p>
Since I <a href="http://twitter.com/meyerweb/status/2499070417">announced Followerlap&#8217;s existence</a> on (where else?) Twitter, I&#8217;ve had a few repeated (and not unexpected) bits of feedback.
</p>

<ul>
<li><p><strong>Why not list the common followers?</strong>  Because <code>followers/ids</code> returns a list of numeric IDs.  Resolving those IDs as usernames would require one API hit per ID.  If there are 15 followers in common, that&#8217;s not such a big deal, but if there are 1,500, well, I&#8217;ll run out of my hourly allotment of API requests very quickly.  Maybe there&#8217;s a better way; if so, I&#8217;d love to hear about it, because that would be a great addition.</p></li>
<li><p><strong>Why can&#8217;t I find out how many people follow both <a href="http://twitter.com/stephenfry">Stephen Fry</a> and <a href="http://twitter.com/THE_REAL_SHAQ">Shaquille O&#8217;Neal</a>?</strong>  Past a certain number of followers, somewhere in the 200,000&ndash;250,000 range, the API just dies.  You can&#8217;t even count on getting a consistent error message back.  <a href="http://groups.google.com/group/twitter-development-talk/browse_thread/thread/9abd452e420b5aed/37063359ae45fe68">There are ways around this</a>, but I didn&#8217;t want to stress the API that way, so it just fails.  Sorry.</p></li>
<li><p><strong>How can I link to a specific comparison?</strong>  <del datetime="2009-07-07T01:27:13+00:00">At the moment, you can&#8217;t.  I hope to make that happen soon, but I decided that a tool this simple should have a similarly simple launch.  Ship early, ship often, right?  Anyway, it&#8217;s on the list of things to add soon.</del>  Use the new &#8220;Livelink to this result&#8221; link underneath a result.  (See update below for more.)</p></li>
</ul>

<p>
So that&#8217;s Followerlap.  Any other questions?  I&#8217;ll do my best to answer them in the comments, though for a number of reasons I may be slow to respond.
</p>
<p>
<strong>Update 6 Jul 09:</strong> as noted in the edited point above, livelinking of comparison results is now, um, live.  So now you can pass around results like <a href="http://meyerweb.com/eric/tools/followerlap/?u1=god&#038;u2=devil">the number of people who follow both God <em>and</em> the Devil</a> (thanks to Paul M. Watson for <a href="http://twitter.com/paulmwatson/status/2500099501">coming up with that one</a>!).  I call this &#8220;livelinking&#8221; because hitting a result URL will get you the very latest results for that particular comparison.  &#8220;Permalinking&#8221; to me implied that it would link to a specific result at a specific time, which the tool doesn&#8217;t do and very likely never, ever will.
</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2009/07/06/announcing-followerlap/feed/</wfw:commentRss>
		<slash:comments>29</slash:comments>
		</item>
		<item>
		<title>Seeking Math Help</title>
		<link>http://meyerweb.com/eric/thoughts/2009/01/14/seeking-math-help/</link>
		<comments>http://meyerweb.com/eric/thoughts/2009/01/14/seeking-math-help/#comments</comments>
		<pubDate>Wed, 14 Jan 2009 21:56:22 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Projects]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://meyerweb.com/?p=994</guid>
		<description><![CDATA[So I have this equation that's great for finding one term.  Problem is, I need to solve for another term that's scattered all across the right side.  I'm hoping someone here has the mad algebra skills I managed to lose in the two decades since I last took a math class and can help me out.]]></description>
				<content:encoded><![CDATA[<p>
So I have this equation that&#8217;s great for finding one term.  Problem is, I need to solve for another term that&#8217;s scattered all across the right side.  I&#8217;m hoping someone here has the mad algebra skills I managed to lose in the two decades since I last took a math class and can help me out.
</p>
<p>
Here&#8217;s the original equation:
</p>

<p>
Q = (3.07 &#215; F &#215; Y &#215; (1 + 1.4 &#215; ((D/V) &#215; <em>e</em><sup>(-2 &#215; D/V)</sup>))) / D<sup>2</sup>
</p>

<p>
I want to be able to solve for D, not Q; in other words, have a single D on the left and everything else on the right of the equation.  F, Y, and V are all variable terms; the <em>e</em> is the classic irrational constant.  I tried for quite a while to do this and ran very firmly aground.  The best I managed was this minor simplification:
</p>

<p>
Q = (3.07 &#215; F &#215; Y &#215; (1 + 1.4 &#215; (D / (V &#215; <em>e</em><sup>(2 &#215; D/V)</sup>))) / D<sup>2</sup>
</p>

<p>
&#8230;and even that assumes that I did things correctly.  Here&#8217;s the original equation in pretty shoulda-done-it-in-MathML-but-oh-well form:
</p>

<img src="http://meyerweb.com/pix/2009/thermal-equation.png" alt="" class="standalone" />

<p>
I can shuffle the chairs around, as it were, but never really get anywhere close to having a single D on the left.  &#8220;But it&#8217;s so <em>easy!</em>&#8220;, you may well be shouting.  That&#8217;s why you&#8217;re working for Google and I&#8217;m not. 
</p>
<p>
I remember having questions just like this on tests back in college: &#8220;Given this equation, solve for blah&#8221;.  It&#8217;s been too long, though, and in all honesty I was never that great at this sort of thing in the first place. Help, please?
</p>

<p><strong>[Update 14 Jan 09]</strong>: several commenters have shown that what I&#8217;m trying to do is impossible.  Frustrating, but that&#8217;s math for you.  Looks like I&#8217;ll have to take another approach.</p>]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2009/01/14/seeking-math-help/feed/</wfw:commentRss>
		<slash:comments>43</slash:comments>
		</item>
		<item>
		<title>MW Latest Tweet 1.1b2</title>
		<link>http://meyerweb.com/eric/thoughts/2008/12/08/mw-latest-tweet-11b2/</link>
		<comments>http://meyerweb.com/eric/thoughts/2008/12/08/mw-latest-tweet-11b2/#comments</comments>
		<pubDate>Mon, 08 Dec 2008 18:59:38 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://meyerweb.com/?p=967</guid>
		<description><![CDATA[Now available: <a href="http://meyerweb.com/eric/tools/wordpress/mw_latest_tweet.html">MW Latest Tweet</a> 1.1b2, now with debug-mode toggle links and improved auto-linking code.]]></description>
				<content:encoded><![CDATA[<p>
Now available: <a href="http://meyerweb.com/eric/tools/wordpress/mw_latest_tweet.html">MW Latest Tweet</a> 1.1b2.  The only real difference between this version and the previous is better auto-link routines, thanks largely to a PHP4-ified version of <a href="http://josephscott.org/">Joseph Scott</a>&#8216;s <a href="http://josephscott.org/archives/2008/11/makeitlink-detecting-urls-in-text-and-making-them-links/">recently released MakeItLink PHP class</a>.  I tightened up some related code as well, thanks to my newfound understanding of just what the heck a &#8220;callback function&#8221; actually does, and how it can be useful.  And anonymous functions, too!
</p>
<p>
Also, there is an &#8220;enter debug mode&#8221; link at the bottom of the administrative panel for the plugin.  It&#8217;s <em>very</em> cleverly matched with an &#8220;exit debug mode&#8221; link when you&#8217;re in debug mode.  These links do just what they sound like they should do.  Debug mode itself, introduced in the previous beta, is unchanged (except maybe cosmetically).
</p>
<p>
In case anyone&#8217;s interested in seeing how I use the text-replacement strings on  meyerweb, here&#8217;s what I have in that <code>textarea</code>, formatted slightly for readability:
</p>

<pre><code>
&lt;div class="panel"&gt;
&lt;h4&gt;Recently Tweeted&lt;/h4&gt;
&lt;p class="more"&gt;
&lt;a href="http://twitter.com/%%USER_SCREEN_NAME%%"&gt;see more&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
%%TEXT%% &lt;small&gt;&#8211;tweeted %%CREATED_AT%%&lt;/small&gt;
&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>
There were some reports of incompatibility between this plugin and early WordPress 2.7 betas.  Word is it&#8217;s working fine with the latest beta.  I probably won&#8217;t fix any incompatibilities until 2.7 final ships, but if anyone spots something they absolutely know will be a problem in 2.7 final, let me know.  Thanks!
</p>
]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2008/12/08/mw-latest-tweet-11b2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>MW Latest Tweet 1.1b1</title>
		<link>http://meyerweb.com/eric/thoughts/2008/09/04/mw-latest-tweet-11b1/</link>
		<comments>http://meyerweb.com/eric/thoughts/2008/09/04/mw-latest-tweet-11b1/#comments</comments>
		<pubDate>Thu, 04 Sep 2008 15:02:58 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://meyerweb.com/?p=934</guid>
		<description><![CDATA[There's a new beta of <a href="http://meyerweb.com/eric/tools/wordpress/mw_latest_tweet.html">MW Latest Tweet</a> available.  It does four new things.  Four and a half if you count the new options setting as a half.]]></description>
				<content:encoded><![CDATA[<p>
There&#8217;s a new beta of <a href="http://meyerweb.com/eric/tools/wordpress/mw_latest_tweet.html">MW Latest Tweet</a> available.  It does four new things.  Four and a half if you count the new options setting as a half.
</p>

<ol>
<li><p>All the files are in the <tt>mw_latest_tweet</tt> directory now, instead of having the plugin PHP outside of that directory like 1.0 did.  Yeah, I know, that should&#8217;ve been the case all along.  Sorry!  Learning on the job here.</p>
<p>If you&#8217;re upgrading from 1.0, you should probably delete the 1.0 file and directory outright before uploading the 1.1b1 directory.  Alternatively, you should be able to upload 1.1b1, deactivate 1.0, activate 1.1b1, and then delete just the 1.0 PHP file.  I haven&#8217;t tried that, so I don&#8217;t know if it will actually work, but it seems like it should.</p></li>
<li><p>URLs within a tweet are turned into hyperlinks for easy clickin&#8217;.  To go with this new feature, there&#8217;s a new option on the settings page to either shorten displayed URLs, like twitter.com does, or to not shorten them.  The default is to shorten, which means any URL 29 or more characters long gets shortened to 27 characters and gains a trailing ellipsis.  Again, like Twitter does it&#8212;although I used an ellipsis entity and not three periods.</p>
<p>Note that if you upgrade from 1.0 to 1.1b1, this setting may default to &#8220;No&#8221; instead of &#8220;Yes&#8221;.  I&#8217;m not sure why, but it&#8217;s a pretty low-priority item right now.</p></li>
<li><p>On a related note, @names are autolinked as well.  I&#8217;m using the pattern <code>[A-Za-z0-9_]</code> since that&#8217;s what Twitter says are valid characters for a username even though if you type in a <a href="http://www.typography.com/ask/showBlog.php?blogID=122">grawlix</a> on the signup page it will tell you, in nice bold green letters, that it&#8217;s available.</p></li>
<li><p>If you want to see everything the plugin has cached, append <tt>&#038;debug</tt> to the end of the plugin&#8217;s setting page URL and hit return.  You&#8217;ll get the settings page with a dump of the cached data at the end.  This is clumsy and will be much less so before 1.1 final.  I&#8217;m thinking click a link, enter debug mode.  Probably won&#8217;t go all AJAXy, though you never know.</p></li>
</ol>

<p>
So that&#8217;s the state of things.  Let me know if anything breaks.
</p>
]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2008/09/04/mw-latest-tweet-11b1/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Excerpts Exacted; Shielding the Admin</title>
		<link>http://meyerweb.com/eric/thoughts/2008/06/12/excerpts-exacted-shielding-the-admin/</link>
		<comments>http://meyerweb.com/eric/thoughts/2008/06/12/excerpts-exacted-shielding-the-admin/#comments</comments>
		<pubDate>Thu, 12 Jun 2008 13:43:51 +0000</pubDate>
		<dc:creator>Eric Meyer</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://meyerweb.com/?p=911</guid>
		<description><![CDATA[The excerpt-exacting plugin I requested has been created and released!  Also, a request for help with a plugin I've written but would like very much to improve.]]></description>
				<content:encoded><![CDATA[<p>
In response to <a href="http://meyerweb.com/eric/thoughts/2008/06/10/wanted-excerpt-exacter/">my request</a>, the indomitable <a href="http://hamstu.com/">Hamish Macpherson</a> has created <a href="http://hamstu.com/uploads/NeverForgetcerpt.zip">NeverForgetcerpt</a>, a plugin for WordPress 2.5+ that will warn you if you&#8217;re about to publish a post that lacks an excerpt.  I&#8217;m already using it on meyerweb and it&#8217;s working like a charm.  He&#8217;s also expressed interest in the idea of a plugin that does that and also warns you if you forgot to add tags or categories, so stay tuned.  Meantime, all hail Hamish!
</p>
<p>
I have another plugin request, but in this case I&#8217;m looking for help in modifying something I&#8217;ve already done.  Or half-done, maybe.
</p>
<p>
I don&#8217;t know about you, but I get a <strong>lot</strong> of comment spam.  As I type this sentence, <a href="http://akismet.com/">Akismet</a> has stopped 837,806 spam attempts in total.  A false positive makes it past Akismet and my other defenses to land in the moderation queue about once every four days, on average.
</p>
<p>
Some of those false positives are really, really, <em>really</em> easy to spot, and they get marked as spam in order to help improve the recognition algorithms.  Others are hard to evaluate just by looking at the comment.  Many are trackbacks from sites in langauges I can&#8217;t read, and others that I can read look legit enough.  In such cases, I usually go visit the author&#8217;s URL to see if it looks spammy or not.
</p>
<p>
Now, the way I used to do this was to right-click on the blog link, copy the URL of the target, open a new browser tab, and paste the URL into the address bar.  Why?  To prevent my WP admin URL from landing in the referer logs of a potentially unscrupulous site owner.  But sometimes I forget to do all that, and just click.  I figured, well, why not stop fighting the tendency to just click and write a plugin that routes all outbound links through a redirect service?
</p>
<p>
So I did.  You can <a href="http://meyerweb.com/eric/tools/wordpress/mw_url_obscurify.php.zip">grab it for yourself</a> if you want, but if you do, understand that it&#8217;s pretty clunky right now.  Which is the part I&#8217;d like help fixing.
</p>
<p>
The heart of the plugin is simplicity itself:
</p>

<pre>
if (is_admin_page()) {
	add_filter('get_comment_author_url','_mw_obscurify',5);
}

function _mw_obscurify($url) {
	if ($url) return 'http://google.com/url?q=' . $url;
}
</pre>

<p>
There&#8217;s a little more to it than that (specifically, the routine <code>is_admin_page()</code>, which I got from someone else&#8217;s plugin and wish now I could remember whose it was) but that&#8217;s the core.  So any time the URL of a comment author is fetched, it&#8217;s prepended to turn it into a Google redirect.
</p>
<p>
That&#8217;s true for both <code>href</code> values and displayed URLs, though, which is the clunky part.  The end result is that on comments from the aforementioned mighty Hamish, for example, I get the following markup on the &#8220;Comments&#8221; page:
</p>

<pre>
&lt;a href="http://google.com/url?q=http://hamstu.com"&gt;

http://google.com/url?q=http://hamstu.com&lt;/a&gt;

</pre>

<p>
What I&#8217;d very much prefer is:
</p>

<pre>
&lt;a href="http://google.com/url?q=http://hamstu.com"&gt;

http://hamstu.com&lt;/a&gt;

</pre>

<p>
Or even:
</p>

<pre>
&lt;a href="http://google.com/url?q=http://hamstu.com"&gt;
hamstu.com&lt;/a&gt;
</pre>

<p>
So what I&#8217;d like to know is if there&#8217;s any way to make that happen short of rewriting and replacing <code>get_comment_author_url</code>, which I&#8217;d prefer not to do since it could change in future versions of WordPress and I&#8217;m not particularly interested in turning a basic plugin into a continuing maintenance headache.  I mean, I will if absolutely necessary, but I&#8217;d like to find a better way if there is one.  Thus the request for help.
</p>
<p>
Also, are there better redirect strategies than using Google the way I have?  It&#8217;s very slightly annoying that I have to click through the Google redirect page, and though I absolutely understand why they do that, I&#8217;d love to find an automatic redirect that wouldn&#8217;t expose my referer to the target site.  Anyone know of one, or have a related sharp idea?
</p>
]]></content:encoded>
			<wfw:commentRss>http://meyerweb.com/eric/thoughts/2008/06/12/excerpts-exacted-shielding-the-admin/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->