While updating my website build process over the past week (part 1, part 2), I decided I should also revisit my page layouts. Last year, I started learning about responsive design, studied the theory, and implemented it on my site. I converted 514 out of around 600 pages, and said "The rest are either unimportant or impractical to convert." Of the ones I didn't convert, some were in a 450px width and most in a 600px width. I wanted to see if I could convert the 450px pages to 600px at least.
Although I had abandoned Python lxml for building my website, it turned out to be useful for analyzing my website. I had 12 pages using width=450, 80 pages with width=600, and 183 pages with width=flex. (This is not counting 439 blog posts that use width=flex but in a "compatibility" mode.) I went through the 450px pages, intending to convert them to 600px if reasonable, and … it turned out all of them could be converted to a responsive layout relatively easily. Hooray! That means I no longer need to support the 450px layout. I removed it from my CSS and XHTML build script.
I was feeling optimistic, so I decided to visit some of those 600px pages to see if I could convert them. One after another, I was able to convert them without too much effort. I was feeling pretty good! There were some pages that had complex layouts that I wasn't able to convert easily, so I left them in 600px format.
The next step was a little more tricky. I wanted to unify two of my CSS styles. Let me explain visually. For the first 23 years of my web site, I used a container with a fixed width (450px or 600px) to enclose the content (paragraphs, diagrams, etc.):
section { width: 600px; } For the flexible layout I designed last year, in large part because of articles on distill.pub, I changed to a system where the container would be full width, and each individual paragraph/diagram/etc. would have a width:
section > * { width: 600px; } This allows me to make some diagrams wider:
I wanted to convert all of my pages to have this flexibility. I was feeling overly confident and optimistic so I decided to just do it. It turns out this broke a lot of my pages. The reason? The CSS rule
section { width: 600px; } only applies to block elements. Over the years, I had been careless, putting inline elements on the page without putting them inside a block. The main offenders: img, canvas, svg, but I also had places where I had text without a container.
This is where Python's lxml came in handy. I read every page in, parsed it, and found all children of the container. Then I printed out all the places where I had inline elements:
children = bxml.xpath('//section/*') for child in children: if child.tag not in ('figure', 'p', 'div', 'ul', 'ol', 'dl', 'pre', 'blockquote', 'address', 'hr', 'h2', 'h3', 'h4', 'table', 'style', 'script', 'noscript', 'footer'): print(bxml_filename, ' ', str(child)[:40]) Very handy! Once I had the list, I was able to go through each of these pages and fix the layout on each of the 80 pages. That took a while but it simplified the CSS I have to support going forwards, and it also gives me more flexibility in the layout.
Since I was going through all these pages anyway, I looked to see how much work they would be to convert to the responsive layout. Surprisingly, a lot of them were easy to convert! So I converted 73 of the 80 pages.
Now I had only 7 pages left that were using the fixed width layout. And I was feeling optimistic and productive. So I decided to try converting them.
The last few pages took a lot longer. They had tricky layouts, often involving overlapping elements, absolute positioning, iframes, etc. But I felt like I was so close to being able to drop the legacy layout that I spent the time to convert these pages. So I did!
I've converted the entire site to be responsive. Hooray!
Now I can remove all the old CSS rules, and only have a single set of CSS rules for all the pages.
Well, kind of. Some of my templates still insert an extra <div> under <section> as a "compatibility mode". These pages work with the new CSS, and have variable width, but they don't allow for the flexible layouts. That's ok. There's always more to do! I'm happy with how much I got done this week.
Update [2019-03-08] I had nearly 500 pages using the "compatibility mode", mostly blog posts, but also output from emacs org mode. Over the past week I went through them and converted them to not require it. I think I am finished with this major update!
Back to the AsRock EXTREME4 this month as its price has subsided back down to around $134, good news! I have used this motherboard several times in the months builds and with good reason. This will support every piece of hardware comfortably in this build, leaves plenty of room for upgrades and can nicely overclock the Intel 3570K processor.
The "Boost" version of the Radeon HD 7950 3GB graphics card. Essentially it is a manufactured overclocked card so you do not have to do it yourself to risk messing anything up or voiding any warranty. I had initially stuck a PowerColor Radeon HD 7950 here, but prices have finally dropped again for the Sapphire Radeon HD 7950 Boost card, so here you go!
A nice change in RAM to the Corsair Vengeance series packages of 8GB (2x4GB) package of RAM. RAM prices have increased overall this month and this is the best punch of memory for the price. 
1TB of hard drive space is a good amount of hard drive space for a $1000 build and the newer line of Western Digital hard drives is a quality drive to takes this place.
nice solid 750W PSU that has more then enough juice to power this build. The only instance I would recommend more wattage is if you decide to go Crossfire with this build, but even so you would still be good with 750W.
A new case just put out by Cooler Master – The Storm Scout 2 Advanced Gaming Mid Tower PC Case. A very versatile case that is also quite portable. Made with a nice thick steel, plenty of room for further hardware upgrades and a nice sleek look with a white casing and white LEDS.
Switched the optical drive to an Asus this month since the Lite-On Drives shot up in price. Just your standard DVD drive to get you going!