If you’re an optimist, the glass is half full. If you’re a pessimist, the glass is half empty. If you’re a QA tester, it looks like the glass is really twice as big as it needs to be, isn’t it?

This is Real Time Overview for Wednesday, August 22nd, 2018, I am your host Michael Fienen. Don’t miss this past Monday’s episode of The Drunken UX Podcast, where Aaron and I enjoy some frosty beverages while looking at weather websites and picking apart what’s wrong with them and what they could improve. It’s a fun little format that let us play around and explain some issues related to online advertising, navigation, and more. If you haven’t listened yet, it should be the next one up in our feed. Just keep listening and it should start right after this, or you can catch it any time at our website at drunkenux.com.

When it comes to cheap, turnkey websites, many developers view canned theme sources as their go-to weapon. I’m no stranger to the practice myself, and find it to be a way to prop up my weaker design skills. As Ezequiel Bruni notes in an article at Web Designer Depot, these premade themes have gotten really good and very customizable, but that also comes at a cost in size and flexibility.

But, one dealbreaking problem he sees emerging with all of these canned themes comes in the form of their complete and utter dependence on JavaScript for even basic functionality. Designers of these themes are increasingly chasing flashy elements and gimmicky interactions to make quick sales, but don’t bother to enhance them progressively, which results in broken experiences when something isn’t right.

It’s understandable that a certain amount of JavaScript is necessary to pull off various dynamic effects, or enhance the way content is handled on space in a page. Where things become less forgiving is when your primary navigation won’t work, a feature won’t load completely, or when entire components end up blank.

I’ll share a quick story from just this morning. My team got caught debugging a problem where plain old images weren’t loading because of where a piece of JavaScript got moved to on a page. It was a frustrating bug that didn’t make sense, and it showed a weakness in our code where the feature wasn’t failing properly.

What do you think? Which is more important, progressive enhancement or graceful degradation? Are JavaScript dependencies in canned themes a blight that needs to be cured, or a simple consequence of getting what you pay for? Maybe a more philosophical question is are we not valuing canned themes highly enough to justify better work? Stop by drunkenux.com and let us know what you think in the shownotes.

CSS-Tricks comes your way this week with a not-CSS trick. No, this is an article on JavaScript all about leveling up your filter game. Adam shares a simple example of how to take an array of restaurant data and create a simple, dynamically filterable list.

This tutorial relies on teaching a few core concepts to the user: filters (obviously), but also predicates, iterators, and a couple other elements of ES5 JavaScript. What I found most useful about this tutorial was how the concepts were explained with an anchor in DRY techniques, or don’t repeat yourself. He shows how to group similar chunks of code into functions that allow you to chain requests together to filter down an array.

This keeps the overall logic needed to a minimum, and creates code that is easy to maintain and abstract for other needs.

It’s also a more advanced way to write the functions that are demonstrated in the tutorial. When a lot of devs, myself included, approach a problem in JavaScript, we do it using the core scripting featureset available. By writing it in ES5 or ES6, we get access to a number of newer, more powerful features.

When you prepare it to run in the browser, you’ll run it through a JavaScript compiler like Babel that turns all that code into JavaScript browsers will understand. This article gives you a way to see how this works in practice in a relatively lightweight manner.

If all of that sounds super confusing and daunting, don’t worry, I’m also going to include a link to Michael Aranda’s article What’s the difference between JavaScript and ECMAScript that helps break down what all that means.

This next piece comes from Chad Verzosa by way of Canva, and it’s a little off the beaten path. His article, A Beginner’s Guide to Aspect Ratio and How to Use it to Compose Stunning Images is a look at the aspect ratios as they apply to photography.

We’ve included this in Real-Time Overview because the art of composing photography is as important a design skill as anything else. And photography itself plays a huge role in web design today, providing backgrounds or adding accents to sites all over. Not only that, understanding aspect ratios matters for something else websites all have in common – the displays they are viewed on.

Chad explains the most common ratios in use today and where they come from. Some of it might sound silly when you look at square 1:1 photos, until you remember that that’s the same ratio Instagram uses. Understanding the impact these have can dramatically shape the design that you have planned.

From cameras, to phones, to monitors, and applications, aspect ratios affect everything we create and build. The best composition comes through understanding how we view and perceive these, and how we can leverage that to produce the best designs possible.

Head over to UX Collective this week and you can catch the article Things I (Honestly) Don’t Want to See in Your Portfolio. We spend a lot of time worrying about what should go into our portfolios, and this is a nice look at what you should consider leaving out if you’re looking for a job.

Some of the recommendations are fairly simple, and straightforward. Get rid of skill charts where you rate yourself. They aren’t a good snapshot of what you’re capable of doing. The same goes for a trite tagline or generic objective. Don’t be unique like everyone else. Just like good design work, everything you put in your portfolio should be meaningful and convey value.

He also talks about not oversimplifying your abilities with simple shots of work and making sure you don’t forget to explain who you really are.

I’d add to that list, as well. Don’t give me every last bit of your entire design history going back to high school. Definitely don’t forget to proofread your explanations. And lastly, make sure your portfolio is readable on a mobile device. That last one is a lot bigger than it might sound, as the hiring manager reviewing you might be doing so traveling between conferences, or reviewing work on the subway. Ensure they get a positive impression there.

These are all just a few simple examples, but it’s important to keep in mind what traps to not fall into.

Finally this week, William Lim writes on Smashing Magazine about the effect of Scroll Bouncing on your Websites.

What is scroll bouncing? It’s the effect you see, particularly on mobile devices, where you can pull a page above or below it’s maximum boundaries and it snaps back into place.

This will matter to web designers in cases like when you are working on something that has a fixed header or footer. Those sticky elements won’t look right if the page can move around them when things get overscrolled.

Williams overview of this behavior is nicely comprehensive, and shows the results of different solutions across multiple browsers on desktop and mobile devices. The problem is substantially more nuanced than you might assume at a glance, and it requires a lot of tinkering if you or a client are particular about how you want the behavior.

Reading the article, you’ll see both CSS and JavaScript based solutions to the problems, and their pros and cons. Not to ruin the lesson, but if this is something that’s bugging you, you’ll want to look specifically at the overscroll-behavior CSS property for the best solution.

If you have a preferred technique to solving overscroll bouncing, let us know and we’ll be sure to share it with the rest of our audience.

Thanks for clicking into Real Time Overview and we hope you found these selections helpful for whatever it is you’re working on this week. 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. And if you have any articles, blogs, or tutorials you’ve found particularly useful, let us know and we’ll consider it for a future episode of Real-Time Overview. You can submit suggestions using the form on our website.

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