Third-Party Scripts

As a web designer and builder, the list of things I’ve felt responsible for on the execution side of the process (once research, writing, planning, etc. reaches a point) has expanded over the years. Each new area of interest usually comes about via personal epiphany:

  • “I should probably start coding these designs myself.”
  • “Slow websites are bad for users and bad for business.”
  • “We shouldn’t build a website for every new type of device created.”

Designer Focus Animation

My latest realization is that delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts. No matter how solid I think my prototype is, it doesn’t absolve me from paying attention to what happens during implementation, specifically when it comes to the addition of these third-party scripts. I now need to develop a comprehensive understanding of how popular third-party services (and their scripts) impact the quality of a website as it relates to the site owner and, of course, the user.

In conjunction with some of the performance consulting we’ve been doing at Paravel, this tweet from Harry Roberts helped flip the switch in my mind:

In the coming months, I’ll be researching tag managers, analytics, trackers, a/b testing tools, ads, etc. If you’ve read any posts, heard any talks, or have any resources that focus on this topic, please let me know!

2017 Review

Paravel

Dave, Reagan, and I celebrated our 10th official year as Paravel. In addition to some shorter-term projects (1, 2), we undertook a large-scale pattern library and front-end update that is rolling out in phases this year. We’ve also enjoyed bringing in 6+ collaborators/teams to assist with projects when the need has arisen. I bet we do more of this in 2018—collaborating with friends has been fun.

10 Years With Paravel

Web Work

I spent a lot of time prototyping in Jekyll, and just as much on Codepen. Most new projects start there as private pens or projects—the quick start nature of the tool makes it my favorite.

I didn’t speak this year, but I’ve got two talks scheduled for 2018 on a totally new (to me) topic. I’ve been working hard on research and preparation and feel passionate about this new lane. I’ll be blogging more about this in the coming months.

Travel

Two weeks spent driving around New Mexico and El Paso this summer was the highlight of my year. Thanks to my team/clients at work it was the most “away” I’ve ever felt—and came back renewed. I love New Mexico. The boys are growing up fast, and Bon and I try to capitalize on every opportunity to spend quality time with them.

New Mexico Trip
New Mexico Trip
New Mexico Trip
New Mexico Trip
Listening

Podcasts: I got hooked on How I Built This, and continue to enjoy Freakonomics.

Music: My most repeated song has to be Out Here by Girls Who Care. Also, This Mr. Robot soundtrack playlist brought me a significant amount of joy.

Watching

I watch a lot of movies. I log them at Letterboxd. Some favorites: boxd.it/11udQ. I’m (still) bothered by the white male dominance in my year in review, so I’m going to be seeking out more diversity in films—especially directors.

2017 Letterboxd Directors

Shoutout to Drafthouse. I’ve visited 26+ times this year and had a burger/milkshake every single time (even at 10 am).

Eating

My favorite ATX restaurant is Dai Due. Fried chicken nights, A+ empanadas (that honestly remind me of southwestern egg rolls with dipping sauce in the best possible way), and wagyu beef burgers make meals with the family that much better.

Dai Due
Dai Due

I also got a Vitamix—my go-to smoothie consists of banana, blueberries, spinach, almond milk, water, hemp hearts, hemp protein, and whatever else is lying around. It looks like cement but tastes like heaven.

Fitness

A lower back injury late in the year made October suck, but it facilitated a realignment of sorts—a renewed focus on bodyweight exercises + calisthenics. I’m no expert, but I feel like it’s the smart longevity play.

Reading

I’m in the middle of A Guide to the Good Life: The Ancient Art of Stoic Joy. It’s outside of my typical reading interests, but I was curious after seeing Jason Fried tweet about it. So far, so good.

MISC
  • Got a couple more tattoos—this trend may continue
  • Am trying sublingual allergy drops to cedar/juniper allergies
  • Bought a Switch & played the hell out of Breath of the Wild
  • Got into Adidas (ultra)boost—It’s like walking on a marshmallow cloud in the future
  • #Betofortexas
  • “Learned” to surf at NLand & look forward to surfing IRL

Ten Years

Paravel is ten years old! In 2007 we’d just filed the LLC and started the first web project substantial enough to delude us into believing that Paravel could be a long-term endeavor.

10 Year Paravel Gif

And we’re still here! I don’t have anything profound to say or any one-size-fits-all business advice to give. My 2007 self probably imagined hitting the decade mark with a countdown clock, confetti, and an overwhelming sense of accomplishment and pride. In reality, I mostly just feel gratitude.

The web community continues to inspire and support us—our clients continue to trust us and bring us exciting projects. And hell… Dave and Reagan continue to show up every day dedicated to the team and to the work at hand.

Things rarely turn out exactly as you plan, but if you’re lucky you’ll find they turn out better than you imagined. Thank you! Here’s to the next ten!

10 Year Tattoo

Blade Runner

Blade Runner 2049 opens today. I’m headed to Alamo Drafthouse! Here’s a bunch of stuff you can watch/look at to psych yourself up:

blade runner art
Concept art & matte paintings from the original film—for more, visit iamag.co/features/the-ar/

If you want to (re)watch the original, it’s worth being choosy about the version. I’d recommend the final cut.

When asked what made him want to take on a Blade Runner reboot, director Denis Villeneuve replies, “I didn’t want somebody else to fuck it up.”
“2036: Nexus Dawn” Short
“2048: Nowhere to Run” Short
“Black Out 2022” Anime Short

Nolan Bushnell on Entitlement

I’ve been listening to the NPR podcast How I Built This recently. The episode with Nolan Bushnell, the founder of Atari and Chuck E. Cheese, is my favorite so far. The entire episode is fascinating, but what Nolan has to say about entitlement (at the 42:20 mark) stood out to me.

There is nothing worse than feeling like you are invincible and really cool and entitled. Being entitled is probably the ugliest thing that a person can be—because all of a sudden it’s not what you do, it’s who you are. People who rely on who they are, as opposed to what they do, become very banal.

CSS Columns

I frequently use CSS multi-column layout (i.e. column-count: 3) for basic list items limited to words or phrases (like my search page tags list), but I’ve always struggled to make the property work with more complex content. And after all, complex pages are where CSS columns would come in most handy—reflowing content in and out of columns across viewport widths to suit:

CSS Columns Breaking

The first hurdle has always been avoiding module content breaking across columns awkwardly:

CSS Columns Breaking

In the Codepen below, I added break-inside: avoid; to remedy this, but support is partial. In some browsers, additional whitespace may appear at the top of columns, and in others, content is dispersed unevenly across columns.

See the Pen CSS Columns For Layout V1 by Trent Walton (@TrentWalton) on CodePen.

As a next step, I added display: inline-block and removed all the break-inside: avoid; funny business. This switch was way desirable, but days later I noticed loads of extra whitespace below the columns (in Chrome at least). The amount depended on the arrangement of the modules and size of the content within, but it was a significant problem.

See the Pen CSS Columns For Layout V2 by Trent Walton (@TrentWalton) on CodePen.

To remedy the whitespace problem, I came up with my current-final-answer (below). I added a <div> to each module, setting the outer one to display: block and leaving the inner one display: inline-block. The extra whitespace is gone, and the technique seems to be resilient to various types & sizes of content.

See the Pen CSS Columns For Layout V3 by Trent Walton (@TrentWalton) on CodePen.

I’m sure this technique will evolve & improve over time, but for now, I find it quite useful. Ta-da!

Glitchskier

I recently discovered a new action game called Glitchskier by Shelly Alon. In case you aren’t aware, flying a triforce(ish) starship through what reminds me of the Stranger Things intro (music and all) blowing up Tron-like villains is right up my alley. I love every detail.

Glitchskier

Glitchskier