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