Derik Badman's Journal

Spent most of the day yesterday working on the site design and generator. I don't usually write about work or coding, never really got into the habit of thinking about coding as something to write about, partially, I think, because in my old blog it was very topic focused and it was something (comics) I feel I have some expertise in. I've only recently been adjusting to the idea that I have expertise in coding, now that I've been doing it full time for over 9 years. It's weird, but understandable. I came to my job with very little experience, no formal schooling in the area, and then for most of the years was working, if not in isolation, not closely with any other developers. I worked on my app, they worked on theirs, and only occasionally did the two mix. But more recently work has become more formal as we've added more developers, so now I have colleagues I work with more closely, and there are more of us to ask questions and share information, and now I'm a "Senior Developer" and there are other developers who ask me questions or for help with problems, because I do have expertise in various areas (especially, javascript, accessibility, design, and I guess my php isn't as bad as I always think it is).

So among the things I worked on for the site yesterday was putting the layout into CSS Grid. I've not had a chance to try it out yet, mostly because at work I still have to support IE11, which means a lot of modern CSS I never get to use, and a lot of modern javascript I can only use in node (I never got around to doing any transpiling of the code in the app I work on). So this site is (was? depending on when you read this and what has changed) layed out with Grid. My only main issue was getting the grid rows to size the way I wanted. I set up grid-area for the main areas of the site (header, nav, article, footer, and what is now an aside tag, though I'm not sure that's the semantically appropriate tag) and then layed them out how I wanted them, but I keep having issues getting the one row to size to the height of the aside, rather than the article area, which spanned two rows. There was a lot of just trying various values for grid-template-rows in both Chrome and Firefox to see what worked.

One of the nicest things about the grid is how easy it was to adjust the layout for smaller screens, by shifting around the grid areas. Tons easier than any other method to move the nav and aside next to each other and between the header and article. I should share some code.

I also messed a bit with svg to add a little decoration to the header that works with the notebook paper theme I was riffing off of. My app at work uses very few images, mostly just icon fonts, so I have also not had much chance to work with svg. I'm still a little unsure about the resizing and aspect ratio elements, but by putting my svg into its own file and loading it via an img tag, that seemed to work. Nothing fancy, but, I've never really gone for fancy in web design. I do feel like I should finally read my web typography book and see what I can do about making the type as nice as possible.

Finished another James Tiptree Jr. story last night called "With Delicate Mad Hands", one of the longer ones in the collection I am reading. It starts out interesting and rather brutal about a woman who was born with a messed up, upturned nose (such that she is insultingly called "Pig") and who becomes a hyper-competent space worker. Yet she is insulted and abused and finally legally allowed to fly a ship, but denied by her current captain. He rapes her and she kills him and steals their ship. The narrative questions her sanity as she follows this feeling or thought about a distant world with a voice she has heard in the back of her head for years and years. When, flying into the emptiness of space, unsure if she will just die when her air runs out, she finds a planet and then aliens, the story starts to lose momentum. I struggled through too long passages describing the aliens and the planet and... It is a story that really needed some cutting at the end to tighten it up and stay focused on the theme.