Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Archive: 'Tools' Category

Another Soul Lost to SketchUp

Hitting a link shared by Unstoppabot, who really needs to get around to fixing his feed linking policy (“View this site”?  Lame!), I was seized with another spasm of appreciation for the deliciousness that is SketchUp.

I did a moderate amount of 3D modeling back in the day.  The specific day in question would be the one where we all thought that images of rendered 3D models and, whenever possible, blobs of text were the absolute last word in Great Web Design.  Remember that?  Wasn’t it fantastic?  When every page title could be a bunch of extruded and beveled sans-serif letters viewed slightly from above, with the whole mess of text angled away from the observer?

Good times.

So anyway, while I was cranking out renderings of page title text and university logos, I also spent some time creating scenes of other stuff.  You can find some of the results if you dig deeply enough here on meyerweb, but that’s not my point.  What I’m trying to say is that I enjoy a bit o’ three dee more than most, and have some knowledge of how difficult it can be to construct models.

When I first heard about SketchUp, I was intrigued but didn’t really buy into all the hype.  It couldn’t be that easy, could it?  And then I watched someone using it—at An Event Apart, as it happens; and no, it wasn’t one of the attendees—and was captivated.  I downloaded the installer while I was sitting there, watching him create and modify shapes as easily as sketching them on paper.  And then I left it uninstalled, because I was afraid of what it would do to my free time.

A few days ago, I finally broke down.  I actually did have a legitimate reason to install and use it, a really good one, but of course I’d been waiting for any reasonable pretense to launch the .dmg and make with the modeling.  So I did.

Color me deeply impressed.  While you’re at it, add some heavy tints of addicted.  I started by modeling our kitchen, and now I want to do the whole frickin’ house.  I’m starting to eye local landmarks for recreation and contribution to the Warehouse and Google Earth.

I don’t have time for this.  I need help.  Stop me before I model again!

Diagnostic Styling

On stage at An Event Apart Chicago, I made reference to recent efforts I’ve been making to develop a set of “diagnostic” styles.  I’d hoped to have them ready for presentation in Chicago, but didn’t get it done in time.

Well, they’re still not really done, but as I’ve now torn them apart and rebuilt them three or four times, with no real end to that cycle in sight, it’s time for me to get them off of my hard drive and into the public eye.  It’s a little bit complicated, so rather than post the whole thing in this entry, I’m going to link to a demonstration page.  I first want to say a few things about it, though.

The primary goal here is to have a set of rules that can be applied during the development phase of a new layout.  These rules’ aim is to visually highlight problems in the markup.  For example, here’s one of the rules:

a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

That brings some eye-watering attention to any link that has an empty href, or is (most likely) being used as a JavaScript trigger with no fallback.

Where things got tricky was when I wanted to do things like higlight images that didn’t have alt or title attributes.  In a perfect CSS3 world, I could just say img:not(img[alt]) to select non-alted images.  At least, I think that’s what I would say—:not() syntax makes my temples throb.  Since I was developing these with the idea of releasing them to a more general development audience, though, I decided to use regular old non-:not selectors.

So what I ended up doing, in slightly simplified form, was this sort of thing:

img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

The logic works out like so:

  1. Set all images to have a big red outline.
  2. If an image has both alt and title attributes, set the outline width to zero.
  3. If an image has an alt attribute, set the outline color to fuchsia.  This means the outline of any image that doesn’t have an alt attribute will stay red.
  4. As long as an image has either an alt or a title attribute, make its outline style double.
  5. If an image has an empty alt with any kind of title, or vice versa, make the outline’s width three pixels.
  6. If an image’s alt and title attributes are both empty, then make the outline dotted.

Whew.  Maybe I piled a few too many conditions in there, but I wanted to get some finer granularity on the results, which you can see demonstrated (along with several other things, like highlighting table headers without scope attributes and tables without summary attributes) at the diagnostic demonstration page.  On that page, you’ll see a number of examples and the style sheet that drives them all.  If it’s getting in the way of seeing what’s going on, move the mouse over it to mostly clear it away without actually removing it.  Mouse back out to bring it back.  (Maybe I should reverse those states—what do you think?)

Admittedly, much of what these styles do can be replicated with tools like the Web Developer Toolbar.  The advantage I find with writing my own diagnostic styles is that I can tune them to present exactly the way I want them.  Outlining deprecated elements is fine, but what if I’d rather make them lime-green on cyan to really drive the point into my optic nerves?

Anyway, I don’t for an instant think that these constitute a replacement for the WDT.  They’re just another handy tool to have in the toolbox.

A final note: when actually using diagnostic styles, all of the declarations should be marked !important so as to ensure their application.  I left those directives out of the demo page for clarity’s sake.  If you’re going to use diagnostic styles of this sort in your own projects, remember that you’ll need to add them.

I’m putting these out for comment, suggestions, and general community improvement.  Anyone see things we could add or upgrade?  Let us know!

Jackals and HYDEsim

Long-time readers (and Jeremy) probably remember HYDEsim, the big-boom ‘simulator’ I hacked together using the Google Maps API and some information in my personal reading library.

Well, with North Korea setting off something that might have been a nuclear device, it’s starting to show up in the darndest places.  Everyone’s favorite millenial talk show host, Glenn Beck, not only mentioned it on his radio program this past Monday, but also put a link on the main page of his site for a couple of days.  Then it got Farked.  I suppose it’s only a matter of time now before it gets Slashdotted as well.

With the increased attention, some old criticisms have arisen, as well as some misunderstandings.  For example, on Fark, someone said:

I thought it was funny how people are playing with this and think they were “safe” if they weren’t in the circle.

Here’s a mockup I did of the kind of blast damage you could expect from a single 1980’s era Russian ICBM carrying 10 MIRV warheads, each capable of 750KT yield.

Oh my yes.  That’s something that the HYDEsim code can theoretically support, since every detonation point is an object and there’s no limit on the number of objects you can have, but I never managed to add this capability.  That’s because trying to figure out the UI for placing the MIRV impact points broke my head, and when I considered how to set all that in the URI parameters (for direct linking), a tiny wisp of smoke curled out of my left ear.  Still, one of these days I should probably at least add a “MIRV ring impact” option so the young’n’s can get an idea of what had us all scared back in the old days.

The interesting challenge is that a strategic nuclear strike of that variety is going to involve a whole bunch of optimum-altitude air bursts.  HYDEsim takes the simpler—and also, in this darkened day and age, more realistic—approach of calculating the effects of a ground burst.  The difference is in no sense trivial: a ground burst has a lot of energy, both thermal and radiological, absorbed by the ground (oddly enough!).  On the other hand, its highest overpressure distances are actually greater.

This is because shock energy drops with distance, of course.  An optimum-altitude air burst would be a mile or two above the ground, so the highest pressures would be directly beneath the explosion, and would be smaller than if the same weapon exploded on the ground.  With an air burst there’s less ground and man-made clutter to attenuate the shock waves as they spread out, so the total area taking some degree of damage due to overpressure is actually greater.  (There are also very complex interactions between the shock waves in the air and those reflected off the ground, but those are way beyond my ability to simulate in JavaScript.)

Also, direct thermal radiation is spread over a much greater area with an air burst than with a ground burst—again, there’s less stuff in the way.  The amount of fallout depends on the “cleanliness” of the warhead, but for an air burst it can actually be expected to be less than a groundburst.

People also claim that radiological energy (X-rays, neutron radiation, gamma radiation, etc.) will be the deadliest factor of all.  Actually, it’s just the opposite, unless you’re discussing something like a neutron bomb.  The amount of harmful direct-effect radiation that comes directly from the explosion is far, far smaller than the thermal energy.  And yes, I know thermal radiation is direct-effect, but there’s a large practical difference between heat and other forms of radiation.

Put another way, if you’re close enough to an exploding nuclear warhead that the amount of radiation emitted by the explosion would ordinarily kill you, the odds are overwhelmingly high that the amount of shock wave and thermal energy arriving at your position will ensure that there won’t be time for you to worry about the radiation effects.  Or anything else, really.

Remember: I’m talking there about direct radiation, not the EMP or fallout.  That’s a whole separate problem, and one HYDEsim doesn’t address, to the apparent disgust of another Farker:

The site is useless without fallout and thermal damage.

Well, I don’t know about useless, but it’s admittedly not as representative of the totality of nuclear-weapons damage as it might otherwise be.  Of course, HYDEsim is not specifically about nuclear detonations, as I showed when I mapped the Hertfordshire oil refinery explosion and djsunkid mapped the Halifax explosion of 1917.  But I certainly admit that the vast majority of explosions in the range the tool covers are going to be from nuclear weapons.

The problem with mapping fallout is that it’s kind of weather dependent, just for starters; just a few miles-per-hour difference in wind speed can drastically alter the fallout pattern, and the position of the jet stream plays a role too.  Also, the amount of fallout is dependent on the kind of detonation—anyone who was paying attention during the Cold War will remember the difference between “dirty” and “clean” nuclear warheads.  (For those of you who came late: to get a “dirty” warhead, you configure a device to reduce the explosive power but generate a lot more fallout.)

Thermal effects are something I should add, but it’s trickier than you might expect.  There’s actually an area around the explosion where there are no fires, because the shock effects snuff them out.  Beyond that, there’s a ring of fire (cue Johnny Cash).  So it’s not nearly as simple as charting overpressure, which is itself not totally simple.

And then there’s there whole “how to combine thermal-effect and overpressure rings in a way that doesn’t become totally confusing” problem.  Get ambitious, and then you have the “plus the show fallout plume without making everything a total muddle” follow-on problem.  Ah well, life’s empty without a challenge, right?

Okay, so I went through all that and didn’t actually get to my point, which is this:  I’ve been rather fascinated to see how the tool gets used.  When it was first published, there was a very high percentage of the audience who just went, “Cooool!”.  That’s still the case.  It’s the same thing that draws eyes to a traffic accident; it’s horrible, but we still want to see.

However, I also got some pushback from conservative types:  how dare I publish such a thing, when it could only be useful to terrorists?!?!?  Rather than play to the audience and inform them that I simply hate freedom, I mentioned that it was desirable to have people like you and me better understand the threats we face.  It’s not like the terrorists can’t figure this stuff out anyway.

Now I’ve seen a bunch of people from the same ideological camp use HYDEsim to mock the North Koreans’ test, which apparently misfired and only achieved a yield of about 0.5KT.  Others have taken that figure and plotted it in American cities, giving some scale to the dimension of this particular threat.  Still others have done that, but with the yield the North Koreans had attempted to reach (thought to be 4KT), or even with yields up to 50KT.  In most cases, these last are shown in conjunction with commentary to the effect of “now do you understand why this is a problem?”.

This is why I do what I do, whether it’s write books or publish articles or speak at conferences or build tools or just post entries here:  to help people learn more about their world, and to help them share what they know and think and believe with others.  Sometimes that’s worth saying again, if only to remind myself.

Gatekeeper 1.5 rc5

It only took most of a year for this to happen, but WP-Gatekeeper 1.5 RC5 is now available.  The only change is that it will now auto-add the challenge to any standard WordPress 1.5 install from the moment you activate the plugin.  Before now, this auto-insertion wasn’t working on any WordPress install that had gzipping turned on, as many do.  A heap of thanks to Jeremy Dunck, who first identified the problem; and Andy Skelton, who showed me how to solve it.

For those who joined the party in the long silence since RC4, Gatekeeper is a WordPress plugin that lets you manage a series of challenge/response pairs.  The default challenge is “What color is an orange?” (correct response: “orange”), though you should definitely disable that one and add your own.  This helps stymie spambots, though of course it is easily defeated by a manual spammer—and they do exist—and it can do nothing to stop trackback spam.  I actually stopped using Gatekeeper on meyerweb when I installed Akismet, which may be good enough for most people.  For those who can’t or won’t run Akismet, though, Gatekeeper is a decent alternative.

Gatekeeper is technically a CAPTCHA, but it is a fully accessible CAPTCHA, as it uses no images.  It’s also highly configurable, allowing you to add as many challenges as you like and then rotating between them randomly.  I know of a few sites that are quite happy with Gatekeeper, and recently caught wind of a Django implementation of the same concept.

So it’s there and ready for use by those who are interested.  If I haven’t heard about any bugs within the next month or so, I’ll strip off the RC designation and go with 1.5 final.  And about time, too.

Note to WordPress 2.0.x users: I have no idea if WP-Gatekeeper 1.5 will work in WP2.  It may.  Then again, it may not.  I’d be interested to know either way.

S5 1.2a2

The alpha 2 release of S5 1.2 is now available (177KB ZIP file; also available for previewing in the testbed).  There isn’t any major change here, but I did add some notable enhancements to the notes window.  These are:

  • On any slide with incrementals, an indicator of incremental progress will appear in square brackets next to the overall slide show progress on the title line.  It’s a little crude, I admit, but it serves the purpose well enough.
  • Clicking on the title of either the Elapsed Time or Remaining Time counters will “minimize” them.  Click a minimized title to maximize the box.  The actual minimum and maximum effects are purely CSS-driven, hooked onto a collapsed class name.  I’m still pondering the best way to handle this feature, so the class name may change, as for that matter may the mechanism by which one can min/max the boxes.  Suggestions are welcome.
  • Keypresses and clicks are passed from the note window back to the slide show.  In other words, the slide show fully is fully operable from either the slide show window or the notes window.  The only difference is that the notes window doesn’t have the navigation links and popup navigation menu (said difference to disappear in a future release).

That’s it.  In the process, though, I uncovered a bug that shows up in Safari 1.3.1 and 2.0, where it’s ignoring the show-first feature for incrementals.  I’m going to assume that the problem lies in the getIncrementals() function, though of course I could be wrong.  If anyone can spot the error and provide a fix, I’d be grateful.

Update 2 Mar 06: in addition to the Safari problem, I’ve discovered that IE/Win doesn’t seem to share event information between windows.  Thus, if you try to run the slide show from the notes window, errors get thrown.  I managed to fix this in clicker() by adding a test for notes-window events, but trap() has a very different structure and I’m not sure how to fix it.  Thus the testbed in IE/Win currently lets you advance the slide show from the notes window by clicking the mouse button, but keyboard navigation throws an error.  If anyone can tell me how to get around this, even with a pointer to a good article on passing events from one window to another, I’d be very grateful.

Opera and S5 1.2a1

Just as a quick update, I’ve done some testing of S5 1.2a1 in the latest version of Opera I have available (which, under OS X, is version 8.51).  I’m happy to report that this copy of Opera has all of the S5 features supported in other browsers.  Incremental display, font scaling, keyboard navigation, and even the notes window are all present and account for.

To use the notes feature, here’s what I do.  Upon loading the base slideshow into Opera, I position the window on my secondary monitor, which is here taking the role of an LCD projector.  Then I hit “n”, causing the notes window to appear on my laptop’s monitor (in the role of the presenter’s machine).  After bringing the slide show window back to the fore, I select “Full Screen” in the “View” menu, and the presentation maximizes itself to the secondary monitor.  As I navigate through the slide show, the notes window stays perfectly synched with the presentation.

There may be better ways to get the notes window on the primary monitor and the presentation on the secondary monitor, but that one worked for me.

I did notice some odd bugs here and there in Opera 8.02, a copy of which I also have hanging around, but nothing that was a show-stopper.  The one that sticks out in my mind was that multi-slide jumping wasn’t cleared out after the jump.  For example, from the first slide I’d type “3 (right arrow)” to skip to slide four.  Hitting the right arrow again jumped me to slide 7, which is wrong.  Opera 8.5 acted as intended, so I’m going to assume that it has something to do with how the JavaScript is written.

If there are problems in Opera 8.5 or Opera 9 that my testing didn’t uncover, let me know.  I’ll fix anything I can—and if there’s anything I can’t, I’ll turn it over to the Opera community to figure out.  Members of that community have already been invaluable in figuring out how to work around bugs in Opera’s CSS handling in order to make the controls available, so I’m confident they’ll be able to handle anything I can’t figure  out.

S5 1.2a1

It’s back: S5 1.2 alpha 1 is now available (177 KB Zip archive), and you can play with either the OSF or XOXO versions of the latest development version if you just want to preview it online.  In addition, I’ve set up a contact address specifically for S5 questions and feedback.  You can find a link to this new address on the main S5 page.

New to S5 1.2:

  • The progress indicator (e.g., 6/10) is now a permalink to the currently-displayed slide.  This will require an update to any S5 1.1-era themes, but it’s a minimal thing.  Granted, the current alpha doesn’t have updated styles to handle the presence of a link.  I’ll get to it.

  • Bug fixes intended to make it more Konqueror-friendly.  I do not know if Konqueror will run S5 1.2.  I do not have access to Konqueror.  The fixes I included were sent to me by helpful S5 users, and may or may not have resolved all problems.  If there are still bugs in S5 when displayed in Konqueror, you are invited to submit bug fixes in the comments, or via the contact address I mentioned before.  Bug reports should be done in the comments, where other Konqueror users can see them, and not via the contact address.

  • Vastly improved integration with Opera.  As chronicled in “Opera and S5 1.1“, S5 was originally intended to be a cross-browser emulation of OperaShow.  As time went on and features were added, the two diverged.  Thanks to efforts by Hallvord Steen, Opera should now be shut out of a lot less of S5 than it was.  In fact, it may well be feature-complete as compared to S5 1.1, and will get most of S5 1.2’s features.  With one possible exception…

  • A “notes” window capability.  The notes view is largely the work of Shaun Inman, who wrote me last week to say, “Hey, I did this.  Interested?”  Was I ever!  I’d been meaning to do it ever since I saw the notes view in Keynote, but Shaun got there first, clever wolf that he is.

    To see this in action, in either the OSF or XOXO versions, hit “n”, or call up the controls and click on the three-line icon on the left.  A new “notes” window will open, looking very much like the “notes” view in Keynote.  This window displays whatever notes the author has created for the current and next slides; these are done by placing content in an element with a class of notes, pretty much exactly like the handout feature from earlier versions of S5.  The notes window also includes timers showing the time elapsed since the presentation was opened and the time elapsed since the current slide was loaded.  There’s also a pauseable countdown timer for those who prefer to keep track of time that way.  (I added the countdown timer.  Yay me!)

    The general idea is that you load up your presentation, open the notes window, and put the presentation up on the projector while keep the notes window on your presentation machine.  (Which is of course only possible if you turn off video mirroring.)  As you move through the slide show, you can see notes to yourself and keep track of time so you don’t run over.  Keen.  I don’t know how much I personally will use the notes, but I’m all over the timers like they were a stack of pancakes and I were Mrs. Butterworth.

    At the moment, the JavaScript that opens the notes window is minimal, so the notes window is fairly chromeless and not resizeable in IE/Win.  It’s also a bit rough in terms of some of its layout, as befits the alpha status.  I’m also considering adding a keyboard command for “fullscreen”, which would maximize all open S5 windows to fill the screen they’re currently occupying, and possibly also strip away the browser chrome.  I did a few experiments along those lines, but wasn’t satisfied with the results, so it didn’t get into this release.

    On a related note, I’m not sure that notes can be made to use with Opera so long as S5 relies on OperaShow, because OperaShow by its very nature makes all browser windows fullscreen.  If there’s a way to get OperaShow to put one window on one monitor, and a second on a second monitor, then that would be the answer.  If not, I’m not sure what to do short of abandoning OperaShow usage entirely, which seems strange and wrong.  But we’ll see.  If nothing else, we can verify that everything in S5 besides the notes feature works in Opera, and push those changes into an S5 1.1.1 release.

One known problem is that when Firefox displays an S5 show using the text/xml or text/xhtml+xml MIME types, which is necessary for slide shows that incorporate things like MathML and SVG, things break because innerHTML ceases to be supported.  I have a proposed fix submitted by an S5 user, but did not get it into 1.2a1.  I plan to correct this before reaching the first beta release.

A number of people have asked for a merging of effects libraries like and FACE, and there have even been scattered implementations of same.  It’s definitely tempting.  I’m not at all confident that this will happen for 1.2, though, mostly because I don’t understand enough programming to make the connections.  I’m also not sure how many of these I could pile into the code before the whole thing came crashing down.  I have hopes that we’ll be able to work out a “best practices” way to add such capabilities to any S5 presentation file, and let each author add them or not as they see fit.

So there you go.  Have at it!

Japanese Color Blending

What is it about the Japanese that they loooove to blend colors?

Lest you think I’m indulging in some sort of bizarre racial stereotyping, I submit for your consideration the Technorati search results for blogs and other sites pointing to my Color Blender.  The Blender been moderately popular ever since its release, but so far as I can tell, the Asian market is just eating it up.  If I see a new Japanese site appear in my egorati feed, the odds are 49 out of 50 that it’ll be linking to the Blender.

So what’s the deal there?  Anyone have insights, specuation, or even translations that might shed some light on this little enigma?

(Note: it turns out that these are Chinese blogs using Japanese fonts, and not Japanese sites as I originally thought.  I’m leaving the original entry intact rather than update it.  Still, this means that the essence of the original question remains, even if the geography was off by a bit.)

November 2015