
<YouTube youTubeId="V2izYekSSwY" />

From [Google I/O 2021](https://io.google/2021/): In this session, we (I) discuss marketing activities that help users discover and engage with what you’ve built on Google Assistant, as well as some updates to monetization features for Conversational Actions.


Driving a successful launch for Conversational Actions


<YouTube youTubeId="HX1bMuoZ6II" />

As a part of my work as a DevRel lead for Google Assistant, I did a guest segment on VOICE Talks in August of 2021, talking about why UX research for voice-first experiences is so crucial.


VOICE Talks August 2021: Trust the researchers for voice-first UX


<YouTube youTubeId="cw1wlHV4hGk" />

Tools like Eleventy, Hugo, Gatsby, Svelte, and others have given developers a superpower for quickly developing content-driven, easily manageable web properties. It's an exciting frontier for developers who are also content creators, but for non-technical creators, our favorite toolchains can feel like a labyrinth of indecipherable choices.

In this talk, we'll discuss our role in promoting the creator economy. We'll talk about the opportunity we have as developers in helping to democratize content creation for everyone, and the importance of creating a more robust, archival internet.

[Check out the slides](https://docs.google.com/presentation/d/1XFJ_nQfPnX0oPOUezOEwVKLZFtptTKemtGg41RJPisQ)


JAM Stack, SSGs, and their role in empowering the creator economy


<YouTube youTubeId="OaF_WhzNAKQ" />

From my work as a Developer Advocate on the Google Assistant team, this tutorial explains the difference between _shortcuts_ and _dynamic shortcuts_ for Android, and how to use Assistant to take advantage of this functionality.


Push dynamic shortcuts to Assistant


<YouTube youTubeId="lxviLXXvs3A" />

A brief, 2-minute Demo from [Google I/O 2021](https://io.google/2021/): learn how to create your first App Action for an Android app, which lets you connect your app's features to Google Assistant


How to create your first App Action


<YouTube youTubeId="z6l-V-EOGNY" />

A quick demo from [Google I/O 2021](https://io.google/2021/): we take a look at some user experience (UX) changes for card verification code (CVC) confirmation and new payment method entry for payments on smart screens.


New Transaction Features for Smart Displays


<Image
  publicId="external-references/fullstack-dev-article-aquent/cover"
  alt="Article screenshot: What the Heck is a Fullstack Developer? Aquent UK blog"
/>

An interview with my former employer (and parent company of [Gymnasium](https://www.thegymnasium.com/)), [Aquent](https://aquent.com) about my thoughts on what it means to be a Fullstack Developer.

Description from the article:

<Aside>
  To shed light onto what is for many a mysterious role—Full Stack Developer—we
  talked to our own Star of the Full Stack, Mike Bifulco. Currently the Director
  of Technology for Aquent Gymnasium, he was previously a User Experience Lead
  and Program Manager at Microsoft.
</Aside>

Full article is available to read on [Aquent UK's blog](https://aquent.co.uk/blog/what-the-heck-is-a-full-stack-developer).


What the Heck is a Fullstack Developer? Aquent UK


<Image
  publicId="external-references/proximity-acquires-smpl/cover"
  alt="A screenshot from a press release announcing proximity acquiring smpl"
/>

In early 2020, [smpl](https://smpl.io) was acquired by [Proximity](https://proximity.space). I was cofounder and CEO of smpl - we proudly helped independent coworking spaces manage their communities with automated billing, invoicing, and community management. It was a wild ride, and I couldn't have done it without my two amazing cofounders.

We were acquired by our biggest competitor, Proximity, who are continuing the dream by creating a network of amazing, independently owned coworking spaces around the world.

[Read the press release about the acquisition](https://www.proximity.space/news/proximity-acquires-smpl-software/) to find out more.

There is another (paywalled) article on [Business Insider](https://www.businessinsider.com/inside-a-coworking-software-deal-proximity-buys-smpl-2020-4) about the acquisition, too!

[More about smpl](https://www.crunchbase.com/organization/smpl-llc) on Crunchbase.

Tools we used to build smpl:

- [Firebase](https://firebase.google.com/)
- [Stripe](https://www.stripe.com)
- [React](https://reactjs.org)
- [Intercom](https://intercom.com)
- [LogRocket](https://logrocket.com)


Proximity Acquires SMPL Software


<Image
  publicId="external-references/matter-a-whole-thing/cover"
  alt="Cover slide: MATTER - a whole thing about design"
/>

From a talk I gave at my then-home-base [Hygge Coworking](https://wearehygge.com/) at a community event. The thesis: we're all designers, and you should give a damn about the things you put into the world.

Slides are [available on slideshare](https://www.slideshare.net/mbifulco1/matter-a-whole-thing-about-design).


Matter - a whole thing about design


<YouTube youTubeId="ukPI1zlxKqg" />

From my days working as Technical Director of [thegymnasium.com](https://thegymnasium.com): a 5-minute tutorial (lovingly referred to as a **Take 5**) showing how you can use GitHub pages to host your very own website.

The full tutorial (with additional reference material) is available **for free** on [The Gymnasium](https://thegymnasium.com/courses/take5/publishing-your-first-github-pages-website)

Gymnasium is a treasure - if you like this, get yourself a free account at [thegymnasium.com/register](https://thegymnasium.com/register), and start learning at your own pace today!


Publishing Your First GitHub Pages Website - Gymnasium Take 5


<Image
  publicId="external-references/the-perils-of-obedience/cover"
  alt="title slide: The Perils of Obedience, by Mike Bifulco"
/>

These are slides from a lightning talk I gave at a local conference in 2018.

I explain the Milgram Experiment, how absolutely terrifying it is, and how understanding Cognitive Psychology and Social Sciences can help us make the world a better place.

I also implore the audience to go register to vote. [turbovote.org](https://turbovote.org). Go do it!

Slides [available on Slideshare](https://www.slideshare.net/mbifulco1/the-perils-of-obedience) if you're interested in perusing.


Lightning Talk: The Perils of Obedience


<Image
  publicId="external-references/design-matters-zero-day/cover"
  alt="title slide: Design Matters, Hygge Zero day"
/>

These are slides from an empassioned talk I gave about design during a community event called Zero Day at [Hygge Coworking](https://wearehygge.com) in Charlotte, NC, USA.

The thesis: good design is important, and you should be paying attention to good-and-bad design in the world around you. Contributing to making the world better for everyone **is** everyone's job.

Slides [are available on SlideShare](https://www.slideshare.net/mbifulco1/design-matters-hygge-zero-day-93804671)


Design Matters, Hygge Zero day


<Image publicId="external-references/50-most-powerful-startups-in-charlotte/cover" />

I was cofounder and CEO of [smpl](https://smpl.io), a SaaS startup helping independent-scale coworking operators automate their business. We were featured in a 2017 Article by Axios Charlotte (then called **The Charlotte Agenda**) as one of the most powerful (lol) startups in town. Pretty cool!


50 Most Powerful startups in Charlotte


<Image
  publicId="external-references/edx-comprehensive-theming/cover"
  alt="Cover slide: Edx Comprehensive Theming tutorial, by Mike Bifulco"
/>

A talk I gave at Stanford University in 2016 on Comprehensive Theming for [Open EdX](https://open.edx.org).

Slides [are available on Slideshare](https://www.slideshare.net/mbifulco1/edx-comprehensive-tutorial)


Edx Comprehensive Theming Tutorial


<YouTube youTubeId="2VJmjmESvMo" />

(My talk starts at 5 minutes and 43 seconds into the video)

From [Open EdX Conf 2016](https://open.edx.org), this is a lightning talk I gave on our strategy for student support at [Gymnasium](https://thegymnasium.com), while I served as Technical Director there.


Open EdX, Slack, and Intercom


<Image
  publicId="external-references/30-under-30-2016/cover"
  alt="Photo of me being recognized as one of Charlotte's 30 under 30 in 2016"
/>

Not much on the web about this these days, but if you really want to go spelunking, here's a Wayback Machine link from late 2016 that's captured the gist of it. [Wayback Machine: Top 30 Under 30 Future Leaders of Charlotte, Elevate Lifestyle 2016](http://web.archive.org/web/20161115035530/http://elevatelifestyle.com/30-under-30-2016), and an [old facebook event](https://www.facebook.com/events/1088933411127102/).


Top 30 Under 30 Future Leaders of Charlotte - Elevate Lifestyle 2016


<Image publicId="external-references/your-app-is-ugly/cover" />

A rehash of a talk on the basics of design and aesthetics, covering color theory, swiss design, and some of the historical roots of modern design.

Authored with Andrew Miller, Jeremy Osborn, and Leah Cunningham

Slides [are available on SlideShare](https://www.slideshare.net/mbifulco1/your-app-is-ugly)


Your App is Ugly


<YouTube youTubeId="5DiJ_2Bz2hM" />

(My part starts at 13m47s, but you should watch the whole thing!)

This is a talk I gave during [Open Edx Conf 2016](https://open.edx.org) with my colleagues, comrades, and brothers in arms Andrew Miller and Jeremy Osborn, talking about how we built Gymnasium while actively experimenting with formulas for an effective MOOC.


Gymnasium - Building the plane while flying it


<Vimeo vimeoId="84388498" />

This is a talk I gave at [Blend Conf](http://2013.blendconf.com/speakers/mike-bifulco/) in Charlotte, NC USA in 2013, when I was working for [Microsoft](https://microsoft.com) as a UX Designer. If you're interested in learning how to design apps for a version of Windows that came out in 2012, this is your day!

Slides are [available on Slideshare](https://www.slideshare.net/mbifulco1/designing-windows-81-apps-from-the-ground-up)


Designing Windows 8.1 apps, from the ground up


import CenteredTextDemo from '../../components/demos/CenteredTextDemo'

<Aside type="note">

  This is an experimental post, meant to demonstrate to you the topic we're discussing. I'd love to hear what you think about it.  [Drop me a line](https://twitter.com/irreverentmike) if you find this compelling - I'm hoping to create more like it!
  
</Aside>

<CenteredTextDemo>

This is -- without exception -- my biggest design-related pet peeve. You've probably come across it yourself from time to time, and if you're lucky, it's not something you noticed. Centering text on a web site, email, or flyer is an easy way to make it appear like a designer's spin has been put on a document. It's an easy change to make in most editors, and in many cases it's probably done without a second thought.

I'll cut to the chase: _center-aligning text is really bad_ in most cases. From a young age, we're trained to read text by starting at the beginning of the line and moving our eyes across the page to the end of the line. From there, it's a relatively low-effort thing to move your eyes back to the beginning of the next line. That all changes when text is centered, since the start of each line is aligned inconsistently. It takes more effort to find the beginning of the next line, to make sure you've only moved down _one_ line, and to continue reading.

## Three great reasons you shouldn't center-align text:

1. A ragged leading-edge makes it harder to move your eyes to the next line of text
2. People with dyslexia may find centered text challenging to read.
3. Lists (like this one) become disorienting to read, and harder to scan

The British Dyslexia Association provides a <a href="https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide" target="_blank">dyslexia-friendly style guide</a>, which calls out a simple rule for text:

<Aside type="note">Left align text, without justification.</Aside>

As a designer, this is _such_ an easy win. As a developer, it's often as easy as:

```css

/* change this */
.some-style-rule {
  text-align: center;
}

/* ...to this! */
.some-style-rule {
  text-align: initial;
}

```

## When you _can_ use centered-text

Generally speaking, if you're certain that your text will fit on _one line,_ it may be okay to center it.  This generally applies to page titles, captions on pictures, and things of that nature. Even then, generally speaking my guidance is to avoid it.  Like many other things in design, if there's not a good reason _to_ do it... you're better without.

## Summary
If you're working on a design that relies on centered text, consider other options. If you come across a big blob of centered text in your workplace, or out in the world somewhere, please feel free to use this post as a demo.

</CenteredTextDemo>


Don't center align paragraph text


I often joke that to learn about design is to doom yourself to be lightly annoyed by everything. After some repetition, you'll start to internalize some of the basic rules of industrial design, or print design, or fashion design, or mechanical design, or whatever it is that gets you excited. You'll start to find design quirks in the world which were once hidden to you. After all, every single thing in the built environment has been put there by someone who took their time to bring it to life. The downside, of course, is that you'll also start to see designs that downright suck. I find that it's helpful to think of it as finding opportunity for improvement.

Today's opportunity for improvement is brought to you by [Wikipedia](https://en.wikipedia.org/wiki/Ralph_Waldo_Emerson), which had me going cross-eyed as I read through an article in the early hours of this morning.

<Image
  publicId="posts/all-about-ch/wikipedia-4k"
  alt="Screenshot of a wikipedia article on a wide monitor. Text spans fully from left to right, taking up the full width of available space."
  caption="A fullscreen desktop view of wikipedia on my 4k monitor."
/>

## What is a ch, and why you should c(h)are

It's simple, actually - ch is a CSS unit which represents the width of a character! If you're using a proportional font (where not all characters are the same width), 1ch is the width of the 0 character in the typeface you're using. This is particularly helpful for usability as it relates to reading long passages of text.

## Line length and reading usability - err, readability

Limiting the line width for text in long passages is a great tool for making things more readable. [Studies have shown](https://baymard.com/blog/line-length-readability) that for optimal reading, text should be limited to somewhere around 60 characters per line. Think about it - this is why paperback books are generally smaller than an A4 page. This is why people love reading on their kindle. This is why Barnes and Noble sells Nooks like hotca — well, it's why the Nook is shaped like it is, at least.

In practice, what does this look like? Let's take that same wikipedia article and limit its paragraphs to 60 characters:

```css
p {
  max-width: 60ch;
}
```


Here's what it looks like:

<Image 
  publicId="posts/all-about-ch/wikipedia-ch-applied"
  alt="The same wikipedia article with a limit set on p max-width for ch yields a page that is much easier to consume visually, and is more readable."
  caption="Column width adjusted using the CSS ch unit."
/>

Okay, so that's not a fully-baked design update, but with a few tweaks we can make it a little nicer by bumping up the font size, and adjusting the layout of the right-hand column (side note: wikipedia uses float: right on that column, surprisingly!)

<Image 
  publicId="posts/all-about-ch/wikipedia-ch-adjusted"
  alt="With a few additional layout tweaks, the page can be reflowed around the ch-limited paragraphs, making the entire article more coherent and easier to read."
  caption="Font size bumped up, and right-hand column adjusted to snap in place next to it.  Much easier to read!"
/>

That's not bad at all! One of the nice things about using a character **count** for setting the width of that section is that it scales nicely for folks who use the browser's zoom functionality. You can also put your text passages inside of pixel-size-limited divs to make them work in responsive layouts at smaller sizes:

```html
<style>
  @media screen and (min-width: 800px) {
    .blogpost {
      max-width: 400px;
    }
  }
  .blogpost p {
    max-width: 60ch;
  }
</style>

<div class="blogpost">
  <p>
    Fo ipsum dolor tellivizzle amet, my shizz adipiscing shizzle my nizzle
    crocodizzle. Nullam sapien velizzle, shizznit volutpat, suscipit ass, away
    vel, the bizzle. Dizzle fo shizzle tortizzle. Sizzle erizzle. Fusce izzle
    dolizzle dapibus fizzle tempus dope. Maurizzle pellentesque hizzle et
    turpis. Shiznit check out this fo shizzle. Pellentesque eleifend rhoncizzle
    shiznit. In hac habitasse platea dictumst. Donec dapibizzle. Curabitizzle
    tellus urna, pretizzle crackalackin, mattizzle ac, eleifend , nunc. Nizzle
    suscipizzle. Integizzle rizzle you son of a bizzle sizzle mofo.
  </p>
  <p>
    Dizzle ut dolizzle. Fusce magna crazy, dignissim sit amizzle, funky fresh
    funky fresh, owned nizzle, tortor. Maecenas a nisi. Tellivizzle ghetto neque
    izzle get down get down. Shut the shizzle up stuff. Cras aliquet tristique
    turpizzle. Suspendisse gizzle ultricizzle dope. Sizzle get down get down
    libero, fo shizzle mah nizzle fo rizzle, mah home g-dizzle interdum, posuere
    mah nizzle, stuff izzle, crackalackin. Da bomb mofo tellizzle. Boom
    shackalack aliquizzle gangster sizzle amet dolor. For sure dapibizzle sheezy
    id mah nizzle. Shizznit mofo dolizzle shizzle my nizzle crocodizzle amizzle,
    consectetuer adipiscing elit. Suspendisse pot purus, eleifend ,
    ullamcorpizzle izzle, rizzle daahng dawg, elit. Nizzle porta rutrum nunc.
  </p>
</div>
```

I dropped this stuff in a [codepen](https://codepen.io/mbifulco/pen/rgxryB) if you'd like to play around with it. You'll see a green background when the media query activates.

_Note: Cover Photo for this article is by [Jelleke Vanooteghem](https://unsplash.com/photos/2OCh8tuNsBo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/). Thank you for your work!_

#css