This week includes a run by Jen Simmons’ YouTube channel Layout Land, a review of content security policy problems in a research paper at Google AI, a look at a tool that lets you create pages that store their data in the URL, a new class on atomic design and Pattern Lab at Gymnasium, and we wrap up looking at what you might want to consider when it comes to looking at a headless CMS for your next project.

Followup Resources

Transcript

A student applies to a research assistant position at a computer science lab.

Contrary to the usual custom at the university, the professor accepts on the condition that he won’t be paid. Perplexed, the student asks why.

The professor replies, “It’s because RA’s start at 0”.

Hidee-ho developerinos. I’m Michael Fienen and this is Real Time Overview for July 18th, 2018. In case you missed it, this past Monday was episode 2 of Build Process. Aaron went all the way to the Ruby for Good conference to have an awesome chat with its founder, Sean Marcia. They covered a ton of great topics like mentorship, open source, and a lot more. If you haven’t listened to it yet, just let your app keep playing after this episode, it should be the next one down.

If you haven’t subscribed to Jen Simmons’ YouTube channel yet, you need to take a minute to run by her channel Layout Land. She puts out regular videos that cover all sorts of topics dealing with layout and CSS, and they are really great, short chunks of information to learn from.

Case in point, her latest video covers the 9 Biggest Mistakes with CSS Grid. The fourteen minute video hits on a lot of traps designers and developers can run into when thinking about grid layouts. For instance, you want to resist the urge to think that grid replaces flexbox and floats. It doesn’t, and just like tables, these techniques all have specific applications they are ideal for.

But that’s not all. Do you think grid layouts need to be defined by percentages? Because they don’t. Not at all. The number of options you have to size things with has grown well beyond simple fractional options. And to that idea of sizing, breakpoints aren’t necessarily the means to a nice, responsive grid layout.

Jen’s video covers these thoughts, along with tackling the ideas behind our adherence to 12 column layouts and the idea that we need a framework for a good grid, and much more. Run by YouTube to check out the newest Layout Land video and be sure to subscribe for all her tutorials and commentary, because it’s really great learning material.

She also provided the forward to a great followup book if this subject interests you. If so, go check out A Book Apart #24. It’s The New CSS Layout by Rachel Andrew. We’ll leave a link to it in the shownotes.

Back in episode 12 of the Drunken UX Podcast, we spent some time talking about the basics of web security. Understanding the basics of security is just as important to web design as it is understanding how to use the deadbolt on your house. But, once you know the basics, it never hurts to dig deeper and learn how to keep yourself more safe.

For that deeper dive, I want to refer folks to a 2016 security study from Google that was authored by Lukas Weichselbaum, Michele Spagnuolo, Sebastian Lekies, and Artur Janc. Their research paper, which is available for free in its entirety, looks at the risks involved with implementing content security policy headers as a way of combating cross-site scripting attacks.

I can’t sugar coat this, this is an in depth study that reviewed tens of thousands of policies in the wild, and the results get pretty technical. But it’s also incredibly interesting to see some of the problems that CSP headers can introduce to their respective web environment. See, CSP headers are designed to allow you to create whitelists of domains that your website is allowed to execute content from. These can be applied to everything from JavaScript, to images, to iframes and much more.

All that sounds great in theory. But as the abstract notes, most policies are more placebo that then are treatment. To give you the bulletpoints, 76% of policies can usually be bypassed, with 95% of policies failing to prevent script execution, and sit down for this one, 99.34% of policies offer no protection against XSS attacks at all.

The problem is that by creating a whitelist, you are creating a trusted partner. But virtually across the board, those partners are not themselves immune to attack. It’s a case where you’re only as strong as your weakest link, so the risk of upstream infiltration effectively eliminates any effectiveness your policies might have.

This isn’t meant to scare anyone off of content security policies. In fact, there is an improvement in the works for exactly this issue. Instead, this is a great learning moment about how to understand the way threat models apply to web security, and how reliance on 3rd party script CDNs isn’t necessarily something that keeps your site safe.

If you’re looking at getting into atomic design or pattern libraries, Gymnasium has just announced a new short course instructed by the man himself, Brad Frost.

Their course, Working With Atomic Design and Pattern Lab, is available now at thegymnasium.com, and spans eight simple chapters designed to help you understand what Pattern Lab is, how it works, and how it applies to approaching atomic design methodology.

Over the lessons, you’ll learn what it means to approach a layout atomically, how to set up and use a pattern library tool, and how to build pattern components and prepare them for dynamic content. The end goal is for you to better understand how to think about the relationships between pages and the components that make them up, and how we build those for long term maintenance and collaboration.

Like all of Gymnasium’s content, this course is free. That’s free as in beer. It doesn’t cost you a thing, and you’ll get to enjoy learning from the guy that got the whole atomic design pattern rolling. This is a great way to level up some of your skills, and give you new techniques for working with a bigger team, if that’s what you’re after.

If you stop by and enjoy the course, be sure to check out everything else Gymnasium has to offer. Their courses span topics from UX to JavaScript to content writing and much more.

Mark this one down to be filed under “huh, that’s neat.” The Verge and others are reporting on an experimental site that lets you create a landing page whose content exists entirely in the URL.

The site is called Itty Bitty Site, and it’s using a technique that compresses page content into an encoded string in the URL. When you hit the page, the content deflates, and boom, you have a web page. The URL can serve up a couple kilobytes of data consistently.

It’s using a trait of hash notation in URLs, what we call a “fragment,” to maintain a static page link that isn’t dependent on URL parameters to store the data of the page. The other side effect is that no data is actually sent to the server. Parameters get passed to a server and acted on in some way, but fragments are processed entirely client side.

I started this out by saying it’s neat. The Itty Bitty Site explanation gives some ideas for usage of the tool, like writing poetry or directing people to longer version of tweets. The practicality though in a production setup might be a little questionable. And there’s also the problem of security, as any domain that has the placeholder that renders out the fragment would, in theory, render out any content given to it. Garbage in, garbage out. I’ll leave you to break down what the risks of that could be. And the site does acknowledge that risk, for what it’s worth, and it’s something they’re interested in finding a way to resolve.

At any rate, go check it out. It’s a neat exercise if nothing else, and the codebase is open sourced on GitHub, so you can download it, use it, or change it all you want.

Finally today, we wrap up with a piece on choosing technology for your next content management system from Kentico CEO Petr Palas.

Kentico is itself a CMS provider, and they recently did a survey that researched the current state of headless CMS usage across nearly 1,000 sites and 85 countries. We’ll also be sure to leave a link to the full results of that survey in our shownotes. Petr has pulled a few of those points out, along with some other advice to help you think about what the future of your content management might look like. And we’re not talking about what visual editor it uses, or if it has approval workflows. This is looking broader at where the ecosystem is tracking.

For instance, whether you put time into learning PHP over Node might depend on what the future of your site development looks like. PHP is more generally popular, but Node beats it among devs who work on headless CMSs.

He also reviews the opinions people have of hosted versus managed products, and similarly monolith platforms versus collections of microservices.

There’s no right answer here, and you might disagree with some of his conclusions. But, when making big decisions on things like the CMS that will drive the future of your company, this perspective can be really valuable in decision making.

But tell us what you think. Are headless CMSs the future of web content? Is the best money to be made in learning microservices? Shoot us a message and let us know what you think.

Thanks for clicking into Real Time Overview this week and we hope you found something useful in the roundup. As always, I am Michael Fienen and if you want to track me down, just look up @fienen on Twitter. 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. Stay tuned for a new episode of the Drunken UX Podcast coming up next week. In episode 15 we’ll be talking about the WordPress management tool MainWP.

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