{"id":38202,"date":"2017-04-28T06:00:54","date_gmt":"2017-04-28T10:00:54","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=38202"},"modified":"2017-04-28T06:18:08","modified_gmt":"2017-04-28T10:18:08","slug":"the-site-is-shaping-up","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=38202","title":{"rendered":"The Site is Shaping Up"},"content":{"rendered":"

Yes, I know we’re all sick to death of talking about fonts, cascading style sheets, and site layout<\/a>. But it needs to be done. I mean, you wouldn’t want the site to still look like this<\/a> would you? Of course not. Let’s just get it over with.<\/p>\n

The short version:<\/strong> I’m nearly done tinkering with the site. Let me know if anything is still broken in terms of usability. Please be specific. <\/p>\n

The 1,000 word version:<\/strong><\/p>\n

If you’ve ever clicked on the “archives” drop-down box above, you’ve probably noticed that this site has been running continuously since 2005. There are people old enough to vote now who weren’t old enough to read when this site began. During that time, screens have become both larger and smaller. Desktop users have embraced 16:9 jumbotron monitors while mobile users have created a demand for sites that can be comfortably read on a five-inch screen.<\/p>\n

The well of content is deeper and the needs of the readership are more complex. This wouldn’t be a big deal if I was one of those fancy professional web developers with hipster glasses, an iMac, and a $10 Starbucks coffee too complex to pronounce. But I’m an aesthetically numb engineer and I’m mostly half-assing my way through this increasingly challenging job. Some of the challenges are just a normal part of web development, while others are problems created by past-me. (That lazy bastard.) <\/p>\n

So let’s look at the problems I’ve left for myself. Also I’m going to “decorate” this post with archived images of how the blog looked in years past.<\/p>\n

<\/p>\n

In the Before-Time<\/h3>\n

<\/center><\/p>\n

I was making content back when WordPress was very rudimentary. Here in 2017 it’s evolved into this turnkey platform for everyone, but back in 2005 you still needed some technical knowledge like HTML (and maybe even PHP) if you wanted to do anything more complex than post simple text articles. There were no tools for images. It freaked out when you tried to embed things. No spell checking in the editor. <\/p>\n

Way back in the early days<\/a> of the site I used raw HTML tags to put images in posts, like so: <\/p>\n

<center><img SRC=\"\/twentysidedtale\/images\/ff7a.jpg\" WIDTH=300\/><\/center><\/code><\/p>\n

Which gives us:<\/p>\n

<\/center><\/p>\n

But that was messy and cluttered up the text quite a bit in the editor, so I invented my own shortcode. Just like the shortcode you see in most forums, it was based on putting stuff in square brackets. For example, the very first DMotR comic<\/a> uses this shortcode for the first image:<\/p>\n

[image|comic_lotr1a.jpg|center|||Lord of the Rings, D&D campaign|600]<\/code><\/p>\n

This was a terrible<\/strong> system, and I still wince when I see this stuff in the archives. You needed a vertical bar(??) between attributes. Attributes like image width, justification, caption, and URL link all had to be specified in a specific order. If you made any mistakes or had an incorrect space somewhere it would break the tag and screw up the post. The system was so obtuse and fiddly that even as the author of the system, it took me ages to learn to use it without making mistakes.<\/p>\n

Sadly, I used this shortcode for years<\/em>.<\/p>\n

At some point, WordPress introduced their own style of shortcode. Theirs was way better. It had a better parser, and it was extensible to support whatever sort of markup you wanted to do, and it was less cryptic to use. Sometime in 2015 I got around to switching over to the WordPress style shortcode. For comparison, the code to embed an image these days<\/a> is:<\/p>\n

[img src=\"ac_batman1.jpg\" title=\"TELL ME WHERE I CAN FIND THE RIDDLER! Or some of his trophies. Or Joker. Or the cure. Anything really. I'll be honest, I'm pretty lost tonight.\"]<\/code><\/p>\n

The site in April of 2013. April fool day, obviously.<\/div>
The site in April of 2013. April fool day, obviously.<\/div><\/p>\n

The shortcode looks a lot like HTML, but the advantage of doing it this way is that the parser can expand the code into complex markup without me needing to clutter up my prose with paragraphs of script. That one line of shortcode can become a bunch of nested <div> tags with CSS class assignments. It can create captions, mouseover text, make it into a link, and so on. <\/p>\n

As a result of this evolution, there are now three distinct eras of images on this site: <\/p>\n

    \n
  1. Raw HTML. (Implemented back when the content was 600 pixels wide.)\n
  2. Homebrew shortcode. (Mostly used when the main column was 800 pixels wide.)\n
  3. WordPress Shortcode. (Which I implemented to be layout-agnostic and simply made all images span the entire column regardless of size.)\n<\/ol>\n

    If you’re viewing the site on a desktop or other wide screen, you can see the transition from homebrew to WordPress happen during the Mass Effect series<\/a>. At the start the images are the width of the text, and later they’re the width of the container.<\/p>\n

    Each of these image embeds works a little differently. On top of this, YouTube embeds have similarly evolved from raw code, to awful shortcode, to proper shortcode. <\/p>\n

    What a Mess<\/h3>\n

    The site in Feb of 2015.<\/div>
    The site in Feb of 2015.<\/div><\/p>\n

    Every time I make changes to the site theme, there’s a risk I’ll break something back in the archives. I’ve tried to exhaustively check my work before updating the theme, but there’s just so much<\/strong> to check. Old YouTube embeds. New Youtube embeds. The three eras of images. The Diecast. Short comments. Wide comments. Posts at the start, middle, and end of a series. Standalone pages like this one<\/a>, which are distinct from posts. Tags. Archive listings. Category listings. Search results. The comment entry field. <\/p>\n

    And then I need to check the mobile versions of all of that stuff. <\/p>\n

    And then all of that<\/em> stuff, both normal and mobile, on a different browser. <\/p>\n

    There’s just too much to review. Even trivial changes would take ages if I properly tested every single CSS edit. So instead I check the obvious stuff and then just upload. I’m basically crowd-sourcing the site review. I know it’s a little annoying to have things malfunction on you, but doing things this way offers more robust testing and turns a weeks-long project into something that can get done in a couple of days.<\/p>\n

    Which is to say: I’ve worked my way through the major complaints with regards to the new theme. I thought I was basically done. Mobile users seemed happy. But then a couple of days ago someone said the mobile version was “unusable”. So I guess we’ll see.<\/p>\n

    So if you’ve got problems, please speak up. Remember I might not be seeing what you’re seeing, so be specific. <\/p>\n","protected":false},"excerpt":{"rendered":"

    Yes, I know we’re all sick to death of talking about fonts, cascading style sheets, and site layout. But it needs to be done. I mean, you wouldn’t want the site to still look like this would you? Of course not. Let’s just get it over with. The short version: I’m nearly done tinkering with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[],"class_list":["post-38202","post","type-post","status-publish","format-standard","hentry","category-notices"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/38202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=38202"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/38202\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=38202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=38202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=38202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}