A SQL statement walks into a bar and sees two tables. It approaches, and asks “may I join you?”

This is Real Time Overview for Wednesday, September 5th, 2018, I am your host Michael Fienen. Be sure you catch episode 18 of The Drunken UX Podcast from this past Monday. We were joined by art director Tatiana Mac to talk about getting started on integrating accessibility and universal design into your work processes. It was a fun chat on a great topic, and you can queue it up right after this episode in your favorite podcast app.

You know, there’s a lot to be said for the creativity that some organizations take the time to put into their 404 pages. We all have them, and they’re a necessary evil. Some places go for highly functional versions, others want you to come away feeling less disappointed about not getting to what you need. Regardless, the polish that goes onto a 404 page can speak to a certain attention to detail that’s worth giving credit for.

The folks at Free Frontend have gone out and gathered a gallery that showcases 18 examples of funny 404 pages for you to draw some inspiration from. But more than that, all of these examples come complete with code demos showing how you can make the page as well.

Some of the pages are SVG heavy, some utilize CSS techniques such as clip-path, others do graphic design using nothing but CSS, and a few leverage different JavaScript libraries for effects.

This first article is straightforward, fun, but still features plenty of teachable content and examples to draw techniques from. If you’re after some new ideas to dress up a boring old 404 page, you can view the full gallery over at freefrontend.com.

Mozilla is back after two years with another big report that shows how Firefox users are leveraging its platform. This year’s Firefox Public Data Report builds on the work they started with the Firefox Hardware Report in 2016.

And for our paranoid listeners out there, don’t worry too much. Firefox’s Telemetry toolset is designed to only report on necessary data securely, and those details are then combined in aggregate for reporting.

This information could be incredibly useful for designers and developers trying to understand the make up of internet users, what they run on, and what their activity levels are. The report breaks down this data into three categories for you to review: User Activity, Usage Behavior, and Hardware Across the Web.

For instance, did you know that Windows 7 still beats Windows 10 in market share for Firefox users, 43% to 38%? Or that AMD graphics cards are more popular than NVIDIA? And just over 1% of users have always-on tracking protection enabled. There’s way, way more to dig through, and if you’re a data nut, you’ll end up spending a lot of time looking in to how users break down across the multiple metrics.

You can find the full, interactive results at their report portal: data.firefox.com

If you’re more into the development side of things, sooner or later you’ll have to deal with testing your creations. Tests can come in many forms, be that integration testing, unit testing, or automation testing. These all have their role and accomplish slightly different things, all with the goal of making sure you aren’t breaking crap when you make changes.

Devon Campbell has put together an incredibly helpful tutorial at CSS-Tricks for the end-to-end testing suite Cypress, which is designed to help you test outcomes from a tool in a way that mimics user behavior. This will be somewhat familiar to folks if you’ve ever used something like Selenium.

Like many other testing tools such as Mocha or Jasmine, Cypress runs on Node, and can be installed through NPM. And like those tools, it uses assertions to figure out pass and fail conditions. If you’ve played with or just use other test suites like those, you’ll probably be familiar with the assertion library Chai, which come included with Cypress. If all of that sounds totally foreign and confusing, that’s okay too, because that’s what tutorials like this are designed to help you understand.

Where I really started to like this tool was when you go to run your tests. When you use something like Mocha, your tests run in your terminal. There are some plugins that can give you various, basic visual feedback, but by and large you’re still talking terminal output no matter what. Cypress spawns a test browser when it runs though, and you can see an interactive panel with the results of the tests as it processes pages. This is both cool and useful.

As a note, I should mention that as of this time, Cypress is only compatible with Chrome, but they are working to include more browsers. So just keep that in mind if it’s a testing limitation for you.

Browser testing is an entire subject to itself, and Devon’s tutorial is fairly extensive. This is a great starting point for anyone though, and whether it’s new to you, or you’re just keeping up on different options, I can’t recommend this enough.

What testing tools do you currently use on your code? Drop us a line in the comments and let us know.

Our number 4 slot goes to Pedro Cortés and his article Stop Looking at Websites from Bigger Companies for Reference, It Doesn’t Work! (+ What to do Instead).

Many times we find ourselves justifying design and UI choices by using the argument that Amazon or Google does it. When we look at landing page inspiration, we pull up folks like Mail Chimp or Adobe. It’s common, because we believe if they are successful, then clearly modeling our tools on theirs will help us be successful.

The argument Pedro makes, however, is that these companies are terrible models, because their existing social capital allows them to get away doing things that won’t work for smaller, more unknown companies.

For instance, let’s look at Slack. I’d wager that everyone listening to this episode knows what Slack is and what it does. As a result, their website isn’t geared towards explaining their product and brand in a way we would recommend for others. They now presume we are all aware. And that wasn’t always true.

I tend to refer to this as success by brute force, when big companies can afford to skirt a few best practices, knowing that folks already understand their brand well enough. You can see this over and over with sites like Nike, Samsung, and more.

Pedro sums up the things you want to avoid when looking to big brands for inspiration, but also looks at how to distill different value from them, or use tools like the Wayback Machine to see their sites at a time before they were well known.

You can check out all of his suggestions and tips at his blog at www.cortes.design.

Finally this week, we take a moment to dip back into the Firefox well one more time. This time, we go to Fast Company where Katharine Schwab makes the case that you should be switching back to Firefox.

We’ve mentioned in the past Firefox’s attempts to create better tools for debugging accessibility issues and test CSS grid layouts in an attempt to win back developers that switch to Chrome long ago. There is an economy in browsers, and popularity tends to ebb and flow. This time around though, Firefox isn’t looking to benefit the builders, they want to protect all the consumers on their platform.

As Katharine reports, starting with Firefox 65, they will begin blocking 3rd party cookies by default in the browser in an attempt to protect users from aggressive tracking systems. Users have long had the ability to block 3rd party cookies in every browser, but doing so required actively enabling that feature in your settings. With this change, Mozilla is drawing a hard line in the sand in a move to improve performance and protect consumers.

Mozilla itself has a post up on their blog which we’ll include a link to as well, which breaks down the considerations that factored into their decision, and what they hope to accomplish. They believe that along with protecting you, this change could cut the load times for many pages in half.

So what’s your take? Is Mozilla’s stance on browser privacy enough to get you to switch? Do you already stick with Firefox? Better yet, do you block 3rd party cookies regardless of the browser you use? And maybe most importantly, do you think there will be any collateral damage from a decision like this that might impact non-tracking related site functionality? Let us know by reaching out on Facebook or Twitter.

Thanks for listening to Real-Time Overview this week and we hope you found these selections helpful for whatever it is you’re working on. For the Drunken UX Podcast, I am Michael Fienen. If you want links to any of the stories in today’s episode, be sure to swing by our website at drunkenux.com, they’ll all be linked in the shownotes there. Don’t forget to follow us on Twitter or Facebook, you can find us at /drunkenux. Or check out at on Instagram at drunkenuxpodcast. And just a quick reminder that there will be no new episode of Real-Time Overview next week, instead, you’ll get a new episode of Build Process. Rachel Cherry joined me for a chat you won’t want to miss.

Until next time, keep your personas close, and your users closer.