online home of j.m. lee

My name is Joe. I like writing, drawing, whiskey, and Pokémon. When I grow up, I want to be a '69 Corvette.

J.M. (Joseph) Lee is an author, illustrator, and writing mentor with a background in linguistics and film. He writes cross-genre action adventure and draws faces with really dramatic eyebrows. On the side, he enjoys dabbling in experimental short fiction and drinking a lot of coffee. He is represented by Erzsi Deak/Hen&ink Literary Studio.

All the magic happens in Minneapolis, Minnesota.


stuff & junk

Previous Next

Let’s play “Derelict Heaven or Fullmetal Alchemist”

  • Magic hinges on geometric circles
  • Lots of ponytails
  • Only magic Asian in military a manipulative bastard stages a coup 
  • Main character magic powers, supposed to obey the military but doesn’t
  • Race of persecuted tan-skinned, white-haired, red-eyed people
  • Finale involves big magic circle and five human sacrifices
  • Finale resolution involves superimposing different magic circles on top of each other
  • Giant poRTal Earth??? random??? Not canon?????
  • Lesbian dragon falls in love with a pirate

best game

OT: Lightweight responsive squares

Okay, I don’t generally mix work and pleasure, but I needed to document this somewhere for whoever might need it later. I’m sure others have already discovered this, but it just struck me last week when I was making a responsive grid style layout.

Ever get really pissed off that there’s no built-in, CSS2 compliant, cross-browser, CSS-only way to make responsive squares? Me too. Here’s a quick way to get pretty 1:1 responsive tiles for all your grid-y needs.

  1. We’re calling the responsive container “.container” for these purposes. We want it to be a square that is 20% width of its parent
  2. Make a 2px x 2px transparent square (PNG or GIF)
  3. Insert it using <img> in your tile div and give it a class. Let’s call it .square for this example


.container {
width: 20%; /* Or whatever % you want for responsive reasons */
height: auto;

.square {
width: 100%;
height: auto;
pointer-events: none;


<div class="container">
<img src="square.png" class="square">

Basically you’re using the square to control the height at a 1:1 (or whatever, really) ratio based on its width, which is controlled by the container’s responsive width.

Enjoy, squares.

Back to Top


Previous Next
Back to Top


Previous Next
Back to Top

First 500 Critique Submissions

Previous Next
Back to Top