Jon Rohan's guest appearances

Jon Rohan

Non Breaking Space Show

React Podcast

Goodstuff Master Audio Feed

Rachel Nabors

Brad Frost

Jonathan Cutrell

Jason Pamental

Nathan Curtis

Wes Bos

Jason Grigsby

Laura Kalbag

Jonathan Stark

Samantha Warren

Todd Sanders

Chris Coyier

Jonathan Snook

Sarah Drasner

Dan Brown

OwlTail

Jon Rohan is an Engineer on the Design Systems Team at Github, building tooling for Octicons and Primer — their React component library. Chantastic asks about his 6 year tenure at GitHub, the inspiration behind his primer.css slam poem, how their using CSS-in-JS and Lerna to structure their work, and his project Figma Actions for seamlessly building icons from Figma design files. They discuss design apps, Monorepos, GitHub Actions, CSS-in-JS, and why you should open source your systems. Featuring  Jon Rohan — Twitter, Github, Website Michael Chan — Twitter, Github, Website  Links  25: Make Brilliant Messes with Diana Mounter and Emily Plummer — Previous React Podcast episode with on Design Systems at Github Design Systems at GitHub — by Diana Mounter Primer — Resources, tooling, and design guidelines for building interfaces with GitHub’s design system Github Primercss.io slam poem — a pem about Primer by Jon Rohan Styled System — Style props for rapid UI development Emotion — CSS-in-JS library designed for high performance style composition styled components — Visual primitives for the component age Github Octicons — Your project. GitHub's icons FAMFAMFAM — Silk Figma — A better way to design Figma Developer API GitHub Actions — Focus on what matters: code Figma Action — GitHub action for exporting Figma components lerna — 🐉 A tool for managing JavaScript projects with multiple packages Monorepo — a software development strategy where code for many projects are stored in the same repository Primer Community on Spectrum  Sponsors Infinite Red has been designing, shipping and building web and mobile apps for 10 years. They're experts in React Native and host North America's only React Native conference, Chain React, educating thousands of developers all over the world. Start a new project with them, mention this show, and get two free tickets to the Chain React in Portland. infinite.red/contact They're also a passionate advocate of remote work. They believe you can build a thriving remote company without sacrificing culture. Read the handbook on how to travel the road less commuted. Get The Remote Work handbook at remote.infinite.red.

Jon Rohan is an Engineer on the Design Systems Team at Github, building tooling for Octicons and Primer — their React component library. Chantastic asks about his 6 year tenure at GitHub, the inspiration behind his primer.css slam poem, how their using CSS-in-JS and Lerna to structure their work, and his project Figma Actions for seamlessly building icons from Figma design files. They discuss design apps, Monorepos, GitHub Actions, CSS-in-JS, and why you should open source your systems. <h2>Featuring</h2> <ul> <li>Jon Rohan — <a href="https://twitter.com/jonrohan" rel="nofollow" target="_blank">Twitter</a>, <a href="https://github.com/jonrohan" rel="nofollow" target="_blank">Github</a>, <a href="http://jonrohan.codes" rel="nofollow" target="_blank">Website</a></li> <li>Michael Chan — <a href="https://twitter.com/chantastic" rel="nofollow" target="_blank">Twitter</a>, <a href="https://github.com/chantastic" rel="nofollow" target="_blank">Github</a>, <a href="https://chantastic.org/" rel="nofollow" target="_blank">Website</a></li> </ul> <h2>Links</h2> <ul> <li><a href="https://reactpodcast.com/25" rel="nofollow" target="_blank">25: Make Brilliant Messes with Diana Mounter and Emily Plummer</a> — Previous React Podcast episode with on Design Systems at Github</li> <li><a href="https://medium.com/@broccolini/design-systems-at-github-c8e5378d2542" rel="nofollow" target="_blank">Design Systems at GitHub</a> — by Diana Mounter</li> <li><a href="https://primer.style" rel="nofollow" target="_blank">Primer</a> — Resources, tooling, and design guidelines for building interfaces with GitHub’s design system</li> <li><a href="https://vimeo.com/123020478" rel="nofollow" target="_blank">Github Primercss.io slam poem</a> — a pem about Primer by Jon Rohan</li> <li><a href="https://styled-system.com" rel="nofollow" target="_blank">Styled System</a> — Style props for rapid UI development</li> <li><a href="https://emotion.sh" rel="nofollow" target="_blank">Emotion</a> — CSS-in-JS library designed for high performance style composition</li> <li><a href="https://www.styled-components.com" rel="nofollow" target="_blank">styled components</a> — Visual primitives for the component age</li> <li><a href="https://octicons.github.com" rel="nofollow" target="_blank">Github Octicons</a> — Your project. GitHub's icons</li> <li><a href="http://www.famfamfam.com" rel="nofollow" target="_blank">FAMFAMFAM — Silk</a></li> <li><a href="https://www.figma.com" rel="nofollow" target="_blank">Figma</a> — A better way to design</li> <li><a href="https://www.figma.com/developers/docs" rel="nofollow" target="_blank">Figma Developer API</a></li> <li><a href="https://github.com/features/actions" rel="nofollow" target="_blank">GitHub Actions</a> — Focus on what matters: code</li> <li><a href="https://github.com/marketplace/actions/figma-action" rel="nofollow" target="_blank">Figma Action</a> — GitHub action for exporting Figma components</li> <li><a href="https://github.com/lerna/lerna" rel="nofollow" target="_blank">lerna</a> — 🐉 A tool for managing JavaScript projects with multiple packages</li> <li><a href="https://en.wikipedia.org/wiki/Monorepo" rel="nofollow" target="_blank">Monorepo</a> — a software development strategy where code for many projects are stored in the same repository</li> <li><a href="https://spectrum.chat/primer" rel="nofollow" target="_blank">Primer Community on Spectrum</a></li> </ul> <h2>Sponsors</h2> Infinite Red has been designing, shipping and building web and mobile apps for 10 years. They're experts in React Native and host North America's only React Native conference, Chain React, educating thousands of developers all over the world. Start a new project with them, mention this show, and get two free tickets to the Chain React in Portland. <a href="https://infinite.red/contact" rel="nofollow" target="_blank">infinite.red/contact</a> They're also a passionate advocate of remote work. They believe you can build a thriving remote company without sacrificing culture. Read the handbook on how to travel the road less commuted. Get The Remote Work handbook at <a href="https://remote.infinite.red" rel="nofollow" target="_blank">remote.infinite.red</a>.

48: Open Source It with Jon Rohan

Jon is an Engineer and Designer at GitHub. He recently spoke at CSS Dev Conf in Hawaii on Github CSS Performance.

    
    
  
    Jon’s talk at CSS Dev Conf
  
  
    Jon on The Industry podcast
  
  
    Jon’s speakerdeck
  
  
    Creating triangles in CSS
  
  
    FamFamFam icons
  
  
    Cameron McEfee
  
  
    Glyphs App
  
  
    FontSquirrel
  
  
    Glyphs
  
  
    Glyphs Mini - schriftgestaltung.de
  
  
    CSS Explain
  
  
    @jonrohan
  
  
    Jon on Github
  


    
  

Jon is an Engineer and Designer at GitHub. He recently spoke at CSS Dev Conf in Hawaii on Github CSS Performance. <ul> <li> <a href="https://vimeo.com/54990931" rel="nofollow" target="_blank">Jon’s talk at CSS Dev Conf</a> </li> <li> <a href="http://theindustry.cc/2012/07/05/14-retina-all-the-things-octicons-pictos-4-foundation-3-and-the-new-twitter-logo/" rel="nofollow" target="_blank">Jon on The Industry podcast</a> </li> <li> <a href="https://speakerdeck.com/jonrohan/githubs-css-performance" rel="nofollow" target="_blank">Jon’s speakerdeck</a> </li> <li> <a href="http://jonrohan.me/guide/css/creating-triangles-in-css/" rel="nofollow" target="_blank">Creating triangles in CSS</a> </li> <li> <a href="http://www.famfamfam.com/lab/icons/" rel="nofollow" target="_blank">FamFamFam icons</a> </li> <li> <a href="http://www.cameronmcefee.com" rel="nofollow" target="_blank">Cameron McEfee</a> </li> <li> <a href="http://glyphsapp.com" rel="nofollow" target="_blank">Glyphs App</a> </li> <li> <a href="http://www.fontsquirrel.com" rel="nofollow" target="_blank">FontSquirrel</a> </li> <li> <a href="http://target.georiot.com/Proxy.ashx?tsid=528&amp;GR_URL=https%253A%252F%252Fitunes.apple.com%252Fus%252Fapp%252Fglyphs%252Fid416987633%253Fmt%253D12%2526uo%253D4%2526partnerId%253D30" rel="nofollow" target="_blank">Glyphs</a> </li> <li> <a href="http://target.georiot.com/Proxy.ashx?tsid=528&amp;GR_URL=https%253A%252F%252Fitunes.apple.com%252Fus%252Fapp%252Fglyphs-mini%252Fid469036911%253Fmt%253D12%2526uo%253D4%2526partnerId%253D30" rel="nofollow" target="_blank">Glyphs Mini - schriftgestaltung.de</a> </li> <li> <a href="http://josh.github.com/css-explain/" rel="nofollow" target="_blank">CSS Explain</a> </li> <li> <a href="http://www.twitter.com/jonrohan" rel="nofollow" target="_blank">@jonrohan</a> </li> <li> <a href="https://github.com/jonrohan" rel="nofollow" target="_blank">Jon on Github</a> </li> </ul>

Non Breaking Space Show 30: Jon Rohan

Jon is an Engineer and Designer at GitHub. He recently spoke at CSS Dev Conf in Hawaii on Github CSS Performance.    Jon’s talk at CSS Dev Conf   Jon on The Industry podcast   Jon’s speakerdeck   Creating triangles in CSS   FamFamFam icons   Cameron McEfee   Glyphs App   FontSquirrel   Glyphs   Glyphs Mini - schriftgestaltung.de   CSS Explain   @jonrohan   Jon on Github  