Code & Pixels: Recent Episodes

Code

A couple of UX Engineers, navigating the intersection between design, development and everything inbetween.

View Details

We're joined by Dominic Nguyen, who shares his experience as a founder of Storybook and Chromatic.

Episode Links:

  • Story UI: https://github.com/southleft/story-ui
  • Graphite.dev: https://graphite.dev/
  • Code rabbit: https://www.coderabbit.ai/

Socials:

  • Website: https://www.chromatic.com/
  • Linkedin: https://www.linkedin.com/in/domyen/
  • X: https://x.com/domyen

View Details

Join our cohosts as they chat about what should and shouldn't go in your portfolio.

View Details

We're joined by Danny Banks, who shares his experience working on Style Dictionary as a Principal Design Technologist at AWS.

Episode Links:

  • Style Dictionary: https://styledictionary.com/
  • Tokens Studio: https://tokens.studio/
  • Astro:https://astro.build/
  • Goose: https://block.github.io/goose/

Socials:

  • Website: dbanks.design
  • Bluesky: @dbanks.design
  • Github: github.com/dbanksdesign

View Details

Join our cohosts as they chat about their own experiences with support and office hours.

View Details

Join our cohosts as they chat about their own experiences managing frontend dependencies!

Links:

  • pnpm node compatibility: https://pnpm.io/installation#compatibility
  • nx dependency graph: https://nx.dev/nx-api/nx/documents/dep-graph
  • volta: https://volta.sh/

View Details

We're joined by Steve Saul, who shares his experience as a Design Engineering Manager at Facebook (Meta).

Episode links:

  • Meta: https://about.meta.com/
  • Doug DeMarco: https://www.dougdemarco.com/

Socials:

  • Linkedin: https://www.linkedin.com/in/sjsaul/

View Details

We're joined by Scott Jehl, who shares his experience as an independent Experience Designer/Developer.

Episode Links:

  • CLS (Cumulative layout shift): https://web.dev/articles/cls
  • First paint: https://developer.mozilla.org/en-US/docs/Glossary/First_paint
  • INP: https://web.dev/articles/inp
  • WebPageTest: https://www.webpagetest.org/
  • Lighthouse: https://developer.chrome.com/docs/lighthouse/performance/performance-scoring
  • React Server Components: https://react.dev/reference/rsc/server-components

Socials:

  • Website: https://scottjehl.com/
  • Linkedin: https://www.linkedin.com/in/scott-jehl/
  • Twitter: https://x.com/scottjehl
  • Github: https://github.com/scottjehl

View Details

We're joined by Mike Aparicio, who shares his experience as a Principal Design Systems Engineer at Turquoise Health.

Episode Links:

  • Pit Viper (TQ’s design system): https://pitviper.turquoise.health
  • Gridless Design: https://gridless.design
  • A Global Design System: https://bradfrost.com/blog/post/a-global-design-system

Mike's Socials:

  • Website: https://mikeaparicio.com
  • Linkedin: https://www.linkedin.com/in/mikeaparicio/
  • Twitter: https://x.com/peruvianidol (mostly Mastodon though)
  • Mastodon: https://mastodon.social/@peruvianidol
  • Github: https://github.com/peruvianidol

View Details

We're joined by Michelle Chin, who shares her experience as a Design Advocate at Zeroheight.

Episode Links:

  • Design Ops Summit: https://rosenfeldmedia.com/designopssummit2022/
  • Design Ops Assembly Slack: https://www.designopsassembly.com/
  • zeroheight: https://zeroheight.com/
  • Global Pattern Library: globalpatterns.org
  • Coaching - From the Margins: fromthemargins.tech

Michelle's Socials:

  • Website: fromthemargins.tech
  • Linkedin: https://www.linkedin.com/in/michelletchin/
  • Twitter: https://x.com/soysaucechin

View Details

We're joined by Jina Anne, who shares her experience as a founder of Clarity and Co-chair of the Design Tokens W3C Community Group.

Episode links:

  • Design Tokens Working Group: https://www.designtokens.org/
  • Design Systems Slack: https://join.slack.com/t/design-systems/shared_invite/zt-1qimjp2dz-1pU~KCwcKmUcToOBLZ_VSQ
  • Joey Banks Figma Courses: https://www.baselinedesign.io/

Jina's Socials:

  • Website: https://www.jina.me
  • Linkedin: https://www.linkedin.com/in/sushiandrobots/
  • Twitter: https://www.twitter.com/jina
  • Github: https://www.github.com/jina

View Details

We're joined by Amber Feinerman, who shares her experience as a Senior Product Designer working on Design Systems at Netflix.

Episode links:

  • Una Kravitz + Adam Argyle: https://www.youtube.com/watch?v=APhECDy2U3U
  • Accessibility certification: https://www.accessibilityassociation.org/s/wascertification
  • Design system university: https://designsystem.university/

Amber's Socials:

  • Website: https://amberis.online/
  • Linkedin: https://www.linkedin.com/in/amberfeinerman/
  • Twitter: https://twitter.com/amberfeinerman
  • Github: https://github.com/amberfeinerman

View Details

We're joined by Donnie D'Amato, who shares his experience as a founder & Chief Architect at Design Systems House.

Episode Links:

  • Knapsack: https://www.knapsack.cloud/
  • Zeroheight: https://zeroheight.com/
  • Figma: https://www.figma.com/files/recents-and-sharing?fuid=553361873932381617
  • Cypress: https://www.cypress.io/
  • Guidepup: https://www.guidepup.dev/
  • ADP List: https://adplist.org/
  • The End (blog post): https://blog.damato.design/posts/the-end/

Donnie's Socials:

  • Website: https://donnie.damato.design/
  • Linkedin: https://www.linkedin.com/in/fauxserious/
  • Twitter: https://twitter.com/donniedamato
  • Github: https://github.com/ddamato

View Details

We're joined by Aziz Ramos, who shares his experience as a UX Engineer working on design systems at Peloton.

Links:

  • Website: https://notansari.com/
  • Linkedin: https://www.linkedin.com/in/aziz-ramos/
  • Dribbble: https://dribbble.com/azizramos
  • Peloton: https://www.onepeloton.com/
  • Specify: https://specifyapp.com/
  • Tokens Studio: https://tokens.studio/
  • Style Dictionary: https://amzn.github.io/style-dictionary/
  • Theo: https://github.com/salesforce-ux/theo

View Details

We're joined by Natalya Shelburne, who shares how her teaching background has influenced her leadership role as a Staff Manager in Design Infrastructure at GitHub.

Links:

  • Website: http://www.artist-developer.com/ (not updated since the dawn of time, as are all pages)
  • Linkedin: https://www.linkedin.com/in/natalyashelburne/
  • Github: https://github.com/
  • Primer: https://primer.style/
  • Design engineering Handbook: https://www.designbetter.co/design-engineering-handbook/
  • Twitter: https://twitter.com/natalyathree

View Details

We're joined by Donna Vitan, who shares her experience supporting multiple brands on her design system team at TELUS Digital.

Links:
- Website: https://donnavitan.com
- Linkedin: https://www.linkedin.com/in/donnavitan/
- Telus: https://www.telus.com/en/digital
- Docusaurus: https://docusaurus.io
- The Hot Potato Process: https://danmall.com/posts/hot-potato-process
- Design Token Working Group: https://www.w3.org/community/design-tokens
- Design Systems Meetup Group: https://designsystems.community
- Toronto design systems meetup: https://designsystems.community/chapters/toronto

View Details

Abdalkadir El-Ghazali joins us from the Consumer Group Design System team at Intuit to talk about being a self-taught designer and engineer.

Links:

  • Website: https://el-ghazali.com/
  • Youtube channel: https://www.youtube.com/@dietzamzam
  • CodeAcademy: https://www.codecademy.com/
  • CS50: https://pll.harvard.edu/course/cs50-introduction-computer-science?delta=0
  • HackerRank: https://www.hackerrank.com/

View Details

We're joined by Ben Callahan, who shares his experience as a founder of Sparkbox and helping organizations with their design systems.

Links:

  • Website: https://bencallahan.com/
  • Twitter: https://twitter.com/bencallahan
  • LinkedIn: https://www.linkedin.com/in/bencallahan/Sparkbox: https://sparkbox.com/
  • The Anatomy of a Design  System: https://sparkbox.com/foundry/design_system_makeup_design_system_layers_parts_of_a_design_system
  • UnConference talk: https://www.youtube.com/watch?v=DUQzEA_ahyc

View Details

We're joined by Crystal Ledesma, a Senior Engineering Manager working in Design Systems at Zillow.

Links:

  • Linkedin: https://www.linkedin.com/in/crystal-ledesma/
  • Twitter: https://twitter.com/sentbycrystal

View Details

Our final episode of 2022 covers design system documentation with Ayesha Mazrana, a design technologist on Pinterest’s design system team.

Links:
- Ayesha’s LinkedIn: https://www.linkedin.com/in/ayeshakmaz/
- Markdown: https://www.markdownguide.org/
- Sandpack: https://sandpack.codesandbox.io/
- Gestalt: https://gestalt.pinterest.systems/home
- Gestalt principles: https://www.toptal.com/designers/ui/g...
- GitHub pull requests: https://docs.github.com/en/pull-reque...

View Details

Mae Capozzi joins us this episode to chat about what to consider when maintaining a component library.

Links:

  • Personal: https://maecapozzi.com/
  • Twitter: https://twitter.com/MCapoz
  • Amplitude: https://amplitude.com/
  • Nx: https://nx.dev/
  • Turborepo: https://turbo.build/
  • Lerna: https://lerna.js.org/
  • Amplitude storybook plugin: https://github.com/amplitude/storybook-addon-amplitude
  • Changesets: https://github.com/changesets/changesets
  • Newsletter: https://maecapozzi.com/newsletter

View Details

Catt Small joins us to discuss how her experience in game design has influenced her career, going from IC to design manager.

Links: 

  • Catt’s website - https://cattsmall.com/
  • Should you become a design manager? - https://cattsmall.com/advice/education/2021/10/07/why-become-design-manager.html
  • Construct - https://www.construct.net/en
  • Unity - https://unity.com/

View Details

In this episode, we're joined by Sameera Kapila who shares her background and insights around design education.

Links:

  • Sameera’s Website - https://samkapila.com/
  • Sameera’s Twitter - https://twitter.com/SamKap
  • Sameera’s Linkedin - https://www.linkedin.com/in/samkap/
  • Inclusive Design Communities - https://abookapart.com/products/inclusive-design-communities
  • Netlify - https://netlify.com/

View Details

On this episode, Kelly and Adekunle chat with Jack McCloy from Amplitude about building components for design systems.

Links:

  • Jack’s LinkedIn: https://www.linkedin.com/in/jack-mccloy
  • Jack’s Twitter: https://twitter.com/JackMcCloy
  • Amplitude: https://www.amplitude.com/
  • Vanilla Extract: https://vanilla-extract.style/
  • Sprinkles: https://vanilla-extract.style/documentation/sprinkles-api/
  • Storybook Amplitude Addon: https://storybook.js.org/addons/tag/amplitude

View Details

Building tools is one of the many responsibilities UX engineers have. In this episode we discuss tools that enhance the design and developer experiences.

Links:
- https://nextjs.org/
- https://www.gatsbyjs.com/
- https://www.figma.com/
- https://www.figma.com/community/file/806626024182535168
- https://tina.io/
- https://zeroheight.com/
- https://www.gitbook.com/
- https://mdxjs.com/docs/

View Details

As hybrids, every day can be a new journey. In this episode, we discuss the typical day for UX engineers and some of the short and long term challenges we face.

Links:

  • iterm2: https://iterm2.com/
  • oh my zsh: https://ohmyz.sh/
  • GitHub Desktop: https://desktop.github.com/
  • Storybook: https://storybook.js.org/
  • Gists: https://gist.github.com/starred
  • Loom: https://www.loom.com
  • Andrew’s terminal setup: https://www.hipstersmoothie.com/garden/Terminal%20Setup
  • Kelly’s setup: https://kellyharrop.com/blog/setup
  • Principle: https://principleformac.com/
  • Figma: https://www.figma.com/

View Details

Join us for our very first episode of Code & Pixels, where we talk about who we are and what we mean by “hybrid” roles.

Links:

  • Design Systems and Hybrids - Jina Anne
  • UX Engineering for design systems
  • UX Engineering - Emma Bostian
  • A Single Div
  • Webflow
  • Storybook
  • Zeroheight
  • Webpack