We spend 40 hours a year in traffic. Self-driving cars might fix that. Read all about it on my new blog, Robot Car Report.

goldfish
Water? What is that? / Benson Kua/flickr

The 40 hours of collective traffic congestion Americans experience annually also costs the country about $121 billion.

That and other stories can be found on Robot Car Report, a blog covering self-driving vehicles that I launched in June 2015.

I created it because I needed to do something about missing writing and reporting. Composing quirky JavaScript tools for myself and my job will continue to be fun, but there is something deeply satisfying about freezing the runny sauce of raw ideas into a sharp sculpture of words.

The site is young. It’s marching through the find and remix stage as I learn the subject and develop the beat.

(Thank you, Medill, for the excellent training; and thank you, Albuquerque Tribune, for the years you gave me covering the Duke City; and thank you, New York Times, for the crushing pleasure of jamming out articles about who knows what under deadlines so intense they killed my tears before they even had a chance to slip out of my eyes.)

I’ll grow the blog, but that takes a special kind of fertilizer that slips away the more you want it: time.

We don’t get much of that. Just a few hours a day. Seems like even less nowadays, when so many thoroughly enjoyable media tools pull your attention this way and that.

But hundreds of those days pass and you call it a year. You wonder if things are better or worse, but you can’t know because you’re in it, you’re inside the tank and you’re trying to understand water when water is your world.

Still, if a few decades have given me anything, it is this: there is no ruler worth putting your faith in. The size of the increments change according to who’s holding the stick over you (including you). Even if you get a nice collection of large numbers to drop as bullet points after your name, the end is never reached.

So you’re left with the hunt for a ritual. You go ranging for a daily dance that transforms time — no longer something pulling the life out of you, but a foundation for a thing that lives beyond the sliver you call yours.

Your fingers walk across the keyboard. Music starts, and they start to move differently.

Graffy bookmarklet gets to the point of The New York Times article

Update:

Opinion pieces in The New York Times prefer to tuck their main point toward the bottom. I spent many scroll-years traveling to them and reading backwards, from bottom to top.

I’m not sure when this habit developed, but I did it because I want to know what someone is trying to prove before I spend the time jamming a bunch of facts and observations into my head.

Perhaps it reflects a general impatience born of reading online. Perhaps it’s because it makes me feel more mentally active. Don’t know, but now I have a tool I’ve named “Graffy” to instantly reverse the order of the paragraphs in an NYT article, and then display them in a new window.

To use Graffy:

  • Make a bookmark with this text as the URL, found at this link or the following snippet: javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://tumo.s3.amazonaws.com/jscripts/graffy/graffy.js';})();
  • Go to an NYT article, such as “Ending Greece’s Bleeding.” The tool, Graffy, works throughout the site, but makes most sense, to me, working with the Opinion content.
  • Make sure your Web browser allows pop-ups for nytimes.com.
  • Click on the bookmark you created.
  • On the new page that pops up, you can click the “Rereverse” button at the top to flip the order as you like.
  • Note that this will be more fussy on Firefox than Chrome.

Next steps for Graffy:

  • Make it work across more sites. The challenge here is figuring out the best way to identify the actual paragraphs making up the body of the text. All right, on July 11, I started an experiment of making an array to contain different ways sites might label paragraphs and headlines. The JavaScript goes through the array; if a match occurs, it proceeds.
  • Find a way to identify and highglight the paragraph that best represents a conclusion or main argument.
  • Provide a way to randomly arrange all the paragraphs in an article.All done.
  • Make a game testing your arrangement of the paragraphs in the article against the order chosen by the editors.
  • Find a way to pull out a paragraph from an article to a “reading position,” then dismiss it when done; in short, a way to break apart the article paragraph by paragraph. And maybe save the paragraphs, or send them back to main content?

The JavaScript files for this tool are graffy.js and graffyRereverse.js.

Perhaps I should have used Graffy on this article.

Trivialities are the filaments that make the root: Wisdom strand from Stephenson’s ‘Seveneves’

Eye and hair
Everything large starts small. ultrakickgirl/flickr.

The world is ending and Jerome Xavier Harris is wondering about the color of a woman’s hair.

Not just any woman; this woman is president of the United States — at least in Seveneves, a novel from Neal Stephenson about the destruction of the planet and the plan put forth to ensure the survival of the human race.

Dr. Harris, aka “Doob,” has gathered with other eminent scientists and world leaders to broadcast an announcement telling the people of the world that the end is nigh. If you’re on Earth, you’re dead. But here’s a little ray of sunshine: A spacecraft will keep a few of us alive to carry on the human race. Hopefully.

While politicians communicate this doomsday message, Dr. Harris recalls the excessive attention paid to the gray streaks in the American president’s hair. Between pondering the lunar bombardment soon to destroy everything and everyone, he finds himself wondering deeply about the coloration himself, despite his disdain for the sexism and triviality of such an exercise.

It’s there, page 53 of 861, that a slice of wisdom pops free:

“And indeed he felt the requisite shame over the fact that he was paying any attention whatever to the president’s hair, on this of all days. But this was how the mind worked. The mind couldn’t think about the End of the World all the time. It needed the occasional break, a romp through the trivial. Because it was through trivia that the mind was anchored in reality, as the largest oak tree was rooted, ultimately, in a system of rootlets no larger than the silver hairs on the president’s head.”

The art of bearing a burden

Donkey's burden of hay
Hay, donkey.

“Daily Burden, Ethiopia” / Rod Waddington / Creative Commons

Lesson from a set of plastic drawers carried from Target to home

The position, weight and size of your burden will affect how you move and the speed of your movement.

It will create natural limits; at a certain point, you must abandon your burden should you wish to go faster or travel a different path.

There is a gait and speed at which a tranquil mind may accompany your burden.


How to store kale

Best way to store kale
Kale is shy. Give it a shroud.

The darkest of temptations when buying kale is to cut it up in advance and store those loose leaves inside a plastic container. Convenience is yours, but a countdown begins; it won’t be long before those pieces of the plant are soggy, rotten and dark tissues of eager mush.

Put away your knife. Grab a jar. Ensure its emptiness. A big boy glass chalice is needed here, so verify its height and width. Fill it with water. Drop in your bunch of kale so it stands proud, the leaves a crown of artisanal delight. Pluck what you need then protect the rest with a light plastic bag. Return all of it to the fridge. With the precious greens preserved and protected for days, perhaps even weeks, rest easy, Brooklyn denizen. The vegetal foundation of the zeitgeist is safe.

JavaScript CMS tricks: Search user database from anywhere on site

velociraptor
They will eat you if you don’t give them what they want. Credit: Mike/flickr

Let’s say you’re a cowboy, and you have a herd of wild velociraptors that also happen to be registered members of a website you manage. On occasion, you’ve got to edit their user profiles, but you hate going to the user profile landing page, typing in a name, clicking search and waiting.

What you need is a bookmark that, when clicked, asks you for a name and just does the rest.

Now you’ve got one.

Remember it only works if you click on the bookmark while you’re on the site you manage; otherwise a cross-domain security conflict arises.

You’ll need to:

1) Make a bookmark that reads like this: javascript:(function(){document.body.appendChild(document.createElement(‘script’)).src=’http://www.xyz.com/yourJavaScriptFile.js’;})();

2) Make your JS file that gets appended to the page upon clicking the bookmark. That’s JS File 1 in the JS CodePen tab below.

3) Make the JS file that gets appended to the iframe page that gets created.. Yep, JS File 2 below.

Details on how to do all that below:

/* ###

There are two JS files. 

*/

/* ### JS File 1 ### */

// Make a variable that holds a new <iframe> element. 
var ifrm = document.createElement("IFRAME"); 

// Choose the page you want to load into the <iframe>
ifrm.setAttribute("src", "http://www.monkeyseatkoalas.com"); 

// A bit of styling of the iframe. Lay it out as you wish. I choose width of 100% because I want it to operate like a second window.
ifrm.style.width = 100+"%"; 
ifrm.style.height = 600+"px"; 

// Attach the new <iframe> to the body of the page we're on. Caveats: <iframe> and goofing about with it only works when you keep everything in one domain. 
document.body.appendChild(ifrm);

// Now we have an iframe on our document. It has a position of [0]. So let's now do something odd -- let's attach ANOTHER JavaScript file to this new iframe page. Why? Because that makes it easy to manipulate that page  with a fresh JS file. Here you go: 
frames[0].document.body.appendChild(frames[0].document.createElement('script')).src='http://www.bigstoragethingy.com/yourOtherJSTrickeryFile.js';


/* ######

#########
########## JS File 2 ### 

#### */ 

// We don't want to do anything until the whole beast is loaded. Otherwise, we might not be able to access somthing we want, or calculations we do based upon elements in the page might not work. Still, it's your call. You might be able to run this at an earlier stage in the load. 
window.onload = function () {

  // Looky there at that .forms. w00t! Handy! In the brackets, we have the form's ID. If it doesn't have one, go ahead and give it one, and make your life easier. How? Hmm. I think document.forms[numberOfFormElementOnThePage].setAttribute('id', 'mySpecialCupcakeFormCheeseName');
  var getDatForm = document.forms["IDofYourForm"];

  // Well, we need to find and store the box we want to populate with something. So we just use our form, nicely stuck in a variable, and do that super-handy elements[x] to it. In a form, this refers to the <input> tag. So the first <input> tag in your form will be yourForm.elements[0].
  var getDatSearchBox = getDatForm.elements[1];

  // Gettin' all interactivey here. Yep, ask your friendly Web user to provide something he/she wants to find. Stick it in a variable.
  var nameToFind = prompt('Word to hunt for? Name? Ice cream? Doggy?');

  // Update your search box with that text. 
  getDatSearchBox.value=nameToFind;

  // BOOM! Submit your form. 
  document.forms["users_search"].submit();
};

See the Pen JavaScript CMS tricks: Search user database from anywhere on site by tumolillo (@hellotumo) on CodePen.

JavaScript tool to turn a sentence into a hyphenated string of words

Update: Jan. 21, 2015
With some help from Reid Simonton, Hyphenator is working better than ever. And now you can transform headlines into hyphenated url strings by going to hellotumo.com/h/. (It used to be at hellotumo.com/hyphenator/.)

This one comes with a few caveats:
1) Might not be great for browsers other than most advanced ones (I did all testing in latest Google Chrome);
2) On mobile Safari, the character counter doesn’t work;
3) There is a bug if you mess around too much with selecting/deselecting/pasting text into the box area containing the hyphenated headline.

I suspect many of these problems are fixable by using jQuery. I like playing with pure JS as I get to know the language (and get to know programming).

I’ve dropped some notes into the main.js file on what I learned making this better, but here they are for easier access:

# using .focus() to compare to document.activeElement (but I ended up not using it)
* https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.focus

# regular expression help — especially the use of those handy brackets — from Reid
* https://plus.google.com/u/0/101114332268546148921/posts
* his example: http://jsfiddle.net/vsjmm2us/
* more on regex: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

# really cool stuff about attaching events, and trying to call functions with arguments with an event attachment
* 2 elegant ways to do so: http://toddmotto.com/avoiding-anonymous-javascript-functions/
* found it via http://stackoverflow.com/questions/10335343/javascript-attaching-events

# wonderful, simply way, using onkeyup, to make a live counter for number of characters. onkeyup was the trick, I believe. (I was using onkeydown and onkeypress.) Sample uses jQuery but I used straight JavaScript.
* http://jsfiddle.net/hNn5b/
* http://stackoverflow.com/questions/9767521/count-and-display-number-of-characters-in-a-textbox-using-javascript

# contentEditable is fun (but didn’t use it)
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.contentEditable
* but apparently also terrible: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480


Older parts of this post below:
For all of you Web wranglers who need to generate clean, hyphenated versions of headlines, I made a tool using JavaScript that does just that: the Hyphenator.

For example, “Special report: The cow eats grass, barley on the Goddess Moon,” will be turned into special-report-the-cow-eats-grass-barley-on-the-goddess-moon.

I’m still working on refining the .js and improving its ability to accommodate the different ways people might input the original text. I made this to help out when I need to alter a headline and URL in Plone, the CMS I use for my job, as it lacked WordPress’s ability to automatically handle this.

Managing background colors and opacity in IE6, IE7 and more advanced browsers

So you want to make a background color that has a certain opacity, but then, after being astounded that people still use Internet Explorer 6 and 7, you discover that IE6 and IE7 can’t handle opacity. Thus, you must have a nice fallback — some color that kicks in for IE6 and IE7.

Oh, and you’re doing this in a way that uses the cascade — your adding a background color with an additional class further down your stylesheet, because you want to customize the same div different ways when it appears throughout your page.

Something that looks like this in your HTML:

<div class="original tweakedVersion1">Hello, I'm tweaked version 1</div>
<div class="original tweakedVersion2">Hello, I'm tweaked version 2</div>

Using background and background together is what you need. This is the CSS you want:

.original {
font-size: 20px;
width: 100px;
height: 200px;
}

.tweakedVersion1 {
background: rgb(168, 79, 119); /*IE6, IE7 pick up this */
background: rgba(168, 79, 119, .75); /* more advanced browsers grab this */
}

.tweakedVersion2 {
background: rgb(55, 55, 55); /*IE6, IE7 pick up this */
background: rgba(55, 55, 55, .75); /* more advanced browsers grab this. IE6 & 7 are like, 'Whaaaaaaat?' */
}

These do NOT work:

.tweakedFail1 {
background-color: rgb(168, 79, 119); /*IE6 and 7? Nope! */
background-color: rgba(168, 79, 119, .75);
}

.tweakedFail2 {
background: rgb(101, 68, 107); /*IE6 and 7? Nope! Not if background-color is below!*/
background-color: rgba(101, 68, 107, .80);
}

Review: Inbox by Gmail

Inbox by Google
Augh, another tool to learn.

Google gave me an invite to their new Inbox email tool. First impressions and observations (I will update this post throughout the weeks of using Inbox):

Dec. 3, 2014: In the Inbox app (Android), there is an infinite scrolling effect. What happens is as you swipe to the bottom of a message or message pile, the Inbox app then moves you on to the next conversation in your list. I don’t like this in a browser or here; it’s confusing behavior, and lacks precise control. Just clicking “X” to leave the message area makes sense and is highly controllable.

Nov. 28, 2014: How about moving the option to delete a message to the top menu bar? I know Google prefers I archive things so to better analyze my activity, but I prefer to delete them — it gives me a sense of cleanliness and control over my information. Right now, you need to click on the three dots, then select “move to trash.” This happens in both the Android app and browser version. And why not, for Android versions, make “delete” an option right from the notification screen?

Nov. 11, 2014: I’m back at it. The composing experience is very nice in Inbox. Newest wonder: Why is the option to “Trash” something buried in the 3-dot menu? Please move it out.

Nov. 3, 2014: Pretty much stopped using Inbox. My system of managing Gmail is refined and works well. The reminders, pins and snooze tricks weren’t quite powerful enough to keep me hooked. I think the biggest problem occurred in trying to keep two systems in my head regarding managing emails — especially two systems regarding task tracking. I was starting to face the question of, “Wait, did I pin that in Inbox? Snooze it? Do I need to note it somewhere else?” And I wanted my contacts list accessible from Inbox, as it is in Gmail; I jump in and out often enough to not want to open a separate tab to do so.

Nov. 1, 2014: When a snoozed email shows up again at the top of my inbox, it should be labeled or presented in a way that communicates it is a snoozed email returning as a reminder.

Very sluggish on my Nexus 4 running Android 4.4.4.

Only usable on Google Chrome, but other browsers are promised to be on the way. And, surprisingly, occasionally sluggish here (at the url of inbox.google.com), too. I’m still working out where I click to close/open messages. And the 3-dot button (a dropdown menu) in some instances seems to not work, or it only works if you click on the overall heading containing a thread of emails(?).

The pinning (lock a message into a “pinned” position and tab), reminder (add an email or fresh note to a reminders tab) and snooze (archive a message until a later date/time, then bring it back into your inbox mix) tools are extraordinarily awesome. Finally some ways to make email behave more like the task manager it ends up being.

I turned off all the bundling (the app’s name for the “Categories” function of the regular Gmail inbox) after exploring it a few times. I never wanted Gmail to sort my emails into “promotional,” “social” or any other category in regular Gmail, and I still don’t want it to do that. Things get lost, and the grouping introduces a level of complexity to processing everything that gets sucked into it. For example, some messages shouldn’t go into a certain group. But I don’t want to train my email again — I’ve already spent hours making labels and filters that do the sorting for me. Folks who haven’t invested time into labels and filters may be more interested in the bundling feature. I still don’t fully understand the full spectrum of what “bundling” does in the app, and my desire to decode it is pretty limited.

My first instinct was to abandon the app because I had no desire to relearn email. I gave it a second chance, and it’s the Snooze, Reminder and Pinning tools that will keep me interested.

It seems the Inbox team wants us to move away from using labels? I just tried adding a label to an email, and I was unable to just type in the label name and then select it. I had to scroll through my dozens of selections then click on it. Not great. It then asked me if I wanted to “always do” this type of label action. Always do what? Put emails from this sender under that label? Very vague. Grr. Underpowering the labeling process is frustrating. I’ve not encountered a software, including Google’s, that parses things correctly for me.

A bit more comprehension of the “bundling” tool: so you can treat your existing labels as bundles, then have them be the way emails within them get delivered to your inbox. You’re given the choice to act on entire bundles (aka labels) each time a bundle (label) gets updated with a new email categorized into it. Not useful for me; I have hundreds of emails with certain tags, and have no desire to constantly think about acting on all of them when perusing one of them. I just want to be able to see all emails of that label/bundle at various points. And, perhaps idiosynratically, I want to see emails labeled a certain way in my overall inbox — at a glance I can see/find what is most pressing. It’s a way to highlight things (because I use colorful label palettes). You can’t even see how an email is labeled in this new inbox. Google in fact seems to think you want an email OUT of your main inbox feed if you label, and allows you to avoid this only if you pin the labeled email. Whaaaaaaat? Worse: Even if I pin an email, if I label it, it gets archived. Augh, really don’t like that. Labeling/categorzing things is not an act of “archiving” for me, so why am I being forced into that behavior?

The design is superb. Really a pleasant way to explore/read emails. The only action-oriented design problem I’ve had is assigning labels to emails (see above, it creates all kinds of forced organizational decisions that I don’t like).

Augh, very annoying: when I assign a label to things now, it automatically marks them as “done” and moves them out of the inbox. To avoid this, I’d need to pin something and label it. Nope! Even pinning something fails to protect it from being archived and moved out of the inbox area if you choose to label it. Grr. I often like to label things, then leave them in my inbox.

Mergggghh, my keyboard shortcuts don’t work. The main one I miss is Apple-Enter, which sends the email.

Very confusing — you can choose some labels to be “bundles” that then appear in your inbox. But it seems only certain labels are allowed this, and I’m not able to select them. Gmail somehow decides a few of your labels are allowed this special treatment, and the rest not. Whaaaaat? It seems Google is trying to get me to rethink how I organize my emails, and seemingly let me allow its software make more decisions about how to sort things. No thanks! It just doesn’t do a good enough job of it.

If it remains sluggish, I’ll stop using it.

%d bloggers like this: