iamnotagoodartist

rocktronica.github.com

tommy — Sun, 05 Feb 2012 18:16:06 +0000

This is my little attempt at a needlessly prettified GitHub profile… It’s mostly so I can rest easy knowing my pages apps’ root is something that will tie them all together hierarchically.

http://rocktronica.github.com/

Technical Tidbits

Apple-ish black linen texture from Subtle Patterns lazily base64′d right into style.css
Lots of pseudo selecting table elements to get them to look nice
Bitter serif font via Google Webfonts
Uses jQuery, h5bp, json2, mustache, and -prefix-free
Most of the HTML and CSS written with tmpltr
Message and Follow buttons are placebos that just link to the normal profile page because:
- On the GH main site, URIs for following exist but are handled with Ajax and so don’t degrade. That’s probably rightfully a very low priority.
- Messaging is handled with plaintext email addresses, normally only visible if you’re logged in. BUT their API shows them w/o authentication. I’m still hesitant about mailto: links being anywhere near me…
Data stored w/ localStorage to hopefully minimize requests
Open your JS console to watch the async functions make their requests
URL params for testing other users and cache.
Ex: http://rocktronica.github.com/?user=github&cache=false

An Auto-Updating Data URI Text Editor

tommy — Sun, 29 Jan 2012 21:26:34 +0000

tl;dr: Click this, type some stuff, watch the URL, and then come back if you’re curious as to what’s going on.

Ok, quick recap:

Data URIs allow for inline resource inclusion without additional HTTP requests. Among other things, this allows for writing content directly to the address bar, and it’s the way my tmpltr app exports stuff.
HTML5 has a contentEditable attribute that can turn anything into an input.
And somebody clever (@tabatkins, according to @paul_irish) took to combining the two to make “the world’s smallest text editor“:
```
data:text/html,
```

I was pretty enamored by that and used a variant of it at work for awhile to jot down my notes during the day. Like all tinkerers, I couldn't leave well enough alone, and so here's my fancier but definitely-not-the-smallest-and-so-not-as-novel version:

Clickable:
data:text/html,

Breakdown

Mine uses a textarea instead of a contenteditable

, since it's made to be fullscreen and thus doesn't need contenteditable's auto-adjustment to variably dimensioned content. (Actually, the one regret is that my text editor now won't use any of the HTML5 spec and so is not as trendy... Sniffle, sniffle.)

So we've got a fixed and fullscreen input. We'll use its first line (if it has one) as the document title and bind a debounced* function to its keyup event. When the function executes successfully, we write a new URL using the existing body's HTML, the input's encoded value, and its caret/selection position, and then we'll redirect the user to it, setting the caret position and repeating the process indefinitely.

* Debouncing is a method of rate limiting. It takes a time duration and waits that long after each firing to run, resetting and delaying execution if fired before the duration is up. Its more common sibling is throttling, which will run at most once per time duration while firing and will not reset.

Unordered, Non-Narrative Findings

If the software and its data share the same limited storage mechanism, brevity must trump legacy support: no CSS3 vendor prefixes, not a lot of feature sniffing or graceful degradation, etc. All JS is vanilla and doesn't use external libraries.
Like local files, Data URIs are prohibited from a number of things for security reasons; cookies, localStorage/sessionStorage, and any history manipulation are out the window. Thus, there's no saving beyond the URL and updates happen with old-fashioned redirects instead of the cooler pushState.
I'm storing caret position as just a c attribute to save some bytes. There may be a better way to do it, and I'm not sure what the technical implications are for arbitrary attributes like that instead of, say, a data attribute.
Dirty/clean save status is handled with a CSS class to gray out the text and use the wait cursor. May be overkill.
textareas have both value and innerHTML. At init they are the same, but only value changes as the user interacts with it; no HTML is changed. Because we're using the body's innerHTML to rewrite the URL, we must set the input's innerHTML to its value, encodeURIComponented for safety.
Nobody will call the cops if you don't close your body tag.

Still Could Use...

Different browsers have different URL limits. Ideally, this would have some sort of reservoir meter.
Code and markup is properly escaped, but trying to save anything with will effectively close the input and bork all the text thereafter. It escapes me how to get around that at the moment...
Safari takes a couple microseconds to focus an element and won't allow caret setting while it's unfocused, so there's some awkward and redundant setTimeout stuff in there to give it some time. I'd like for that to be less crummy.

Unavoidable Gotchas

Data URIs aren't supported in IE. Tested successfully in Chrome, Firefox, Safari, and Opera.
Undo and redo can't persist over redirect. (But, interestingly, you can use native back and forward to kind of view the text's history.)
Browsers can interpret Data URIs, yes, but most software won't automatically turn them into links like traditional HTTP URLs. So copy-and-pasting into chats will always have to be prefaced with "Hey, copypaste this into a new tab, k?"

How is this useful?

Honestly? Probably only as an academic pursuit.

But try this: open it up and write something, copy the URL and paste it into another tab or browser. Your text persisted without a database, any external script, or proprietary Cloud gizmo. No legal order can cease it to exist, and you didn't even need an internet connection. I think that's pretty neat!

Shipped to the Internet

tommy — Sat, 28 Jan 2012 17:40:03 +0000

Font: Carton

Suits

tommy — Sun, 15 Jan 2012 03:46:35 +0000

My girlfriend and I are at the airport. There are men in nice suits there, waiting for their flights.

“I want you to be so rich you can wear suits like those,” she says.

“I want to be so rich I never have to,” I respond.

Add CSS Bookmarklet

tommy — Sat, 07 Jan 2012 21:13:09 +0000

Here’s a quick little hack I put together to debug CSS on browsers w/o DOM inspectors, Firebug, etc. It’s pretty useful if you ever need to figure out why a co-worker’s Safari 5.1 on Lion refuses to acknowledge #fff on CSS3′d nav links. I mean, seriously, wtf, man.

Uses jQuery and the skeleton bookmarklet code from the recently updated article I wrote for Smashing awhile back, Make Your Own Bookmarklets With jQuery.

Like most things, it is not unlike other similar things, but it is my thing, so I like it.
And I don’t even care if that’s a run-on sentence.

Link: http://rocktronica.github.com/Add-CSS-Bookmarklet/

Seems Pretty Fair

tommy — Sat, 07 Jan 2012 02:28:58 +0000

You know you’ve made it when some shady bro has a budget of potentially three figures to clone something you’ve made.

Oh, did I say “made it”? I meant “still exist.”

I totally still exist.

New Blog Theme

tommy — Sat, 31 Dec 2011 23:27:37 +0000

I’ve been meaning to update my blog’s theme for a long time. I’ve had this current (well, the one before the current) one going for 2+ years. That’s way too long!

Anyway, now it’s a super stripped down thing with almost everything that’s not important hidden. So, like, the opposite of what it was before:

It may or may not stay this way.

Please let me know if anything looks completely wrong.

tmpltr – a Realtime Tinkertool for JSON Templating

tommy — Fri, 30 Dec 2011 03:40:53 +0000

tl;dr: tmpltr is a jsFiddle clone for realtime JSON templating.

(I read somewhere that if you can’t explain something to your grandma in words she understands, you don’t really understand it yourself. I tried to write this first part with that in mind…)

On Building Homes

Making content for the internet is not too different from, say, building a home.

A home has content: people, their stuff, their pets
It has structure: a floorplan with walls, doors, rooms
And a home has style: paint, siding, fixtures, decor

You can similarly compartmentalize a website. Take the page of my site that shows this blog post as an example.

The page has content: blog title, text, images
It has structure: header, footer, sidebar, main article area
And the page has style: fonts, colors, backgrounds

In both examples, the three components serve different purposes but combine to make the final product. This is called separation of concerns, and it’s a handy consideration for efficiency and keeping your brain working well.

Ok, Now to Get More Technical…

Within the web development context, tmpltr is my attempt to streamline the process of combining and iterating on those three things, where data is JSON, structure is HTML with mustache templating, and style is plain old CSS.

It is a realtime and auto-refreshing internet sandbox, akin to a handful of other tools.

It stands with reverence on the shoulders of its predecessors, mustache, and the ACE project. It’s also mostly just for fun.

Notes and Miscellanea

Since I built this for myself, I went a little overboard with the HTML5 and CSS3. Not very practical, but I did learn some neat stuff…

Exporting, Editing, and Saving

So it could be hosted live by Github, I wanted everything to run client-side with JavaScript, so, instead of saving to a database, the export function constructs a data URI with the rendered content visible and the inputs in a hidden form*. On “page” load, a link is injected into the page via JavaScript from tmpltr that, on click, submits the form.

* This approach is more verbose than sending just the necessary, minimal data and re-rendering with mustache, but it will work independently of any external JavaScript.

Now, because there’s nothing server-side, the form has to submit with GET instead of POST, with all the data as parameters in the URL. tmpltr will restore state from those params and, if the browser allows, clean the URL back to its default state, as if the form had submited with POST.

It’s a pretty fun exercise but has its shortcomings. IE doesn’t fully support data URIs and all browsers have different length limits on what they’ll allow.

All updates are also saved locally to the browser with localStorage as you type. You can work on something, close the browser, restart your computer, and it’ll still be there when you get back to it. This is an awesome technique for any kind of form and ought to be the poster child for progressive enhancement.

Reading Files

In Chrome or Firefox, you can drag .JSON, .HTML, and/or .CSS files into tmpltr to load them into their respective inputs.

The browser API isn’t very intuitive, but it’s shocking how few lines of code are needed to read files natively in the browser.

Other Lessons Learned

All good browsers will understand that div[role="input"] is a CSS selector but few of them will allow more arbitrary properties like div[view="split"].
~~Github pages don’t like folders that start with _, even if you think it looks cooler that way.~~
Turns out _subfolders can be enabled by disabling Jekyll. Lesson learned!
You can exclude Google Analytics via cookie, and you can set that conditionally with a URL param.
HTML5 apps are inherently bad at SEO. Verify your meta and add some hidable static HTML to be 100% sure.
Non-essential CSS3 stuff is well served by Lea Verou’s Prefix Free project. If it’s non-non-essential and can’t stand a FUOC, you may be relying too heavily on CSS3.
CSS media queries for resizing the inputs for bigger windows. Pretty quick and dirty.
Browsers will automatically inject the presumable elements into dynamically created iFrames w/o a src attribute, and, since there’re no cross-domain restrictions here, you can shimmy down the DOM and get whatever you need.
Valid JSON requires names be wrapped with quotes, unlike how we’re used to writing objects in JavaScript. Trying to parse that invalid JSON will error out, BUT you can wrap the whole shebang with ( ) and eval() it as a fallback.

Holler

I think this is a fun little project and I’m proud of how it turned out. If you have any questions or requests, let me know. Better yet, fork it on Github and add it yourself. I would very much like some community involvement on it.

Admittedly, also, I may have spent almost as much time with this blog post trying to explain what tmpltr does as I did programming it.

Not really. Pretty dang close though.

Link 1: http://tmpltr.com/, which redirects to…
Link 2: http://rocktronica.github.com/tmpltr/

Tacos for Dinner

tommy — Sun, 20 Nov 2011 08:30:07 +0000

Here’s a stupid thing I made. It’s like a screensaver, I guess, but in a browser… and with tweets about tacos flying out of a swinging taco, oh, and also the tweets are on tortilla chips and the background is parallaxed taco ingredients.

Just click: http://tacosfordinner.com/

Stack, Tech, etc

Some markup from HTML5 Boilerplate
Data from Twitter’s GET Search API
{{ mustache }} templating JSON data
Nominal Modernizr degradation attempt
Gloria Hallelujah font served with Google Web Fonts
Imagery drawn in Flash
CSS sprite made with Sprite Cow
Standalone, homescreen mode for iDevices. Not perfect, but okay.
ASCII art in source

Originally needlessly written in Node but rewritten to just be normal JavaScript.

Works best in Webkit browsers. Does okay in Firefox* if you’ve got a lot of memory. Obviously doesn’t work in browsers without good CSS3 support, but should degrade anticlimactically.

* Oddly enough, I wrote the CSS with Firefox and had animations running on pseudo-elements, but it turns out that isn’t supported in Webkit. By the time I figured that out and started worrying about semantics, I decided it was time to throw in the towel. Anyway, the taco image has some super minor parallaxing in Firefox.

“My Name Is Tommy” Portfolio Refresh

tommy — Sat, 13 Aug 2011 02:04:03 +0000

Updated my portfolio after a year of stagnation. It’s a little more complicated than it needed to be; I was mostly just playing around with some new stuff.

Tech Notes

Borderline gratuitous, progressively enhanced CSS3 transitions with Modernizr
Markup and CSS based on HTML5 Boilerplate
Data stored as JSON and templated with {{ mustache }} using PHP and JS
Eau Naturelle Sans font by YOWorks, found via Awesome Fontstacks
Honeypotted contact form (…we’ll see how well it works)
Custom modal windows
Illegible Tommy handwriting

URL: http://mynameistommy.com/