TinyMCE and the non-breaking space problem

Let’s get right to it then: TinyMCE is great, but I am annoyed by its willingness to take users’ multiple spaces literally! Collapsing multiple spaces is a basic characteristic of HTML, and allowing users to carelessly (or intentionally, which they still shouldn’t do) insert multiple spaces by converting every other one of those spaces into the   (non-breaking space) character is BAD!

IMHO.

Anyway… start with a pinch of Stack Overflow, add a dash of the official TinyMCE documentation, along with a heaping tablespoon of reading between the lines, and I have a working solution to the problem. My installation of TinyMCE now automatically converts any   characters in the text back into regular ol’ spaces.

It’s a bit draconian; after all there are legitimate uses for non-breaking spaces. But 95% of the times they’re inserted by TinyMCE are user accidents, and another 4.9% of those times are abuses like faked “tabs” that would be solved better by another approach altogether. (There are reasonable CSS-based solutions that work in some cases, but let’s talk HTML’s need for tabs another time.)

Anyway… here’s the gist of the solution. You need to create a callback function. Here’s mine:

function my_cleanup_callback(type,value) {
  switch (type) {
    case 'get_from_editor':
      // Remove   characters
      value = value.replace(/ /ig, ' ');
      break;
    case 'insert_to_editor':
    case 'submit_content':
    case 'get_from_editor_dom':
    case 'insert_to_editor_dom':
    case 'setup_content_dom':
    case 'submit_content_dom':
    default:
      break;
  }
  return value;
}

It may look like there’s a lot of extra stuff in here you don’t need; I included all possible values for type inside the switch to be prepared for the future. You do want to check for type == 'get_from_editor' though; otherwise your replace() is going to run under way too many conditions and may cause weird behavior like new paragraphs appearing when you just want to insert new text into an existing one, or browser-generated warnings about leaving the page when you try to save. (I ran into both as I was fine-tuning this.)

Now that you have your callback function, you just need to… you know… call it. That’s done inside tinyMCE.init(). You’ll need to include this line somewhere:

cleanup_callback: 'my_cleanup_callback',

Be sure to check if cleanup_callback is already declared somewhere, and also don’t forget the comma at the end, unless you’re inserting this as the last line.

Once you’ve got it all rolled out to your site, you’ll need to clear your cache. I’ve found TinyMCE’s configuration files can be annoyingly persistent in the browser cache.

Yes… you have correctly observed that I had to use non-breaking spaces myself in this post, to get the indents in the code samples to show. Pay no attention to the man behind the curtain. And remember my complaint about the lack of tab characters in HTML. Another day.

The uncomfortable marriage of the UNIX command line and Mac GUI, and its implications for my sudoers file

I’m a longtime Mac user. A “power user,” you might say. Not so much a power UNIX user, though I do a fair bit of Linux-based command line tomfoolery as part of my job.

But things get ugly when the two come together. At the command line I am a bit too inclined to treat my Mac like a Linux server. It may have UNIX at its core, but it’s not Linux. And Apple has put some effort into de-UNIX-ing it as well. Things you expect to work don’t work the way you expect them to. (Yes, I just wrote that sentence. See what this is doing to my brain???)

For reasons I don’t care to get into, I decided today that I needed to modify the sudoers file on the studio’s Mac mini file server. And in my own inimitable and slightly stupid way, I handled this task as I typically do anything involving changing buried system files, not by struggling through using a command line text editor, but by copying the file to my desktop (where it is magically released from the prison of UNIX file permissions in which Apple has… uh… imprisoned hidden UNIX system files). I edited the file and put it back in the /etc folder where it belongs.

Only problem: in the process, the file’s ownership and permissions got changed. No problem, I thought. I’ll just sudo that sucker. Only problem is, when the permissions on the sudoers file aren’t what the system expects them to be, it doesn’t let anybody sudo anything.

Well… crap.

But then I remembered… Mac GUI solutions to the rescue! I opened up Disk Utility and ran “Repair Disk Permissions.” Problem solved! Apple has saved me from myself.

Now I can go back to my delusion that I am a power user.

Did Adobe actually mock up these Mac OS X screenshots on Windows? (Yes… I’m pretty sure they did.)

So, for reasons I’d rather not get into, I had to break down and install Flash Player in Safari today. (OK, I’ll get into it briefly… due to a rather obscure bug, Chrome — my preferred browser — has been crashing repeatedly on me whenever I try to upload a file. Long-term solutions aside, I had an immediate need for a way to use a Flash-based file uploader, so I had to install Flash in Safari.)

On the final page of the Flash Player download process on Adobe’s website, they offer a series of helpful screenshots to guide the most novice of Mac users through the process of locating and running the installer. Only… no, wait. Those can’t be real Mac OS X screenshots. The fonts are all wrong! So is the anti-aliasing, if you want to get really geeky about it. They’re mostly Arial, with the trademark overly-hinted anti-aliasing of Windows. Strangely though, it looks like the text label under the disk icon in the first screenshot is in Helvetica.

The real telltale sign for me though was the white mouse pointer arrow. Mac OS X has a black arrow. (The Mac has always had a black arrow, and Windows has always had a white one… presumably one of Microsoft’s infringement-suit-skirting superficial changes to the GUI in the early days of the Mac/Windows rivalry.)

I have come to expect subpar user experiences from Adobe, a company whose products I once loved so dearly. But this really takes the cake. I can’t even quite comprehend how screenshots like these were produced. It’s impossible to get results like this on a real Mac. Do they have some weird proprietary in-house Mac emulator that runs on Windows? (Actually, that might explain a lot.) Did they actually meticulously create these “screenshots” in (the Windows version of) Photoshop? Or do they have a Windows application specifically designed to generate fake Mac screenshots for all of their documentation? I’m at a loss to explain it, but there’s no way it wasn’t significantly more work than simply, you know, taking screenshots on a real Mac.

See for yourself… (Note: The image is slightly scaled down here to fit the page. Click it to view at full size.)

adobe_screenshots

SPF for dummies (i.e. me)

For a while I’ve known that (legitimate) outgoing email messages originating from my web server were occasionally not reaching their intended recipients. I also knew that there was a DNS change you could make to help prevent this problem, but I didn’t know any more about it and it was a marginal enough problem that I could just put it off.

Finally today I decided to deal with it. And I was (re)introduced to the SPF acronym. No, that’s not Sun Protection Factor, or Spray Polyurethane Foam, or even Single Point of Failure (although in my case perhaps that last one is accurate). No, it stands for Security Policy Framework, and it’s an add-on to the core capabilities of DNS that provides a way to positively identify the originating servers of outgoing email messages.

My situation is simple: I have a domain name that needs to be able to send mail from either my mail server or my web server. Most of the tutorials I found for SPF were far too convoluted to address this simple arrangement. Then I found this post by Cyril Mazur which provided the very simple answer:

v=spf1 a mx ~all

Simply add the above as a new TXT record in your DNS zone file, and you should be set.

Defense Against the Dark Arts (of iMessage Configuration)

Ever since upgrading to iOS 6, I’ve had a problem. The glorious promise of iMessage with its seamless integration of SMS/MMS and Apple’s messaging services between iPad, iPhone and Mac has mostly worked, with one infuriating, deal-breaking exception.

Texts to my phone number go to my iPad and not to my iPhone.

Look, all of this integrated messaging is cool. Being able to have text messages show up not only on my phone but on my other devices is awesome. But they have to at least show up on my phone or the whole thing is a failure.

I’ve researched the problem and found some people with somewhat similar issues, lots of stuff involving jailbroken iPhones (which mine is not), etc. but no clear answers to my exact problem. Several people in forums suggested shutting off iMessage on the various devices, deleting accounts, full-blown factory restore, you name it. All of which were either things I tried and found didn’t work, or wasn’t willing to try due to the amount of time and tedious work involved.

iMessage SettingsSo I began experimenting. There was one distinct problem I could see in settings. On both iOS devices and my Mac, the Messages app was showing both my phone number and email address. But in some cases one was grayed out. Infuriatingly, on my iPad and Mac, the phone number was grayed out and checked, and on the iPhone the phone number was grayed out and not checked. I could easily add or remove the connection of my email address to any of the devices, but my phone number was stubbornly locked into my iPad only. (Or, well, my iPad and my Mac… I guess. Honestly I hardly ever use Messages on my Mac so I haven’t really paid attention.)

I wish I could give a clear account of what came next, but I started tapping various buttons and clicking various boxes with such a fury that it all became a blur. What I do remember is that I clicked the checkbox next to my email on my Mac, which un-grayed the phone number. I was then able to uncheck the phone number, and the email now became grayed out.

So, if I understand correctly, the way iMessage settings work, at least one receiving phone number/email address must be checked at all times, so if only one is checked, it’s also grayed out so you can’t uncheck it. Then, if you check the other one, you may be able to uncheck the first.

That wasn’t working on my iPhone, however. Strangely though (at least as I recall from the aforementioned blur), when I repeated the process from my Mac on my iPad, then took a look at my phone, it was already switched to having the phone number checked and grayed out.

So then I began running some tests. This is where things get muddy, and since all of this just happened a few minutes ago, I still may not have a complete solution. I tried sending a text to my phone number from SLP’s iPhone. Never got it. Then I tried sending a text to my phone number from my iPad and it went to my phone within seconds. Cool. Then I tried sending a text to my email address from SLP’s iPhone, and it immediately showed up on all three of my devices.

Everything then is working as expected except that I did not get the text from SLP’s iPhone to my phone number at all, on any device. It’s hard to say what that’s all about. Are things working now? I don’t know.

Here’s another weird thing to throw into the mix. SLP and I share an iTunes Store account, but we have separate iCloud accounts. I also have a separate iCloud account apart from the iTunes Store account. The iTunes Store account uses my “real” email address, and I have a separate me.com email address I use on iCloud. So that’s all kind of a big mess, yes I know. Anyway, whenever I made these various changes to my configurations, the iOS devices would pop up alerts regarding the change. These alerts also appeared on SLP’s iPhone, even though her Messages settings don’t have any of my account info associated with them.

The bottom line here, for me, is that Apple really has not dealt with the reality of multiple users on the same device, multiple family members sharing an iTunes Store account but needing their own iCloud accounts, etc. They may be trying to deal with it all, but they’re trying to integrate too many things that had developed for too long as independent products. And they’re not having as much success at it as they think they are.

This post began as many others here do, as an attempt to share my solution to an Apple conundrum. Unfortunately in this case I just can’t quite make sense of what’s happening, and it seems to be one of those dark-clouds-on-the-horizon portents of more trouble to come with Apple’s tendency for its ambitions to exceed its capabilities in the realm of networked services.

I just want it to work. Isn’t that the Apple promise?

Follow up: Just after posting this I had our neighbor — who also has an iPhone but of course does not share our iTunes/iCloud accounts — send a text to my phone number, and I got it. So the problem seems mostly resolved. But let’s leave it at this: if you share your iTunes Store account with another family member and you both have iPhones, you might need to send your text to each other’s email addresses instead of phone numbers, if you’re running into the same problems I’ve been having.

Introducing my new album… a ROCK OPERA no less… 8-Bit Time Machine!

Anyone who’s following me on the social medias knows I’ve been working for the past couple of months on what is probably my most absurdly ambitious solo music project to date: a rock opera with a retro-geeky theme.

The album is finished. I’m still working on perfecting the masters before I release it for download and get CDs pressed, but you can now immerse yourself in the full 8-Bit Time Machine experience over on the new website I’ve set up for the album:

8bittimemachine.com

The website features a page for each of the album’s 11 tracks, where you can listen to the track while reading the lyrics and notes about the story. (Note: As the audio is in MP3 format, it will work in Firefox. Any other modern browser that supports HTML5 audio will play the tracks automatically.)

Stay tuned for more information about a final release date!

8-Bit Time Machine

P.S. Yes, there is a track (a rather musical one at that) consisting of nothing but sounds from Atari 2600 games.

P.P.S. Yes, there is also one track with full-on autotuned vocals. How do I rationalize this use of one of my most despised audio technologies? You’ll just have to listen to figure it out.

CSS snag of the day: images in tables with max-width set, not displaying properly in Firefox

When did Firefox become such a steaming pile?

OK, that’s not how I intended to start this. Just kinda had to get it out there. Anyway, a client brought an unusual bug with their website to my attention today.

Since embracing responsive web design last year, I’ve become quite fond of using this little bit of code to make images resize dynamically to fit their containers:

img {
  height: auto;
  max-width: 100%;
  width: auto;
}

Most of the time this little bit of CSS works magic. But in this particular case, it did not. The client has put together a table on a page to present a set of photos of board members. In most browsers, the table looks great and is fluidly scaling down the images. But in Firefox, we found it was clumsily overflowing its borders, rendering the images at their full sizes.

After working my way through a few surprisingly unhelpful posts on Stack Overflow, I found my way to this, which seemed to hold an only-too-simple answer:

table {
  table-layout: fixed;
}

I don’t know about you, but I never use table-layout. I’ve come to realize there’s a whole realm of CSS that I just basically never touch, because it’s (usually) completely unnecessary to the way I build pages. But every once in a while, these things come in handy. Turns out, table-layout: fixed was exactly what I needed to — BOOM! — fix the problem with the too-large table images in Firefox.

And, suddenly, CSS was magic again.

What do Made-in-USA iMacs, fracking in North Dakota, and right-to-work in Michigan have in common?

Yesterday I blogged about the huge glowing area in North Dakota that is experiencing a shale oil boom thanks to hydraulic fracturing (fracking). This morning I tweeted about new legislation passed to make Michigan a right-to-work state. And for the past few days I’ve been reading enthusiastic news that Apple is resuming manufacturing in the United States.

What do these things all have in common? Well… the always insightful Jason Kottke has the answer.

We’re witnessing an interesting cycle in the US economy right now. Changes in China in recent years have presented new challenges to its burgeoning manufacturing base; meanwhile here in the US the combination of Great Recession-related unemployment, the GOP’s 30-year experiment in rolling back labor rights, and (as Kottke notes) the artificially low price of natural gas here due to the fracking boom, have suddenly made the United States a much more desirable place for manufacturing. But will it last, and at what cost?

Quick Mac Tip: Fix missing background on second display

At work, I plug my 11-inch MacBook Air into a 23-inch LCD, which I use as my primary screen, with the Mac’s display as a secondary screen. Frequently, due to some combination of not closing it then unplugging the Mini DisplayPort plug in the proper order, or… something… I will find that when I open up my computer the next day, my desktop background (a.k.a. “wallpaper” for recent Windows switchers) on the MacBook Air is gone, replaced with a far-too-bright light gray generic background. Yuck!

Previously I had resorted to logging out and back in, or even rebooting, to fix this problem, but yesterday I searched and found an answer. It’s really simple! But it does require opening Terminal.

Go into Applications > Utilities and open Terminal. Then at the command prompt, type this (and, of course, hit Return):

killall Dock

That’s it! The Dock will quit and automatically restart, and the desktop will be restored!

On products, services, and the trouble with Twitter

Much of the buzz this week among online geek types has been the latest step in the gradually unfolding revelation of exactly where Twitter (the business) intends to take Twitter (the service), and just how stark the difference is between that place and where these same geeks — who have been largely responsible for the establishment of Twitter as a successful platform — would like to see it go.

The latter place can most easily be summed up as, “where it started out,” but the details of where it started out, and how far it is from where the company now wants to take it, reveal a lot about the nature of the Internet as a place for commercial business, vs. the way most users see it, as a medium for communication.

Most people who use the Internet have little knowledge of, or interest in, how it actually works. Even those of us who make our living building it don’t always have a firm grasp of the technologies that make it all possible. But understanding those details, and understanding the differences between a service and a product, for lack of a more effective yet equally succinct description, can shed light on the current trouble with Twitter.

The crux of geek anger towards Twitter of late has to do with Twitter’s ongoing efforts to shut down a number of its APIs that allow third-party apps like Tweetbot (my personal favorite iPhone Twitter client) to interact with data from Twitter’s servers. Without these APIs, these third-party apps can’t function. The specifics of the situation are a lot more complicated than this, but I’ll leave the reader to investigate further; Dalton Caldwell’s post from yesterday, Twitter is pivoting, is a great place to start.

All of this may seem supremely geeky and esoteric to most Twitter users, though I suspect anyone who’s been using the Internet for more than two years would take pause at the fact that Peter Chernin, who was deeply involved in the downfall of MySpace, has just joined Twitter’s board of directors. (Especially since he chose to tweet it in a way that reveals a profound lack of understanding of how Twitter works.)

Which brings me to the topic of products and services. As I am using the terms here, a “service” is what we on the geek side of the Internet refer to as a protocol. On the Internet, a protocol is a technology, built upon a publicly documented specification, which allows particular types of interactions between devices over the Internet. A protocol is inherently public, open, and decentralized. That’s the only way they can work. Each protocol tends to have a strange acronym associated with it, some of which the creakier, older parts of the Internet may have failed to shield you from: things like HTTP (the web) or IMAP (email). All of these protocols are built upon a more fundamental, lower-level protocol: TCP/IP.

Protocols are what make the Internet work. And they’ve existed since well before anyone saw (or at least fully exploited) the Internet’s potential for profit. Protocols as services are so ubiquitous and inherent to the experience of using the Internet, we don’t even realize they exist, or what they are, or how exactly they work. And we tend to assume that anything we interact with on the Internet is kind of all the same. We might have a vague sense that something like Facebook or Twitter is a commercial enterprise, but even the geekiest among us who actively use these services products don’t often think about just how different they are at the core than things like email.

In contrast to these protocols/services, we have commercial products like Facebook or Twitter. These are not protocols. While we are all by now painfully aware of how open and public the information we share on them can be, there is nothing whatsoever that is “open” or “public” about how they actually work, and their functionality is entirely centralized within the competitive, secretive, for-profit businesses that own them.

Facebook has taken a lot of flak in recent years for its aggressive commercialization of the user experience. The information you share is not only overly public, it is parsed by their ingenious algorithms to allow them to put highly-targeted advertising in front of your eyeballs. (At least, that’s the theory; in practice it doesn’t always work so well.) As the saying goes, if you’re not paying for it, you’re not the customer… you’re the product being sold.

While it’s been easy to see how Facebook is monetizing our online interactions, the gradual creep of Twitter’s monetization has been quieter, and more insidious. It’s been easy enough to ignore promoted tweets and trending topics, and they’ve even backpedaled on occasion in response to negative user reaction. (Remember the Dickbar?) But eventually, true to the cliché, there’s a straw that breaks the camel’s back. And the latest API deprecations may represent that last straw.

You see, you can only change a product so much before eventually it ceases to resemble in any meaningful way the thing that it once was, the thing that appealed to its users in the first place. And for Twitter, the business, it is entirely their prerogative to make those changes, to “pivot,” into something completely different. But in so doing, they reveal the true nature of their product, and the fact that it was never really the service its loyal users took it to be.

Ayn Rand’s (in)famous novel Atlas Shrugged ends with capitalist Übermensch John Galt tracing the sign of the dollar with his finger. But when the dollar sign becomes the ultimate symbol of human achievement, money is the only thing in life that has value. This may be a rather heavy-handed reference (she is the most heavy-handed writer of the 20th century, after all), but profit as the primary motive of a business can easily corrupt or destroy any other values the company has.

Twitter seems to be following the standard arc of a startup, especially in the Internet age: a group of inspired geeks build something cool, it becomes a hit, venture capital comes pouring in, the founders sell out and “management” moves in, the focus of the company shifts from building something cool into turning that cool thing into a way to make money, the thing ceases to be cool (or even very useful), people move on to the next big thing, the company dies a slow death.

We’ve seen it plenty of times before (again, MySpace), but with Twitter something seems different. Twitter has become a deeply ingrained part of the Internet experience for its loyal users in a way that no other product from a for-profit business has before. It’s as essential to how many of us experience the Internet on a daily basis as email or the web itself. But while it’s just as essential, its essence is entirely different. And now the foolishness of investing so heavily and personally — in time and passion, not money — in this kind of product is becoming painfully obvious.

So, what are our alternatives? This summer, Adam Curry (yes, that Adam Curry) wrote about the value of RSS as a Twitter alternative. I think for one way Twitter is used (as a means of disseminating links to interesting news/blog posts), RSS is great, and I am a die-hard RSS user along with Twitter. But RSS can’t replace Twitter’s role as a microblogging platform.

Enter Dalton Caldwell’s (remember him?) App.net. What is App.net? It’s basically an effort to do Twitter right. For a small annual subscription fee, you get access to an ad-free social network that functions almost identically to Twitter. (The main distinction: each post is limited to 256 characters, rather than 140. Those of us who do a lot of work with databases are probably thrilled with the implications of that particular number.) Many of the geeks who were early Twitter adopters are now prominent members of the App.net community. Many of the developers of third-party Twitter clients have gotten on board with App.net sibling apps (like Netbot).

Personally, I was one of those App.net early adopters (member #5,644). But I will admit I’ve found it hard to break my old habits of working mainly with Twitter. Partly that’s because I’ve relied on Twitter’s functionality as the glue between my various social networks. I can post photos on Instagram and, via my existing Twitter-to-Facebook link, easily share my photos to both social networks with a tap. I used to have LinkedIn in the mix too, before I more-or-less abandoned it. The point is, up to now Twitter has been a geek’s paradise of a social network, with a wealth of APIs that could be used in innovative ways to do all sorts of cool things.

But Twitter doesn’t want us to do all sorts of cool things. They want us to do the things that put our eyeballs on their sponsors’ messages, because that’s the only way they’ve been able to think of (or willing to try) to make money. I would gladly pay a subscription fee for Twitter, to cut out the ads and retain access to those awesome APIs they’re so aggressively shutting down. But since they’re not interested in taking the business in that direction, a door has been opened for App.net to do all kinds of things Twitter could have done, but, it now appears, never will.