Site Update

By Shamus
on Jul 2, 2017
Filed under:
Notices

Heads up, buttercup: Last week I said the site was moving to a new IP. That actually didn’t happen until this weekend. Now the https is all set up. The links are updated, and now if you use the forum link in the header you should be taken to the secure version of the site.

While I was at it, I fixed the CSS so that the large first letter of a post wouldn’t get cut off if you began a post with a yellow aside box, which was the case for every post in Bob’s Game of Thrones series.

Technically, you should be able to access this blog via https://www.shamusyoung.com/twentysidedtale. However, I’ve been having mixed results with this. I go to the front page, switch to the secure version, but then after clicking on some links I look up and see I’m back at the vanilla version. But other times not?

WordPress wants a fully-qualified URL for the root of the site. It prepends this to all automatically generated links, which includes a lot of the navigation stuff. I’m assuming this is the root of the problem, but I don’t know. The problem seems pretty inconsistent. It happened constantly last night, but tonight I’m having trouble getting it to happen.

I could change the ENTIRE site to ALWAYS be https, but I don’t know if there are drawbacks or problems to doing this. Would that be slower in some situations? Would that cause hassles? I don’t know what the drawbacks of https are so I’m wary of making sweeping changes without gathering a little feedback first.

Anyway, don’t worry if none of this makes sense to you. This is a small thing impacting an even smaller number of people. The point is, I did a technical thing that changed some stuff that is probably working or whatever.

Enjoyed this post? Please share!


20929 comments. Hurry up and add yours before it becomes passé.

From the Archives:

  1. Zak McKracken says:

    “large first letter of a post”
    …what? I don’t remember ever seeing large first letters in posts… I mean the capital letters in postheaders are larger but I don’t think that’s what you mean.

    That said: I don’t really mind, it all looks fine to me.

    And: YAY for HTTPS! Works fine! I tried a few links, and they’re all https for me.

  2. CruelCow says:

    With CSP you can instruct browsers to rewrite all links to https if they loaded the https version of a site: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests

    Since you’re worried about breakage: You can set Content-Security-Policy-Report-Only (explained at the bottom of that page), then browser will not actually enforce the rule, but report violations.

  3. Daemian Lucifer says:

    Shamus,the rss feed still links to the http version.Do you need to change it manually?Or is there a new feed with links to the https version?

    Also,while the blog works perfectly with https,the forums do not for some reason.

  4. It’s also possible that the browser is caching the page. From a security point of view one would assume that a browser would fetch the https version if the http one is cached, but who knows, I certainly haven’t tested that.

    Another thing to keep in mind is that any url that starts with // will default to either https:// or http:// depending on what the referrer url was.

    A website should usually not use http:// or https:// but relative urls only.

    And in the future browsers will always try https first (and only try http if there is no https version of a site).

    BTW! If anyone has the site bookmarked you will need to re-bookmark it as Chrome at least treats http and https bookmarks as separate sites.

    • Richard says:

      As does Firefox.

      I suspect that every bookmark that included the protocol part will need to be updated.

      • psivamp says:

        If you use HTTPS Everywhere, you can add a rule to always use the secure version of the site. (You must do this from the secure version)

        Technically, secure web traffic is more work than insecure. I’d still vote for forcing https on for all content.

  5. Rosseloh says:

    The only thing I noticed (when I popped into the dev console to check your certificate) was this:

    Mixed Content: The page at ‘https://www.shamusyoung.com/twentysidedtale/?p=39484#comments’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz’. This request has been blocked; the content must be served over HTTPS.

    It doesn’t appear to be actually causing any issues, but hey, it’s a thing.

    • A quick fix for this is to change it to ‘//fonts.googleapis.com/css?family=Belgrano’ and ‘//fonts.googleapis.com/css?family=Yanone+Kaffeesatz’ this will make the browser do a https call if the page is https or http if the page is http. This is also how Google does it in their own scripts.

      “It doesn’t appear to be actually causing any issues,” it has the potential to with restrictive firewalls or very secure browser modes.

      Also “JQMIGRATE: Migrate is installed, version 1.4.1” is showing up in the console here, wasn’t this debug info removed previously, or was it never removed in the first place?

    • Shamus says:

      ???????

      That font – and all references to it – was removed months ago. I’m looking at the site and the RSS sheet, and I find no text matching “Yanone”. (Or Belgrano, which Roger is also seeing.) The only font I’m requesting is Noto Sans, and that’s done via https.

      I can’t imagine how this would be happening unless people were somehow caching a months-old style sheet. I just… what’s going on here?

      • Rosseloh says:

        I don’t see it in the stylesheet my browser loaded, either. Or in the page source (except for in these comment bodies).

        The Chrome dev console shows that the error is coming from “shamusyoung.com/promo/index.php”. If I’m reading it right. My webdev knowledge is limited to being pretty decent every two years or so when rebuilding/designing/fixing the company website, and in between those times is absolute shit.

        • Shamus says:

          Ah! The promo box. That explains it. Thanks so much. That was driving me crazy.

          For the curious: The promo box is the “From the Archives” thing that appears below each post. I should probably just make that a WordPress plugin so it inherits the style sheet and doesn’t need its own.

  6. Hey Shamus, regarding performance:
    https://www.webpagetest.org/result/170702_QW_KVB/
    https://www.webpagetest.org/result/170702_KE_KW0/

    The difference isn’t huge. First Byte takes about 180ms longer. And about half a second longer total page/load/render.

    Also, since two fonts are fetched over http while the rest are fetched over https could make out the difference as the browser need to make https and http calls to google fonts rather than just a https connection.

    There are much larger gains from optimizing image compression.
    https://webspeedtest.cloudinary.com/results/170702_KE_KW0
    PS! This does not take into account HiDPI screens, in which case higher res (but scaled down in the browser) images gives a clearer image.
    One neat “trick” is to use larger images but more aggressive compression, this should result in a better image than a lower res one with less strict compression (the image speed test does not take this into account).

    • Zak McKracken says:

      Wow, that’s a lot of savings — although sometimes the suggestion is just to decrease jpeg quality, which may not always be the best idea. Some of the logos and cartoon-y images would probably take up way less space as high-res, non-antialiased PNGs. My experience with line graphs is that they’re smaller at 4 times the edge width and no AA then they are with 4xAA. Of course, once they’re in jpeg format, png will try to losslessly compress the jpeg-artifacts, and that kills it.
      But really, SVG is my favourite format for that kind of stuff anyway. Is anyone actually using that on the web these days?

      Also, webp seems like a pretty decent format.

      • I actually use SVG Where possible. Sometimes the SVG and PNG size end up about the same but the benefit of SVG being vector outweigh that.

        Some minor symbols or such may actually take up less space as SVG than PNG or SVG (like a play or pause button symbol).

        To be somewhat HiDpi friendly I tend to make PNGS slightly larger than needed in size, it also looks nicer if anyone zoom in as well.

        As to decreasing quality. I’ve found certain “flat” lie art or cell like colored images that one might think would need to be 24 bit or at the very least 256 colors (8bit) PNG can actually be reduced to 16 colors (4 bit) without really seeing any difference (unless you know where to look). I do this a lot when making images to be used/Inlined in manuals.

        I use a few “tricks”. For example. I use Irfanview and make sure that sub-pixel sampling is turned off when saving JPGs. This avoids some color artifacts (like the color being a little off somewhow, washed out), but the image get more difficult to compress. Anything from 65% to 85% JPG quality is usually good for my use.

        With PNG I test and see how much color reduction I can do in Irfanview, sometimes I can go down to 16 colors, other times 24 or 32. When you see colors get erong it’s time to dial it up a little again. I make sure to turn off floyd steinberg dither and instead let it do “best color quality”, this is really slow and you may need to fiddle with retrying different color reductions. But if you get it right it compresses very well. (if dithered then compression works very poorly). Then I use PNGgauntlet to go over the PNGs and squeeze out some more byte savings.

        With WebP I try both lossless mode and lossy mode. I usually use around 85% quality in lossy mode. Sometimes lossless end up smaller than lossy. And I usually allow more aggressive quality reduction on the alpha channel than the pixels themselves as slightly blurry alpha can rarely be noticed for icons or buttons. For other UI elements the reverse may be true though and you’ll need lossless alpha but can accept lossy color pixels.

        For images that are created once but display a unimaginable number of times the effort it worth it.

        I do the same thing with artwork for Windows programs and manuals as well. The less bytes to download the less waiting there is for users.

        • Zak McKracken says:

          Yay for limited-palette PNGs!
          I do that as well, although it’s sometimes a little overkill for the kind of documents I make (technical docs, reports, papers…)

          I’m also deeeeeeply frustrated with the lack and patchiness of support for any vector format in any publishing software. LaTeX used to run on EPS, now I’m reading things like “you can make EPS work if you work around xy…”, in completely serious voice. Open/Libreoffice used to funnel EPS right through to pdfs, now it tries to interpret them (and fails), and the same goes for SVG.

          Microsoft effing _invented_ WMF and EMF, but first they started to look different on different machines, and then MS simply stopped supporting them, or any other vector format.

          This is crazy and enraging.

          So most of the time, I’ll generate SVGs, then export them as EPS or PDF from Inkscape and convert that to PNG without anti-alias with GIMP (because the PNG export in inkscape cannot turn AA off, and neither can GIMP’s SVG import). Or I just use EPS in LaTeX, with the good old TeX->DVI->PDF process.

          Really, everyone just needs to get on and support EPS and SVG as passive graphics formats for display and print.

    • Aanok says:

      AFAIK, the only major performance downside of HTTPS should be in the initial handshake, which requires some computation on both client and server side for generating the key pairs, as well as a few extra packet exchanges (which make up most of the delay). Then there’s a little CPU overhead during steady state communication since you have to encrypt your messages before sending them and decrypt them when you receive them, but that’s basically negligible.

  7. Elemental Alchemist says:

    Don’t half-ass it. Mixed content negates the entire point of encrypted connections. Switch everything over to HTTPS.

    Your implementation needs some tweaking to meet current best practice – https://www.ssllabs.com/ssltest/analyze.html?d=shamusyoung.com

  8. Lazlo says:

    OK, here I was thinking all of the GOT episodes started with a third-person aside: “his series analyzes the show…”

    But no, it’s supposed to be *This* series.

    I like the third person intro better. plz2 reintroduce the bug. :)

  9. MichaelGC says:

    This seems relevant (if poorly timed on Ars Technica’s part):

    HTTPS Certificate Revocation is broken, and it’s time for some new tools
    https://arstechnica.com/security/2017/07/https-certificate-revocation-is-broken-and-its-time-for-some-new-tools/

    I haven’t actually read it yet – it’s pretty looooooooooooooooooooong…

  10. Jabrwock says:

    I tried switching parts of my org’s website to https, but I ended up with a LOT of hassle from “partially insecure” pages. Lots of auto-generated stylesheets were incorrectly trying to grab non-secure copies of files even when told to pick the https version.

    So I eventually gave up trying to diagnose and just switched the whole thing to an auto-redirect to the https version.

  11. Fade2Gray says:

    Well, good news. My work’s firewall isn’t blocking the site anymore!

  12. The Unforgiven says:

    Hey Shamus. You sometimes make updates to the site, and write about them, and sometimes complain or comment on how WordPress does things. I was wondering if you ever considered switching to Squarespace or a similar service.

    I listen to a lot of podcasts, and they seem to sponsor/advertise on a lot of them, and the people reading the ad copy seem to think they’re a pretty good service (though they could be saying that because they have to).

Leave a Reply

Comments are moderated and may not be posted immediately. Required fields are marked *

*
*

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun.

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>