Episode 39: VoV 040: Fonts with Miriam Suzanne

Panel:

Joe Eames
John Papa
Erik Hatchett
Charles Max Wood

Special Guest: Miriam Suzanne

In this episode, the panel talks with Miriam Suzanne who is an author, performer, musician, designer, and web developer who works with OddBird, Teacup, Gorilla, Grapefruit Lab, and CSS Tricks. She’s the author of Riding SideSaddle and the Post-Obsolete Book, co-author of Jump Start Sass, and creator of the Susy and True Open-Source toolkits. The panel and the guest talk about Fonts!

Show Topics:

0:00 – Advertisement – Kendo UI

0:53 – Guest: Hello!

1:01 – Guest: I am a designer and a developer and started a business with my brother. We are two college dropouts.

2:00 – Panel: Is that’s why it’s called OddBird?

2:05 – Guest: Started with Vue and have been talking at conferences.

2:31 – Chuck: Chris invited you and he’s not here today – go figure!

2:47 – Panel: You are big in the CSS world.

2:58 – Guest: That’s where I’ve made my name. I made a grid system that was popular at one moment in time.

3:17 – Panel.

3:27 – Panel: Grid Systems are...

3:36 – Guest talks about her grid system and how it looked.

4:20 – Panel.

4:24 – Panel goes back-and-forth!

5:24 – Chuck.

5:27 – Guest: That’s why grid systems came out in the first place b/c layout was such a nightmare. When I built Susy...

6:02 – How much easier is design today on modern browsers compared to ten years ago when you created Susy?

6:14 – Guest: It can look daunting but there are great guides out there!

7:04 – Panel asks a question.

7:11 – Guest: We recommend a stack to our clients. We had been using backbone Marinette for a while and we wanted to start messing with others. Looking at other frameworks. Looking at design, I like that Vue doesn’t hide it from me and I can see what I need.

8:41 – Panel: I love that about Vue. I knew this guy named, Hue.

8:54 – Guest: I have been friends with Sarah Drasner.

9:07 – Panel: Sarah is great she’s on my team.

9:39 – Guest: I had been diving into JavaScript over the summer. I hadn’t done a lot of JS in the past before the summer. I was learning Vanilla JavaScript.

10:21 – Guest: I don’t like how it mixes it all together (in reference to the JSX).

10:44 – Panel mentions Python and other things. Panelist asks a question.

10:54 – Guest: That would be a question for someone who writes that.

11:30 – Panel: I am going to change topics here for a second. Can you talk about your talk? And what is a design system?

11:48 – Guest answers the question.

13:26 – Panel follows-up with another question.

13:35 – Guest talks about component libraries.

15:30 – Chuck: Do people assume that the component that they have has all the accessibility baked-in b/c everything else does – and turns out it doesn’t?

15:48 – Guest answers.

Guest: Hopefully it’s marked into the documentation.

16:25 – Panel.

16:36 – Guest: If you don’t document it – it doesn’t exist.

17:01 – Panel.

17:22 – Guest: “How do we sell clients on this?” We don’t – we let them come back and say, “we had to do less upkeep.” If they are following our patterns then...

17:57 – Panel: We’ve had where guides are handed off and it erodes slowly over time. Then people are doing it 10 different ways and not doing it the way it was designed.

18:31 – Guest: Yes, it should be baked-into the design and it shouldn’t be added to the style guide.

19:02 – Chuck: I really love Sass – and CSS – how do you write SASS or CSS with Vue?

19:12 – Guest answers the question.

19:23 – Chuck: You made my life better!

19:31 – Guest: If you have global files...you can have those imported among other things.

20:11 – Panel: What’s the best way to go about that?

20:24 – The guest talks about CSS, global designs, among other things.

21:15 – The guest mentions inverted triangles CSS!

22:12 – Guest: The deeper we get the narrower we get!

22:49 – Guest mentions scope styles.

23:12 – Panel: That makes total sense! We are using scope everywhere.

23:30 – Guest.

23:36 – Panel: How would you approach this? I start with scope and then I take them out of scope and then usually promote them to import for mix-ins. I wonder where is that border?

24:30 – Advertisement – Get A Coder Job!

25:09 – Guest answers the question.

25:53 – Panel: It sounds easy at first but when you are designing it you say: I know that isn’t right!

26:13 – Guest: I try to go through a design proposal.

26:27 – Guest defines the term: reused.

27:04 – Panel.

27:10 – Guest.

27:30 – Panel: We used to have this problem where we got the question of the following: splitting up the CSS bundles.

28:27 – Guest: That is the nice thing of having CSS in components.

28:49 – Panel asks Miriam a question.

29:02 – Guest: That’s often when someone wants a redesign.

29:54 – Panel: How do you decide on how many fonts to deliver so they don’t take over the size of the browser?

30:09 – Guest: The usual design rule is no more than 2-3 fonts works out well for performance. Try to keep that rule in mind, but you have to consider every unique project. What is more important for THAT project?

31:46 – Panel.

32:21 – Guest gives recommendations with fonts and font files.

33:37 – Chuck: What are you working on now with Vue?

33:45 – Guest answers the question.

The guest talks about collaborative writing.

34:10 – Miriam continues.

34:55 – Chuck: What was the trickiest part?

35:00 – Guest answers the question.

36:03 – Guest: It’s called Vue Finder and it’s through open source.

36:39 – Chuck: Any recent talks coming up for you?

36:49 – Guest: I have one tonight and later one in California!

37:02 – Guest: There were several Vue conferences this year that I was sad to have missed.

37:40 – Guest: Are you doing it again?

37:49 – Panel: How many do you attend?

37:57 – Guest: Normally I do 8-10 conferences and then a variety of Meetups.

38:33 – Chuck: Picks! How do people find you?

38:41 – Guest: OddBird.net and Twitter!

38:58 – Advertisement – Fresh Books! DEVCHAT code. 30-day trial.

Links:

Vue
React
JavaScript
C#
C++
C++ Programming / Memory Management
Angular
Blazor
JavaScript
DevChat TV
JSX
VueConf US 2018
CSS Tricks – By Sarah Drasner
Real Talk JavaScript
FX
Miriam’s Twitter
Miriam’s Website
OddBird

Sponsors:

Fresh Books
Cache Fly
Kendo UI
Get A Coder Job!

Picks:

Joe

Indoor Rock Climbing
Getting back into what you enjoy
RoboTech
History of Robotech
Vue.JS In Action

John Papa

How To Import a SASS file into every Vue Component in an App
Real Talk JS Podcast

Erik

AWS Amplify
Doctor Who

Charles

Dungeons and Dragons Stuff
Extreme Ownership

Miriam

Pose
New DND Game - Test Version

Special Guest: Miriam Suzanne.

Panel:

Joe Eames
John Papa
Erik Hatchett
Charles Max Wood

Special Guest: Miriam Suzanne

In this episode, the panel talks with Miriam Suzanne who is an author, performer, musician, designer, and web developer who works with OddBird, Teacup, Gorilla, Grapefruit Lab, and CSS Tricks. She’s the author of Riding SideSaddle and the Post-Obsolete Book, co-author of Jump Start Sass, and creator of the Susy and True Open-Source toolkits. The panel and the guest talk about Fonts!

Show Topics:

0:00 – Advertisement – Kendo UI

0:53 – Guest: Hello!

1:01 – Guest: I am a designer and a developer and started a business with my brother. We are two college dropouts.

2:00 – Panel: Is that’s why it’s called OddBird?

2:05 – Guest: Started with Vue and have been talking at conferences.

2:31 – Chuck: Chris invited you and he’s not here today – go figure!

2:47 – Panel: You are big in the CSS world.

2:58 – Guest: That’s where I’ve made my name. I made a grid system that was popular at one moment in time.

3:17 – Panel.

3:27 – Panel: Grid Systems are...

3:36 – Guest talks about her grid system and how it looked.

4:20 – Panel.

4:24 – Panel goes back-and-forth!

5:24 – Chuck.

5:27 – Guest: That’s why grid systems came out in the first place b/c layout was such a nightmare. When I built Susy...

6:02 – How much easier is design today on modern browsers compared to ten years ago when you created Susy?

6:14 – Guest: It can look daunting but there are great guides out there!

7:04 – Panel asks a question.

7:11 – Guest: We recommend a stack to our clients. We had been using backbone Marinette for a while and we wanted to start messing with others. Looking at other frameworks. Looking at design, I like that Vue doesn’t hide it from me and I can see what I need.

8:41 – Panel: I love that about Vue. I knew this guy named, Hue.

8:54 – Guest: I have been friends with Sarah Drasner.

9:07 – Panel: Sarah is great she’s on my team.

9:39 – Guest: I had been diving into JavaScript over the summer. I hadn’t done a lot of JS in the past before the summer. I was learning Vanilla JavaScript.

10:21 – Guest: I don’t like how it mixes it all together (in reference to the JSX).

10:44 – Panel mentions Python and other things. Panelist asks a question.

10:54 – Guest: That would be a question for someone who writes that.

11:30 – Panel: I am going to change topics here for a second. Can you talk about your talk? And what is a design system?

11:48 – Guest answers the question.

13:26 – Panel follows-up with another question.

13:35 – Guest talks about component libraries.

15:30 – Chuck: Do people assume that the component that they have has all the accessibility baked-in b/c everything else does – and turns out it doesn’t?

15:48 – Guest answers.

Guest: Hopefully it’s marked into the documentation.

16:25 – Panel.

16:36 – Guest: If you don’t document it – it doesn’t exist.

17:01 – Panel.

17:22 – Guest: “How do we sell clients on this?” We don’t – we let them come back and say, “we had to do less upkeep.” If they are following our patterns then...

17:57 – Panel: We’ve had where guides are handed off and it erodes slowly over time. Then people are doing it 10 different ways and not doing it the way it was designed.

18:31 – Guest: Yes, it should be baked-into the design and it shouldn’t be added to the style guide.

19:02 – Chuck: I really love Sass – and CSS – how do you write SASS or CSS with Vue?

19:12 – Guest answers the question.

19:23 – Chuck: You made my life better!

19:31 – Guest: If you have global files...you can have those imported among other things.

20:11 – Panel: What’s the best way to go about that?

20:24 – The guest talks about CSS, global designs, among other things.

21:15 – The guest mentions inverted triangles CSS!

22:12 – Guest: The deeper we get the narrower we get!

22:49 – Guest mentions scope styles.

23:12 – Panel: That makes total sense! We are using scope everywhere.

23:30 – Guest.

23:36 – Panel: How would you approach this? I start with scope and then I take them out of scope and then usually promote them to import for mix-ins. I wonder where is that border?

24:30 – Advertisement – Get A Coder Job!

25:09 – Guest answers the question.

25:53 – Panel: It sounds easy at first but when you are designing it you say: I know that isn’t right!

26:13 – Guest: I try to go through a design proposal.

26:27 – Guest defines the term: reused.

27:04 – Panel.

27:10 – Guest.

27:30 – Panel: We used to have this problem where we got the question of the following: splitting up the CSS bundles.

28:27 – Guest: That is the nice thing of having CSS in components.

28:49 – Panel asks Miriam a question.

29:02 – Guest: That’s often when someone wants a redesign.

29:54 – Panel: How do you decide on how many fonts to deliver so they don’t take over the size of the browser?

30:09 – Guest: The usual design rule is no more than 2-3 fonts works out well for performance. Try to keep that rule in mind, but you have to consider every unique project. What is more important for THAT project?

31:46 – Panel.

32:21 – Guest gives recommendations with fonts and font files.

33:37 – Chuck: What are you working on now with Vue?

33:45 – Guest answers the question.

The guest talks about collaborative writing.

34:10 – Miriam continues.

34:55 – Chuck: What was the trickiest part?

35:00 – Guest answers the question.

36:03 – Guest: It’s called Vue Finder and it’s through open source.

36:39 – Chuck: Any recent talks coming up for you?

36:49 – Guest: I have one tonight and later one in California!

37:02 – Guest: There were several Vue conferences this year that I was sad to have missed.

37:40 – Guest: Are you doing it again?

37:49 – Panel: How many do you attend?

37:57 – Guest: Normally I do 8-10 conferences and then a variety of Meetups.

38:33 – Chuck: Picks! How do people find you?

38:41 – Guest: OddBird.net and Twitter!

38:58 – Advertisement – Fresh Books! DEVCHAT code. 30-day trial.

Links:

Vue
React
JavaScript
C#
C++
C++ Programming / Memory Management
Angular
Blazor
JavaScript
DevChat TV
JSX
VueConf US 2018
CSS Tricks – By Sarah Drasner
Real Talk JavaScript
FX
Miriam’s Twitter
Miriam’s Website
OddBird

Sponsors:

Fresh Books
Cache Fly
Kendo UI
Get A Coder Job!

Picks:

Joe

Indoor Rock Climbing
Getting back into what you enjoy
RoboTech
History of Robotech
Vue.JS In Action

John Papa

How To Import a SASS file into every Vue Component in an App
Real Talk JS Podcast

Erik

AWS Amplify
Doctor Who

Charles

Dungeons and Dragons Stuff
Extreme Ownership

Miriam

Pose
New DND Game - Test Version

Special Guest: Miriam Suzanne.