Here’s your programming lesson for the day class. In Java, everything is an object. In Clojure, everything is a list. In JavaScript, everything is a terrible mistake.

Thanks for taking a few minutes today to join us for Real-Time Overview for Wednesday, October 3rd, 2018. I am your host and currently ecstatic Chiefs fan, Michael Fienen. Just in case you haven’t already done it, don’t forget to cue up episode 20 of The Drunken UX Podcast from this past Monday. We were joined by Bravery Media founder Joel Goodman and talked about all kinds of stuff you need to consider if you want to go beyond simple freelancing, and start your own, small web company. You’re not going to want to miss Joel’s advice, plus, we drank a lot of whiskey, so that always gets fun. And with that, here comes the news.

Web Designer Depot kicks things off this week with an article by Kunal Sarkar that’s taking a look at Grid vs. Flexbox: Which Should You Choose.

While CSS grid and flexbox usage is continuing to increase in the web development world, so too is the confusion over which one you should use and when. After all, both techniques deal directly with how we lay out content across container elements, but they do work in slightly different ways that you should consider when planning your CSS strategy for a project.

Part of what complicates the usage of the two techniques is that it is completely possible to generate the exact same results using both of them for a given problem. Sometimes. The emphasis Kunal hits first is that grid is container based, while flexbox is content based. What does that mean, exactly? Well, as a layout is stressed by the content included inside of elements, how they change to accommodate that is based on which one you use.

In the case of flexbox, it priorities container sizing based on the content in it, while grid focuses on the elements themselves. It’s actually really important to note that these systems actually work really well when mixed together as a result, since each one can play to its strength to achieve a desired look and feel.

As a companion to this, I’m going to include a link in the shownotes to Eric Meyer’s article at A List Apart on Practical CSS Grid from last year, where he not only covers grid, but how flexbox can work with it.

If you want to learn more about how to decide between them, stop by Web Designer Depot and give this article a skim. It goes on to review technique dimensionality, unique layout properties for each, how wrapping is handled, and more. Combined with Eric’s article, you’ll have a great start on using CSS Grid and Flexbox.

There is, and will likely continue to be, a gap that exists between designers and developers when it comes to producing websites. Architects aren’t carpenters, automotive designers aren’t mechanics, and urban planners aren’t gardeners. It’s certainly possible for one to be the other, but the relationships in each industry inherently demand different skillsets to execute on. So goes the pattern in web development.

Jonathan Snook writes about this problem at his blog, Snook.ca, in a short piece titled The Codification of Design.

Cross training is an invaluable skill in web development, and an understanding between designers and developers is integral to ensuring successful execution of ideas, especially in complex projects. As Jon describes, you can create great designs with lots of nuance and variation, but those translate to more code, and more maintenance in the long run. It’s not that complexity of that kind isn’t possible or allowed, but it does up the stakes in the process over the life of a project.

He emphasizes that usage of popular layout tools, while empowering designers in ways we’re still getting used to, needs to be tempered against consideration for reproducible patterns no differently than if you were a print designer who needed to make sure you’re considering the papers and inks that will be used to execute your design.

As with many things, most of these issues can be solved easily and early by ensuring your teams and stakeholders communicate, and that each group has enough understanding and experience with the other raise questions when something might create extra work.

If you’re a designer interested in learning more about how code can affect your layout, Gymnasium has a free course authored by Jim Webb called Coding for Designers that you can check out. It’s designed – no pun intended – to help you understand basic HTML, CSS, typography, and more so that you can build better layouts that are easier to execute. If you want to check it out, be sure to run by drunkenux.com and find the link in the shownotes.

If it’s inspiration you’re after, then Margaret Kelsey has you covered at the Invision blog this week with a roundup of The 7 TED Talks Every Designer Should Watch.

This can be really helpful as the availability and diversity of amazing TED Talks increases, and it can give you a starting place if you want to find a few recommendations to focus on. Each video only takes about 15 or so minutes to watch, and the presenters are always engaging and enthusiastic on their topics.

This list includes a variety of design-related speakers, from Margaret Stewart’s talk on how Facebook designs for large scale usage, to a typography talk from Martina Flor, and Tony Fadell’s presentation on how to be aware of the things around you and use that to drive new concepts.

This is, of course, just a starting point. There are tons of other great TED Talks out there, like John Maeda’s incredible piece on how important simplicity is, which I’ll include a link to in our shownotes because I definitely think it’s worth your time. In fact, if you love a good design TED Talk, they have an entire category devoted to it, so go dive in, and start watching. I promise you’ll come away learning something.

If you want to just get started though, stop by Margaret’s list at the Invision blog. You can’t go wrong with any of her suggestions, and if have a particular favorite of your own, we’d love to hear about it. Leave us a comment, or shoot us a message on Twitter or Facebook and we’ll be sure to share it out.

Our next piece had me from it’s very first subject, which makes an important point that can be a hard lesson for folks: stop trying to learn everything. This helpful tip is coming from Eric Karkovack at Speckyboy and his article Web Designers: Stop Doing These 5 Unproductive Things.

I emphasize the importance of that first point about not learning everything, because it’s a challenge that quickly turns into the tail wagging the dog. When you watch your coworkers, colleagues, and peers diving into new and different systems or tools, there can be that urge to want to follow suit. Or maybe you want to be the one out in front. Either way, we can’t always be that person. Before you know it, you’re spending more time trying to learn than you are simply getting your hands dirty to do the work.

I don’t want to de-emphasize the importance of learning and keeping your head up, you just have to know when it’s okay to not be a master of everything.

Furthermore, are you constantly comparing yourself to your peers’ best work, and undervaluing what you’re producing because you don’t think that it’s good enough? Well stop! That’s all a result of imposter syndrome, and fighting those urges and realizing we all struggle with aspects of our field is incredibly important to understand.

From a business standpoint, Eric also makes it a point to talk about how valuable it is to know when to cut someone off. They can chew up time and resources outside of the scope of a project, or what you bid it on or contracted for. It can be hard to say no, whether through fear that the client may leave you a bad review, or that you might not get paid, but you have to establish and enforce boundaries.

We’ve referred to Eric’s articles on Real-Time Overview in the past, and this is a good example of why. It’s a great little piece to remind us the importance of valuing ourselves and our work properly.

We come in for a landing this week with an Envato tutorial by Nicole Merlin for how to Build an HTML Email Template From Scratch.

There’s something funny about this article and its role here on RTO today. Each week we feature articles on things like CSS grid, form interactions, accessibility, and things like that. We emphasize learning and offer resources to check out the latest and greatest. But email holds a weird place in this field.

That’s where Nicole’s article comes in. This isn’t a new piece and it was actually originally written in 2013. And that’s the thing with email. Like working on an older car, sometimes there are more raw, fundamental ways that parts of our industry works that isn’t always helped by newest code and features we have to offer.

As such, this tutorial provides some excellent reminders for how brute force some HTML email design needs to be, even if it goes against everything we know about good, semantic, modern markup. Think of it as a lesson in controlled chaos.

Understanding something as old and frustrating as table based layouts can still be a make or break moment in the email marketing industry, so there’s still some value in looking back at why we did layout that way to begin with.

Of course, there are always frameworks out there like Foundation for Emails, as well. They provide some solutions to help you create flexible, creative layouts, but even they still rely on tables and tricks of the markup.

So break out your tables, get ready for some inline styling, and check out Nicole’s tutorial if you’re preparing to do work with some email marketing or a newsletter. You’ll be glad you did.

Thanks for checking in with us on Real-Time Overview today and we hope you found these selections helpful for whatever it is that you are working on this week. For the Drunken UX Podcast, I am Michael Fienen. If you want to get the links to any of the articles from today’s episode, be sure to swing by our website at drunkenux.com, we’ll have them all in the shownotes there. I hope you’ve been enjoying Real-Time Overview this year, and if so, there’s a couple things you can do to help us out. First off, make sure to smash that share button in your podcast app so that you let others know how useful our segment is for you. Then, if you can spare just a minute, go to iTunes or podchaser.com/drunkenux and leave us a rating or review. It only takes a second, and we would appreciate the heck out of it.

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