You Hate It Already

By Shamus Posted Tuesday Aug 21, 2018

Filed under: Notices 49 comments

Programming is different from a lot of other creative endeavors because it feels good when you expunge your recent work. If I’m editing my book and I realize an entire passage is redundant, I don’t enjoy killing it. Without an editor pushing me, I might even leave it in. Same goes for when I’m making music. If I lay down a bass line and later realize it’s just not working, I don’t get a thrill from canning it. Likewise for texture maps and 3D models. If it’s something I made recently, then I hate to get rid of it.

For contrast, if I come up with a shorter, clearer, more elegant piece of code, then deleting the old code is pretty satisfying. Sometimes I get caught up in the desire to make the code as small as possible and mess around with small details that don’t matter, just because it feels good to have something happen in five lines rather than six. (It only counts if I’ve really simplified something. If you take the complexity of line #6 and add it to line #5 than you’ve made the code shorter, but not simpler. And you may have made it a little more convoluted, which is worse.)

For those of you browsing the archives from the futureI do wonder why you’re browsing the boring “Notices” category, but that’s your business., last week the site looked like this:

Old hotness.
Old hotness.

I’d planned to just do a small update. There were a bunch of little annoyances that had been eating at me for months and I wanted to fix them. The RSS links were a little hard to read due to being small blue-on-black text. The Twitter rollout was crooked. Sometimes blockquotes and other enclosed text would use the giant red drop cap, which is only supposed to happen at the start of a post. There was an annoying horizontal scrollbar that would appear at certain screen widths. You could only see the link to the forums if you were browsing on a desktop at 1080p or more. It was hard to read mouseover text from a mobile screenThe mouseover text is now automatically visible in mobile view.. And so on.

But then my site went down. I spent about 24 hours watching the CPU gauge bounce up and down between 96% and 100%, which really got me thinking about performance. You might remember that last January I was trying to figure out how much load my site puts on the server. WordPress themes are not created equal and a badly-designed theme can consume an order of magnitude more power than a good one. I like knowing about resource usage, and since I moved to my new webhost I now have the ability to monitor things like CPU, memory, and bandwidth usage. I’ve been wanting a feature like that since the early days of this site.

For those of you reading the archives in the future, I have changed this site to look like this:

New & Busted.
New & Busted.

Yes, this is a very dry theme. This style was all the rage a couple of years agoThere’s a built-in WordPress theme that features this exact style of layout. It’s called “Twenty Fifteen”. So if you’re following what the hip youngsters are doing in web design, this layout is a little out of fashion.. I set things up this way because this layout is fairly trivial and I was able to throw it together in a couple of hours.

In the process, I completely gutted the code that runs the site. (Yes, I use source control. Don’t worry. Nothing was deleted for good.) This theme is a fraction of the size of the old one. I deleted much more than I wrote. This theme has accumulated a lot of cruft over the years. Unused CSS. Redundant PHP. Superfluous SQL queries. HTML clutter. I’ve never made PHP code that I found to be beautiful, but this code is probably the least ghastly PHP I’ve ever written.

I think that what we’re left with represents the bare minimum of features required to make this site go. We’ve lost the rotating backgrounds, the thing that shows off popular posts from the archives, the big links across the top, and a bunch of other stuff. I doubt the raw HTML is all that much smaller, but it’s created using a fraction of the lines of code and about a dozen fewer database queries for the front page.

My plan is to see how this theme performs during busy periods. Once I get some sort of baseline measurement for resource usage, I can start adding bells and whistles until this looks like a videogame site again.

So What’s New?

I’ve added a feature to do a “boxed quote”. Sometimes I want to break up a giant wall of text. The most obvious way of doing this is to insert an image. But sometimes an image is overkill. Or it will end up too close to a later image and drown out the text. Or there isn’t a contextually appropriate image to go with the topic at hand. In these cases, publications often toss in a boxed quoteI’m not sure what the real print media lingo is for this concept. I thought it was “pullquote”, but that seems to be something else..

[quote|Like, how am I supposed to know what parts of my article are worth quoting? It makes it look like I’m broadcasting that I think I’ve said something clever.]It wasn’t until I added this feature that I realized how odd it is to use on your own material. Choosing a good quote to fill the box is something an editor normally does for you. But I’m my own editor, and it feels vaguely narcissistic to put my own quotes in boxes. It makes it look like I’m broadcasting that I think I’ve said something clever, and announcing your cleverness is a great way to undermine it. It’s the print equivalent of going, “Did you see what I did there? Huh? Did you? Pretty good, right?”

So I dunno. Maybe I’ll be too self-conscious to use it. On the other hand, inserting a boxed quote requires way less effort than finding, sizing, saving, uploading, and embedding an image. So perhaps laziness will prevail and you’ll see these things all the time.

For the record: A lot of site features aren’t enabled on small screens. There’s a boxed quote in this article, but if your screen drops below 1440px wide then the theme hides a bunch of details to save space.

As always, let me know about any usability issues you have.

EDIT: After I made the theme live, I was hit with another botnet attack.

Which means that a lot of the feedback is muddled. Maybe the reply system is malfunctioning because of the new theme, or maybe files / transactions are getting lost in the deluge. How annoying.

Last night I wrote a twitter thread about the attack. Here’s the start of it:

 

Footnotes:

[1] I do wonder why you’re browsing the boring “Notices” category, but that’s your business.

[2] The mouseover text is now automatically visible in mobile view.

[3] There’s a built-in Wordpress theme that features this exact style of layout. It’s called “Twenty Fifteen”. So if you’re following what the hip youngsters are doing in web design, this layout is a little out of fashion.

[4] I’m not sure what the real print media lingo is for this concept. I thought it was “pullquote”, but that seems to be something else.



From The Archives:
 

49 thoughts on “You Hate It Already

  1. Rick says:

    I’m liking the new design

  2. Erik says:

    The sidebar is a little weird. On my macbook, when im not entirely at full screen. (even just one pixel) the sidebar will dissapear, even though it seems theres plenty of space for it.

    1. Echo Tango says:

      Another weird thing: the annotations (the yellow boxes that you have to click numbers to see) get cut off by the scroll-bar, if your window is smaller than some threshold.[1] Looks like the width of the scroll-bar is not counted, when the CSS is placing the annotations boxes.

      [1] Medium-size mobile view? I get it by resizing my 1920×1080 window to the left half of my screen. (It’s easier for me to track shorter lines of text, so I usually resize my windows like this, so I don’t have long-ass lines on the browser window.)

  3. CliveHowlitzer says:

    It seems fine to me. Ever consider somehow adjusting the comment section to be easier to read and follow? Especially in long conversations?

    1. Echo Tango says:

      Speaking of which – replies to comments aren’t indented / moved to the right, relative to their parents. Difficult to follow! :)

  4. NPC says:

    I dislike the new design.
    Setting personal design preferences aside the way Archives, Categories and Twitter create large drop-boxes which block the entire rest of the menu on mouseover is genuinely annoying.
    You’ve also removed author avatars which is less of an issue these days I suppose but could be confusing in the future.

    1. Echo Tango says:

      The sub-menus should be to the side of the main menu; Probably wouldn’t be too hard to change the CSS or whatever, to do that. :)

  5. Karma The Alligator says:

    New design is too bright for me (the background being light grey is actually uncomfortable for my eyes), but I suppose I’ll need to wait until the other features get implemented.

    As for the quote box, I never really understood the need for those. Is it to recap the article? I don’t mind reading the whole, thanks, that’s why I’m here in the first place. Is it to highlight something particularly relevant? There are many other ways that won’t make me read the same sentence twice.

    1. Karma The Alligator says:

      Also can’t edit and the reply to someone shows up at the bottom of the comments, so if you’re replying to an early one, well, you’ll have to scroll a lot.

    2. Droid says:

      As far as I know, it’s really only so you don’t have to look at a giant wall of text, because while people will happily read lots of text in one go, a screen filled only with text and nothing else is apparently very bad design and makes people not want to read it.

      I guess I get that it’s looking a bit overwhelming, but I always think “Have those people never read books without pictures in them? What about e-books? Then I remember that lots of books, including e-books, have really big font size or really small page size just to break the text up into more pages, so I guess that issue exists there as well, even if it doesn’t for me personally.

    3. Steve? says:

      I don’t know that they make a ton of sense on a website (aside from flow management, as Shamus points out). In a magazine (which is where I assume they started) it makes sense to give someone a sense of the major points of an article if they’re just flipping though. With the majority of posts hidden behind a link, I assume that that sort of skimming is less common on this site.

    4. Hal says:

      My understanding of it is that, if you’re just scanning rather than doing a full read, those block quotes will give you a read of important lines or summaries of the point the author is trying to convey. If you’re only going to spend 15 seconds on the article, those quotes are going to be what you take away from it (or will be what pulls you in to read the full thing instead.)

      Also, I clicked to reply to this comment, and the comment box is at the very bottom of the thread. It used to put the comment box right under the comment you were replying to. I hope we can get that feature back.

      1. Khazidhea says:

        Just chipping in my 2 cents worth on block quotes, for me they distract from reading rather than enhancing the experience. For my reading habits they’ve never worked, I’d much rather read a block of text than unwillingly read the same line twice (I’d read it just by glancing by it).

        However that could just be me, if it’s something you want then go for it.

        1. Erik "Ermel" Meltzer says:

          It is not just you.

  6. Lars says:

    I can start adding bells and whistles until this looks like a videogame site again.

    Waiting for that to happen. Until now it looks a bit dry, or the bad side of clean.
    Also: The font-size has decreased. Or the new typesetter font is smaller by default.
    And the “I’m NOT a spammer”-checkbox is gone.

  7. Mephane says:

    So far, I like the new theme. It’s clean, simple, the top menu dynamically becomes a sidebar if the screen is wide enough, otherwise it stays at the top.

    I am not sure whether it is just a matter of not being used to it yet, or if it changed at all, but it seems the new font is larger and thinner; or maybe it is the same size and just thinner; or the same thickness and just larger. In any case, I find the letters a tad too thin at the moment. Reminds me almost literally of a knife edge for some reason.

    Regarding the boxed quote, I am not fan of these in general. I never know whether I am better off not reading them, or if they are supposed to be read as part of the “proper”, “intended” flow of the article. Or whether they are spoilers for something two paragraphs down. I’d rather liked it when sometimes, rarely, you put in some unrelated picture with a funny mouse-over text these situations.

    Another alternative would be to ad subheadings. Just for example (random non-paywalled article I pulled from the front page of medium.com), this post here makes good uses of them.

    1. Mephane says:

      Addendum:

      * The comment edit function is gone.

      * You still have to fill in the name/email/website fields for each comment anew instead of auto-filling from cookies.

      1. Mephane says:

        Addendum 2:

        * Comment nesting is extremely subtle, you have to look hard to realize that it’s actually nested and not just appended as a top level comment.

        1. Daemian Lucifer says:

          Comment nesting is extremely subtle,

          If you zoom out,it becomes more pronounced

  8. Daemian Lucifer says:

    The sidebar is ugly.Luckily,zooming enough forces it at the top.

    However,there is one….weirdness when zooming.For comparison:

    This is zoomed out

    Zooming in just one notch(10%) leads to this stretching of everything

    1. Daemian Lucifer says:

      That stretching applies to comments as well.So while zommed in,the comments are the width of the post,and a bit stretched.Zoomed out 10% and the comments are slightly narrower than the post .

    2. Droid says:

      Those images do not exist.

    3. Daemian Lucifer says:

      EDIT:I was an idiot and showed everyone what mail I use for gravatar.Not that its that hard to guess.Luckily,delete function on imgur works.Here are those images again:

      Zoomed out:
      https://imgur.com/bh9t5AD

      Zoomed in:
      https://imgur.com/dGXiaT2

      1. Daemian Lucifer says:

        Also,since you are changing the theme and all,this is precisely the issue that used to bug phone users.That stretching of the comment box was what made it shift left and right when you were reaching the end of the line.And also what made the “Not a spammer” button disappear when writing a long comment.

        So now you know where to look if you want to optimize the blog for phone users.

      2. BlueHorus says:

        Bugger. That would have a been a good addition to my list of other people’s gravatars, with much trolling potential.

        Shame.

  9. Droid says:

    See, I know exactly what you’re talking about with the cruft and useless/badly performing code, but on the other hand, a lot of that cruft was there for a reason. Maybe for a now outdated reason, but most of the stuff like the comment edit function, the cycling backgrounds and the now also defunct way the comment box was moved to the thing you wanted to reply to when you clicked “reply to this” added real convenience value to the site and are probably the biggest reason your CPU and query load were higher before than they are now per interaction.
    And, not to sound rude, but what always stops me from binning everything and starting over is this: unless you were heavily grinding PHP and WordPress coding for the last few years to level up multiple times, what makes you confident that you won’t just make a similar mess of the new site’s code compared to the last time?

    On a slightly related note, people who routinely check in via RSS are currently locked out by cloudflare until such time as they remember to manually check your site (cloudflare validation does not happen or does not succeed through the RSS reader, only if you actually open a page in your browser).

    1. Daemian Lucifer says:

      I dont think he meant that those features were cruft,but the way they were implemented.Yes,edit function was useful,but it was not that well implemented.Now,Shamus has a chance to do it better.

      Thats why he said that he is going to add bells and whistles later.

      what makes you confident that you won’t just make a similar mess of the new site’s code compared to the last time?

      Keep in mind that the mess that was before was not just due to lack of knowledge of some features,but due to a bunch of stuff that accumulated over the years,like for example various workarounds that were needed at one point but were made obsolete by wordpress updates later,and maybe half implemented things that were disabled but not scrapped.

  10. Zaxares says:

    I think if you could have a sort of background behind the main post filled with various game pixels and art, that would be nice. Currently, there are two large chunks of ugly grey emptiness on either side of the post due to me reading this on a 1920×1080 resolution, and as someone mentioned above, the brightness contrasts unpleasantly with the dark blue menu on the left and makes it uncomfortable to look at for long periods of time.

  11. Mattias42 says:

    A bit on the spartan side right now, but I like how snappy the new design feels.

    Going to second what a few others have already said about such a bright background, though. Would really appropriate at least a little toggle for some sort of ‘night mode’ where you can change that grey to black, or some-such.

  12. Xander77 says:

    Let’s say I’m a first time visitor to the site.

    I enter the homepage, and I want to find… pretty much anything. The latest articles posted. The latest video posted. Text on a specific subject.

    The site actively resists any form of usability, and the update has done nothing to address the issue (besides making the site look that much uglier).

  13. Grey Rook says:

    Hm. The new design is a bit spartan for my taste; I kinda liked the pixel art in the background. Though I suppose that the code did need cleaning up, and you could always put the pixel art back in later.

    The way that using the sidebar generates a huge box that covers up most of the other options is genuinely irritating, perhaps you could set the box to appear by the side of the categories list instead of on top of it? And the way that the Twitter popup disappears if you try to click on it seems… I don’t know, counterproductive?

    Furthermore, attempting to access the forums returns a 404 error.

  14. Scimitar says:

    The side bar’s minimum size is a little large, and leave too much dead space in my opinion. I wasn’t even aware it was there, until someone mentioned it and I expanded my browser window so I could notice it. Maybe I’m just a little weird (I usually have my browser window at half the size of my monitor, so I can keep an eye on a couple other windows while working without shoving them to a new monitor), but I think having it so that at the minimum size there’s no dead space between the sidebar and the content would be better.

    Basically I’d like it if at the “minimum window size” where the side bar appears, there’s no grey space padding to the left or right. After that I wouldn’t mind the having the background showing up if I expand the window further.

  15. Parkhorse says:

    The huge, blank, empty, gray bars around the article and comments just look… awful. Incomplete, really, like there’s SUPPOSED to be something there, that maybe didn’t load. That’s my only complaint, but it’s a big one – it’s just so, so bad.

    On the other hand, setting the browser to “half screen” on a 1080p display (snapping it to the left or right half) is something I do pretty frequently with text articles (usually with video on the other half). This design looks and works great, like that. Though your patreon link disappears for some reason…

    Also i don’t see your “I’m a human” checkbox when commenting, so that’s weird.

    1. Daemian Lucifer says:

      Though your patreon link disappears for some reason…

      Zoom out a bit,and once the sidebar comes to the side instead of the top,it will be there.

      But yeah,thats something that should be there regardless of the position of the thing.

  16. Tomato says:

    I miss the background images.

  17. Daemian Lucifer says:

    In this sea of negativity,let me say something positive:I like that you moved the comments and other links to the top,making it easier to access those things from the main page.

  18. Shawn Pelley says:

    I like the theme in general, but some minor quibbles (and some basic CSS for solutions)

    Icons aren’t vertically centered beside the left menu items. Append position: relative; top: 4px; to .dropdown-icon to fix it
    On smaller screens, “Become my patreon” ends up beind the RSS (Comments) left menu item. Reducing padding on .dropdown from padding: 10px; to padding: 7px 10px; and reducing the maximum size of .title-image to max-width: 175px solves it for most devices. Ideally, you could use media queries to target this for the smaller devices more specifically.
    The big one: the Archives/Categories/Twitter dropdowns should come from *beside* the content and not beneath it, as it interrupts flow when you try and mouse over the menu. Append top: 7px; left: 100%; text-align: left; to .dropdown-content. This will move it beside the menu in a reasonable spot and will look good.

    If you want/need any help with media queries or anything, feel free to drop me an email if you’d like.

    1. Shawn Pelley says:

      Whoops. Guess lists aren’t available and can’t edit it to just add spaces. My bad!

      Icons aren’t vertically centered beside the left menu items. Append position: relative; top: 4px; to .dropdown-icon to fix it

      On smaller screens, “Become my patreon” ends up beind the RSS (Comments) left menu item. Reducing padding on .dropdown from padding: 10px; to padding: 7px 10px; and reducing the maximum size of .title-image to max-width: 175px solves it for most devices. Ideally, you could use media queries to target this for the smaller devices more specifically.

      The big one: the Archives/Categories/Twitter dropdowns should come from *beside* the content and not beneath it, as it interrupts flow when you try and mouse over the menu. Append top: 7px; left: 100%; text-align: left; to .dropdown-content. This will move it beside the menu in a reasonable spot and will look good.

  19. Christopher Kerr says:

    I use the “Dark Reader” extension to fix the web’s collective love of blinding white backgrounds. It’s decided that the right colour for all the backgrounds on this page is a deep navy blue. I actually quite like it.

    Not turning it off to find out what it’s supposed to look like, though. White on dark forever!

  20. Lurker says:

    Hi,

    the redesign looks broken on a vanilla Firefox 60 on Linux. See screenshot

    That’s all.

  21. BlueHorus says:

    You Hate It Already

    Come on, it’s different from the way it used to be. Of course we hate it.

    …not really. Looks fine. Does seem like there’s some kinks to be ironed out, but everyone else beat me to it pointing them out.

  22. Attercap says:

    I tend to keep most of my windows small, usually about tablet-sized. When I first got to the home page, all the navigation was at the top, but weirdly wrapped. Widening my browser window a bit, I see the sidebar, but the Patreon image hovers over the twitter and RSS links. The long scroll of archives and categories also disappear below the fold (not to mention failing the “grandma test” by being roll-overs).

    Staying lightweight yet usable is difficult. I’ve been struggling with new designs for my site for a few months.

    Regarding the “pull-quotes,” it seems odd to have that feature on your own articles. I usually use those block-quotes like tabletop RPG books use sidebars–for asides and specific notes. Does well enough to add some page break-up, but without the idea of pulling quotes from my own article for which I’m also the editor.

  23. Rainer says:

    The Block Quotes and the Sidebar don’t show properly in my normal resolution (1360 x 768), but will show up if I put my browser scale to 90% they get back to normal.

  24. Decius says:

    Can you just tell the site to not care about attempts to log in for 24 hours? Serve up a 404 page or nothing at all, in addition to not letting the attacker log in?

  25. Anorak says:

    I’ve never really liked box quotes / pull quotes. They seem to be designed for magazines or newspapers where you’ll skim past articles and the pull quote is supposed to make you stop and read the article, if it says something interesting.

    I used to get PCGAMER, the UK edition, and it always really annoyed me when the box quote would be different or edited from the source in the article. Just one of those little quirks where my eyes would read the quote, then I’d read the article, and then when I hit the quote I would compare it to the pulled-out version and feel a tiny, tiny stab of annoyance that they didn’t match. I’m a bit weird like that.

  26. Hey Shamus,

    I recognize this may be a much bigger project than you’d be looking for, but have you considered using a static site generator such as https://gohugo.io/ instead? Stuff like comments and search still require some extra work to wire in, but the bulk of the website gets built to HTML once per change and then served up statically rather than needing to execute PHP and query a database repeatedly, so the resource needs are way lower. It can also mean much better security – you can set things up such that no login or admin pages are externally accessible at all.

    Transitioning a site with as much history and content as you have would be a ton of work, I’m sure, but I wanted to make sure you were aware of the option. I recently pulled my own website off of Blogger and onto a self-built Hugo site, and it definitely wasn’t an overnight process, but for me it was totally worth it.

  27. Dev Null says:

    I wonder if something about the new code flagged it as a target for the bots. Also, that thing about inelegant PHP? I think that’s pretty universal. Its mostly not an inherently ugly language, but it is the tool of choice for people doing ugly things. Dynamically generating HTML is a pretty ugly thing, computationally speaking.

  28. Chris says:

    I’ve never made PHP code that I found to be beautiful

    Don’t sweat it. Nobody else has either.

  29. Lal says:

    I am just a lurker that reads your site since 2005 (I think) ;) I smiled when I read the title of this post, saying to myself ‘Hehe, what an attention grabbing title’. Because I have your site open in my tabs almost at all times, on 26th I still saw the first part on the old theme. Then I clicked ‘Continue reading »’. My world fell apart…

    I use laptop and my screen is not 1440px wide. I could probably live with the broken boxed quote but there are two horizontal lines that really disrupt my reading. They have their origin in the left sided menu(seems broken as well) as when I click on them I can see Archiveson the first line and Category on the second line. Not sure if you can check it yourself or you want me to upload an image.

    Anyway, thank you for all the years of reading, and I hope I can come back and read some more! :D

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply

Your email address will not be published. Required fields are marked *