Computer Programming

Yes, a bit specific, but I need to store some links!

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.

CSS Animations using Transitions with Conditional CSS, Stacked Rectangles

This is a somewhat elaborate example of how to use conditional CSS and transitions to create a fluid, responsive stack of rectangles that are polite enough to stack up when the screen is narrow. The idea is I'm working on is to have a menuing system that stacks when the screen shrinks.

CSS Animations via Transitions

I don't know anything about CSS Transitions, so I made this little demo to try it out. It's ultra-simple, and I normally wouldn't post this kind of thing, but the examples I saw were a lot snazzier, so it was harder to read the code. (To this end, this is probably too fancy.)

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.

Script to Turn IP Camera Uploaded Images into Videos (Unix)

This script combines individual photos into a video, and adds a timestamp to each frame. It's a poor mans security camera video maker.

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.

Parse.com 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.

Django migrate MySQL error 1005 105, can't create table

When you have Django's migrations making foreign keys, you might hit this error, number 1005 or 105.

This may be happening because foreign key constraints can be applied only to identical columns that are unique.

So, check that they're unique, and add an index. (If you try to add the index, it'll fail if the values are not unique.)

ALTER TABLE X ADD CONSTRAINT UNIQUE INDEX (COLX);

Then, if you still get the error, check that the character sets are the same on both tables. (I don't think Django's db reflection keeps track of that.)

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.

<html>
<body>
<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.

Benchmarking String Function to camelCase

I needed a function to turn snake_case to camelCase. The reason why? Angular and Javascript are better with camelCase, and Python and Django prefer snake_case. I tried working with both in the Django side, and it wasn't pretty. Even worse, I lost track of when I switched from one to the other, if I switched at all. So, I'm going to try renaming the keys as they are handed off from Django Rest Framework to the Javascript.

A Django REST Framework Technique for more Detailed Related Records

This is a nice way to deal with building lists of objects to display in tables. It's kind of hidden in there, but in your serializer, you can specify that a field is represented by another serializer.

The result is a list of objects instead of a list of URLs or PKs.

Now, going with that, you can save on data transfer by serializing only a few fields.

The AngularJS File Upload Blues

I've got the angular file upload blues. It's hard to upload files in Angular JS. Who was to know?

One solution.

A nice module called angular-file-upload.

My .vimrc

set nocompatible " be iMproved, required
filetype off " required

" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" alternatively, pass a path where Vundle should install plugins
"call vundle#begin('~/some/path/here')

" let Vundle manage Vundle, required
Plugin 'gmarik/Vundle.vim'

" All of your Plugins must be added before the following line
call vundle#end() " required
filetype plugin indent on " required
" To ignore plugin indent changes, instead use:

Syndicate content