Speaker 1: How'd you like to listen to dot net rocks with
Speaker 1: no ads? Easy? Become a patron for just five dollars
Speaker 1: a month. You get access to a private RSS feed
Speaker 1: where all the shows have no ads. Twenty dollars a month,
Speaker 1: we'll get you that and a special dot net Rocks
Speaker 1: patron mug. Sign up now at patreon dot dot NetRocks
Speaker 1: dot com. Hey, welcome back to dot net rocks. I'm
Speaker 1: Carl Franklin, an amateur Campbell. We're here for the nineteen
Speaker 1: hundredth and sixty fifth time. Well you are leave it okay,
Speaker 1: fifty fifth free whatever and something like that.
Speaker 2: New guy, I'm the new guy.
Speaker 1: Yeah, okay, so uh yeah, we've been doing this a
Speaker 1: long long time. We are the OG podcast, not just
Speaker 1: the OG Developer podcast, not just the OG dot net podcast,
Speaker 1: but probably the longest running podcast that ever was.
Speaker 2: I can get some older NPR shows, but they came
Speaker 2: to podcasting later. Yeah, they were on the radio first
Speaker 2: and then they turned them into podcasts, but we were
Speaker 2: doing it before they were, so the word podcast existing.
Speaker 1: Yeah, that's right. I don't know. Every once in a while,
Speaker 1: I just feel like reminding our listeners to that you're
Speaker 1: listening to the og podcast. There might be some remnants,
Speaker 1: I don't know, but I don't see anything out there.
Speaker 1: All right, so let's start this show off really good,
Speaker 1: really well, really goodly with better no framework.
Speaker 2: All right, man, what do you got?
Speaker 1: I went looking for trending GitHub repos and yeah, always
Speaker 1: a good place to go. Yeah. So this one was,
Speaker 1: I don't know, a little far down in the list,
Speaker 1: but it was still in the top twenty. I think awesome.
Speaker 1: Claude code. Now, Claude, of course, is a developed meant.
Speaker 1: I think it's really a development environment for doing AI,
Speaker 1: using AI agents to work with code. And this is
Speaker 1: like most awesome list. It's a curated list of tooling
Speaker 1: and hooks and commands and Claude m D files both
Speaker 1: language specific, end domain specific clawed MD files, scaffolding and
Speaker 1: MCP stuff. Like, there's a lot here. Claude is sort
Speaker 1: of the hotness, the new hotness in.
Speaker 2: Terms of tropics of the approach to exactly use it
Speaker 2: through cursor or you know, whatever tool you want.
Speaker 1: Yep, yep, yep. So there you go. You know, just
Speaker 1: I'm just coming clean here. I haven't used it. This
Speaker 1: is not my wheelhouse, but I know it's very popular,
Speaker 1: and I know that there's a lot of people even
Speaker 1: in ft next that you know, use it, use claude
Speaker 1: and use entropic and so there you go, awesome claude code, cool, know,
Speaker 1: learn it, love it, and let us know, you know,
Speaker 1: if you're using this stuff and what you think of this.
Speaker 1: Obviously a lot of people think of it, highly of
Speaker 1: it because it's trending on GitHub. But there you have it.
Speaker 1: So who's talking to us, Richard?
Speaker 2: Well, knowing we're going out to the design path, I
Speaker 2: thought I'd dip into the archive a little bit to
Speaker 2: one of the Billy Hollis shows, which you've done a
Speaker 2: bunch of and just recently did another one, This is
Speaker 2: seventeen sixty six, which we did back in November twenty one,
Speaker 2: talking about desktop development specifically. Nice and long time listener
Speaker 2: Rod Falinge had this great comments a few years ago,
Speaker 2: but he said, oh right, yeah, another great episode. I
Speaker 2: always loved listening to what Billy has to say. We
Speaker 2: all do. There were a couple of things you said,
Speaker 2: Billy which really stood out for me. The first was
Speaker 2: the idea of evil by design. Wow, I've witnessed that
Speaker 2: in action very often over the course of the last
Speaker 2: five years or so, we've had to design some truly
Speaker 2: awful looking apps. I think I've made seven or eight
Speaker 2: of them.
Speaker 1: Wow.
Speaker 2: Of those appsol onely one is in use today. That's
Speaker 2: because the CIO requires people to use it.
Speaker 1: Good Lord, I.
Speaker 2: Don't think the person who designed this had any evil
Speaker 2: intent when he designed it. I just don't think he
Speaker 2: knows how to make a good UIU as not evil
Speaker 2: just yeah, you know, because they've got that sort of
Speaker 2: banal evil effect, like not paying attention to this is
Speaker 2: in the sense somewhat of an evil act.
Speaker 1: Well, well, Handlen's raisor applies, doesn't it?
Speaker 2: Yeah, do not? Well, they hold you not attribute to me.
Speaker 2: I also that what you can be explained by incommondance
Speaker 2: is very fair.
Speaker 1: Yeah, so it's not really evil. They just don't know
Speaker 1: any better.
Speaker 2: Rod goes on to say, the second thing is the
Speaker 2: reduction in people's ATTENTIONSPN. Oh god, it's so true. I
Speaker 2: love the phrase you used of people being afraid to
Speaker 2: be alone with their own thoughts. I've said the same thing.
Speaker 1: I'm sorry, did you say something?
Speaker 2: Hello? What?
Speaker 1: What? Sorry? Can you say? I was thinking of something else.
Speaker 1: I don't know why I'm.
Speaker 2: Pleased with myself that I am not afraid to be
Speaker 2: alone with my own thoughts. However, I find that even
Speaker 2: when I am alone with my own thoughts, I'm not
Speaker 2: alone for very long, especially at home. I believe you
Speaker 2: have to be intentional about it. For example, being outside,
Speaker 2: I find it much easier to be alone my own thoughts,
Speaker 2: especially when hiking. Anyway, I recommend getting away from the
Speaker 2: day to day to help we reduce the noise and
Speaker 2: just thinking. Yeah, very fair. Yeah. For me, it was
Speaker 2: usually walking the dog. Walking a dog was to.
Speaker 1: Get away, right, Well, now you got another puppy, and now.
Speaker 2: I got a dog again. Yeah, we got another dog.
Speaker 2: And she's a little tricky to walk so far, but
Speaker 2: she's enthusiastic.
Speaker 1: Do you listen to anything while you walk?
Speaker 3: Uh?
Speaker 1: You the dog?
Speaker 2: Usually not when we're hiking in the wilderness because bears. Yeah,
Speaker 2: it's usually wise to be aware of what's going on
Speaker 2: in the forest or round where we are. We're in
Speaker 2: the wilderness here, right, this is a rural area. I
Speaker 2: am literally minutes away from Virgin Forest. Zach was your
Speaker 2: bare alarm, though, wasn't he? Zach was a bar alarm,
Speaker 2: and I could try. I watched Zach and then how
Speaker 2: Zach reacted. I knew what was up because he knew
Speaker 2: what was up. But Jojo is just a pop She's
Speaker 2: six months old, and so I've got to look out
Speaker 2: for her for now.
Speaker 1: Jojo is a chicken fried potato wedge where I come from.
Speaker 2: Well that's a not a bad description of this little spas,
Speaker 2: so I'm I'll go with that. It's you chicken fried
Speaker 2: potato wedge.
Speaker 1: You see.
Speaker 2: Yeah, she's a nutter right now, but you know, six
Speaker 2: months old, it's kind of up. It's a little poodle,
Speaker 2: a little Bernies, a little Azzie chefern, a little border college.
Speaker 2: So she's got a lot going on.
Speaker 1: Rod.
Speaker 2: Great to hear from me again immediately it was a
Speaker 2: few years ago. Thanks so much for the great comment.
Speaker 2: I'm pretty sure you already got a copy music code
Speaker 2: by but if you'd like a copy of music, goobe.
Speaker 2: I read a comment on the website at don at
Speaker 2: Rocks dot com or on the Facebook, so we publish
Speaker 2: every show there, and if you comment there and everybody
Speaker 2: on the show, we'll send you a copy of mus
Speaker 2: to go buy.
Speaker 1: You can also follow us on all the social media's
Speaker 1: and if you send us a DM there or just
Speaker 1: you know, public message, sure, and we read it on
Speaker 1: the air. We'll also send you a copy of Me
Speaker 1: to Code by Music to Code by Still Going Strong
Speaker 1: twenty two tracks. You can get them at music toocodey
Speaker 1: dot net if you don't feel like writing a comment,
Speaker 1: and the collection is available in MP three flack D
Speaker 1: wave formats. All right, so before we introduced Diana, we
Speaker 1: got to talk about what happened in the year nineteen
Speaker 1: sixty five, sixty five sixty five. More civil rights, more
Speaker 1: Vietnam War. Yes, it just keeps going on. But now
Speaker 1: we have Malcolm X assassinated. We have Bloody Sunday. On
Speaker 1: March seventh, Alabama state troopers violently confronted civil rights demonstrators
Speaker 1: and Selma Alabama, leading to national outrage and support for
Speaker 1: voting rights. This is your America. You know this really happened.
Speaker 1: Richard will probably talk You'll probably talk about ed White
Speaker 1: and space exploration, but for sure, the Sound of Music premiered. Hey, yeah,
Speaker 1: it's a movie about Nazis. Hooray, I know it singing
Speaker 1: very strange with Nazis. Nazis, those crazy Nazis. The Muhammad
Speaker 1: Ali defeated Sunny liston of course, on May twenty fifth,
Speaker 1: the Indo Pakistani War. You know, these guys we're talking
Speaker 1: about batteries and sisters, you know that were that separated
Speaker 1: over religious differences and cultural differences, and it continues to
Speaker 1: this day and it's very sad. West Germany and Israel
Speaker 1: established diplomatic relations on May twelfth, marking a significant step
Speaker 1: in post World War II relations, and lots and lots
Speaker 1: of other things, more Beatlemania, of course, they you know,
Speaker 1: they were just the superstars of America at this point.
Speaker 1: So Richard, what do you got for space and science
Speaker 1: and all that?
Speaker 2: A little more story on the Ed White bit. So
Speaker 2: this is about the spacewalks. So the Soviets did it first.
Speaker 2: Was alex A Alex Leonov who did the first spacewalk
Speaker 2: aboard the Vauxshad two. So five days later, on Geminy four,
Speaker 2: Ed White does the second spacewalk. Ever, both Alexi and
Speaker 2: ed have exactly the same problem, which is that their
Speaker 2: space suits aren't really well designed for spacewalks because nobody
Speaker 2: had done it before, and so their suits tend to
Speaker 2: expand and stiffen, and so they can't get back in.
Speaker 2: The vehicle oops to the point where, at least in
Speaker 2: Alexi's case, he punched a hole in his suit to
Speaker 2: reduce the pressure enough to get back inside, and Ed White,
Speaker 2: who by all accounts was stunningly fit, was utterly exhausted
Speaker 2: by the time he could get back into his seat
Speaker 2: in the Gementy.
Speaker 1: Four I'm sorry, Ed, I'm afraid I can't do that.
Speaker 2: Yeah, I can't get back in. And then later that year,
Speaker 2: the Americans fortially pull ahead in the space race, with
Speaker 2: Gemeny seven and Gemeny six A performing the first rendezvous
Speaker 2: in space. So only they had two vehicles up, but
Speaker 2: they got They were able to maneuve or within less
Speaker 2: than a foot of each other. If they'd had docking equipment,
Speaker 2: they could have docked together. So that was Borming and
Speaker 2: Level in Gementy seven and Sharon Stafford in Geminy six
Speaker 2: A and seven at that time would also set the
Speaker 2: record for the longest BaseFlight at fourteen days, a little
Speaker 2: sportscar like space. Fourteen days. Yeah, probably smelled. Couldn't do it.
Speaker 2: It was hard enough doing road trips with you, my god,
Speaker 2: we got away from each other every day, every day,
Speaker 2: every day, and on the computer side nineteen sixty five
Speaker 2: is the launch of decks PDP eight WOW, famously the
Speaker 2: first mini computer available for less than twenty thousand dollars cheap,
Speaker 2: a bargain so building on machines we've mentioned in the
Speaker 2: past few shows the link and the PDP five. It
Speaker 2: is a twelve bit word originally ship with four K
Speaker 2: could be expanded to thirty two K. It used diode
Speaker 2: transistor logic with what they call it hybrid ICY or
Speaker 2: the flip chip, which had some discrete components on it.
Speaker 2: Later models of the PDP eight would actually go to
Speaker 2: TTL I SES logic.
Speaker 1: It occurs to me that they must have sold a
Speaker 1: lot of these at that price, because you know, small
Speaker 1: businesses or small to medium businesses could afford that.
Speaker 2: They were getting in the realm. They sold the fifty
Speaker 2: thousand units over the run of WOW, six seven different
Speaker 2: models WOW, and the original units didn't have a There
Speaker 2: was no such thing as RAM yet, so when you
Speaker 2: powered up your PDP eight, you hand keyed in on
Speaker 2: the front of it the bootloader to get the paper
Speaker 2: tape running to actually load an operating system. And it
Speaker 2: came with a version of Fortren WOW, and it.
Speaker 1: Sows for computational things obviously, were there any languages other
Speaker 1: than forour trend? I mean that's.
Speaker 2: Eventually, yes, there'll be a basic and a PL one
Speaker 2: and so forth. But initially shipped a forourtrend in sixty
Speaker 2: to five, and of course the successor will be the
Speaker 2: very arguably the most famous deck, the PDPL eleven. But
Speaker 2: this was there were two lines of PDP machines being built,
Speaker 2: a sort of premium one which was the four and
Speaker 2: the twelve and things like that, and then they cost
Speaker 2: one that actually was wildly more popular, which was the
Speaker 2: five in the eight and the eleven.
Speaker 1: Very cool, Richard, I love these little mini geek outs.
Speaker 1: We start to show it now, it's really getting good.
Speaker 2: Yeah, we're right at the hub here. I mean, it's
Speaker 2: fascinating to say this machine was built both with Discrete
Speaker 2: Electronics's original models and they were about two hundred and
Speaker 2: fifty pounds each and then when they switched to ICs,
Speaker 2: it dropped down to eighty pounds.
Speaker 1: Wow. Very cool. Yeah, all right, Well with that, I
Speaker 1: think it's time to introduce Diana. Diana Mounter as a
Speaker 1: designer with an interest in systems thinking code as a
Speaker 1: material and inclusive design, right, there. I'm so intrigued. Code
Speaker 1: as a material. All right, well, we'll talk to her
Speaker 1: in a minute. Most recently head of design at GitHub,
Speaker 1: she spent nearly a decade shaping its user experience from
Speaker 1: dark mode to copilot. She led the evolution of primer
Speaker 1: Gethub's design system, and later headed the whole design organ
Speaker 1: spanning product, brand research, and design engineering. She's currently taken
Speaker 1: some time off before she starts her next gig at
Speaker 1: Alpha Sense. Diana lives in Brooklyn. That's in New York, folks,
Speaker 1: with her husband and two cats. Welcome Diana, thank.
Speaker 3: You very much for having me on the show.
Speaker 1: Ah, you're welcome. Thank you for being here. That's some
Speaker 1: intriguing wording there in your bio code as material?
Speaker 3: Is that where you want to start?
Speaker 1: I don't know where do you want to start? I
Speaker 1: think the whole thing is intriguing to me.
Speaker 3: Sure, Yeah, let's start there. Why not?
Speaker 4: If you if you looked at my website, that would
Speaker 4: reference that. That framing comes from a guy called Wreen
Speaker 4: Madson who had this online book called Programming Design Systems
Speaker 4: that he started to develop. Probably I don't know an
Speaker 4: exact time, but let's say five six, seven, years ago
Speaker 4: or so when design systems were kind of hot and
Speaker 4: a thing that everyone was talking about, at least in
Speaker 4: my world. And he's someone that I got to meet
Speaker 4: and also invited him to speak at my meetup that
Speaker 4: I used to run in New York about design systems.
Speaker 4: And the thought behind this is at least my interpretation
Speaker 4: of what Roun talks about, is that if you think
Speaker 4: of code as just another material in your design toolbox,
Speaker 4: just like a design tool like figma or a pen
Speaker 4: and paper, a sketch pad, it's about knowing when to
Speaker 4: use the right tool for the job. And if you
Speaker 4: have read much about me or seen one of my talks,
Speaker 4: you'll probably pick up fairly quickly that I'm a strong
Speaker 4: believer in designers being able to code, particularly if you're
Speaker 4: working on a product with deep interactions, because I feel
Speaker 4: like you're going to get to a bit of a
Speaker 4: stronger result if you're able to actually prototype out what
Speaker 4: that what that product might feel like, or that tool
Speaker 4: that software might feel like, if you're able to get
Speaker 4: it closer to the to the real result.
Speaker 3: So that's why I believe in code as a material I.
Speaker 1: See, and certainly with design, because you know performance, effects design,
Speaker 1: navigation effects design, Like it's all It's all sort of
Speaker 1: that user experience, isn't it? And code is a big
Speaker 1: part of that.
Speaker 3: Yeah.
Speaker 4: Yeah, the ultimate you know, the resulting user experience is
Speaker 4: a factor of it being performance, having utility, and also
Speaker 4: that it is intuitive and sometimes that means also thinking
Speaker 4: about how it looks and feels right, So it's a
Speaker 4: combination of all of those things that actually affect the
Speaker 4: resulting experience.
Speaker 2: We just did a show a little while ago where
Speaker 2: one of the listeners was talking about a designer who
Speaker 2: only worked in Figma and never thought about things like
Speaker 2: responsive design. And I don't know that you could understand
Speaker 2: responsive design if you didn't write some of the code
Speaker 2: for it and play with the effect of this is
Speaker 2: what it looks like on a phone and this is
Speaker 2: what it looks like on a tablet. Like that's just
Speaker 2: tough to do without having some coding chops.
Speaker 4: Yeah, that's like incredibly surprising to me, and I think
Speaker 4: it's actually that designer is missing out.
Speaker 3: So two things. One, responsive design is.
Speaker 4: What got me really deeper into coding, at least in
Speaker 4: front end, because I felt like design tools couldn't cut it.
Speaker 4: They can't replicate what the experience would be.
Speaker 1: Like, boy, you said that, I'm with you. I had
Speaker 1: to do a project with Figma and it was great.
Speaker 1: You know, the designers laid it all out and said,
Speaker 1: you got this pixels way and all that stuff. But
Speaker 1: when you implement it, it's it's not responsive. Yeah, and
Speaker 1: so how do you make it responsive?
Speaker 3: Yeah? I think so. I think, like I loved Figma
Speaker 3: as a tool, like.
Speaker 4: It's a great tool for thought and I can and
Speaker 4: you know, it's interesting how some of these other tools
Speaker 4: are evolving that let you type in some prompts and
Speaker 4: like explore, but still Figma is a bit faster to
Speaker 4: sort of make and direct manipulation, right to make like
Speaker 4: quick changes and like see the results. But yeah, it's
Speaker 4: not code. And so designing in the browser is is
Speaker 4: like was really I think a thing that became popular
Speaker 4: with with responsive and then the other thing that it
Speaker 4: brought with it with like the iPhone coming out and
Speaker 4: having like.
Speaker 3: Everyone's websites on these chription a small screen.
Speaker 4: Yeah, that that brought the sort of way of mobile
Speaker 4: first design, which I think is a really useful way
Speaker 4: to design because it just helps you prioritize and think
Speaker 4: about the hierarchy. It doesn't mean that you're going to
Speaker 4: say this exact design works should be the same on desktop,
Speaker 4: but it helps you really like make those tough calls
Speaker 4: on like what's the actual priority for the user experience
Speaker 4: on this device, So that designer is missing out and
Speaker 4: I hope that they get into it.
Speaker 1: I mean, even if even if designers just new enough
Speaker 1: about media queries and how to make how to take
Speaker 1: a static CSS file and turn it into responsive design,
Speaker 1: there isn't much code required to do that. You just
Speaker 1: have to know enough about the CSS to write those
Speaker 1: media queries.
Speaker 3: Yeah, I yes.
Speaker 4: I also think CSS is a little underestimated in terms
Speaker 4: of like how much there is to learn and get
Speaker 4: it right. So you know, that's sort of what got
Speaker 4: me into design systems and things like that, because you
Speaker 4: might want to swap out and a whole entire component
Speaker 4: on a desktop screen, and understanding what that means for
Speaker 4: the markup and.
Speaker 3: How you style things is really helpful.
Speaker 4: That's also why I think, like that's I think the
Speaker 4: developments in in front end and CSS getting better and
Speaker 4: then new framework's coming out is also what led us
Speaker 4: into two people talking about the front of the front
Speaker 4: end and the back of the front end, and this
Speaker 4: sort of beginning of this divide, which which led to
Speaker 4: what I've been talking about conferences and anyone who will
Speaker 4: listen recently, which is design engineering.
Speaker 1: What drew you into GitHub and get and code? Is
Speaker 1: a designer and all that stuff? What got you there?
Speaker 4: Yes, I think I had always been dabbling in code
Speaker 4: and had sparked in interest in computers from my late teens.
Speaker 4: I'm old enough to have gone to land parties and
Speaker 4: played Action Quake and Stylecraft and things like that, and
Speaker 4: there I met I started to become interested in, like,
Speaker 4: how do I make the computer work the way I
Speaker 4: want it to work? And then that led into an
Speaker 4: interest in it and programming, And I found myself becoming
Speaker 4: interested in the web when I was working in prints
Speaker 4: and discovered that there was this whole job, but this
Speaker 4: whole area where you could build user interfaces. So later
Speaker 4: that sort of passion and that interest in the intersection
Speaker 4: of code and creativity sort of continued. And so although
Speaker 4: I know my whole career has really been in design,
Speaker 4: I still liked to build things. And when I was
Speaker 4: working in an agency in Sydney, this was in twenty ten,
Speaker 4: some of my colleagues and I went to a hackathon
Speaker 4: and they were using get and get herb to collaborate
Speaker 4: and they were like, hey, why don't you hop on
Speaker 4: to get herb and create an account so you can
Speaker 4: collaborate with this, because then you're a new for an
Speaker 4: end And that was it. And then I was like, oh,
Speaker 4: I want this feels something about this feels really awesome
Speaker 4: because I was in the same place as the engineers.
Speaker 3: And then I really loved version control.
Speaker 4: I mean, as a designer, you end up with lots
Speaker 4: of like, you know, homepage design, underscore, final hyphen done,
Speaker 4: final three.
Speaker 2: Right this time?
Speaker 3: Yeah, exactly, and so I like, I really liked that.
Speaker 4: And then I found I made some excuses to keep
Speaker 4: using get and get hub so that I would like
Speaker 4: get more comfortable with the commands. And so I discovered
Speaker 4: jeckyl and ported my uh probably terribly built WordPress site
Speaker 4: over to Jackyl. And Jackyl also felt nice because I
Speaker 4: felt like I was like closer to directly, you know,
Speaker 4: touching the code that was actually resulting in the UI
Speaker 4: and I. Jackyl is a static site generator. It was
Speaker 4: created by I think it was by Tom Preston. Warner
Speaker 4: or he at least contributed to it, one of the
Speaker 4: founders for get hub, and it still I think it
Speaker 4: still exists. I don't Yeah, I don't really use it
Speaker 4: as much now. I think people have gotten interested in
Speaker 4: all sorts of other site generators and a lot of
Speaker 4: folks like working with reacting.
Speaker 2: And front end site still up. All included in the
Speaker 2: show notes, So.
Speaker 3: There you go.
Speaker 4: I was like, I think it is because I feel
Speaker 4: like some people still use it. It was great. It was
Speaker 4: just like really I think easy to jump into it
Speaker 4: as a designer that knewed some HTML and CSS, and
Speaker 4: you could also use it with SASH when that became
Speaker 4: more popular. You could have like includes and things and
Speaker 4: for loops and stuff, so you started to learn the
Speaker 4: basics of.
Speaker 1: Friends nice so you get control flow and CSS.
Speaker 3: Yeah, yeah exactly.
Speaker 4: But yeah that like just building my site in Jacko
Speaker 4: and hosting it on get her pages. That was also
Speaker 4: way easier than like FTP things and other sort of things.
Speaker 4: So that just kept me up with using get and getthub,
Speaker 4: and then it just sort of continue to grow from
Speaker 4: there and discovering open source and sort of learning how
Speaker 4: other people built sites and things.
Speaker 1: So yeah, So you consider yourself sort of a designer
Speaker 1: slash engineer, right.
Speaker 3: I would.
Speaker 4: I'm passionate about I'm interested in design engineering as a
Speaker 4: role that I think is daily needed in design. But
Speaker 4: now I'm a serious boss person, so I don't think
Speaker 4: I would call myself a design engineer.
Speaker 1: I have experience. You have experience clothing as well as designing,
Speaker 1: so you could probably talk to both of those entities
Speaker 1: and translate the language that flows between them.
Speaker 4: I mean I think sure, yeah, And I helped establish
Speaker 4: that role at GitHub. I used to manage design engineers
Speaker 4: with that title of helped hire them.
Speaker 2: It.
Speaker 4: There's a funny quote on the internet. I think it's
Speaker 4: by a guy called whose name is Tangerine. I might
Speaker 4: be wrong, but he says designers who code walked so
Speaker 4: that design engineers could run. And I think that's that
Speaker 4: might not make sense in your head, but there was
Speaker 4: like the era of everyone in like design coding world
Speaker 4: in front end talking about designers she could, and then
Speaker 4: there was other people like designers shouldn't have the code,
Speaker 4: and there's the whole thing. And and now it's like
Speaker 4: design engineering and seeing being seen as a as a
Speaker 4: more serious discipline.
Speaker 1: Yeah, tangerine you said was tangerine.
Speaker 3: I think it is.
Speaker 1: I am who would choose a handle named after a
Speaker 1: fruit or vegetable. I don't understand that.
Speaker 3: I have no idea talk with never do anything like that.
Speaker 1: Right, Why what's it do you love? Broccoli? Is your
Speaker 1: favorite vegetable? Why broccolini?
Speaker 4: It is not my favorite vegetable, although many people think
Speaker 4: that and they like to send me photos of broccolini
Speaker 4: when they're having that for dinner, which is I should
Speaker 4: have made just a website out of people sending.
Speaker 3: Me broccolini picks.
Speaker 4: My favorite vegetals actually potatoes the best. Yeah. I don't
Speaker 4: know what JoJo's are, but I heard you mentioned them earlier.
Speaker 3: Chicken.
Speaker 1: You know, there's something that you eat three in the
Speaker 1: morning when you're stumbling home from the bar and you
Speaker 1: go to the gas station. They have fried chicken, and
Speaker 1: they have JoJo's, so they dip the wedges and chicken
Speaker 1: batter and frying.
Speaker 4: So I haven't really lived until i've I've stumbled, not.
Speaker 2: Enough stumbling at home after that.
Speaker 1: I don't think you're missing much. They are good at
Speaker 1: three o'clock in the morning when you're.
Speaker 4: You know, okay, I'll so Broccolini.
Speaker 1: You just chose this why because the domain was available
Speaker 1: broccolini dot net or no.
Speaker 3: When I was in Australia.
Speaker 4: I h this would have been about two thousand and five,
Speaker 4: two thousand and six. Broccolini. You won't believe this was
Speaker 4: not the famous vegetable that it is now. And I know,
Speaker 4: I know there's some people that lived their life without
Speaker 4: knowing about Broccolini. So I was flipping through a restaurant menu.
Speaker 4: I think it might have been like a Chinese takeout
Speaker 4: or something like that, and I'd had a few glasses
Speaker 4: of wine and was hanging out with a friend of
Speaker 4: mine and saw Broccolini on there, and I was just like, Oh,
Speaker 4: they've run out of vegetable names, so they're just trying
Speaker 4: to make it sound more fancy and put eenie on
Speaker 4: the end.
Speaker 1: So you thought it was like the tips of the
Speaker 1: broccoli or something.
Speaker 4: Yeah, I was like, yeah, they're just you know, like
Speaker 4: when they rename like areas in New York neighborhoods in
Speaker 4: New York to like make it sell more. I've sort
Speaker 4: of thought it was like that sort of thing. Anyway, Okay,
Speaker 4: I'm this is the whole story. You can cut this
Speaker 4: out if still I think I want to know?
Speaker 3: I mean, okay.
Speaker 4: So a few days later, I'm walking along with the
Speaker 4: street with my friends and he's like, hey, can I
Speaker 4: pop into this restaurant. My friend's working as a wait
Speaker 4: staff here, and I was like sure, And he's chatting
Speaker 4: to his friend, Kerry, her name was, And I stood
Speaker 4: there flipping through the menu and there's broccolini on the menu,
Speaker 4: of course, and so I just start giggling and I
Speaker 4: look up and they're looking at me, like what's wrong
Speaker 4: with you? And I'm like, there's Broccolini on the menu,
Speaker 4: and they're like yeah. And so it turns out Kerry
Speaker 4: is looking for a housemate. About a month later, put
Speaker 4: me in a phone as Broccolini Girl because she cann't
Speaker 4: didn't either didn't remember my name or didn't want to
Speaker 4: because she thought this was funnier.
Speaker 1: Yeah, my neighbors in my contacts as Laura next door.
Speaker 3: Yeah context, Yeah, it helps.
Speaker 4: Yeah. She she told all her friends that this girl
Speaker 4: called Broccolini was moving in and they would call me
Speaker 4: bros and broccols, and half of them didn't know that
Speaker 4: wasn't my actual name. So and so it's kind of
Speaker 4: a joke yeah, yeah, so when I had to make
Speaker 4: my Twitter handle.
Speaker 2: An insight and not to be too geek out on
Speaker 2: this whole thing, but broccolini is a recent invention, like
Speaker 2: this is a selectively bred hybrid of broccoli and guy
Speaker 2: Land nineties.
Speaker 3: Hence why it wasn't all that famous.
Speaker 1: So it's a new new thing.
Speaker 3: It was literally in the nineties, the new broccoli.
Speaker 2: Yeah, plenty of the Elder did not write about this one.
Speaker 2: He wrote about cauliflower.
Speaker 1: But not this one. Yeah, he wrote of a lot
Speaker 1: of wacky stuff. That guy was nuts. So I just
Speaker 1: want to talk about broccolini dot net. For a designer,
Speaker 1: this is really minimalist your website. I know it was.
Speaker 1: It's obviously intentional, but wow, I mean looks like it
Speaker 1: was printed on a typewriter and you know, with that
Speaker 1: font and just they're all no nonsense stuff, And I
Speaker 1: just wonder, like, what does that say about you as
Speaker 1: a designer.
Speaker 4: Oh my gosh, Now I'm going to be looking at
Speaker 4: my website in terror. I think I need to I
Speaker 4: definitely need to redesign it.
Speaker 1: I think it's awesome because websites should inform first, right,
Speaker 1: and I think, especially like if you're a designer. If
Speaker 1: you if you picked an elaborate design to go with
Speaker 1: for your website, well that's a statement. Also that's not
Speaker 1: good because you're pigeonholing yourself into that design. People will
Speaker 1: judge you by that. Well, that's not what I want
Speaker 1: in a design. And so I like the way that
Speaker 1: you did this stripped down because it's all just information.
Speaker 4: Yeah, I think I do like minimalism. One of the
Speaker 4: sort of sayings we have herb and I'm I think
Speaker 4: it's from Carl n zenovige hub is everything added dilutes
Speaker 4: everything else. And I definitely that definitely is something that
Speaker 4: influences the way I design or the feedback I give
Speaker 4: to my team. But I also there's a little tiny
Speaker 4: bit of color on there, and it's it's because so
Speaker 4: I am. I am known for wearing a lot of black.
Speaker 4: I mean, it's not just because I live in New
Speaker 4: York and it's just I just like black.
Speaker 3: I think it.
Speaker 1: Yeah, this is one of the rare occasions. And Richard
Speaker 1: will tell you that I'm not wearing a black T shirt.
Speaker 1: I'm wearing a gray T shirt. But my uniform is
Speaker 1: a black T shirt and black shirt.
Speaker 4: It's okay because gray is a shade of black, So
Speaker 4: in my book, that's that's permitted. Yeah, so I think
Speaker 4: I've been trying to I do like experimenting with splashes
Speaker 4: of color. So I've got some of those bright gradient colors.
Speaker 4: I love contrasts, even with myself. Well, no one's going
Speaker 4: to see the video, but I've got greenish nails right
Speaker 4: now because it's just a way to express.
Speaker 1: Yeah, it looks like it reminds me of like a
Speaker 1: fifty seven Chevy or milkshake machine, you know, like that
Speaker 1: ceramic kind of green.
Speaker 4: It was actually meant to be an homage to the
Speaker 4: contributions graph, but I was limited by what exact colors
Speaker 4: of green.
Speaker 3: The nail technician nice.
Speaker 2: Yeah, if you can take the contribution graphs, all the
Speaker 2: different greens that it generates to depending on a number
Speaker 2: of contributions in per block, you'd say, this is your palette,
Speaker 2: make each finger a different one of these.
Speaker 3: Yeah.
Speaker 1: Yeah, all right, Well we're overdue for a break, so
Speaker 1: we'll take a break. We'll come on back and we'll
Speaker 1: talk to Diana Mounter about what else she's thinking about
Speaker 1: these days. So stick around. We'll be Did you know
Speaker 1: you can lift and shift your dot net framework apps
Speaker 1: to virtual machines in the cloud. Use the elastic beanstock
Speaker 1: service to easily migrate to Amazon EC two with little
Speaker 1: or no changes. Find out more at aws dot Amazon
Speaker 1: dot com, slash Elasticbeanstock. And we're back at dot in Aros.
Speaker 1: I'm Carl Franklin, as my friend Richard Campbell. Hey, and
Speaker 1: we're talking to Diana Mounter and uh, we're talking about
Speaker 1: design and code and GitHub and all these great things.
Speaker 1: And by the way, if you don't want to hear
Speaker 1: these messages, consider becoming a five dollars a month patron.
Speaker 1: Go to Patreon at dot and irocks dot com to
Speaker 1: get an ad free feed. I don't want to let
Speaker 1: go of code as a material for no other reason.
Speaker 1: The heresy that not all problems can be solved with code.
Speaker 3: Do you want to salk about that more?
Speaker 2: But I think the implication, of course, is that not
Speaker 2: all problems are solved with code. I'd be interested in
Speaker 2: your design view there about when do we decide to
Speaker 2: code when working through a design?
Speaker 3: Oh my gosh. Yeah.
Speaker 4: I think it's a thing that you sort of inherently
Speaker 4: know as the more that you design. I think on
Speaker 4: the one end of the scale. So I guess when
Speaker 4: you start putting boxes and arrows and other shapes on
Speaker 4: a page, you're starting to limit what people are going
Speaker 4: to imagine from that design. And so I think that
Speaker 4: you've got to be really careful about am I at
Speaker 4: the stage where I want people to start imagining interacting
Speaker 4: with this, or am I still really trying to immerse
Speaker 4: in the space and think about what are their priorities.
Speaker 3: And the tasks and the flow.
Speaker 4: So I think I don't mean this to be a
Speaker 4: cop out, but it's really about when you're at the
Speaker 4: stage where you, as a designer are trying to get
Speaker 4: a feel for the interactions and the flow and whether
Speaker 4: this map that you've sort of planned out in your
Speaker 4: head or in a Figma file or whatever actually makes
Speaker 4: sense when you use it.
Speaker 3: And it's also because it's.
Speaker 4: You know, designing code and in design tools or sketching
Speaker 4: is both for you and also the people that you're
Speaker 4: trying to communicate it to. And the part of the
Speaker 4: job of a designer is to help people imagine what
Speaker 4: this end result might feel like. It's not just what
Speaker 4: it looks like, it's what it's going to feel like
Speaker 4: to use. And so I think that's when you want
Speaker 4: to move into into code, and you know, not every
Speaker 4: designer is really comfortable with that. You can create great
Speaker 4: prototypes using other tools. But for designers that can code,
Speaker 4: they know when to hop in to a text editor
Speaker 4: and start developing their work. And some of them that
Speaker 4: do this a lot, they might have presets set up,
Speaker 4: they might use particular.
Speaker 3: Tools that they're very familiar with.
Speaker 4: I getthub our design system was primer, and so if
Speaker 4: you're working at a company with a design sist, you
Speaker 4: might want to pull that in so that you can
Speaker 4: get closer to the production like quality result.
Speaker 2: Basically, sure, because adjust a position of design only knowing
Speaker 2: that the application is invariably interactive, Like you can go
Speaker 2: to Cody and not enough design and you have a mess.
Speaker 2: But if you think too statically, it's not how the
Speaker 2: code actually works. So there's some crossover there. That's the
Speaker 2: right point.
Speaker 4: Yeah, And I think that that makes me think about
Speaker 4: something that I see both developers and designers struggling with.
Speaker 3: Or I don't know.
Speaker 4: Actually, to be fair, it's not always the individual contributors,
Speaker 4: it's sometimes their bosses. Is the idea that it's okay
Speaker 4: to throw away code or throw away a design. I
Speaker 4: think experimentation is really really valuable. I think that design
Speaker 4: can de risk the end result, but because you can more,
Speaker 4: I think it's perceived that it's cheaper to throw away
Speaker 4: design than throw away something that's built.
Speaker 3: Yeah.
Speaker 1: I tend to agree.
Speaker 2: It's pretty normal for you to iterate on designs, but
Speaker 2: it's not that normal to iterate on code. It's like
Speaker 2: the moment you've checked it in, it's kind of permanent.
Speaker 1: No, I don't agree with that. I don't agree. I
Speaker 1: mean one of the reasons you use a system like
Speaker 1: GitHub is so that, oh, that didn't work. Let's go
Speaker 1: back to this, to this commit and start from there
Speaker 1: and keep it on the branch. Yeah. I want to
Speaker 1: talk about primer, but first I need to ask you
Speaker 1: this question. You're obviously a design expert, and you go
Speaker 1: into companies and you're talking about design and a meeting
Speaker 1: and you know, Bob from backups says, hey, I got
Speaker 1: it design that I did in you know, Figma or whatever.
Speaker 1: Let's use this and it sucks. How do you gently
Speaker 1: tell that person to go pound sand?
Speaker 4: So is Bob a designer or is he's like a
Speaker 4: product manager?
Speaker 1: It's like an it guy he fixes the printers, you know, Yeah,
Speaker 1: and he's got this idea for a design and he's
Speaker 1: trying to impress you or whatever.
Speaker 4: Okay, So first off, I think that this happens all
Speaker 4: the time with designers, and you have to learn how
Speaker 4: to respond to these moments.
Speaker 3: Yeah, And what.
Speaker 4: I would say, and I had to learn myself, is
Speaker 4: approach those situations with curiosity versus like rage and seeing
Speaker 4: you read I have to explain.
Speaker 1: You have to explain why it's not a good design, right.
Speaker 3: Well, not actually try and understand why they think it
Speaker 3: is a good design, Okay, Like.
Speaker 4: What problem are they thinking they are solving with this thing?
Speaker 4: And then because that helps you understand the intent and
Speaker 4: what their motivations were, and that puts you in a
Speaker 4: better position to then ask follow up questions that hopefully
Speaker 4: also get them to realize that think it through. Maybe
Speaker 4: this isn't the best results, So like why, so why.
Speaker 3: Did you go with this?
Speaker 1: What if it's just over the top, like a flaming
Speaker 1: logo or something, you know, just like something ridiculous marquee, Yeah,
Speaker 1: justly ridiculous that belongs in the nineties. I mean, yeah,
Speaker 1: that's that's a good effort.
Speaker 4: But I think you want to you want to do
Speaker 4: the yes and response. It depends is if this person
Speaker 4: has got a lot of clout in the in the room,
Speaker 4: who's the most important person in the room type situation,
Speaker 4: I think you can you can probably be a bit
Speaker 4: more direct.
Speaker 3: And then the other things that you can use to.
Speaker 4: Propose that that solution may not work is like, if
Speaker 4: you have a brand, Like even if you don't actually
Speaker 4: have a design system or a brand guide, you can say, hey,
Speaker 4: I don't feel like this is going to be cohesive
Speaker 4: with our design language.
Speaker 3: If we look at what exists.
Speaker 4: You can also I'm taken this like seriously, and now
Speaker 4: I'm wondering if you would just like let's have a
Speaker 4: laugh with this.
Speaker 2: No, No, you're clearly right, Diana, Like, yeah, there was
Speaker 2: a reason they presented that, And you've got to get
Speaker 2: to the core reason because right, probably their example isn't
Speaker 2: resonating particularly well.
Speaker 1: Yeah, but they may they may have a good reason
Speaker 1: for doing it. Yeah.
Speaker 4: Yeah, And you can use as a designer, you know
Speaker 4: you have the ammunition you have against this design is
Speaker 4: like what is written down as as the guidelines for
Speaker 4: your brand and for the product brand and the design system.
Speaker 4: If you have one, you have the user data, like
Speaker 4: what insights do you have either from metrics or from
Speaker 4: interview with users, so that you know, like you know,
Speaker 4: turning the conversation into what is right for the customer
Speaker 4: and not making it about your design versus design it
Speaker 4: really helps.
Speaker 1: Yeah, all right, let's talk about Primer. Tell at first,
Speaker 1: I've heard of it, so tell me what it is.
Speaker 4: It is a it's a design system. It's gitthrb's design system.
Speaker 4: It's what we use to design and build are UI.
Speaker 4: It includes everything from design tokens, a CSS framework, to
Speaker 4: view components which is the Rails components solution and React components,
Speaker 4: and things like octacons which is our icon system, and
Speaker 4: all of the you know, tooling and other bits and
Speaker 4: bobs that help run the whole system.
Speaker 1: And fonts too.
Speaker 4: I imagine we use system fonts for the most part,
Speaker 4: but actually, to be fair, yes, in our brand, our
Speaker 4: Primer brand system, we use Mona sands and Hubot sands,
Speaker 4: which is which are our variable fonts that are you
Speaker 4: designed with in collaboration with a font foundry i think,
Speaker 4: but customized and designed with in collaboration with GitHub designers,
Speaker 4: and so they're used on our marketing websites, homepage, feature pages,
Speaker 4: that type of thing.
Speaker 1: Cool design systems. I'm thinking of things like material right,
Speaker 1: So it's it's along those lines in terms of you
Speaker 1: know what the design.
Speaker 3: System is, Yes, for sure. Yeah, it's a.
Speaker 4: It contains literal code components that you can pull into
Speaker 4: your application, as well as guidelines on how to use
Speaker 4: those components, UY components in combination with each other.
Speaker 1: What do you think about BOOTS.
Speaker 4: I think that it's helped the community think about design
Speaker 4: systems and thinking more systematically about what we used to
Speaker 4: call star guides and or CSS frameworks. I think that
Speaker 4: it is. It was the most widely used I think
Speaker 4: UI framework for a very very long time. I'm not
Speaker 4: sure if it still is because I know there's things
Speaker 4: like Tailwind has become very popular.
Speaker 3: But yeah, I used to work with.
Speaker 4: Mdo who was one of the creators. He used to
Speaker 4: work at GitHub, and I think it's great that it exists.
Speaker 4: I haven't used it a ton because they I preferred
Speaker 4: a different technique for UI called often called functional CSS,
Speaker 4: which is sort of similar to Tailwind, although they're doing
Speaker 4: some other stuff now. So yeah, so I think that
Speaker 4: it's glad that it's exists and it's moved the industry forward,
Speaker 4: but I think it doesn't take out the need to
Speaker 4: understand CSS or front ends and javascripts.
Speaker 1: Yeah, no, I agree. What I liked about it and
Speaker 1: what I still like about it is the standardization of
Speaker 1: class names so that people can easily create their own
Speaker 1: themes and they obviously there's a big marketplace for them.
Speaker 1: Some are free and some are for sale. But just
Speaker 1: by you know, changing out your Bootstrap men's CSS file,
Speaker 1: you know, everything can just completely change. And I kind
Speaker 1: of liked that about it, And I wonder if you've
Speaker 1: used some of those ideas in putting Primer together or
Speaker 1: did you have anything to do with Primer. Was this
Speaker 1: something that you worked on?
Speaker 4: Yeah, yes, yeah, I liked the prim team about I
Speaker 4: think it. I started working on GitHub's CSS and Primer
Speaker 4: pretty much from when I started.
Speaker 1: Sorry I'm looking right at it was right in your
Speaker 1: bio and I missed out. I'm sorry.
Speaker 4: Yeah, so yeah, that's something I worked on for about
Speaker 4: I think it must have been about six years of
Speaker 4: my time at GitHub. It was just me and one
Speaker 4: other designer developer called John Rohan. Shout out to him,
Speaker 4: and so they had been developing primer before I joined.
Speaker 4: Marcado or Mdo as his username is on the internets, who,
Speaker 4: as we just discussed, was one of the founders of
Speaker 4: Bootstrap open sourced primer in twenty fifteen, about six months
Speaker 4: before I joined. And one of the reasons I joined
Speaker 4: GitHub actually because I was already working in design systems
Speaker 4: and I was really excited to see a company opening
Speaker 4: like open sourcing their company design system because it helped
Speaker 4: me learn what that meant when you're actually working on
Speaker 4: a product. Because things like Bootstrap, and there's other things
Speaker 4: like suit CSS and based CSS and stuff that were
Speaker 4: out the time, were agnostic to the product that they
Speaker 4: were used for. And while that was that's really helpful.
Speaker 4: It's a good way to think about working on a
Speaker 4: product and its design system because it helps you come
Speaker 4: up with a more robust solution. If you're thinking, what
Speaker 4: if this was an open source system and anyone could
Speaker 4: use it, how would I make this part How this
Speaker 4: make this pattern really reusable and intuitive? But you still,
Speaker 4: when you're working on a particular product like GitHub, you
Speaker 4: still have to, you know, make the system a little
Speaker 4: biased to that to actually support what the product needs.
Speaker 4: So so yeah, I am so I'm sure that mdo
Speaker 4: when he joined Influence Primer. But then it, yeah, was
Speaker 4: and I did work with him sometimes.
Speaker 3: I also we also had.
Speaker 4: I was a little bit bullish, I think when I
Speaker 4: was younger and didn't sort of go, oh my gosh,
Speaker 4: it's mark Otto, I should like just agree with everything.
Speaker 4: I was like, no, I think this way is better.
Speaker 4: And so we would have some like heated debates, but
Speaker 4: actually I think we both ended up really valuing that
Speaker 4: and I think you know that leads you to a
Speaker 4: better result if you have to sort of, you know,
Speaker 4: defend and explain why you think a particular approach was
Speaker 4: the right approach. And I, you know, I wasn't always
Speaker 4: right and he wasn't always right, but it was great
Speaker 4: to Yeah, it was a great experience.
Speaker 1: That's a great spirit of learning though, you know, when
Speaker 1: you feel comfortable enough to you know, not be intimidated
Speaker 1: to the point where you can't express your ideas, that's
Speaker 1: a great working relationship that, you know, and I'm sure
Speaker 1: her respects you a lot for that.
Speaker 3: I hope.
Speaker 2: So this progression for GitHub's front end and so forth
Speaker 2: to react, is that just a componentization made sense? Like
Speaker 2: why do you land there when there's all these other
Speaker 2: web framework approaches.
Speaker 4: Yeah, I mean it was quite a journey to actually
Speaker 4: land there, to be honest.
Speaker 2: I like, is it worth it? That's a lot of work.
Speaker 4: I mean, I don't think the stories ended there yet,
Speaker 4: so I can't tell you, but I can talk to
Speaker 4: a bit to the transition and how we got there,
Speaker 4: because I do think that is an interesting learning experience.
Speaker 4: So when I joined GETTHRB, I had just left Etsy
Speaker 4: where they had just started to work with React, and
Speaker 4: I things like CSS and JS frameworks, which I also
Speaker 4: know the community got pretty divided over. Things like styled
Speaker 4: components and emotion were coming out. Another popular part of
Speaker 4: that sort of systematic approach this library called style System,
Speaker 4: which was actually created by my husband before we were married.
Speaker 4: We just both apparently liked design systems anyway. That gave
Speaker 4: you kind of system props or what we now started
Speaker 4: to call variables or like tokens that you could bring
Speaker 4: into your components and styles, and so instead of identifying
Speaker 4: things a bit like you do with SAS, so you've
Speaker 4: got a SaaS variable. And now we've finally got CSS
Speaker 4: variables and they're supported everywhere. So a lot of people
Speaker 4: move being back to that. But that to me was
Speaker 4: when things clicked. I was like, Okay, I can see
Speaker 4: how we can build these components and do it systematically
Speaker 4: because we can share the system styles through something like
Speaker 4: style System. And so the thing that I particularly got
Speaker 4: excited about with React components is thinking of everything as
Speaker 4: a component.
Speaker 3: Which is.
Speaker 4: There's a whole blog post I think they wrote on
Speaker 4: thinking and React, but thinking in components and thinking about
Speaker 4: pulling this block up and being able to you know,
Speaker 4: place it somewhere else and have all the presentational code
Speaker 4: in that one component. Something about that felt really really
Speaker 4: good as opposed to, like, you know, working with CSS
Speaker 4: a chain. If you end up you can only you
Speaker 4: could use techniques like them if you've fhart of that block,
Speaker 4: element modifier or utilities, which where you would actually use
Speaker 4: important for good reasons to make those classes immutable. That
Speaker 4: wouldn't That would give you sort of a sort of
Speaker 4: some scope, but not really because it's still CSS. So
Speaker 4: what you saw with these with components is being able
Speaker 4: to encapsulate all the styles and all the stuff that
Speaker 4: is controlling the presentation and not have it leak over
Speaker 4: everything else. Right, And so that's why I was when
Speaker 4: I went to get heub, I was like, we need components.
Speaker 4: Actually didn't really care what they were builtn I was
Speaker 4: just like, we need components.
Speaker 2: So and it's just that level of encapsulation that this
Speaker 2: one style doesn't leak across all of these things that
Speaker 2: it's sitting in a block and a wrapper or sometime
Speaker 2: that says this is related to menuing or this is
Speaker 2: related to images.
Speaker 4: Yeah, yeah, absolutely. Do you want me to talk a
Speaker 4: little bit about how things evolved to gethub.
Speaker 2: Yeah, No, that's exactly what I'm fascinated about. See how
Speaker 2: you get into trouble, right, You started with CSS and
Speaker 2: you're just trying to get those wrappers around it, so
Speaker 2: you get to view components and then that kind of
Speaker 2: leads to react.
Speaker 4: It was actually not quite that linear, so so yes,
Speaker 4: CSS and using techniques like immutable utility class CSS, class
Speaker 4: selectors and and then using frameworks like them and SaaS
Speaker 4: variables and stuff like that, that helped.
Speaker 3: And that was a great that it was a.
Speaker 4: Really great way to introduce a systematic approach because we
Speaker 4: could update the Y without touching tons of markup and
Speaker 4: sort of blowing everything up. But we started to you know,
Speaker 4: get HERB grew from you know, being a place to
Speaker 4: sort of host and collaborate on code, and now it's
Speaker 4: got you know, we've got actions and security features and
Speaker 4: all those co pilots.
Speaker 2: Like.
Speaker 4: It was starting to grow while I was there and
Speaker 4: becoming difficult to really maintain, and we just couldn't get
Speaker 4: far enough with CSS alone. So we worked with some
Speaker 4: of the what was called the Web Systems team to
Speaker 4: explore components solutions, and so we definitely explored things like
Speaker 4: web components and they may have explored some other frameworks.
Speaker 4: React was an obvious one to explore because it was
Speaker 4: significantly growing in popularity. A lot of companies had already
Speaker 4: moved to community using that. So it's like a bit
Speaker 4: like you know, choosing an open source library, like does
Speaker 4: it have legs? Like are the community using it? Is
Speaker 4: it going to keep growing? Is it going to be
Speaker 4: there in five minutes?
Speaker 2: Well, and again putting on your leadership had it's like
Speaker 2: can I hier devs that know how.
Speaker 3: To use this exactly? Yeah?
Speaker 2: Do I have the resources that are needed?
Speaker 3: Yeah?
Speaker 4: So we started to sort of do these experiments and
Speaker 4: then at some point I was just like I'm just
Speaker 4: going to put up like a prototype of what this
Speaker 4: could look like in React, and like, how I'm thinking
Speaker 4: about this and I'm not particularly good at JavaScript, but
Speaker 4: you know, no enough to.
Speaker 2: We'll work in JavaScript and we all cause problems for others.
Speaker 1: I do as much JavaScript as absolutely necessary, no more.
Speaker 4: Yeah, well, the you know it's it was enough to
Speaker 4: be able to say this is what a component library
Speaker 4: could look like with using React. And I did a
Speaker 4: couple a couple of different techniques for how we could
Speaker 4: use it with CSS, so one with like a j
Speaker 4: CSS and JS solution and one of pulling in the
Speaker 4: class names from CSS. And then from there that started
Speaker 4: to get some legs and then we started building. We
Speaker 4: hired a full time engineer on the design systems team
Speaker 4: and they started to develop out the library, and more
Speaker 4: and more teams were starting to experiment with products that
Speaker 4: they were building in Reacting and as kind of experiments.
Speaker 4: And then during that time an engineer at get Hub
Speaker 4: called Joel Hawksgley had been working a lot in the
Speaker 4: front end and seeing what we were exploring with Reacting,
Speaker 4: came up with few Components, which is a Rails solution
Speaker 4: for components because as you might know, like was built
Speaker 4: in Ruby and rails, and so he ended up joining
Speaker 4: the team, which was which was great because even though
Speaker 4: we weren't sure what the future of get Her front
Speaker 4: end was, what we kind of knew is that we
Speaker 4: really needed to be building components instead of views, and
Speaker 4: so regardless of what we ended up using, view, components
Speaker 4: would at least be teaching engineers to thinking components. And
Speaker 4: so later on we ended up having a team ship
Speaker 4: a production app in React using Primer React components, and
Speaker 4: that was I think end of twenty twenty and that
Speaker 4: was or beginning of twenty twenty one, and that was
Speaker 4: the projects feature, and so that was exciting because it
Speaker 4: was getting tested in production like this is like not
Speaker 4: a hobby pro check, this is like for real now.
Speaker 4: And over time, the engineering orgue decided to thankfully move forward.
Speaker 4: I'm saying thankfully move forwards with React because for me
Speaker 4: it was more that, yes, this is well supported by
Speaker 4: the commune, but also it was really difficult trying to
Speaker 4: maintain like two systems, and so now we're now few components,
Speaker 4: is sort of going into sort of Katilo, and we've
Speaker 4: still got a lot of you I built with it,
Speaker 4: and it served a great stepping stone in moving to components,
Speaker 4: but now we're we're the future we believe is using
Speaker 4: React and so that's what teams are moving for and
Speaker 4: that's where we've invested our time and things like accessibility
Speaker 4: and stuff like that.
Speaker 2: Do you know it makes a lot of sense?
Speaker 1: Yeah, So do you want to talk a little bit
Speaker 1: about I know, Richard, we have always end our shows
Speaker 1: talking about AI, don't we We hate it because all
Speaker 1: of our shows lately have been about AI A llo overwhelming.
Speaker 1: But for coding, you know, it kind of makes a
Speaker 1: lot of sense. And what do you think the design
Speaker 1: story is? We're with Jenny I going forward. You are
Speaker 1: you bullish on that?
Speaker 3: Yeah?
Speaker 4: I'm I mean, look, I've been working at GitHub as
Speaker 4: this has evolved for developers, and I've seen you know,
Speaker 4: numerous design tools popping up and it's I mix. Honestly,
Speaker 4: I'm excited to work with it because, if you think
Speaker 4: about it from a designer's point of view, we've got
Speaker 4: something new to design for which hasn't happened at this
Speaker 4: scale for a while. Like the iPhone was like sorry
Speaker 4: if you're sort of Windows are Android users, but like
Speaker 4: that was like a really big moment when we're like oh,
Speaker 4: you know, like mobile first design and you know, touch interaction,
Speaker 4: touch screens and all those sorts of like haptics and things.
Speaker 4: That was really exciting. So this is exciting from the
Speaker 4: point of view of like there's new stuff happening and
Speaker 4: problems that we don't know how to solve yet. So
Speaker 4: I think it's funny though, because early days of jen
Speaker 4: Ai and sort of the chat gbts and chat Ui
Speaker 4: sort of coming out, there was definitely a school of
Speaker 4: thought that didn't feel that we really needed designers for
Speaker 4: this work, that this.
Speaker 3: Is we just need more engineers.
Speaker 4: And I think what has happened over time is and
Speaker 4: certainly very much lately if you talk to anyone trying
Speaker 4: to recruit designers, is we've realized that AI and Genei
Speaker 4: specifically is really creating a mass evolution in user interaction design.
Speaker 4: It's not taking UI away, and that although the sort
Speaker 4: of chat interface is very much dominating a lot of
Speaker 4: that those interactions, that's not going to probably be the
Speaker 4: only type of UI that you need when you d
Speaker 4: AI into to the mix. And we're certainly starting to
Speaker 4: see that with things like agents, right, Yes, And so
Speaker 4: I think now design is really important. It's an incredibly
Speaker 4: important part of the stack, and it's going to be
Speaker 4: about designing for intent and figuring out how to carry
Speaker 4: that intent from those direct interactions in the UI, threw
Speaker 4: into how we train models and then the end result.
Speaker 3: So I think it's really interesting.
Speaker 1: I just want to close the show by talking a
Speaker 1: little bit about my experiences with using chat GPT to
Speaker 1: do CSS. And at first, you know, last year even
Speaker 1: it wasn't good. It wasn't good at figuring stuff out,
Speaker 1: and it's gotten better recently. I don't know if you've
Speaker 1: noticed this, but it's gotten better at you know, you
Speaker 1: wouldn't say, you know, make me a design, but what
Speaker 1: I would say is, hey, why isn't this working? Why
Speaker 1: is there like a space above this element that I
Speaker 1: can't figure out? Right? And then you give it? Could
Speaker 1: I give it the CSS? I give it the markup,
Speaker 1: and I actually take a snapshot of you know, the
Speaker 1: browser tools, the source so it can actually see, for
Speaker 1: lack of a better word, what's going on. And it's
Speaker 1: been really good at solving CSS problems lately for me.
Speaker 1: I don't know what's your experiences.
Speaker 4: Yeah, I mean I've been tending to use co pilot
Speaker 4: for obvious reasons. I think I think I in my
Speaker 4: in my head, I think I'll use chat GPT if
Speaker 4: I want more like general knowledge or writing tasks or
Speaker 4: I've definitely used it for working on talks or checking
Speaker 4: fact checking, but then going and checking the sources.
Speaker 1: Fact checking fact checker.
Speaker 4: Yeah exactly, but it can help you sometimes get in
Speaker 4: the right direction. So yeah, I've been also using Copilot
Speaker 4: for that type of thing, and I think, yeah, things
Speaker 4: are probably getting better because there's a lot of also
Speaker 4: a lot of tools that are coming out where it's
Speaker 4: working with a pre defined framework and so it's able
Speaker 4: to give much better responses if you are just using
Speaker 4: like a reacts framework or something.
Speaker 1: Like that, so you get hub. Copilot uses open AI,
Speaker 1: so it's the and it can also use Claude.
Speaker 3: I think right too, Yeah, yeah you can.
Speaker 1: Do you prefer Claude for coding?
Speaker 3: I find that that is it depends.
Speaker 4: I mean there's like Sonnet for is like pretty that's
Speaker 4: the new hotness, right, Yeah, it's actually amazing like how
Speaker 4: these models have just been coming out faster and faster,
Speaker 4: Like the gaps between when their releases is.
Speaker 1: Getting the time.
Speaker 4: Yeah, probably, but yeah, I think it's and then you
Speaker 4: can you can use there's this I don't know if
Speaker 4: you've used GI HERB models, but you can sort of
Speaker 4: compare like models against each other so you can figure
Speaker 4: out like which is the best one one to use.
Speaker 4: I think that's something that's getting really interesting, is like
Speaker 4: how much do we guide the user on which is
Speaker 4: the right model to use versus pick it for them?
Speaker 3: So yeah, it's an interesting Well you.
Speaker 1: Can ask gpt at the best model to use it.
Speaker 3: I wonder what it will say.
Speaker 1: All right, well, we're just about out of time. Is
Speaker 1: there anything else last minute that you want to mention
Speaker 1: before we wrap it up?
Speaker 4: Yeah, I'm in between jobs, nest, so I don't have
Speaker 4: like a last minute. Let me think for a.
Speaker 1: Second's a musician? I see a telecaster and a rolling
Speaker 1: V drum set behind you. Who's the musician?
Speaker 4: I am the musician, so that's my I'm more of
Speaker 4: a drama than a guitarist. I've had that kit for
Speaker 4: probably about twelve years, so maybe I should upgrade it.
Speaker 4: But it's Yeah, it's a rolling with Meshad, so it's
Speaker 4: pretty nice. It makes me feel like a better drama
Speaker 4: than I can't.
Speaker 1: The first K was a roll of the drum kit
Speaker 1: with I really I loved it.
Speaker 4: Yeah, I had like an acoustic kit, but I can't
Speaker 4: have an acoustic kit.
Speaker 1: Yeah, yeah, and I don't you're in the way of
Speaker 1: the Telly. But I see that it's a Teley headstock.
Speaker 1: Oh that is cool looking.
Speaker 4: It is a it's a Japanese remake and I think
Speaker 4: it's a nineteen seventy nine telecaster.
Speaker 3: It's got these beautiful flowers on it. Yeah.
Speaker 1: And it is that your husband that plays that or
Speaker 1: do you play that too?
Speaker 4: I play that too, but not very well yet. I've
Speaker 4: I've dabbled in playing a guitar here and there. And
Speaker 4: that was my midlife crisis by maybe not quite a
Speaker 4: midlife yeah, but it was just like pre midlife crisis.
Speaker 1: You're welcome to have a crisis at any age.
Speaker 3: But it's it's nice.
Speaker 4: It lets me, you know, doodle rounds and sort of
Speaker 4: sing and play a bit.
Speaker 1: So yeah, great, all right, well, wow, what a great
Speaker 1: talk this has been. Thank you very much, Broccolini me
Speaker 1: aka Diana Mounter, thanks for all this, and we'll talk
Speaker 1: to you next time on dot net rocks.
Speaker 5: Dot net Rocks is brought to you by Franklin's Net
Speaker 5: and produced by Pop Studios, a full service audio, video
Speaker 5: and post production facility located physically in New London, Connecticut,
Speaker 5: and of course in the cloud online at pwop dot com.
Speaker 5: Visit our website at d O T N E T
Speaker 5: R O c k S dot com for RSS feeds, downloads,
Speaker 5: mobile apps, comments, and access to the full archives going
Speaker 5: back to show number one, recorded in September two thousand
Speaker 5: and two. And make sure you check out our sponsors.
Speaker 5: They keep us in business. Now go write some code.
Speaker 5: See you next time. You got j middle Vans and