Tailwind CSS - AiA 368
Chuck, Lucas, and Subrat join this panelist episode to talk about Tailwind CSS. They begin by discussing their perspectives and knowledge gained by using Tailwind. They tackle its benefits and impact on your applications.
Show Notes
Chuck, Lucas, and Subrat join this panelist episode to talk about Tailwind CSS. They begin by discussing their perspectives and knowledge gained by using Tailwind. They tackle its benefits and impact on your applications.
On YouTube
Sponsors
- Chuck's Resume Template
- Developer Book Club starting
- Become a Top 1% Dev with a Top End Devs Membership
Links
- Web Animations Course: lucaspaganini.com/web-animations
- Hire Angular Experts: unvoid.com
Picks
- Charles - Karma | Board Game
- Charles - Focus Blocks
- Lucas - MidJourney AI
- Subrat - Bun — fast all-in-one JavaScript runtime
Transcript
Charles Max_Wood:
Hey, welcome back to Adventures in Angular. This week on our panel we have Lucas Paganini.
Lucas_Paganini:
Hello.
Charles Max_Wood:
We also have Subra Mishra.
Subra_Mishra:
Hello.
Charles Max_Wood:
I'm Charles Maxwood from Top End Devs. And yeah, we were talking before the show, we decided we were gonna talk about Tailwind, Tailwind CSS. I'm a little curious as we get into this before we dive too deep, what's your experience been with Tailwind? And then we can talk about what it is and how it fits into everything.
Lucas_Paganini:
Okay. I think that's a great starting point for the audience to know what is our background on it because the amount of context and usage that we have with Tailwind might dictate if we love or hate it. And
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
I really want to say that none of us have very extensive, deep knowledge about Tailwind or... have used it a lot. I can say only for myself and for my particular case, I haven't really used Tailwind myself. So at Unvoid, which is my web development company, we have some projects that we have been using Tailwind. But for these particular projects, I am not directly involved in the execution of them. I am more in planning, strategic... row in them. So even though we are using Tailwind and I have seen some of my employees either liking or hating it, I myself can't give my opinion on how it would be to use it myself because I really haven't done that yet. What I do know about Tailwind from what I read and studied on those under docs... because I had to do that before telling my employees to use that in projects, was what is the actual problem that it solves? And when does it make sense for you to use Tailwind to solve this problem? So this is how far I went into researching about Tailwind, and that was enough for me to decide to give it a try and encourage the usage of that. in some of our internal projects. So I think the deepest conclusion that we can help the audience achieve from this episode is not how to use Tailwind in the most advanced way possible. I can't promise you that from how deep I went into this technology, but what I believe you can extract at the end of this podcast episode is when should you... give a chance to tailwind. What is the conceptual problem that it solves? And is that problem relevant to you or is it something that you don't care and you're fine as you are? So
Charles Max_Wood:
Right.
Lucas_Paganini:
at the end of this episode, you can conclude if you want to try it out or not.
Charles Max_Wood:
Yep, I was just going to chime in. I mean, I've used it on a couple of projects, but I know I haven't used all the features. Right? So I've used a lot of the styling, not nearly all of it. So, you know, I'm sure there are bits of it there that I don't know. Um, but I do have an opinion on it versus say a bootstrap or something like that. Cause I've used, you know, all of those kinds of different systems or foundation. Stuff like that. How about you, Subrat?
Subra_Mishra:
Yeah, I think same here like I also haven't extensively used Tailwind but I think after bootstrap this is the most popular CSF framework in the internet today everywhere is talking about Tailwind. If you go to YouTube you will see lot of Tailwind videos like Tailwind is awesome, this like it's a lover-head relationship.
Charles Max_Wood:
Ha ha ha
Subra_Mishra:
30% people will hate it, like some people will love it and it's like React and Angular. So some people love Angular, some people hate Angular, some people like kind of like, okay, we'll go with the which is faster, which is which we should use. So what my take on that? Just check, is it feasible for you or is it maybe in terms of teams point of view, like Does everyone know tailwinds? Because it's a little learning curve initially. But if no one knows tailwind and just for the trend is going on, you should not like push it to your team. But if it helps a lot, if you have a bigger vision to having a bigger application which will scale and you have a lot of reusability, then you should go for it. I think Lucas you are telling about the functional way I think you can explain it.
Charles Max_Wood:
Yeah, yeah, you did that before we recorded. So yeah, you wanna run that up again cause I like the way you explained what tailwind is like some of the philosophy behind it.
Lucas_Paganini:
Sure, sure. I'm even going to take one step back because Subrat said something right now which I thought was very, very interesting, very insightful. And I think this should be considered even before you decide on whether to use Tailwind or not. So
Subra_Mishra:
Yeah.
Lucas_Paganini:
Subrat said, using Tailwind or not is kind of like Angular or React. People have very strong opinions. And when you said that, Subrata, you gave me a very interesting insight, which was it's actually kind of different because if you think about it, Angular versus React versus Vue versus Solid versus Svelte versus whatever framework. We're always considering a framework, right?
Subra_Mishra:
Mm-hmm.
Lucas_Paganini:
It's always a framework versus another framework. What's interesting about this subject of... tailwind or not is that we're saying use a framework and be that framework tailwind or not use any framework at all. So there
Subra_Mishra:
Yeah.
Lucas_Paganini:
are actually two decisions. The first is, should you or should you not use a CSS framework? And then let's say that you decide to use a CSS framework, should you use tailwind or not? So I think we can start with the first question which is... Go ahead.
Charles Max_Wood:
I don't know if I would even approach it that way, right? For me, it's more, is my CSS becoming confusing or hard to reason
Subra_Mishra:
Yeah.
Charles Max_Wood:
about or whatever you would typically reach maybe for a framework for, but maybe not even that, right? Maybe the answer is how you organize your CSS or things like that. But then it's, okay. Why is this painful? And then does tailwind make it better or does bootstrap make it better? Or does this other thing make it better? Right. And so I like to frame it more in terms of the problem I have instead of do I need a framework and then which one it's why is this painful to write and then what can I do to alleviate it? And in a lot of cases, a framework is the right answer, but sometimes it's something else.
Subra_Mishra:
I think if you want to make it faster then framework is good but if you want to make it efficient and as personalized as possible then writing your own thing is always good but yeah it depends. I think nowadays the
Lucas_Paganini:
Yeah.
Subra_Mishra:
tailwind is also pretty flexible.
Lucas_Paganini:
It depends too much because for example, do you feel like using Angular makes you so rigid that you can't do things that you would be able to do without Angular? Because I don't feel this way. I feel like Angular is flexible enough that it makes me faster, but it also allows me to do anything. And I think one problem that we have is that we have a pre-concept with CSS frameworks that they are going to make it super rigid and hard for you to create your own styles, because that's what we had with Bootstrap Foundation
Subra_Mishra:
Yeah.
Lucas_Paganini:
and Materialize. So it's a different model because when you decided to use such frameworks... you were basically giving up on having your own custom styles, or you would already accept the idea that anything other than what comes from the framework would be very hard to do, because you would be going outside of the things that the framework was made to stylize. So...
Subra_Mishra:
Yeah, I know about bootstrap like a lot of style change.
Lucas_Paganini:
Yes. Yes.
Charles Max_Wood:
Yeah. Well, and with Bootstrap though, they expect you to,
Subra_Mishra:
Overwrite
Charles Max_Wood:
they
Subra_Mishra:
their
Charles Max_Wood:
expect
Subra_Mishra:
style.
Charles Max_Wood:
you to create your own classes, right?
Subra_Mishra:
Yeah.
Charles Max_Wood:
The, the difference is, is that, um, what you wind up doing is you pull in their class and then you pull in your class to supersede it, right? And if you understand how CSS works, then you know, depending on the order you put things in and things like that, um, You know, you basically set your styles up to overwrite theirs. And so then you can get different colors or different whatever. Um, the other thing is, is they wrote it in, uh, less initially, which was written in, uh, which is, uh, CSS or JS to CSS. And so
Subra_Mishra:
Hmm.
Charles Max_Wood:
you could actually change the colors in the setup, right. And things like that. And so you, you did have a lot of flexibility you could take just from the get-go. Um, A lot of that kind of changed as they went from version 2 to 3 to 4 to 5. But yeah, I mean,
Subra_Mishra:
Yeah.
Charles Max_Wood:
you're not necessarily giving away the option of using your own styles. Typically, what you're doing is you're building your styles based on theirs.
Lucas_Paganini:
Yep. Yep. Chuck, you said something about focusing on the problem that it solves and then deciding based on that instead of deciding first if you want a CSS framework or not and then which one should you use. So I thought we can translate the same question in a way that is more focused on the solution and the problem that it solves. So if we look at it historically, initially we had strong CSS frameworks Bootstrap Foundation and Materialize, which even though you could apply your own styles, a lot of developers just used styles that came
Charles Max_Wood:
They just
Lucas_Paganini:
from
Charles Max_Wood:
use the bass,
Lucas_Paganini:
default
Charles Max_Wood:
yep.
Lucas_Paganini:
teams, exactly. So that fixed a particular set of problems which were, I am not very good in CSS and I want a framework that already gives me things stylized because I don't know how to do that and I don't want to learn that. So it tackled specific developers that... had this need because there are a lot of developers that fit this category. There are a lot of front-end developers that they are much more interested in the logical aspects of programming than the actual
Subra_Mishra:
Like JavaScript.
Lucas_Paganini:
styles. Exactly. And that's okay. That's okay. There is room for that. There's room for everybody. So if you are a developer that just wants default styles and you want to go fast, like you don't care how the button looks, you just want a button and you want it to not look... awful, then Bootstrap, Foundation, and Materialize really gave you what you were looking for and they gave you in
Charles Max_Wood:
Right.
Lucas_Paganini:
a way that you'd really
Subra_Mishra:
Yeah.
Lucas_Paganini:
felt like you were doing your job faster. But then, that created other problems, which were that other developers that actually either wanted or needed to make changes to those base styles. we're having a hard time doing that. So either because you have a custom design that you need to comply with, and you started with the base bootstrap styles, and now you're trying to work around that, and things are getting messy, you're trying to create selectors that have a higher... that have a higher selection power than others so that your styles supersede the default ones that come from bootstrap. And then you see a lot of people using bank important and things just become really
Subra_Mishra:
Yeah.
Lucas_Paganini:
difficult. And then
Charles Max_Wood:
Right.
Lucas_Paganini:
there comes a new generation of solutions. And then you have BAN CSS, which led this second wave of CSS frameworks. And it's extremely different because if you look at BAN, which is Block Element Modifier, you will see that it's only... a way for you to name your classes. So it's only a naming framework. It's not a framework that gives you base styles. It is just a framework that gives you a convention for all the developers to work in the same way and organize their CSS in the same way so that it's not completely different based on which developer is coding. So you get consistency. but you're not getting default styles. You're coding everything yourself. So you get this flexibility, but you lose the default styles, but you still have a way of having consistency somehow, at least in the way that the code is written. So that was the second wave. And now we are in the third wave of solutions, which is where Tailwind fits. So we are talking about frameworks. in CSS that they can give you a good balance of both. So you have consistency in how you work. So if you're on a team of 10 developers, there's a consistent way of how all of them are working. It's not like John is working in a way and Beatrice is working in a complete different way. And they try, when they try to do code review on each other, It's just a lot of opinions going back and forth, but there is no set of standards where they can rely upon. So
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
Tailwind fixes that because it gives you consistency, it gives you a proper way of applying styles to elements that the entire team can share and use. And it does that in a flexible way. So if you want to do styles that are very different from... like a base team, then you can. So it's really easy for you to create your own custom styles, but you also have consistency. So it's a different solution than the first and second generation of CSS frameworks provided. And I think that the entire community of developers or front-end developers haven't really realized that yet. So some of them are not... given Tailwind a chance because they don't understand that it solves things in a different way than the previous generation frameworks did. And also some of them are just afraid of the initial impression that they get from Tailwind because if you use it extensively, you can get very, very long... HTML classes. So you can have an element, a div, for example, that has 10, 20 classes. And then you
Subra_Mishra:
Yeah.
Lucas_Paganini:
look at this HTML and you think, that can't be a good practice. Like, this is the entire opposite of what I've been taught, that I should have a single class and define all the styles on CSS, on a CSS file. Like, this is the opposite of what I've been taught. So some people are not giving a chance to that either because of... pre-conceptual ideas from previous generation CSS frameworks, and others are not given a chance because of the syntax that it uses, and it feels counterintuitive to what we've been considering best practices for the last couple of years.
Charles Max_Wood:
Right. It's, it's also interesting. And I know that, um, tail tail wind does sort of the component or the kind of is some of the smart elements and things like that, the bootstrap and the rest of them did, but for the most part, my experience with tail wind and most of the people that I know that use it, they're only using it for those styles, right? They're not using it for those other pieces. And so when I talk to people who love it, they love it because it is that breakdown of this is exactly how I want it to look. And I'm just going to dive right in. I mean, I kind of
Subra_Mishra:
Yeah.
Charles Max_Wood:
came around to the idea of, yeah, I'm going to have a class for, let's say, I'm building a, I mean, top end devs, I'm building a courses portal, right, or a meetups portal, or things like that, right? And so coming in, the idea was, yeah, you would assign the class of this widget, right? And then inside it, it was the, you know, you'd have the dot title or maybe it was dot course title, right? So you wouldn't have that collision between the two classes if you had something else with the title or the page title. And yeah, it was kind of the way that that came through that it was like, okay, well, I've got courses and then I've got meetups and then I've got conferences and I've got conference talks and I've got, you know, and all of these things mostly look the same, right? And so then what do I do? I do.card. Well, the problem is, is the layout isn't the same inside each card. And so I'm looking at it and trying to figure out, okay, what do I do with this thing, right? And so in a lot of the systems that I use now, you know, be it Rails, Rails has a view components gem that allows you to basically do partials or components, right? And then I can apply JavaScript to that as easily as I can apply CSS to it. I can just go in with Tailwind and tell it exactly what I want it to do. That's the thing that I really like about it. The CSS to me is telling it how I want it to look. Instead of telling it what it is. When I go in and I drop in those... CSS classes that I'm basically telling it how I want it to look. This is how I want you to look. This is how I want you to behave. Right. Float, flex, whatever. Right. Just does the right thing. Right. And yeah, I'm not, I'll admit I'm not completely versed on like flex box and crap like that. Um, you know, I use it and I look up the stuff when I need it, but. Yeah. You know, for the most part I don't, but the, the thing that I really like is, is at the end of the day. It feels more like I'm coding my UI. And I'm saying, you know, add the rounded corners, you know, add this margin to the bottom, add this margin to the top. And the other thing I'm going to point out is that I've done enough work in a bootstrap four and five to where they've also started adding some of these kinds of classes, right? So if you want margin bottom 20, you don't have to add it as an inline. style and you don't have to add it to your class. You can just do MB-20 in Bootstrap. And so some of these ideas, I don't know if Tailwind invented them and then Bootstrap picked some of them up or if they kind of evolved separately, but a lot of those make it really convenient because I don't have to go in and find where I defined the card style and the course style, I can just do the thing. I can just say, Hey, this is how I want it to look. And at the end of the day, I get the behavior I want on the screen.
Lucas_Paganini:
Perfect.
Charles Max_Wood:
So that's the appeal to me.
Lucas_Paganini:
This was a very good segue to talk about the conceptual vision that I have with tailwind versus other CSS frameworks, which is what we've been talking about before starting to record. So
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
you were saying, I am used to defining like a card as.card and then I have a title, so it's the card title and I have the description, which is the card description. But sometimes I have trouble. I have... problem which is what if I have two cards that they look alike but they have different functionalities so one of them is like a card for events coming up another is a card for courses that I'm selling so then of course like you can just create a card instead of event card or course card but eventually you're going to get to the same problem that people have with object-oriented programming, which is you're trying to abstract things so much that sometimes you're extending a class that isn't really what you want to extend. So, for example, you're just trying to get methods and properties from the parent class, or in this case from the parent CSS class definition. And then you extend that class, but sometimes, semantically speaking, it doesn't make sense to say that your class also extends that other class. Sometimes it just doesn't make sense. For example, you can't say that a dog is a person, but both of them have a birth date. So like, is a dog a person? Because a person has a birthday and dog also has, so you want to extend. person to get all the things that a person has, you don't want to do that. So that's the same problem that we have with semantic CSS. Semantic CSS is when you define classes in CSS that define the elements based on the contents, based on what they do in the page, based on the purpose of why they exist. So for example, you have a card that is for events. So you create a class in CSS called Event Card. So this is Semantic CSS. And this is what we've been taught to do for the past years. So all the old schoolers listen to those podcasts. You might remember CSS Zen Garden, which was a website that showed you the power of what you can accomplish just with CSS. So we had a fixed HTML. and it had different versions of the website that only had a different CSS file. And then people went crazy about this and they were like, oh, this is so cool. Look what you can have if you just use semantic CSS. If you name the title using a class called title, then you can have different CSS files and each CSS file styles the title in a different way. And that was, that promised look. really interesting and we bought that. And because of that, we had a set of best practices for the past years that don't really go with what TOEIN suggests or what those bootstrap utility classes suggest, which is you just have a class that it adds padding or that it adds margin. But then you might look at that and you think, oh, that's wrong. That goes against what I learned. I learned that we need to have separation of concerns. We need an HTML file for the structure, a CSS file for the styles, and a JavaScript file for behavior. So I can't have an HTML that has a class that is too close to what the style that will be applied and not what this element is. So if I have a class... and I'm applying a class to my element and this class is like padding 16, then this is wrong because this goes against the best practices that
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
we had for the past years. And the idea is that this is not wrong, it's just a different mindset. So right and wrong are gonna depend on which concepts you're applying to the code that you're using because at the end of the day, The only wrong code is the one that doesn't work, is the one that's breaking at
Subra_Mishra:
Yeah.
Lucas_Paganini:
runtime. So this is the only wrong code. All the other codes, if they are working, they are technically speaking correct. But now, of course, that if you're talking about code in terms of the best practices that we had in the past couple of years, then having those utility classes is wrong. But... If you just look at that as if it were a paradigm, this could make it easy on you. So what I noticed is that Tailwind is kind of like functional programming for CSS. And that has helped me tremendously to see the value in that and to understand that it introduces a different concept of what is right and wrong because the paradigm is different. So in functional programming, you don't define classes. So in object-oriented programming, you define classes. So you need to have semantic names for the classes that define what they are. And in functional programming, you are defining very, very small things and you define them based on what they do. And you compose
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
them together to do what you want, which is exactly what we're talking about here. So if you have many utility classes in CSS, this is a functional approach to CSS. instead of you defining card, you just add to your element all the classes that apply the styles that you want. So your card has a dark background, you're going to apply a class which is
Charles Max_Wood:
Yep.
Lucas_Paganini:
dark background. Your card has a bold text, you're going to apply a class that is font-weight-bold. And this is a complete different paradigm. It has tradeoffs, it's not for free. So you do get more reusable code. You do get many utility classes which you can reuse in many places, which makes your AND CSS bundle smaller because you're reusing your code in more places. You also get consistency because all your developers, if they studied K-O-AND, then they know the different utility classes that exist and they can use it. You're not... losing flexibility because if you want to go directly to the CSS and create a semantic class, you can and it is going to work. So you can still do that. You don't lose the possibility of doing that. But what you lose is you get an HTML element that perhaps has too many CSS classes. And that might just look ugly to you and you might find it a bit difficult to read what is going on there. But I just feel that saying that out loud seems like a very weak reason to not try it out, right? Like you're gonna
Charles Max_Wood:
Hmm.
Lucas_Paganini:
have consistency, flexibility, and a bunch of utilities that are gonna give you a reduced bundle size, and if your team knows that they exist, they can all use it. and people are going to be able to read each other's code easier because it will be more consistent. And the only thing they're going to lose is that you're going to have less styles in CSS files and more styles directly on the HTML by applying classes to HTML elements. So this actually seems like a very good reason to try it out. Like you're only going to lose that. So why do people have a hate and love relationship? because it goes against what we've been taught for so long. It goes against separation of concerns. So for you too. To say that this is a good idea, that to use that is a good idea, you have to really reflect on something that has been considered a global best practice for the past years. And it's really hard for you to say that because so many people that you admire were saying that that was a good thing and now you're seeing a technology that goes against that. So I understand. It is hard. But I think that if you're looking for those benefits that it can give you, then you should try it out. I think it would be useful
Subra_Mishra:
Yeah,
Lucas_Paganini:
at least
Subra_Mishra:
I
Lucas_Paganini:
to try.
Subra_Mishra:
think you're just to add to your point. One of the main reason also tailwind will be good for like, suppose you go with the normal semantic way, you added everything. Now there is a decision to change the design. Then it will be harder for normal CSS way. If you go with a greater class for the whole whole card and created something. inside it but in tailwind it will be pretty easier to change the design so somehow like it's if it is on the initial stage and now you are changing the design I think which happens a lot in UI I think in every year or two you will change the design so that user will not feel bored like they're seeing it every day and kind of something is not new So in those scenario tailoring will be pretty useful because you are not creating a class by yourself. You are just using the normal CSS principle to align your element where it should be and just giving some colors and all. So
Charles Max_Wood:
Mm-hmm.
Subra_Mishra:
I think reversing the design is one approach, but I would say that another way where like I have listening some podcast as well, as well as some discussion with some friends like people are saying that I can develop good CSS myself like now CSS has a variable CSS has method calls CSS you can I can have like a theme set up and I just change the theme everything will change according to the variable I set so now CSS is also a lot powerful now as it was before So they are saying that as we can make a powerful kind of frame of ourself if you are using tailwind and we now we now we depend on although you can do both still you can create some variable and try to create a theme yourself and act on that. But if you go deeper on to an organization point of view like suppose if I tell my previous to previous organization that's which mostly they have a separate UI utility. You just, what the developer will do is they just need to import that button. And according to the theme, it will change the theme. So if you're trying to develop a setup or kind of a regulation in your organization that everyone should use this, your application should look same always, then you can use the benefit of a custom CSS so that it will be as custom as possible and it will be efficient for you but that comes under the trade-off of now if you have a different mindset of changing your to a changing your CSS to a different design then you have to go through and rewrite everything again but if you have would have used tailwind it would have been easier to I think that's the two, three reason people are like love tailwind. Some hate tailwind depends on what's their scenario.
Charles Max_Wood:
Yeah, I just want to pile on that easier to change because I was thinking about the same kinds of things in my own workflow.
Subra_Mishra:
Hmm.
Charles Max_Wood:
And effectively, what I was looking at was. A lot of times, yeah, I'm tweaking the design, right? It's not that I'm writing a new, I mean, sometimes I am, sometimes I'm writing a new component, right? But sometimes I'm trying to just make it look better, right?
Subra_Mishra:
Yeah.
Charles Max_Wood:
It's, you know, there's something wrong with it, I'm not quite sure. And it's a lot easier for me to just go and change the number on the margin style, right? Or, you know, go change the number on the padding style or go change... You know, and just kind of tweak it right there in the HTML. Then it is for me to go and find where it lives in the CSS files that I have then, you know, minified and all the other things we do to it, right?
Subra_Mishra:
Yes, yes.
Charles Max_Wood:
Um, you know, and then have it rebuild my CSS files so that it'll reload. Instead, I just, I just changed that class and, you know, I can fiddle with it until I get what I want. And so that's one way that, at least for me, it's easier to change slash debug as much as CSS, you know, stuff like that is debugging.
Lucas_Paganini:
Yeah, that's also a good argument in favor of Tailwind. And this is something that the actual creator of Tailwind was saying on Twitter. He actually, like, just to correct me, I'm not sure if it was the creator of Tailwind that said it on Twitter, but I did saw that on Twitter, and I believe it was the creator that said that. And he was saying, yeah, the advantages of you having an HTML file and a separated CSS file for the styles are that now you have more places to look to find out what you want to change in your code. So obviously this person was being sarcastic and saying that, yeah, if you have separation of concerns, then you also, it also means that there are more places to look to find out where you can change your code to make it behave the way that you want. So as you were saying Chuck, sometimes I just want to change the padding a little bit, I want to change the margin a little bit, and I don't want to fiddle with where in the CSS tiles is that the end result is minified, maybe I'm not just finding out where I need to change to make this look the way that I want. And if you're using something like Tailwind, utility classes, then you can just... apply a utility to your HTML directly, or if you're looking for something to remove, then it's also easier to spot because you can just see the list of classes applied to your HTML element and just remove the ones that you don't want to apply anymore. So it is easier for you to find where things are.
Subra_Mishra:
I guess Telen also do one thing which normal CSS doesn't do. I think it's not CSS if you're using less of SAS. It's do browser independent thing like you know need not need to add webkit, Mozilla, all those things. But it's also done by SAS and less. So this also a other benefit of using a using a framework. यह आप तो यह आप पर पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पार्था पा
Charles Max_Wood:
Yep, one other thing I am gonna throw in here is going back to should I use a framework? Cause I think it is
Subra_Mishra:
Hmm
Charles Max_Wood:
a valid question to ask. I just, I don't want people to instinctively reach for it if they don't need it. But one thing that I, you know, when we talked a little bit about this before is like Bootstrap, for example, gave you kind of a baseline style. Tailwind does that as well to a certain degree. Pick a framework that you like. the baseline style of that you're willing to modify from there.
Subra_Mishra:
Like I would like have a suggestion in terms of different kind of users. Maybe in in organization point of view how the flows went like you have a designer first they will give you the style guide then it then to come to a developer they will they don't have any option to change the design it should be look it should look how they have the designer has designed. and you publish the code. The other approach, I think it's the most approach, like mostly developer decide the design, like Chuck's doing the website, he is the designer here, he is the developer. So in that case, you have an option to tweak a lot because you don't follow the step, like first you go to the Figma, design it, do the styling, do the, like create the CSS and all those things. I think in your case, where you, are designing and you have a lot of tendency to modify the thing then you should go always go with a quicker approach like using a framework and and use how how fast you can go to the market but if you are in the other side of the spectrum like you have a solid instruction to do like this and you have given the css code as well or maybe easier css which you can replicate and you know not going to change in near future then then it's like having extra framework load to the
Lucas_Paganini:
I'm still divided,
Subra_Mishra:
like it's.
Lucas_Paganini:
actually. Like, I completely understand the advice, and I can see the value in that. I still think it depends so much on too many other factors. For example,
Subra_Mishra:
Mm-hmm.
Lucas_Paganini:
we are talking to people that really like Angular. Otherwise, they probably won't be listening to a
Subra_Mishra:
Yeah,
Lucas_Paganini:
podcast
Subra_Mishra:
till now.
Lucas_Paganini:
called Adventures in Angular. So if we ask to our audience, you're going to create a simple website. What are you going to use to create this website? I bet that most of them are going to say Angular. And what we're saying here is if you're building something very simple, then perhaps you don't even need a framework. And it is
Subra_Mishra:
Yeah.
Lucas_Paganini:
true, like you could build a very simple website with no framework. It's just if you're already used to it, then it might be the right choice because of your background. What you have to consider is also the background of all the other team members working with you, of course. So, for example, you're alone in a project. Okay. Oh, I don't have to consider that. It's a project that I'm building alone. Okay, but is it going to be just you for a while or do you plan on hiring other developers to work with to... in the following months or in one year from now. Because if you are gonna look for other developers, then every little thing that you add on top of your tech stack becomes a requirement that you're gonna have to look for in those developers.
Charles Max_Wood:
Yeah.
Lucas_Paganini:
So either this person will need to already know how to use this technology, or you're gonna have things that are required. So like you need to know Angular, but... We are also using Tailwind and other technologies, which if you don't know, that's okay. I will pay for you to dedicate your time to study that and be able to be on the same level that me and the other team members are so that you can also contribute to this project. So there is a cost to everything that you add, but there is also your speed and maintenance costs over time. What I mean by that is you can build a website without Angular, and it would be very much easier for you to find developers that don't know Angular to maintain this website later. But what if you build a lot of these projects and then each one of them becomes different from the other? So now... It's easier for you to hire developers because there are not too many technologies involved in that particular project tech stack. But for like every project is completely different. So even though learning one project is easier, when you learn how that project works, you can't really apply a lot of the knowledge that you got from understanding this project to the other projects of the company. And this is what you get when you have... those tools that provide consistency. So if you decide to use Tailwind and Angular and other consistent solutions, then you increase the initial time that it takes for new developers to understand this project and be able to effectively contribute to it. But you also gain in the long run in terms of, I can move this developer to other projects. And the time that it's going to take for this developer to understand those other projects will be way smaller because it looks so much like the other one that he was just working on and that he's already proficient with. Because the technologies are the same, the patterns are the same, there is consistency among projects. So you get that
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
when you choose to use a framework. And I think it should also be
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
very, very heavily considered, especially if you
Charles Max_Wood:
That,
Lucas_Paganini:
have multiple projects.
Subra_Mishra:
Yeah.
Charles Max_Wood:
yeah, those are really good points. We've been kind of talking about the technical and workflow requirements, but yeah, absolutely. There is, I mean, that's why we hire people to be Angular developers, right? Instead of, you know, hiring people to be a whatever developer, you know, we kind of fall back to people who, who use systems that use similar concepts if we can't find somebody that already knows Angular, but. where we're sitting right now, and if your company uses Angular, yeah, the benefit of using the framework and hiring somebody who knows the framework is that they can hit the ground running faster, and you have that efficiency across all your apps because they can move from one thing to the other. Yeah, I really dig that. But yeah,
Lucas_Paganini:
and also
Charles Max_Wood:
there
Lucas_Paganini:
reuse
Charles Max_Wood:
is also
Lucas_Paganini:
things.
Charles Max_Wood:
a cost.
Lucas_Paganini:
Yeah.
Charles Max_Wood:
Yeah. But the cost of relying on another technology that you don't control. I mean, most of the time we do it all the time. Everything we use is open source or almost
Subra_Mishra:
Yeah.
Charles Max_Wood:
everything. But yeah. Um, the reality is, is that something may change that may cause us to have to adapt to it.
Subra_Mishra:
Yeah, I think nowadays also like things are becoming a lot framework driven. Like I know a lot of people haven't like now starting their web development carrier directly with the framework.
Charles Max_Wood:
Hehehe
Subra_Mishra:
Like because a framework handle a lot of things. You don't worry about reflow. You don't worry about a lot of performance related thing which we need. to handle in if you are going with normal JavaScript and HTML. But yeah, so if you just that also a you also need to see the market. What's market wants? But suppose you know suppose you have a job offer with only HTML and JavaScript and no developer wants to join you. That's also an issue. So if like I think Lucas you may might know more than to hiring someone, but I think definitely this might be in your mind that I should design things like at least which should be hot in the market. Else what will happen, people will join you, they will learn new things and they will try to find job in that sector and they will go there. So it's also it always depends kind of scenario what to use and what to not. But yeah, I think it's never too late or too bad to use some new technology, which helps to design faster, change faster and run application little efficiently than using other CSS heavy frameworks.
Charles Max_Wood:
All right, well, is there any other aspect of this we wanna dive into before we do promos and pics?
Lucas_Paganini:
Oh, so many that we could. But
Subra_Mishra:
Yeah.
Lucas_Paganini:
I
Charles Max_Wood:
Hahaha,
Lucas_Paganini:
think that,
Charles Max_Wood:
so true.
Lucas_Paganini:
yeah, I think that in terms of keeping this episode focused on our initial promise, which is when should you consider Tailwind? When should you give it a chance or not? What are the problems that it solves? I think that we have done that by now. I think that the audience can think about some of the benefits that we discussed. So. consistency in a way of working. So if you're on a team of multiple developers, that becomes much more relevant than working alone. If you are looking for something that is easier to change later, so you don't want something that you create semantic classes, and then you feel like you're always getting rid of... styles that you created because the entire thing changed and that semantic doesn't apply anymore, it doesn't really make sense. That might be more useful to you because that gives you a lot of small utilities that you can apply, it's easier to change them. It's also gonna take you some time to learn. Like it's not gonna be something that you're gonna be proficient overnight. I think that at the end of the day is like, does slow-dash makes me a faster developer? Yes. only after I memorized the things that I need and that I use the most from Lodash. There are many utilities libraries that... utility libraries that I use a lot, but I only extract as much value as the amount of things from those libraries that I know of. So Lodash has more things than I am aware. FPTS, which is a library that I use extensively. for functional programming in TypeScript has many things that I haven't explored yet, so thus I'm not using them. So the amount of value that you're going to extract from Tailwind or any other utility, it's directly related to how much of it have you explored and you know that exists, so you can reuse. And you have it in your mind. Because for you to become faster at that, you need to be able to type it, like just from the back of your mind. Because if you have to
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
consult the documentation all the time, then you're probably not going faster. But it's definitely a matter of time. If you do it for long enough, eventually you're going to memorize things and it will be faster. But in the beginning, you might actually feel like it's taking you more effort to try to use it. So these are all things that you need to consider. If you are interested in functional programming, this is a framework that brings the functional paradigm to CSS, which might be interesting to you. But it doesn't mean that it is exactly like functional programming in JavaScript, TypeScript, Closure, et cetera. It's functional. Is the functional paradigm applied to CSS? So it is going to be different than the functional paradigm applied to JavaScript and TypeScript. So you might not like the functional paradigm for CSS. So these are all things that you need to consider, but I think that from what we discussed, it was deep enough for you to understand what we mean by that and decide if that's something that you want to try it out. or not. So I wouldn't go deeper into anything else because otherwise I think we would go too much off topic.
Charles Max_Wood:
All right, well, let's go ahead and do some picks. Let's do the promos first. Subra, what are you working on that people should know about?
Subra_Mishra:
Yeah, I'm currently working on like making videos on standalone components that series is going on in the last last episode I have told about one video and this episode I have released on how router works and how you can deal legi load your standalone component. I like I like the way like how angular is going functional. Like in the video I have shown like Without any module at all, you bootstrap your application, provide your routes. So you will not have add the RedNG module at all. And previously, how you load the router, now it's pretty easy. Just an array. And that's how the powerful of functional programming and going with standalone components and all. So that will be my promotion for this week.
Charles Max_Wood:
Awesome. How about you Lucas?
Lucas_Paganini:
Awesome. I will promote two things. So first, just like the last episodes, I am still promoting my web animation scores. I imagine that most of the audience listens to this, and they're like, I am an advanced Angular developer. You're going to talk to me about web animations? Like, this is so basic, dude. But I think that most developers haven't really created a strong. foundation on that. So this is why I'm talking about this. Just like we were talking about CSS and you can do things in CSS even without having a strong foundation of how things work. You can also do transitions and animations. I almost lost the word. You can also do all the features about it and how you can make animations and transitions which are more performant and using all the features that exist in the browser in your favor. So I am going to promote my course to create the solid foundation for those of you that want that. So you can check it out on lucaspaganini.com slash web animations. At this point, the course is not yet launched. but there is an open waiting list, and if you join the waiting list, you're going to get a huge discount when the course gets released. So if you're interested in that, lucaspaganini.com slash webanimations. The other thing that I wanted to mention briefly is just social media platforms. Is I think people got to use of like, oh, just follow me on Twitter and follow me on Instagram, and then you're just going to consume my content. The thing is, there is a way for you to message people on social media, and I answer all messages. So I have met lots of interesting developers around the world in the last few weeks, just because they followed me on Twitter, and we just started chatting on DMs, or they followed me on Instagram, and we started chatting on DMs. So I am going to promote my social media, Stu. not for you to follow me to consume the content that I create and post there, but I'm going to promote them if you really want to know me and have a conversation. So reach out, we can have a chat. I'd love to meet all of you, like the actual humans listening to our voice every week. And yeah, just maybe we can help each other out in the projects that we're working on, career tips, etc. So, at Lucas Paganini on Twitter. and Instagram.
Charles Max_Wood:
Awesome. I'm gonna throw in, I'm just gonna promote a new podcast that I am starting. It's gonna, I'm starting it this week actually. I think it'll probably launch early next week because as we're recording this, so by the time this goes live, you should be able to find it. The show is called Catapult, Your Coding Career. And it's, the logo or the artwork has a, rocket on it. So you should be able to find it. The idea is, is that I have a whole bunch of people essentially asking me questions like how do I stay current? What should I be learning? How do I go from junior to senior? I feel like I'm stuck in my career. I'm not making enough money. Am I good enough to, you know, to move up? How do I get a raise? Uh, yesterday I went to lunch with a bunch of local, uh, developers that I've known for years and years and years and actually worked with a couple of them. And. We had a junior developer show up and she was talking about her work situation and some of the things that they had and hadn't done to basically support her in her learning. Right. They hired her as a junior, knowing she didn't know a whole lot about how to code. And then they effectively. demoted her after three months because they hadn't really supported her and her ability to learn how to do what she needed to do. And so, you know, you, you kind of look at these situations and I'm just like, people shouldn't be stuck. People should have ideas on, on what their options are and where to go. And so yeah, my, um, I'm just going to encourage you all to check it out. Cause I'm just going to answer questions there. If you have a question, I'm working on getting a form. on the website so that you can actually just, you know, tell me what your situation is. And then hopefully I can reply to that. Or you can get coaching topendevs.com slash coaching. But yeah, I mean, that's ultimately what I'm after there is just helping people kind of open the gate there and figure stuff out. And then I'm going to be doing a paid video series that goes along with it, that, you know, shows you what to put on your resume and shows you how to, how I do some of this research. where it's a little bit difficult sometimes to explain it, if that makes sense. So anyway, that's my self promo. Let's do picks. Subra, you got some picks?
Subra_Mishra:
Yep, I think I was playing with another JavaScript based backend which is bunjs or you can call it bun and it's quite faster like if you check I'm just checking their stats here so in they are saying for the server side rendering for react nodejs support 21000. request per second and burn support 71,000 requests so it's quite faster and burn X which is 100 times faster than NPX so but it's on initial stage and what I like about burn and you know like difference between burn and Dino what Dino tries to do is it's separate environment but what burn is doing is try to work. with node modules. So in future it might happen like you just grab your project, put in the burn instead of node start you would do burn start and it will work and it will work faster with sockets with different rendering on server-side rendering all those things. So just go ahead and check that uh it's it's fascinating like how fast it's going on. I think people are saying it's quite faster like rushed it's going towards JavaScript is now going towards it in terms of neck-on-neck to our rushed or C++. I'll be more than happy if it is faster than C++ then I don't need to listen from C++ guy that we are fast so So let's go and check one
Lucas_Paganini:
I love that.
Charles Max_Wood:
Awesome.
Lucas_Paganini:
I've been looking at Bun a while ago, but I didn't really give it a chance, honestly, as soon as I saw the premise. So it's a new JavaScript runtime. I was like, why do I need that? Like, we already have Node, Dino is coming. I'm fine. But now that you said that it's much faster and I opened their website to check it out. And it seems like they can also run TypeScript code directly because
Subra_Mishra:
Yeah.
Lucas_Paganini:
they already do the transpilation when you run the script. So this sounds really interesting. I really like that it's batteries included. It's even talking about the fact that it already comes with a bunch of the browser APIs already implemented. So if you try to run some things that you got used to thinking, oh, I can't use that in Node because this only exists in the browser. Oh. in Bund that's already implemented. So you already have Fetch API and some other interesting things. So that's really cool. Nice that you
Subra_Mishra:
Yeah,
Lucas_Paganini:
brought that up,
Subra_Mishra:
burn
Lucas_Paganini:
Saurad.
Subra_Mishra:
is like node.js with lots of red bull.
Lucas_Paganini:
Cool.
Charles Max_Wood:
Yeah, it's funny, I'm just putting in a request on the Discord server that we use to communicate about top end devs, and I'm
Subra_Mishra:
Mm-hmm.
Charles Max_Wood:
dropping it into JavaScript Jabber and just asking Michaela to line us up an episode, so,
Subra_Mishra:
Yeah.
Charles Max_Wood:
cause that would be awesome.
Lucas_Paganini:
Yeah, yeah, there's definitely too many things that we can talk about that would be relevant for all developers, not
Charles Max_Wood:
Yeah.
Lucas_Paganini:
just Angular developers. So I am down for that. And my pick for today is gonna be Mid-Journey AI, which is an artificial intelligence that can generate really, really good illustrations.
Charles Max_Wood:
I've been playing with that.
Lucas_Paganini:
Yeah, it's so cool, right?
Charles Max_Wood:
It's so cool. Yeah.
Lucas_Paganini:
Oh, man. I am both happy and also sad that you already knew it. Like, I'm happy because, like, it's cool to know that you're also checking it out. And it's really interesting. I'm sad because, dude, I'm trying to find ways to compete with you, Chuck. Like, you're producing way too much content, dude. I'm trying to use new tools. Like, I was like, I'm going to use artificial intelligence. I'm going to go faster. And then you're like, Okay, we're releasing a new podcast and like, damn, how, which vitamins is this guy taking? Like your picks need to be your vitamins, dude. So yeah,
Charles Max_Wood:
Okay,
Lucas_Paganini:
but...
Charles Max_Wood:
I'll pick my vitamins.
Subra_Mishra:
Wait a minute.
Charles Max_Wood:
No, I'm serious. I'll tell you what I'm doing to keep my energy up. But yeah.
Subra_Mishra:
Like, or you know that Silicon Valley thing, like where you used to take a younger blood to...
Lucas_Paganini:
Yeah,
Charles Max_Wood:
Right?
Lucas_Paganini:
yeah, I love that episode. Awesome. So yeah, I'm just going to pick mid-journey AI. And for those of you that haven't played with that yet, first, there are so many nice tools using artificial intelligence. We can also do an episode just about that. I think it would be more interesting to talk about that in an episode with... like a more broad subject because it goes so much outside of Angular, but we could definitely talk about that. I was looking at a list of all the artificial intelligence tools that you can use and where you can use them. So, there are great tools to do copywriting, video
Charles Max_Wood:
Oh yeah.
Lucas_Paganini:
editing, voice overs. There's just so many things and Mid Journey is a great AI to generate beautiful images. So the idea is you give it a description of the image that you want. So let's say I want Lucas Paganini running at the beach using expensive Nike shoes and a Mexican hat. And then it's gonna generate a version of that for you real quick, like much faster than it would take for a normal designer to create this illustration from scratch. And then it generates four variations, and then from those variations, you can tell it, oh, I like this one, generate more variations based on that one. So it's really, really cool. I'm on the paid plan because we're using that professionally. We need a more flexible commercial license to use in our websites, et cetera. But I highly recommend that it has... increased our design productivity dramatically. There's like, Unvoid before using AI tools, and Unvoid after started using those next generation tools. We all feel much faster in all areas. So design, development, content creation, everything is getting better. So just check out those tools, don't fear them. Like... You should not fear them. You should learn how to use them so that you use them in your advantage.
Charles Max_Wood:
Yep. Yeah. One thing I'll add is you can also add filters for, you know, photorealistic or, you know, with people or without people. Right. Cause some of,
Subra_Mishra:
Yeah.
Charles Max_Wood:
some of them, I, you know, I don't, I don't want a person in it sometimes I want to face. So, you know, and you could tell it 4k or you can tell anyway, it has a bunch of, it's not just the content, but you can tell what you want it to look like. There were some people that, because I'm in a discord, I don't know if that's how you, how you got added to it too, but I make the request in Discord, right, and then it gives me the images. And some people were saying in the style of it, and then they would choose an animation style like a cartoon or a comic, and they would get back stuff that looked like that comic, which was cool. So, anyway, I'm really liking it. I'm probably going to sign up for a professional. The thing that I am using it for, just to kind of piggyback on this a little bit, is So I was using stock photos before on the email list and stuff like that, right, to make it a little more interesting, give you all something to look at before you read stuff and pictures connect with people in a different way than just words. And so I was putting that into the email list as I was starting to warm it back up. And sometimes I couldn't quite find the right picture and sometimes I was worried about licensing on the picture. And so mid journey, I mean, you, pretty much can use the images. I mean, they are licensed, but you can mostly use them however you want, you know? And so you, anyway, I was much more flexible and I was much more likely to get what I wanted if I could
Subra_Mishra:
Yeah.
Charles Max_Wood:
figure out the way to phrase it so that the AI engine would generate the right kind of picture. So anyway, I'm gonna do the board game pick first
Subra_Mishra:
Ten vitamins.
Charles Max_Wood:
and then I'm going to pick, and then my vitamins. So. And you asked for it, so it's gonna be a lot of picks, I'm just saying.
Subra_Mishra:
Yeah.
Charles Max_Wood:
But the board game pick is actually a card game, it's called Karma, K-A-R-M-A. And it's similar to a game that my wife taught me when we got married called Idiot. And effectively what you do is you deal each player nine cards, you place three of them without looking at them face down. And then you put, you look at your cards, you put your three highest cards on top of those face up, and then you play a card or if you have a pair, two cards of this, you know, of the same kind, and you have to match or be higher than the card that's face up on the discard pile. If there's no discard pile, you can play as low as you want. Um, and so you would just play and, and then you draw back up to three cards. until the draw pile is gone and then once you're out of cards then you can play the cards that are on top of the three cards in front of you. And once all three of those are gone then you can play the cards that are face down. But if you play a face down card and it can't beat the top card on the discard pile you have to pick up the discard pile. And it's the same throughout the game right? If you can't beat the card, match or beat the card on the discard pile you have to pick it up. And then if you match in this game it's all four? Three? I think there are three of a kind of each number. If you get three of a kind, you get rid of the discard pile. But what Karma adds is they add Karma cards and the Karma cards are like, grab the bottom card and put it on the top or make another person pick up the discard pile or make the next player play a card that's lower than five or things like that, right? And so it's just kind of a fun way to shake those up. The Karma cards beat whatever's on the pile no matter what it is, right? So if somebody plays, play a card five or lower, you don't have a card five or lower, but you have a Karma card, you can play yours and just preempt it, right? Another one's play a table card, which are the cards that are in front of you and those three cards face up and the three cards face down underneath it. So you can play one of those without having to get rid of your hand. And so it's fun. It's a fun game. Takes about 20, 25 minutes to play. All of my kids can play it. The seven-year-old can play it, no problem. Board Game Geek ranks it as a one. out of five in weight. So it's a pretty simple game and we've really enjoyed playing it. So I'm gonna pick that. All right, so vitamins. So here's the deal. There are two parts to this, okay? There's the mental part and then there's the physical part. And I'm sorry for the long-winded explanation but this is what I'm doing, okay? So the mental part, there are a couple of things. One is that I've got this vision for top end devs. I think we've talked through it a little bit on this show. Subra and I, I think, went through it last month or the month before. But, and I'm consistently refining it, right? And so what I want to do is, what I really want to do is I just want to go stand at my whiteboard and just record like a 20 minute video and say, this is what I'm building, right? So everybody knows. I think a lot of folks, they kind of like to do the big launch and I plan on doing some of that for some of these features as well, but for right now, I want you all to know what I'm doing and what I'm... working on, but as part of that, I do a lot of visualization, right? And so I, I, I stop, especially if I either get discouraged or at least once a day, I'll just stop for a couple of minutes and I'll just visualize, okay, what does this look like, right? Um, what, what does it look like to come to work when this is all built? You know, what, what do my finances look like? What do, what does the community look like? What do the people I'm helping look like? What, you know, what kind of payoff am I getting from that? You know, For a while I visualized having an office over on the other side of town. I don't know if I want that anymore, so I quit visualizing it, right? Just visualized, okay, this is what it looks like when I get on with the team, and this is what the team meetings look like, and this is how they were... These are the kinds of things that are reporting happening. We help these people with these things, and we're making a difference in these companies, and right? And so I visualize all of that and how it feels, right? It's not just, this is what happened, but it's... It's like, wow, we're making a difference, you know, and how does that feel and, you know, and all that stuff. And so I think a lot of people discount the power of that kind of a thing, but the reality is, is just seeing it and feeling it, like feeling it in my soul and knowing that that's what we're working for, that really gives me a lot of energy to push things forward, right? And because I want to make the kind of difference with people. that a show about, hey, here's how you get the kind of career that'll support the lifestyle you want. Here's how you create the kind of career that is fulfilling, that makes the kind of money you need. You know, all of those things, you know, makes you feel like you're progressing and that you're not stuck, you know, that gives you opportunities to give back to other people. Um, you know, those kinds of things that, that, you know, I know other people connect with, but I connect with too. Um, that was kind of the next stage. have that vision and understand where that will take them, then from there we can kind of go wherever we need to. And so that's a big part of it, honestly. And yeah, I'm still working out kind of the plan on how to get there. And I mostly kind of have the roadmap in my head, but I need to sit down and actually get down to particulars, we're gonna do this and this and this and this. So that's one thing though, is just visualization. And, um, it's, it's been a really, really powerful driver. The other piece of this that, um, has made a major difference for me is I've, I've been doing a lot of physical training and, um, and so, like, I'm not taking anything in particular, right. Um, but, uh, I've basically, I quit eating garbage food. Um, and then I've been drinking a lot of water. I'm actually doing a program called 75 Hard and it's really kind of a lifestyle because you do the 75 day challenge and then there's another challenge after that and another one after that and another one after that. And then you're at the end of the year and you just started over. But the thing that really is making the difference for me is just the fact that yeah, I'm active, I'm moving, I'm working, I'm eating right, I'm drinking water. Um, I try, I, one of the other things is you have to read 10 minutes out of a book, uh, uh, business or professional or personal, um, personal growth book, uh, 10 pages every day, um, and that that's been inspiring me in a lot of ways. And so what it really boils down to is just kind of getting to that peak efficiency where I can, I can move and think and act and, and really be inspired by what I'm doing and, and be doing the kinds of things that I feel like matter to me and make the kind of difference out there that I want to make. So, yeah, it's... I think a lot of people get caught up on, oh, well, you know, if I just lose this weight or if I just, you know, if I could just, you know, take this pill to not be as depressed or, you know, whatever people use for their thing. But what I found is that the ways that we really move ourselves forward in this... is by doing the harder things, right? You know, instead of, you know, taking pills and supplements to lose weight, actually going and working out and eating right. You know, making sure you're getting enough sleep, making sure you're getting enough water, making sure, you know, and yeah, some of that's hard, some of it takes planning, but what I'm finding is, is that it has a more, it has a deeper and more long lasting effect than trying to do it through shortcuts. And, you know, I'm, If you need one of the shortcuts to get going, or you feel like you just need one of those things. I'm not trying to tear any of that down, but my point is that that for me has been the thing that has really kicked things into gear for me. And so it's been the last about two weeks that I've really been going on this stuff. And I'm like, okay, I'm gonna start this podcast and I'm gonna get the email list going. And I'm gonna, you know, the other thing that I'm working on is I'm building a directory of resources for JavaScript developers. And then I'm gonna... basically lift and copy and do the same thing for our next three biggest shows, which are React, Angular, and Ruby. And then, okay, now we're going to do this in the maybe DevTools or DevOps and deployment, which is kind of a wider set of things that people can use. And I see that making a difference for people. some of the other things I want to dial in the coaching program a little bit better and know exactly, okay, you're at this stage, you need to be doing these things. Right? And I can usually talk through it with people and get them there, but to just have that program and have it programmatically set out. And so all of these things kind of come together, the online conferences. But the big things right now, and I really am terrible at focusing on more than one thing at a time. right, are getting this podcast launched, then getting the email list warmed up, and then getting those directories set up, right? And so they're happening in that order and in that priority. And that's the other bit, I guess, to it is that just by knowing what the priorities are and being able to say, okay, sit down and know what to focus on, that also makes a huge difference. And then the last thing I'm going to pick, and I use this off and on, but it's a product by a friend of mine named... Manny Vaya and we actually did a bonus episode in December about this. But, uh, we talked about his system for getting focus, but what he did is he distilled it down so that he has a, uh, uh, product called focus blocks. And I'll put a link in the show notes for that. Um, but focus blocks, what it is, is you, you sign up and then you basically get a link to the calendar that gives you a link to the zoom meeting that you get. And then what it is is each zoom meeting is an hour long. And so, um, they, they take you through a really short routine at the beginning of the hour, and then you leave your camera on for accountability and you commit to what you're going to do for that hour before, before you get started and then you work continuously for that hour. Right. And so they make you, uh, put your cell phone down. They make you, um, close the door. Right. So you're not getting bothered. you know, things like that, and you're expected to sit there and work for an hour. But it's, you know, it's kind of a self-imposed thing, but for me, it's just forced me to get rid of a lot of the distractions that exist out there and allow me to work in a steady fashion in a regular way. So anyway, I told you you were getting more than you bargained for, but that's what I'm doing and that's what's giving me the energy to push through and go, okay. What's next? What's next? How do I make the difference, right? And yeah, sometimes stuff comes up and it's like, hey, crap's broken on top end devs and you're right. So I have to stop and I have to go fix that. Or, you know, I'll have, you know, something I have to address with one of my folks on my team or, you know, my client will need something. But, you know, for the most part, you know, you roll with that, you realize that's just gonna be more important for right now and then you just get right back on task. Anyway, I'm sorry for the big long list of stuff, but that's effectively
Subra_Mishra:
यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह यह
Charles Max_Wood:
what I'm doing, and it is really paying dividends, especially this last week. Yeah. Oh yeah, yep. I guess one last thing that I'll add, and this is, you know, it's funny because none of these are like, cure all, you know, go take this magic pill or whatever. But the other thing is, is that I can't be happy unless I'm taking care of my family and things like that. And so that's the other thing is, I actually plan in every week what I'm gonna do with my family as much as I can. You know, with my wife in the evening, we usually watch a show or hang out, but we do a date night every week. And then I do a date night with each of my kids every week. And so, and what I mean is, is we rotate them through because I have five kids. But so the first week of the month, it's usually my seven year old and my 11 year old. And the next week it's my 13 year old. The next week it's my 15 year old. And the next week it's my 17 year old. Right. And we just...
Lucas_Paganini:
Even with kids you're productive. Like look at that.
Charles Max_Wood:
Yeah,
Lucas_Paganini:
It's five. It's never just one we choose it.
Charles Max_Wood:
but the thing is, is you just make it a priority and you set up a program so that you can make it. And it's made a major difference with my relationship with my kids. And so, you know, just making sure that you know what the plan is. And yeah, we've had to adapt the kid date thing. We've had to adapt some of this other stuff. But the reality is, is at the end of the day, it's important. And so I make it. priority. So anyway, that was very long-winded. I apologize for being long-winded, but I don't apologize if that helps anybody. And yeah, if you have any other questions, let me know. I'm very seriously considering actually adding some of this to the top-end devs methodology. But the top-end devs methodology is kind of based on some of these ideas of the consistent growth and learning and things like that, where, you know, you're You're learning something new, you're committing code, you're meeting new people. You're doing the things that yeah, in the short run, they don't seem like they're going to make a whole hill of beans. Oh, I committed a couple lines of code today. But as you move on and you start learning the lessons of, Hey, I organized this badly six months ago, and if I'd written the code better, then it be less painful now, you know, those are the things that show up in your professional life that really make the difference. Hey. All of a sudden I wasn't expecting to be looking for a job, but I am looking for a job now. Gee, I wish I had met more people, right? And so it's those kinds of things that I'm pushing people to do on the program or career side. And that's what the podcast is all gonna be about. So anyway, I'm gonna stop talking cause I actually have another call in like 10 minutes, but yeah, I hope this helps. Go check out the show cause I'll talk more about this there. And until next time, folks, Max out.
Subra_Mishra:
Bye bye.
Lucas_Paganini:
拜
Charles Max_Wood:
All right.
Tailwind CSS - AiA 368
0:00
Playback Speed: