We need a frontend design tool for live web pages

It’s quite frequently that an HTML/CSS designer might want to make changes to a live web page. Maybe she doesn’t have write access, or maybe the fixes needed aren’t worth the start-up cost of copying the page locally and working on it there, or multiple designers want to work up ideas on a given page simultaneously. The “Inspect Element” capabilities of most modern browsers will let you make HTML/CSS changes to a live page, but navigating or refreshing causes those changes to be lost, and they’re hard to keep track of.

Here’s a feature wishlist:

  1. keep track of “Inspect Element” user changes with the ability to save them locally
  2. keep changes in discrete “changesets” that can be re-applied, or saved as a unified patch of the original files, or at least as the modified original files
  3. allow swapping page CSS files with user-controlled CSS files (e.g. file:/// or htttp://localhost/)
  4. allow swapped CSS files to be periodically “refreshed” so the user wouldn’t have to switch between CSS editor and browser.

Firefox’s Stylish extension looks to come close to (3), allowing you to add user styles to a page/site, like Greasemonkey does for Javascript. It doesn’t look like the editing experience is great, though.

You can manually do (3) and use the CSS Reload Every bookmarklet, but it reloads all CSS, which is kinda of jarring.

A bookmarklet could implement (3) and (4) and persist its settings in a cookie.

Other ideas?

Update: Here’s a bookmarklet that let’s you swap CSS files and stores its settings in a cookie for the current page. Next step is for it to allow adding files and controlling the cookie path.

You must enable Javascript! (right-click, add to favorites or bookmarks)

(CSSswap source).

“Buy American”

When economies are struggling, protectionism seems well-intentioned: By “buying American” we can go back that golden fantasy age when everything was American-made and everyone had a decent-paying job and could afford the latest luxuries. I have some examples that I hope can convince you that freer trade benefits everyone. It’s not completely intuitive; we commonly think that one person is always screwed in a deal; if it’s good for [insert foreign country], it must be bad for America. Continue reading  

Email Address Munging Still Mitigates Harvesting

At least a decade into the use of simple email munging on web pages (my own solution here) there’s a growing consensus—and it seems like common sense with the advancement of the web in general—that this surely can’t still work on modern harvesters. While trying to look up some old research I’d read about this, I came across this January 2010 post by a Project Honey Pot admin:

We’ve run tests on different munging techniques and find that they are still surprisingly effective. We have a page that has a set of differently munged addresses. The ones protected by Javascript have yet to receive a single message. Even simple things like using ASCII character encoding to hide the @ sign, or adding spaces to the addresses, is surprisingly effective at stopping harvesting.

Whether to munge or not is kind of a religious war, but I see this as pretty convincing evidence that munging isn’t obsolete just yet. Of course this or any other single prevention strategy isn’t a “solution”, but mitigation of the inevitable is still arguably worthwhile, especially for people without the luxury of having top notch admins run their mail server.

Using jQuery Before It’s Loaded

It’s better to include scripts like jQuery at the end of the BODY, but this makes its methods inaccessible earlier in the page (e.g. inside a WordPress post). What you can do is use a script like the one below to queue DOMReady functions before jQuery loads.

(function (w) {
    if (w.$) // jQuery already loaded, we don't need this script
        return;
    var _funcs = [];
    w.$ = function (f) { // add functions to a queue
        _funcs.push(f);
    };
    w.defer$ = function () { // move the queue to jQuery's DOMReady
        while (f = _funcs.shift())
            $(f);
    };
})(window);

Minified:

Setup

  1. Link to the script in the HEAD or at least before your typical page content area
  2. Link to jQuery at the end of BODY
  3. Below jQuery, include: <script>defer$()</script>

Now in the BODY you can use $(function(){ ... }); to queue up a function as if jQuery were already loaded. And, thanks to the fact that Javascript identifiers are referenced at run-time, you can call any other jQuery functions inside your queued function.

With some modifications you can use this pattern for any library with a similar DOMReady implementation.

Tiny Email Munging Script

I’ve seen a lot of these that are bloated/less effective/inaccessible, so I might as well put this out there. It’s simple enough to modify if you’re comfortable with Javascript.

Markup: <a href="mailto:john{@}example{.}org">john{@}example{.}org</a>

(function(){
  var a, i = 0, o = this.onload;
  onload = function(){
    o && o(); // run the old window.onload if existed
    while (a = document.getElementsByTagName("a").item(i++))
      if (0 == a.href.indexOf("mailto:")) {
        a.href = a.href.replace(/[{}]/g, "");
        a.innerHTML = a.innerHTML.replace(/{(.)}/g, "$1");
      }
  };
})();

Minified 234B:

for jQuery 150B:

Today’s kids have a few things left to tinker with

[Drafts clean out. This one from January]

Mark Pilgrim laments the slow eradication of Apple products to which the owner has full (and gratis) software/hardware access.

Anyone can develop [for the iPad]! All you need is a Mac, XCode, an iPhone “simulator,” and $99 for an auto-expiring developer certificate. The “developer certificate” is really a cryptographic key that (temporarily) allows you (slightly) elevated access to… your own computer.

In the comments he claims, “By 2015, I predict Apple will not sell any devices with root access.” It’s a fun post—reminding me of my days with the CoCo (I had 1 and 3)—but a bit dramatic. Mark and I were pretty privileged and few to have several hundred dollar (in the early ’80s!) computers for us to tinker on; my dad let me drill into and add a motherboard switch to my CoCo 1! My tinkering was more or less limited to BASIC as I never found out about other programming languages really until high school. I mean, I’d heard of EDTASM for assembly editing but I had no idea what that was about, and it was hard enough getting decent documentation for BASIC.

What can today’s kids tinker on? Well, just about everything with a CPU and a port. It’s getting hard to find devices for which you can’t mod/jailbreak or find open firmware for on the web. You can compile and run programs right on the damn web.

I agree with Mark that bad laws and update patches make too much of this kind of tinkering illegal/temporary, but c’mon. Apple will not lead to a future where kids have no computers to experiment on. Yes, few iPad users will tinker, but in the past most kids didn’t have anything to tinker on at all.

Imagining Better E-mail

[Sitting in my drafts folder since August… Why not]

For building a clean and complete “paper trail” within a single message (which is irrefutably valuable in situations), top posting works great. For responding to individual sections, inline reply is great. Combining the two is generally a mess. In both top/inline models the manual management of quoted text in a text editor is pretty terrible. I posit that there’s no satisfactory solution to this multi-decade debate without a better UI than text editors provide. I’d like to see a reply process more like this:

  1. Highlight a selection for quoting. A reply form appears directly below with the cursor ready. (Commenting on a bill in OpenCongress is a bit like this.)
  2. Type the reply
  3. Repeat as necessary

Make the end points of each “quote” easily adjustable, and allow a preview to show you what the recipients would see, to allow you to reorder sections, to adjust header/footer sigs, etc.

A new message format based on git/hg could hold each previously referenced message in the thread, and with it the ability to walk back through the conversation, as well as embed cleanly the contact info of the senders, cryptographic signatures, etc.

The reader could chose to view the latest message in a variety of ways, including the traditional styles of plain text or HTML.

And you can’t fix e-mail without addressing sender authentication.

“Cartels don’t make any money on marijuana”

Opponents to CA’s Prop 19 ran pretty well with the narrative that legalizing cannabis would yield no reduction of the cartel violence in Mexico. After all, they don’t really make their money on pot; it’s all California-grown, they promised. They even were kinda sorta convincing me that might be the case.  Maybe—just somehow—they know that.

As if on schedule, the day after (mostly older) voters rejected the initiative, we find thirty tons of cartel cannabis—probably worth at least $20M—and a massive 600-yard tunnel from Tijuana to San Diego. (and today, more mass graves, of course)

But at least Prop 19 spurred a national conversation about cannabis policy like no other recent event has. Almost 3.4 million Californians voted for it (more than for Meg Whitman). In 2012, when the youth turnout will be more in force, who’s to say.

In the meantime, the proponents need to rewrite the damn thing, addressing all the B.S. non-issues that opponents dramatized. “You won’t be able to fire someone for showing up stoned!” And if you believe that, I have a border tunnel to sell you that’s never been used for cannabis trafficking.

The Hard Road Ahead

I’m starting to believe the only way out of this recession and national deficit is through tough choices that offend the ideologies of every political party:

  • higher taxes for everyone
  • spending cuts, including the military
  • bailouts for state/local safety nets that ease real human suffering, not select industries
  • finding and migrating to foreign aid measures that actually work
  • renegotiating way-above-market public pensions inked during the golden bubble years
  • forcing big banks to cramdown city/county debts that arose due to fraud
  • downsizing the massively expensive and world-leading incarceration industrial complex, perhaps by depoliticizing the CJS
  • reducing barriers to starting up new businesses, especially rent seeking at the local/state level
  • stimulating the wedding industry by ensuring the freedom of everyone to marry

Now who in Congress is up for all that?