This post contains the slides for and links to all the things you need to follow my WP Rig workshop at WP Campus 2019, including a couple of verbose code examples for complex walk-throughs.
Throughout the workshop I’ll mention a proverbial ton of fancy new technologies, best-practices, and other cool stuff. The list below comprises the most salient parts for your perusement:
“CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.
The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.
In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.
CSS Grid is here, and you can start using it today. This talk shows you how to do it right.”
Video of the talk will be posted here as soon as it’s available. Until then, read through the slides above and follow the links for more information on this transformational CSS module.
So you’ve decided to take part in Morten Rand-Hendriksen’s WordPress Masterclass at WPCampus? Great! If you want to get the full experience and play along as Morten messes up the code of a WordPress site to make it work the way he wants it to, here are the preparatory steps you need to take:
Set up a local version of WordPress on your laptop. You can use your own preferred development environment or a custom install. If you’re on Windows, simple options include WAMPServer or DesktopServer. If you’re on Mac, use MAMP or DesktopServer.
Make sure the Twenty Sixteen theme is installed and activated (if you are setting up a new WordPress install, this is the default).
Download and install the custom demo content prepared for the workshop (right-click + Save Link As). To install the demo content, go to the WordPress admin panel, select Tools -> Install, select WordPress, install the WordPress Importer, and follow the instructions. Make sure to check the Download and import file attachments box.
Make sure you have a working code editor on your computer. Morten will be using the free, open source Atom code editor. You can use any code editor you prefer.
During the actual workshop, you’ll be provided with code examples and instructions on how to build a custom child theme and how to extend that child theme with custom post types, taxonomies, and even custom fields.
Part 1: Build a Twenty Sixteen Child Theme
In the first hour of the workshop, we’ll build a child theme with Twenty Sixteen as the parent. The purpose of building this child theme is to gain full control of the appearance and functionality of the theme without having to a) build it from the ground up, and b) modify the original code.
To make it easier for you to follow along, I have created a series of Gists – code snippets shared on Github’s servers – that provide the individual components I’ll be building in the workshop. As we move through the different code snippets, I’ll explain where to put them, how they work, and how you can modify them to make your child themes work the way you want.
I’ve broken down each of the workshops into individual sections that follow a logical chain of events so to speak, but for the most part you can apply these code snippets in any order you want, or individually. I’ve also provided links to the relevant Codex and Handbook documentation for specific functions and they are introduced.
Our ability to share the feelings of our fellow humans, to put ourselves in their shoes and see the world from their perspective, is a cornerstone of communal society. But shine a light on this skill and its luster quickly fades. What appears an ability to share the experience of another reveals itself an unconscious projection of our own experiences and biases onto other people.
Empathy is the mid-point on a graduated scale of automatic emotional response, starting with Sympathy and ending with Compassion. It is quick, instinctive, easily manipulated, and often misleading.
Sympathy, Empathy, Compassion: The three-stage automatic emotional response system
When we see a child drop their ice cream, we have an immediate emotional reaction: We have Sympathy, feeling for the child (how sad), we have Empathy, we feel with the child (if I dropped my ice cream, I’d be sad too), we may even have Compassion, feeling a need to step in and help the child (here you go, you can have mine). Here, Sympathy, Empathy, and Compassion work to better the situation and the world. But that’s not always the case.
In the aftermath of natural disasters, communities often experience a “second disaster” in the form of unwanted donations of clothes, perishable food, and other consumables. In many cases, managing these items, donated by well-meaning bystanders, ends up adding additional cost to the rebuilding of the affected communities. Empathy leads us to donate things when what the community needs is financial help.
When companies make accommodations for people with disabilities, they often inadvertently erect obstacles that hinder access to the very services they are trying to make more available. Empathy leads us to create obstacles where a clear path is needed.
When we put empathy in the driver’s seat, we quite literally put ourselves in someone else’s shoes. We are not basing our actions on the true experiences of others but rather projecting ourselves onto them: Were I in that situation, this is what I would want. But unless we are, or have been, in the same situation with the same prior experiences, our automatic emotional response can lead us badly astray resulting in solutions that work counter to our intentions: Put too much trust in your empathy, and you may end up making a bad situation worse.
Empathy has an important place in our processes, designs, and interactions: It is the beginning of an exploration that should be part of every project.
A Pathway to Informed, Critical Empathy
To create informed human designs, and welcoming communities, we need to use our automatic emotional responses wisely, and make ourselves aware of when we are projecting our own experiences onto others so we can focus on their experiences rather than our own.
Reframe
When you feel the swell of Sympathy, Empathy, and Compassion, it is a sign you are forming an emotional connection with another person. Seize this moment to explore the current contexts of your partner and yourself, and make sure they overlap. If not, reframe the situation in a context you are familiar with. While an able-bodied person cannot know what it is like to live without the use of a leg, they may have experienced a temporary disability through an injury in the past. Establish a shared or analog context, and extend it by imagining not just standing in the other person’s shoes, but walking a lifetime in them. Actively informing your empathy by reframing the situation in a familiar context will help you move beyond an automatic emotional response to a more reflected one.
With your context reframed, take the next step by attempting to Relive the experience of the other person as close as you can. Create situations or environments where you can recreate a similar experience to theirs, taking strides to physically walk a mile in their shoes. The Relive process can take many forms. A common method is so-called empathy exercises where participants are subjected to physical constraints that simulate disability, old age, or other factors.The Age Gain Now Empathy System from MIT’s Age Lab is one example, the pregnancy empathy belly another. Walking a mile in someone else’s shoes can also be taken literally. After reading a Facebook post about aCanadian waiter forced to wear high heels for a full shift even though her toes bled, Swedish contractor Emil Andersson bought a pair of pink 10cm heels and went to work for a day.
Reliving the experience of others by immersing yourself in their experience can be both rewarding and eye opening. Much can be learned from spending a week without a mouse or touchpad, unplugging your monitor, using text-to-speech for a day, using an old smartphone, or switching away from your preferred operating system. Reliving social experiences can challenge our perceptions and give us a new appreciation for the plight of others. Taking the time to read Twitter threads like #YesAllWomen, #MaybeHeDoesntHitYou, #BlackLivesMatter, and #NoWomanEver brings the plight of marginalized groups front of mind and helps broaden our social horizons. Getting some friends together and reading hateful internet comments to each other shows us that words matter and can be just as damaging as physical actions.
Remind
Our empathy is firmly rooted in our own life experiences and social and emotional biases. In Thinking, Fast and Slow, Daniel Kahneman explains how our thought processes are split into System 1 (fast, reactive, emotional) and System 2 (slow, reflective, logical) and how tacit bias, availability, proximity, and the other factors that power System 1 often lead us widely astray. Sympathy, Empathy, and Compassion fit firmly under System 1 and are prone to all these errors. When you make decisions as a designer or developer, you are doing so based on years of privileged experience that has shaped your tacit biases toward your own preferences. When you design or develop solutions for other people, you have to work from a realization your audience does not share this privilege, and does not see the world through your eyes. To create successful solutions, actively remind yourself of your privilege and bias by forcing them into focus. This moves your thought process from the emotional and reactive System 1 to the reflective System 2, and you can take a critical look at your initial reaction and inform your response in a more balanced way.
To provide a framework for bringing your tacit biases into focus, try documenting your experiences learning a new skill or taking part in unfamiliar tasks, situations, or communities. If you’re a developer, learn an unfamiliar programming language. If you’re a designer, take up an unfamiliar creative skill like quilting, knitting, painting, or calligraphy. To bring your tacit knowledge into focus, try your hand at teaching or writing documentation. And most importantly, document your experience, your successes, and your failures, for future reference. That way you have your own experiences to reflect on when you need a reminder of what it was like to not know what you know now.
To delve deeper into this process, and explore the concept of Compassionate Design, check out the book Design for Real Life by Eric Meyer and Sara Wachter-Boettcher.
Accept
The fourth and final step of the exploration may also prove the most challenging: Meet your subjects with acceptance. Seek out and listen to the disclosure of other people, and treat them as true descriptions of the world. When we interact with other people, it’s easy to assume we share a common context, background, and experience. In our modern multicultural world, and especially in interactions over the internet, none of these are given. In fact, chances are the only context and experience you and the other person share is the current situation you are in. This poses a uniquely modern challenge: We are hardwired to assume shared context and shared experiences. When these are missing, our automatic emotional response systems tend to make snap judgements that are way off the mark: Our empathy leads us astray, and misunderstandings and misjudgments cause communication to break down.
To counteract this tendency, follow these five rules in your interaction with the people you meet:
Listen to them without interruption
Accept their disclosure as the truth
Question your immediate response
Seek common ground
Expand your horizon of understanding
Human Design
At a conference last year, I said “At the core of good design lies empathy for people.” I still believe this, but I’ve come to realize that empathy alone can stand in the way of successful communication and designs. By informing our empathy and taking a critical look at our own emotional responses, we can create better designs and communities because we place the people we communicate with at the center of our process.
GitHub is that awesome thing everyone says you’ve gotta use, but how many of us can make heads or tails of it? If you’re tired of pretending to understand when someone talks about “merging the latest pull request” or want to know what the heck forks have to do with code, this rundown’s for you.
I’ll show you how a little dose of science fiction is the key to understanding Version Control. There will be teleportation, time travel, there may even be a victimless murder as you learn the difference between a Fetch and a Pull, why Rebasing changes history, and how merging branches can magically reconcile conflicting code.
Whether you develop, design, or just care about content, Git, GitHub, and Version Control can be some of the most useful tools in your kit. After this primer, you’ll see why Git and GitHub is for everyone, including you.
Web design is about communicating with people through the web, but when we design and build websites, it’s easy to get caught up in the technical minutia: What hamburger icon should I use? Where does the sidebar go? How do I allow more space for ads? It is time we start thinking about the people who visit our sites. What devices are they using, and how are they using them? What is their purpose for visiting, and what situation are they in when they do?
This talk brings the focus of web design back to its core subject: How to communicate with people. You’ll learn about user research, empathy in the design process, communication patterns, real-world testing, and designing from the content out. Web design is about empathy for the user, and the users who visit your site are people. This talk will teach you how to prepare, design, and build websites with user experiences that communicate clearly and make the people who visit the site the top priority.
“We have a few things we need to take care of first, and then we’re going to dive right into our presentations.”
It is 9:55am on a Wednesday morning, and Steve Fisher is midway through his opening remarks for the inaugural Design and Content Conference. On the screen behind him, a picture of a red t-shirt with the word “STAFF” printed in large white caps and an emergency phone number is prominently displayed.
“A big deal here is safety. We want you all to feel safe and included in this. We have a code of conduct that everybody that’s here had to agree to to attend. In case you didn’t read that, you should probably go to the website and read it at some point, but if I could sum it up, it’s that we all need to take care of each other; we need to feel safe. Inclusion is important. So regardless of age, race, gender, anything, everyone should feel welcome. Just as a way of us agreeing to that, could we give another round of applause?”
The applause is loud and heartfelt. There are cheers. From the back of the room I see heads nodding, people turning to each other in conversation.
Above are the slides from my presentation on Responsive Images in Real Life at JavaScript Open Day in Vancouver, June 25th, 2015, organized by Lighthouse Labs and Microsoft Edge.
Above is the video of my talk at WordCamp Miami 2015. Below are the slides in an un-squished format, and below that are all the links.
All the data in the talk is based on source material and research. Links to all relevant information (including Tweets, photos, stats, and tools) are provided below.
Below are the actual usable slides from my WordCamp Seattle: Experienced Edition 2015 presentation on _s. Click the thumbnails to get the full size image.
