Site Theme

By Shamus Posted Friday Sep 23, 2016

Filed under: Notices 132 comments

It’s amazing how easy it is to fall into common pitfalls of software engineering, even when you’ve run afoul of them before and you should supposedly know better.

Today’s pitfall is “scope creep”, where a small, sensible change gradually grows into something large, ambitious, and impractical.

I needed to add a byline to the end of each post. This wasn’t required when 99% of the posts on the site were authored by me, and those last 1% were unexpected edge-cases where it was usually pretty obvious who wrote the thing. But these days I’m only writing ~75% of them, and so it’s really important to make it clear who the author is. I know from experience that most people ignore the name at the top of the post. So I added a little bio and a link to the author’s Patreon to the end of the article.

But hey, while I’m here making changes…

This is Probably a Bad Idea

I’ve always liked the parallax effect you see on some websites. That’s when the main content scrolls normally, but the background scrolls slowly. The effect is to give the website some visual “depth”. It’s also good because – unlike most other HTML bling – it’s not mechanically obtrusive. The problem with animated menus, fancy cursors, fading image effects, roll-out content, and other graphical trickery is that they break from expected behavior and make the site harder to use.

Say you want to click at the top of a site to go back to the front page, but the shitty Javascript causes a little stutter as your mouse pointer passes over the menu bar. This stutter makes you mis-click into the stupid menu that just rolled out, and now you’re being whisked away to some random bit of the site. You saw the menu had the entry HOME in it, so you try to open the menu again. This time you mis-click because the rollout animation presents you with a moving target. And then you figure this website is too much bother and go somewhere else to read your gaming news.

But parallaxing is entirely visual. It’s just a moving background. By design, it doesn’t impact anything interactive. This is a good place to add useless effects that won’t mess with usability. And if it fails because of some browser compatibility nonsense (everyone is looking at YOU, Internet Explorer) it won’t hurt anything. The worst-case scenario is that the background will scroll normally.

That was my thinking, anyway.

So I looked up how to do the parallaxing effect. Every tutorial began with a “simple” bit of Javascript that filled half a page and looked like obfuscated C. I wasn’t interested in those. I don’t like Javascript for a hundred reasons I won’t belabor here, not the least of which is that when your site already runs on PHP, HTML, and CSS, adding yet another scripting language seems like asking for trouble. I know WordPress uses Javascript to accomplish some of its sorcery (like editing comments) but those bits are all safely hidden under the WordPress hood. I don’t want to add Javascript that I’m responsible for.

So I went looking for one that gets the job done with just HTML and CSS. And I found one. It took some doing to make it work with my theme. It wasn’t exactly plug-and-play. I had to mess with the page structure a bit. And then I spent a good hour trying to figure out WHY the background was leaving a ten-pixel gap on the left. There are about five thousand different things that can create a ten-pixel gap in CSS, so it was a long, stupid, annoying search and in the end I gave up and used a background image that could hide the problem.

Well, all I needed to do was add a byline, but I ended up blowing an afternoon on something pointless. But sometimes pointless effects are fun. There were probably better ways I could have invested those hours, but whatever. At least it’s done now. I uploaded the change to the site. I scrolled up and down to see the fun parallaxing in action. Everything looked good.

And then I hit PAGE UP to return to the top of the page. Nothing happened.

Head. Hit. Keyboard.

So what’s happening is this: To create the effect in HTML, you have to make the parallaxing happen in a container. The container is fixed to be exactly the size of your screen. This means the right-hand scrollbar isn’t used (or even visible) because there’s no vertical scrolling to be done. The scrollbar you see on the right is actually the scrollbar for the container. (Note my twitter feed in the right-hand sidebar. It’s the same thing. A little rectangle of space with its own local scrollbar.) But while container scrollbars can use the normal scroll wheel controls, they don’t respond to the keys that govern site navigation: Page Up, Page Down, Home, and End.

I even tested all of this on my staging site just to make sure it would work properly before I made it all live. It just never occurred to me to test the Home / End keys.

Maybe there are other ways of getting this done that won’t exhibit this problem, but I’ve already sunk enough time into this boondoggle. I’m going to remove the parallax and go back to a fixed background. The result is that the site is going to look a little plainAs of this writing, the background is pure white because I haven’t adjusted the old backgrounds to work with the next layout. until I get motivated enough to find another way to spice things up.



[1] As of this writing, the background is pure white because I haven’t adjusted the old backgrounds to work with the next layout.

From The Archives:

132 thoughts on “Site Theme

  1. Ventus says:

    Did you change the mobile version of the website? Before i just got the exact same thing as the desktop site but now its a more generic and slightly less usable mobile style website – not a big deal, i can work around it, just wondering if it was a deliberate change and if so, when :p

    1. MichaelGC says:

      I can’t believe that’s deliberate! :D I’ve sent Shamus some screenshots so he can see what we’re on about…

      1. Shamus says:

        The problem with the old site: On mobiles it was constantly causing horizontal scrolling. This was really annoying and it always felt like everything was the wrong size.

        I noticed a built-in feature that would automagically adapt the site for mobile users. It removes the sidebar and replaces the archive navigation with a menu at the top. (Fine.) It removes the header image. (Not great, but tolerable.) And it removes the post date, splash image, byline, post date. (Unacceptable.)

        What I DON’T want to do is manually maintain two different themes, one for mobiles and another for desktops. So I can either remove this feature and restore the old site and all of its horizontal-scrolling annoyances, or we can live with this.

        I hate both options.

        1. Daemian Lucifer says:


          Was that deliberate?Because I like the word.Quite fitting for a bunch of programs.

          1. Shamus says:

            It was indeed. It got used all the time in the 90’s by old-timey engineer types. Now that I think of it, those guys were the age I am now. Huh.

            1. Abnaxis says:

              One of the products I used at my old job has an “automagic” interface that automatically creates HTML5 pages for viewing a mechanical system

            2. Peter H. Coffin says:

              It’s been around in programming culture since the 70s for things that Do The Right Thing for reasons that are too complicated and relatively unimportant to explain. Like a “compiler” program that would invoke the RIGHT LANGUAGE version compiler depending on the contents of the source file, instead of (for example) the filename extension.

              1. evileeyore says:

                Heck, I’ve known the word since the 80’s and I’m neither an engineer nor a programmer.

            3. Joe Informatico says:

              That makes sense. I used to listen to a podcast where one of the hosts was a tech reporter around your age (which isn’t that much older than me), and he used that word three or four times an episode.

            4. ThaneofFife says:

              I had thought it was a reference to Erfworld…

        2. Shamus says:

          At the risk of writing a comment that should probably be a post:

          The sidebar is the real problem here. It’s useful on desktops, but on mobiles the site works so much better without it. What I want is for the site to be exactly the same, except on mobiles the sidebar is missing and the header is narrower, so that the main content will exactly fill the width of the screen.

          This would be simple if I understood the sorcery used to differentiate between desktop and mobile users. But I imagine it’s probably either a stupid Javascript, or a messy CSS hack that will create annoying edge cases.

          1. Daemian Lucifer says:

            Personally,Id rather have some horizontal scrolling than comments that progressively get narrower.Plus,the easy zoom features of phones solve the scrolling problem elegantly already.

            1. Galad says:

              I did not notice the narrow comments until now. Thanks :<

              1. Christopher says:

                That part suuucks, otherwise I like this more than the horizontal scrolling of old.

                1. CraigM says:

                  And by the time you get this far in a nested comment, it’s basically 3 letters wide.

                  So I concur, whatever benefits to a mobile theme, it breaks comments badly enough to not be worth it personally. Because, unlike 99% of websites, comments are actually worthwhile here. It’s part of why I’ve come here for years.

            2. Duoae says:

              I came to mention this issue too. I never experienced the horizontal scrolling issue because just double tapping zooms you in or out to the content and fits it to your mobile window.

              I find the comments section much more difficult to read on this new mobile site….

          2. Stormkitten says:

            There are some new css commands to handle this.
            @media all and (orientation:portrait) {
            /* Styles for Portrait screen */
            @media all and (orientation:landscape) {
            /* Styles for Landscape screen */
            Then you can hide the sidebar in portrait mode. This applies to both phone browsers, and people who run skinny browser windows on desktop. The main issue is that sometimes opening the keyboard on a portrait phone will put the site back into landscape mode because the remaining area is now wider than it is tall – I guess that counts as ‘annoying edge cases’.
            More information here

            1. Wide And Nerdy® says:

              What I like about this is, while people (especially in offices) often lag on updating their desktop browsers, phone browsers tend to stay up to date. So you can design the site for landscape then put the exceptions in a portrait media query that can be safely ignored in older browsers.

              At least thats the kind of consideration I have to grapple with in my office where I couldn’t count on the user’s default browser to even support media queries at all until far too recently (Internet Explorer didn’t start supporting them till 9 and we’ve only been out of 8 for a couple of years).

              1. Thomas says:

                My work is on Internet Explorer 8 (and for some unfathomable reason, Chrome 44) I was excited when I heard they were going to update this year/next year.

                Then it turns out it’s going to be to Internet Explorer 11.

                Come on. Even Microsoft don’t want people using Internet Explorer now.

                1. Wide And Nerdy® says:

                  Well, at least now you get most of CSS3 and media queries. Congratulations.

                  Though if I recall, some transitions and animations aren’t supported (I don’t know. I haven’t had to play with that in a while.)

                2. Raygereio says:

                  A while ago I found out that several computers at my local municipality that are connected to the Internet and are used to transmit & receive sensitive & personal data, use IE 5. On Win ME.
                  Just be thankful for what you have. It could be so much worse.

                  1. Daemian Lucifer says:

                    use IE 5.

                    Shit,thats bad.

                    On Win ME.

                    Well thats a silver lining.Those crash all the time,so no one can break into them because they are never on.

            2. David Hudspeth says:

              I was just about to post this same link, but I got beat.

              At the risk of being banned for bringing up political arguments :) … why do you not like javascript? Have you tried Typescript?

              1. Shamus says:

                You’re both making the wrong assumption that I think PHP is “better” than JS. PHP is ABOMINABLE. (I’ve read the Fractal of Bad Design before. Great read, and hilarious.) But I HAVE to use PHP, because WordPress uses PHP.

                Like I said above, I don’t want to introduce a bunch of JS that I need to take care of. I’m sure it’s no big deal is you’re a pro, but if – like me – you only use JS once every other year, then you are not equipped to deploy custom JS in a production environment. I could copy & paste JS from the web like a dumb monkey, but that’s just asking for trouble I won’t know how to solve.

                Does the code work on all browsers? On all operating systems? On mobiles? Does it cause performance or memory issues because you’ve done something that SEEMS correct and appears to work properly but is actually horribly inefficient? Does it conflict with any of the other JS hiding under the hood? What’s the fallback behavior for users who have disabled JS?

                All of this is in addition to the fact that JS programming is SLOW if you don’t have all the class names and methods memorized and have to google every dang thing.

                1. Kyte says:

                  That’s what they invented jquery for!

                  1. And end up as one of many that code in javascript without actually understanding javascript.
                    If you ever search for “how do I do…” regarding javascript everyone are using jquery as a crutch.

                    Amusingly a lot of the thing in later versions of javascript are easier to do and uses less lines of code than the same in jquery.

              2. Typescript has the same issue as jquery. It is kinda like javascript but not really.

                Before anyone start using typescript (or whatever else) or jquery or bootstrap or whatever, I suggest they just try plain HTML(5) and CSS(3) and Javascript(?) first.

                There is nothing wrong with Javascript, heck Epic managed to make Unreal Engine 4 run fully in Javascript and that’s saying something.

                1. Richard says:

                  Also HTML/CSS will work on an offline page.

                  For some reason that I do not understand, all modern browsers completely disable scripting languages when the page is loaded from the local hard disk.

                  1. I think you are replying to the wrong comment. But I’ll answer anyway.
                    Firefox allows scrips to read from file:// but Chrome does not, I don’t recall but I think Firefox limits it to sub folders.

                    This caused a issue for me on a project as I had to load (via javascript) data from a .json file which Chrome did not allow.

                    Even Chrome should allow loading of scripts from the same folder as the .html file using script src. You just can no dynamically load scripts. (XSS protection).

                    Also, HTML and CSS are not blocked in anyway way even on Chrome. (there is no scripting with HTML and CSS).

                  2. Peter H. Coffin says:

                    The reason is that oh-em-jee levels of malware (especially lately, the encryption ransomware) are written in javascript, and it usually didn’t even require users to DO anything to invoke it. One of the biggest simple steps you can do to secure your Windows computer these days is to set the application handler for .js files to Notepad.

                    1. Browsers do not execute javascript directly, nor do they let it outside the sandbox so that’s not really an explanation.

                      And yeah, I did change opening of .js files to a editor instead. :)
                      I’ve never once had to run a javascript in Windows before, doubt I ever need to.

                      I have no idea why Firefox and Chrome does it differently though, it makes it difficult to make offline apps (basically a index.html file a .js file and a .css file in a folder) and “run” the app by opening the index.html file.

                      I wish Chrome and Firefox behaved the same way. It’s not fun to try and hunt down bugs only t realize Chrome is spitting out XSS warnings because your javascript is trying to reads a .txt file in the same folder as the .html file.

                      (The solution is to make .js datafiles that are loaded in the index.html file.)

          3. You’ll need to learn some CSS but the trick is basically using CSS3 features that let you reflow the layout based on aspect ratio/orientation and possibly pixel density.

            That way a narrow display (cellphone held vertically) will not have a side menu/twitter stuff.
            But if held horizontally (or on a desktop monitor) it will show.

          4. After diving head first into android development for the last month, one of the main things I absolutely LOVE about designing the interface is the use of things called “fragments.”

            The interface design code is a lot like HTML, but with fragments it allows you to create prefab segments to re-use / re-organize easily. It would be amazing if HTML could implement some of this in the future.

            for example, say my site has main visual sections: the main body, and the sidebar. Each of these contain multiple sub elements. In standard HTML, if I were to create 2 versions of this site for mobile, I would have to deal with re-organizing all of those individual elements dynamically through some Javascript or CSS bullshit.

            With fragments though, you would be able to create a “Main” fragment, and a “Sidebar” fagment, and simply create 2 very simple pages (one for mobile, one for desktop) where the 2 fragments are placed in different places. this makes it very simple to maintain, as if you want to edit a fragment, you edit the fragment and it updates in both places, and if you want to edit the layout, you change the position/property of one element on one of the pages, and you don’t have to deal with the mess of the entire webpage.

            1. Actually, HTML5 standard includes (or will include) pure HTML (clientside) include file support.
              This would avoid the need for serverside scripting to glue together header, content, footer and menu.
              I forget how far along this standard is now.

          5. Decius says:

            I think it’s the same as the magic used to detect browser and version. It just serves different content to browsers that identify as mobile.

          6. psivamp says:

            As long as you don’t make the call based on the architecture that the processor runs on. There are a number of websites that assume that a system running on an ARM processor simply must be a phone/tablet and want the mobile version of the site.

            My Chromebook running linux makes me hate those sites.

          7. methermeneus says:

            Yep, it’s a bit hacky in css. It’s also a bit of a hack in JavaScript, since it requires querying the user agent, which in turn requires that you add the following to the html:

            <meta name=”viewport”
            content=”width=device-width, initial-scale=1, maximum-scale=1″ />

            1. That has nothing to do with Javascript.
              That’s a HTML viewport meta tag which informs the browser how the viewport should be displayed, and it’s not a hack.

              1. methermeneus says:

                It’s hacky because the only way to do it on JavaScript is to query the browser, which doesn’t have any info to return if you don’t include that html tag. Anything that a language does that only works if you do prep work in another language I’d consider at least a bit of a hack.

                EDIT: or maybe a kludge. On reflection, that’s probably a more appropriate word.

                1. Make sure your doctype is just html to make sure the browser uses “HTML5” mode, otherwise it may use compatibility mode.

                  I’ve never tried to fetch display info via javascript. I tend to let HTML handle structure and CSS styling and Javascript enhanced functionality. So I never ran into that issue, I’ll take a gander/test it if I remember next time, I wonder if all browsers behave the same or not. If all browsers behave the same then that is acceptable if not then the browser that is “different” needs to fix itto match the others.

                  Also CSS min device and max device is not a hack, and is actually a key to making the content be responsive.
                  Some people may have their monitors in portrait mode, and making a left side menu a topside menu in that case increases the readable content surface.

                  As to -webkit prefixes, I generally avoid using any prefixes, if non of the current browsers support the unprefixed feature then I do not use it.
                  There are a few exceptions though (if my design relies on the feature being present) but I try to avoid that whenever possible.

                  And I never use any IE hacks or weird stuff like that.

          8. Rick says:

            I’m glad to have the old theme back on mobile, thanks.

            It’s fairly straight forward to create a set of media queries si that you can hide or show different elements and adjust font sizes and margins for different sized screens.

            Industry standard CSS. No hacks, no JS.

            Though JS could be used to make a mobile menu a little nicer than a plain CSS one.

          9. KoTrevel says:

            Afaik the correct way to determine mobile vs desktop is to check the width — if it’s small, mobile. Wide, desktop. CSS can do most of it, iirc, and it has the advantage of also working for narrow windows.

            But I’m a back-end guy so YMMV.

        3. Niriel says:

          I am actually quite happy about how things are now on the mobile version. Black on white, no fanciness that burns through my data plan or makes my browser hiccup. Yes, I still have to scroll horizontally to see the pictures that are inlined in the post, but this is actually more convenient than opening them in a new tab. I love minimalism and efficiency in user interfaces; I usually use Firefox’s “reader mode” but then I lose on the navigation side. What we have now feels like a perfect compromise to me.

          1. MichaelGC says:

            Have a look at the comments now that the replies have started shoving everything over to the right.

            If I
            have to
            to read
            nts now
            ed like
            this that
            ‘s not a

        4. Yurika Grant says:

          It’s incredibly important these days to have a properly adaptive website as well, Google harms your page rank if you don’t have a proper mobile version for tablet, phones, and whatever other gadgets people use.

          1. Google has a lot of magic algorithms.
            The basic rule one should always follow is “Content is King”.
            If the content is the focus of a page then Google’s crawler will like you.

            1. Yurika Grant says:

              Eh, not necessarily. There are over 200 things Google looks for when calculating stuff like page rank. But some are pretty big deals, and ensuring your site works properly on all devices is one of them.

              But yes, things like regular content updates (‘freshness’) are big as well, along with other things like linking to Wikipedia or citing sources, getting linkbacks from ‘trusted’ websites, etc.

              1. No I’m serious. Content is king. If your page has a ton of menus and fluff around and ads and other silly “You wont Believe what..” carousels at the bottom and such and the actual content is just a tiny paragraph then that gets penalized.

                I’ve lost count of how many times I’ve tried to search for a cheat or tip for a game only to find a place holder page for said game, and sometimes these pages are years old.
                The only reason for such pages is to namely get hits in a search engine and get the ad views.

                Google have begun to improve the algos for this. The same goes for similar stuff like product review pages.

                There is still a huge issue with “fixes” pages out there, which appear when you try to search for a fix. Pretty much all those DLL fix or “Download Fix” sites out there are traps of some kind.

                A lot of all that crap is autogenerated (there are crawlers that scrape news sites or other game sites then they add empty a listing/page to their own site).

                Several times have I searched for a walkthrough only to find links to a page with just the name of the game with walkthrough tacked on the end and that’s it, no content.

                Google’s algos look at the actual content text now (besides looking for adsense keywords) and they can spot the usual trickery.

        5. Zak McKracken says:

          I usually just double-tap the post text (on Firefox for Android, but all other browsers on Android I tested do the same) to have it zoom in to the horizontal size of the frame (the article, a comment, the sidebar…), and that’s large enough to make it all nicely readable, at least if I hold my phone sideways.

          For most sites I use regularly, I usually prefer the desktop version to the mobile one since the mobile ones hide so many things, and for some reason the automatic zoom-to-frame function does not work there, making them harder to read in some cases…

  2. Da Mage says:

    The white….IT BURNS!

    This reminds me of the old grey background from when I first started reading.

    1. Andrew Blank says:

      Wait, the site hasn’t always had this white background…?

      1. tmtvl says:

        I distinctly remember ponies.

        1. Fade2Gray says:

          I think that was before he replaced it with that tiled image of TIM burning in effigy.

      2. Nick-B says:

        That was my thought too. I read the title of this post and was all “NOOOO! DON’T CHANGE ANYTHING! I LIKE IT THE WAY IT IS!”

        At the end of the post, when he points that the background is now white because of “reasons”, I noticed.

    2. tmtvl says:

      Now that it’s blue I have to say: the buttons on the title don’t really do it for me, but aside from that the site is much more agreeable than it was.

  3. Daemian Lucifer says:

    But while container scrollbars can use the normal scroll wheel controls, they don't respond to the keys that govern site navigation: Page Up, Page Down, Home, and End.

    Actually,they do.But you need to be focused inside first.But unlike the scroll wheel that focuses on wherever your mouse pointer is,you have to either tab to something inside the container,or click inside of it.Im not sure how this focus would be done automatically(without java,I mean),and if that would break something else.So probably not worth the trouble to try.

    1. “without java,I mean” I think you meant javascript, java is a completely different beast.

  4. baseless_research says:

    The light… it’s so pretty!

  5. Daemian Lucifer says:

    Maybe there are other ways of getting this done that won't exhibit this problem,

    Have you tried java?I believe that would solve your problems rather quickly.

    *runs for cover*

  6. DrMcCoy says:

    I on the other hand hate that parallax effect. Have some random piece of the site behave differently while scrolling is super annoying, because it grabs my attention and redirects it to the useless background. It makes keeping my focus on the text and not losing my place so much harder.

    1. Daemian Lucifer says:

      Zoom helps me quite a bit in that regard.I barely even noticed the change yesterday,because for me,the text part of the blog is set to almost completely cover the screen.I set every site I visit regularly like that.

    2. I know what you mean. I even dislike a fixed background (background stays still but the content scrolls), only times I’m ok with a fixed background is when the content has proper “boxes” for the content (which this site usually has).

      1. potatoejenkins says:


        And while I do not hate the parallax effect per se, it might clash with the use of screenshots dotting most if not all of the articles of this site. Most of the time the screenshots are an integral part of the article and I wonder if the parallax effect might lead to a bit of visual overkill in that regard.

        It will depend on the background of course.

    3. Niriel says:

      I agree. I usually ask adblock to hide the background image when a website does that.

  7. potatoejenkins says:

    Well … I like white.

    Joking aside, the little bio and the patreon link at the end of each post is nice.

    Am I correct in the assumption that the comment section is entirely a WordPress thing? I may even have read it somewhere here, I just can’t find the article/comment.
    What I found myself missing the last few times I left a comment was – and I am aware that it is some kind of a luxury in a simple comment section – a “Preview” button.
    The auto-correct button helps, of course, but it does not tell me when a link I want to post doesn’t work or the formatting is off.

    The editing option does not tell me if something went wrong and is only available for a limited amount of times before the comment gets flagged as spam (?). Which in turn forces me to leave a broken and useless comment whether I want to or not.

  8. Warclam says:

    I never really thought about it much, but this seems like the place to mention it: on both Chrome and Safari, the sidebar only stays to the side on the main page. On articles, it’s pushed all the way to the bottom. Is that intended?

    1. Cilvre says:

      I’m on chrome and not seeing the issue you are seeing. It stays at the top next to the article for me.

      1. Syal says:

        Also on Chrome, also fine. I saw it doing that a while back but it was months ago.

        1. Peter H. Coffin says:

          doesn’t show up until the bottom of the page (Chrome Version 53.0.2785.116 m (64-bit) fwiw)

          1. Cilvre says:

            I’m on Version 53.0.2785.116 m (64-bit) as well.

        2. Warclam says:

          And now, suddenly, it’s not doing that for me either. So, the problem solved itself… somehow. Hooray?

          1. Shamus says:

            I had some incorrect CSS.(Is there any other kind?) It defined a bunch of different containers as being “800 pixels wide”, but one of those containers was BODY. This meant that anything that didn’t explicitly have a width explicitly set therefore WANTED to be 800 wide, even things that were already inside of 800 wide containers that might have various levels of borders and margins and padding. (This bit of tomfoolery wasn’t my doing. It was an artifact of the theme I used as a starting point.)

            So this directive to put 800 wide boxes inside of 800wide boxes inside of 800 wide boxes created an impossible layout, and apparently browsers coped with this in different ways based on screen size / version / operating system / phases of the moon.

            I fixed this particular problem earlier today, which probably explains the change in layout for some people.

            1. MichaelGC says:

              I’m getting Battlespire inventory flashbacks.

              1. Philadelphus says:

                This is the browser equivalent of nesting Bags of holding, isn’t it?

            2. Richard says:

              It always amuses me when people say that behaviour depends on “the phases of the Moon”, having built a fairly large project that genuinely does.

              It’s very predictable, other than not being an exact multiple of midnights.

    2. Slothfulcobra says:

      I’m getting that too. What’s more is that there’s still a blank white sidebar to the right that covered up one of Shamus’s annotations on his last FF post. Something’s weird with that.

  9. Cilvre says:

    i view the site with dark reader addon for chrome since the colors are usually way too bright for me.

  10. Slothfulcobra says:

    I feel that the byline is excessive. The icons are probably enough, and people who can’t follow that in tandem with the fact that all the content of the posts differentiates you might as well be browsing other sites thinking that everything’s being written by Johnny Escapist or Billy Giant bomb or Alexander PCGamer.

    What you could do is add the rest of your cast to the “about me” page so people can know more about them if they want.

    Also, I just noticed that Shamus’s and Rutskarn’s names link to their individual Patterns, but Josh’s just links to the Twenty Sided homepage. That seems wrong.

    1. Rutskarn says:

      We had assumed the same, but discovered we were mistaken. People actually were confused about who was writing what, particularly when the postis a one-off.

    2. Christopher says:

      Yeah, if you just check the last Twenty Minutes With, there are still people confused that it was Josh. This happens on every other content with someone else too, except maybe Rutskarn’s let’s plays.

      1. Rutskarn says:

        If you’re wondering why I name every series “Rutskarn’s X” or “Ruts Plays Y” or whatever, that’s the reason. I don’t want anyone to blame Shamus for the spider daedra sex narratives.

        1. Christopher says:

          Considerate move!

        2. Lanthanide says:

          We all know you just want to keep the credit for yourself.

    3. tmtvl says:

      Josh basically uses Twenty Sided as his own blog every now and again (less now that he’s finished Shogun 2, but still). Used to be a running gag that his name on the Diecast linked to some villain or other terrible thing, but it’s been set on some wrestling thing for a while.

      1. Daemian Lucifer says:

        Not just some wrestling thing,but FUCK YOU JOSH wrestling thing.

      2. Peter H. Coffin says:

        “finished” Shogun 2. Yeah, that’s it..

    4. Syal says:

      I never notice the icon, there’s a lot of filing stuff around it that drowns it out. The byline’s a lot more obvious.

      Of course, I’ve never been hugely concerned with who writes the post to begin with, I figure I can identify the author when they show up in the comments to tell me not to insult their mother anymore.

  11. Droid says:

    I was wondering already if this is new or if I had been totally, utterly blind for the (probably) year or two that I read your site.

  12. TMC_Sherpa says:

    Ooohhhh, can we make suggestions?

    The comment div isn’t set to 800px (like the entry div) which pushes the sidebar to the end of the page rather than keeping it at the top (like on the main page)

    You don’t even have to resize the whole thing,

    #respond {
    width: 800px;

    solves it nicely.

    That said I have no idea what it’ll do on mobile, firebug will only get me so far unfortunately.

    Addendum: wordpress is pretty ugly under the hood. I guess that’s the price one has to pay in order to have a fancy pants layout editor thing.

  13. Retsam says:

    As someone who writes Javascript professionally, it’s a lot better language than people give it credit for. Yeah, it’s obviously not a perfect language, but beneath some surface level blemishes, there’s a fairly elegant language that’s a hybrid of functional programming and more traditional imperative style.

    It’s definitely possible to write really clean and elegant JS; unfortunately for Shamus, most of the people who can do that stay as far away from WordPress development as possible, it seems.

    It’s certainly not the fractal of bad design that PHP is.

    1. PizzaRollExpert says:

      As a fellow person who likes writing JS, one big problem it has is that you really need to get JS to do so effectively.

      It is famously full of “bad parts” that you just need to be aware of and avoid. Thankfully, generally you can avoid these and use the parts that are sane, but this requires knowing which parts are bad beforehand which requires either a lot of experience or research.

      One famous example is == vs ===. If you write 1 == “1” this evaluates true, as the language attempts to coerce both operands into the same type before comparing them. Unfortunately this is a bit unpredictable as “false” == true for example. Reliably using the == operand requires knowing the rules of how the type coercion works, which isn’t exactly developer friendly. Or you can just use === which always returns false if the types don’t match up, and do any typecasting yourself, eg. String(1) === 1 so that it’s clear what’s happening. You can do what you actually want to do, but it requires some knowladge about the languages quirks. Brendan Eich, the designer of the language famously referred to these “features” as “foot guns” as the only purpose they serve is shooting the developer in the foot

      Another problem JS has is that it claims to be similar to Java while only being so on a very superficial level, so you have tons of Java programmers coming in assuming that they basically know how to do stuff and then becoming frustrated when they run in to either strange quirks, or the fact that JS and Java are actually based on quite different ideas and programming like you do in Java in JS requires actively fighting the language.

      1. Retsam says:

        People make a much bigger deal of `==` vs `===` than it actually is. Absolutely, the behavior of == is a mistake in the language design, but in practice, it has no impact on my actual ability to develop JS: I just don’t use it, so it doesn’t cause any trouble. It’s not really “one of many JS ‘features’ that you have to know to avoid” as much as it’s the only JS feature you have to know to avoid.

        I’ve never met any programmers who actually thought JS was related to Java. Sure, it’s a silly name for the language in retrospect (and, really, was a silly name in the first place, but whatever) but I really wouldn’t call its silly name a “problem with JS”. I don’t think there’s really an epidemic of confused Java developers who didn’t bother to do five minutes of research before programming in a language.

        1. Cybron says:

          Stuff like closure is also pretty confusing if you’re coming from a more standard language, IMO.

          I did some heavy javascript lifting last year and I do think it’s a really cool language. But at the same time, I can’t say it’s a good place to start and is generally less friendly than most compiled languages.

        2. PizzaRollExpert says:

          How about automatic semi-colon insertion? Or null, there is both null and undefined which is a bit redundant – and then there’s typeof null === “object”. Or String.substr vs String.substring vs String.slice which all do the same thing, but act in different ways. Some of them even do different things in different browsers. Or the list of reserved words which includes a ton of words that aren’t used in the language, but doesn’t include undefined, NaN or Infinity, meaning that you can overwrite them. Or for in loops and, ‘bar’).

          It’s not just the name, it’s also that it looks like a c-like language. The problem isn’t so much actual JS developers, as much as people like Shamus, for example, who have programming knowledge but only want to do a small thing for their blog or something and it sure looks similar enough. What’s worse is that JavaScript uses words that mean different things in most languages to do it’s own thing. Words like new, or this or more recently Class which imply a class-based inheritance system when JS actually has prototypal inheritance.

          1. The semi colon stuff (or rather forgetting it) drives me nuts, I really dislike that in both C and Javascript.

      2. I’ve “stopped” using ==, usually if I see == in my own code I’m now wondering if I meant = or ===.

        Most of the time === is better as it’s explicit, it’s rare that I wish to treat “false” and “0” as the same in Javascript or PHP.
        I’m not sure (from the top of my head) if I’d actually miss == if it was removed from those languages.

    2. tmtvl says:

      As another person whose job entails the use of JS, pure JS without jQuery is painful. Stuff like ember and angular is neat, but jQuery is pretty much a must-have. Especially combined with bootstrap.

      1. Retsam says:

        I think jQuery’s actually mostly a relic at this point. If you’ve got to support IE8, sure, use jQuery, but otherwise I pretty much avoid it. There’s You Might Not Need jQuery that covers the vanilla JS equivalent for most jQuery logic. (Vanilla JS AJAX syntax is still ugly, but there are better, more focused, libraries if you just want a cleaner AJAX API)

        1. I created/create a XHR function that I recycle for my AJAX stuff, or more like AJAJ (as I prefer JSON over XML for many things now).

          I have my own private library of functions now I copy and paste.

        2. BTW! I’ve read “You Might Not Need jQuery” before and it amuses me some.

          take the getJSON thing. If you search Google for “getjson error” you get this

          And when you look at the example code in the most upvoted answer there then look back at “You Might Not Need jQuery” you see that the number of lines are not that much different any more.

          That being said, I usually use a try catch for JSON.parse in case the JSON is invalid so I can respond/handle that and inform the user in some way (rather than breaking the script).

          Also. jQuery’s function “getJSON” calls the “get” function which calls the “ajax” function which is a several pages long function that calls a setup function a deferred function a callback function and well look for yourself:

          leads to

          which leads to this monster

          At this point I’m questioning if performance is valued at all.

    3. Languages like PHP and Javascript both suffer from the same issue that Windows suffer from. Backwards compatibility.

      A lot of people are really upset now with PHP7 getting rid of old functions and such, crying that their site is now ruined or something. As if they are forced to use PHP7. They can still use PHP5 if they want to.

      Same shit with Javascript. People complain how limting or how non-crossbrowser it is and swear to jquery or similar except that current versions or ECMAscript (aka Javascript) actually handle some of that stuff better than jquery now.

      They are evolving languages. C is not a evolving language, it’s standard library may be evolving but not the language itself (not much at least).
      PHP and Javascript do not have a library (or rather the library is an integral part of the language).

      Old PHP4 scripts need to be able to run on PHP5 with minimal changes.
      Sometimes a underscore is used for functions sometimes not, some of those are probably dating back to PHP3.

      Not long ago people where crying bloody murder because PureBasic was going to ditch making non-Unicode executables.
      Unicode executables date back to Windows 2000 (NT4.0) which is a Unicode OS, and all Windows since then (XP, Vista, 7, 8, 10) are also Unicode.

      I always find reading the PHP changelog for interesting. I often get a small joy when I can say “yes, now I can stop using that old function” when they replace it with something better.

      I’ve read the “php-a-fractal-of-bad-design” and he complains about == vs = and such. That stupid thing exist in a bunch of languages out there.

      Stuff like “mysql_real_escape_string” is something I avoid, Instead I use other ways that use parameters that are automatically escaped.

      Stuff like underscores or not with “strpos, str_rot13” is something I’m often guilt about myself, I guess he wants “str_pos” instead? I do not see how this make PHP broken though.

      Now “foreach ($foo as &$bar)” does grate my nerves, but so does “**” and similar in C etc.

      “no stack traces by default or for fatals, complex error reporting” this is kind of odd.
      You do not want debugging enabled by default. And there are settings and extensions that let you do insanely detailed stack tracing with PHP.
      The last thing you want is huge log dumps or a web page spewing out lots of error info and systems paths and settings to visitors.

      I remember when ASSERT became popular in various languages, everybody used them. Even in shipping builds (shakes head).

      PHP7 is moving in the right direction. I’m assuming that PHP will continue to evolve with PHP 7.1 and 7.5 and eventually PHP8.
      Now if it evolves in the right direction is another matter.

      Unlike the author of “php-a-fractal-of-bad-design” I do not inherently like or dislike any language. I prefer what is simple, quick, and works well for the job at hand, and what I’m used to using.

      If i created my own language it would be a lot different than most languages I’m sure; I’d never allow nonsense like = and == and === to be used, I’d use = for comparison and maybe something like := for setting to avoid common and difficult to catch typos.

      1. DrMcCoy says:

        No, C is very much still an evolving language: have you seen what C11 changes, for example? Not just standard library changes, but core language concepts as well, like _Generic. And gets() has been removed in C11, too.

        Unfortunately, unlike C++, a lot of compiler vendors just ignore new C standard revisions. Microsoft especially is famous for not adopting new features and when they do, being very late.

        C++ is also of course very much evolving, with new language constructs (move semantics), new STL features (std::unique_ptr), deprecation and removal (std::auto_ptr), and non-backwards-compatible changes (std::list::size() needing to be O(1) in C++11).

        C and C++ compilers are constantly evolving as well. Gaining new optimization techniques (in recent years, there has been some push-back there, due to people relying on certain Undefined Behaviour that compilers begin to exploit now), new checking and debugging tools (ASan, MSan, UBSan, clang-analyzer) and smarter warnings during compilation, to just name a few.

        1. Um isn’t gets() part of the STL? (a second later after Googling, yep kinda proving my point).
          C didn’t change, the STL did though. Most of those language revisions are purely STL based not really touching the language itself.

          (You can actually program in C without actually using the STL, if you do not need/use malloc but a OS API calls instead for stuff like that then you do not need/use much of the STL stuff at all).

          And _Generic looks to be a compiler directive? (correction, it seems to be a macro actually)

          By C language I actually mean all the “if then else” stuff not the library (STL) or compiler features (directives/macros and such).
          Now the C11 and C++14 stuff (or whatever its called) is cool as it tries to unify all the extra stuff for the language that compilers used to add on their own (each compiler had their own STL).

          Now I haven’t dived into the STL but am I right in guessing that the _Generic is defined inside the STL somewhere?

          Although there is still the issue of compilers not fully supporting all C11 stuff and so on so you might get compiler errors on one compiler but not another.

          I know I’m probably upsetting some folks here but to my eyes a language is not it’s STL. As an example PureBasic has a huge number of functions in it’s “STL” but often I use Windows API functions instead.

          If you disable/ignore/do not include the STL then what you got left is the basically the core language.

          1. DrMcCoy says:

            Errm, you’re mixing two different languages here. C and C++ are distinct. C++ has the STL, the Standard Template Library. C doesn’t, C has the libc.

            And no, _Generic isn’t a macro. It needs compiler support; it’s part of the language just like if/then/else. You can’t write a macro and add it to your project to gain support for this feature. At all.

            (What you may have seen: the use of _Generic can be hidden inside a macro. That’s the layer on top of _Generic to make it look less unwieldy.)

            Just like anonymous structs and unions. Or for a C99 examples: variable-length array. None of these can be achieved simply by adding stuff to the libc.

            I.e.: you can’t just write a library that adds these features to a compiler that doesn’t support these constructs.

            Similarly, for C++11, while unique_ptr is part of the STL, it requires support from the language specs: move semantics. That can’t be emulated. That’s why, for example, there’s no unique_ptr Boost.

            As a contrast, there is shared_ptr in Boost, because that doesn’t need language support. So even if your compiler does not support std::shared_ptr from C++11, you can simply include Boost::shared_ptr (which is even just a small collection of header files!) and gain shared_ptr. This is not possible with unique_ptr.

            Or, to give another analogy: _Generic is to C what template is to C++. If C++ didn’t have the “template” keyword, you couldn’t implement it in C++ yourself like this.

            (Yes, since C is Turing-complete, you can implement something that achieves a similar effect, but if you’d argue in that direction, you would essentially say that all languages are fundamentally the same. Which is a whole ‘nother kettle of fish.)

      2. Khizan says:

        I'd use = for comparison and maybe something like := for setting to avoid common and difficult to catch typos.

        Ugh, no. this is awful. It goes against practically every single established convention and all it does is ensure that people get it wrong in your language. It’s like LUA using 1-based indexing and ~= for inequality instead of !=.

        It’s just irritating and all it does is throw people off without adding any extra additional clarity. Python and C and Java all tell me that “a = b + c” is assigning a the value of b+c. Having that expression be an equality test in your language is going to muddy things up instead of clarifying them.

        1. Then I’m going to use = just to annoy you then! :P

        2. Richard says:

          Pascal used “=” for equality and “:=” for assignment.

          So technically, it’s been around longer than C.

      3. Echo Tango says:

        Using = for comparison wouldn’t really help, though. I mean, the original definition of what that symbol means is math, where it essentially means both assignment and comparison. (Insofar as you can relate equality to comparison and assignment.) Would probably be better to just keep == for comparison, and := or <- or something for assignment.

        1. “<-" is an oddball in my eyes, but using == instead of = I can sort of understand, although == is one more character than =.

          But "if (x + 1) = 2 then" is how you would write (and think?) it as a math equation right?
 does not even list "=="

          I'm not even a fan of ":=" so I'd might want to use something else, simple stuff like this should only have to be a single character (since you'll be typing them a lot).
          Stuff like "<=" or "” are less typed, and although it’s tempting to use a single “!” in front I think “” just looks clearer.

          “the original definition of what that symbol means is math, where it essentially means both assignment and comparison” really? I can understand that if you do “x + y = z” But if you do “1 + 1 = 2” you do not really assign a value “to” a value and change it do you?

          I could use “:=” for a theoretical language, but that can be confusing if “:” is used as a label prefix for example.

          Sidenote: Languages “before” C used = but B (and C) introduced == which I think is unfortunate. Ideally they should have used = and instead changed the assignment to something else, what I have no idea really, it would have to be something that is one character ideally and that you wont break your fingers trying to type.

          1. Philadelphus says:

            Well, we could always use Unicode! Use ≠ for “not equal to,” and ≡ for “equivalent to.”

            (Yes, this would require lot more key strokes. ;)

  14. Philadelphus says:

    I like the current sky-blue-with-clouds background; very subtle and understated.

    1. baud001 says:

      Me too. It feels a lot more welcoming than the harsh white.

  15. Blackbird71 says:

    “I'm going to remove the parallax and go back to a fixed background.”

    That was the best news out of this whole post, honestly. I absolutely hate the website parallax effect! The things it does to eyes and visual tracking is annoying to the point of being painful.

    In the end, it’s your site, Shamus, and you can do with it what you like, but I for one am grateful that at least for the time being the code gods have conspired to block this unholy effect.

  16. Loonyyy says:

    Wow, that’s really interesting. I love how you explain the details of design that goes into updating the site, it’s like a miniature project entry, and I really enjoyed your coding posts, and reading your thinking on a project.

    A minor suggestion, the blue is good, but it’s a bit bright and cyan, and clashes a little with the background on blue comments, and on the entry field that I’m typing in to leave a comment. It might be worthwhile to adjust that slightly, but then again, my flair for visual design is roughly nought.

  17. Anachronist says:

    My go-to place is for things like this. There are plenty of examples that have minimal or no javascript, just type “parallax” in the search box.

  18. Steve C says:

    While we are talking about the website I want to mention https. The security certificate for has been invalid for quite some time now. Months. Can that be fixed so https works again please?

    1. OOh! Maybe Shamus could try out (Mozilla’s free certificates basically).

      (Though that depends on how much control he has over the server).

      1. Echo Tango says:

        I could have sworn that it’s a box running in a closet somewhere in his house, although I may be confusing Shamus with somebody else. :)

  19. Cybron says:

    I really don’t like the color of the background on desktop. It feels a bit blinding. On mobile, I preferred having the ability to zoom in even if I had to scroll sideways. I really hate it when sites arbitrarily restrict your ability to zoom in. Phone screens are tiny, I like bigger text, but I cannot get it on a lot of mobile site designs.

    Definitely a miss for me.

  20. Rick says:

    I could help you with CSS to make the main theme work much better on mobile if you want.

    I do this all the time for my job and I’d love to be able to give back to though I can’t financially.

    1. Responsive CSS?

      I’m making a big assumption that Shamus might want to learn/do it himself. Tips/coder snippets/links will probably help though.

      There is also the issue of WordPress a future update can break everything if unlucky (depending on plugins etc).

      1. Rick says:

        Yeah responsive CSS. Much better than different templates. And normally a lot easier to maintain.

  21. Rick says:

    Oh, and parallax can cause stuttering on very low end machines. Especially if you’re also using CSS blur on the background image.

  22. Shamus, the site/category menu at the top isn’t the ghosting of the “buttons” backwards?

    From a usability standpoint shouldn’t the buttons be easier to read by default and ghosted/highlighted/different when hovered over?

    Right now they are easier to read/see when hovered over and covered with a milky film by default.
    Luckily the constant of the images are okay, but I still feel the need to mouse over them to see them. To a new comer it might look like they are broken or not-available/disabled.

  23. Am I the only one that miss the collection of dice at the bottom of the page? :)

  24. Since Fractal of bad design has been mentioned and it roasts PHP I thought this might be appropriate as it highlights common mistakes people do with Python

    In the comments at David Hammen points out the following:
    “t is as if the python developers ignored the lessons of the past. Not declaring variables, not declaring functions, is a mistake first made in the 1950s. Those hard to find bugs that resulted from a hard to spot typo were amazingly enough first made in the 1950s. This language mistake has been made (and later corrected) time and time again. Declaring variables is not a huge burden. It has saved my butt multiple times.”

    I have to agree with that.
    Myself I use “use strict” when programming Javascript. And in PureBasic I always make sure to force declaration of variables. And in C I always turn on full warnings. Same with PHP. And if a linter or syntax checker is available for the language I always use that when possible.

    And while I often sin when it comes to coding consistency I always try to be very strict in how I name things and how I handle parameters for functions etc.
    These days I’ve moved to always using a return value of 0 for functions to meaning No ERROR (aka SUCCESS) any non zero value is a error code.

    The only exception is if a function returns a number (integer or float) and 0 (or some other default value) is a acceptable value to return in case of a error. Or in other words the function can never actually fail, it always returns something valid.
    In case of string functions they always return a string, if there is a error they return a empty string. Note that these are usually functions that you pass data to and spit data out from.
    For more complex ones (like reading from the Windows registry I always use return code for functions).

    Over the years I’ve become more and more strict in how I code things, maybe it’s gotten to the point where I might want to write a language neutral style guide for myself.

    1. DrMcCoy says:

      And in C I always turn on full warnings

      Same. For C++, my current warning flags are “-Wall -Wignored-qualifiers -Wpointer-arith -Wshadow -Wsign-compare -Wtype-limits -Wuninitialized -Wunused-parameter -Wunused-but-set-parameter -Wnon-virtual-dtor -Werror”. I really need to check what gcc 6.x added, though, if there’s something useful I can enable.

      Similar for C, but, well, without the -Wnon-virtual-dtor. :P

      And I frequently run my FLOSS projects through Coverity Scan, which is a really powerful static analyzer. It’s free of charge for FLOSS projects.

    2. Echo Tango says:

      bugs that resulted from a hard to spot typo
      Luckily there’s editors* that will highlight all occurrences of a variable, and they’re smart enough to know about scope. So, if you’ve got some loop like, for robot in robots:, and somewhere in there you mix up “robot” and “robots”, you’ll be able to see it right away, if you just highlight all the occurrences of “robot” or “robots”.

      * PyCharm (Community Edition is free, and) has all the features I could ever want for doing Python. :)

    3. @DrMcCoy
      Thanks for the tip, I’ll have to remember that when I do some FLOSSing. I try to use ESLint or JSHint for Javascript stuff. Coverity Scan looks nice but I’m not sure Id’ like to have the “threat” of a analysts published if I’m slow during development in fixing bugs/issues in my project. If I don’t code/fix bugs for a month I don’t want the laundry aired yet if you know what I mean. I’d rather use a offline static analyser at my own pace.

      @Echo Tango
      Yeah, and Don’t need a IDE either. Sometimes a text editor with syntax highlighting may help you catch lots of issues as you type. These days I’m using MicroSoft’s open source VS Code editor, I use it for all text work be it text files. ini or .js or .html or .php etc.

  25. Ciennas says:

    Just throwing in my two cents:
    I like the current build on my mobile as of time of writing, save for the background color. I liked the image you did have. Any way to toss it in the mobile mix? Or something other then skyblue on sky blue?

  26. Pylo says:

    I find it amusing how everyone just accepts the current state of software engineering where you now have to know dozens of different programming languages to accomplish even the most menial things on a couple of different platforms and it’s even a point of pride among most programmers to count how many languages they know. But almost nobody questions the stupidity of having to waste resources on learning or even just switching to a different language or development environment every time you want to use a slightly newer technology or support yet another device/platform.
    You might think that this is accepted because all these fancy new languages are clearly superior to the old ones but you would be wrong. They are just different and usually allow for lazier programming which almost always comes to bite you in the ass later and you still have to use all the old languages anyway because there are things that they do much better and there is a huge amount of legacy tied to them.
    So here we are, apparently every problem in computing now requires an invention of a new language which somehow fails to make languages established back in the 80’s obsolete.

  27. Neil W says:

    I for one can’t wait for Mumbles, Chris, or one of the irregulars to make a guest post to find out what their biography says so I can complete my cosplay of them.

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="">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.