#137: Design concepts and tips for developers Transcript

00:00 Design has become a critical element in software.

00:02 Back in the 90s, it was fine to produce and sell battleship gray apps that worked but did not do much to delight.

00:09 Today, design is table stakes, and knowing how to design applications yourself or work with designers is a key skill.

00:16 This episode, you'll meet James Stone, who straddles that gap between developers and designers. He's both.

00:22 He has a bunch of tips for improving your design skills as well as working with designers.

00:27 This is Talk Python to Me, episode 137, recorded October 30th, 2017.

00:32 Welcome to Talk Python to Me, a weekly podcast on Python, the language, the libraries, the ecosystem, and the personalities.

00:52 This is your host, Michael Kennedy. Follow me on Twitter, where I'm @mkennedy.

00:57 Keep up with the show and listen to past episodes at talkpython.fm, and follow the show on Twitter via at Talk Python.

01:03 Talk Python to Me is partially supported by our training courses.

01:06 Do you want to learn Python but you can't bear to subscribe to yet another service?

01:11 At Talk Python Training, we hate subscriptions too.

01:14 That's why our course bundle gives you full access to the entire library of courses for one fair price.

01:20 That's right.

01:21 With the course bundle, you save 70% off the full price of our courses, and you own them all forever.

01:27 That includes courses published at the time of the purchase, as well as courses released within about a year of the bundle.

01:33 So stop subscribing and start learning at talkpython.fm/everything.

01:40 Hey, James.

01:40 Welcome to Talk Python.

01:42 Hey, Michael.

01:43 Thanks for having me.

01:43 Yeah, it's great to have you here.

01:45 I'm super excited to talk about design, web design, and general application design.

01:50 Because this is originally something I found super challenging and daunting for me.

01:54 And then once I really learned it properly, I felt like, wow, I have this whole wide world that's been unlocked.

02:00 And now I have this power that a lot of people are afraid of, which I think makes it even better, the stuff you can do.

02:05 So hopefully we can share that with everyone and a lot of your tips from your experience.

02:09 Nice.

02:09 Yeah, absolutely.

02:10 So before we get into those topics, though, let's start with your story.

02:14 How did you get into programming in Python?

02:15 I have a funny story.

02:16 I'll talk about really quickly how I learned to program.

02:19 I'm the product of a clinical microbiologist and an RV salesman.

02:24 And my mom, the scientist, was taking me to laboratories, had me looking through microscopes.

02:29 And she bought me an Atari 600XL back in the 80s and taught me to program in BASIC.

02:35 And I have no idea why she did this.

02:37 And she never programmed again ever since then.

02:39 But it kind of turned into a career.

02:43 And so I always had a fascination with programming and computers.

02:46 It was kind of a hobby.

02:48 I got into hacking computers, got kind of kicked out of high school, or you might say like in air quotes, like asked nicely to leave.

02:56 They said, you know, you just can't stay here kind of thing.

02:59 Yeah.

03:00 Well, OK.

03:01 What was the reason for that?

03:02 It was maybe an ends to a means.

03:04 But I lived on a small island in Washington.

03:06 And this is at the beginning of the Internet.

03:09 So it was long distance to Seattle to connect to bulletin boards, which is what I was doing when I was younger.

03:14 So there was a library system there.

03:17 So I started hacking their system.

03:18 I figured out a way to kind of break out into Telnet and start accessing interesting shell servers over in Seattle, kind of circumventing the long distance thing.

03:26 I basically kept doing the same thing in high school and had kind of a knack for finding maybe exploits or ways to kind of break software, use it in ways it's not supposed to.

03:36 I think at the end, they had me on my own computer that was disconnected from the network.

03:41 So I kind of roll this cart into the library with my programming books.

03:46 And I would be like programming out in the middle of the library, if you can imagine.

03:49 And then, of course, we got caught again, my friends and I.

03:52 And so they're like, this is enough.

03:54 You're out of here.

03:55 And so I went to college through a thing called Running Start Program.

03:58 That's really interesting.

04:00 You know, I feel like a lot of times structured education misses opportunities to take people that are super creative and find like, you know, these rules, they don't actually have to exist, like whatever.

04:11 And like turn that into they probably could have like redirected your energy into something like super powerful.

04:17 But instead, they just said, we're going to unplug you.

04:20 Yeah.

04:20 Yeah.

04:21 I think I'm kind of a product of of that system, not really having a good a good avenue for those interests or pursuits.

04:29 So they were scared.

04:31 Yeah, sure.

04:32 Of course.

04:32 And it was all bizarre.

04:33 Nobody knew really what to do with the Internet anyway.

04:35 And that idea of like the way you got on the Internet was to find like something you tried to access over one of these dial up things that then failed and dropped you to a talent shell.

04:45 That's I haven't heard that from any other people, but I've experienced this as well.

04:48 It's interesting.

04:49 Awesome.

04:50 Okay.

04:50 So that was high school.

04:52 And you were going to start there in programming.

04:54 Yeah.

04:54 So I had kind of a start in programming.

04:56 And, you know, in high school, they had like a Pascal class.

04:58 I was super fired up about that.

04:59 I was doing some C and some things.

05:01 But but I wouldn't call myself like a professional programmer.

05:05 I certainly had a lot of interest.

05:06 And what happened is a friend of mine helped me get a job in the 1990s at a startup where I learned to kind of become like a professional programmer on the job.

05:15 And so basically they threw at me the Java 1.2 or Java 2 Bible, which was pretty thick in those days.

05:21 And they said, get to it.

05:22 And I think it was a few weeks later, I was writing production code and in charge of data classes.

05:27 So I started mostly doing back end programming and Java back in the 90s.

05:31 Yeah.

05:32 Nice.

05:32 And that was the heyday of Java.

05:33 Sun was super big, powerful corporation.

05:36 Java was a big revolution.

05:38 Right.

05:38 It was like so much better than C at the time, for example.

05:41 Things like this.

05:42 Yeah.

05:42 Yeah.

05:43 So much more portable.

05:44 Byte code was going to be the future of everything.

05:46 You just wrote it once and it ran everywhere.

05:48 It was amazing.

05:49 Yeah.

05:49 It's so funny to think back about those those days.

05:52 You know, fast forward.

05:53 I've always been involved with programming computers.

05:55 I went back to school because, you know, I kind of dropped out of college.

05:59 Eventually went back to college.

06:00 I actually studied art and then found a way to kind of combine computer science and art after kind of having a short career.

06:08 As a professional programmer.

06:10 And so now coming from it from a little bit different angle, the lead into Python is always been interested in Python.

06:19 And recently my wife started doing astrophysics work and she did a master's and now she's working on astronomy, PhD.

06:27 And so she taught herself to code in Python, you know, for scientific purposes in about a month with some books.

06:34 And so it's very interesting for me because she never did really any programming at all.

06:38 And so now I guess maybe because I have some affinity towards Python, I try to focus my projects into that.

06:44 So when I have to do an API or something, Flask is my tool at hand.

06:48 When I have to crunch some numbers or things, I find myself reaching for Python in those times.

06:53 That's a really interesting story.

06:55 Python has taken over astrophysics.

06:56 I think so.

06:57 I mean, I'm not that far in it.

07:00 But from my observation, it's either that or the old school people.

07:05 They're like, no, it's Fortran.

07:06 Pretty hardcore.

07:07 Yeah.

07:07 That's right.

07:08 That's definitely a giant chasm between those two languages in terms of time and space.

07:15 But yeah, like a lot of the APIs for controlling a lot of the major new telescopes that are going up are done in, you know, basically the APIs for them are Python.

07:25 And a lot of the machine learning stuff to discover a lot of the stuff in the visual stuff is Python.

07:31 So yeah, it's really interesting to see that she taught herself that to get going there.

07:34 Cool.

07:34 That gives us a lot of what you've been, you know, what got you to where you are today.

07:39 But now what do you do day to day?

07:41 What I do day to day now, I've got a little bit of a split life.

07:44 But for most of what I do, I work as an independent design systems engineering consultant.

07:48 And so some of the things I'm working on there, I write daily emails to kind of a secret list that I have, record videos and tutorials.

07:57 Sometimes I'm researching new tools and processes.

08:00 Sometimes I'm giving talks and webinars.

08:03 And so some of those, again, might be to this kind of secret inner circle list.

08:07 I just gave a talk recently here in Turku, where I'm at in Finland.

08:11 And I work a lot with design and development teams.

08:15 And often it might even just be one designer or two designers in development teams, helping them to work on their web projects.

08:22 On the other side of what I do, I teach an assistant teaching professor at Penn State.

08:28 And I teach an online course, which I'll put in quotes, but creative code is what we focus on.

08:32 And it's teaching artists and designers how to program in processing, which is a simplified API for Java.

08:40 Okay, cool.

08:41 So the creative code part is basically simplified coding for creative types.

08:47 Yes.

08:47 So if you've ever programmed in Java, you might have had to deal with its very heavy API.

08:52 And so you end up with all this boilerplate to do very simple things.

08:55 Not simple things, but do like, you know, 3D OpenGL animation and having things render quickly, like a kind of a game style buffer.

09:04 And so processing does this all for free.

09:05 And you just use very simple calls like rect or ellipse.

09:09 And then you can do those in two dimensions or three dimensions very easily.

09:12 That's really cool.

09:13 So the first thing that I want to talk to you about as our proper topic is this concept that I opened with, which is web design as a superpower.

09:22 Because I really honestly don't know what the breakdown of my audience is and how many folks out there say, yeah, I feel like totally comfortable as designing the stuff that I work on or even interacting with designers on the stuff that I work on.

09:36 Right.

09:36 Maybe people are infrastructure folks and like design is basically colored terminal.

09:41 Maybe they work on web apps.

09:42 Maybe they work on other kinds of apps.

09:44 But I feel like there's a lot of stuff in design that feels really scary and daunting.

09:51 People feel like, oh, I'm not an artist.

09:52 You kind of came from the programming side and then you studied art and then you came back.

09:56 Maybe talk to us about that journey a little bit and where it got you to.

10:00 Yeah, it's very interesting.

10:01 And I can understand that apprehension a little bit from if you're an engineer and you've never done really any art or you've maybe you feel you're creative in certain ways, but maybe design and art or maybe not your forte or you've never had experience.

10:15 It can certainly be daunting because there's a whole nother language.

10:18 And sometimes the way people are realizing things, it seems difficult to kind of get your head around what that is.

10:26 But I'm a firm believer that creativity is something that everyone has and also that art and design and I think even music is something that can be taught or you might have perhaps an aptitude for it.

10:41 But I don't think that in general people are kind of like born an artistic design genius and that's it.

10:49 Like they may have an aptitude where people have given the right kind of tools and resources to that person as they're developing.

10:57 But I've seen all sorts of people, especially when I work at Penn State, I actually teach a lot of computer scientists, right, and software engineers.

11:05 They take my course because they want to do something created.

11:08 They want to do something visual.

11:09 And so that might be a little bit of a struggle coming in, but it's something that can be taught.

11:14 It's something that can be learned.

11:15 It's something that's accessible, just like you've learned to program, right?

11:19 You kind of have these little pieces that build upon each other.

11:22 It's the same thing in design.

11:23 And I think it's just a little bit different, perhaps, in the approach.

11:27 It's more of a bottom-up approach than the top-down that we're maybe perhaps used to.

11:32 But don't let design scare you if you have some interest or interest in art.

11:37 I totally agree with that.

11:38 And like, how do you think people should get started?

11:40 Short of, like, I'm going to just go back to school and do graphic design, too.

11:45 How is somebody who maybe, like, works on the web but doesn't really do the UI stuff other than just, like, get it in place and pass it off, right?

11:53 What are a couple of steps people can take to really, like, get better at that?

11:58 Yeah, to get better at design, I think, you know, it's a couple things.

12:02 One is if you start to recognize the patterns of design, like, if you've worked with a designer and they say, hey, this is not quite right.

12:10 It should be this.

12:10 Maybe asking the question, why?

12:12 Like, why is that not right?

12:14 And so there's just, like, how we have variables and functions and all these types of...

12:20 Why can't I put it all in one function?

12:21 It's only 3,000 lines.

12:23 Exactly.

12:24 And so in design, there's, like, these principles of alignment.

12:26 So often designed elements will be aligned with each other.

12:30 So, you know, the baseline of the font will often line up.

12:33 So you don't want them off by a pixel or 10 pixels.

12:35 And so you see this alignment principle, right?

12:38 And there's, you know, balance and contrast.

12:40 And there's a lot of other principles.

12:42 And so you could pick one of these or you could pick up a book that talks a little about it and just try and recognize what those are as you're working.

12:50 And then what I do, and I think maybe this is because I have a lot of experience with code.

12:55 Often I think about visual ideas in terms of code, especially when it relates to the web.

13:00 So I jump very quickly from a sketch, for example, to, like, just building it out in code.

13:06 Like, sometimes I skip that whole using a visual design application.

13:10 Right.

13:11 Okay.

13:11 Yeah.

13:11 So you do your initial work with pen and paper or with a stylus type thing?

13:15 Yeah.

13:16 So in the past, it's been pen and paper with, like, Sharpies and, like, Copic markers.

13:20 And lately, it's been on, like, an iPad Pro.

13:24 And part of that's for me.

13:26 I recently moved abroad.

13:27 And so it's very heavy to carry a lot of paper and those types of supplies.

13:30 I did bring my Copic pens and a Sharpie, which I don't think they actually have in Europe.

13:34 They have another type of pen that they use that I have to find.

13:37 But, yeah, it's just whatever I have available.

13:40 But the iPad Pro is quite good for sketching, I think.

13:42 Yeah, that's cool.

13:43 I have an iPad Pro with an Apple Pencil, like the 12 point whatever inch one.

13:47 And I actually, part of this getting better design experience I went through was I got some drawing apps and I decided I'm going to force myself how to learn to draw on this thing.

13:59 Even though drawing was something I thought I was very bad at.

14:02 And, you know, with a lot of practice, you can do it.

14:05 It's a pretty nice experience.

14:05 Yeah.

14:06 No, I totally agree.

14:07 And I think the experience in the iPad Pro is quite good with that.

14:10 The Apple Pencil.

14:11 I actually studied for a time traditional animation and illustration.

14:16 So I have a lot of experience with this like kind of like hardcore Florentine style, drafting the human figure, working very quickly.

14:23 And, you know, I would say maybe I drew good at the community college.

14:28 But when I got into this, you know, when I tried to get into this ranked program at San Jose State, those guys are hardcore.

14:34 Like I remember that they said, this guy draws like Michelangelo.

14:37 And so I think if you're thinking, oh, I can never be an artist.

14:40 Like I was drawing and I thought I was quite good.

14:43 And then here I'm like next to Michelangelo.

14:45 So there's always going to be someone better, right?

14:49 Well, it also depends on what you're trying to get out of it, right?

14:51 Like, are you trying to improve what you're doing versus are you trying to do animation, like you say, basically fully become like a digital artist?

15:00 So you also had a resource you wanted to reference about this sort of design as a superpower concept.

15:06 Yeah.

15:06 So I haven't taken any of her classes, but I have spoken with her.

15:09 But her name is Laura Elizabeth.

15:11 And she's got a website, lauraelizabeth.co.

15:15 And she's got some really fantastic articles focused towards developers.

15:20 And especially maybe if you've had some exposure to frameworks or you've done a little bit of web design, maybe not full on UI design, but maybe more on the back end.

15:28 And you're, say, building out some smaller projects, personal projects, and you want them to look a little bit more designed, like more so than just say out of the box bootstrap.

15:37 She's got some really great resources you can look at where she talks about, like, color choices, right?

15:43 Like, alignment, kind of basic principles of design.

15:46 But she explains them in a very developer-friendly format.

15:49 Oh, yeah.

15:49 That sounds really cool.

15:50 I'll definitely link to Laura's stuff.

15:52 Let's go ahead and actually talk about front-end frameworks first.

15:56 Because I feel like if you sat somebody down with, like, just open up a new file, you say, okay, first thing you type is, you know, angle bracket HTML.

16:04 You also get a CSS file.

16:06 Design that.

16:07 Like, build something beautiful.

16:08 That's really super daunting for a lot of folks.

16:11 But I feel like in the last five years or so, the front-end frameworks have really democratized design.

16:18 Not in the super high-level sense, but, like, I can start from, like, 70% good with these front-end frameworks.

16:25 So maybe tell us about front-end frameworks and some of the ones that are great.

16:29 Yeah.

16:29 So my exposure with front-end frameworks happened kind of, like, in the early days of responsive.

16:35 And so this is kind of Zurb Foundation version to kind of bootstrap to simple stacking and responsive.

16:42 But, I mean, what they've done for the web is, I think, nothing short of amazing.

16:47 Because if you find pretty much any website that was built before these existed, because I think they've raised the bar in design for the stuff that's hand-coded.

16:56 It's like you look at websites, you're like, wow, this is, like, from the 1990s or from, like, the early 2000s.

17:02 There's, like, these two big gaps.

17:04 You can, like, really spot it.

17:05 The site has a Y2K problem, but it's not broken.

17:08 It just looks like it.

17:10 Exactly.

17:11 I think, one, they take these design kind of patterns.

17:15 They take these design trends and they package them all up into an easier-to-use UI toolkit.

17:22 Like, you can just, instead of having to figure out how to create a button every time.

17:26 Because if you actually, if you go, like you're saying, right, and you're, like, HTML and just start writing in some standard elements, it actually still looks a lot like 1995 or, like, the early Netscape or Mosaic if you don't actually spend the time to style it.

17:42 And what the frameworks do is they kind of provide you a lot of how to get that reset in a much more modern way automatically.

17:50 And then what I think they're also good for is a learning tool.

17:53 So CSS, I think, is not that complex as a language.

17:59 But there's a lot of complexity in, like, how you might use it to create visual effects.

18:05 And especially when a lot of the things that we've been doing in the past, even the past few years, are kind of hacks, like float-based grids.

18:12 And so there's a lot of kind of weird stuff that's not obvious.

18:16 And so it helps you to learn those patterns and how people are creating things.

18:20 Because you can just view the source and use the inspector and learn how the components are being built.

18:25 I think you're totally right on with that.

18:27 And there's also some of the underlying things that you get that are just non-obvious.

18:33 What you were touching on before about, you know, the subtle color changes, the topography, the line spacing, the reset CSS.

18:42 So Firefox doesn't look different than Safari or, you know, whatever, right?

18:45 There's just so many subtle little things that you can kind of just take for granted rather than have to figure out how to do.

18:50 And then it's down to using the widgets that what people probably mostly think of when they think of these frameworks.

18:55 I think that's what a lot of people are thinking, like these accordions and tabs and this kind of interactive, more sliders and that kind of stuff.

19:02 And that's certainly part of it.

19:04 But yeah, a lot of it can just be CSS only.

19:06 So until you get into some sort of interaction, which on the web is requiring, like when you click on something, you get some sort of reaction that's beyond the default of a button, which is a lot of things, obviously.

19:17 But everything else is CSS only.

19:19 And so that's really the JavaScript is just handling that interaction.

19:23 There's a couple of really popular ones.

19:24 There's Bootstrap.

19:25 There's UIKit.

19:27 There's Zurb Foundation.

19:28 And you're actually pretty involved with Zurb, right?

19:31 Yeah, I'm pretty involved with the Zurb Foundation.

19:33 The secret, don't tell them.

19:35 I actually got started on Bootstrap back in the day.

19:37 But sometimes people start on Bootstrap and they switch over, but they have a little bit different focus in their philosophy.

19:44 And I think they're better suited to certain projects.

19:48 Sure.

19:48 My site's based on Bootstrap.

19:49 I've done a lot of Bootstrap.

19:50 Primarily, I've chosen Bootstrap because, well, one, it was pretty early.

19:55 And the other, there's a lot of themes for it.

19:57 So I go grab stuff for it.

20:00 But I'd love to hear your thoughts on, like, the pros and cons of each or, like, even just why Zurb is awesome over Bootstrap.

20:07 Things like that.

20:08 Because this is, a lot of times you have to choose that right at the beginning before you've even done a lot with it, right?

20:13 And then you're kind of like, well, I'm not redesigning it now.

20:15 It's done.

20:15 Sure.

20:16 I would say the reasons that you talked about are actually some of the great reasons to use Bootstrap.

20:22 Bootstrap is one of the, probably the most popular framework by a much large, like a very large margin.

20:28 And it's very developer friendly.

20:30 The reason is, is it looks really designed outside of the box.

20:33 And also, like you said, there's these themes that you can just plug in.

20:38 So if you want a little bit different visual style, you can either get a free theme or purchase a theme, bolt that on, and there you go.

20:45 It looks a certain kind of way.

20:47 So it's very good if you're creating, like, I think an MVP, if you're creating kind of like your version 1.0, you don't have designers on board, or maybe you have designers on board, but you don't have the time to focus on, like, that much visual branding in the app.

21:03 It's more about functionality, and it has to look okay enough.

21:06 Or personal projects, right?

21:08 Or you do hackathons.

21:09 Like, this is the perfect type of thing, because you can just use Bootstrap and build upon it.

21:13 And then I think, you know, you can make some pretty moderate changes and restyle it, but the themes are really kind of probably the more powerful way that you can get closer to the visual style that you're looking for.

21:26 Yeah, I totally agree.

21:26 But how about Zurb?

21:28 What's awesome about Zurb?

21:29 If you liked how that sounded, Zurb Foundation might not be the right fit for you.

21:33 I got into it.

21:34 There's, I think, really two reasons people use Zurb Foundation.

21:39 One of them can just be an aesthetic.

21:40 Like, some people like this very minimal aesthetic of, like, the Zurb Foundation, unstyled kind of look.

21:47 And there's certainly some people that are doing that.

21:49 But the most important thing, and what it was actually designed for, is for strong visual brands.

21:55 And so it's actually not intended to be used that way out of the box.

21:59 In fact, if you're using it that way, this is probably what Zurb would call, like, a layout or a wireframe that's done in code.

22:08 And so what's intended is you use the framework kind of like a wireframe.

22:12 And it's actually, you have to create a whole set of design on top of it.

22:15 So it doesn't have, like, these subtle shadows and gradients.

22:18 It's expected that you're going to add all of that afterwards based on a professional design.

22:23 So you take, like, a mock and translate it to this framework.

22:26 Right. So it provides the foundational building blocks and the typography and all those things I was talking about.

22:30 But instead of going, and it's basically done, you say Engelbrack button.

22:35 Maybe is it more of a framework for designers to go continue to build with than it is for developers to drop in and, like, keep doing their web stuff?

22:42 Yes. I think it's much more a framework for designers because, like, the emphasis is on design.

22:48 So if you're coming from, like, say, your app or your marketing site and you have fully realized, radically different than bootstrap visuals, right, for all the pages.

22:59 And this is, like, how you're starting your process.

23:01 And then you're trying to convert that.

23:03 So foundation is going to be a better framework for you, whether you're a designer or a developer working on a team like that.

23:10 Okay, cool. And are there some themes out there that you can go, Graham, that people built, like, landing pages?

23:14 Or is you really, you're starting from the framework?

23:16 You know, like, I know there's been some discussion on themes for foundation and, like, don't quote me.

23:22 But I think there are some themes, but I've never used them because my experience has been building out these websites that have, like, a strong visual brand to it.

23:31 This portion of Talk by Thunder Me is brought to you by Linode.

23:36 Are you looking for bulletproof hosting that's fast, simple, and incredibly affordable?

23:40 Look past that bookstore and check out Linode at talkpython.fm/Linode, L-I-N-O-D-E.

23:46 Plans start at just $5 a month for a dedicated server with a gig of RAM.

23:51 They have 10 data centers across the globe, so no matter where you are, there's a data center near you.

23:55 Whether you want to run your Python web app, host a private Git server, or a file server,

24:00 you'll get native SSDs on all machines, a newly upgraded 200 gigabit network, and 24-7 friendly support, even on holidays, and a seven-day money-back guarantee.

24:09 Want a dedicated server for free for the next four months?

24:12 Use the coupon code Python17 at talkpython.fm/Linode.

24:17 So maybe tell us some real-world examples that you've worked on with Zerb.

24:22 Yeah, so I've done some work for agencies, subcontracting, so I can't really talk about the particulars of that.

24:28 But one of the websites that I work with, and I think it's got a pretty strong visual brand as well, it's called Snowflake Stories, LLC.

24:36 And it's a very interesting kind of solopreneur, self-funded startup.

24:41 And what they do is they create children's stories that are completely customizable, where there's a cast of characters that resemble your family.

24:48 And so we created this character builder that's kind of based loosely on the we, you know, the, I can't remember what it's called, the we, me, you know, we have the character we kind of customize.

24:59 And so this is something that we created there.

25:01 And what's nice is it's also mobile responsive, and we're using Angular and this kind of thing kind of in the background.

25:08 But the styling of it is very visually distinctive.

25:11 So I think that in this case, Server Foundation was a really good fit for it.

25:15 And it's also an interesting project.

25:18 And I think this is one of the benefits of working with Foundation, too, because I did a lot of what you might call like UX design, kind of solving the experience and what that was like.

25:28 And then later on, we actually brought in a visual designer, a UI designer, Marcus Handa.

25:35 And he, we came together, and then we actually won an award called the Ippy Award for one of the best publisher websites for that year.

25:43 So I think it's International Publisher of the Year.

25:45 Yeah, that's a really nice idea as well.

25:48 Like have a book with your child as the character.

25:52 And my daughter would go crazy for that.

25:54 That's cool.

25:54 The site looks nice.

25:56 I'll link to it in the show notes.

25:58 So maybe that's a good place to segue over to talk about interactions a little bit.

26:03 In this case, there was a person who owned the company, created the books, and had the idea.

26:08 And then they wanted to work with you.

26:10 I suspect they were probably not a developer or they would have like put something slightly less nice together or whatever.

26:15 But maybe let's focus it on like how developers should interact with designers.

26:20 So I suppose sometimes people see this as like a frustrating thing.

26:24 Like, you know, I built the site and it totally worked.

26:27 But the designer said it's off by three pixels and it was the wrong color.

26:31 And, you know, like what can people do to maybe make these like really great interactions and where people are supporting each other?

26:37 Yeah, it's a great question.

26:39 And I worked on a team recently where I came back to them and I told them actually that they had 147 or something like this wrong colors.

26:47 And then I went through and fixed them and got it down to about seven or eight.

26:50 So, yeah.

26:51 And I can relate to that, too.

26:52 I think I'm in a unique position maybe to talk a little bit about this because what I've been doing over the past few years is working with designers and dev teams and kind of a little bit being the go between and helping them to translate these ideas and communicate.

27:05 But I think the biggest thing is to realize that as engineers, we have a really different agenda and a different focus than probably the designers.

27:16 And so one is to kind of understand better what the designers are going for and maybe understanding a little bit what they mean when they say things like they have empathy for the user or what good user experiences.

27:29 I think these are actually great things to tie into, but maybe the loss in translation, because I know that a lot of engineers, including myself, really care about the performance of the website.

27:41 And I'm very focused on the front end.

27:43 So I really want that front end to really pop.

27:45 I want it to be fast, you know, not too many connections, like, you know, really smooth, really quick.

27:50 And so we're actually kind of working towards the same thing.

27:53 Like, so I want the user experience to be good as well.

27:55 But sometimes it can get lost in translation, right?

27:58 And so I think where that goes astray is, you know, you mentioned the wrong color are off by three pixels.

28:05 But I think what I've seen that can kind of be a bigger problem is when there's a little bit of a detail in the design where you really need to kind of let the design team know early on or the stakeholder in the project that it's going to be expensive, right?

28:21 Sometimes there's a little flourish, right?

28:24 And that flourish is going to be like 10 times, you know, 10 times the time of some other task that you've got on this task list.

28:31 And so I've actually been working with some designers lately.

28:34 And when that's brought up, they're like, no, no, cut that.

28:37 It's not important.

28:38 So getting to, like, what's important, because sometimes I think what happens is that designers feel like they have to fight for their ideas.

28:45 And so they have all these sketches and ideations, and then they're showing all these different versions, right?

28:50 And so when you're finally interacting with them, you might be at this final version that they've had to fight tooth and nail, right?

28:57 For they really want that flourish or whatever.

29:00 And so they're kind of fighting for it, but not necessarily because they're fighting you, but just they've had to put a lot of energy into getting the design pushed forward.

29:09 So I think if you can get involved in the design process earlier on and bring these things up, like if there's some, I'll put in air quotes, like crazy thing that you're, like, freaking out, like, how am I going to even do this in our system?

29:22 Or is it going to be cross-browser?

29:24 Yeah.

29:25 They know it's HTML, right?

29:27 They know it's HTML.

29:28 It's not print.

29:29 Come on.

29:30 I want it always to be exactly the size.

29:33 It's not 8.5x11.

29:35 Come on.

29:35 Yeah, exactly.

29:36 Something like this, yeah.

29:37 Yeah, exactly.

29:38 And so, and I think when you gain more experience with it, with this translation, you can kind of spot things right off.

29:43 And so I know for myself, like, I know if I'm working with Photoshop-based work, I can tell them already, like, look, the fonts are going to be the wrong weight, right?

29:52 So it's not going to look as bold or as light as you think it's going to.

29:56 I think sketch-based digital assets are working a little bit better, but there's still some translation there.

30:01 So you can kind of start to have that conversation earlier.

30:04 And I think it's good.

30:05 It doesn't mean, like, you're going to hang out while they're sketching all the time, but just maybe to inject the engineering thought process a little earlier on so that it doesn't ruin your day, like, you know, a week or two weeks from then.

30:17 Yeah, it seems to me like the design team probably spends a lot of time in boardroom meetings where there's the CEO or the major stakeholders who have, like, super lofty ideals about what they want built.

30:29 And then they ask the designers to build it.

30:31 And then the builders, the designers eventually get down to the developers and say, developers, this is what we've chosen, you know?

30:38 Maybe, one, having some sympathy for the pressure that is on the other side of that story for the designers, right?

30:44 And then you maybe try to, from a design perspective, try to get at least one representative for the dev team into those meetings so they're more involved in earlier.

30:54 Yeah, I think so.

30:55 And I think it can really help, especially if you're kind of in an environment where you're really siloed off, where, you know, designers are over there, we're over here, and we see them in the hallways, but we're not interacting as much.

31:06 Or, you know, some places have places where it's much closer, right?

31:10 Maybe you're sitting next to each other.

31:11 But I think what can really help is, like you're saying, have someone who can kind of span the gap.

31:15 And it could come from either a team, right?

31:17 It could be a designer, maybe who's doing some code or has some aptitude.

31:20 But getting someone who can kind of understand the visual nature of the front-end code and kind of take that on so that most teams that I've worked with have very specialized roles.

31:32 And I wouldn't say the bulk of the team is doing front-end work.

31:34 It's usually one person or, you know, you have maybe in a very large organization, a team of people doing this type of work.

31:41 Or in some cases, for myself as a consultant, there's often been a gap.

31:46 And so that's where I've kind of injected myself in the process.

31:48 Because they have the designer, they've got the back-end team, and they don't know how to...

31:53 They bring you in to be the bridge.

31:54 Pretty much.

31:55 And so I think that's something that can be really quite useful.

31:59 And just to get involved more in the process earlier on.

32:01 From both sides, too.

32:02 Designers.

32:03 Designers, you know, should get involved.

32:05 Not telling you the nitty-gritty of what you're doing, but like at least letting you know what's coming down the pipe or this is what we're thinking.

32:11 What do you guys think?

32:13 It's going to take forever.

32:15 Is it feasible?

32:15 Right.

32:16 How much do you want this?

32:18 Are you willing to wait a month longer to have this?

32:20 So you were touching on a couple things there that I think are interesting.

32:26 And one is this workflow with the design team and the dev team.

32:32 The projects where it's worked a lot better for me, as being a team member on the dev side mostly, has been where the designers and the developers work more closely together.

32:43 Maybe they share a GitHub repo and the design sometimes at least is done in the CSS and in the app.

32:51 And like where it's worked less well is where I've worked with people largely from a print background where they're like, oh, we're not going to touch the HTML CSS.

32:59 We don't do that.

33:00 What we'll do is we'll just give you this picture and you can just make this picture.

33:04 And I found that to be a lot less helpful.

33:06 I'm like, well, I can have a picture of it.

33:08 What I need is to actually make the HTML look like the picture.

33:11 That's where it's super, super hard, right?

33:13 Because that's where the rubber meets the road.

33:15 And so it's one thing to draw a picture and say, I want this.

33:17 It's another to like say, here's how you get there.

33:20 What do you think about that?

33:22 I mean, there's this tension, right?

33:23 Not every designer is a web developer, for example, but what do you think?

33:26 Yeah, I think it's maybe in a lot of cases unfair to just tell.

33:30 Well, designers, look, we need you to code or we need the code.

33:35 However, you know, there's some more modern thoughts, right?

33:37 And this might not be news to some designers or people in some circles, but there's some

33:42 more modern ways of working on the web.

33:44 One of them is this tool called Sketch.

33:45 And it's not because it's an amazing drawing tool, although some people think that, but it's

33:51 because it renders very close to what the browser is going to render.

33:54 And if you are a designer and you understand how the web is built and you understand how the grid

33:59 system is going to be displaced and you understand maybe a little bit about the box model, then you can

34:03 create these beautiful designs that are very easy to hand off.

34:07 And there's tools for that as well, right?

34:10 There's a tool called Zeppelin IO.

34:11 There's another one that I like lately called Simply, which is spelled in a very silly way.

34:16 And I can't remember, so I won't quote it.

34:18 Maybe that'll be in the show notes.

34:19 And there's another one called Avocode, like avocado, but with code in it.

34:24 And what these are, I like to call them automatic redlining tools.

34:29 And so what you can do is you can load up that sketch file.

34:31 The designer can do it, share it with the team, and you can just click on things and it gives you

34:35 measurements between stuff.

34:36 So for me, when I'm building stuff on the front end and I'm building out the CSS, like I need to

34:41 click on an object.

34:42 I need to know how far it is between the edges of the button.

34:45 How far is it between the other objects?

34:47 So I can add padding, spacing, and all this kind of stuff.

34:50 I need to know the exact colors.

34:51 And so they allow you to lock down the colors and name them.

34:55 And so hopefully you're not naming them like purple haze or some crazy name, but it allows

35:01 you actually as a designer to be a little bit more programmatic and think in systems, which

35:05 I think most engineers actually appreciate if you're given a set of colors as variables that

35:12 imply the use or explain the use.

35:14 So this can be injected much earlier on.

35:17 You can use a tool like this for measurements, makes the front end code easier for whoever

35:21 ends up doing that.

35:23 Maybe it's a designer, but maybe it's someone on the dev team.

35:26 It just depends on who does it.

35:28 Yeah.

35:28 I really like the idea, especially of working within the constraints of like the CSS box

35:32 model and stuff in the grid system, because I feel like that's where it gets really hard.

35:37 It's like, I want it to go like this, but then you move it, it goes like this.

35:40 You're like, but that's so hard in HTML, right?

35:43 So you're kind of like, you're working with the same clay, not steel versus mud or whatever.

35:49 And it's getting better.

35:50 I think with flex box and CSS grid in terms of grid systems, some of this is getting a

35:55 little bit better and less, less hacked, but some things that I've done, you don't see that

36:00 many tables as front pages anymore.

36:02 Yeah.

36:04 I'm building all my websites, all the tables.

36:07 They're all like, like this cut up Photoshop from the nineties.

36:09 Yeah.

36:09 Or two thousands.

36:10 This portion of talk Python to me was brought to you by GoCD.

36:15 GoCD is an on-premise open source, continuous delivery tool to help you get better visibility

36:21 into and control of your team's deployments.

36:24 With GoCD's comprehensive pipeline modeling, you can model complex workflows for multiple

36:29 teams with ease.

36:30 And GoCD's value stream map lets you track changes from commit to deploy at a glance.

36:36 Say goodbye to deployment panic and hello to consistent, predictable deliveries.

36:40 We all know that continuous integration is super important to the code quality of your applications.

36:44 Choose the open source local CI server, GoCD.

36:48 Learn more at talkpython.fm/gocd.

36:52 That's talkpython.fm/gocd.

36:54 I think when you're coming at this, right, like you have to think about like what's going

37:00 to be the most fluid process.

37:01 Like how can you help the people on the other side?

37:04 Like if you're a designer and you care about the design, like you want to hand this off

37:07 in a way that's going to kind of carry over the design intent.

37:10 Clearly, like we both, you were joking, like I gave you the image, like just build it.

37:16 Like it's so hard.

37:17 And what I see a lot of from designers, hopefully there's no designers listening in, but they

37:22 send me these beautifully rendered high fidelity mocks, which look just like the regular website.

37:26 And maybe they're even in sketch.

37:28 So I'm like, awesome.

37:29 I can use one of these tools and build it out even faster rather than having to, you know,

37:33 try and estimate measurements or get it close by eyeballing or taking measurements myself.

37:38 Then they didn't do anything for the mobile or tablet or maybe even tablet.

37:43 But it's like, so I'm placed in the position and I obviously had some design background and

37:47 maybe this happened to you where it's like you have to invent the whole mobile experience.

37:51 And if they don't have a lot of experience of like responsive and how things are going to

37:56 displace or stack on mobile or the box model, then it might be kind of a disaster.

38:02 You might have to rethink patterns on mobile and it might be quite difficult.

38:06 And so, and I don't know why, but they just like skip that whole part.

38:10 Like it's like, it's kind of like the modern day version.

38:13 I think of just handing off the image is like, oh, the mobile.

38:16 Yeah.

38:16 You just like put a hamburger menu on that.

38:18 Exactly.

38:18 Using the foundation, right?

38:20 So you'll be fine.

38:21 Exactly.

38:21 Yeah.

38:21 We're using foundation.

38:22 It's responsive.

38:24 It says responsive.

38:25 It says responsive right there in the design.

38:26 Yeah.

38:27 I've had people say, you know, this website is not responsive.

38:30 I thought you were using bootstrap.

38:31 It's like, you know, you have to employ the features of the thing that add the responsiveness

38:37 to it.

38:37 Right.

38:37 It's not just pixie dust.

38:38 You sprinkle on it.

38:39 Right.

38:40 Yeah.

38:40 And there's some patterns that are, they're challenging too, like mega menus and that kind

38:45 of thing.

38:45 Like how does that work on mobile?

38:47 Like that, it depends, right?

38:49 Depends on what kind of crazy menu you've thought up in the first place.

38:51 Yeah.

38:52 Yeah, for sure.

38:53 Smaller minimalist.

38:55 That's what I say.

38:56 One thing that you brought up is like having like named colors and things like that.

39:00 Like, do you recommend that the dev team use something like SAS or less or one of these

39:06 sort of more programmatic CSS super languages?

39:09 I don't know what you really call them.

39:10 I'm making that up.

39:11 Yeah.

39:11 I think it's a really good move, especially I think in two instances.

39:15 One is where you're in a team environment where multiple people will be working with the

39:20 CSS and making modifications to it.

39:22 And the other reason why is when the project gets large for maintainability.

39:26 I think SAS does a couple of things.

39:29 So it is programmatic.

39:30 Sorry, before we get too far, maybe not everyone knows less than SAS.

39:33 You want to just define that real quick for them?

39:35 Yeah, sure.

39:36 So if you don't know less than SAS or, you know, there's post CSS as well, but they're

39:41 CSS preprocessors.

39:42 And so what allows you to do is use things like variables, functions also allows you to

39:49 create mix ins, which are also kind of like functions that return CSS code, code in quotes.

39:54 They also allow you to split up your code across multiple files.

39:58 And so you can create something that's much more programmatic.

40:02 But I think the most important thing isn't that it's programmatic.

40:05 I mean, sure, you could start generating like tint lists and this kind of stuff with colors.

40:09 But I think what's more interesting about it is the organizational aspect of it.

40:14 I don't know about you, but I've worked on projects where you come on and you go, okay,

40:18 and maybe it's multiple CSS files, but it's usually like one CSS file.

40:22 And you open this up and you're like, what?

40:23 You're like, it's like maybe being created by five people that like things are named like

40:29 something, something like number two dash three.

40:32 And you're like, and you're going through this trying to make sense of it.

40:34 And it's difficult.

40:35 Like we have a 5,000 line CSS file and one of them.

40:38 And why?

40:39 Yeah, exactly.

40:40 Like, why is this okay?

40:42 Yeah, so I think that's a disaster.

40:44 Because like, how are you going to maintain that?

40:45 Like, that's like opening up a single 5,000 line Python program.

40:51 That's not any sort of order.

40:52 Like, what are you going to do with that?

40:54 Well, yeah, you know what I think is even worse, although I totally agree with the analogy,

40:58 is a lot of times that file was started as like a zero byte CSS file was added to and added

41:04 to as the site or the app has gone through many prototypes and many phases and features were

41:10 added and then like canceled, but they're just they're all still in the CSS.

41:14 It's like the tree rings of growth of the app.

41:16 And you don't want to take it out because you're like, well, what if what if that one part that

41:22 is like in this obscure page was depending on that thing?

41:25 It's just really hard to know that you can like clean up this dead CSS code equivalent.

41:30 Yeah, they do have a good tool for that now called un-CSS.

41:34 It's the equivalent of if you've ever had your room be a disaster, which I know growing up

41:40 mine was a disaster.

41:41 My parents were always yelling at me, clean your room.

41:44 And then if you took everything in the room and like shoved it in the closet, I think it's

41:49 equivalent of that.

41:50 But it basically looks at your website and what CSS selectors are being used and it basically

41:55 dumps the rest.

41:55 But it's still just a mess.

41:57 It's just it's still on the file.

41:59 It just doesn't render out to the website.

42:00 So it's a good solution.

42:02 But that's cool.

42:03 How does it work with potentially like dynamic stuff like Chameleon or Jinja 2 templates?

42:10 How does it work with like, say something behind a login versus public?

42:14 You know what I mean?

42:15 You're like, oh, there's that admin page thing.

42:18 Maybe is it like, does it address any of that stuff?

42:21 There are ways to configure it to address these types of things.

42:24 But just like as you're sweeping things into the closet, like for me, I don't think it's

42:28 a very elegant solution.

42:29 Right.

42:31 And so then you're like, okay, like, how can I program this stuff to sweep more stuff

42:35 into like the new things that are coming into the room or something?

42:38 I think this is where the organization helps because you can kind of keep things pared

42:42 down.

42:43 And I found when you keep things organized, just like in your room, if you had a clean room

42:47 is like perhaps you get older and you're more clean or organized.

42:51 You can find things very quickly, right?

42:53 Like you're like, where is this thing?

42:54 And so when you go and inspect it in Chrome, because you have a map, it'll tell you it's

42:59 in this file on this line.

43:01 It's like very obvious.

43:02 And not only that, but if you name these files correctly and create a good sense of structure,

43:07 then they're already named with the views or the names of the components or this type

43:11 of thing.

43:11 So it should be like super obvious, like what's going on.

43:15 Yeah, that's cool.

43:15 A lot of times I'll try to have like a navigation CSS file, maybe like a store CSS, a homepage

43:21 because homepage, like the landing page always seems to have like a bunch of insane styles

43:25 that don't appear elsewhere on the site.

43:28 So yeah, I definitely think organization is important.

43:31 Organization I think is important.

43:33 And then the programmatic nature of it, what it does is it allows you to maintain design

43:38 consistency.

43:39 And so as you might move towards a larger app or towards something where the visual design

43:44 is more important, it's like really key.

43:46 Like if you're using, like I'm working on a project right now where one of the brand colors

43:51 is red.

43:51 So it's, you know, red in the logo.

43:53 And so we use this branded red everywhere, but it's maybe not obvious to you if you don't

43:59 have a design background that you're using the wrong red.

44:01 And so this is, like I said, I went through like hundreds and hundreds of variations of those

44:05 reds to kind of clean it up.

44:07 And, you know, you find this like pound, like foo, you know, F zero zero, this kind

44:11 of red.

44:12 And it's like, that's not the right red.

44:14 And so the other thing that's really nice with SAS or less, but I think a lot of people

44:18 don't realize is you can create code linters to kind of prevent this type of behavior, this

44:22 accumulation of things.

44:23 So you can kind of create good practices and instill them in a coding conventions document,

44:29 but also have them enforced or at least warned when they're running the preprocessor.

44:33 Oh, wow.

44:33 You could even like bring that into like a continuous integration workflow.

44:36 Yeah.

44:36 And you could either warn people or kick them out so that it won't render the CSS.

44:40 Actually fail the build.

44:41 That's crazy to fail the build because the CSS is like using the wrong color.

44:45 I think that's awesome.

44:46 Didn't know that was an option till just now.

44:48 Sure.

44:49 So maybe that's a good place to like touch on a few final things around methodologies.

44:54 Like one of the things you've talked about is designers, developers working together using

44:58 outdated methodologies that make it harder for them to do work together.

45:02 They have to do a lot of rework.

45:04 Want to give us some thoughts on that?

45:06 I've been doing stuff on the web for quite some time.

45:08 And I think like the old school way is, like you said, like the designers like huddle and

45:13 come up with some crazy design and kick it over the fence.

45:15 And then you're like, I know I've been panicked.

45:17 I remember I used to work at Pulse magazine.

45:20 It was a magazine put out by Tower Records, if you can remember back then when they were

45:24 still around.

45:24 Like music when it came on a physical thing, you carried it around?

45:27 Yeah.

45:27 It was like all like on CDs and this kind of thing.

45:29 And so I worked at a music magazine and I remember that creative director came up with

45:34 this design.

45:35 And this is back in the days of tables.

45:37 And he had this like thing that would overhang, like a flourish that would overhang the rest of

45:42 everything else underneath it.

45:43 And I said, this is going to be so difficult to make.

45:46 And I like kept, you know, like this whole kind of argument.

45:48 And he didn't buy it at the time.

45:51 But this is like the thing, like kicking it over the fence and like developers, you're going

45:55 to have to struggle and make it work or else, right?

45:58 Or this kind of argument that goes on.

45:59 So if you've been in that position, it kind of sucks.

46:02 But there's newer ways of working, I think, than just like kicking it over the fence and

46:06 the developers just trying to build it by some sort of weird ways.

46:10 And part of that is one, there's this idea of design systems.

46:14 And this is kind of like a big area.

46:16 But there's kind of two parts of a design system that I think could be really useful for anyone

46:22 who's approaching a large project, a redesign, some sort of like major changes.

46:26 So like not, not like you're building the app day to day, but like you're going, like maybe

46:31 you hire an agency or something like that.

46:33 And it's like a radical redesign.

46:34 And so those two things that I think you can really gain, which could become a great part

46:39 of a design system is creating front end code in isolation.

46:43 So you talked about building it kind of integrated into the backend.

46:47 And so making sure you can kind of make tweaks on the color and all that stuff.

46:50 And then you can see it live.

46:51 I'm actually advocating a little bit the opposite, but only in the case of redesign,

46:56 but to create the layouts and the patterns in a simplified form.

47:00 So you can kind of share with the other developers what they look like and they can see it.

47:04 Are you suggesting they create that in HTML and CSS or that they create that as like a Photoshop

47:09 type of graphic?

47:10 Put a little structure on that.

47:11 I'll be quite specific.

47:12 I wouldn't advocate just using like static HTML and CSS.

47:16 And so what I would say I am an advocate of is if you're going to build front end code

47:21 starting from a framework, if you haven't already, because why reinvent the wheel?

47:26 Why do all that cross browser testing?

47:27 Like grab bootstrap, grab foundation if it's more appropriate and use that.

47:32 And then with these projects, especially with Zurb Foundation, there's all this front end

47:36 tooling that comes with it.

47:37 And so Zurb Foundation comes with this really interesting thing called the Zurb template.

47:42 And what it is, is it's a bunch of tooling that Zurb used to use internally that they

47:47 open sourced as an agency.

47:49 Now, what they do is very interesting because they build different websites for different

47:53 people, right?

47:54 So last time I heard, they produce something like 100 per year, which is kind of crazy.

47:58 I think that's like one every three days, like a new website coming out.

48:03 And one of the things that they do is they produce front end code for these clients.

48:07 They don't just produce like you're saying that the here's the image, build it.

48:10 And so it's very interesting.

48:12 So this is what they do as an agency and they're working across a lot of different industries

48:16 with a lot of variation in the visual design, the visual branding.

48:19 And so they've actually created their own internal toolkit to help them with that problem.

48:24 And so that's what this is.

48:25 And it's basically a static site generator similar to Assemble with some helpers that are

48:30 specific for front end prototyping that make the process really quick.

48:33 So like when you need to repeat things, like you have a bunch of images and you're like,

48:37 I need 25 images.

48:38 You just repeat it 25 so you don't have the pattern repeated a bunch of times in the HTML.

48:42 It has partials, which are great because if you're building it with the intention of handing

48:47 it off to a team, for example, like a Django team or whatever, you can understand like what

48:53 kind of partials are they going to use on the back end?

48:55 You can build it in the same way, the front end code.

48:57 So it'll resemble that when you're looking at it.

48:59 And then it also has this tooling for the SAS build, which has auto prefixer and it could

49:06 have on CSS and other things, but you can build things really quick, live reload them in the

49:10 browser and it's super fast.

49:11 And so this is how I build front end code.

49:13 But the other part of it, it's also got a thing called style Sherpa, which will help you to

49:18 build a living style guide, which is basically this set of documentation.

49:22 So if you've used bootstrap, if you're not familiar, go check out the bootstrap website,

49:27 their documentation is fantastic.

49:28 Check out Zurb Foundation, look at their documents there.

49:31 Like, how do you use it?

49:33 This is what style Sherpa does.

49:34 You just put basically a code snippet in a specialized markdown format with code fences and you call it

49:40 HTML example, instead of using, you know, just HTML.

49:44 And what it does is it walks, it'll go and render out the live code in the browser and then have like a

49:49 copy and pasteable version right below it.

49:52 And so you get the same kind of automatically built style guide that you would get from

49:56 Zurb Foundation pared down a little bit, but specific to your project.

50:00 I think this is a great set of really concrete things that developers and any designers who

50:07 happen to might be listening to this episode as well can take and use.

50:11 So it feels like we've come a long way in the last 10 years, starting with these sort of front

50:17 end frameworks, but also in the development world, we kind of moved, I'd say around the,

50:22 year 2000 and all this agile stuff that was going on and whatnot then.

50:27 And that maybe brought some other challenges with it, but it was quite a big shift.

50:30 And it feels like the design world is also finding really new, interesting ways to work together with

50:35 the developers.

50:36 Yeah, absolutely.

50:37 Yeah.

50:37 Awesome.

50:39 All right.

50:39 Well, I guess we'll, we'll get a little on time, so we should probably leave it there

50:43 for the design stuff, but let's go to the two questions.

50:46 So if you're going to write some code, either Python or maybe HTML, what editor do you open

50:52 up?

50:52 I always open up sublime text three.

50:54 I'm a huge sublime text fan boy.

50:57 I've been using it since version two, which I guess doesn't sound that long ago, but they

51:01 have a very long version cycle.

51:03 But yeah.

51:05 Yeah.

51:05 And I used to work with them and some other editors and I just something about it.

51:09 It just like, I feel like, like I don't even have to think like I could just work really

51:13 quickly.

51:14 As far as notable packages or libraries, what do you think?

51:17 I would say the number one package that I use and it's super old school.

51:21 It used to be called Zen coding, but now it's called Emmet, which I don't know that's a great

51:25 name, but basically it does two things.

51:28 One, what you do is you can type in a shorthand syntax, which is going to be very similar to,

51:34 for example, like Ruby slim or Hamill, right?

51:36 Where you have a CSS selector and you're just kind of combining them together like a UL, right?

51:41 And then you've got the LI and then you can multiply.

51:44 And so you can build these structures really quickly in HTML.

51:46 Let me give a concrete example where people are listening if they haven't seen this,

51:49 because it's really awesome.

51:50 So imagine you want to create like a unordered list of 10 items and you're in a static editor.

51:56 You could type left bracket, left angle bracket, UL close, left angle bracket, LI close.

52:03 And hopefully your editor at least closing those tags for you.

52:06 And then you could copy and paste it.

52:07 Or you could just say UL angle bracket, LI star 10 tab.

52:12 And it goes boom.

52:12 And it just expands them all out, right?

52:14 Exactly.

52:14 And it's like, I think the first time when you do something that's complex and you see the

52:18 speed of it, you're like, wow, this is like magic.

52:21 And I think the thing that it also prevents is like messing up on not closing the tags or

52:27 using the wrong closing tag or these little mistakes.

52:30 And I think when you're using these frameworks, you start to have pretty large structures like

52:34 this, especially like the unordered list with all the line items and all this kind of stuff.

52:38 And so it makes those structures really easy to build quickly and then also error free usually.

52:44 Right.

52:44 Like grid rows, for example, or something like that.

52:47 And you can mix in CSS.

52:49 So you could say like if you wanted the unordered list to be products and the items to be product

52:56 as CSS classes, you could say like UL dot products greater than LI dot product star 10 and tap.

53:05 And it would put all those classes on the elements as well, right?

53:07 One thing maybe I'm not sure if it's because I do design or because I do code, but I really

53:13 like there's a lorem tag you can throw in there too, and it just fills it with lorem text.

53:17 But it's even better than that because it's programmatic because you can say like lorem

53:20 10.

53:21 It gives you 10 words of lorem, but you can say like lorem one, but you know how you're saying

53:26 you can use the asterix to multiply out.

53:29 So what you can do, it'll actually give you different lorem text for each of those items.

53:35 So if you're building a menu, it's fantastic.

53:37 That's awesome.

53:38 That's like the lorem, some sort of meaningless text to just fill in stuff that,

53:43 those stakeholders don't look at it and go, whoa, but it's not supposed to stay there.

53:46 It doesn't mean it's not what it's going to be there.

53:48 This is just filler.

53:49 So like lorem Ipsum is that thing.

53:50 Do you know about hipster, hipster, hipster, hipster, hipster, hipster, no, no.

53:55 What is that?

53:56 It's hip sum.co.

53:58 It's the same thing as lorem Ipsum, but it's hipster speak.

54:01 That sounds fantastic.

54:02 It's fantastic, man.

54:04 It's, it's beautiful.

54:05 And maybe I'll read you a little, like if I could just pull it up here, let's just do it.

54:10 It says shabby, chic, aesthetic, subway tile, pabst, a fagetto, dream catcher, narwhal.

54:16 It just goes on and on.

54:18 It's beautiful.

54:18 I've been starting to move towards the hipster Ipsum lately.

54:21 Nice.

54:22 Maybe we should fork Emmett and integrate the hipster Ipsum in there.

54:26 We definitely, definitely should.

54:28 All right.

54:29 Well, I definitely recommend that as a editor plugin as well.

54:32 That's cool.

54:33 So final call to action before we call it an episode.

54:36 Yeah, cool.

54:37 So if you've been listening and you're interested in what I've been talking about,

54:41 this kind of intersection between design and engineering, the best thing I have for you

54:46 is I've got a list, but it's kind of a secret list.

54:48 You won't find it advertised on my website.

54:50 But what I do have is I have a free email course where what I do, like these two big wins I talked

54:58 about using the front end code.

55:00 And so if that sounded compelling to you or created the coded style guide, you can learn

55:04 how to do that at design systems crash course.com.

55:08 But more importantly, after you're done with the course, you'll get on this kind of internal

55:13 insider circle list that I've got.

55:15 And I send emails out daily and I talk about this stuff all the time, like how to use front

55:20 and gold and like how to build code, how to work with SAS, like how to make sure colors

55:24 are consistent.

55:25 And so if you've got the kind of like design twinkle in your eye or in the back of your

55:30 head, like it might be something you might want to check out design systems crash course.com.

55:34 But I also have something else because I know this is a Python show and I wouldn't want to

55:39 leave empty handed.

55:40 I did a lot of searching on Zerb Foundation and Python and I thought, wow, this sucks.

55:45 There's a lot of confusion and people trying to integrate frameworks and not knowing what to

55:50 do.

55:50 And there's some packages that have gone stale.

55:52 So I'm putting together a resource for using frameworks with Python.

55:56 And so I'm going to talk about the major ones, Bootstrap, Zerb Foundation, and UIKit.

56:01 And so if you're interested in any of those three and you haven't been using them in your

56:04 current projects, I'm going to put together a resource there for you so you can get started

56:09 with it very quickly.

56:09 All right.

56:10 Yeah.

56:10 I'll link to both of those in the show notes so people can check them out.

56:13 James, it's been great to have you on the show and really enjoyed this design focused

56:17 conversation.

56:18 Yeah.

56:18 Thank you.

56:18 Thanks for having me.

56:19 You bet.

56:20 See you later.

56:20 This has been another episode of Talk Python to Me.

56:24 Today's guest has been James Stone.

56:27 And this episode is brought to you by Linode and GoCD.

56:30 Linode is bulletproof hosting for whatever you're building with Python.

56:35 Get your four months free at talkpython.fm/Linode.

56:39 Just use the code Python17.

56:42 GoCD is the on-premise, open-source, continuous delivery server.

56:47 Want to improve your deployment workflow?

56:49 Keep your code and builds in-house?

56:51 Check out GoCD at talkpython.fm/gocd and take control over your process.

56:58 Are you or a colleague trying to learn Python?

56:59 Have you tried books and videos that just left you bored by covering topics point by point?

57:04 Well, check out my online course, Python Jumpstart by building 10 apps at talkpython.fm/course to experience a more engaging way to learn Python.

57:13 And if you're looking for something a little more advanced, try my write Python code course at talkpython.fm/pythonic.

57:21 Be sure to subscribe to the show.

57:23 Open your favorite podcatcher and search for Python.

57:25 We should be right at the top.

57:26 You can also find the iTunes feed at /itunes, Google Play feed at /play, and direct RSS feed at /rss on talkpython.fm.

57:36 This is your host, Michael Kennedy.

57:38 Thanks so much for listening.

57:39 I really appreciate it.

57:40 Now, get out there and write some Python code.

57:42 Thank you.

57:42 Thank you.

57:42 Thank you.