Mock Intl and Date globals in Jest

In Javascript land, mocking the browser global objects can be a bit of a pain for tests. Searching StackOverflow gives plenty of complicated answers. Some suggesting using 3rd party mock libraries. Some that overwrite the global object itself.... But Jest already has this capability built-in and it isn't so bad:

So let's say you have a method that gets the user's timezone or the timezone offset. (the timezone offset is used sometimes since IE11 doesn't support easily reading the timezone, but I digress)

Now to test this, we'll need to mock out both the Intl and Date Javascript globals. We can do this using Jest's spyOn method to temporarily replace the global method with our own implementation. Notice that we setup the spy in the beforeEach and reset everything in the afterEach. The setup works something like this:

But that's it! No need to import an extra library. This is all supplied directly in Jest itself!

Blogger CSS Grid Responsive Layout

Yeah, a post about how to build a blog. Because owning a blog means that at least 20% of your posts need to be about the tech used in it's own creation. But this one is different. It's the tech used to upgrade a legacy Blogger site to a more modern responsive layout 😃

Why?

Well, while simultaneously an item of pride and embarrassment, I've had this Uncommented Bytes blog running for 17+ years somehow. (And more like 18-19 years but I lost the first bit of it when jRoller, the best hosted blog engine, went under and required the original migration to Blogger.) 

I wrote a post for the first time in a while, and was pretty annoyed with how it looked on mobile

https://twitter.com/sheetsj/status/1352434228483514371

I originally had a green-ish theme, and thought I'd tweak it to be responsive. But even though it was simple-ish, it was using some images for backgrounds and shading that were just overwhelming to try to update in the super-wordy blogger html template. (look at that beautifully retro Google+ link)

https://web.archive.org/web/20181227163052/http://uncommentedbytes.blogspot.com/

So I decided to "upgrade" to a cleaner look theme in Awesome, Inc --- which despite the genius name, was lacking in a couple areas:

1. Fixed margins -- meaning not responsive to browser width
2. No mobile friendly view -- mostly because it wasn't responsive, but also because I had used a Blogger switch to render a super generic mobile view too (which I think was triggered by user agent headers, yikes)
   

How?

Trial-and-error isn't fun to describe, especially when it mostly involves browser devtools CSS hacking. But basically I took the super-wordy HTML template and hacked in some CSS Grid layout. 90% of the hack-magic was accomplished with this bit:

        div.content {
            display: grid;
            gap: 20px;
            grid-template-areas:
                "header"
                "content"
                "sidebar"
                "footer";
            max-width: 100vw;
            margin: 0 auto;
}

Plus a tiny bit of responsive handling:

        @media (min-width: 800px) {
            div.content {
                grid-template-columns: 2fr 1fr;
                grid-template-areas:
                    "header header"
                    "content sidebar"
                    "footer footer";
            	max-width: 1280px;
            }
        }
        @media (min-width: 1024px) {
            div.content {
                grid-template-columns: 4fr 1fr;
            }
        }
        .gist .blob-code-inner {
            white-space: pre-wrap !important;
        }

And the last 10% was a few margin and padding tweaks sprinkled in other places. You can see the full code in my Github blogger-css-grid-layout project. And just in case I redesign again in the future, the full inception final product looks like this today: