Monday, February 29, 2016

what you've bought from amazon

You can get Order Reports from Amazon, listing all the physical goods you've bought since you first signed up. (Weirdly, they don't have the same for electronic fulfillment.)  They'll make you a big ol' CSV file that you can drag into a spreadsheet.

But I hate spreadsheets, so I made up the Amazon Adder that lets you copy and paste the whole CSV into a textfield (I didn't want to get involved with people sending any information to my server)

I tried to keep things pretty simple library-wise; started with PapaParse for the CSV wrangling, jQuery for some basic DOM stuff, Handlebars when things got a little more complicated, and finally CanvasJS for a "stacked area chart" (btw, do some people think Area Charts are a bad idea in general? I know Tufte doesn't like pie charts, but still stacked area seemed to make the most sense for this.)

Anyway, the page makes that chart, breaks down by year, month of year, and then by category, with each category getting a list of the actual items bought.

Now what to do with all these damn cardboard boxes...

Sunday, February 28, 2016

nifty existing-site-as-wireframe tool

Wirify is a pretty nifty tool for converting the page you're currently looking at into a more abstract wireframe, so you can get a better feel for the layout... here it is for Yahoo:
It's a bookmarklet. (I had a bit of trouble getting it into my bookmarks collection, I ended up manually doing a "Copy Link Address" and adding it by hand to Chrome's bookmarks.)

(Another not-entire-dissimilar but SUPER fun bookmarklet is Katamari Hack that turns any site into a little game of Katamari Damacy)

Saturday, February 27, 2016

the life-changing magic of tidying tab bars

My last entry was about rebinding keys in to change behaviors in browsers; either to encourage (getting back a closed tab) or discourage (quit and new window) certain commands. It's masking "New Window" that has really changed my computer life for the better; to my surprise it has become a reinvigorating life hack, and so I think I have something to learn by thinking more deeply about the UX of it. (Hopefully more widely applicable than just "stuff I like")

When a coworker would pick on me for having too many browsers open, I'd kind of defend it by explaining how it let me "group" tasks, so when I went on a tangent, one that might make use of multiple tabs itself (like investigating products on Amazon, or opening up a few Gizmodo windows) I might cmd-n myself a new window for each one:

But the windows would pile up, and I was doing a lot of cmd-` shuffling through (or using Hyperdock's window thumbnails) and by the end of the day I'd have a ton of windows hanging out. I'd argue for it though, saying it let me leverage spatial memory a bit. In reality it was just a hard to break habit; I'd cmd-t for a minor thing, and cmd-n when it felt like it was a very new subject. Or just because.

Life with the new system looks more like this:

Cmd-click opens a new tab just to the right of the tab that holds the link, so it's easy to get that clustering effect. (Also, browsers let you reorder the tab bar, so if you want to indulge in micromanaging placement, you have options - these options parallel the dragging windows into relative physical locations that I used to rely on.)

This new system has a number of benefits. Chief among them is visibility: windows aren't lost behind. Having a single row also acts like a thermometer of how distracted I am, and encourages quick, frequent review of "do I still need those tab?" Being compelled to have a single tab row oddly has a better use of spatial memory - early in a typical browser section I might open gmail, and it often makes sense to keep it open, so it gets a "place of honor" near the left corner. Overall there's a timeline aspect to it, kind of flattened tree of tangents I've followed.

When I rambled about this on Facebook (I have tolerant friends) David P said
That is a very strange thing that you do. I can basically not imagine having more than one window per browser open.
My guess is that his history has been much more Mac-centric than mine. By having the menu bar be at the top of the screen and not on each window (and then by adding a Dock that gave you one clicky thing per app) Apple has generally not encouraged multiple window use - just stuff that really needed multiple views, like Explorer or an art program maybe. My habits were formed in Windows 95 and on... and 5 years ago I was rambling on how I preferred the Windows task-centric approach. Not only that, but some of these habits took root before browsers even had tabs, which went mainstream in the early to mid-2000s.

One minor aspect supporting "one window to rule them all" browsing is that websites have gotten better at supporting ridiculous widths. As much as web designers have to think about tiny screens for mobile, they're even better at coping with giant swaths of horizontal screen real estate, since this is what they have in front of them all the time. (In the dark ages sites would let text run as wide as the window, which actually justified giving various sites their own easily resizable window.)

Ah well. I'd love hearing from people if they tend to use multiple browser windows or stick to one...

Wednesday, February 24, 2016

osx: safety and generally better shortcuts for chrome and safari

I wasn't quite happy with the keyboard short cuts for Chrome and Safari.

Luckily OSX is configurable for this stuff! Go to System Preferences | Keyboard | Shortcuts, select App Shortcuts on the left, and then hit the + at the bottom. You have to know the name of command exactly as it appears on the Dropdown Menu at the top. (For example, "New Window")

Here were the issues I fixed for myself:

  • I was accidentally cmd-Q quitting out of browsers when I merely wanted to close a tab with cmd-W - just one key apart. I changed this to "option-cmd-Q" for both. (I hate the option key as a matter of principle -- there are just too many modifier keys on the lower left part of an Apple keyboard -- but shift-cmd-Q is taken by the system Quit.)
  • For some odd reason, Safari has inferior "open last closed Tab" functionality. Chrome and Firefox get it right: shift-cmd-T, an easy to remember variant of cmd-T, opens up the last closed tab, and you can repeat it to get further back. Safari seems to have forgotten that people use tabs now and only offers a "Reopen Last Closed Window". If you close a tab, cmd-Z undo is remapped to "Undo Closed Tab", but it only works if that's the last thing you did, and I think just for one window. Anyway, mapping shift-cmd-T to "Undo Closed Tab" is better than nothing, I guess. (I'm not the only person missing this feature. Apple does so many things right, but this - "Undo is the obvious place for this!" - is exactly the kind of over-simplifed thing they have get a dogged determination not to improve.
  • Finally, I sometimes get mocked for how many browser windows I have open. It's a habit I developed on Windows (where each window had its own place on the taskbar) and sometimes I like the idea of using the physical space of multiple monitors, but I want to experiment with how keeping to one browser window feels (in some ways a single tab bar reminds me of a thermometer, increasing and decreasing with the number of windows I have open, which may encourage me to clean up tabs rather than keep them around.) Anyway, changing New Window to shift-cmd-N instead of cmd-N should get me to think before I go off into multiple window land. 
So, pretty powerful stuff. In some ways, OSX feels closer to its Applications than Windows (at least pre-Windows 8) so manipulating keyboard shortcuts via a centralized System Preference kind of makes sense.

Actually, I guess OSX has always been more App-centric; having the menu bar at the top of the screen for all apps rather than have each app window carry their own reinforces that. I user Hyperdock which means while there's still "one Dock icon per app", I can at least keen little window previews. Still, one window per browser feels more with the grain of OSX than my previous behavior.

Friday, February 19, 2016

webdesign, 1991-2015 is a smart little tour of the evolution of webdesign from 1991-2015, showing one site from NASA as it might have appeared over the years. I've been trying to sharpen my thinking about the specific aspects of new vs old. Sometimes the new stuff seems so blatantly template driven... I'm taking a Graphics Design course with DesignLab, when my instructor looks at my current stuff like, in juxtaposition with stuff that is showing its age like, she sees a consistency- like, simplicity, but then with small little icon surprises. Maybe I should run with that, and not just because I find it an easy style to pull off.

Wednesday, February 17, 2016

textdrag: faux-physical text pathing

I'm taking an online graphics design class. I admit, I'm not super impressed with "Sketch" (at least in terms of what I can already do pretty quickly in html vs what I'd have to learn to use it really well) and "Illustrator" seems like a bit much, but I've been on the lookout for ways of manipulating text... specifically putting lines on curves and what not.

I hacked up an online tool 'textdrag', based on this old Processing example Follow 3 - I've always enjoyed that example's physicality of dragging stuff around, and it seemed like a easy-ish way to manipulate text:
(Also I thought using eval to let users hack a JSON block was an ok balance of flexibility and laziness on my part.)

UPDATE: at the implied suggestion of my Graphics Design mentor I've turned this into a codepen.

angular hacks: don't render component until needed variables are initialized

At work I'm working on parts of a large Angular infrastructure. 

I was using a pre-existing table component (with built-in checkbox select row behaviors) but the variable I told it to put stuff in ($scope.selectedItems) wasn't available as the thing was being rendered, and the component was silently disabling the selecting functionality (including the select all feature, which was the most visible form of the problem.)

My first way of fixing it was to just put the $scope.selectedItems = []; directly in the top level function of the controller itself, rather than in the init() function that had been trying to set it before. If I wanted to keep that code in init, though, I could set a flag -- like have the end of init() be 
$scope.initialized = true; 
then on the component do a 
which forces it to delay rendering until things are ready to go. (Setting the initialized tag is expected to be a one time thing, and should never be later set to false, obviously.)

accessing clipboard data from osx terminal

I like Quora, and am impressed by the list of questions and answers they send to my inbox on a semi-daily basis-- their algorithms seem really well-tuned. One of the answers to the Windows-centric  What are some cool hacking tricks using cmd.exe? mentioned you could send the results of ipconfig directly to the clipboard:
ipconfig | clip

I figured there must be some equivalents for OSX, and lo and behold, OSX Daily has an article on it, the short of it is you can do stuff like
pbpaste > clipboard.txt
or then
cat clipboard.txt | pbcopy

I can think of a few uses for this, like using ls instead of cat for a long directory listing (like maybe if I then want to write some macros in my editor to manipulate file names etc) - nothing earthshaking, or that couldn't be done with temp files etc, but still, a nice tool know about.

Monday, February 8, 2016

art project: an atomic heart

Every month I pull together a digest at my Blender of Love, AFAIK the web's first romance poem community site, dating from the mid-90s. The volume of poems sent is under a tenth of what it was at its (pre-Facebook) peak but it seems to be robust at its smaller size.

For each digest I do a little heart-based doodle. This month (for the annual "Valentines" issue) I took it a step further and made this little animation:
I've always been fond of the Bohr model of the atom, even if it's a bit obsolete - it's so iconic, the emblem of the atomic age.

Here is the Processing2 source code.

Small bits of cleverness involved:

  • Because I wanted the heart electrons to stay upright, I looked up how to manually do a sin/cos based rotation rather than rely on rotate() which would have changed their entire angle - though now I'm wondering if I could have just done a normal rotate() call, and then a counter-rotate call when I actually drew the little heart.
  • I draw half the orbit lines first, then the heart, then the other half, to get the 3D effect. Similarly, I draw the orbiting heart if it's in the"behind" part of its rotation first, then the big heart, then I draw the small heart if it's "in front".
  • I increment the angles by divisors of PI (in this case PI/40) and then twice that divisor (80) makes a nice looping animation. Admittedly it was a mix of getting the numbers right from first principles and via experimentation.
I wasn't entirely happy with how I drew each heart, using the old "two circles and a triangle" method, but there's enough cool stuff going on that I don't think people notice. Also, I noticed the hearts didn't draw quite smoothly in the fullsize version (I think errors with sub-pixel increments) but resizing from 500px to 125px via ImageMagick fixed that.

Also, here's a fireworks animation I made in July of 2011:
source code here
Animations are fun to make.

Friday, February 5, 2016

gripe: bad second-guessing typing ui

I am really enamored of Simplenote, a website / app that is like a giant folder of your own text files that effortlessly syncs across any device, whether it's an iOS device or a Windows machine or an Android thing or your Mac -- actually anywhere you can get to a browser, you don't even have to install anything to have access to your info. Compared to, say, Evernote, its "pure text" approach may feel a bit stripped down, but I love it. (I am reminded of the late-90s Computer Stew video Notepad Rap...N to the O to the T to the E, P to the A D E X E my Notepad!)

There's one quirk of its UI I hate though: if a line of text starts with a "-" or "*" and you press return, it assumes you're starting a simple list and so it puts a starting "-"or "*" on the next line. This bugs me: if I wanted to continue a list, it's pretty easy to type "-" again, and even though I can hit delete or return, the presumption irks me.  Maybe it's just an iOS thing (though I thought I had seen it on the website at one point) because it takes an extra taps to get to the keyboard for those characters... But for an app that seems so firmly in the "do one thing, do it well" camp (pinning notes to the top of the list and tags are its only "frills") it's a bit jarring.

Similarly, one of the first things I look for in a code editor is "how hard is it to figure out where to turn off auto-match of ) and ' and [ etc?" -- i.e. you start typing a "(" and it automagically fills in the ")" and (hopefully) hops the cursor back to the middle. Some are smart enough so if you accidentally type the matching closing character, it erases the one it made, but still: I hate it, and turn it off as soon as I can figure out where, since the feature goes by different names in different editors.

I tried to figure out why it irks me so much, and I realize it's the inconsistency of the thing, when compared with all the other programs I use to enter text - most of them don't autolist or autocomplete or whatever, and so I can't just type - I have to keep in mind what the program I'm doing does. Inconsistency is horrible, even if it's in the context of other programs.

Bonus gripe: in general, I'm ok with autocorrect on touch devices, since it does a pretty good job of making up for the deficiencies of the input device. But, I hate the parallel autocorrect when I'm using a laptop keyboard, where typing is more accurate (but I like the underlines indicating I screwed up, especially since the interface for correcting that is so smooth as well - and some of them are fairly smart, hinting that maybe I made a grammatical typo, not just a character blurble.) ON THE OTHER HAND, I find iOS's insistence that capitalization is a part of spelling correction to be fascist. (I'm not talking about capitals at the start of sentences, which you can turn off.) I'm not saying I want to be e.e. cummings, but if I want to type star wars and not Star Wars I should have that option. And again, the inconsistency and general stupidity of the fixes irk terribly; if I write about my friends "amber and jim" Jim gets the capital, and Amber doesn't, simply because her name doubles as a common noun. Combine that with the general clunkiness of the correcting interface, and the way the shift-mode is sometimes "sticky"... blargh.

Monday, February 1, 2016

the office meets lord of the rings

Lord of the Rings as "every crappy enterprise IT project" ever:

Kind of brilliant! I like how there doesn't even have to be a bad guy, per se...

quick hack to center horizontally AND vertically on page...

I participated in my 8th Global Game Jam. I wasn't as delighted in my team's game (Dinner Party Faux Pas) as much as I have been previous years, but it was a fun exercise in making a game directly in the DOM (instead of the canvas) and I learned one decent trick: to center a div (or whatever) horizontally AND vertically, you can CSS something like the following:
Pretty nifty.