I didn’t have much control over the code, which became less of a positive the more my skills and competing tech advanced. To make the changes I could, I had to pay for a plan and a custom CSS upgrade. It wasn’t a ton of money, but enough to make me question things each time renewal rolled around. And occasionally the theme I was using would get deprecated and I’d need to choose and customize a different one. But moving over a decade of posts was enough work for me to stay put.

The thing that tipped it ended up being a non-breaking space. It’s always something tiny, right?

For a long time, Wordpress has injected a   between the last two words of longer headlines to avoid a widow if the headline wraps. Not sure for how long or if isolated to wordpress.com, but Wordpress was also injecting the   into the <meta name="twitter:text:title"> for social previews.

This doesn’t seem to affect things on Twitter, but I’ve moved from Twitter to Mastodon and it does affect things there. The social preview for a recent post was rendering like this on pretty much every Mastodon app I checked:

I talked with wordpress.com customer support and a few Wordpress devs on Mastodon. It wasn’t something I could fix on my own, so a bug was filed. I didn’t expect it to be a priority. I really didn’t want my social previews to look like this and it made me not want to post. So that felt like enough reason to move things, at least temporarily.

Choosing Eleventy

I’d also been meaning to try out Eleventy (11ty) on a personal project. Zach Leatherman is the coolest and so many folks I admire sing Eleventy’s praises. Besides not injecting an unremovable   into my social previews, Eleventy had some nice benefits:

• Full control over the code and templates
• A static site that will ship way less code to the browser
• Eliminate the additional costs I was paying

There were a few downsides:

• I’d lose years of comments I didn’t plan to move over (probably fine and I could potentially add Webmentions in the future)
• A bit more friction for posting (Wordpress GUI is nice)
• I’d lose search (more on this later)

I decided to go for it! /me fist pumping

The process

First I exported my blog content from wordpress.com. They give you a giant XML file. I used this article and this script to convert the XML to Markdown. Worked great!

I then started moving the content into eleventy-base-blog. I tried to make it match as closely as possible to my Wordpress template. Wordpress has a bit of a unique vibe so there were a few challenges.

URL generation

Wordpress generates post URLs with the date and then post title like this /2023/02/23/this-is-the-post-title/. I didn’t want to structure my post directory like this, so I decided to use permalink. The data export did give me a <link> with the full post URL, but I wanted to try and set things up so old and new posts could use the same stuff and I didn’t have to duplicate data in the front matter. I created an Eleventy filter that formatted the date this way:

eleventyConfig.addFilter("pathDate", dateObj => {
  return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("yyyy/LL/dd");
})

And then set each post’s front matter like this:

title: This is the post title
date: 2023-02-23
permalink: /{{ date | pathDate }}/{{ title | slug }}/

Another thing Wordpress does is make unique slugs for posts with the same titles even if they are posted on different dates. So a post titled Howdy partner might get a URL like /2022/05/06/howdy-partner/. If I published another post a month later also titled Howdy partner, the URL would look like this /2022/06/12/howdy-partner-2/. So I had to manually make sure those posts were accounted for. Something like this:

permalink: /{{ date | pathDate }}/{{ title | slug }}-2/

A bit tedious but I got everything working ok.

Tags and categories

My Wordpress theme was using tags and categories. At one point I think I understood why I made things one or the other. 😅 I ended up consolidating those into just tags and did some cleanup to make things more consistent.

YouTube and other embeds

The Wordpress data export included YouTube embeds with Wordpress-specific syntax like this: [youtube=http://youtu.be/VGsRedwDK40]. I had to change those to the proper YouTube embeds (and Vimeo, Instagram, etc). Also some of the videos were no longer available so I found some replacements mostly for my own sake.

Full post preview

I liked the era of Wordpress where the blog index pages showed the entire post content so you didn’t have to click into each post. I got that working in Eleventy by using excerpt and just making the entire post the excerpt? Probably a better way to do that but it worked.

Dates

I ran into the dates off by one day issue in a few places. I do not understand timezones! I ended up setting a date and time value separately in the front matter for new posts (with a 9am my time default) and just left off the time for older posts. That seemed to work for what I was doing. Not sure if I’ll run into any issues later, but so far so good.

Moved images

This isn’t a Wordpress or Eleventy thing, but another task was moving my images from being hosted on my portfolio to being hosted with the blog itself. I had originally set it up that way because I was using FTP at the time (ah, memories) and that was easier than using the Wordpress image uploader. This was a helpful decision years later because I just did a nice file move and path replacement locally and didn’t need to do a big download from wordpress.com.

Search

Remember when I said I would lose search when I moved to a static site? Well say hello to Pagefind! I followed this handy tutorial by Robb Knight to add Pagefind search to my Eleventy site. Really nice! I tend to think I was the only one using search on my blog but I used it a lot, so happy to have it back in there.

What Next?

I think I’m going to start moving my portfolio into Eleventy soon. It’s a bit more complicated and has its own decade-long baggage. I’m excited to dig in more and to learn how I could have done things better on the blog. My blog code is on Github if you want to take a peek for whatever reason! Shout at me if anything is wonky.

Overall things went really well with the blog though. I’m liking the setup and the control it offers and I’m doing the blogging I set out to do. Even if wordpress.com does end up fixing that   issue, I don’t think I’ll go back for now. Big thanks to wordpress.com for serving my blog for so many years! And thanks to Eleventy and the 11ty community for the great docs and tutorials!

Check out my blog, yo! It’s got an RSS feed too.

A small question to ask myself whenever I decide to work on a project or to publish some words: Do I want my name on this? I love how Brad promotes consistency not in what you talk about but in being yourself. This basic yes/no question helps me to sidestep the existential question of “Who am I though?” and to focus on making one decision. It’s a pretty good gut check.

It’s helped me to not send an unkind tweet or twenty and to say “No” to clients and jobs that made me feel sheepish. It helped push me to be weird and ambitious with my work and—as Brad encouraged—to consistently be myself. And after many years, “a Trung. Do Duc project” started to mean something in my corner of the web and with teams I worked with. My work started to walk me through doors.

But it doesn’t end there. None of that would matter if I was horrible to work with. “Put your name on it” applies even more to how you treat people. And maybe that’s all a personal brand is anyway: a different term for your reputation.

There are definitely projects and interactions—especially from early in my career—I wish I could remove my name from. I’ll make mistakes. I’ll change. Each new project, job, and relationship lets me decide what it means to put my name on it.

• Work that benefits from my specific skills and ideas.
• Work that benefits the people who receive it.
• A salary that enables me to live a comfortable life, to be generous, and to save for retirement.
• The ability to work from the sunny spot of my couch with my dog.
• The ability to take a nap, run errands, or go to the cinema during the workday if I need/want to.
• The flexibility to work in the way I work best and with the tools I choose.
• A team small enough to know everyone personally.
• A team that has fun.
• A team that ships work often.
• The autonomy to make small and big decisions about my work.
• The ability and opportunity to share my work publicly.
• Strategic leadership whose financial decisions I trust.
• Courageous leadership who does the right thing.
• Empathetic leadership who treats people well, even (especially) when it costs the business.
• Good health insurance.
• No implied requirement that I have Opinions™ about specific web technologies or companies.
• Very few meetings, used effectively.
• Encouragement.
• Generosity.
• Perks that enable me to do more with my time.
• The space to be a vulnerable, flawed human.
• Work that requires creativity.
• Work that offers variety.
• Work that makes me come alive.

So I decided to pick a couple new CSS features I’ve been meaning to try and focus on those. It feels like we’ve been wanting container queries forever and :has() is the parent selector we’ve wanted even longer. Easy choices.

To play around with :has(), I wanted there to be some dynamic aspect so containers could sometimes have a child element. Drag and drop felt like a natural mechanism here. I ran through a lot of ideas where maybe you navigate the site by dropping items onto specific containers. Maybe more content or clues/treasures could be revealed that way. What if the website was an escape room?

I started playing around with a few drag and drop libraries and Dragula seemed like it could do all that I needed. I essentially wanted an inventory of items you could drag and drop onto specific sections of the site to make things happen. I got a small CodePen demo working with the help of my friend Jason (thanks!).

See the Pen Drag and drop test by Trung. Do Duc (@2dtrung) on CodePen.

It was about here that I ran into a pretty big snag. Accessibility-wise drag and drop can be a bit of a nightmare. There’s options for making the interactions usable for screen readers and keyboard-only users but for what I was planning, it would have been rough.

I didn’t want major navigational and content pieces to be totally inaccessible, so I reduced scope a whole bunch. I decided to make the drag and drop more of an Easter egg, fun enhancement kind of a feature. Content and navigation would stay pretty straightforward. With more time I think I could explore doing something more ambitious and maybe I still will.

So what can we do with :has()?

Real quick, :has() is a CSS pseudo-class which allows you to select a parent element based on the children it has. So in this example…

<section id="one"><h2>Hello</h2></section>
<section id="two"><h3>Bonjour</h3></section>

section:has(h2) {
  background-color: red;
}

…only the first <section> will get a background color of red because it contains an <h2>.

I still marvel at how dang simple that is now with :has(). Just a gift!

So with a basic drag and drop, I could selectively give an element a child element. This interaction would allow me to change the parent container or the child’s siblings however I wanted.

I thought a lot about video games where you collect items and thought it would be fun to bring some ✨magic✨ in the way Super Mario powers up with a mushroom, flower, or leaf.

A mushroom felt like a fun option to make things get bigger and oh hey, kind of a great interaction to pair with container queries. Drop a mushroom, the container grows, things change.

I went through a lot of other ideas like maybe you could drop a key to unlock something or drop a coin like into an arcade cabinet or drop a slice of pizza for whatever reason. With 10-20 drop zones I had planned, the amount of changes I would need to account for started to make me sweat. So I simplified (the theme of this year I think) to a general “magic potion” idea that could affect sections in different ways.

Let’s set up Dragula

Dragula is really nice and was easy for me, a forever JS noob, to get running quickly. I won’t go into too much depth on how Dragula works since their demo and README are pretty detailed, but let’s look at the major things I needed to set up.

One section would be your inventory of drag and drop items and various other sections of the site would be “drop zones” that can accept those items. I called the inventory “loot” and gave it classes container and source. Each item in loot got a class of draggable.

<div class="loot container source" id="loot">
  <i class="draggable mushroom" data-id="mushroom">
    <svg/>
  </i>
  <i class="draggable potion" data-id="potion">
    <svg/>
  </i>
</div>

(By the way, the code in this case study is simplified a bit for clarity, but you can always look at the code in its complicated glory on GitHub. Also I probably shouldn’t use an <i> here but I that was an artifact of a previous attempt at something I ended up not using and I did not change it!)

So then every drop zone would get a class of container and dropzone:

<nav class="container dropzone" id="nav">
  <!-- nav content -->
</nav>
<header class="container dropzone" id="header">
  <!-- header content -->
</header>

In the JavaScript, I’d set up Dragula like this:

// page elements that are interactive
var loot = '#loot';
var nav = '#nav';
var header = '#header';

// variable
var containers = [
  document.querySelector(loot),
  document.querySelector(nav),
  document.querySelector(header)
];

// Dragula
var drake = dragula({
  containers: containers,
  removeOnSpill: true,
  direction: 'vertical',
  // loot is the source of draggable items
  moves: function (el, source) {
    return source === document.querySelector(loot)
  },
  // when you drag an item, a copy is made
  copy: function (el, source) {
    return source === document.querySelector(loot)
  },
  // any container will accept items except loot
  accepts: function (el, target) {
    return target !== document.querySelector(loot)
  }
});

Two significant settings here are copy which makes it so you never run out of mushrooms or potions in your loot, and accepts which makes it so loot is not a drop zone.

Now we can drag and drop our items. Again here is a CodePen demo and I’ll go into some specific UX details in a bit.

Growing in size

To start, let’s make the homepage hero illustration grow. The markup for that header looks like this:

<header class="header container dropzone">
  <div class="svg">
    <svg />
  </div>
</header>

(The <div class="svg"> helped to isolate the SVG code from having siblings, which was causing some layout issues for me.)

I set up the CSS so the height of the SVG is set by a variable.

.header {
  --header-height: 410px;
}
.header svg {
  width: auto;
  height: var(--header-height);
}

So once we’ve dropped the mushroom into the header:

<header class="header container dropzone">
  <div class="svg">
    <svg />
  </div>
  <i class="draggable mushroom" data-id="mushroom" />
</header>

We can change the height of the SVG by using :has():

.header:has(.mushroom:not(.gu-transit)) {
  --header-height: 500px;
}

Dragula gives the mushroom a class of gu-transit while it’s being dragged and removes it once it’s been dropped. So this makes the header 500px tall when the header has a mushroom and it’s no longer in transit.

This has the effect of the header zooming in size.

Now, what if you drop another mushroom? Would it just grow bigger and bigger forever with every new mushroom? I liked that idea, but also didn’t want the site to ever look too wonky. I decided to account for each drop zone accepting two mushrooms and two potions max.

So knowing we’ll only have two mushrooms ever in the header, we can use :has() with the general sibling combinator to do that:

.header:has(.mushroom ~ .mushroom:not(.gu-transit)) {
  --header-height: 600px;
}

This makes the SVG 600px tall when the header has two mushrooms that are siblings (again, not in transit).

To add a bit more fun here, I also set up the illustration to have the Diet Dr. Pepper “grow” as the header grows too. I gave IDs to the artwork layers in the SVG and swap opacity in the same way I set the header height.

  .header #soda-can {
    opacity: 1;
  }
  .header #soda-bottle,
  .header #soda-cup {
    opacity: 0;
  }
  .header:has(.mushroom:not(.gu-transit)) #soda-can {
    opacity: 0;
  }
  .header:has(.mushroom:not(.gu-transit)) #soda-bottle {
    opacity: 1;
  }
  .header:has(.mushroom ~ .mushroom:not(.gu-transit)) #soda-bottle {
    opacity: 0;
  }
  .header:has(.mushroom ~ .mushroom:not(.gu-transit)) #soda-cup {
    opacity: 1;
  }

A few other sections of the site do some growing with mushrooms and I also had fun making my noggin grow on the about page:

Add some container queries

Container queries! The loves of my life. With container queries we can make style changes dependent on an element’s dimensions instead of the entire viewport’s. I was excited to try them finally.

On desktop, the projects on the homepage are laid out in 3-columns. When a project gets a mushroom, it changes to take up 2 columns. With another mushroom, it takes up the whole browser width.

.projects {
  display: flex;
  flex-wrap: wrap;
}
.project {
  flex-basis: calc(100% / 3);
}
.project:has(.mushroom:not(.gu-transit)) {
  flex-basis: calc((100% / 3) * 2);
}
.project:has(.mushroom ~ .mushroom:not(.gu-transit)) {
  flex-basis: 100%;
}

(I’m using flexbox here so projects grow/shrink as the ones around them grow/shrink.)

I set up the SVG artwork to have groups that I can show/hide dependent on which containers queries are active. So a group in the SVG would look like this:

<g id="david7" class="reveal">
  <!-- paths here -->
</g>

So for the David Rose project, we can do something like this:

.david-rose {
  container-type: inline-size;
}
.reveal {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
@container (min-width: 470px) {
  .david-rose #david3,
  .david-rose #david5 {
    opacity: 1;
  }
}
@container (min-width: 750px) {
  .david-rose #david2,
  .david-rose #david6 {
    opacity: 1;
  }
}
@container (min-width: 1100px) {
  .david-rose #david1,
  .david-rose #david {
    opacity: 1;
  }
}

And that ends up with this:

Pretty fun! Each project gets a different treatment, so check ’em out.

Fun and color with magic potion

The draggable potion works in the same way as the mushroom. Instead of scaling things, the potion brings the illustrations to life with colorful details. There’s a lot happening, but the main technique is setting variables for things like background-color and text color and resetting those values with :has(). Here’s a simplified example:

.header {
  --bg-color: #ebecf0;
  --text-color: #14303f;
  color: var(--text-color);
  background-color: var(--bg-color);
}
.header:has(.potion:not(.gu-transit)) {
  --bg-color: #ff5f5f;
  --text-color: white;
}

For sections with artwork, I’ve set up the SVG with various classes like fill-blue and fill-yellow depending on what color they should be when the potion is dropped.

:root {
  --yellow: #fabb19;
  --blue: #5d73a3;
  --turquoise: #00ced4;
}
.dropzone:has(.potion:not(.gu-transit)) .fill-yellow {
  fill: var(--yellow);
}
.dropzone:has(.potion:not(.gu-transit)) .fill-blue {
  fill: var(--blue);
}
.dropzone:has(.potion:not(.gu-transit)) .fill-turquoise {
  fill: var(--turquoise);
}

A few paths get class fill-swap which receives different colors as the background changes with a second potion. Others get special colors depending on whether light or dark mode are active. And there’s also a couple sections (like the homepage hero) that change a bit more. Here’s a quick look at how a few sections change:

The about page illustration is also a fun one:

A few UX details

Besides the major drag and drop interactions, there are a few UX considerations needed to polish things:

• When you drag a loot item, you get an outline to indicate where you can drop it. When it’s full (two mushrooms or two potions), you don’t get the outline anymore.
• Mushrooms and potions are restyled as little status dots to show you how many things you’ve dropped.

• You can remove loot from a section by dragging and dropping the eraser. You can remove all loot by hitting the reset button in the footer.
• Your dropped loot should retain from visit to visit (using local storage).
• When this refresh was released, :has() and container queries were not supported by all major browsers. The :has() styles are within an @supports at-rule. The container queries simply do not trigger for browsers that don’t support them.
• Because Dragula requires JavaScript, the loot section is removed when you have JavaScript disabled.
• There’s also some subtle style changes between light and dark mode, including different themes for code snippets. I think this might be the first time I like the dark mode theme better.

Anything else?

I ultimately had a lot of fun with the refresh this year, but gosh I was struggling early on. Probably a few lessons here, but I do appreciate setting deadlines that push me to ship work (even if it’s not quite what I was hoping for).

I ran into some issues with my Grunt setup this time around and I may do a mid-year update and move things around. I recently moved my ancient Wordpress blog I’m trying to revive into 11ty and it was a nice experience.

I just love the web and I’m really excited to see renewed energy around personal sites this year.

Thanks for reading! 👋 See you next year.

With my memory and Twitter getting worse by the day, I wanted to keep a record here of some Netlify projects I worked on.

Dusty Domains

For December 2021, the team wanted to challenge developers to make something new and deploy to Netlify. Previous planning centered around the weird web (right up my alley), but they needed a hook.

I brought the idea of encouraging developers to use those domains they’ve purchased that are sitting around collecting dust. Lauren Sell added the idea of each site contributing some money to charity.

Nine other companies matched Netlify’s $10k donation and we raised $100k for Code2040, Resilient Coders, STEMTank, and Black Girls Code.

Visit dusty.domains to see the sites folks made. And visit thedusting.zone to see the one I made!

Your Year on Netlify

Your Year on Netlify is an end-of-year recap. Developers can log in and see their stats for the year (like total number of builds or how many times they deployed on Friday). I designed the UI to mimic the command line to make it a bit more interactive and did some fun ASCII art to support each section.

Zach Leatherman was really the brains of this operation both coming up with the project idea and developing an open source web component called Squirminal to produce the command line printing effect. And Laurie Voss did a lot of the heavy lifting in gathering and interpreting a huge amount of data.

Check it out at your-year-on.netlify.com. You can experience it with or without logging in.

Open source, Open hearts

For Valentine’s Day 2022, we made oss.love: a way to tell open source developers you appreciate them. A Jason Lengstorf idea with Phil Hawksworth execution made for a really fun project.

I designed the site and created a bunch of valentine cards featuring the cheesiest developer puns I could think of.

Visit oss.love to check them all out—and send one to your fave open source folks.

New Netlify Drop

In a cross-team effort, marketing and engineering pushed out a refresh of Netlify Drop. I was especially excited to work on this feature because it’s a super approachable way to publish a website. Drag and drop makes it so easy and feels like magic.

I worked on bringing the page closer in line with current branding and enhancing the interactions with some fun visuals and CSS animations.

Try out netlify.com/drop.

Matterday

Research showed that switching to Netlify saved teams a day per week. Jon Meyers from Supabase and I teamed up to make Matterday: a site that asks people to think about and share what they would do with more time.

I wrote the copy and designed the site with some scrollytelling effects which I wrote about here: Fun CSS-only scrolling effects for Matterday. Jon built the submission flow and sharing gallery, including an approval process for submissions. He’s awesome.

Check out matterday.netlify.com.

Loading animation

For an internal hack day, I created a new loading animation for the Netlify app. The previous version was a spinning logo. It worked, but could be better. With guidance and input from both brand and product design teams, I made this new loader using SVG and CSS animations.

After it launched a few folks mentioned it was the first time they wished the app loaded slower so they could see more of it.

I put it on CodePen so folks could watch it loop. 👇

See the Pen loading animation prototype by Trung. Do Duc (@2dtrung)CodePen.

Jamstack Conf

A lot of people worked on this project, but I was responsible for the evolution of the site as event details finalized and creating visual pieces ranging from social images to event signange. I also got to work with Sophia Foster-Dimino who did the amazing illustration work.

Wish I could have been at the event, but it was cool to see it all come together from afar.

Visit jamstack.org/conf.

Swag

I also occasionally got to work on some swag! Here’s a few.

The narrative portion of the site encourages folks to imagine what they could do with that time — whether it be small changes to daily routines or taking big swings. As you know, a narrative-heavy website is just begging for some fun scrolling effects. And since I’m me, I wanted to see what I could do with just CSS.

I started with a concept I used for a previous version of andyet.com that utilized fixed positioning and z-index to create layered scrolling artwork.

This time around I wanted to explore the idea of layers obscuring and revealing things to create different illusions and to experiment with scroll speeds.

Creating HTML and CSS layers

With CSS alone you can’t inform the page where you are with things like scroll position and triggers (not yet anyway). Elements can’t be told how to change; they are effectively in one state forever. You could technically have elements animating on a loop, but you wouldn’t be able to control when in the sequence someone might have it visible in their viewport. So creative layering is the path I took to try and bring some additional interest to static visuals.

The structure of the page can be simplified down to three main layers: .background, .overlay, and .foreground layers. The overlay layer includes the rounded rectangle “viewport” on the left. The background layer includes the patterned backgrounds that show through the viewport layer plus the copy on the right. And finally the foreground includes the pieces of artwork that scroll on top of both previous layers.

The background layer is split into two halves, with the background artwork on the left and copy on the right. The markup looks like this:

<section class="the-office">
  <div class="background">
    <div class="background-container">
      <div class="background-artwork"></div>
    </div>
    <div class="content">
      <h3>Watch all 9 seasons of <em>The Office</em> four times through.</h3>
    </div>
  </div>
</section>

And is rendered like this (shown here with overlay and foreground hidden):

I keep adding sections and they create a long page you can scroll through like you would expect:

The overlay is made of two nested <div>s. The .overlay container has a position: sticky so it stays fixed to the top even as its container scrolls. It uses linear-gradient (shown in the screenshot in red) to obscure the areas above and below the “viewport” and the <div> inside is transparent (to show the background layer beneath). A border-radius and box-shadow provide the viewport’s rounded rectangle shape.

<div class="overlay">
  <div></div>
</div>

.overlay {
  --body-bg: #0f6a80;
  --bg-position: calc(50% - 30vh);
  --overlay-w: 35vw;
  --overlay-h: 60vh;
  width: 50%;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  display: grid;
  place-content: center;
  z-index: 1;
  background-image: linear-gradient(to bottom, var(--body-bg) var(--bg-position),
                                               transparent    var(--bg-position)),
                    linear-gradient(   to top, var(--body-bg) var(--bg-position),
                                               transparent    var(--bg-position));
}
.overlay div {
  width:  var(--overlay-w);
  height: var(--overlay-h);
  border-radius: 1em;
  box-shadow: 0 0 0 .5em var(--body-bg);
}

We’ve created a little “window” for the backgrounds to pass beneath to the left of the content. The fixed background gradient and dot pattern, despite being only on the right side of the page, help the two sides feel cohesive.

So here’s how the background and content sections scroll before we add in the foreground layers.

Parallax visuals

Now let’s look at the foreground pieces. The majority of the sections are using a CSS parallax technique using a combination of position, perspective, and 3D transform. This is a pretty tried and true way to have different elements on a page scroll at different speeds. This article by Keith Clark and the accompanying demo are super great for dissecting how this works.

I don’t intend to duplicate Keith’s tutorial here, so at a high level, what the CSS is doing is moving layers forward and backward in space (with translateZ). This creates visual parallax, where things farther in the distance move slower than those up close to you (like looking at scenery go by outside a car window).

The parallax structure setup looks something like this (again, I encourage you to read Keith’s awesome tutorial):

<div class="parallax">
  <section class="parallax-group">
    <div class="parallax-layer">
      <img />
    </div>
  </section>
</div>

.parallax {
  height: 100vh;
  perspective: 300px;
}
.parallax-group {
  height: 100vh;
  transform-style: preserve-3d;
}
.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

After each background/content section, a foreground section is added with class .pieces. That full markup ends up looking something like this:

<section class="parallax-group the-office">
  <div class="parallax-layer background">
    <div class="background-container">
      <div class="background-artwork"></div>
    </div>
    <div class="content">
      <h3>Watch all 9 seasons of <em>The Office</em> four times through.</h3>
    </div>
  </div>
</section>
<section class="parallax-group pieces the-office-pieces">
  <div class="parallax-layer foreground layer-1">
    <img src="/images/the-office-jello.svg" width="237" height="148" alt="a stapler stuck in a Jello mold" class="jello" />
  </div>
  <div class="parallax-layer foreground layer-2">
    <img src="/images/paper-airplane.svg" width="173" height="215" alt="paper airplane" class="airplane" />
  </div>
  <div class="parallax-layer foreground layer-3">
    <img src="/images/the-office-mug.svg" width="160" height="145" alt="World’s Best Boss mug" class="mug" />
  </div>
  <div class="parallax-layer foreground layer-2">
    <img src="/images/the-office-beet.svg" width="200" height="274" alt="a beet" class="beet" />
  </div>
</section>
<section class="parallax-group space-mountain">
  ...
</section>

The demo (and lots of examples you may see) uses the parallax effect on full-width sections which creates a lot of movement. The Matterday site applies the parallax to individual artwork pieces to give them a floating feeling relative to each other. Each of the images is given a “depth” by setting a different translateZ value. To keep things manageable, I have three values set and assigned to classes that I can apply to individual elements.

.parallax-layer.layer-1 {
  transform: translateZ(100px) scale(.71);
}
.parallax-layer.layer-2 {
  transform: translateZ(175px) scale(.5);
}
.parallax-layer.layer-3 {
  transform: translateZ(200px) scale(.5);
}

To place the artwork next to the content section it supports (the one right above it in the page flow), I add a negative margin to those sections.

.parallax-group.pieces {
  margin-top: -100vh;
}

And then each individual piece is tweaked and positioned within its parent.

.the-office-pieces .mug {
  width: 20vw;
  transform: rotate(2deg);
  margin-left: 25vw;
  bottom: -10%;
}

When layering elements like this, you want to be careful you aren’t making any content inaccessible. The copy on the page should still be selectable with a mouse. You could add pointer-events: none to the artwork so you can still access the layer below it, but I opted to make the foreground sections half the width of the viewport so they aren’t overlapping the content at all.

.parallax-group.pieces {
  width: 50%;
}

So in the end, the parallax creates an effect like this:

It creates some nice, subtle movement without feeling like it’s overwhelming or intense scrolljacking. Next I’ll talk through a few of the specific effects (and some tradeoffs).

Re-stacking CSS layers for the “focus” effect

For the section of the narrative “You could sharpen your focus,” I wanted to do a looking glass kind of effect where an element could scroll over a blurry image and focus it. I thought maybe I could lean on CSS filter here or mix-blend-mode or some combination. But because the background and foreground are split up, I had to think about it a bit differently.

The background is set up as normal, but with a handy filter: blur() on it. I also had to scale() it up a wee bit to avoid the feathered edges that CSS blur can cause.

.focus .background-artwork .focus-shapes {
  background-image: url('/images/shapes.svg');
  background-size: 130% auto;
  background-position: center center;
  filter: blur(.6em);
  transform: scale(1.3);
}

The circle effect is made with two foreground layers. The first contains the same background image but not blurred and the second has the teal outline. The effect I wanted was for the circle to pass over the background and “focus” only while it’s over the viewport. To achieve this, I applied a lower z-index to the first circle so it sits below the overlay but still above the background layer. Here is the code (simplified a bit):

<section class="parallax-group pieces focus-pieces">
  <div class="parallax-layer foreground layer-1">
    ...
  </div>
</section>

.parallax-group.focus-pieces {
  z-index: 0;
}
/* Remember that the .layer-1 child will have this transform */
.parallax-layer.foreground.layer-1 {
  transform: translateZ(100px) scale(.71);
}

Both foreground layers are on the same parallax depth (that translateZ) so they move at the same rate and create the illusion of interacting with the background layer.

One small hiccup here. Safari doesn’t like this z-index trick. Because of the translateZ on the foreground layers, it won’t allow for the container to sit below the overlay. A bit of a bummer (but also I get why it behaves that way). Resetting the translateZ does the trick, but then you lose the parallax that makes it feel a tiny bit nicer. So I opted to reset the translateZ only for Safari in this case (you can see the code here, not the nicest CSS I know sorry!).

Using the CSS parallax speed variations for the receipt printing effect

The “Time really adds up” section has a similar thing happening. To make it look like the calculator is printing the receipt, it requires the receipt to “grow” out from behind the calculator’s body (farther away) but to move faster (closer). So the receipt gets .layer-2 and the calculator front gets .layer-1, but will they layer like we want?

<!-- receipt -->
<section class="parallax-group pieces">
  <div class="parallax-layer layer-2">
    <div class="addition-receipt">
      <span>60 min</span>
      <span>+ 60 min</span>
      <span class="total">120 min</span>
      ...
    </div>
  </div>
</section>
<!-- calculator front -->
<section class="parallax-group pieces">
  <div class="parallax-layer layer-1">
    <img src="/images/addition-front.svg" width="330" height="374" alt="addition machine" />
  </div>
</section>

Yes! Mostly. Luckily because the .layer-2 receipt comes first in the markup before the .layer-1, the receipt sits behind the calculator front (except for in Safari which again requires some specific fixes).

The gradient trails below the calculator serve the purpose of obscuring the long receipt when needed. Because the artwork is using vw units to scale depending on the width of the browser, if the window is taller than it is wide, the receipt would sometimes show.

There’s probably better ways to deal with this, but just gotta ship sometimes. Turns out responsive design can be tricky! So many conditions to consider. 😅

Using cutout images for the “Someday” list effect

Finally, a pretty simple but fun detail from the “You could take items off the backburner” section. It features a Trello-like list of items with pill labels that appear empty at first. As you scroll, each pill turns teal with a “Ready” label.

This is achieved with some artwork prep. The pill shapes are cut out from the list “container” so it reveals whatever is behind it. The “Ready” text is the same color as the dark background so you can’t see it until the artwork is above the teal. No CSS needed, the image is doing the lifting here.

But why use CSS instead of JavaScript?

Why do it like this? I love trying new things with CSS. It’s powerful and there are so many cool techniques to experiment with. For most animated scroll experiences, Green Sock really is king and we recently used the heck out of it for the Netlify homepage (shoutout to Justin, Ryan, and Sam for amazing work there). So I figured, why not take a stab at something different? It’s just really fun.

More related to Matterday

• Check out how the CSS parallax scrolling works for yourself! The code is public on GitHub.
• Share what you would do with your Matterday.
• We collaborated with the team at Supabase on this project (which was just delightful), and Jon Meyers published a write-up on how the back-end of Matterday works. Check it out!
• You can also calculate the value of your team’s savings with Netlify’s new ROI calculator!

Thanks for reading! 👋

···

Spoiler: I finally made it work. Here’s a screen recording from Eric Van Holtz that shows the final resizing experience (plus a few extra interactions):

"Wonderful Weirdos of the Web" are welcomed to resize their browsers in another epic @2dtrung portfolio redesign.https://t.co/008ze5ojvi 🤯 pic.twitter.com/5YvhccjFDa

— Eric Van Holtz (@ericvanholtz) December 16, 2021

How it works

This effect is ultimately created by “stacking” a bunch of SVGs on top of each other and then scaling and showing/hiding them in sequence as you resize the browser.

I always hoped I could achieve this experience with CSS alone, but every time I attempted it I ran into big performance issues. To make the artwork scale inversely to the browser width, I could set something like: height: calc(1200px - 100vw).

This works mostly fine on its own, but as the artwork became more layered and complicated, the more the effect broke down. As you resized, the browser would stop rendering the changes. Then once you stopped resizing, it would “catch up” and render the final state. Because the experience relies on things changing as smoothly and as real-time as possible, this just wasn’t going to work.

This was even before I started experimenting with blur effects. To make the effect feel more real, I wanted objects to blur and focus as they moved closer/farther away. I could do this with something like filter: blur(1vw) but this made browsers actually crash once I started resizing. Whoopsies.

I tried a few other things like using clamp (which worked ok for scaling but didn’t provide the level of control I needed) and setting tons of media queries in sequence (which has worked in the past for me, but would become very unwieldy with this one).

So I was about ready to throw in the towel until Scott Kellum tweeted at me and asked if something like Typetura could help. And it was like the clouds parting and I could finally feel the warm sun on my weary face. 🙏

Typetura uses a bit of JavaScript and makes flexible, responsive web typography a breeze (and as it turns out, zooming animations too). It was an especially nice solution here because I was still able to do all of my work in the CSS.

It allows you to set a max-width plus CSS animation keyframes and will interpolate between them as you resize the browser. So for the scaling of a layer of artwork, I could do something like this:

svg {
  --tt-max: 3000;
  --tt-key: scene0;
  --tt-ease: cubic-bezier(.17,.67,.24,.97);
  height: 300vh;
}
  
@keyframes scene0 {
  0% {
    height: 2400vh;
  }
  43%, 100% {
    height: 5vh;
  }
}

I’m setting three Typetura custom properties for the svg:

• --tt-max sets a max-width of 3000px here (which serves as the endpoint for the animation)
• --tt-key associates the selector with the keyframe animation
• --tt-ease sets the animation-timing-function

The animation for scene0 sets two height values at different keyframes for Typetura to animate between. At 0% (0px wide), the artwork will be 2400vh tall and as you scale the browser window wider, the artwork will shrink to 5vh tall around 1290px browser width (43% of the 3000px max-width).

You might be wondering why I didn’t set --tt-max to 1290px then? I started things that way (with each scene having its own max-width), but soon found it difficult to quickly grok when things were happening. 50% meant something different for each scene. It was much easier to wrap my head around the entire sequence as one long timeline where any keyframe could be compared to another.

So I set the --tt-max just once (I dropped it under the body class .home in case I wanted to change it for different pages).

  .home {
    --tt-max: 3000;
  }

This allowed me to easily “place” and stagger transitions along the main timeline spread across different elements. Here’s a simplified example of the door in the desert scene and the timing for when the scene appears and when the window pane becomes opaque (two separate layers):

  @keyframes window {
    0%, 37.5% {
      opacity: 0;
    }
    39.5% {
      opacity: 1;
    }
  }

  @keyframes scene2 {
    0%, 37% {
      opacity: 0;
    }
    37.6% {
      opacity: 1;
    }
  }

And here’s a visualization of what the staggered animations look like along the global timeline:

So from here, any animatable CSS property became fair game, so I was able to use opacity to fade things, transform to move things (like opening and closing the elevator doors), and filter to create blur effects like I mentioned earlier:

@keyframes scene1 {
  20% {
    filter: blur(0);
  }
  25% {
    filter: blur(22em);
  }
  28% {
    filter: blur(0);
  }
}

Or especially fun was one transition that animates between color and grayscale:

@keyframes scene3 {
  45.6% {
    filter: grayscale(0);
  }
  50%, 100% {
    filter: grayscale(100%);
  }
}

Here’s what that looks like in action:

That transition from color to black and white. *chef’s kiss* Incredible! pic.twitter.com/BTXpj8GNOj

— Scott Kellum (@ScottKellum) December 16, 2021

Typetura made the calculations and animations so easy to manage that I was able to spend most of my time illustrating and working out the small details with each scene transition. (Also big hat tip to Lea Verou for her cubic bezier tool which I used a bunch.)

Creating the artwork sequence

So I’ve jumped ahead a wee bit. Once I figured out I could do this, I actually spent a lot of time figuring out what this even was. I had about 2500px of browser width to account for and I wasn’t sure how many different scenes and transitions I would need.

My initial thought was to have three scenes starting with a super wide view of an outdoor landscape zooming into a building far off in the distance and then into a computer screen inside that room. But with some initial tests, zooming a “far distance” felt like it took forever and not enough was changing to make it interesting.

So I shifted to one-point perspective “rooms” you could move through quickly. The living room zooming out through a window was the first transition I figured out. You should have seen the cheering I did once it worked.

And from there I figured out the next scene and then the next and the next. I probably should have made a storyboard but I didn’t!

I did make a list of ideas and inspiration which included surrealism, Centaurworld, Wes Anderson films, the Marvel series Loki and WandaVision, and The Scary Door (the Futurama parody of The Twilight Zone).

It was fun coming up with the different rooms to visit and various “windows” you would travel through (like a television screen or elevator). A few ideas and transitions that didn’t make it in:

• room of clouds
• TRON-like virtual room
• room where everything is upside down
• snowglobe transition
• Stargate or Dr. Strange portal transition
• “through the looking glass” transition

Maybe for another time. 😉

Challenges

As easy as Typetura made this process, I still ran into some weird behavior and gotchas.

Scenes needed to be top level, inline SVG.
If the SVGs were <img>s, some browers would rasterize them when scaling. This helps a ton with performance, but was exactly the opposite of what I wanted to happen! So inline they went.

I also found if I wrapped the SVG with a containing <div> (for namespacing purposes) and applied transforms to the <div> instead, the scaling and transitions started to choke again. So that was out. I guess I could have still applied the transforms to the SVG and left the <div> there solely for the organizational benefit but that felt weird!

If anyone was digging into my CSS for this (which you can do on GitHub), this is why I’m using svg:nth-of-type(5) instead of class names for many of the scenes. This is not great but it allowed me to import the SVG into my index.pug file like this:

  main
    include ../_assets/images/scene0-stars.svg
    include ../_assets/images/scene0.svg
    .airplanes
      include ../_assets/images/scene0-airplane.svg
      include ../_assets/images/scene0-airplane2.svg
    .reflection
    include ../_assets/images/scene1.svg
    .window
    include ../_assets/images/scene2.svg
    ...

This is definitely a me problem. I wanted to use the SVG directly exported from Illustrator without needing to move or edit any code or having to reorganize my Illustrator layers (yikes 😱). This way I could make changes, export, and preview really quickly which I needed to do many, many times.

Balancing visual interest and file size.
I wanted the illustrations to feel fun, whimsical, and detailed while maintaining a reasonable file size. To minimize points and reduce complexity, I tried to stick with rectangles, ellipses, efficient lines, basic strokes, and solid blocks of color everywhere possible. Brushes and textures were off limits. A good, but challenging constraint.

So many screen sizes.
When you actively encourage people to resize your website you better prepare for the weird dimensions! Throughout this process, I had multiple windows open on my laptop and monitor, making sure each scene and transition made sense for narrow, wide, short, and tall windows. The one place where things really started to break is really wide + super short: a very special aspect ratio where you can start to see the edges of the artwork. I did a wee bit of extending widths for some scenes, but for the most part let it ride.

Mobile. Confusion.
As with past years, you need a browser that can resize to experience the fun. So the site on a phone isn’t broken, but it can be confusing if you got there by word of mouth. (I am exploring a way for you to watch the sequence without resizing your browser, stay tuned.)

This version of the site also has a really high chance you land on a weird inbetween state. My friend Kate arrived at the site to see a Pop-Tart against a black background. She suggested I add a little note to encourage folks to resize their browser, which does help. But! I also don’t mind a little bit of initial confusion in this case.

A few other things I considered:

• With Typetura, I needed to be ok with the experience requiring JavaScript. I love a CSS-only effect, but this one benefited so much from the JS assist that it felt worth it. Also, if interpolated values made it into the CSS spec that would be extremely cool.
• Screenreaders felt like a bit of an unknown for me on this one. I ended up including a visually-hidden step-by-step description of the sequence.
• I also thought a lot about motion. Is this a scenario that needs a motion warning? Or should I be using a prefers-reduced-motion query? The animations are all triggered by resizing the browser where you control the speed and duration. I wasn’t sure and I’m still not?

Anything else?

The monitor scene at the largest width has a few fun Easter eggs. These were a last minute addition and I’m glad they made it in! It helped me learn a bit more about fine tuning exports from Illustrator and using JavaScript inside SVG.

It was fun dusting off my timeline animation skills I haven’t used much since the ol’ Flash days. I still don’t think I totally understand bezier curves, but I got much better at predicting how they would behave.

With the end of year deadline looming, the rest of the site got a new coat of paint but not much else changed structurally. I did get to try out variable fonts and do some small optimizations where I could, so that feels like a win too.

At the end of the day I’m still tickled I was able to achieve the landing page I’ve been thinking about for years. I’m again reminded of how the web is such a cool medium and I just love building for it.

As always, previous versions of the site are still viewable in the archive.

Until next year’s refresh. 👋 Thanks for reading!

They’re pricey! But your kitchen sink is something you will likely never replace again (especially if it’s undermount) and it’s the tool in your kitchen you use the most. So we splurged.

The ledge workstation features are nice, but what made it worth the extra money is it fixes an almost universal kitchen sink design flaw (at least in the US).

Chris Coyier actually describes this design flaw nicely in a recent blog post:

It shouldn’t be so hard to replace the rubber splash guard on sink garbage disposals. You need to be a friggin master plumber to get at that thing, and yet it’s the thing that gets gross and needs replacing the most. It’s a conspiracy.

It’s true! But it’s also the standard.

Our new sink was designed to eliminate the permanently-puttied sink ring that catches all the gunk.

And it makes the splash guard easily removable so you can wash it by hand or put it in the dishwasher. 🙀😻

Believe me when I say I sometimes just stand in my kitchen to admire this. It’s a perfect example of asking “Why the heck is it like this?” and making a much needed improvement.

But changing an industry standard has consequences!

The sink comes with a special drain kit that enables attachment to the most popular brands of garbage disposals. The plumber we hired (a lifelong tradesman) had to read instructions to install our disposal. This is something he could normally do with his eyes closed. He said he appreciated the challenge, but I can imagine not everyone would.

There’s also the problem of future problems. If something goes wrong or breaks, I can’t roll down to Home Depot and pick up a replacement. It’ll take a special order from this specific company and what if they eventually go out of business? What then?

And if I ever sell this house, the next person won’t know the sink’s features (and potential issues) unless I leave them some documentation.

Fixing this design flaw (and changing the standard) affects the people who interact with it and the other tools that integrate with it. There’s absolutely risk in moving away from what people have been trained to expect.

For this decision, the ripple of influence felt small as I weighed the tradeoffs. Can I convince a plumber to try a new technique or am I prepared to do this myself? Am I willing to bet on the future of a random sink company in Ohio or to buy extra parts in anticipation of needing them?

In the end I was ready to risk these things. Popping that splash guard out to clean it is so nice. And the seamless drain pleases my design sensibilities every single day.

Ideally this design fix and selling point becomes the standard. Kitchen sink users, we deserve better. Kitchen sink designers, it’s not too late to improve a lasting design.

• Folding header proof of concept
• Creating the header artwork
• Details make the illusion
• Pull-tabs
• About page changing portraits

Over the past few years, my portfolio’s homepage has served as a playground where I can experiment with using the browser in creative ways.

In 2017, I explored the idea that a site doesn’t need to look the same on every device or for every person by giving it a new layout every 100 pixels. In 2018, I tried using the browser as an animation compiler. And in 2019, I treated the browser as a physical space, able to contain more and more as it grows.

This time around I knew I wanted to continue this exploration, but I also wanted to reunify the homepage with the rest of the site for a more cohesive experience. I decided to use more expected layout conventions like a decorative header, full-width but separated content sections, and regular old scrolling.

But how to make that exciting (both to design/build and to ultimately view)?

Some inspiration

Earlier this year, I’d been experimenting with paper effects. I created a handful of pens on CodePen that (with a containing <div> and some styling) could turn an image into a folded poster, leaning cards, a coffee table book, or a trapper keeper.

And I contributed to Style Stage with a stylesheet that turned the page into a folded paper instruction manual.

I liked the idea of treating page elements like paper: light but rigid, foldable, and layered to make cool effect. In the physical world, this is most magically realized in pop-up books.

So I went down a rabbit hole of pop-up folding techniques and paper construction. I watched tons of videos on The Pop-Up Channel on YouTube where Duncan Birmingham talks through and demonstrates every pop-up technique you can imagine. It’s amazing.

I immediately knew I wanted to do pull-tabs. The dissolve technique seemed like a fun challenge to accomplish with code (more on that later). The header felt like a good spot to recreate folding pop-up mechanics. So I dug in.

After some frustrated blank-stare-at-the-screen days, I remembered those cool Al Jaffee fold-ins from Mad Magazine and then remembered a cool demo from developer Thomas Park who recreated the fold-in effect in CSS. So neat.

Thomas’s technique uses 3D transforms on hover, but I wanted the fold to happen slowly as you resize the browser window. So there were two things to figure out: how to make the fold feel realistic and writing a sentence that made sense as words disappeared at two separate fold points.

A proof of concept

I started in CodePen, using some same-sized images to figure out the fold mechanics. Here’s the original pen if you want to tinker, but I’ll describe what’s happening here.

Because I wanted the header to fold two separate times, there are three .panel containers with .left and .right children, each containing an image. The markup looks like this:

  <div class="container">
    <div class="panel">
      <div class="left">
        <img src="tahani.jpg" />
      </div>
      <div class="right">
        <img src="jason.jpg" />
      </div>
    </div>
    <div class="panel">
      <div class="left">
        <img src="michael.jpg" />
      </div>
      <div class="right">
        <img src="eleanor.jpg" />
      </div>
    </div>
    <div class="panel">
      <div class="left">
        <img src="chidi.jpg" />
      </div>
      <div class="right">
        <img src="janet.jpg" />
      </div>
    </div>
  </div>

This uses the technique from my 2019 refresh with a few modifications. I originally thought I could use flexbox alone for this (which got things about 97% of the way there), but to eliminate small but unacceptable-to-me differences cross-browser, using positioning worked best.

For the first .panel, the .left and .right are given a width and positioned absolutely to the left and right of the container.

  .panel:first-child {
    .left,
    .right {
      width: 210px
      position: absolute;
    }
    .left {
      left: 0;
    }
    .right {
      right: 0;
    }
  }

For the next .panel, we want the .left and .right to be positioned adjacent to but inbetween the first set. That looks like this:

  .panel:nth-child(2) {
    .left {
      left: 210px;
    }
    .right {
      right: 210px;
    }
  }

In the 2019 version, each image kept its width and created an overlapping effect. But here, I want the images to squish/stretch to simulate folding. So the .left and .right should fill the availabile space until they reach their full width. We can do this by using calc().

The calculation takes 100% width of the container, subtracts the width of the first two panels (210px * 2 = 420px), and then divides the space by two (since we have a .left and a .right to account for).

I’m using <img> in this example, but in the site I’m using inline SVG. So each of those need preserveAspectRatio="none" added to make sure they scale with their container.

  .panel:nth-child(2) {
    .left,
    .right {
      width: calc((100% - 420px) / 2);
      max-width: 210px;
    }
  }

Here’s a diagram that might help visualize what’s going on.

This same treatment is applied to the third panel and its children.

(You might be thinking that the .panel containers aren’t really needed, and you’re right! But the organizational clarity for me felt worth this extra bit of markup.)

To make it feel more “foldy”, the panels are skewed using transform: skewY(). Setting transform-origin and a bit of translate helps ensure the edges connect at the right places.

  .panel:first-child {
    .left {
      transform: skewY(-2deg);
      transform-origin: right bottom;
    }
    .right {
      transform: skewY(2deg);
      transform-origin: left bottom;
    }
  }
  .panel:nth-child(2) {
    .left {
      transform: skewY(-5deg);
      transform-origin: left bottom;
    }
    .right {
      transform: skewY(5deg);
      transform-origin: right bottom;
    }
  }
  .panel:nth-child(3) {
    .left {
      transform: skewY(-5deg) translateY(18px);
      transform-origin: left bottom;
    }
    .right {
      transform: skewY(5deg) translateY(18px);
      transform-origin: right bottom;
    }
  }

It ultimately creates this effect:

It seems like perspective or 3D transforms make sense here, but they were much more dynamic on resize than I wanted. skew provides the dimensional illusion without shifting as the width changes.

Creating the artwork

So once I got the basics of the header figured out, I jumped into making text and artwork that could fold and unfold, creating a complete picture at each folding point. This was a challenge!

I tried big text, small text, splitting words in the middle (and then doing lots of searches like “words that end with -ign”), and was finally able to land on something that worked.

It was a process of trial and error, but what really helped was laying out the panels in Illustrator like this:

I would create the first panels (smallest fold) and then insert the next panels in between. And then do it again for the final fold:

The illustrations worked similarly, splitting the panels and then making sure the edges meet to create a complete image. Here’s what the final artwork looks like:

After a happy dance of finally figuring it out, I made folding artwork for the /web and /art pages too. (The art page header has a bit of a different treatment, which I’ll describe in the next section.)

Adding details

With any illusion, the details make or break it. With the folding header, the skew (as mentioned earlier) and some shading do the heavy lifting.

Each panel section gets an :after pseudo-element that controls how much “shadow” it gets as the browser resizes. It is first sized and positioned directly on top of its parent.

  .left:after,
  .right:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }

Then each panel gets some background treatment. The top gradient creates a “fold” highlight at the edge and the following two provide some shadowing on either side of the panel. Here’s an example for one section:

  .left:after {
    background-color: rgba(0,0,0,.7);
    background-image: linear-gradient(to right, rgba(255,255,255,.2) 2px,
                                                rgba(255,255,255,0)  2px),
                      linear-gradient(to right, rgba(0,0,0,0)  2px,
                                                rgba(0,0,0,.9) 2px,
                                                rgba(0,0,0,0)  40%),
                      linear-gradient(to left,  rgba(0,0,0,.9),
                                                rgba(0,0,0,0) 40%);
  }

With similar styling applied to all the panels, we get something like this:

To mimic the changing light as it folds, I set a bunch of media queries in quick succession to adjust the opacity of the :after and transition between them.

  .left:after {
    transition: opacity 150ms ease-out;
  }
  @media screen and (min-width: 501px) {
    .left:after { opacity: 1; }
  }
  @media screen and (min-width: 550px) {
    .left:after { opacity: .9; }
  }
  @media screen and (min-width: 600px) {
    .left:after { opacity: .8; }
  }
  @media screen and (min-width: 650px) {
    .left:after { opacity: .7; }
  }
  @media screen and (min-width: 700px) {
    .left:after { opacity: .6; }
  }
  @media screen and (min-width: 750px) {
    .left:after { opacity: .5; }
  }
  @media screen and (min-width: 800px) {
    .left:after { opacity: .4; }
  }
  @media screen and (min-width: 850px) {
    .left:after { opacity: .3; }
  }
  @media screen and (min-width: 900px) {
    .left:after { opacity: .2; }
  }

Best seen on the landing page where you can interact with it, but here’s a screenshot of what that looks like at different widths:

One last detail I’ll mention is the header on the /art page, which incorporates one additional panel section that “pops” up at full width. A sharper transform: skewY() angle makes this work and is the closest I could get to recreating a pop-up page without making my brain melt.

Pull-tabs

Pull-tabs in pop-up books are a really neat technique of layering paper images that move and change soley from movement of the tab along a single axis. To accomplish this with code, I wanted to keep that constraint. The only thing that could trigger an effect was moving the pull-tab to the left/right or up/down.

Of course I hoped I could do this with CSS only, so I tried using resize as the pull mechanism. It worked in some ways, but with limitations on how much I could change the resize handle, it didn’t quite work.

So next I tried using an <input type="range"> slider. I was delighted to see you could style things pretty well (as seen in this CSS-Tricks article). This was very close to what I wanted to do. In the end though, it didn’t allow for the flexibility I needed. It also had a default behavior when clicking and dragging, where the browser shifts the handle to be exactly center under the cursor. You can see that happening here on CodePen. Not a huge deal, but not the experince I wanted.

At this point I started looking for some drag and drop JavScript help. After trying a few libraries, I landed on David DeSandro’s Draggabilly which was a breeze to implement for me and offered single axis movement and containment. Perfecto.

There are three pull-tab techniques I’m using on the homepage: basic (David Rose and Lynn’s sunglasses), straight dissolve (A Single Div), and angled dissolve (Airport Codes).

Basic pull-tab

The basic pull-tab technique relies on “windowed” layers revealing a moving layer underneath. In the case of David Rose, I’m using a handful of images layered below and on top of the draggable layer (the sweater designs). Here’s a visual of the four layers, with David’s sweater transparent and the surrounding area solid. I changed some colors to hopefully make it more clear.

The solid color surrounding areas obscure the sweater design outside of the transparent window. They also leave an unobstructed area so the tab can be grabbed and dragged. Here’s the movement of the draggable layer with the top layers at lower opacity:

The imagery is positioned absolutely one on top of the other. It’s a mix of inline SVG, <img>, and CSS background-image (which I’ll get to later). The draggable layer needs a containing element:

  <div class="david-wrapper">
    <div class="david-pull draggable">
      <img src="david-pull.svg" alt="David’s sweaters" />
    </div>
  </div>

Then with Draggabilly, I can do this:

  var david = new Draggabilly( '.david-pull', {
    axis: 'x',
    containment: '.david-wrapper'
  });

The width of .david-wrapper limits how far the pull-tab can be pulled, serving as the stopping tab you’d build into a paper pull-tab.

Straight dissolve pull-tab

This technique creates a dissolve transition between one image and another. It works by cutting each image into equal strips and layering them in an alternating stack. It seemed like this could be recreated with z-index.

Here’s a pen that shows how this works. You can grab the turquoise layers on the right and drag down.

The markup looks like this, with each <div> numbered for where it sits in the stack.

  <div class="container">
    <div class="one">1</div>
    <div class="three">3</div>
    <div class="five">5</div>
    <div class="draggable">
      <div class="two">2</div>
      <div class="four">4</div>
      <div class="six">6</div>
    </div>
  </div>

Then we position the layers and assign z-index values that correspond with each layer.

  .one {
    bottom: 0;
    z-index: 1;
  }
  .three {
    top: 33.33%;
    z-index: 3;
  }
  .five {
    top: 0;
    z-index: 5;
  }
  .two {
    bottom: 0;
    z-index: 2;
  }
  .four {
    top: 33.33%;
    z-index: 4;
  }
  .six {
    top: 0;
    z-index: 6;
  }

It’s using the same Draggabilly setup.

  var dissolve = new Draggabilly( '.draggable', {
    axis: 'y'
  });

Except I ran into an issue. Draggabilly by default is moving the draggable element with a CSS transform and this creates a new z-index stacking context. So I ended up losing the nice layered effect I had while the element was moving.

A quick fix was to move the element based on its top value instead of a transform. Not the best for performance normally, but it’s such a small interaction I figured it was just fine. (Thanks to Jason Rose for helping me with this one.)

  dissolve.positionDrag = function() {
    this.setLeftTop();
  };

In the CodePen example, you can see top layer #6 sitting above the others. On the homepage, I’m using some artwork plus some strategically placed :before and :after pseudo-elements to cover up any pieces I don’t want you to see. Here‘s how it looks in the end:

Angled dissolve pull-tab

The angled dissolve works in exactly the same way as the straight dissolve, but the layers of the draggable image are masked with angled transparent PNGs.

Why not use CSS clip-path? I wanted to! But clip-path made the image edges aliased, creating a thin line between layers and breaking the illusion. PNGs provided anti-aliasing to give me the smooth edges I wanted.

Here’s how the final effect looks:

Changing portraits

Whew. Still with me? 😅

In lieu of a folding header on the /about page, I illustrated a series of self-portraits dressed as some of my favorite characters. Thanks to Adam Avenir for the idea! As you resize the page smaller, you’ll be able to catch them.

This is accomplished with a big sprite that shifts the background-position for each media query (similar technique I used for the 2018 Bob’s Burgers animation).

It starts with this base image.

  .avatar {
    width: 452px;
    height: 550px;
    position: relative;
    background-image: url('avatar-lynn-base.svg');
  }

And then layers a sprite on top with an :after pseudo-element.

  .avatar:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-image: url('avatar-lynn-costumes.svg');
    background-position: 0 0;
  }

A sample from the costume sprite:

Then I can shift the background-position at each media query to show a different costume.

  @media screen and (min-width: 501px) {
    .avatar:after {
      background-position-x: -452px;
    }
  }
  @media screen and (min-width: 551px) {
    .avatar:after {
      background-position-x: -904px;
    }
  }
  @media screen and (min-width: 601px) {
    .avatar:after {
      background-position-x: 0;
      background-position-y: -550px;
    }
  }
  ... and so on

And it creates this fun effect when you resize the browser:

Aything else?

There’s a couple other easter eggs to discover, but that covers most of it!

Last year I tried out a dark mode theme for prefers-color-scheme and this year I followed Andy Bell’s user-controlled dark mode tutorial which is just wonderful. It uses CSS custom properties in a way I haven’t before and that was cool to learn.

Remember how I mentioned that some of the pull-tabs use a mix of inline SVG, <img>, and background-image? Because of the solid color backgrounds that obscure layers beneath them, I needed to swap those colors for the light and dark theme. Adding a class to SVG paths and changing the fill color with custom properties made that no big lift at all.

Like with every refresh I learned more about cross-browser CSS behavior, SVG quirks, and different ways to lay things out with grid and flexbox. And I learned more than I ever imagined about pop-up books.

There’s a lot of reasons to do this refresh every year, but one downside is that I don’t code things for long-term maintenance. If it changes in a year, there’s not much pressure to try. But this year I did some intentional cleanup, consolidating, and creating of templates that I should have years ago. Felt really good!

I’ll end this with my usual reminder that previous versions of the site are still viewable in the archive.

Until next year’s refresh. 👋 Thanks for reading!

Soon after I went down a rabbit hole of blogs and Instagram videos and holy cow people are making some amazing edible artwork. In my spirit of trying all the things, I made my 2019 resolution to get better at decorating cookies.

I spent a year baking and decorating, trying to make a batch or two each month. I experimented with different recipes and techniques, tried my hand at custom cookie cutters, and ended the year with two big orders for paying customers.

You can jump to the recipes I landed on or see a timeline of all the cookies I made this year, but I also wanted to share some of the things I learned (which are super relevant to design/development or learning any new skill, really).

Utilize shared experience from the community

The cookie decorating world is very open source. Recipes, tips and tricks, and how-to videos are everywhere. We joke a lot about the stories you have to scroll through to get to a recipe, but I read through a lot and found a ton of helpful information.

I watched a bunch of Instagram videos and took a class at Smith-o-lator Cookie Shop in Mesa. Watching experienced folks do their thing helped me level up quickly. It’s very similar in the design and dev world. We like to say we’re self-taught, but a lot of us truly are community-taught.

Map it out

I’m usually a “let’s wing it and see what happens” kind of designer, but with cookies I really did better with a plan. Buying ingredients, chilling, baking, and mixing icing is a process that takes hours and was usually spread across a few days. There’s almost no ‘undo’ or ‘reset’ equivalent here. Makes you appreciate digital work for sure.

I’d make lists of what cookies to make, what icing colors I’d need, and, with some more complicated cookies, I drew things out to provide myself a guide. This was so effective, my husband (with no decorating experience) was able to make a pretty decent Baby Yoda cookie on his own.

Slow down

Icing videos are super sped up and the rare realtime one still shows an experienced hand. It took me a while to find the right pace for me, which always ended up being “slower than you think.” If things started to feel difficult, it always helped to slow down and take my time.

A few icing behaviors I’m still trying to figure out are craters forming as the icing dries and icing colors bleeding into one another.

Research and experimentation tells me it’s a combination of the chemistry of the icing recipe, how viscous you mix the icing, humidity (or in my case, lack thereof), and especially not waiting long enough for things to dry before adding another color. Patience is key!

Cookies are meant to be eaten

Cookie decorating is a decent developer experience vs. user experience analogy. Lots of people were surprised when my cookies tasted good. They’d say, “Pretty sugar cookies never taste good.” It makes sense to me now: almost every technique I found to make the cookies easier to work with or better looking made them taste worse.

Reducing the amount of butter made the cookies easier to cut, held shapes better, and reduced butter bleed (small amounts of grease seeping into the icing), but made them less delicious. Using meringue powder instead of egg whites made the icing so smooth to pipe but dried with a crispier, less pleasant texture. And surprisingly, lots of cookie decorators add corn syrup to their icing. If you see cookie icing that’s got a gorgeous sheen, it likely has corn syrup.

I decided to optimize for taste with the most natural ingredients I could. It made the decorating processs a bit more difficult, but is worth it!

Make all the mistakes

As with learning anything, I made so many mistakes. A cool thing about royal icing is it starts to dry immediately so you have a pretty small window of time to fix a mistake. After that, trying to fix it tends to make it worse. A nice built-in reminder to just accept mistakes and continue on.

This is a skill that requires a lot of hands-on practice and luckily every mistake or ugly cookie you make still tastes just as good.

Tips and tricks

Here’s the advice I can boil down to quick tips and tricks:

• Roll out the dough between two pieces of plastic wrap before chilling. It’s much easier to roll and then can be cut immediately from the fridge.

• Put your piping bag in a glass for easy loading.

• When using a piping bag with tip and coupler, use a tipless piping bag of icing inside it for easier loading and cleanup.
• If your icing consistency isn’t quite right, stop and adjust it. Don’t power through.
• Make more flood icing than you think you need.
• Make less piping icing than you think you need.
• If using a tipless bag, cut the hole smaller than you think you need.
• Use gel food coloring.
• Add some white gel coloring to icing before mixing colors in.
• Use a cookie swivel for easy turning.
• Buy pre-cut parchment paper (so convenient omg).

A year of progress

Here’s all the cookies I made this year. I can see steady improvement and where I took a few steps backward. I had a lot of fun and I think my friends and family liked this hobby too. Excited for all the cookies and progress I’ll make in 2020!

Cookie and icing recipes

And finally after a whole bunch of other stuff, here’s the recipes I use.

This year I initially set out to do something with the z-axis and explore depth and forward/backward motion. I liked the idea of using layered illustration to simulate traveling through space. Something like the opening of Beauty and the Beast, but maybe you travel through different worlds or through tiny doors like Alice in Wonderland.

What really got me excited though was the concept of Russian nesting dolls. You open one and something similar, but wholly different exists inside.

I started with the idea of a self portrait that cracked open revealing new faces as you scaled the browser. Further scaling would zoom in, each outer head becoming blurred and eventually leaving the frame as you moved forward. I hoped it would feel dynamic, as if it existed in 3-dimensional space.

I started implementing this into HTML and CSS to see if it would feel as I was imagining. I set it up with relative widths and heights so the artwork would fill the entire browser window. Even before I could add in some subtle transforms and transitions, the browsers screamed out in protest. Safari was like, “Nope!” and literally stopped rendering anything.

Soooo... what now?

I tried things out with absolute pixel dimensions and things worked much better. Fewer calculations for the browser to make seemed like the way to go. So instead of zooming in, maybe at wider widths you could see every face in a strange, horizontal stack.

Preparing the artwork

As I was illustrating the different faces, I realized I was constrained by the mostly oval shape of the original portrait. Each subsequent face is hidden behind the one that precedes it, and to maintain the “reveal” they do need to stay obscured until it’s their turn.

This constraint did help me move pretty quickly with illustrations. I was able to find inspiration in things I like and art styles I admire. Especially fun were the Lichtenstein and Picasso homages.

Keeping the heads mostly the same size and shape also made the layout calculations so much easier (even though it can look pretty gnarly in my source files). I’ll dive into that more in a bit.

Laying things out

Each face is made up of a container div and two images (one for each side of the face). The markup looks like this:

  <div class="face" id="blue">
    <img src="left-blue.svg"  class="left"  />
    <img src="right-blue.svg" class="right" />
  </div>

There are three major styles in play to create the opening effect. Each div has a specific min-width and each image is positioned a specific value from the left and right.

So the initial blue face gets styling like this:

  .face#blue {
    width: 100vw;
    min-width: 620px;

    .left {
      position: absolute;
      left: 110px;
    }

    .right {
      position: absolute;
      right: 110px;
    }
  }

Here’s a diagram that might help visualize what that looks like.

The next face (the skull) would then have styling that looked something like this:

  .face#skull {
    width: 100vw;
    min-width: 840px;

    .left {
      position: absolute;
      left: 220px;
    }

    .right {
      position: absolute;
      right: 220px;
    }
  }

Each subsequent face would get adjusted min-width, left, and right values so they are positioned correctly to create the reveal as the browser scales.

Snap into place

A little detail I love is the faces scale and move a wee bit when they open. This creates a “snap” effect that adds some dimension.

This is achieved for each face with two media queries in quick succession and CSS transforms.

  @media screen and (min-width: 621px) {
    .face#blue .left {
      transform: scale(1.07) translate(-6px,0);
    }
    .face#blue .right {
      transform: scale(1.07) translate( 6px,0);
    }
  }

  @media screen and (min-width: 629px) {
    .face#blue .left {
      transform: scale(1.07) translate(-6px,7px);
    }
    .face#blue .right {
      transform: scale(1.07) translate( 6px,7px);
    }
  }

It might seem like a small thing, but it adds a lot.

Shadows and masking

One of the most challenging aspects of this concept was getting the shadows to behave the way I wanted.

With the faces overlapping each other, I wanted each one to cast a shadow on the face below it. CSS masking would make this possible. As you can see in the gif below, the shadow should only show on the skull’s surface, but it needed to be “stuck” to the blue face as things move. I have the full linear-gradient and the mask in orange showing on the left and the effect it creates on the right.

I originally planned to add the mask to each <div class="face"> and use an :after for the shadow, but there’s a fun browser bug I had to work around. In Chrome, position: fixed doesn’t work if that element’s parent has a transform applied (remember that snap?). And position: fixed was required to get the effect I wanted.

So the markup for each mask ended up like this, as a sibling of the corresponding face.

  <span class="mask">
    <div class="left" ></div>
    <div class="right"></div>
  </span>
  <div class="face" id="pizza">
    ...
  </div>

The left and right div have the mask applied. It’s an SVG that is placed at the same left/right values as the face (in this case, the skull). An :after pseudo-element draws the shadow.

  .mask {
    bottom: 200px;
  }

  .mask .left {
    mask-image: url('left-skull-mask.svg');
    mask-position: left 220px top 0;
    mask-size: auto 400px;
  }
  .mask .right {
    mask-image: url('right-skull-mask.svg');
    mask-position: right 220px top 0;
    mask-size: auto 400px;
  }

  .mask .left:after {
    position: fixed;
    left: 220px;
    background-image: linear-gradient(to right, rgba(0,0,0,.3) 50%, transparent 57%);
  }
  .mask .right:after {
    position: fixed;
    right: 220px;
    background-image: linear-gradient(to left, rgba(0,0,0,.3) 50%, transparent 57%);
  }

Because of that Chrome bug, I have to do a little bit of manual changing to each mask to account for the snap transform:

  @media screen and (min-width: 841px) {
    .mask {
      bottom: 186px;
    }
    .mask .left {
      mask-position: left 207px top 0;
      mask-size: auto 428px;
    }
    .mask .right {
      mask-position: right 207px top 0;
      mask-size: auto 428px;
    }
  }
  @media screen and (min-width: 849px) {
    .mask {
      bottom: 178px;
    }
  }

The shadows working in this way gives some depth and dimension to each layer as it moves in front and behind the others.

Pre-processors are wonderful

I have the CSS simplified here to show the basics of how things are working. But if you were to look at my Stylus file for this page, things are set up a bit differently. I won’t go too deep into it to save all of our brains, but here’s a quick overview.

Because the calculations were pretty consistent for the different faces, I was able to set variables and create mixins that calculated all the various poitioning values for me. So for the face widths, I set variables like this:

  $face-1 = 620px
  $face-2 = $face-1 + 220
  $face-3 = $face-2 + 220
  $face-4 = $face-3 + 220
  $face-5 = $face-4 + 220
  ...

And then my mixin could look like this:

  face(num,width,width2)
    min-width: width
    bottom: var(--face-y)
    z-index: (32 - (num * 2))

    img.right
      right: (100px * num + 10 * num)
    img.left
      left:  (100px * num + 10 * num)

    @media screen and (min-width: width + 1)
      img.right
        transform: scale(1.07) translate( 6px,0)
      img.left
        transform: scale(1.07) translate(-6px,0)

    @media screen and (min-width: width + 9)
      img.right
        transform: scale(1.07) translate( 6px,7px)
      img.left
        transform: scale(1.07) translate(-6px,7px)

    @media screen and (max-width: width2)
      opacity: 0

(I’m using a custom property of var(--face-y) here to position the faces from the bottom of the browser for various vertical media queries):

  :root
    @media screen and (max-height: 550px)
      --face-y: 50px

    @media screen and (min-height: 551px)
      --face-y: 200px

    @media screen and (min-height: 820px)
      --face-y: 400px

    @media screen and (min-height: 1100px)
      --face-y: 570px

But back to that mixin.

I was then able to create each face with this short declaration style. Setting things up like this with :nth-of-type allowed me to change the order and remove/add faces in the markup without needing to adjust any CSS. (This is also why the faces and masks are different element types, divs and spans respectively.)

  .face:nth-of-type(1)
    face(1,$face-1,0)
  .face:nth-of-type(2)
    face(2,$face-2,$face-1)
  .face:nth-of-type(3)
    face(3,$face-3,$face-2)
  .face:nth-of-type(4)
    face(4,$face-4,$face-3)
  .face:nth-of-type(5)
    face(5,$face-5,$face-4)
  ...

The masks also get a mixin (which is a bit more complicated). Math, amirite?

  $shadow-h = 428px

  mask(num,name,width,width2)
    min-width: width
    z-index: (32 - (num * 2) + 1)
    bottom: var(--face-y)

    @media screen and (min-width: width + 1)
      bottom: calc(var(--face-y) - 14px)
    @media screen and (min-width: width + 9)
      bottom: calc(var(--face-y) - 22px)

    .left,
    .right
      min-width: width
      @media screen and (min-width: width + 1)
        height: $shadow-h
        mask-size: auto $shadow-h

    .left
      mask-image: url('https://2dtrung.site/assets/images/left-' + name + '-mask.svg')
      mask-position: left (100px * num + 10 * num) top 0
      @media screen and (min-width: width + 1)
        mask-position: left (100px * num + 10 * (num - 1) - 3) top 0
      &:after
        left: (100px * num + 10 * num)

    .right
      mask-image: url('https://2dtrung.site/assets/images/right-' + name + '-mask.svg')
      mask-position: right (100px * num + 10 * num) top 0
      @media screen and (min-width: width + 1)
        mask-position: right (100px * num + 10 * (num - 1) - 3) top 0
      &:after
        right: (100px * num + 10 * num)

    @media screen and (max-width: width2)
      opacity: 0

With this mixin, I can create each mask with a short declaration (inside a @supports for good measure).

  @supports(mask-image: url(''))
    .mask:nth-of-type(2)
      mask(2,skull,$face-2,$face-1)
    .mask:nth-of-type(3)
      mask(3,pizza,$face-3,$face-2)
    .mask:nth-of-type(4)
      mask(4,pops,$face-4,$face-3)
    .mask:nth-of-type(5)
      mask(5,mustache,$face-5,$face-4)
    ...

There’s some more fun Stylus stuff going on that made the process fun and manageable for me. If you want to dig into that, take a peek on GitHub.

Other details

There’s a lot for me to love and for you to discover in this refresh, but I will say one of my favorite parts is the helmet and cyborg faces combo. I knew I wanted to play with transparency somewhere and I love how resizing the helmet reveals even more.

And of course, I love tiny stretchy Lynn at the center of it all. The arm stretching was a last minute addition and a brilliant suggestion from my friend Richard. The left/right mechanical arms and pulleys couldn’t use my nice mixins, so I had to write something extra for those. I realize not everyone has a giant monitor to see this, but I really loved it and wanted to include it.

Also, vertical media queries + pups. ❤

Lots of good stuff learned

I always learn something new with these refreshes and this one was no different.

I got to try out masking and discover all the weird browser issues with it (Edge, why you leave artifacts?). I got pretty good at positioning and made my brain hurt figuring out repeatable calculation patterns.

I found the limit of what the browser could render while resizing. And I gained a better understanding of when I should use CSS custom properties vs pre-processor variables.

Plus I got to try out styling the site for dark mode.

I’ll end this with a friendly reminder that previous versions of the site are still viewable in the archive.

Until next year’s refresh. 👋 Thanks for following along!

I don’t think I need to convince anyone that having another person review your work is a good thing. It’s probably already built into your teams and processes. Programmers pair up and build a feature together, bouncing ideas off one another. Code reviews are required before new work can be merged into our apps. Design teams hold critiques where the work is examined and people provide feedback.

In most of these cases, the people reviewing the work are our teammates or clients. Let’s say they’re “People who get you.”

People who get you

These people work with you. Sometimes it feels like your coworkers and clients understand you better than you do. This makes discussing your work super productive. They know what you’re trying to do, they get your communication style, and they see a similar vision for the work. When the feedback is good, it’s really good. You’re collaborating and the work is flowing.

But are there gaps that can cause the work to suffer? The People who get you are usually like-minded and can be oblivious or ignorant to the same things you are. Have you ever seen a product or marketing campaign that’s just blatantly offensive? You ask yourself, “How could they not see it? No one said anything?” Maybe all the people in the room were missing this crucial information. Or the person who saw it couldn’t speak up or was ignored.

Keeping feedback inside a project, team, or org can be weighed down by cultural baggage. Teams love to say they’re low on politics, but honestly it’s unavoidable. A higher-up can drop a bomb of feedback and derail a team. Teammates can resist solutions because it’s not how it’s always been done. Sometimes feedback and ideas are actually heard from only specific people or roles, despite how many people are saying them.

So what then? Ask for feedback from people who don’t know you? That can be risky. They don’t know your history, all the difficult decisions you’ve had to make to get to today. They don’t have an investment in your success. You’ll have to catch them up and answer questions you’ve answered before, turn down ideas you’ve already tried and rejected. It’ll take too much time.

But there’s an opportunity there, with these People who don’t get you …yet.

People who don’t get you …yet

The cool thing about getting an outside perspective is it’s a viewpoint that’s impossible for you to have yourself. Seeing things for the first time is insight a person has once.

We’ve seen the immense value of putting our work and processes in front of a beginner or a brand new teammate and them asking questions and speaking their mind. It can immediately reveal gaps in documentation, process, or our assumptions. It brings a unique clarity that only a Person who doesn’t get you yet can.

And the time spent “catching them up” is the perfect chance to evaluate how you explain your work. There is only so much time, so what information do you convey and what do you cut? They’ll likely ask questions you’ve already answered, but I’m certain they’ll ask questions you haven’t considered. Often decisions get made without us realizing it and this forces you to examine them and explain why things are as they are.

People who don’t get you yet can see and evaluate your work without the baggage I mentioned earlier. They can see the work at face value, as it is. They won’t be worried about shareholders or the many years you’ve spent iterating. Does the work reflect the purpose and direction you’re selling?

And as far as investing in your success, if you find the right People who don’t get you yet, they will approach this important job of giving feedback with support and encouragement in mind. It can absolutely be counterproductive to seek this valuable insight from people who don’t have your back. In our experience, peers and/or consultants who can bring humility, kindness, and expertise to this process are value multipliers.

--

This was originally published on blog.andyet.com.

With this, my favorite little side project is born.

I draw some food, a Captain America shield, and an iPhone battery. CSS solidifies itself as my favorite artistic medium.

With each drawing, I share a tweet. People seem to really dig it. It encourages me to keep going.

I give the project a name and buy a domain.

Mozilla Hacks invites me to write a tutorial.

My web heroes see the project, share it, and praise it. I can’t believe it. I’m positively glowing 😻.

A Single Div hits Reddit and Hacker News. It’s exciting and horrible at the same time. It inspires my favorite tagline: I specialize in projects that make people say “I don’t get it.”

The drawings become more complex as I try out new techniques and find new challenges.

A Single Div is featured in Net Magazine. I’m beside myself with joy.

People holler at me about SVG. This seems to hold even for my projects that follow. Something I can joke about fondly now. Yes, I’ve heard of SVG.

I give a talk on CSS illustration at CSSDay. I share A Single Div and talk about art with a bunch of developers. I’m holding on to this high.

A Single Div becomes a project I can work on even when I’m feeling stuck. A few hours here or there and the site continues to grow.

I learn so much about CSS behavior. I grow a deep, mental reference I can pull from for my job and paid projects. “Real” projects as people often say. But truly, what project isn’t real?

I test the limits of my creativity. The constraints help me to see things differently. And to see myself differently. “Can I draw this?” feels like “Gosh, I don’t think I can.” But with enough thinking, it shifts to “Holy crap, it works.” Honestly I still look back at some of these drawings and wonder how the heck I did that.

I’ve learned so much from you, little side project. Happy fifth anniversary (I heard the traditional gift is wood 👇).

🍻 Cheers to five more years.

There were logistical decisions to be made and questions to answer. How long would I need? What kind of financial place would I need to be in? Would &yet hold my job for me? That all felt easy compared to the more nebulous and philosophical questions on my mind. In hindsight, three months isn’t that long, but our country’s culture has a way of punishing those who step away from work. And it encourages us to punish ourselves.

I had a lot of thoughts. What if taking time off doesn’t help? What if this time away damages my career in some way? What if I forget things, fall behind?

What if I lose a part of myself?

…

While on sabbatical, I went to my local gym early one morning to shoot hoops. I hadn’t played in years and I knew the court would be empty. Turns out dudes at the gym don’t usually want a 5’3” Asian chick with glasses on their pick-up basketball team. Go figure.

I used to play every day growing up and played on lots of teams. I was actually pretty good. Maybe on this break I could ease my way back into it.

As I walked toward the hoop something happened. I dribbled, I squared up, and I took a shot. Swoosh. My arm lingered vertically in the air. Follow through. I grabbed the ball and took more shots. Swoosh. Swoosh. The ball met the wood floor and returned to my hand. Over and over.

It’s the first time I’ve cried at the gym. Muscle memory is a hell of a thing. All the work and the practice and the connections you made are still there. Even years later, you pick back up and it’s still you.

I’d just spent a year or so feeling unsure of where I was, feeling unlike myself in ways I couldn’t reconcile. And then that morning, shooting hoops in an empty L.A. Fitness, there I was.

…

I didn’t do much web work during my break. I unpacked the pile of moving boxes we’d been living out of, tried making some things out of wood, visited some cool places in Arizona, and watched a good helping of reality television. I was surprised by how much I loved my time away. Maybe I could do this forever.

And when I returned to work and to the web, there I was, again. Sometimes the work just flows out of you. Intuition is built from years of practice. Habits. Muscle memory.

A connection between disparate skills zapped into place in my brain. The feeling of effortlessly sinking free throws and the joy of combining CSS properties to make visual magic.

I’ve read a lot about specialists and generalists. T-shaped people and comb-shaped people. None of these have felt right to me. Every thing I do and learn and try makes this complex web of knowledge and experience. Each new thing strengthens the web and makes it more entangled.

Maybe I’m a web-shaped person, a web builder. A spider-person. A friendly neighborhood Spider-Woman.

I’m also sort of the Queen of getting out of shape and then back into shape in a weird wave pattern that never ends. I’ve accepted it and stopped pushing against it. And this I’ve learned, is how I work too. Being constantly prolific isn’t the norm for a lot of creative people. It’s ok to create seasonally. Some seasons we’re hibernating and others the work bursts from our fingertips without hesitation.

It’s good to rest when we need it.

If I’m stuck on a problem, I take a shower. Clean my bathroom or take a nap. When I return, the answer is right there clear as day. I joke that procrastination is part of my process, but I do mean it. Sometimes seeing the answers, connecting the dots, takes a bit of time away.

So if it’s calling you, take a break. When you come back, you’ll be there.

--

This was originally published on blog.andyet.com.

The commercials are all impressive, some funny, some deeply moving, and some were basically short films. I love the extra effort that goes into Super Bowl ads here in the U.S. so this was a lot of fun.

I’ve been thinking about it ever since, so I collected all of the commercials here. They’re worth checking out.

Here’s what won Commercial of the Year: an ad about normalizing periods. It’s well done!

#Bloodnormal
Essity, Libresse/Bodyform for AMVBBDO by Somesuch, directed by Daniel Wolfe

And then the rest. Here’s a YouTube playlist of the commercials that won Bronze, Silver, and Gold (except for the Instagram ad A day on planet Stories which you can view on Vimeo). See below for each ad’s individual link and details.

I think my favorites might be Viewers, What Girls Are Made Of, Differences, Timeless, and The Gene Project.

Bronze

Best Friends
Mars Petcare, Dreamies Deli-Catz for adam&eveDDB by Caviar, directed by Keith Schofield

A day on planet Stories
Instagram, Instagram Stories for Wieden+Kennedy Amsterdam by Caviar, directed by Dent De Cuir

Comic Relief Safety Video
British Airways, Comic Relief for BBH by 2AM, directed by Becky Martin

The Small Prices
TK Maxx, Spring Summer for Wieden+Kennedy London by Bold, directed by Adam & Dave

Viewers
Google, YouTube for AMVBBDO by Pulse Films, directed by ThirtyTwo

Mo Farah--Smile
Nike, Nike Running for Wieden+Kennedy London by Rogue, directed by Mark Zibert

Rummager
VISA, Holiday Money for Saatchi & Saatchi by Somesuch, directed by Sam Hibbard

Kovonation Street Opening
CompareTheMarket.com for VCCP Blue by Passion Animation Studios, directed by Dave Scanlon

Fall Fashion
H&M for adam&eveDDB by Caviar, directed by Karim Huu Do

We Are All One
On, on-running.com for TheBay 13 Institute by Hungry Man, directed by Richard Bullock

E.ON x Gorillaz: A Solar Collaboration
E.ON, Solar PV Batteries for WCRS by Blinkink at Blink, directed by Noah Harris

Silver

It’s perfectly normal. Until it’s kwiffed. Caught Glas
Kwiff for Droga5 London by Biscuit Filmworks, directed by Jeff Low

Women’s Euros 2017
Channel 4, made by 4creative, directed by Alex Boutell

Barbers
Apple, iPhone 7 Plus for Apple by Furlined, directed by Dougal Wilson

Snowed In
Waitrose for adam&eveDDB by Academy Films, directed by Martin De Thurah

Born Confident
Volkswagen, T-Roc for adam&eveDDB by Somesuch, directed by Nick Gordon

London Needs You Alive
Mayor of London, Greater London, Knife Crime for AMVBBDO by Academy Films, by Novemba

Epic Lift
MoneySuperMarket, MoneySuperMarket.com for Mother by Blink Productions, The Bobbsey Twins from Homicide

Anthony Joshua
Lucozada, Lucozada Sport for Grey London by Smuggler, directed by Christopher Hewitt

I Love Doing Dishes
Finish, Dishwater Tablets for Wieden+Kennedy London by FRIEND, directed by Ian Pons Jewell

What Girls Are Made Of
Nike for Wieden+Kennedy London by Riff Raff, directed by David Wilson

Atlas
Squarespace, Build A Website for Media Sages by Biscuit Filmworks, directed by Andreas Nilsson

Mother and Daughter
Sky, Sky Cinema for WCRS by StrangeLove, directed by Ben Liam Jones

It’s perfectly normal. Until it’s kwiffed. Father & Son
Kwiff for Droga5 London by Biscuit Filmworks, directed by Jeff Low

140 Years
Wimbledon for McCann London by Friends Electric and Craft/McCann, directed by Lucas Zanotto

Gold

The Supporting Act
BBC, BBC One for BBC Creative by Blinkink at Blink, directed by Elliot Dear

Clowns
Audi for BBH by Rattling Stick, directed by Ringan Ledwidge

More Than A Game
EA Sports, FIFA 18 for adam&eveDDB by Smuggler, directed by Adam Berg

Differences
BBC, CBeebies for Karmarama by Smuggler, directed by Joshua Neale

Delivering Awesome
Virgin Media, Fibre Broadband for BBH by Rogue, directed by Sam Brown

Fanfare, White Cliffs, Football
Channel 4, Channel 4 Idents 2017 for 4creative by Blink Productions, directed by Dougal Wilson

Boundaries
Canon, Cameras for VCCP by Riff Raff, directed by Megaforce

Dream Makers
Honda, FIlm on Four for Wieden+Kennedy London by Time Based Arts, directed by James Allen and Mike Skrgatic

The Great British Bake Off
Channel 4 for 4creative by Blinkink at Blink, directed by Parabella

Alive
Bose, Bose Headphones for Grey London by Smuggler, directed by Miles Jay

The Faith of a Few
Mini, John Cooper Works for Jung von Matt by ANORAK x Somesuch, directed by Daniel Wolfe

Pride and Breadjudice
Warburtons, Seeded Batch for SCRS by Another Film Company, directed by Declan Lowney

The Button
Volkswagen, Golf GTE for adam&eveDDB by Independent Films, directed by Gary Freedman

Timeless
Lacoste for BETC Paris by Academy Films and Wanda, directed by Seb Edwards

The Heist No One Is Talking About
Oxfam for Don’t Panic by Stink Films, directed by Tom Green
* Disturbing content warning for this one

Youth Can Do It
Prince’s Trust for The&Partnership London by Park Pictures, directed by Andrea Arnold

Ostrich
Samsung, Samsung Gear VR for Leo Burnett Chicago by MJZ London, directed by Matthijs van Heijningen

The Gene Project
Unilever, Marmite for adam&eveDDB by Outsider, directed by James Rouse

Commercial of the Year

#Bloodnormal
Essity, Libresse/Bodyform for AMVBBDO by Somesuch, directed by Daniel Wolfe

In sum though, the 2017 redesign featured 20 media queries where the site changed drastically every 100px. I knew this year I wanted to build upon that concept.

In the previous version, the 21 separate layouts each utilized their available space, but their order in sequence wasn’t all that deliberate. I thought it might be interesting if things still changed as you scaled the browser, but the change was meaningful depending on whether you were scaling up or down.

A few ideas seemed promising:

• Maybe the viewport could zoom in or out on an aerial map or scene. Go from a macro view of something small and zoom out into space.
• Maybe the user could feel like they were moving deeper into a physical space using layered imagery. Like walking through rooms in a first-person video game.
• Maybe things could be “tipped off a table” as the browser edge came into contact or grow in number as the browser grows.

With all of these, it felt like animation was going to be an important part. I researched and thought a lot about various animation techniques and styles. Should it be CSS-drawn? Should JavaScript lend a hand here? How can I have interesting imagery that changes over many breakpoints without having a massive amount to download? I knew it’d probably be a lot of work, but how much work?

A good compromise I landed on was animating a single character. I could keep the illustration style pretty simple and possibly show various frames by shifting a background-image sprite in the same way we do for other imagery on our websites.

So what could be fun with that constraint? I thought about a person moving across the screen as the browser moved or getting more cramped inside a “box” as the browser shrunk. I knew I wanted the animation to work both ways—so you could resize the browser randomly and everything still made sense.

If anything was going to shrink/grow with the browser, why not clothes? They could shrink teeny tiny and grow huge and baggy. That might be fun. I tried a few illustration styles (including a nod to The Loud House) before settling on paying tribute to the genius Bob’s Burgers.

With this style (from the show outro), I could keep things simple and make a fun background that wouldn’t distract from the character animation in the foreground.

Preparing the artwork

I started by drawing three full frames to see if it felt like a good direction to go. All the people I showed laughed when they saw it, so I decided to go all in.

As I drew all the in-between frames, I realized it would be a lot to download, especially if I was using SVG (so many anchor points). So I continued making every frame for the items that needed it and reusable frames for other pieces.

The hair, faces, mouths, arms and legs became little reusable libraries. I sprited together as much as made sense to reduce the number of files.

And with SVG, every anchor point matters, so I spent some time simplifying and optimizing the artwork in Illustrator. I made small changes to reduce points, like smoothing lines, removing some shadowing, and ditching the ribbed lines on the hoodie’s cuffs.

I’ll tell you what, I learned a lot of new shortcuts in Illustrator. Nothing quite like extremely tedious tasks to get you streamlining. After export, I ran it through a handful of SVG optimizers until I got a result I felt comfortable with.

In between all of that, I did dabble with the idea of using PNGs instead. File size was sometimes smaller, but I lost the scaling flexibility I ultimately decided I wanted.

Markup and Styling

Sorry this isn’t a single div 😂. I set up the background and character with the following markup:

  <div class="lynns-burgers">
    <div class="lynn">
      <div class="other legs"></div>
      <div class="other shoes"></div>
      <div class="clothes pants"></div>
      <div class="other arm arm-left"></div>
      <div class="other arm arm-right"></div>
      <div class="other hair"></div>
      <div class="other shirt"></div>
      <div class="clothes hoodie"></div>
      <div class="other face"></div>
      <div class="other mouth"></div>
    </div>
  </div>

With regards to the CSS, I’ll start by saying I would not have attempted this without a preprocessor. I’m using Stylus variables and mixins a whole bunch to make everything more manageable (I ultimately needed to write over 220 media queries). This does add a lot of moving pieces and a few layers of abstraction. It made it worlds easier for me to accomplish what I needed but, as I’ve realized trying to write this, it makes things a lot harder to explain.

So, in the interest of time and all of our brain goo, I’ll go over a couple specific pieces that went into producing the animated sequence. If you want to dig in and see all the weird decisions I made, you can view the source code on GitHub.

For most of the pieces (like the shoes, legs, clothing, hair), I give the <div> dimensions, declare a background sprite, and position it appropriately. Then its background-position is shifted, giving each media query a new frame of the sequence.

Let’s say the frames changed every 20px, and the width of each .hair frame is 100px, then the CSS might look something like this:

  @media screen and (min-width: 501px) and (max-width: 520px) {
    .hair {
      background-position: 0 0;
    }
  }
  @media screen and (min-width: 521px) and (max-width: 540px) {
    .hair {
      background-position: -100px 0;
    }
  }
  @media screen and (min-width: 541px) and (max-width: 560px) {
    .hair {
      background-position: -300px 0;
    }
  }

Some of the pieces (like arms, mouths, and chin dimples), needed to have their background-position changed with each query, but also to be positioned and sometimes rotated.

So a media query for these pieces might look more like this:

  @media screen and (min-width: 501px) and (max-width: 520px) {
    .arm-left {
      background-position: -50px 0;
      left: 103px;
      top: 56px;
      transform: rotate(14deg);
    }
  }

This is a lot of CSS to write (44 frames for most character pieces), so Stylus is a huge help here. This might need some closer inspection at the source files to really grok, but here’s a preview of what I was doing.

I was able to reuse a lot of the media query syntax with variables and mixins:

  /* Set min-width and frame increment */
  $min-w = 412px
  $step = 23

  /* Shift background-position only */
  frame(number, args) {
    @media screen and (min-width: $min-w + $step * number) and (max-width: $min-w + $step * (number + 1) - 1) {
      background-position: args;
    }
  }

  /* Shift position only */
  move(number, left, bottom) {
    @media screen and (min-width: $min-w + $step * number) and (max-width: $min-w + $step * (number + 1) - 1) {
      left: left;
      bottom: bottom;
    }
  }

  /* Shift background-position, position, and rotate */
  place(number, args, left, top, deg) {
    @media screen and (min-width: $min-w + $step * number) and (max-width: $min-w + $step * (number + 1) - 1) {
      background-position: args;
      left: left;
      top: top;
      transform: rotate(deg);
    }
  }

With a bunch of other variable declarations, I was able to write each of the frames/queries like this:

  .hair
    frame(0, $hair-2)
    frame(1, $hair-3)
    frame(2, $hair-4)
    frame(3, $hair-2)
    frame(4, $hair-5)
    ...

  .arm-left
    place(0, $arm-3, calc(var(--arm-base) * .74), calc(var(--arm-base) * 1.18), 14deg)
    place(1, $arm-5, calc(var(--arm-base) * .72), calc(var(--arm-base) * 1.18), 10deg)
    place(2, $arm-7, calc(var(--arm-base) * .78), calc(var(--arm-base) * 1.22),  9deg)
    place(3, $arm-5, calc(var(--arm-base) * .78), calc(var(--arm-base) * 1.18),  4deg)
    place(4, $arm-5, calc(var(--arm-base) * .76), calc(var(--arm-base) * 1.18),  7deg)
    ...

I know that place declaration looks a bit scary, but it provided the most clarity for me about what was happening with each query. I’m using calc() and CSS custom properties here which I’ll get to in a bit.

Hold up

You might be wondering why I didn’t save the entire character for each frame so I’d only have to shift one large image sprite. Why the pain of all these different variables, mixins, and things?

The practical reason is the sprite would have been a ginormous file, even as a PNG and especially as an SVG. Breaking the illustration into pieces made file sizes more manageable.

But to be honest, shifting one large sprite just isn’t as fun?

I wanted to try this and see if I could do it. It was challenging and satisfying figuring out how to organize things, how to piece everything together, and how to work through all the small tweaks to make the animation work. Something something Frank Chimero, the long, hard, stupid way something something.

So what else was involved?

There are a few more media query mixins I used for more fine-grain control of what was happening. A ‘range’ query to have a frame show for multiple $step increments, a ‘hide’ query to add display: none to elements when they weren’t needed (like the legs once the pants grew long), and a ‘last’ query with no max-width for the final frame. Those would show up like this:

  .legs
    ...
    frame(        7,     $legs-1)
    frame-range(  8, 12, $legs-5)
    frame-range( 12, 16, $legs-2)
    hide-min(    16)

  .hair
    ...
    frame(       39,     $hair-2)
    frame-range( 40, 42, $hair-3)
    frame(       42,     $hair-2)
    frame-last(  43,     $hair-14)

There’s two different $step increments being set: 23px for laptop screens and 47px for monitor-sized screens. Most desktop users should get the full sequence without having to move to a larger screen.

For tall screens, the artwork gets resized which allowed me to dabble with CSS custom properties. With calc() and custom properties, it was easy to swap in new values depending on the user’s context. I know a transform probably would have worked too, but again, not as fun.

The site also takes advantage of some PostCSS plugins. I have four CSS files compiling from Stylus:

  📂 css
    📄 generated-home-base.css    /* base styles */
    📄 generated-home-large.css   /* for monitor views, 47px step increment */
    📄 generated-home-small.css   /* for laptop views, 23px step increment */
    📄 generated-post.css         /* for PostCSS processing */

Note: If it was possible to use a combination of calc() and custom properties inside the media queries, I could have eliminated the need for separate large.css and small.css files.

PostCSS plugin css_mqpacker takes the large.css and small.css and consolidates repeated media queries. So the many, many media queries would go from something like this:

  @media screen and (min-width: 401px) {
    .hair {
      background-position: -100px 0;
    }
  }
  @media screen and (min-width: 401px) {
    .legs {
      background-position: -200px -150px;
    }
  }

to something like this:

  @media screen and (min-width: 401px) {
    .hair {
      background-position: -100px 0;
    }
    .legs {
      background-position: -200px -150px;
    }
  }

Seems small, but saves a lot of characters across 220 media queries.

Then postcss_import compiles the four files into one glorious home.css.

Any weird hiccups?

I originally had the .lynns-burgers container centered using flexbox. Easy peasy. But when I resized the browser, the artwork would shift left/right slightly every few pixels as it was repositioned. This created a vibrating effect that I did not like one bit.

Using the ol’ fixed position, then translate pattern did the trick. I’m guessing it’s because the calculation is happening on the width of element instead and the browser is never dividing an uneven number of pixels.

  .lynns-burgers {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

But THEN, the character artwork started doing the vibration thing. Oy. The issue here was position values being calculated as decimals. I needed to make sure each calc() would return a whole pixel value, even as the custom properties changed.

So that would ultimately end up looking something like this:

  /* set custom properties */
  @media screen and (max-height: 900px) {
    :root {
      --mouth-base: 100px;
    }
  }
  @media screen and (min-height: 901px) {
    :root {
      --mouth-base: 150px;
    }
  }

  /* calculation multipliers should be even */
  .mouth
    place(0, $mouth-2,  calc(var(--mouth-base) * 1.14), calc(var(--mouth-base) * .52), -3deg)
    place(1, $mouth-12, calc(var(--mouth-base) * 1.16), calc(var(--mouth-base) * .52),  5deg)
    place(2, $mouth-14, calc(var(--mouth-base) * 1.18), calc(var(--mouth-base) * .50),  5deg)
    ...

That’s it! Sort of.

Looking through the final files and writing it all out makes it seem like so. much. (And there’s a lot I didn’t include here.) But it was definitely a process of discovery. I’m certain there are more efficient ways to do this, but that’s for another day.

An Archive

Oh! I also added an archive featuring every version of this site dating back to 2007. It was super fun to look back through them. I still love every one of them so much. You can view them all in their dated glory here.

Whew, so… why all that?

As usual, I wanted to try some new things and make something that might bring some joy to the web (it’s been a long year). Here’s a good reminder of why I do work like this.

I’ve been spending a lot of time in Illustrator lately. I recently redid some CSS grid and flexbox diagrams for CSSTricks and I’m working on a top secret illustration project with Heroku. You might say I’ve been in an illustratin’ mood.

I’ve never done frame animation like this and it was an insightful introduction. Wow, the patience it requires!

I was also able to gain some experience optimizing my Illustrator workflow, vector artwork, and exported SVGs. I got to dabble with CSS properties (so cool) and with PostCSS (also very cool).

And best of all I had fun with it. I hope you have fun with it too. Until next year!

Marshall Shore, the hip historian, emceed beautifully and shares my love for Arizona. As someone who usually dresses to blend in, I can appreciate his dramatic sartorial choices. Those jackets! So great.

Armin Vit, Under Consideration, Brand New

The thing I found most fascinating about Armin’s talk was his utilization of unconventional materials. When creating custom conference materials he and his wife, Bryony Gomez-Palacio, explored mold-making, cement curing, and screen printing on vinyl records and highly reflective materials. They made a lot of their materials tirelessly by hand. My favorite quote by Penn Jillette comes to mind here. He even admitted it can be hard to collaborate with others (besides his wife) because not many can match their pace and obsession.

Process-wise, he’s not a great sketcher. He moves quickly from a “shitty” sketch into the domain he’s mastered, Adobe Illustrator. Sometimes it makes sense to jump right in. He has an interesting approach to file setup, working from the top left corner of an artboard down and to the right as he iterates. This creates a neat timeline of thoughts and trials, keeping the latest version always on the bottom right of the file. Here’s a sad, quick recreation of that:

I’m a fucking beast at Illustrator. I own it. Except actually I rent it from Adobe.Armin Vit

Anne Yoachim, Tulane School of Architecture

Anne’s work is fascinating: designing for specific communities in New Orleans and implementing physical solutions in real spaces. Her team worked on visual communication surrounding Hurricane Katrina, set up a community book center for underserved youth, and started a community bike shop where kids can learn to build and fix bicycles together.

With her work in the community as examples, she encouraged us to examine the relationships between all the roles we play. What are the biases we benefit from and inject into our work? What power dynamics are in place?

Design is a capacity builder for companies… but it can’t solve everything.Anne Yoachim

Shari Benko, Experience Designer

In another talk about recognizing bias, Shari Benko spoke on the relationship between UX and AI. In a field where you’re teaching a system to make decisions, how can you be as transparent as possible? How do you predict behaviors of the people interacting with it? She posed this question which I’ve been thinking about a lot ever since:

How do you design for distrust?Shari Benko

Nakita M. Pope, Branding Chicks

Nakita is a ray of sunshine and pure charisma. Branding is not a specialty of mine, but she makes it super relatable. She has a personal, one-to-one approach to branding and identity and compares it to counseling:

You can help people figure out who they are and most importantly, you can give them permission to be fully themselves.Nakita M. Pope

Steve Thompson, Disney

Steve Thompson talked about getting a gig at Disney and how his career path really started with a foundation in life drawing. An influential teacher in his past encouraged him to “draw from life.” It was this back-to-basics approach that’s helped him throughout all the turns of his career. It’s easy to forget about the foundations, but sometimes the simple stuff is what we need to solve hard problems.

He’s got an effortless, natural drawing style and I just love it.

He also shared the inspiration he’s gained from taking circus class and mastering trapeze. It’s amazing the confidence we can achieve through other ventures outside of our work. It may seem unrelated, but it all affects the work we do and the way we can be fully ourselves.

Jon Arvizu, Illustrator + Designer

I found Jon’s honesty refreshing, speaking about the challenges of running your own business: navigating legal documents, protecting intellectual property, pushing against a lack of motivation, and the stress of leaving things unfinished.

He’s an illustrator and printmaker and his work is really fun. I especially loved his Arizona-themed work (of course).

Cat Swetel, Lost Embossing Consulting

Cat Swetel’s talk was a breakdown of the A3 problem solving technique, but what I found most interesting was the portion about reframing the problems we’re trying to solve. We often come at problems with a solution already in mind.

She gave the example of feeling thirsty. Some may frame the problem as “I don’t have a glass of water.” which is too specific. It already has a solution built in. A better framing of the problem is “I’m dehydrated.” which could be solved in a number of ways.

A good lesson in taking a step back and observing, noticing what we may have overlooked, and adjusting our thought process.

Lisa Peña, The Design School at ASU

Lisa should really give a talk on the main stage next year. Her talk on design awareness had a lot of practical and insightful examples of how we “unconsciously omit groups from our designs” and how we can recognize our biases and design better experiences.

A few examples she spoke about:

• Rainbow Bagel Quest shows the time and effort it took for Zach Anner, a person with cerebral palsy, to obtain an elusive rainbow bagel
• Burger King asks the American Sign Language (ASL) community to create a sign for the Whopper
• Toyota’s Mobility for All campaign
• Sesame Street introduces Julia, a muppet with autism
• Tennessee Tourist Development installs scenic viewfinders for people with colorblindness to experience the state’s natural beauty

Aaron Draplin, Draplin Design Co.

A peek at Draplin’s new book Pretty Much Everything:

Draplin is of course incredibly prolific and showcased that with gusto here. He spoke with passion about how any little thing in our lives—yard sale signs, birthday invites, funeral pamphlets—can become deeply personal, well-designed creative endeavors.

He’s certainly a unique communicator, full of energy and misdirection. The kind of person with a story about everything.

It would be remiss of me to not mention I also gave a talk at this year’s event. There was no video captured, but I plan to post slides and maybe a narrated slideshow soon. Stay tuned.

Earlier this month I was deciding whether I should speak at a developer conference in the fall and found myself waffling between a pros and cons list. Turns out I ❤️ giving conference talks and I also don’t?

Every talk I’ve ever given was ultimately worth doing and I feel so, so grateful for each of those opportunities. But let’s be honest; prepping, traveling for, and giving a quality talk takes work, physically and emotionally.

This breakdown of benefits and drawbacks helped me think through the “why?” and “why not?” of speaking this time around.

Truly great benefits

Learning
Prepping a talk requires research and double and triple checking facts. Writing a loose script for others to experience helps me better understand and articulate my process and perspectives. Nothing helps me master a topic like teaching it.

Personal growth
Getting up on stage is scary. Public speaking is no joke in the fear department. Every time I do it, it becomes less intimidating and I become more confident.

Visibility
Giving talks helps introduce new people to my work. These are folks who I may never have met or reached in any other way. It’s super cool to see my projects’ traffic spike after a talk or to see my work shared anew on social media.

And although I’m not looking for a job, it’s helpful when potential employers have seen me speak or are already familiar with my work.

Credibility
Whether it should or not, our industry values speaking at conferences. Having talks on my resume or videos/slides to point to increases my credibility with peers, clients, and with future conferences I might want to speak at too.

Introvert assist
Chatting with people at large events can cause anxiety for me, especially if I’m attending solo. Being a speaker is like having an invisible wingperson. People will come talk to me about the topic I chose. It alleviates a lot of the pressure of small talk. Plus, if there’s a speaker dinner, that’s also a less stressful setting for conversation.

That Feeling™
After I’m done giving a talk, I feel incredible. It’s a combination of adrenaline, accomplishment, relief, and a whole bunch of other emotions. All the preparation and the stress and the worrying feel completely worth it. I try to hold on to That Feeling™ for as long as I can. It’s the #1 thing that convinces me to do another talk later on.

But of course there are drawbacks too

Time
Even for a 30 minute talk, it takes me months of prep. Research, outline, write, slides, practice. Repeat until the minute I’m on stage. The majority of this work is done outside of my day job hours and a lot of conferences don’t pay their non-keynote speakers. So it can be a significant free time commitment.

Stress
Even if I feel fully prepared, every moment until the talk is completed I’ll feel stressed out. I’ll be thinking about the talk while in the shower, when I’m out with friends, and OMG I should be working on my talk instead of watching this episode of The Office for the 76th time.

If I have a lot of other emotionally demanding plans, the stress of a talk can be too much. Or it can cancel out the relaxation I hope for during a vacation.

Visibility
On the flipside, sometimes greater visibility can be harmful. Being in the spotlight provides opportunity for negative attention, creepers, or harassment.

Sometimes the last thing I want is for a large group of people to be looking at me or my work and I know that’s not the season for doing conference talks.

Introvert kryptonite.
Although being a speaker assists in conversation, it also can be super draining. The stresses of traveling, speaking, and full days of lots of people can leave me ready for a 24-hour nap. I sometimes need to skip the closing party when my talk is scheduled for later in the day. Planning some time to recover is a must for me.

Why or why not?

After thinking things through a lot, I ultimately decided to decline the invitation even though it would have provided a free trip to Europe (oof) and would have been, as I was reminded by friends and family, Good For My Career (double oof). With FOMO ever-present, it can seem like a no brainer to say “yes.”

Sometimes “yes” is absolutely the right answer, and other times “no” is just as right for me. I know I’ll find another opportunity to speak if/when I feel up for it. And if you’re thinking of giving a conference talk, I do hope you find the right event for you. <3

--

This was originally published on blog.andyet.com.

Fifteen years later you could argue that most of my projects are still glorified fansites. Digital love letters to CSS, airports, reality cooking competitions, and my home state of Arizona.

I joke that I pride myself on creating projects that compel people to post on the internet asking “Why do this?” I recognize my work isn’t for everyone. As recently as last week a friend of mine, who no doubt gets me, said about the popularity of my airportcod.es project, “I just don’t get it.”

A lot of people question the practicality of the work or search for a deeper purpose:

“Just wondering, is there any legitimate reason for doing this?”

“Sure, it’s challenging, but why should anybody care?”

“Really nice but I really don't see the point.”

“Nice one, but WHY??”

My CSS drawing project, a.singlediv.com, is usually on the receiving end of the “Why?”, but my recent portfolio redesign brought a fresh set of questioning.

My prepared goto answer is that these projects are just for fun and hey, it’s fun to do things that are weird. While technically true, there’s so much more I’m trying to do.

So… why then?

Why do we create art at all? Some artists create solely for themselves as a means of introspection and self expression. I truly love that. However, I’m not one of those artists.

I begin my process thinking about who will consume my work and how I hope they’ll respond to it. Art does not exist in isolation and it gains meaning from the people who experience it. It cannot be separate from the context in which it was created and the history of work that came before it. Those who view and participate in the work gain (or sometimes lose) something too.

Seeing

Have you ever had a friend send you an image and they say “This is incredible!”? You look at it. It has nice lighting I guess? What’s the big deal? “No, no. It’s not a photo. It’s a 12-foot oil painting.” In a small, special moment you aren’t sure if your eyes are playing tricks on you. “Whaaat?”

I love that feeling. Where someone’s work makes you question your reality. It begs you to dig deeper into how they did it. You want to, or in the best cases, must look closer. Imagine creating something that causes a tiny explosion in someone’s brain. When people view my work, I hope they might say “I didn’t know this was possible.”

Similarly, I love when someone’s work opens your eyes to something that was always there. A tool used in a new way, a pattern you never noticed, or the story behind a name. In an instant, this everyday thing is suddenly different and you can’t unsee it. The response I hope for in this case is, “Oh wow. Of course.”

Being surprised, stretching our imaginations, seeing things differently. Each an intention of the work and something I gain personally from creating it.

Experiences like this (as a viewer and a creator) are super valuable for me, especially long term. Every day we’re learning things that will be practical someday. You may not even realize you’re building this complex web of knowledge. We call it “intuition” but a big part of being an experienced designer/developer/whatever is how vast your web is and how effectively you can make connections between the disparate information and apply them to solve real problems.

Challenging

“Well, which is it? Art or design?!” a frustrated Redditor asks, trying to make sense of one of my projects. That question made me so happy. I want people who feel confused about what the work is to also question why they want to categorize it.

Designers do this a lot. I wish I had a piece of pizza for every “Design isn’t art” article I’ve seen. Art and design overlap in deep, meaningful ways and drawing a line between them does both a disservice. Also true for technology, where some want to draw the line even deeper. I want my work to blur the edges. I’m always amazed at the kind of magic we can create in the space where disciplines overlap.

Doing this work on the web specifically asks people to think about medium. I pay close attention when someone critiques art by saying the artist “must have a lot of time on their hands.” Almost always, it’s in response to work that’s made of unconventional material. Detailed portraits on Starbucks cardboard sleeves or styrofoam cups, landscapes constructed with thousands of matchsticks, drawings made with a single div and CSS. Very rarely does anyone say this about photography, oil painting, or stone sculpture.

What about a medium makes us value the time spent with it? I hope every person who views my CSS illustrations and says, “I can’t help but ask… why not just use SVG?” really does think about why. What would the work be if it was created in a format that’s obviously better suited? The medium we choose to work in is part of the work and contributes to its meaning.

Sharing

Lately the web can feel like an overwhelming sea of misery. (I won’t get into it. You know.) But it’s still such a joy to discover someone who shares in your weird, obsessive love for something. Maybe you stumble upon a website that feels like it was made just for you.

“Stumbling” upon something is such an important part of the web we take for granted. A huge contributor to a work of art’s meaning is how people access it. Does it exist in a physical space? Must you pay to enter that space and are the hours of access limited? Can people participate in it, contribute to it?

Connecting through art or shared passion is a gift and the web makes that possible at a scale unlike anything before. My little fansite turned a stranger into a friend, connecting on the web and at rock shows in the Nile basement. And that magic has only grown with every project since.

The joy we feel about the things we love is worth sharing and I encourage you to do it! You and the people viewing your work can benefit in a lot of ways, even if “the practicality of this is just non-existent.” 😉

--

This was originally published on blog.andyet.com.

I do this each year for a few reasons:

• to ensure I’ll complete at least one non-work project
• to experiment with and learn new techniques (a few standout refreshes were my first attempts at responsive design, flexbox, and this year, CSS grid)
• a year is about the right amount of time for a version to exist where I don’t feel sad once I sit down to change it

Also, a truly great thing about redoing my own site is that it’s fully mine and I can do whatever the heck I want. 😊

A very small percentage of my portfolio’s visitors are airport enthusiasts, Top Chef viewers, and family (hi, mom). But the primary audience is overwhelmingly web designers, developers, and tech recruiters. These are people who know how websites are built and might take an extra minute to inspect things. I wanted to design around that.

Concept and inspiration

For years we’ve been telling the world that a website doesn’t need to look the exact same in every browser for every user. With responsive design and progressive enhancement, users will see things differently. Not everyone needs to experience the entirety of the site.

But could I make people want to experience all of it? Could I surprise them by taking these concepts to an absurd extreme?

I love to resize my browser and see how the layout responds and how the designer decided when things change and what gets dropped or added. I know lots of other people do this too. I initially thought I could subvert expectations by making the ubiquitous phone, tablet, and desktop breakpoints trigger completely different layouts with unique styles, colors, and type treatments. Three sites in one.

The changes, as dramatic as they might have been, still felt too conventional. You already expect something to happen at tablet size and then again for phones.

I’d recently watched a YouTube video about the Kuleshov Effect, a term in film editing that describes “a phenomenon by which viewers derive more meaning from the interaction of two sequential shots than from a single shot in isolation.” A metaphorical bell chimed in my head.

There’s preexisting meaning for a site to have three (or a few more) distinct layouts: supporting common devices. But what would it mean for there to be 10, 15, or ultimately 21 distinct designs that “sit” side by side for you to discover one at a time, one after the other. Each one may be unremarkable on its own, but it’s the relationships (and differences) with the ones to the left/right and to the 18 others that make each one worth looking at.

Executing the idea

I already knew it was possible to use CSS to turn basic markup into something extraordinary. CSS Zen Garden showed us this repeatedly for years. Another side project of mine, a.singlediv.com, takes this concept to ridiculous extremes (I sense a pattern here).

So executing this redesign started with basic HTML. One thing I’ve learned over the years of experimenting with CSS is you can achieve a lot without needing to sacrifice clean markup. Here’s what I landed on. The <span>s inside of the <h1> and <p class='intro'> would allow me to style each line differently if I needed and the <picture> element would allow for a responsive image plus provide additional :before and :after pseudo-elements (which <img> doesn’t allow).

<body class='home'>
  <nav class='main-nav'>
    <a class='nav-home' href='/'>Home</a>
    <a class='nav-web' href='/web'>Web</a>
    <a class='nav-art' href='/art'>Art</a>
    <a class='nav-about' href='/about'>About</a>
    <a class='nav-thoughts' href='/thoughts'>Thoughts</a>
  </nav>

  <h1>
    <span class='name'>Trung. Do Duc</span>
    <span class='desc'>Senior Frontend Developer, Javascript Engineer and UX Engineer with over 7+ years of experience</span>
  </h1>

  <p class='intro'>
    <span>I make things for the web and for walls.</span>
    <span>I specialize in light-hearted projects that make people say, “I don’t get it.”</span>
    <span>Yes, I’ve heard of SVG.</span>
  </p>

  <picture class='lynn'>
    <source srcset='https://2dtrung.site/assets/images/lynn-small.png' media='(max-width: 1400px)'>
    <source srcset='https://2dtrung.site/assets/images/lynn.png'>
    <img src='https://2dtrung.site/assets/images/lynn.png', alt='a photo of the artist'>
  </picture>
</body>

Also I guess I should add a disclaimer here. I’m the only one touching this code so I set things up the way that worked for me. Of course there are different and surely better ways of doing all of this. 🙂

I use Stylus for CSS preprocessing (and will in the following examples). I first created a home.styl where a reset and variables would be imported, basic page styles would be declared, and where the media queries would be set up. It, plus the other pages, would import into one main.styl that gets compiled and minimized. The structure looks like this:

📁 _styl
  📁 components
  📁 globals
  📂 pages
    📄 about.styl
    📄 home.styl
    📄 thoughts.styl
    📄 work.styl
  📄 main.styl

I planned on using CSS grid for this redesign, so I created a super basic fallback layout to show by default (separated into its own file in a home directory) and I placed everything else inside a @supports declaration.

📁 _styl
  📂 pages
    📂 home
      📄 fallback.styl
    📄 home.styl
  📄 main.styl

/* home.styl */

@import 'home/fallback'

@supports (display: grid)
  body.home
    [base styles here]

If a browser doesn’t support display: grid it will render the fallback, which looks like this:

With a fallback in place, I could now focus on the many different layouts. To keep things manageable, I split up each layout into its own file alongside the fallback.styl in the home directory (don’t mind my ridiculous naming).

📁 _styl
  📂 pages
    📂 home
      📄 b-and-w-and-gold-all-over.styl
      📄 big-nav.style
      📄 big.styl
      📄 blockhead.styl
      📄 bolt.style
      📄 cutout.styl
      📄 diagonal.styl
      📄 disguise.styl
      📄 fallback.styl
      📄 fifty-fifty.styl
      📄 half.styl
      📄 L-Y-N-N.styl
      📄 landscape.styl
      📄 movie.styl
      📄 pop-out.styl
      📄 rotate.styl
      📄 stranger.styl
      📄 third.styl
      📄 triangle.styl
      📄 white-bars.styl
      📄 white-box.styl
      📄 x.styl
    📄 home.styl
  📄 main.styl

Then I was able to import each layout into its own media query:

/* home.styl */

@supports (display: grid)
  body.home
    [base styles here]

  @media screen and (max-width: 400px)
    @import 'home/diagonal'

  @media screen and (min-width: 401px) and (max-width: 500px)
    @import 'home/L-Y-N-N'

  @media screen and (min-width: 501px) and (max-width: 600px)
    @import 'home/blockhead'

  + 18 more (2300px being the widest media query)

This removes any collisions that might happen and eliminates the need to do massive overrides. There is some repeated styling across various layouts, but I found that acceptable to keep things clear and organized. Each breakpoint is only using the CSS it needs for its specific layout.

Further learning

If you’re interested in digging into the CSS a bit more or to inspect individual layouts, I made my repo public on GitHub. 🙈

I won’t go into how to use grid here as Rachel Andrew and Jen Simmons have written and spoken extensively on the topic. See Rachel’s Grid by Example and Jen’s Experimental Layout Lab as good places to start.

Patrick Brosset of Mozilla created a video breaking down the use of grid for one of my site’s layouts which is pretty cool:

I planned on elaborating on some of my favorite parts of the redesign here, but I think I want people to be surprised as they explore. So if you haven’t checked it out yet, please do at 2dtrung.site.

Response

I always hope my work will inspire people to think about their medium and tools differently and to encourage them to experiment with what’s possible.

The response has been overwhelming and it’s truly wonderful to see people discovering and enjoying the site. I’m so grateful for everyone’s kind and encouraging words.

One piece of feedback I received is that a lot of people don’t resize their browsers at all. That’s true! And it’s totally okay. The site is still functional even if you don’t know any of the other layouts exist. Well, to be fair, there is one layout that would make for a super confusing experience (Stranger Things fans might know which one I’m talking about). But with my audience in mind, I figured risk was low.

With most of my work, there are people who ask “Why do this?” I have another post in the works that dives into the many reasons, but for now: sometimes it’s fun to do things that are weird.

Thanks for checking out the site. It means the world.

--

This was originally published on blog.andyet.com.