Formidable: some kind of wonderful

Formidable is a magical library to make HTML forms much better.

With it you can turn a form into an object that will validate input data, generate arrays of error messages, and tell the user to fix problems. It's pretty amazing because, unlike other form builder libraries that build up a form via PHP, you write your form in HTML, and then it's magically parsed and transformed into the form object. So you can design the forms in BlueGriffon or any other visual HTML editor.

How many steps are there in a simple user registration and login?

We all take it for granted that most sites will have a user registration system, and way to log in. We're used to it, and most people are unaware of how complex it is.

So, how complex is it?

It's around 15 different steps or screens.


I've done it a dozen times, and I think that's about right.

Suddenly, a LINK's REL is important.

I'm one of those HTML losers who doesn't use the REL attribute unless is is LINK REL="stylesheet" HREF="...", or if it's provided in some template and I just paste it. (You can also use it for linking RSS and Atom feeds, but I rely on the software to do that for me.)

Not Hating on HATEOAS

There's been some loving and some hating on HATEOAS (which I don't know how to pronounce), but I'm starting to get it. See: REST Cookbook, Timeless, and PayPal's API.

The core idea is, in addition to the data, you send over some information about the possible URLs you can use as a next step.

Demo of rotating an element to make a "dial" or "knob" ui element

Here's a little bit of code that shows how to create a "dial" knob that you can control with the mouse. It's entirely in HTML, CSS and Javascript.

It's not hard, but there are a lot of little details to make it look reasonable and not completely goofy. I think it moves a little weird - and it should respond to both x and y axes, but doesn't.

The sum of two sines, with an offset.

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.

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.

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.

Chrome Rendering Glitch with Label's Padding in Points (PT), Even Values

I have to learn the Chromium bug reporting system. Found an interesting rendering bug if, on a label, you specify a padding with an even number of points (pt), the rendering is shifted up a little bit, and the border can disappear if it's adjacent to another element.

Two examples are attached, differing only in the amount of padding.

Maybe it's a difference in how the values are calculated and either rounded off or truncated.

The problem goes away if you use pixels instead of points.

CSS Hints for Technoids Who Forgot to Learn CSS

This article is being rewritten. If you want the latest, contact johnk at this domain.

The original was written: 2004-11-18 03:16:46 -0700.

Here's a bit of the article:

Dang, but it took me forever to learn CSS. Maybe I should have used a book. Here, I'm going to share with you the hard-found knowledge, presented using technical programmer jargon. (Revised in 2014.)

What is Cascading Style Sheets (CSS)? The typical answer is that it's a way to separate the way a page looks from the the underlying HTML, which describes the structure of the document.

Rich Text Editors for Email, in HTML Browsers

I've been working on this email layout hack, and started to build it from content, and came to the inevitable conclusion that email and web are two different media.

Syndicate content