Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Navigating Modern CSS with Andy Bell
480 Plays22 hours ago
🔗 Links
✅ Piccalilli: https://piccalil.li/
✅ Complete CSS (use KEVIN at checkout for 25% off): https://piccalil.li/complete-css/
✅ Every Layout: https://every-layout.dev/
✅ Follow Andy on Bluesky: https://bsky.app/profile/bell.bz
✅ Follow Andy on LinkedIn: https://www.linkedin.com/in/andy-bell-347971255
I'm really excited to be joined by none other than Andy Bell. We dive deep into the world of front-end development, focusing specifically on CSS. Andy and I discuss the nuances of web development, from the importance of soft skills in CSS to practical collaboration tips with designers. Andy shares his journey from being a designer to a front-end developer and delves into his recent projects like the re-launch of Piccalilli and his 'Complete CSS' course.
We also explore the rapid evolution of CSS, new features, and best practices for staying updated. This episode is packed with valuable insights and advice for both beginners and seasoned developers. Join us for an enlightening conversation that will surely enhance your web development skills!
Recommended
Transcript
Introduction & Enthusiasm for CSS
00:00:00
Speaker
Hello my front end friends and welcome to my podcast General Musings. My name is Kevin and in this podcast I talk about whatever is front of mind for me in any given week, usually in some way that's related to front end development. But this week I'm really excited because it's not just me here to talk about front end development and probably more specifically CSS, but I'm joined by none other than Andy Bell.
00:00:17
Speaker
Andy, thank you so much for coming to join me today. No worries. Thanks for inviting me home. It's good to see you again. Yeah, I always enjoy having conversations with you. For those listening who don't know Andy, he's someone who shares, I think, my love for CSS and also helping teach people about it and and try and make people enjoy it a little bit more and get past their frustrations with it.
00:00:40
Speaker
And I've learned a ton over the years from Andy. So i'm always um i always enjoy sitting down to talk with him.
Design to Development Journey
00:00:45
Speaker
Ditto with you. It's nice this time that you're not whooping me on CSIS battle.
00:00:51
Speaker
Yeah, that was fun. We'll have to have a rematch once you have a bit more practice with Yeah, I'm going to dedicate weeks to practicing and then I'm going to challenge you again.
00:01:02
Speaker
Yeah. So one of the reasons i was looking forward it to this call is because I do like talking to people about web development and everything, but it's not so many people that enjoy CSS as much as we do and talking about it because it is yeah know within, i guess, web development. It's a bit of a niche topic and then CSS is the niche within that.
00:01:23
Speaker
ah But it does make me curious because there's obviously a lot of people out there who don't particularly love CSS.
Flexibility Over Pixel Perfection
00:01:29
Speaker
And I'm curious what it is about it that you enjoy or why you like it. I think that, I'm a designer that turned into a front-end developer, so I only started writing CSS because people didn't build my PSDs properly. So I was like, I'm just going to learn it myself and do it myself.
00:01:48
Speaker
I think that's the thing for me, is like it's just the power that gives you, you know like the visual power to to like whatever you can imagine, especially now. It's like, you can do it with CSS. You know like it can manipulate things, you can...
00:02:03
Speaker
layer things out exactly how you want them to be laid out and it's it's just always been, even in the old hacky days, it's always been a huge pull to me to be able to like bring things to life which no other front-end language gives you the opportunity to do so yeah, it's always been a thing for me with CSS make things look great and that's why I love it Yeah, it's interesting that you come from the design background. I have a bit of one as well, and I think that's sort of why I got into it too.
00:02:32
Speaker
But obviously, you get you know if you're used to having your your perfect PSD mock-up and then trying to make it come to life, you know did you go because I know now you're not the pixel perfection type of person. Not necessarily. Yeah. yeah and Was there an evolution away from that? or You know, at the beginning, was it like, this needs to be exactly this yeah position? Yeah.
00:02:56
Speaker
I think it responsive design was the big sort of changing moment for me. But it was working on, like, really complicated stuff, too. Like, I used to be a product designer a, like, really high-complexity medical app. And think...
00:03:13
Speaker
that was the the the context that really opened my eyes to if you try and make everything pixel perfect you're in a world of hell um so that's when i started like exploring like how can you how can you get away from that like and and it was shifting my entire mindset from the source of truth isn't the sketch file as it was in those days it's it is the browser that is the source of truth and the sketch file is uh it's like a hint of what you might want and then the the actual the design work happens in the browser um so the creative work happens in sketch or figma and then the
Educating Stakeholders on Design Flexibility
00:03:50
Speaker
the real design work happens when you get in the browser and that the result of that was everything was more solid so from that from that moment on it was just the only way i'd like to work um so when it works well
00:04:04
Speaker
Yeah. So I do have a question to follow up on that then, because I get a lot of emails and and DMs and other things, because in my videos too, I always mention, you know, ah if I'm doing, say, a design from Figma or something like that, um I always say it's sort sort of it's our guideline. it's sort of like yeah you know it's what you're It's giving you an idea of the direction you want to go in, but it's not the the finished product.
00:04:28
Speaker
And I always get people coming and saying, well, you know, my boss is asking me for pixel perfection. Or yeah i had an email recently from someone who they were asking me, if is this a North American thing? because they were in Russia and they're just like, you know, here everything has to be pixel perfect. And I guess, you know, there is that.
00:04:46
Speaker
I think in a lot of places... the you don't have the communication i i guess back and forth sometimes isn't so straightforward but have is there anything for people i guess that are in that situation is there any advice that you have for them to maybe make it a little bit easier to to soften that a little bit Yeah, there's a whole, there's an education process.
00:05:07
Speaker
Like lot of this is a carryover from the old and olden days of web design, but before that print designs, so like in print design, the only way it's not pixel perfect is if you mess up your art direction for print, right? And so like what you design in InDesign or whatnot and what you send to the printers comes back looking exactly like you expect it to come back, even to the point where we use Pantone colors.
00:05:33
Speaker
to do things so like it is exact. But, and then the early, the early era of web design, like naturally it sort of evolved from print design. So there was that expectation that everything needs to be pixel perfect, which was fine because you had two resolutions to work with. You had like 800 600 and 1024 by 768. So again, it was fine, but now you have no idea what what viewport anyone's got. So like to achieve pixel perfection, you've got to introduce fragility into your front end.
00:06:05
Speaker
which would work really well with viewports of very specific sizes. But as soon as you start to get anything in the in-between sizes, it gets really difficult. We we made this site called viewports.fyi a couple of years ago, and we run an experiment, 48 hour experiment, and we got, think it over a hundred thousand data points.
00:06:28
Speaker
And the highest percentage was less than 10% of a viewport. I think it's less than 5%. I can't remember now. and And it demonstrated really well, like you you have no idea. So it's ah to to work to a rigid viewport spec and a rigid pixel perfection spec, you're actually excluding...
00:06:50
Speaker
a good experience for a lot of users. So it's, I think a big part of it is like educating the people above you and your colleagues on that, and then coming through with a solution that that works, um, as an
Collaboration and Feedback in Design
00:07:05
Speaker
alternative. So,
00:07:06
Speaker
you know, coming through with flexible layouts and, and, and educating people that like designers on how they work. Um, I think tools like Figma are a bit more helpful now with their layout systems. Um, but it's all about.
00:07:22
Speaker
like educating and communicating with each other and then rather than turning it into a battle it's never a battle um and you find that it'd be a slowish process but you can work people over projects and over time to the point where you're all singing off that same hymn sheet where figma does become ah a guide rather than like ratified law which it often is and and I do I feel for people in those situations because it is very common yeah
00:07:54
Speaker
Yeah. i think it's I think for some people it is, or maybe they feel they're not in like that that position to be able to like question things. And it's like, if I don't think, but my advice is usually don't question things, make it collaborative as much as possible. Like if you can make it the designer's idea that this is how it's going to work, then they're going to be on board with it.
00:08:16
Speaker
yeah um Not always easy. And I know you know some companies have a really good setup where things do go back and forth a lot and then other ones it's just so siloed that you might not have that opportunity yeah yeah you might not have direct contact with the designers which you know there's not much i can really offer to help in that situation because you are really in a psd to html context but yeah like
Studio Workflow and Client Interaction
00:08:40
Speaker
if you do have contact with the designer it's all about how you frame feedback too so um it's all about So say, for example, they design something and you know it can't be built without introducing fragility, then a good idea is to create a quick prototype and then talk them about it and use that as a ah mechanism of discussion. Say, look, resize this, you know, code pen, and resize it, and you can see where the fragility is and you can see where where it's problematic.
00:09:07
Speaker
And then come forward with the solution. You know, you I'm not saying come forward with a visual solution, but say, If this piece of content was in the source order like this, um, and it was displayed in this order, then we'd have a much easier time working with it. Like designers are really flexible people. Um, so if you give them a, like, what is the problem and you actually tell them what the problem is and give detail on it and like a possible solution, the designer will almost certainly be like, yeah, can we rework this and.
00:09:37
Speaker
know, that's what sort of paid to do at the end of the day is like paid problem solvers that make the solution look pretty is essentially what a designer is. So it's all about how you communicate and feedback loops and and being collaborators rather than, you know, enemies, I guess.
00:09:55
Speaker
Right,
00:09:59
Speaker
So I am curious about, because I know you have your own studio now, a set studio. ah What type of workflow do you guys have set up? So we've been we've been working on this for couple of years now. We've been chopping and changing and we finally landed on a It starts in discovery, which has always been the case, like a really deep research and what like to call the interrogation phase of the project where the client feels like a criminal because I'm just peppering them with questions and and we're gathering all this information and we're coming up with information architecture, wireframes or priority guides, whatever's relevant.
00:10:39
Speaker
Then we move on to creative ideation, which is... all Figma, all creative, and it's as pushing the boundaries as far as you possibly can with no regard of how it's going to be built.
00:10:51
Speaker
so it's like unleashing our creatives and saying look designed exactly how we want it to be um and then with we then move into like a prototyping phase where we then test these ideas in like low fidelity prototypes and then after all of that and so during that the designers refining the the figma comps to you know based on the feedback so that's what we do that sort circular loop And then by the end of that, we've got a Figma guide that is relevant to an actual build. And then we do like sketching up and backlog planning and build and it works well.
00:11:26
Speaker
Because you get all the all the hard bits out of the way early early on and then developers can then focus on writing really resilient code then rather than, oh I don't know how i'm going to build this because they've already prototyped it so they know how they're going to build it.
00:11:40
Speaker
And yeah, the end result. Yeah. Worked quite well. Yeah. So the client never sees a Figma ever in the project. They'll see a loom maybe that sort of references a Figma and shows a prototype version of that. But the the ah the tangible thing they get is in the browser.
00:11:56
Speaker
So yeah, which is really important because then their source of truth is the browser too. And that's that's a really important position to be in. Yeah, that's that's really interesting. you ever have anybody, like i mean, it depends, I guess, on the client's past experience. Like, have there been some that really feel like they're missing something along the way there? Or is it just for them, that's what they're getting and they're happy because they're seeing stuff like the progress being made and the design direction everything?
00:12:26
Speaker
It's a good question. no we haven't had anyone who thinks they're missing out. We have like messed up before. We have let clients into the Figma, which was a nightmare, a disaster. So that was why we had this like strict rule, but the updates are so frequent and and there's like constant like stream of communications that they don't really feel like they're missing out. The the main thing that we do, like a lot lot of agencies don't do is like we take complete control of the project as well. So like,
00:12:53
Speaker
We put ourselves in a position of this is what we're doing and this is how we're going to do it unless you fundamentally disagree rather than asking permission.
Client Management and Learning from Challenges
00:13:00
Speaker
So we're not saying, can we get a sign off on this? Can we get sign off on that? It's like, this is what it And if you, if you really don't like it, tell us, but otherwise we're going to carry on. And and the clients love that because.
00:13:12
Speaker
like they don't have time to do their day job and a design project that's like out of scope for what they do so really it's like an fyi situation rather than a you're blocking progress because you're not signing this off it's like now we're going to keep trucking on um it's like building that trust with the clients so that they trust that we're making the right decisions for them which is true because we're the actual pros. So like we should, it's like a builder. You wouldn't get a builder in and start telling them how to load bricks with you. So it's like, you let them do their job. and And so we let, we get them to let us do our job.
00:13:50
Speaker
Um, and it works. Yeah, it works really well. Awesome. That's cool. It does make me wonder Do you vet the clients ahead of time before taking on things? Just because you always hear of... There's already so many horror stories, but I could see some people not being down for that type... Just letting you take that control? There's a long sales process to it. If you thought that Discovery was interrogating the sales processes... And I'm always like...
00:14:19
Speaker
yeah i spent a lot of time talking to clients before i even let them anywhere near the studio um and like i'll they will realize that i'm doing vetting questions but um i'm um i'm asking specific questions to try and work out like size them up work them out ah i'll create a bit of a problem for them you know like to try and enable not an argument but like a a disagreement um right okay to see how they respond to that disagreement and and before we even talk about like when the project's starting how much it's going to cost essentially it's like we try and work out what size them up and then if if they don't pass that phase then i'd often just pass them on to someone else um because like you just know you can smell red flags know i've done this for a long time you can smell red flags on a client
00:15:06
Speaker
um easily and if there's one or more red flags it's it's not happening because we're not going to be the right type of agency for them um it's like the clients that want ultimate control like they're better off going to work for the different agency than us so we're just up front about that yeah awesome yeah well that makes sense and Yeah. I think it's one of those things for people that are looking at starting that can be really hard because you don't want to turn on work.
00:15:37
Speaker
Um, that's the thing, right? When you start, like if you, if
Educational Endeavors and Piccadilly Revitalization
00:15:40
Speaker
you're like watching this now and you're thinking, can I want to start as a freelancer or ah an agency, you're going to have to take on clients that are bad news is just part of it. But the benefit of that is it'll make you so much better at managing clients.
00:15:54
Speaker
Like you have to go through a bit of hell to to like experience certain situations and then you know, okay, I know what to look for next time. so I'm going to try and avoid that. You know, help you work out your own processes. There's a little bit of pain to it, but over time you start to get a really good like knack of dealing with all different types of people by doing client services.
00:16:19
Speaker
Yeah. um All of that sounds like a fair amount of work for you. yeah And I am actually kind of curious because i found out about you and everything you were doing because you were teaching some CSS stuff on your blog and you you always had good articles.
00:16:39
Speaker
And then there was every layout that you did with Hayden. um And I know then at one point you took a bit of a hiatus away from teaching things or sort of the public facing things anyway.
00:16:50
Speaker
And I wasn't expecting, you know, I knew you were busy with other stuff. I wasn't expecting you to re-service into the the educational side. I'm just curious, I guess with the studio going on and everything you have with that, why you decided to to re-emerge, know, relaunch Piclily and the other things you're up to now?
00:17:07
Speaker
I think so the hiatus was purely time related problem. Like, so I was a freelancer and then i evolved into the studio and those first t years of the studio was just an unbearable amount of work. Um, so, and and we had to do so much work to sort like generate a nice buffer and, um,
00:17:29
Speaker
but get everything in in good shape. So like i just didn't have time. I didn't have time to even like, i was so out of date with everything that was going on the web because I was just so tunnel visioned on that one thing.
00:17:41
Speaker
But then towards the end of 2023, like everything was smoothed out and everything was working quite well. And, you know, internally we, we wanted to carry on doing blogs and stuff. And i was like, why don't we bring Piccadilly back to life? Um,
00:17:57
Speaker
and then yeah we as the studio we completely rebranded it redesigned it and redesigned it sorry and put a hell of a lot of effort into what it is now and yeah now it's like a proper publisher and it's so glad for it too um because i was definitely felt like uh i was missing something i did the google learn css course in the interim and I was like, I need to write in my voice again. la i need to write.
00:18:26
Speaker
and need to do what I like to write again. so yeah, sort of created the environment to do that. And the rest is history, I guess. And yeah, we keep trucking along with it.
00:18:37
Speaker
It seems to be going down quite well, which is great. Yeah, I think it's it's been awesome seeing the relaunch of it and there's been a lot of good stuff. And also like the other authors and other stuff you're bringing in there too. It's nice to sort of have a range of voices, but the quality it Still got an empty draft for you, Kev.
00:18:53
Speaker
Yes, I know, I know. it's I've been thinking about it a lot. I just need to find the time to actually work on it. It'll be there waiting for you. and Yeah. Can't wait to get you on there.
00:19:04
Speaker
But yeah, I mean, that's something I'm going actively do more now like, was trying to work out process, an editorial process, because I used to write CSS tricks back in the day, and I loved Chris's process, which was, you write however you want to write, and then when you're ready, just give me a shout, and then we'll sort of refine it, and... and make it work and i i do a very similar one um where i get authors to to write exactly how they want to write and then i come through i run through their article and i'll be i'll find details in there like i didn't understand this bit um so do you want to just expand on it a little bit and sort of help them mold it while returning their voice like mold it into something that's just a little bit more
00:19:47
Speaker
like malleable and and detail rich and then yeah and then we we publish it in your own voice so every author on the site if you're American it's in American English because we use the HTML language attribute um to to sell out like we don't make anyone do anything that they don't like to do it's like you you are you and this is your voice so that's what you get published as on Piccolilia and it seems to work really well All the popular articles are from other authors too, not even mine. So it's working out really well.
00:20:23
Speaker
I guess I am curious. I know you said you sort of had that you something you wanted to do or you wanted to talk again in your own own voice in that. But just like, what is it about, I guess, writing the articles and teaching and all of that? Like, is there something specific that draws you to it or is it just you enjoy it and that's it?
00:20:41
Speaker
I feel like I've always had this feeling where like i feel like i got to pay back to the industry. light When I came in, people giving out
Valuing Diversity in Tech
00:20:50
Speaker
so much stuff for free and and there were so many articles published. like People that are still in the industry now like i I remember I came as a designer, so I didn't understand all the technical jargon. and I didn't understand the sort like academic style writing that was prevalent in those days. And, know, I had to scrape through school. Like I was, no way I was going to be able understand any of that. And so when I found authors that wrote in a good voice, i always thought to myself, well, I need to do this one day to help the,
00:21:25
Speaker
people behind me like there's going to be people like me coming through who have come from a similar background and i don't want them to feel like they're out of touch or i don't want them to feel like they can't understand something like it's just a different angle it's why like your videos too like it's just a different angle and it's it's easier to understand um so it might not be to everyone's taste but that's that's the sort of main thing for me is that it's it's going to help someone and that's the main thing so that's what drives me always um well As long as one person gets some value out of it, then I've done my job, you know? And that's if that's your mantra with writing, then you're always going to write really well. And you if you always think, um I couldn't find the answer to this on Google,
00:22:12
Speaker
But now I know the answer, I'm going to pay it back and I'm going share what how I did this. And someone will find it in the future and they'll thank you for it either would directly or just, you know, just by enjoying your article. So yeah, i I've always had that mantra and I always will do too
Complete CSS Course and Soft Skills
00:22:31
Speaker
yeah that's Yeah, that's cool. and make yeah When you were talking about scraping through the technical articles, it's when I first was trying to learn JavaScript, the amount of Fubar and FizzBuzz stuff that I was looking at, I was like, what are they talking about? I don't understand any of this. I could not i could not get a job in a big tech company. I'd never get through the interview first. Not doing those whiteboard interviews. Yeah, no chance I'd get through that first. yeah
00:22:57
Speaker
But it is is very it's very interesting how so many people ah come from that similar background. Everyone, I um i pre presume, thinks that like people that work in tech are like you know computer science graduates, but so many of the great people in our industry are the opposite of that. And I think that that's really good. That's what I love about it. Yeah.
00:23:20
Speaker
It shouldn't be gatekeeped like that, should it? Yeah. Yeah. It's the the diversity of... the backgrounds and the different viewpoints that people come in with is is really good.
00:23:31
Speaker
Yeah. Yeah. Um, so obviously with, with Piccadilly being around and, and relaunched, you also, sort of step things up with your course, complete CSS.
00:23:44
Speaker
Um, since I, I've, I struggle with making courses a little bit. And when I saw even like the name, when i saw the name complete css because i'm i i have trouble with like scope creep and everything else like that like it just and i was like oh my goodness that's an undertaking you know it was a hell of an undertaking and it's not even like it's not like um a stelle and eric's the book that they've got that fat yeah like i did a course like that before where um
00:24:15
Speaker
the one on web dev and it was basically like fancy documentation um and i always i always wanted so like back in the old days i was like i had this idea of css from scratch like that was my idea from a course And it was three parts. He was like, here's the basics of CSS.
00:24:35
Speaker
Here's a, like how to communicate, how to plan, how to actually build things in a good way. And then here's how to build a really good thing. So did the first part with Google. Um, I thought that pretty much covered what kind of the first section would be. And then I thought, well, I've still get to do the second two parts. Um, and I just about gotten over right in that other course. So I was like,
00:25:00
Speaker
I think I'm ready to go again. And then, yeah, that was what the, the whole focus of that course was like, don't think people realize how important soft skills are in writing good CSS. Um, so I just focused really heavily on that. was like, we, me and Jason, the designer at the studio, we created this environment, like, and we, we, we designed the context of the course as if we were two people that never worked with each other before.
00:25:26
Speaker
And we created all these scenarios and problems that would come up. And then we worked out, how would we deal with this in the studio? was like two colleagues that worked together a lot. Pardon me. And so we just created all these scenarios. that right I can teach people now. I can teach people.
00:25:43
Speaker
This is how to deliver feedback. And this is how to deal with problems that come up. And this is how to communicate effectively with a designer. And this is how to like refine a design concept with a designer rather than just building things verbatim.
00:25:57
Speaker
And the end result is like a really nice website that you build and like pattern library and component systems. So like go through all the architecture that goes with that. So it's like a, there's a, there's a theory aspect to the course, but it's very practical course as well. And the idea is by doing that,
00:26:15
Speaker
you you're gonna be a much stronger position to like progress in your career because you'll learn so much of like what's important in being like a senior level developer which isn't being good at code it's actually been good at communicating and organizing and then with that you learn some css or a lot of css um but in like ah in an architectural sense and like how to be defensive and how to
Expanding Educational Offerings
00:26:40
Speaker
how to build things that that scale efficiently and stuff like that so Yeah, had it all, it was burning a hole in my pocket and I was like, just need to get this out. So pinched my nose and got on with it last year and God damn, it was a lot work. It was like 80,000 words, I think, because the total word count by the end of it. Yeah, it was a big one.
00:27:02
Speaker
But... The real reason we did it was we wanted to do this core system on PicclerList. So was like, we'll use me as a as a sort of testing subject. right Yeah. And evolve it.
00:27:13
Speaker
Yeah. I found it really interesting that you did decide to take that approach of making it more, or not more, but having that, like the collaborative side part of it. And not just like, here's how you write CSS to make a pretty looking page. Like there was that extra dimension to it that i don't I haven't seen in any courses that I can think of, like not just CSS related, but just like dealing with that, as you said, the soft skill side of things.
00:27:37
Speaker
So was it was that like part of it from the very beginning? Like this has to be included? That was the goal? Or did that sort of evolve into it as you were going through? No, that was the, that was the, when I first started sketching out the ideas for the course slide, the sort of focal point of the entire course is soft skills.
00:27:57
Speaker
Um, and their importance in CSS. Cause I've been doing this for forever. And as I used to do like CSS consultancy as well. And like thinking back to all the projects I did there, the ones that went wrong had very little soft skills in them. And the ones that went really well, that a lot of the work was me actually,
00:28:16
Speaker
like working with clients and and doing all of this like planning work um and, and, communication work and then the like a small percentage of the project was me actually authoring css for them it was a lot of like yeah pre-work and then delivering hours like that that's always been successful for me and it's about time i taught people that and like you said soft skills are just so like underrepresented in this industry and it's such a crucial skill like to learn you can get it from books like um
00:28:48
Speaker
Sarah Dresner's book, the management book covers it really well, but unless like a lot of people probably don't want to become a manager, right? So, but it doesn't mean you shouldn't learn the soft skills that are required to do that job because it will make you a better developer. There's no like maybe about it. You will be a better developer by improving your soft skills. Um, and just the better colleague as well.
00:29:13
Speaker
So yeah, it works for everyone. Yeah. Um, I guess now, with with that one done, you have just recently announced there's two more courses that are coming up with Nicolili of ah JavaScript for Everyone and Mindful Design, I believe are the titles of them. um are they before we I guess we'll we'll talk more about what each one of them is, but I'm curious, is there any sort of of that aspect in those two or are they more focused on JavaScript and design?
00:29:41
Speaker
um So both authors, Matt's doing the, so Matt Markey's doing the JavaScript one and Scott Riley's doing the design one. Both of them have very similar ways working than I do.
00:29:55
Speaker
So there will be, for sure, elements of that. Matt is going to be a very, quite technical course, but... I don't know if you haven't read Matt's work for you, you need to read Matt's work because he's like a master at turning technical concepts into something that's really sort of easy to understand.
00:30:15
Speaker
And he's also quite, he's a really funny writer as well. Like he's writing so funny. Like you'll find yourself laughing throughout the course because he doesn't do deliberately, but it's just his mannerisms and the way that he writes is, it's just so humorous in his analogies. yeah,
00:30:29
Speaker
if you're like if you're struggling with javascript like when matt's course comes out that struggle will be over because he's so good at explaining the the hard things um and making you understand them so that i was really really wanted to get him to do a course because Like we've known each other years and always thought like Matt needs to do a proper JavaScript
Managing Studio and Staying Current
00:30:50
Speaker
course. Like, so i was straight on that one.
00:30:53
Speaker
And then Scott, he he comes at it from a very soft skills, like the design course, be very soft skill orientated because that's what design is. Even if you, like, you consider yourself to be a UI designer, there has to be lots of skills before you even start making rectangles look nice in Figma.
00:31:13
Speaker
So he's teaching, teaching people like how the brain works, right? How people work, like how people's behaviors work and how to not, not to exploit that, which a lot of designers do with dark patterns, but in just to like improve people's lives with your design work. And he's got a very practical course as well. So it's going to be going through a whole design project and setting you up to do projects really well in the future as well. So I'm really excited about that one.
00:31:40
Speaker
that was a video course as well, which is also exciting. Yeah. So, yeah, I guess that does go better with design. when i why that one Yeah. why yeah he couldn't i mean he's He's written in a book called mindful design. And like when we were chatting about I was like, the thing I regret the most is I didn't do this is videos. was like, we'll do his videos then. Yeah.
00:32:00
Speaker
We'll make it happen. So yeah. And that's the, that's why we created this course platform on Piccolili is like, we want to give authors, whatever tools they need to deliver the education that they want to deliver, like whether that's videos, writing, interactive demos or whatever, like our job as the studio now is to to support them with that infrastructure. So building in all the different pieces that they need in order for their lessons to to really make sense to people. So I'm excited to do that this time rather than what I was doing last time.
00:32:32
Speaker
Which was, I've been a husk of a person. And while I was writing several thousand words a day, it was not fun. it is really It's very satisfying work, but mean, you know what it's like when you're in the middle of a course. is.
00:32:47
Speaker
Yeah, really old really test the old mental health. It does, definitely. so this that my course is the the last big course I'll ever do.
00:32:59
Speaker
I might do little mini course in the future, but I'll never do a course that big ever again. yeah i don't think my partner will let me do another course that big again.
00:33:09
Speaker
Never say never. but yeah We'll see. So, I mean, I guess but that transitions, but nicely to what the next part I wanted to ask you about was this between, i guess, managing the studio, having particularly creating a course, getting, know, working with other people collaboratively on other courses.
00:33:31
Speaker
When it just comes to like front-end development in general, and i guess CSS more specifically, but one thing I get asked a lot is how do I keep up with everything? And I'm really curious how you keep up with everything.
00:33:43
Speaker
hi I am a very annoying person, Kevin. um I'm a very organized person. and That's the key to everything for me. like I block my time out in a day. like if i just let If I let people pull my strings, I'd never get anything done. so like i'll deliberately I'm very lucky in the studio. like The people that work in the studio are just ridiculously good at what they do.
00:34:09
Speaker
And there's there's times where I'm very busy in the studio, like early projects, but generally i don't really do any production work for for the agency. Like it's very rare. a project working on now, I'm actually doing a two-week sprint, which um is the first one for a long time where I'm actually getting really deep into so some CSS, but generally i don't really do anything. So...
00:34:32
Speaker
once Once the project is running nicely and we've we've got it all going, like i tend to dip out and that's where i like my feed bin is just full of stuff. I'm just a very fast reader, so I just skim through things until I find something that like. I'll watch all the videos, listen to podcasts and stuff. and then A good way of doing that is I run the newsletter, I pick a list, so it forces me to stay up to date with things as well. So I do a lot of reading.
00:34:59
Speaker
So, yeah, it's like running managing your own time and not letting people manage your time for you as well. like not I think this one bit of advice to give to anyone works in client services is...
00:35:10
Speaker
if a client says it's an emergency, unless something's on fire, it's not an emergency. Like manage, manage their expectations. So like I'll often like DM from a client in Slack and be like,
00:35:23
Speaker
I see the problem, we'll get onto it, but it's, yeah, i'll I'll get back to you. And it's like maintaining that relationship. I think if you let people, like like I say, like use your time, you'll never get anything done. So it is doing things in dips and flows and And then just being proactive, I guess.
00:35:47
Speaker
But it's tiring also. So I'm never as up to date as I want to be, that's for sure. And I see all this cool stuff like those CSS carousels recently. I was like, oh, really want deep dive into them. And then...
00:36:00
Speaker
Well, don't really have time for that right now, but luckily you made a good video. So yeah, that's what kept me up to date on it. Yeah, that's one advantage I've found lately, especially considering there's so much going on, is if I start making a code pen on something, I'm like, I should just record this. That can be a piece of content. So this is literally my job right now. Yeah. yeah That's it. I mean, that would have been a dream for me is that I'd just do that it's for the job.
00:36:28
Speaker
But there's a benefit in running the agency as well because it keeps us like, like our whole mantra, because it's like, it's front-end education for the real world, right? And we couldn't do that unless we were doing real world projects. And a lot of the content I write, if you look at light the last couple of years of articles, is there's a link to a client project in in all of them, as in not not explicitly, but the vast majority of the time it's something we've done for a client that then sort of white-labeled, I guess, and turned into a piece of content. And it's like that there's no more real world than that. And I think if I didn't do that, like, real-world work, I think I'd find myself sort of
00:37:08
Speaker
becoming a demo air merchant and i don't think we need another one of them so yeah there's a benefit to the stress i think that's what keep selling myself anyway yeah but um the benefit particularly is now is we can be really selective about clients and that that is really valuable so yeah yeah it's i'm really happy about that
CSS Innovation and Foundational Knowledge
00:37:30
Speaker
Yeah. And I definitely, that's one thing for me of like trying to balance, like finding time to work on real projects, just so it's not all just like these little demos that are fun to build, um, and making sure, you know, I,
00:37:46
Speaker
As much as i want to be like, here's this cool feature, but it's like, why does it even matter if I don't know how to use it in like a real context? I think that's such an important thing, especially with yeah CSS. yeah And it's also why it's hard sometimes. like The Carousel one was fun to play with, but I'm always trying to find a bit of a balance, because like that's great, but nobody and can actually use that for the next probably three years in production. So it's like... You know, like it's fun to talk about some of these things, but this there's finding that balancing act of like, you know, what's what's actually useful for people at the same time.
00:38:17
Speaker
Yeah. I've got a list item in my articles to write list, which is CSS carousels, progressive enhancement question mark, which I think is the right way to approach it.
00:38:28
Speaker
So yeah leave me to simmer on that one. I'll find a way of turning the every layout reel into a kind yeah Yeah, I think that the from what I've heard the version 2 of the spec might be better and I don't know what what the timeline is for that one at all. yeah Version 1 is not there yet, but at least that one will you'll be able to link in like actual buttons and it's not all generated content.
00:38:50
Speaker
That's the big the the big problem I've got. I refuse to use an icon font and I've seen there see the problems of icon fonts. I'm also not running into it as well because we had this to container queries, you remember, where everything changed and and then I had to go back and update loads of content. and I'm just going to wait for version two.
00:39:13
Speaker
Yeah. yeah It's more relevant for people then. Yeah.
00:39:18
Speaker
um i With, sort of I guess, all the new stuff that's coming, we have you know carousels you mentioned, there's mixins and functions are getting added now. We had nesting, we had container queries.
00:39:29
Speaker
ah It just seems to be like... And right now, like I think, what was the other one too? There was, I don't know, there's progress on like if statements. I don't know. There's so much that's sort of either... just happened is in the progress of happening or is right around you at least being talked about.
00:39:44
Speaker
I'm curious what you think about what seems to be... ah i think we started probably around the same time taking it a bit more seriously when it was much slower paced. Features just didn't come out like this.
00:39:55
Speaker
yeah um I'm curious what you think about like the speed that these things are coming out at. So that I think this piece is fine. Like, I think what's what's not fine is that I think people think that they have to know all this stuff and you don't.
00:40:11
Speaker
Like, I think they the magic of CSS, like you asked earlier, like what i really like about it, what i probably should have said is that CSS written 20 years ago still works now. and That's the magic of CSS. Like, so the point I'm trying to make with that is like, we've got all these new features, which are fantastic.
00:40:30
Speaker
um But you don't have to use them unless you've got a use for them. Like and the right at the end of the course, there's a section, the wrapping up lesson where it's like, why didn't you use this tool? And why didn't you use that tool? And it's the point I'm making there is all of these tools are really useful and all these new capabilities are really useful, but unless there's a need for it,
00:40:53
Speaker
you don't have to necessarily learn it or you don't need to use it. So like don't force layers in unless you need to use layers and and don't force nesting in unless you need to use nesting and et cetera, et cetera. It's like, try not to like use a feature because it's cool and new.
00:41:13
Speaker
Try to be more pragmatic about what features you want to use. So like the carousel is a really good example. And like we both just touched on like, it's not ready yet and it's not going ready for a long time. So take a, take a keen interest in it for sure. But like, don't start planning your workflow around it because until you actually need to use it then, then learn it deeply. Um, and I've got that with like mixes. like I've not used SAS for years now and I've sort of,
00:41:41
Speaker
learn to work without mixings. So I'm not, wouldn't say I'm overly enthusiastic about mixings, but when they do come around, like, unless you have a real need for them, then don't feel like you have to use them. and So what really matters with CSS is understanding the cascade and specificity and and understanding how the browser works.
00:42:03
Speaker
And then you can you can work with CSS however you need to work with it and it'll be fine. Yeah, I 100% agree. People have often ask me, is is CSS getting too complicated now? And I'm like, it's no more or too complex. It's already complicated. Yeah. Yeah. I'm like, it's not more. It's just like, it but you know, a little bit the same what you said, like,
00:42:26
Speaker
somebody who's learning it now can, doesn't, you're not, you don't need to, there's the breadth of what you need to learn is much bigger. But if you get that foundation, that's the same foundation that somebody would have learned a long time ago. It's, that's what you're going to build on top of. And I think that, you you know Now when I see these new things come out, I can sort of figure out how they work relatively quickly because you understand the foundations of what they're all being built on top of and and you just need that that deep knowledge of the foundation the yeah the foundational stuff and then you should probably you'll be okay.
00:42:59
Speaker
Yeah, and browsers work now as well. So, like, you don't have to... don't have all that baggage that we've got, like, the crap that we went through. Like, it's... Like, now you use Flexbox and it works. And so I envy people that are coming into CSS now. Like, i imagine like learning layout with an actual layout system rather than hacking it together with something that's not designed for it. And so, yeah, it's...
00:43:26
Speaker
I imagine like coming to CSS now, you look at all the things they can do and it probably is quite intimidating. But my advice to those people is stick to the basics. And it's like, I'm a big football fan, and soccer for people in America. but yeah And like the difference between a professional footballer and an amateur footballer is that the professional footballer does does the basics perfect every single time.
00:43:49
Speaker
Like that is what makes them a professional. And it's the same with any professional athlete. So think of like that with your CSS. Like if you get the basics and you get the basics rock solid, like you can navigate almost any problem in CSS because you've got that fundamental understanding of how the CSS works.
00:44:09
Speaker
Um, and I'd say that like, if you, if you want to Really put time into learning CSS is focus on that. And then no matter what features come out, because you understand how CSS works, you understand how the browser works, you'll be able to navigate those features more efficiently than you probably can now.
00:44:26
Speaker
Yeah. Yeah. Yeah. That's... With the browser support thing, or just how browsers used to not work, i every year I do a poll of my audience on sort of their biggest, you know, different things. One of the questions their biggest complaint about CSS and browser support is always one of the top ones. And I think it's, they're saying it, I'm pretty sure in terms of like, there's these new features I'd like to use and I can't yet speak. Yeah. Cause anytime I see browsers, around me that just means they don't work the same wherever I use it. That's how I see browsers word issues coming up. Yeah. And like, you don't know what
Quick CSS Preferences Q&A
00:45:00
Speaker
browsers for problems actually mean anymore. You didn't have to put an IE class in your head.
00:45:07
Speaker
You know how to do that. You're in a good position. Yeah. It's funny. and it But even with like new features, like progressive enhancement is like, if you get into progressive enhancement, your stress levels will dip.
00:45:20
Speaker
considerably like trying to force a browser to do something that it doesn't support yet you're only going to end them in pain whereas if you like build up progressively and and work like that it doesn't matter if a browser doesn't support feature because that baseline experience is is key. like I did that article recently about using the share API and I think it still doesn't work in Firefox, does it? And it doesn't matter because like the way we built it was determines the support in in advance and
00:45:53
Speaker
If, if neither clipboard share API is available, then it renders the ah URL as a string on the page. You know, that's the minimum viable experience. And it's, if you build like that, it doesn't matter if you used and use the news, the greatest, latest things, because eventually browsers will catch up and then suddenly it'll work.
00:46:12
Speaker
And that's the important thing. And the most important thing is that the user at that time gets the right experience for them. rather than like a half-baked experience that wasn't tested for. Yeah. Yeah.
00:46:26
Speaker
Yeah.
00:46:29
Speaker
So, yeah, I think I've already taken a lot of your time, so i don't want to keep you too much longer, but I do. We're on, we're talking about CSS. Sorry. I have five rapid fire questions that I like to ask all of my guests.
00:46:41
Speaker
Yeah. And they're ones I tend to get asked a lot and I never have a good answer for. I'm seeing if I can get you. Putting the pressure on now. Yeah. But we'll, I'll start with a really easy one. This one I do have an answer for. What's your favorite unit?
00:46:58
Speaker
CH unit. Awesome. Perfect. It's one zero character, but your audience ordinows our current. And if you don't, then look it up. Now you do. Yeah. um Is there a thing in CSS that annoys you the most or that you wish was different?
00:47:17
Speaker
Oh, that's a good question. fact, I was complaining about this today. the When there's the obvious one, there's the like the weird keyword names, like there's the nu now rap or no rap. from there i't like but grid Grid area property should support quotes. You define your grid areas with quotes, you should be able to then assign a grid area with quotes also. That's silly.
00:47:42
Speaker
Yeah. lee co yeah
00:47:46
Speaker
uh yeah i've definitely been stuck there going why isn't this working so many hours of my life have been wasted yeah yeah yeah uh with all the new things that are coming to css now do you have a favorite one or something that you're like oh finally we have that The new, new stuff. Yeah. Text box trim.
00:48:07
Speaker
as a designer that has been a pain point for years for me and lots of hacks and now I'm using it immediately. I'm already using it in production now because it's like, yeah, it's not fully supported yet, it doesn't matter. It's a progressive enhancement and the people that get it are going to have some tight typography as a result and alignment.
00:48:29
Speaker
Yeah. I love that. Such a good feature. Yeah. Yeah, that one was a long time coming to you. Like they just kept talking about it. There's the art like that medium article that was written probably like five or six years
The Future of CSS and Web Design
00:48:40
Speaker
ago, maybe longer. And it was just like, it going to happen? Is it good? And then finally, yeah. um Is there a CSS best practice that you disagree with?
00:48:53
Speaker
Best practice in quotation marks. i you Interesting question that is a Best practice in quotes I disagree with. Yeah, a lot of people's ideals on layout don't agree with.
00:49:05
Speaker
I think I'm a bit of a black sheep on that where I very rarely reach for grid and I very frequently use Flexbox, but I think it's ah it's an attitude towards layout that's...
00:49:18
Speaker
not not quite mainstream but yeah the i think let the browser do more work than you think you need to let it do and you'll you'll be in a better position um whereas grid to me always feels very specific and very rigid um which is supposed to be that's what it's designed to do like that's why the design grid was for editorial layouts and and stuff so it's like I think some of the decision making that that happens in the open, I think might be slightly misleading about how to do the best job.
00:49:48
Speaker
Um, but you know, that's why we all write in it. We all give our opinions and things. So yeah, I certainly do that. Yeah. i'm I'm definitely in the grid first camp, but I do agree with you in letting the browser or trying to let the browser make as much decision making as possible. So it's definitely a little bit of like,
00:50:10
Speaker
a mix there. Part of it might also come because for the most part, my audience is more beginner friendly. And so like, yeah it's a lot easier to get like what they want. If you're just saying like, use grid, it's going to give you the sizes and throw the the media query in there. Whereas trying to explain how to make an intrinsic breakpoint happen with a flex box, pushing the limits gets a little bit more complicated. Yeah. Yeah.
00:50:34
Speaker
Yeah. Yeah. I definitely agree with that for sure. I think grid is like, if you're in a pixel perfection situation, which a lot of people are grid is very helpful for that. Yeah.
00:50:46
Speaker
Yeah. And my last question, uh, is there a feature that you think is missing in CSS right now?
00:50:54
Speaker
Hmm, that's a good question. tell you what isn't missing what we don't need is masonry layout. I think one thing that I think CSS would make CSS really, really, really good is native widow and orphan removal. So text wrap balance and text wrap pretty are really good.
00:51:20
Speaker
But lara I come from a traditional design background and worked with creative directors that used to yell at you if there was like an orphan, like a single word at the bottom of the paragraph. and like typographic river i know jen simmons and co are doing lots of work on that in safari but like more not necessarily rigid but more more typography control i think would would transform web design in a way that you probably doesn't you don't even realize how powerful it would be in terms of like competing with app design. right yeah I know we've got a view transition super like what what makes apps look more polished than web is is a lot of the time is the typography is under extreme control, which it which it does need to be. and
00:52:05
Speaker
So that for me, like more typography tools in CSS, I think will will really sort of elevate the standard of design on the web for sure. Yeah. I can probably bring more designers into it as well. Yeah.
00:52:17
Speaker
Yeah. Which is a good thing. It's a really good thing. All the the H and J controls in InDesign. missed some of the what we could do in there. Yeah. yeah that's it it's it's so so imperative like with all of these new things that are coming out like i cannot wait to implement them on piccola like that's something so important to me is reading experience and like it's still frustrating it's still not right you know like want to be able to control everything about the typography but we'll get there you know i feel i feel like we're in a good place um with how it's evolving so yeah waiting waiting
Closing & Listener Offers
00:52:50
Speaker
and hoping
00:52:52
Speaker
Awesome. ah Yeah, I definitely agree with that. And with that, i just want to say thank you so much for your time and for joining me today. Thank you. um I know we've talked about you have a lot of stuff going on and there's always, you seem to always have like this extra new website that I didn't know about. Like you had your viewports.fyi and then there's there's always another one that has like your specific landing page to get a message across. yeah But if you if people do want to follow you and they're not already, what's the best place or places to keep up with everything you're doing?
00:53:22
Speaker
So my website, bell.bz, that's got a links page on it that sends you everywhere. i'm Social media-wise, I tend to just stay Blue Sky now. Personally, Piccolilly is everywhere, but I don't like having multiple social networks to manage. So yeah, I've settled on Blue Sky. But yeah, that's the best place to find me, really, and then go Piccolilly and read some content.
00:53:47
Speaker
Awesome. Yeah. And so yeah, links to all of that will be in the show notes. And if yeah anyone who's listening is interested ah in Andy's course, complete CSS, he's been kind enough to give a coupon code of Kevin for 25% off.
00:54:01
Speaker
So definitely go check out the course and use that. um Yeah, it's it's a good course. I've done it. So i'd encourage you to to go through it as well. Thank you. Yeah. There's PPP discounts as well. So yeah, if you're coming in from overseas, you'll probably do better than 25% off as well. Yeah.
00:54:18
Speaker
Awesome. Nice one. Yeah. Thank you so much. And that's it for this week. Yeah. ah Thanks again, Andy, for you being here. And thanks for everyone who's been listening. And until next time, don't forget to make your corner of the internet just a little bit more awesome.
00:54:31
Speaker
Cheers, everyone. See ya.