Categories
Events WP Rig

WPCampus 2019 WP Rig Workshop

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.

WP Rig itself:

VS Code extensions

Referenced documentation

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

PHP

JavaScript

Code examples

VS Code settings

{
  "prettier.stylelintIntegration": true,
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true,
  "editor.renderWhitespace": "boundary"
}

Walkthroughs

Categories
Speaking Engagements

How Not to Destroy the World: Ethics in Design and Technology – Smashing Conference Freiburg, 2018

All the links from the talk

Unsplash photos from the presentation

Categories
Speaking Engagements

WCEU2017: CSS Grid Changes Everything (About Web Layouts)

Below are the advanced slides for my WordCamp Europe 2017 talk CSS Grid Changes Everything (About Web Layouts) presented June 17th, 2017 in Paris, France:

From the website:

“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.”

Links from the talk

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.

Header photo by Mark Sallman.

Categories
Events

SVG at #WPYVR

I spoke about SVGs at WordCamp Vancouver 2016. Here are the relevant links:

Reading stuff:

Tool stuff:

 

Categories
Events Tutorials

WPCampus 2016: WordPress Masterclass Workshop

Getting ready

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:

  1. 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.
  2. Make sure the Twenty Sixteen theme is installed and activated (if you are setting up a new WordPress install, this is the default).
  3. 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.
  4. 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.

That’s enough talk. Let’s get crackin’!

Categories
Speaking Engagements

Informing Your Empathy for More Human Designs and Communities

This article is a companion piece to the WordCamp Europe 2016 talk “Empathy and Acceptance in Design and Community” seen below:

Understanding Empathy

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.

Slides from the talk Empathy and Acceptance in Design and Community
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.

To further develop this process, check out Microsoft’s Inclusive Design Toolkit..

Relive

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.

Empathy and Acceptance in Design and Community from Morten Rand-Hendriksen
Categories
Events Speaking Engagements

GitHub for the Rest of Us – WordCamp US, 2015

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.

GitHub for the Rest of Us at Slideshare, via WordCamp Us 2015.

 

Categories
Events Speaking Engagements

Designing Websites for Human Beings – WordCamp NYC 2015

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.

Links from the talk:

Categories
Events My Opinion

Why Codes of Conduct Matter

“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.

Categories
Speaking Engagements

Responsive Images in Real Life – my presentation for JavaScript Open 2015

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.

Below are the relevant links from the talk:

Categories
Speaking Engagements

Designing Informational User Experiences: My WordCamp Miami talk

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.

  1. Superhero Cheeskake by Jan van Hellemond
  2. This Is For Everyone
  3. More people today have access to a cell phone than a clean toilet
  4. Zoella
  5. Pew Die Pie
  6. Accessibility if for everyone: 
  7. Selfie Stick by Larry Miller
  8. Android Wear browser video by Conrad Sykes
  9. Mark Boulton quote
  10. Atomic Design by Brad Frost
  11. The Core Model by Ida Aalen
  12. Content Strategy for WordPress by Stephanie Leary
  13. Snow Fall
  14. Ghost
  15. Self-driving cars and the Trolley Problem
  16. Aesop Story Engine
  17. The Web Is Dead: Long Live the Internet
  18. Internet.org
  19. Mobile expectations
  20. Facebook Instant Articles
  21. All the awesome LEGO photos
  22. Dan Mall quote
  23. “Content precedes design” Zeldman quote
  24. Auberge theme
  25. Brew House theme
  26. Android fragmentation from OpenSignal
  27. Media queries targets
  28. Ish 2.0
  29. 64% of Americans own a smartphone
  30. 19% of Americans rely on their smartphone for access to the internet
  31. Average web page size and other stats
  32. RICG Responsive Images Plugin
  33. Grunticon – SVG made easy with Grunt
  34. Grumpicon – SVG made easy without Grunt
  35. Thumb reach pain by Scott Hurff
  36. Apps organized by color, Bijan Sabet
  37. Adaptive Maps
  38. Magnetic Popup by Dmitry Semenov
  39. Dynamic sticky header (Headroom.js) by Nick Williams
  40. Ambient light media query demo by Tomomi Imura
  41. Can I Use
  42. Modernizr
  43. This Door is the Epitome of User Experience Design by Kelly Jepsen
  44. This Door is the Epitome of User Experience Design… Because It’s Hard to Get It Right The First Time by Cameron Moll
  45. Medium’s post on underlines
  46. Ilya Birman’s counterpoint on underlines
  47. Wired article on how we all use Emoji wrong
  48. There Is No Fold
  49. How People Read Online
  50. BBC article on how nobody understands the Hamburger
  51. Mystery Meat icons by LukeW
  52. LukeW: Obvious Always Wins

And finally: Free 10 day trials of lynda.com for everyone!

Categories
Speaking Engagements WordCamp

Building Themes From Scratch Using Underscores at WordCamp Seattle: Experienced Edition, 2015

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.