Speaker 1: 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.
Speaker 2: New guy, I'm the new guy.
Speaker 1: 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.
Speaker 2: 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.
Speaker 1: 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.
Speaker 2: All right, man, what do you got?
Speaker 1: 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.
Speaker 2: Terms of tropics of the approach to exactly use it
through cursor or you know, whatever tool you want.
Speaker 1: 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?
Speaker 2: 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.
Speaker 1: Wow.
Speaker 2: Of those appsol onely one is in use today. That's
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
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.
Speaker 1: Well, well, Handlen's raisor applies, doesn't it?
Speaker 2: Yeah, do not? Well, they hold you not attribute to me.
I also that what you can be explained by incommondance
is very fair.
Speaker 1: Yeah, so it's not really evil. They just don't know
any better.
Speaker 2: 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.
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.
I don't know why I'm.
Speaker 2: 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.
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.
And she's a little tricky to walk so far, but
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,
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.
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,
so I'm I'll go with that. It's you chicken fried
potato wedge.
Speaker 1: You see.
Speaker 2: 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.
Speaker 1: Rod.
Speaker 2: 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.
Speaker 1: 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?
Speaker 2: 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.
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,
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.
Speaker 1: 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.
Speaker 2: 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.
Speaker 1: Sows for computational things obviously, were there any languages other
than forour trend? I mean that's.
Speaker 2: 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.
Speaker 1: Very cool, Richard, I love these little mini geek outs.
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
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.
Speaker 1: 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.
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
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
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
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.
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,
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.
Speaker 3: Yeah.
Speaker 4: 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.
Speaker 2: 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.
Speaker 4: Yeah, that's like incredibly surprising to me, and I think
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
front end, because I felt like design tools couldn't cut it.
They can't replicate what the experience would be.
Speaker 1: 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?
Speaker 3: Yeah? I think so. I think, like I loved Figma
as a tool, like.
Speaker 4: 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.
Speaker 3: Everyone's websites on these chription a small screen.
Speaker 4: 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.
Speaker 1: 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.
Speaker 3: Yeah, I yes.
Speaker 4: 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.
Speaker 3: How you style things is really helpful.
Speaker 4: 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.
Speaker 1: What drew you into GitHub and get and code? Is
a designer and all that stuff? What got you there?
Speaker 4: 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.
Speaker 3: And then I really loved version control.
Speaker 4: I mean, as a designer, you end up with lots
of like, you know, homepage design, underscore, final hyphen done,
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
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.
Speaker 2: And front end site still up. All included in the
show notes, So.
Speaker 3: There you go.
Speaker 4: 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.
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
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.
Speaker 1: So yeah, So you consider yourself sort of a designer
slash engineer, right.
Speaker 3: I would.
Speaker 4: 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.
Speaker 1: 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.
Speaker 4: 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.
Speaker 2: It.
Speaker 4: 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.
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
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
favorite vegetable? Why broccolini?
Speaker 4: 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.
Speaker 3: Me broccolini picks.
Speaker 4: My favorite vegetals actually potatoes the best. Yeah. I don't
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
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.
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
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
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,
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.
Speaker 1: So you thought it was like the tips of the
broccoli or something.
Speaker 4: 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?
Speaker 3: I mean, okay.
Speaker 4: 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.
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
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.
Speaker 2: 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.
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.
He wrote about cauliflower.
Speaker 1: 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.
Speaker 4: 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.
Speaker 1: 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.
Speaker 4: 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.
Speaker 3: I think it.
Speaker 1: 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.
Speaker 4: 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.
Speaker 1: Yeah, it looks like it reminds me of like a
fifty seven Chevy or milkshake machine, you know, like that
ceramic kind of green.
Speaker 4: It was actually meant to be an homage to the
contributions graph, but I was limited by what exact colors
of green.
Speaker 3: The nail technician nice.
Speaker 2: 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.
Speaker 3: Yeah.
Speaker 1: 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.
Speaker 3: Do you want to salk about that more?
Speaker 2: 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?
Speaker 3: Oh my gosh. Yeah.
Speaker 4: 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.
Speaker 3: And the tasks and the flow.
Speaker 4: 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.
Speaker 3: And it's also because it's.
Speaker 4: 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.
Speaker 3: Tools that they're very familiar with.
Speaker 4: 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.
Speaker 2: 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.
Speaker 4: Yeah, And I think that that makes me think about
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,
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.
Speaker 3: Yeah.
Speaker 1: I tend to agree.
Speaker 2: 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.
Speaker 1: 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?
Speaker 4: So is Bob a designer or is he's like a
product manager?
Speaker 1: 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.
Speaker 4: 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.
Speaker 3: Yeah, And what.
Speaker 4: 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.
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
is a good design, Okay, Like.
Speaker 4: 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.
Speaker 3: Did you go with this?
Speaker 1: 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.
Speaker 4: 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.
Speaker 3: And then the other things that you can use to.
Speaker 4: 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.
Speaker 3: If we look at what exists.
Speaker 4: 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.
Speaker 2: 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.
Speaker 1: Yeah, but they may they may have a good reason
for doing it. Yeah.
Speaker 4: 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.
Speaker 1: Yeah, all right, let's talk about Primer. Tell at first,
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.
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.
Speaker 1: And fonts too.
Speaker 4: 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.
Speaker 1: 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.
Speaker 3: System is, Yes, for sure. Yeah, it's a.
Speaker 4: 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.
Speaker 1: What do you think about BOOTS.
Speaker 4: 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.
Speaker 3: But yeah, I used to work with.
Speaker 4: 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.
Speaker 1: 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?
Speaker 4: 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.
Speaker 1: Sorry I'm looking right at it was right in your
bio and I missed out. I'm sorry.
Speaker 4: 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.
Speaker 3: I also we also had.
Speaker 4: 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.
Speaker 1: 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.
Speaker 3: I hope.
Speaker 2: 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.
Speaker 4: Yeah, I mean it was quite a journey to actually
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,
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.
Speaker 3: Which is.
Speaker 4: 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.
Speaker 2: 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.
Speaker 4: Yeah, yeah, absolutely. Do you want me to talk a
little bit about how things evolved to gethub.
Speaker 2: 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.
Speaker 4: 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.
Speaker 3: And that was a great that it was a.
Speaker 4: 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.
Speaker 2: Like.
Speaker 4: 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?
Speaker 2: Well, and again putting on your leadership had it's like
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
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.
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
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.
Speaker 2: Do you know it makes a lot of sense?
Speaker 1: 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?
Speaker 3: Yeah?
Speaker 4: 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.
Speaker 3: Is we just need more engineers.
Speaker 4: 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.
Speaker 3: So I think it's really interesting.
Speaker 1: 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.
Speaker 4: 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.
Speaker 1: Fact checking fact checker.
Speaker 4: 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.
Speaker 1: Like that, so you get hub. Copilot uses open AI,
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
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.
Speaker 1: Getting the time.
Speaker 4: 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?
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
there anything else last minute that you want to mention
before we wrap it up?
Speaker 4: Yeah, I'm in between jobs, nest, so I don't have
like a last minute. Let me think for a.
Speaker 1: Second's a musician? I see a telecaster and a rolling
V drum set behind you. Who's the musician?
Speaker 4: 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.
Speaker 1: The first K was a roll of the drum kit
with I really I loved it.
Speaker 4: Yeah, I had like an acoustic kit, but I can't
have an acoustic kit.
Speaker 1: 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.
Speaker 4: It is a it's a Japanese remake and I think
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
do you play that too?
Speaker 4: 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.
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
sing and play a bit.
Speaker 1: 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.
Speaker 5: 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