Hi everyone. My name is Patrick Akio and
joining me today is Kevin Powell.
He teaches people how to make the web and how to make it look
good. He's a real CSS Guru.
So naturally we touched upon everything CSS related.
Whether it's Frameworks and even how he taught himself HTML and
CSS in the first place. I'll put all the links to a
socials in the description below.
Check him out. And with that being said, enjoy
the episode. I was checking out your YouTube
videos. Actually, you've been doing this
for five years? Yeah, it's a long time now.
That's really cool, man. I really admire that.
How are ya, why did you start doing YouTube videos in the
first place? I started because at the had
been hired, as a teacher and where I was teaching.
It was a design school, print design primarily, but they had
the curriculum at just got updated and had an introduction
to web like HTML and CSS, and all the teachers were print
teachers. So when I got hired, everyone is
just as the curriculum, it was being changed and me and one
other new teacher. Both are the only people
Basically, that had any web experience and so we got thrown
into that class because no one else was comfortable teaching
it. And it was I really enjoyed it
but after two years of doing introduction to HTML and CSS, I
was getting a little bit, it was a little bit repetitive and I
was like, I need to do something that this lets me sort of teach
other things and just talk about other stuff and also just to
like do things that are interesting and keep up like CSS
was it? It wasn't quite there yet, but
it was starting to like, you know, get a little bit more
interesting and I'm like, I don't want to fall behind.
I want to be able to keep up with what's happening.
Nice. So, see, I saw it as a way, it
was really just a hobby project. I had no Ambitions of it
becoming anything else than that.
And yeah, so it was just for fun on the side to sort of keep me
doing what I enjoyed. Yeah, I love hearing that was
was teaching always in your past as well.
Like, did you always teach No, I mean, if you go really far back
at one point, I really, I used to coach for ski racing team
when I was like, 15, 16 17, but other than that, no, it was
really the place. I was working with a, the time
before when I got hired to be a teacher, was a really good
place. It was a really small agency,
said, it meant. Like, I got from day one,
basically, tons of responsibility.
My boss would bring me to meet the clients.
I'd be seeing like how everything is done from A to Z.
So experience wise, it was fantastic but the pay was
terrible. So I'd been freelancing on the
side quite a bit just to try and make ends meet.
We had a newborn kid and stuff and then, so, when we was one of
my old teachers reached out and said they're looking to hire
some new teachers now, would you be interested?
And I was like, oh well yeah, I could use something that has,
you know, a little bit more pain.
I don't have to worry about freelancing and all of that so
much. So, Jumped on it now.
I love, I love the hustle, especially early on or not even
early on just hustling and getting to where you're meant to
be. I don't think in terms of end
destinations I think of your career in terms of a journey I
guess, because I myself. So I started in information
science. That's what I did at University.
And that's a little bit of data science.
Little bit of computer science but a lot of business studies as
well, right? You learn about organizational.
Models or business models and going to the history of
successful businesses, as well as businesses that have failed
and learn from that. But I did have some aspects with
regards to computer science. That's why I don't consider
myself self taught. Even though the courses were
built, this website, you can choose from a forum to a
different thing to another thing and teach yourself how to do it,
right? And get some guidance there.
But then I started out in operations and through that, I
To touch a lot of things. And a lot of things I still
didn't know what I wanted to do, but because I had that really
broad experience. I learned what I didn't like and
what was still interesting and what I still wanted to try out
and then it got to a point where I was like, man, this this is
still operations. Like I know how to fix stuff or
I think I do except I'm not responsible or accountable, nor
sometimes don't have access to do that.
I just have to talk to people and they get it done and then
I'm like a man sometimes It takes so long to get that stuff
done that. I saw these things talking about
devops and and how you can combine those things that's why
I, when I really trended towards software engineering and getting
that into kind of my skill set as well.
And still, it was a whole different ballgame learning in
school versus learning in an experienced development
environment, but that was a lot of fun, trying things out that
way. That's cool.
Yeah, but you've always been passionate about CSS CSS.
Specifically, I started out, I started out in the more on the
backhand side of things and then when I actually went to
front-end CSS, was one of the things I struggled with mainly,
right? Yeah.
Why do you think that's pretty normal?
I mean, the reason I was drawn to it was that sort of where I
started making websites as a hobby in?
Like the late 90s when I was in high school still and it was
like, this on-again off-again thing, but it was always like
the visual side of stuff that I've been interested in the said
I was, you know, I went to a school for design and stuff like
that too. I worked in print design for a
while so when it sort of making that transition to the web, it
was definitely Yeah, the visual side I think was always
interesting and CSS. I really like because it's like
the puzzle of making that visual thing actually happened.
And so I quickly realized, I actually like that more than
doing the design. I like making the design happen.
I think that's more interesting. Yeah.
But yeah, I think what you said there about it being a struggle
I think is really a common common theme that I see which is
sort of why I didn't realize it at first when I started my
channel just because I've been teaching in the classroom and
seeing the struggles people had, but that was the beginners.
They hadn't touched anything. So, of course, they're learning
things from scratch. It's hard, but the more I've
been on YouTube and just sort of seeing what's happening at the
World At Large. Yeah.
I see a lot of those struggles coming from whether it's
beginners or people more from like, a computer science
background, or a more traditional programming
background just because CSS is so different from everything
else, and how it works. So I think that's wrapping your
mind. Around like, oh, this is just a
completely different mindset to be and I think can be hard.
I agree. It's so different.
I do think it's getting easier. I mean, I've worked a lot with
designers and he used to get, for example, a PDF.
And now we have tools that help us, that the design already has
some of the CSS components in their callers is the most like,
basic form, but even like the width and the shapes and all
that stuff. Sure.
You have to tweak it and it's not perfect, but it's already a
starting point it. Is it a lot more fun to work
with designers and actually implement the design?
Because if we're talking about the thing that I'm doing, I love
doing the design and actually seeing my my stuff visually on
the screen it's so fulfilling its instant gratification when
you get something right and man it looks really cool.
That's what really draws me basically.
Yeah, definitely. When it when it finally Works in
This falls into place it's nice and I remember The days like
you're saying you'd get like your static file, that was just,
you know, sometimes would be a JPEG or something that you guys
had sort of do what you need to get out of it.
So yeah I do think it also helps like I think designers are also
a lot more aware of how the web works too so that I think
there's been enough discussions. You still here but friction I
think on that slide between the designer wanting something and
the other side especially I think actually these days the
biggest friction point is like between like breakpoint.
Other stuff like yeah. Yo as amazing as the design
software is getting, you're still stuck with these static
artboards or frames and all of that.
So like this idea of like a fluid landscape is something
that I think there's still a bit of friction there depending on
the designer. I think there's a lot that you
learn at least the basics of HTML and CSS and sometimes
deeper than that. But I think that always helps
when they have some experience there just knowing that, it's
not so straightforward. You know, it's this is what it
might look like in this ideal perfect situation where the
person screen is exactly that size, but that's never reality.
Yeah, I love designers that say, okay, this is what I visualize.
And whenever we can get up and running first, we'll tweak it
and then I sit next to the designer and they're like all
let's make this more crisp like that.
And I don't see what they're seeing, but when I tweaked it
I'm like that is better and they have such a good eye for that
but it takes a certain amount of Practicality from both sides to
make the end product, actually be delivered faster and in a way
that's actually accessible to a lot of people as well.
I think from both fronts with on the development side as well as
the designing site, we can learn so much from each other as long
as we have that communication in place because I've also worked
with agencies and stuff gets thrown over the wall and the
that we're talking about frustrating, that is one of the
frustrating factors there as well.
And for sure. But I've seen go ahead that is
example, but the open communication is so important
when it's possible. As you said, it's not always not
always there but it's good when it is.
One of the coolest videos I've seen on YouTube channel, I was
actually just browsing was the CSS battle thing.
You did man, that looked awesome.
I don't think I didn't know that existed.
I don't think our audience knows either.
Could you lay out what that is? Yeah.
So it's a fun, it's CSS challenges basically that have
no grounding in reality, so don't go in to me.
Like if you're a beginner, might not be the best practice because
you're probably doing things, the way you shouldn't actually
do things, a lot of, you know, moving things over one pixel, at
a time, to get it in the right place.
But basically you have like it looks like something that should
probably be done with SVG effectively.
So like some sort of flat sort of image Vector E look, Being
and you want to try and match it perfectly with CSS.
Yeah, so you have like basically a blank code to start with and
then you just do what you need to if you know put in your dibs
or whatever it is and you just try and match it and you can you
know, you could I'm doing it visually.
But for people listening, it's you can sort of there's like
different modes, you can go into to compare what yours looks like
to like the finished one. To make sure that things are in
the right place and everything. Yeah and the other thing is, if
anybody Hasn't done it in there. Like oh I want to try that.
It sounds like fun. There is a scoring system that's
about using the least amount of characters as possible.
So he gets if you, if you're into the world of uber
optimization and getting sort of hacky with stuff and that's a
challenge to you definitely you could try and lower your score
as much as possible. But that's where you really do
get into this like Realm of insane optimizations.
That would you never ever see in the real world?
Yeah, I personally, when I Do it especially for YouTube and stuff
to make it sort of challenging and all of that.
I do it more based on like a time limit.
Can I match the design 100% match in the least amount of
time possible? Yeah, because I can't get the
high scores. It just it's a little
frustrating on that side of things, get like, yeah, it's
definitely a different skill and one that I don't have.
So, I go for as fast as I can and I guarantee you, there's
people that can go faster than me, the one even for me, like I
still What I'm doing it. Like my mind is so set in like
let's use like percentages and like M&M's and Rams and other
stuff that like throw that out the window like I'm using you
know just position absolute using pixels and just get things
exactly where you need to be and you'll go faster.
But it's hard for me to break out of my the way I normally
think about things but yeah, yeah, it's a fun way to like
like any design you're doing is like a puzzle where you're just
trying to match the design. So this is something like, oh, I
could do that in like five to fifteen minutes and like this
little thing, And so it's fun for that and it's like you said
with that like gratification at the end when you get it.
Yeah, I saw the video and it looks so fun.
Actually to do that and to compete because I saw you did it
versus someone else. It reminds me a lot of like
because I used to watch a lot of gaming videos of like, speed
runs and people trying to compete because I also saw the
timer. Yeah, I've never seen a video
like that, but even with regards to coding challenges I'm sure
they're out there stuff like that as well.
I just never seen them and man, the csis want looks pretty cool.
Cool. Yeah, it was fun doing it as a
challenge. That was with Kyle from web
simplified and you know, it adds that little extra element trying
to beat someone else at the same time.
So like he said a little bit like a speedrun, so it was fun.
I can imagine, I can imagine, but moving back to how you kind
of became because I looked up online and the stuff you're
doing with CSS. Like, I'm sure that if I YouTube
how to do stuff with CSS, you're going to pop up.
How did you get to that point? Because you're completely
self-taught? Or not really yeah.
Yeah like 98%. Let's see.
My God. I can't that I soft.
So it was a lot of what, but like we've been talking about a
lot earlier on when I was working at the small agency.
So when I was working there is mostly doing design work and a
lot of it was for print and then I was freelancing on the side
and the freelance work on the side like the vast vast majority
of it was UI design. So whether it was like simple
apps or like you know some website stuff and I'd been
playing around with websites as a hobby basically for like 15
years at that point on and off and especially the like around
that time I'd sort of been around with like css3 became a
thing that was that big exciting thing.
So like I definitely got back into it at that point.
Yeah. And so is making these designs
freelancing it and I'm like, well, if they're going to pay me
to make the design, they should also you know, I could make more
money if I also made the site happen, once the design is
approved and just do the whole thing.
Yeah. And that's also when I realized
I actually prefer making the sites rather than designing
them, I'm an okay designer. It's definitely, you know,
looking back at like, I should have realized this a long time
ago. But so yeah, that's sort of how
I got and it like some people asked me like, oh, how do you
get so good at CSS like your own.
You, there's a lot of it that I just know, and it's just like,
I'm like, for me. It's A weird thing because as it
like, it was a hobby for so long and I sort of would do it a
little bit, like, it was table-based layouts with, like,
you had the font tag and everything early on it.
So like I sort of like involved with it but I'd stop.
I wouldn't make a site for two years.
Yeah. And then I sort of oh look
there's some new stuff now that I can do and I do like CSS.
There's a lot of new properties and so like I just sort of like
kept sort of like updating every now.
And then I have a new project. I want to make a site for it.
So like that, if I look back to those days, the stuff I was
making was terrible. There's like, but I think that
was part of being self-taught, early on was also hard because
we didn't have, you know, stack Overflow and all the websites we
have today and everything else, it was a different environment.
And then when I started when I decided like, okay, let's see if
I can actually make some sites here and I started you know,
just that was just a lot of practice at that point.
You have to make it work. It has to be there for the
client, everything needs to be there.
So you sort of well a little bit like you were alluding to when
you, you know, when it's different learning.
When it's in sort of an actual work environment, you learn how
to make stuff happen. Yeah.
But I really think where I got really good at it was when I got
Hired as a teacher to teach introduction to HTML and CSS.
Because that's really when you realize, like, okay, I know how
to make. I could take this design and I
could make that. But I don't actually know like,
you know, especially that it was using floats in clear fixes and
stuff for layout which if you don't know what that is, if
you're listening, don't feel bad because you don't need to know
that anymore. But yeah, so like I could do it
but I had no way of explaining it and some things I would do
without even really knowing why? But I just it worked.
So I did it every single time. Yeah.
And then when I had to teach it that was a completely just like
I have no idea what I'm actually doing moment confronting?
Yeah, because having to explain how things are working because
it you can't just say like do this because then they're like,
well, you know what's actually happening there?
It's only into it, it was really Teaching it taught me more than
anything else I've ever done. And it's one of the things I
always tell people that are learning, is it doesn't have to
be, you know, you don't have to get in front of a classroom and
teach whether you write a blog post, whether you're just
writing notes, to yourself, whatever it is like, it doesn't
have to be public-facing though. If you are if you are writing
like notes and sort of self documenting things you might as
well make them public because it might help someone else.
Yeah. But that like that idea of
explaining how Whether you're typing it out, whether you're
dictating it, whatever it is like mental connections, you
make all of a sudden and the things that just click, it's
insane. Like, you're as you're trying to
explain something like, oh, I understand that now, just
because you're, you're not just doing it, you're whatever your
brain works differently in those situations.
And so, like, for me, having taught in the classroom
definitely, was was the biggest thing and the one that created
the biggest leap for me in my understanding of, how all of it
worked. Yeah, I love everything.
That I always sometimes wonder why people write a lot of blog
posts because personally, I don't enjoy the act of writing a
blog post, but then if you put it in a way that they're trying
to explain something and their format is doing it through a
blog post and through that, they're getting better at the
skill. They've honed and they're trying
to explain. Yeah.
Then I could see what there's this.
Many Blog blog post. Yeah.
Because also I've we do some trainings on the side as well
and I've done that I think once or twice and man it is
confronting but I Think it's also a skill that you're like, I
don't know this or let's let's figure this out together, right?
Because you know, going to be able if you're teaching and if
you're flying in front of a class, you're not going to be
able to get every question. One hundred percent of the time,
there will be times where you're like.
I actually also don't know this but it's also skilled to be like
on this figure this out because that's the beauty of I think.
What we're doing is that you can figure things out and there is
room to figure things out and there should be right.
You're not expected to know everything, it's a growth
Journey for everyone. Yeah, they had that focus on
teaching. I really like that.
I think the other thing that it also did for me, was it made me
revisit the fundamentals and like the real basic stuff?
Yeah, and I think with that with anything that we're learning,
you know, it doesn't matter what it is, but definitely with CSS,
just because I'm so familiar with it, I see it all the time
where when you learn the very like, you learn.
There's a lot of early stuff, there's like the Box model, the
Cascade and like, all of these little things that sort of, they
don't mean too much early on. Yeah, you're taught what they
are but it's are like, You have so much other stuff.
That's important of like, all these new properties and values
to be learning that, I think these other things sort of like,
you know about it. Okay?
I get it and your brain, you can't absorb all of it and I
think revisiting fundamentals, once you actually have like if
you're the, let's say an intermediate level or even a
really high-level just going back and looking over the
fundamentals of how stuff works. I think is really, I think that
for me, that was another one of those big things of like, oh,
okay, now I get why people. Trying to teach me this early on
and you sort of you might find holes in your knowledge that all
of a sudden make things just make more sense overall and it
you know yeah having the I think with anything having that strong
bases, always really important and like you said, then it makes
it easier when you have to learn that new thing.
Like oh I had I don't know how this works but I know I can
figure it out and if you really have a good understanding of
what's going on, it makes it even like a hundred times
easier. Yeah, I agree I because I was
kind of learning in a work environment, I learned how to
get things done. So I completely recognize that
my fundamental specifically for talk about CSS are probably not
as good as they should be, and now things are getting easier.
Also, with, because I'm using CSS Frameworks, especially in
the latest project that I'm in that the fundamentals.
Don't necessarily need to be there to get stuff done.
But then when I really come into a problem, I had then I need to
dive deep into the rabbit hole and Start from scratch.
Like, what are these things? Because I've heard the more I've
seen them, but what do they actually do?
And then it's a bit more of a struggle.
So I might take your advice on that actually, this is
fundamental, but I do. I do enjoy the, the CSS
Frameworks that have been out there.
Have you like played around with, like Tailwind?
Then if you still went tachyons, and even Boma, have you played
around with them as well? I've used Bulma and tell him.
Yeah, tell when die. People always ask me for a
Tailwind content and I don't have any, I won't.
It's not because I don't think it's a good tool.
Yeah, it's just it's one of those.
My my generic answer is I see why people like it but it's not
for me. Yeah.
But that's just because like if you look at what I do, like I
write CSS all day long. Exactly why writing CSS.
So, like, you know, it's just that, I don't think, like, I'm
the market for, for what it's there for.
But at the same time, I see it as a useful tool in like a lot
of different ways. I've seen some people use it
just as like I do use utility classes and my own CSS.
I just don't use it for everything.
I have sort of like the set things and I have my own way of
generating them and stuff. But I've seen a few people now
using Tailwind, not for everything, but for generating,
the utility classes that they do need for their project and then
the rest of it just rolling customer rolling however they
want to do for the rest of it. So they're not, it doesn't
become like the Tool it becomes one of the tools in the
workflow. Yeah.
And but at the same time I also know why any framework, I think
that's well done. It's theirs.
Mike. I'm gonna mispronounce his name,
my Capriccio, he's a Design Systems expert and his his big
Philosophy for whenever he's working.
As if he can put it together a good system.
So everyone else doesn't have to write any CSS.
Then he's doing his job properly because he's like, there's These
people coming in that have expertise, has and other things.
Yeah. And then they start fighting,
you know, or they have to make this, you know, they have to
write some CSS because they need this to work and then it, you
know, everybody's doing it a different way.
And then it's, you know, you run into problems and if CSS isn't
your expertise, and then you're, you know, you're modeling
around. You're making maybe things that
aren't the best way that, you know, it like anything else, you
know, if you ask me to write some complex JavaScript, I'm
going to make it work, but it's probably not the best way to do
it and it could even have some Downstream negative effects.
I get that. So say I think, you know, the
same thing can happen, so when you have these tools like, you
know, a well-made framework it can, it makes it.
So if your job is to write JavaScript but you need to make
that visual side work, CSS isn't soup, you know, isn't what you
want to be spending all your time on learning because its own
thing. Well, this is saving you from
having to do that and it has everything in place that you
need. So 100% like make sense.
And I you know, I do the same thing if I was in that situation
too. So yeah, yeah, you get that.
I recognize what you say that the way people use Tillman CSS
or at least what I've seen. If they use it in to its fullest
extent, it goes everywhere in the HTML and you can't really
figure out what the class is. Do based on the the acronyms
that Tailwind gives you, but if you make these utility things
then all of a sudden it becomes a lot more structured, right?
Your HTML still the same and you make a utility based on what
test do and offers you. I've seen that also an
Enterprise software and it works from an outside point of view,
but yeah, when you then actually go into the classes and what
they mean, it's a different skill.
It's like a different language, almost.
It's a completely different Beast that they've created, and
sure it might be, might be effective, but it is another
tool that you have to learn where as the fundamentals are
still CSS. So if you understand the
fundamentals, then all of a sudden.
Yeah, you're like, I could also do this in CSS and maybe it's a
Time Saver, but the basics are still CSS.
Like that's the core component that you To learn.
Do you think people that are learning CSS nowadays, or even
like HTML, JavaScript, skip to the more advanced stuff?
Like if we're talking about JavaScript you, people start
with react framework, or vue.js or go wherever, and maybe even
people will see us as might start with to it.
I don't know. What are your thoughts on that?
Yeah, I definitely think it happens.
I know, I mean, even my own for my own experience when I first
started having to make stuff happen and I learned jQuery
before I touched any, right? I started trying to learn
JavaScript and like a jQuery is easier.
I'm going to use that instead. Give me obviously javascript's
come come a long way and but looking back, I'm like, I
probably shouldn't have shouldn't have done that.
But yeah I think 100% it's one of those things where I finally
was especially like with a lot of the boot camps and other
things that are going on. Now, to you see it, because
they're there to teach they sort of want to focus on the skill.
That's going to get you hired which often might be something
like react. Yeah.
And so if they're focusing on like this is the skill that
we're going to give you because we know you'll get hired based
on that. And then like I talked to people
that have gone through them and they might do one day of HTML
and CSS and then they sort of. Don't you run into this world
where you don't know what's And you don't know what's react,
right? And that the same thing happened
to me when I was using jQuery, I knew that it worked.
But then when I finally started, like, I need to pause here, go
backwards, because, if, when I knew jQuery, like, it makes it
harder when you want to Pivot to a different direction.
And I think it's the same thing. Where is like learning react has
its you're learning a lot of other things than just how react
works. There's, you know, just the
model of mental model of working with it using Tate, all these
other things, those are transferable skills but I think
knowing the fundamentals of JavaScript and then getting into
one of those Frameworks or libraries makes it a lot easier
because then if you do need to Pivot or you run into a new
project that isn't using react, you're not stuck.
But again it's easy for me to say that.
Obviously, it's a big time investment and everything else
when it actually end, it depends on what school you're going to
or where you're learning, and all these other things because I
see it was see. That's to where people say like,
you know, they find bootstrap for the first time, they're just
like, oh why, why should I learn CSS if I can just use bootstrap
and it works and it's a little bit.
Like you said, right, well, it works eighty percent of the time
and then you run into the situation where you need to
customize it and you know, you need something.
It's not quite doing and you just have no idea how to do it.
And actually, I learned I think I think understanding the
fundamentals obviously, is really important no matter what
the language is. Yeah.
But I know back. When I first started using
bootstrap and I don't use it anymore, I haven't even used the
newest ones I touched on for just to see what it was about.
But I learned a lot, it was bootstrap to at the time and I
learned a ton not so much from using it, but seeing how it
worked and understanding sort of like, okay, why are they doing
it this way? You know, what going through the
documentation properly. But then also like, trying to
figure out what's actually going on and then Through like even
their class naming on how they were organizing their files, how
they were doing everything. Like, for me, that was nice
because you're seeing how a large-scale thing that can be
work from one project to another to another works.
So at least for me that that was I think a good learning
experience. But instead of just using it, it
was trying to understand what's actually going on because then
again like if you understand that really well then you're all
so much better actually using it right now.
Like you're not. You're not stuck going out.
Well, how does this, you know, how can I achieve this?
You go. I know, I need, I need my CSS to
do this and I know this is what there doc, you know, are you
find it in their documentation, or whatever it is, but it's
about. How do I use this tool to
accomplish what I want but you need to know how you would
accomplish it in the first place, right?
So yeah, yeah. I completely I completely agree
with that because the current project I'm working on has Bulma
and I know a lot of stuff had to do.
This is not because I learned along the way.
And then I just open up their style sheet because they have it
on GitHub and I search for what I want and I'm like, all this is
this class, its kind of reverse engineering, what?
I need based on the fundamentals that I have and then I use
whatever the framework offers me, right?
It wasn't my choice to implement a.
I am happy that it's there. But yeah, I I do see where the
limitations are because you either going to make an
exception and then the project is going to move forward with
that exception which might grow into more because you're also
going to set a standard. Or you're going to use whatever
the framework has including its limitations.
And then you're going to have to talk to your designer and say,
well this is actually not possible or we need to make an
exception. I like that designers.
Nowadays also think and have their own Design Systems, right?
The the most prominent one I've worked with is atomic design,
where okay makes sense, what kind of molecules we have and
those four men to get the second one.
But at some point you have an organism that is made up out of
out of components and all the As I guess not, probably really
butchering this but they come together and they form bigger
organisms and that makes up your web page in that way.
And you can be like, ah, we have this already and we don't
actually need a full design for this, right?
Because we don't want to keep Reinventing the wheel.
I've also come into projects where we have multiple variants
of the same thing and it's just a mess, right?
The code Base is almost 15 times larger than it should be.
Just because you have that mess. Some I'm really happy with the
trend that is going towards Has more Design Systems and making
software more maintainable because it's very much a
long-term game that we're playing.
Yeah. And yeah, I think any scale
making something they can scale, is one of the biggest struggles,
no matter what you're looking at, whether it's the front end
or the back end or, you know, every part of it and design and
that side of things falls into that, as well.
Yeah, it requires a lot of planning and figuring things out
from the early stages. But like you said, if that's in
place, It really helps out and Design Systems are definitely.
I think I think with the combination of the sort of the
evolution in where CSS is going right now, along with this sort
of the maturity and the respect for having a properly done,
designed systems, both from the designer side and then being
able to implement that into code that can be used in the project.
I think some companies at least are starting to be like, okay,
we could get Nobody who's, you know, you almost get like you
have the, the designers, then you can get a person or a small
team of people that are sort of the, the neck, the ones that are
going to wear the CSS side. And then you have the other
people that are more about the implementation of the
functionality and everything else.
And I think you know with the special I think the more we can
specialize in each thing that it sort of brings out the strengths
and everybody which hopefully we start seeing more of this time.
Goes on. Yeah, I agree.
I like that that role is interchangeable.
Because I still want to touch upon for example, if we have
utility classes which are completely CSS.
I like that. The knowledge is within that
team and I can just pick up a teammate and be like, okay,
let's do this together because I think sure we can be
specialized, but we also need to be General enough to get the
stuff done, right. Someone Falls away.
We need to be able to do it and I do see us trending towards
that more cooperation, more collaboration.
The thing that I'm struggling with now is so I've already been
in this game for a few years. I don't know what it's like to
be. Teaching myself how to code now,
but one of the biggest struggles I could foresee.
Is that collaboration aspect is not necessarily there, right?
I could look at the CSS battle thing.
And everything is pixels and nothing is Rems or M's or or is
going to be relative. And that could be my starting
point. And then I'm going to try this
or put it into practice. And it's either not going to
work. Or I'm going to get destroyed by
people that actually know how to make this scalable.
It's a, it's a hard journey, I think nowadays, Yeah.
Yeah. And as you know, I have
obviously my YouTube channel, I do courses and other things on
the side and my biggest struggle with online teaching, in
general, yeah, is definitely from having taught in the
classroom where a, if somebody had a question, I'm there to
answer it but the nice thing with that is like you're seeing
the struggles happen in real time.
But the other part is that collaborative part where you
know, if I was doing something in the classroom Could have a
project that was a team of people doing it and have
different responsibilities and different things going on.
You can sort of try and mimic some sort of it's still never
going to match the actual workplace but at least you sort
of get that idea of working with other people and building up
those skills as well doing it online.
Is it's so hard because even if you get people that are
motivated on day 12 people just fall off they go to the project,
whatever it is. Yeah it's something that From if
you're self-taught to be and you know, I had the same thing.
Like for me, everything was from the coding side of things.
I was just freelancing almost all the time.
And so, pretty much everything I was doing was on my own just
making stuff work. And then at one point, I started
doing some consultations and other stuff and working on
bigger teams and it was a huge adjustment for me to be able to
really get into like, okay, this is how the communications are
work. Like I wasn't just like learn.
Let's bring my expertise and bring it here because there was
this entire other skill set that I had to learn to be able to
properly contribute towards projects and stuff and there's
definitely mistakes and stuff that you're making early on when
you're not used to that. Yeah, see ya.
That's definitely if anybody knows a good way to sort of
integrate that into online learning.
I'd love to know what it is. Yeah.
It could be. I don't, I don't know maybe this
Core group so like making smaller, focus groups.
But as you say, if not, everyone has the same dedication in a
work environment, the dedication.
If it's not intrinsic, it's their externally.
You getting paid. So at least people show up,
right? Exactly.
That's already a big factor, but self-study just requires a lot
of discipline. I think that's that's
fundamental if you don't have that, then it's going to be
rough along the way. What do you think web
development is trending towards? Because I think a lot of people
are moving more towards mobile first ride, especially in Asian
continents. I've done projects there where
it's like, all right. 90% is on mobile.
So if our desktop works Good. If it looks like shit, we're
completely fine. They're completely mobile first.
And here, it's still. It depends on the domain, it's
still on and off. I don't know how it's in the US,
but I am seeing a trend that is way more mobile first.
What do you think that's going to meet with regards to web
development? Yeah, ii-i'll.
Give I know whenever it frustrates me a little bit
because whenever I've always advocated for mobile first but
not for the reason of it. We're targeting.
Phones necessarily but whenever any time I've made a YouTube
video, looking at my Approach and why I do mobile first within
like five minutes of the video going up.
I always get comments from people saying, I don't need to
worry about it. I do desk like enterprise-level
stuff that's only ever going to be used on the desktop so this
doesn't matter and I go yes. In that situation, 100%.
It doesn't matter. That's not what I'm talking
about. Like, you know, it's if I was
doing the same thing, I wouldn't care either.
But you know, most people aren't living in the world where we're
building Enterprise level stuff that's never going to be
consumed on anything other than a computer, or a desktop
computer. Yeah.
And My Philosophy, I haven't come up with a name for it.
Yet that works or that actually sounds good.
So I'm still calling it mobile-first, but it's more.
Like the path of least resistance.
It's like writing the least amount of code basically that
gets the job done and usually for like almost Everything that
is going to be targeting mobile anyway because on mobile layouts
are the most basic already. You know, when you're doing a
layout things stacked by default.
Yeah. And so on mobile everything is
just generally stacked and there's nothing too complex on
the layout going on. So if you the issue a desktop
first, as always, if you make a three column layout.
So even if it's just display flex and that's it, then when
you get to, okay, let's put in a media query and let's change the
layout for mobile. You had to create the media
query and you had to change it. Where is if you went
mobile-first you can throw all that in the garbage because you
don't need it. The layouts are already working
and then you can add the complexity at the larger screen
size or add another breakpoint. But only after, you don't need
to change things back. And there's always going to be
times when you're overriding things, maybe set a font size
here and then a new font size here or your setting.
And it'll, it might even be a, you use a display flex and
you're changing the flex direction.
There's different things you can be doing, you know?
But a lot of the time the added complexity by adding complexity
at larger screen sizes. For me, it just makes it a lot
easier. There's less code to maintain
for the most part, but again, talking about people that get
mad at my YouTube comments. I did one where I was looking at
doing a Ian for a website and it was like the hamburger menu at
small screen sizes, and just the typical normal one that larger
screen sizes that goes across the top of the page.
Yeah. And in that case, there might
have been a hundred lines of CSS, maybe I'm exaggerating, but
let's just for a big number, but you had a whole bunch of CSS,
because there was a, your positioning going on.
You had to have, you know, what, what is it when its open?
What's the CSS for when it's closed?
There was a lot of happening. Yeah.
And at the desktop, there was maybe five You do a display
Flex, you sort of gap on it and was done basically.
Yeah. So, in that case, well, no, I'd
rather actually do that desktop first, where I have the minimum
amount of code making that work and then I just wrap all that
complexity inside the media query because if not, I'm doing
all that complexity and then I have to go and overwrite all
those properties. So, I have to change the flex
Direction, have to change the spacing and to change this.
I like there's just this huge list of stuff that you're over
writing to try and force that other one to go.
So I think, I think the key is always He's just trying to do
something that involves the least amount of work possible.
Yeah. Because if you're doing less
work, it means there's less code.
It means there's less to maintain and that just so
happens that most of the time that means you're only worrying
about mobile early on anyway. So yeah yeah, I agree with that.
I've seen both sides by projects were probably a bit more early
in my career but I would see exceptions in the code that
would be like a mobile. Has this one with regards to
HTML with the rest of styles. Just being a Option and then all
of a sudden we would have a quite a lot of exceptions
because mobile is still quite different from the Design
Systems we chose right. And then I went to a different
project and there it was the other way around.
It was like our when it's a bigger screen because they also
had that class. I don't know exactly what was
that but let's say it was that if it's a bigger screen all
those on its this and I noticed okay it was a shift in my mind
because when I would deliver new code I would be like.
If it's mobile it's going to be that the big no no let's try and
make it more. Well, first right, let's do all
the code as if it were to be normal on mobile because if you
scale that to a desktop version and then all of a sudden it hit
me because I could see all the moving parts and it does stop.
Here it would look a little bit less nice than what I'm used to,
but everything would be in place right at the other way around.
You just don't have that screen reader state.
So then yeah, from a code perspective even though it's a
shift and it even though you might not have done that in the
past, that was exactly it for me, I never done that in the
past. But you do see the benefits from
that. And as you say, It's less code,
right? But I also like your example
because I have not noticed that people will MIT take that
approach in be dogmatic about it, right?
If you're making a hamburger menu and mobile or that's going
to be the first one and then your desktop exception can be
very tiny. Yeah.
Then it becomes all of a sudden, you're like, okay, why can't we
do this, both ways right? Choose the most practical way,
but then we have discussions. Well, what's the standard?
That's, that's a harder thing. I think once you're
communicating and I still think mobile first is kind of a Not a
golden rule, but maybe a silver rule.
I think you should be good with regards to complexity by.
Yeah, I took a while I get get hold of that it is definitely
like a mind shift though. Especially, I mean a lot of
people. Do they tell me.
They only have like they're designer whatever they're
getting it from is only desktop. They don't even have anything
else. Yep.
Which definitely happens to. So it's definitely like this and
you're usually working on a desktop to so you have the big
screen that you're working on. So yeah.
Yeah. A lot of reasons why we want to
start working that way for sure. And it and if you've made even
one project that way, first it just becomes the way that you're
going to work. So but if anyone who's
listening, hasn't tried it the other way around.
Even just starting with a desktop like just find a really
simple layout just to try and recreate that's desktop.
Only are you only look at the desktop version of it and see if
you can make it work with a mobile-first approach and you
might surprise yourself at it becomes intuitive pretty
quickly, I think. Yeah, Yeah I agree.
I have also worked on projects where my designer gives it in a
mobile first View. And then I'm like What's the
desktop going to look like? And then he'll be like, well
we'll figure it out, right? And then we look, we sit side by
side. It is the mobile version, I
scale it and they're like looks good.
Looks pretty good to me because everything's good should scale,
kind of automagically. And then you're good, right?
Also for your designer. I think it's way harder for them
to Envision. What is going to be a mobile?
Yeah, if a lot of people actually use that.
I mean customers King right? I don't know if that's an
English translation but that's definitely a Dutch one.
Yeah, yeah. So they get to the side and if
their preferred platform is mobile, then we as the people
that built that platform also need to accommodate for it in
whatever we're doing. I like it though.
I think it simplifies a lot of things.
I'm also a fan of the the Frameworks, I think you and me
talked in the in the call we had before the show.
Also, do you think it will get to a point where I mean, we need
fundamental knowledge of CSS. But will it get to a point where
we don't have to write CSS, or will it always be there?
What do you think? Because I think it is trending
towards a lot, a lot more training wheels, maybe a
framework and a training wheels, not the best analogy, but it is
tools to kind of not reinvent the wheel.
Instantly. I think it's trending towards
that and it's not just on CSS. It's also on the backend.
It's also on the front end. We try and do a lot of stuff
without writing a lot of code nowadays.
Yeah, yeah. I'm actually really unsure of
what the future is because of the directions, he SS is going.
And a lot of the new stuff that's either just Landing now
or is sort of on track to land within the next 12 to 24 months.
That I'm like I can't see how a framework would be.
Well, I mean some of them you could 100% do for like certain
things. Yeah.
But like the power of some of the stuff that's coming.
I don't know how a framework would really take advantage of
it because a lot of it is very or but again we don't have it
yet so it's one of those things. It's exciting.
I think I'm speaking abstracts but like we have container
queries coming with container units coming.
So those are like, you know, If for, if you haven't heard about
them, we have media queries right now, that are looking at
the size of the viewport, and it's not really a great way, if,
you know, we're building components and a component might
be something in this situation, it's in the footer, and it's
full width and you take the exact same component and you
want to put it in a sidebar, using a media query.
That's looking the viewport to change the font sizes of layout
isn't very practical because in the footer, you want it to be a
different layout than you do there.
So, then you need these exceptions and these other
things. Container queries are In to look
at the size of the parent, rather than looking at the size
of the viewport. Yeah.
And so it follow, you can write your component with the CSS for
that. And then the layout is changing
based on the context that it's inside of.
And so we have that coming, we have the units that are coming
with it. So instead of a viewport unit
it's a unit that is relative to the width of the parent or the
height of the parent. We have the has selectors
coming. So it's like a parent selector
finally, but it Does at the basic level, it's apparent
selector, but then you can select a parent that has a
certain situation that then you can restyle the children,
depending on that, we have style queries coming.
So like if this property has the color white do this, if it has
the background color purple that you can, there's a lot of new
things that are on the way that are going to open up a lot of
new doors. And I'm just like the
customization in the like all these really cool things that
are going to happen. I'm curious what Frameworks do
with them. Yeah but the one problem with
Frameworks is always like they have to be just very generic
because they need to work in every single project.
Yeah. So there's also mean you're
right so then it that means you can't fully like because there's
all I don't know I'm very curious to see how these get
integrated into them because I do think like specially
container prairies. I think will be a very natural
fit for them. Yeah.
But for us for some of the other things I'm very curious to see
because there's so many I don't. I'm super excited for all these
new things coming and seeing how people what people do with them
but then also how they're integrated into larger systems
and see I don't know what the future really holds.
I'm excited to know what it is. Yeah, I'm right there with you
whenever something new gets added I'm like I can see where
would be applicable, right? Because it's probably something
I struggled with in the past. And I'm like, why why isn't this
here? Oh, but then, maybe I realized,
maybe what I'm trying to do is just to either too complex or
just shouldn't do it. But it opens up a lot of doors.
And because the frame works exactly as you say our framework
so they can be used in a lot of projects doesn't mean they
should be. I think just because of that I
don't think we're ever going to have a framework that can.
I was also everything. I think if your fundamentals are
strong and you know, when to use the practices that you're using,
I think a framework can be a really helpful to.
But again, it's like Enterprise software, it's like the front
end. Her back end if you really need
those exceptions. If your designer has as created
something, that's really awesome.
But your framework just it's just a misfit, then you need
those exceptions. And for that, you need the
fundamental knowledge, as well as the knowledge of what's out
there, right? If we can all of a sudden, say,
oh, if this color is here, then your child classes are going to
become that instead. Then that's a I could see how
that exception can be useful, doesn't mean we're going to
apply everywhere, but for that really cool design because I've
seen some really awesome designs and some Really awesome
implementations in that way as well.
We're going to have to have to use CSS still.
Yeah I don't think it's ever going to go away.
Just like I don't think the programming language is going to
go away which is going to be better at not Reinventing the
wheel. Yeah I think that's.
I think that's our end result. I think we're really good at
Reinventing. The wheel has to be something
that people really enjoy doing. Yeah, it helps with those
fundamentals, right? If I've tried to do a lot of
stuff with CSS, I've, we do innovation.
As Iraq Syria. So we get a day to just mess
around and I've tried to have a microphone on my laptop with
input and music and then through that, make a CSS wrapper and let
it bounce on the music or that was a lot of fun.
Just to see how I could, how far I could go with CSS and even had
to throw in some math because I obviously have made a circle
with things that dance up and down and I was like, man, my end
result was all CSS and I was like, that's pretty dope.
You can still do a lot of a lot of cool things with See says,
anyone HTML. It's going to bring you far and
yeah, the time of math. They've just, I think Safari
just landed. They have you can do sign and
tan and all of that in CSS now and there's other stuff that's
coming for that. And yeah, it's kind of crazy
where things are going compared to where we used to be, that's
for sure. Yeah, I already say that and I'm
not in the space for as long. I can imagine what it was what
it was before things are moving really fast of the thing.
I'm Struggling with is. All right.
Some point you're going to need to specialize because it's just
too much. You can't be an expert in an
CSS. And for example, react and for
example, pick a back-end language plus the
infrastructure. Post the cloud, see it.
That's why I need a breath talking about that because it's
so much yet, I don't know why. But companies set that
expectations on people and then people take those expectations
seriously and they're like, I'm never going to be an expert in
all of this. That's why I like the
collaboration aspect, right? Cuz you can collaborate and get
things done that way. I just think it, I hope it's not
going to be more because if it is a little bit more, it might
be a bit too much. Yeah.
I think that there's some places where that being realized and
I'm hoping it just that Trend continues where they realize
that people, you know, let's take advantage of people's skill
sets. Instead of expecting people to
do everything, you see it come up and see you know you'll see
some. You don't see them job posting
so much because job postings always seemed just ask for
everything. And lots of experience but, you
know, talking with people within the space within certain
organizations. Anyway, right now, I'm starting
to see where there is the specializations that are being
valued, which is really awesome and hopefully, it continues.
But yeah, that goes with, I guess, like it's parts of the, I
think there's two folders, the trends of the industry and just
the way things are evolving. And I think when the big, the
bigger companies set sort of certain standards like There's a
trickle down, but at the same time when you have smaller
companies or startups and other stuff like that, they don't have
the budget to go. Okay?
We're going to get the an expert in five different fields.
We're going to get the one guy who can do it all, because
that's what you know, especially at the beginning, you don't have
the budget or the time to sort of invest in building things
necessary. You know, it's what is it?
I can't think of the expression doesn't matter if you're
breaking things, though type of thing, which I think can be a
bit of a Jeurys attitude. Sometimes just, you know, you
figure it, let's get it working and then fix it after.
But the cost of doing that can be a lot more than it would have
been just to like, okay let's slow down by six months and do
things properly from the beginning.
Exactly. But at the same time, you know,
it's exciting, starting something new.
And you also, if you are building a product or trying to
get something off the ground, you want to get it off the
ground and it's hard to go. Okay.
Now we're going to sit down sit on this and try and have enough
funding to last us, nine months before our product exists, isn't
maybe a realist. Hang on my side to be asking for
that for more people. But yeah, it it's hard though in
your, you do those. Let's build something as fast as
we can to make the MVP. But then instead of being key,
that's the MVP, but do we start over now if they or are we just
trying to fix what we have and that you know, it's a tough
situation. Yeah.
When it comes to, when it comes to studying and CSS, I've never
started a project and being responsible for setting up.
For example, our file structure for using SAS or a class
component. Opponents and higher-order
components and stuff like that with regard to the front end.
What can you compromise on with regards to speed?
And what can't you compromise on?
I think responsiveness. And like, mobile-first are going
to be in there. Do you have any good examples
for that? That's a hard one, it's hard
when I think one of the advantages with CSS because you
know I've seen projects that have years of over, you know,
just been built up over years so that these huge style sheets
that just when you do decide to implement something new, you
know you you come in with a new class naming system that's
prefixed with whatever you know. So you just like Dot.
Whatever the project meal NP hyphen.
And then whatever your classes. Yeah.
So you just prefixing all of it with this thing to say like okay
this is where our code base is. Now a new CSS must, you know, if
you're doing it properly is starting with those and then you
can sort of phase out the old. You know, this page is getting
redone or this layout or this component are getting redone.
So then, like you sort of it can order, new stuff is being built,
but like you can sort of phase things out slowly that way at
least. If you're starting a new project
though, I think that there's enough tools that are out there
right now. Whether it's a framework,
whether you're sort of just planning things out properly or
doing things in a certain way. Yeah, you shouldn't have to
compromise on too much, probably.
I think the biggest thing is you make a decision early on that
then you sort of regret later. But yeah, that's those are hard
of life, I think. Yeah, exactly.
I really like that, because I think the thought that we can
compromise, doesn't mean we should, you need to set a
certain standard of quality and if your project is going to be,
for the long term which somehow most of them are even even proof
of Concepts. We tend to just build on top of
that. The make sure your fundamentals
are there, right? Just like your knowledge, your
coach, it also have a good fundamentals and then they'll
just grow towards the future. Yeah.
And when thing, I'm trying to educate myself more on and
educate others on. Well, I'm at it.
Is accessibility and I think that's one of those things that
early on gets ignored because it's like, oh worry about that
later. Yeah, and I really, I do think
that's one of the things that shouldn't be compromised on
early on, just because the technical debt of trying to fix
certain things. Once you've made them
inaccessible is a lot harder than just having done it right
in the first place and a lot of the time, it's not that like
most things when it comes to accessibility.
Like, if you start reading about like really deep diving, a
Stability. It's a rabbit hole that you can.
It can feel overwhelming because there's so much to it, but even
if I don't know if the listeners or if you're familiar with like
area labels and stuff like that, which are for assistive
Technologies. Yeah.
When you start reading about that, there's so much but the
expression is, no area is good area, it means you're using the
right HTML markup, you know, using semantic code and doing
all of that, it's like, as long as your foot.
It's almost like the the same idea as before like, Effort in a
way is good. You just have to make sure that
it's done in the right way. And yeah, then it makes it a lot
easier in the long run. So that would be something.
I would say try not to compromise on if you can,
convince the stakeholders about it because it's definitely
something that in the long term you're going to need and it's a
lot harder to work backwards on that and try and fix things
because if it's wrong then it often just needs to be torn down
and rebuilt basically. Yeah.
And that, that's a huge shame. I love that answer.
Yeah, I hadn't thought of that myself but it's because I've
never been in this situation where we were like, okay, we
never took it into account and now we have to tear down
everything and I can't see if you didn't take it into account.
It's like tearing down all the walls around you and start
exactly. Yeah, yeah.
I love how this conversation flowed learning about how you
kind of started out and and the real focus on teaching to where
you are now really passionate about CSS.
And we're going Is there anything that's missing?
You still want to share? No, I think I think I'm I
enjoyed it too. As a fun conversation.
Love hearing that. Then we're gonna we're gonna
round it off here. Kevin Powell everyone.
I'm gonna put all the links to socials in the description below
and thank you for listening. We'll see you on the next one.
Thank you so much for having me. It was a blast, awesome.