johnk's blog

Nesting Angular Directives

I've been learning how to write directives, and it's really tough to grok how to do it. This blog post's been rewritten three times so I don't come off as totally ignorant about the "right way" or "the Angular way" to do things.

What I'm trying to do it implement a menu display with lightweight, role-based control over what is displayed.

My first iteration was done entirely with controllers, HTML, and jQuery and plain Javascript. That was clearly not the Angular way, so I revised it a little bit - CSS animations, and let's use directives.

Angular Service and Factory

I was reading the docs, and read things that seemed to contradict what I thought. I thought that Services were singletons, and Factories were instantiating new instances. It turns out that's not quite right. It's explained well here.

Base32 Encoding and Decoding in Javascript

This is a simple implementation of base 32 encoding and decoding that conforms to RFC 4648.


I just had to update my JS toolchain of node on up. NPM is insane. Not just the tool, but the packages.

CSS Animations via Styles (similar to jQuery animations)

This article is a little obsolete, because the latest way to do animations is via CSS Transitions but browser support isn't all there yet. This explores how to do CSS-style based animations, where the animations are controlled via Javascript code that adds and deletes class names from the className property.

Cloud Storage Reviews Dropbox, OneDrive, Google Drive, iCloud

If you want to read some professionally written reviews, I read these:
PC Advisor
PC Mag
My review will be a lot shorter: Dropbox. Explanations below.

I Think I Got Scammed - My Battery Desulfator Experience

I just bought one of those "battery desulfator" devices on ebay. The brand was, but there are numerous different brands, and there are some that are added to battery chargers. This essay explains why I got bamboozled.

A funny RAID 1 failure factoid: you will fail more

A funny thing about RAID 1 disk mirroring, is that if you implement it on your computer, you're more likely to experience a failure. The trade off is that the failure won't be catastrophic.

Sign up for Ebates to support this site (and get cash back)

Ebates is a shopping aggregator that passes along a small portion of the sales commission to you. For example, they negotiate to get 3% commission on a sale, and pass 1% on to you. Combine that with a 1% or 2% cash back on your credit card, and some other discounts, and you can save a little more money.

If you sign up through the link below, I get a commission for your signup. This helps pay for this site, which is free for all readers.

Sign up using this referral link.

Blog comment response about burrito survey.

I was reading an old blog post, and found an annoying comment, and responded at length with some info which i've learned in the past decade or so.

John 2/3/14, 2:03 PM

Los Angeles Auto Repair

I own an old car, and am holding out until the used hybrids are a little cheaper (and less old, I guess). Besides, it's a 95 Corolla with only 100k miles on the engine. It can go another 50k to 100k. Here are the places where I've gotten auto service, and trust, and would hire again:

Potrero Auto Electric on San Gabriel Bl. in Rosemead
Rivera's Auto Repair and Transmission on Mott and Whittier.
Vermont Auto Center, Vermont and 22nd in LA

I've also heard good things about the following, but haven't been to:
Sako's in ELA, Aloha in SSG.

Django, forcing a specific migration

Migrations are awesome magic, until the magic fails. Then it's an awesomely frightening engine of change that threatens to wipe out your entire database.

So, before doing what I say, backup your database.

I had to enforce a "unique=True" constraint on a model. Migrations are supposed to automatically create a constraint in SQL, as well as its implied index. A quick look at the indexes (SHOW INDEXES FROM Model) didn't show the index.

Battle of the Naming Conventions (how to avoid them in Django REST Framework)

Python and Django like snake_case.

AngularJS feels like Java, and likes camelCase.

HTML likes dashed-words.

MySQL docs like snake_case, but I see more PascalCase used in databases. It's case-sensitive, too. uses PascalCase for tables/classes, and camelCase for columns/properties/fields. That's like Java OOP.

Django likes to append _id to your primary keys.

So... the problems start to happen when one piece of named data is passed from one layer of the system to another. It's just a good policy to use the same names at all layers, if possible.

Fun/Annoying Social Media Buttons

Just something I was working on this weekend. Just a draft. I can't tell if this is playful, or annoying.

<style type="text/css">
#socialbuttons {
  font-family: Oswald;
  font-size: 18px;
  color: white;
  box-shadow: 0px 1px 3px #ddd;
#socialbuttons td.button {
  height: 27px;
  width: 130px;
  padding: 9px;
  opacity: 0.5;
  cursor: pointer;
#socialbuttons td.button:hover {
  opacity: 1.0;
#socialbuttons td img {
  height: 18px;
  vertical-align: baseline;
  filter: grayscale(100%);

Buttons vs. Links, and how to make buttons that look like links, and act like links, but aren't links.

This is a common UI element that hovers between "pattern" and "anti-pattern", but it's one I've seen in Drupal, WordPress, and a few other places. It's the button next to a link, where the link acts just like a button:

Technically, it's a violation of UI principles, to have a link that does something to the server's state. Anthony at uxmovement thinks so, but I disagree with him, because the way the link is next to the button, it's obvious that it complements the button.

Syndicate content