Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here JS Scott Tolinski

and Wes Bos. Welcome to syntax. This is the podcast with the tastiest web development treats. Today, we've got for you another potluck.

We are, just wrapping up the the summer. Scott and I are just recording like crazy, sort of going ahead so we can take the the summer off of recording. And we're like, wow. We've got a lot of potluck questions that we have yet to answer, so we thought we'd throw another potluck in. Some really good questions to talk about MDX today, ordering CSS. Do you ever use the 2nd property of or 2nd param of JSON stringify? Some really neat ones today, so stay tuned for that.

We are sponsored today by, oh, this is funny, 2 companies that I am using in my next course, but totally unrelated to being a sponsor. 1st Node, Sanity. They are a structured content CMS.

2nd Node is Netlify.

They are the hosting for your Jamstack and serverless functions and all that good stuff. We'll talk about them partway through this episode.

How are you doing today, mister Tolinski?

Hey. I'm doing good. Getting, getting some dev work done, getting my next course planned out. And for the 1st time in a long time, I had, like, 8 or 9 course options that I wanted to do, which sounds ridiculous, but I keep a long running tab of all the courses I wanna do, and then it's like Yeah. Okay. If I ever need a rainy day, then I have this list of courses to pick from or whatever if there's not one I'm super excited about. But the problem for me right now is that there's just 5 or or 6. I know I said more than that a 2nd ago, but things that I really want to do. So I'm, like, having a tough time picking which Node, not because I don't have options, because I got too many good options.

What are the options? You can you can you share the secret? It's a it's a secret.

Unfortunately, I don't Wes, what I don't want I don't want too many good good course ideas here, Wes. If you need some if you need some good course ideas, we can talk after the show. Oh, yeah. I I've got 1,000, but I'd love to hear what you what you think. Yeah. No. That was that was simply just a joke because I know you have.

Alright. Let's dive into the questions here. 1st Node is from Vinny. Howdy. I'm curious to know what you guys think of MDX mdxjs.com.

I'd love to learn more about the pros and cons if you guys have had a chance to use it. So, MDX is, Markdown and JSX sort of put together. So what it allows you to do is if you have a website and you wanna write content, you can write your content in markdown.

But then you can also, just use regular React components right side of your markdown files. So if you wanted to embed a YouTube video or you wanted to throw in a React component or you warp it to and sky's the limit. Right? Like, I like a graph is probably a really good example Wes if you wanted to put a graph in the middle of a blog post or something like that, you could do that with with MDX.

And I personally used it for my own website, and it's awesome.

It's very easy to work with, huge plug in ecosystem available for MDX. So if you want to do what's the underlying layer for it? There's there's, like, a there's, like, a package underneath MDX that allows you to use all of these different markdown plug ins for it, which is really cool. It's it's one of those things where in order to get it working, you need, like, 15 different packages, which could be a downside. But because of all the packages that surround the ecosystem, you can get it to do literally anything that you want, layouts for your website, things like that.

So big big fan of, MDX myself. Have you used it, Scott? Yeah. Hey. I don't know if you know this. I was there when they announced it at, Zite day as it was called. I wonder if it's gonna be Vercel day now, but it's, Zite day. I I was speaking at Zite day, and, they had a really great initial, like, what is that, Deno? They had, like, a really great keynote where Guillermo and all sorts of, Tim and all sorts of the the people from the the next team were all, like, sort of launching a whole bunch of cool stuff. So it was it was a really cool thing. I I was almost instantly excited about MDX because when you first hear about it, you think, okay. Well, is that really that special? But then you think, wow. Actually, the possibilities for working with this are are very, very large. I don't know if you, have ever written slides in code. Do you write your slides in code, or do you write your slides in ESLint software? Okay. I've I've written every slide deck I've ever done has been in, in code as well. What do you use typically for that? Because I typically use Spectacle.

Oh, cool. Yeah. I've like, for for years, I've used just HTML five slides Scott j s, which came out, like I think, like, it came out of Google IO in, like, 2012 or something like that. And I've just been building off of that forever. And, I've tried using a couple different, like, frameworks and plugins, and I always get, like, an hour into trying to, like, make it work and to get it to to work properly. And and I I don't know what I I've always get frustrated with it, and I just scrap it and say, like, I also just want, my old thing back because I have, like, this thing where I write the the slides in in Node. I have a markdown plug in in there. If I wanna if I wanna write markdown, it will convert it for me. But maybe I should revisit that at some point. Yeah. The reason why I bring it up at all is because

one of my favorite projects using MDX JS, MDX deck, which is basically creating a slide deck in MDX.

And this was one of the 1st projects that made me say, oh, this is so good because you do. You have the ability to quickly and easily delineate a new slide just by, like, 3, what is it? The m dashes or 3 dashes? By 3 dashes, it creates a new slide. Oh, cool. So you can create some your entire slide deck. It just like, absolutely nothing.

And sometimes Wes people think about writing code and to make a slide deck, they get like, oh, I don't wanna do that. But, man, this is simpler to me than writing it in an actual SPIDE program because all of your data sort of live separate from the the visual presentation of it, so you can look very plainly at all of the words and see if the words are what you want them to be. So I really like MDXTech. I've been, using this for a little bit.

One of the things I really like about MDX overall is that it seems to have, like, caught on conceptually where it's not just a React thing anymore. So, there is a Svelte MDX called MDSpecs, pnpm, it's every bit as cool as you'd expect it to be. It's fantastic.

There's also, from what I saw, there was Vue JS versions, but I have not used a I have not used Vue JS with MDX before, but I think that's, like, the perfect use case for these new classes static site generators where you're writing everything in markdown, and it's like your whole blog post, and then, oh, oh, crap. I need a chart. Oh, this gets really tough when I need a chart in this page. Right? Oh oh, now you can just drop in your chart React component directly in your MD file. So, no, I'm a huge fan of MDX and typically use it whenever I can. In fact, when I, first created the new Scott at this MD specs was not, in its current Scott. So I couldn't necessarily just use it, and I was really bummed out because I wanted to use MDX in my blog. So big fan big fan of myself. Yeah. But one other thing I really like about MDX is you can pass it your own components.

So, as markdown renders out code blocks in h Node through h six and pretags and block quotes and all that stuff, I mean, most markdown parsers, they'll just give you, like, a class of code or something on that. And with this, it allows you to step in and say, when somebody renders out a paragraph tag or a code block or a block quote, let me step in and use this component instead of it. And then you can the component will give you all the props of that component. It will give you the actual content of the component.

And then it's just a React component from there, and you can return whatever HTML and CSS you want from that specific thing. And I use that a lot in my own, website because I don't have to, like, add classes when I'm authoring something or I don't have to I don't have to add extra markup when I'm trying to author something. It just it just gets swapped out on the render.

Yeah. Cool. So next question is from Johan Schakya.

Hello, mister Wes and mister Tolinski. Hello, mister Johan.

Great podcast. I learned so much from it. Where would you go to put business logic in Vue JS, middle or large scale applications? I try to put business logic in a store, but it makes it hard to be maintained such a store even with spinning actions, getters, mutations, and files that end up using vanilla JavaScript files Wes each file is a class singleton.

I was wondering if this is a good solution, or do you have a better alternative? Now, Wes, I know you don't do a ton of view work, but I included this question specifically because the answer is there there's there's nothing really different here from the React world comparatively. Right? You still have components. You still have business logic, and you still have, like, state and all those things. So that said, Johan, I I usually when I think about this stuff, I'm not creating that many abstractions.

I guess I am occasionally, but I cannot I I like a class singleton just to manage, business logic for things. I don't know. To to part of the the whole componentized universe that we're living in now allows you to sort of write your business logic right there near the template, especially with this latest class of frameworks, whether it's Vue or React. Right? You you write your business logic sort of right there in the component, and then you can reuse that component wherever you want. So granted, that's a a very simplistic look at it once you start to think about things like like we have Redux. Right? Redux has a calls and action.

That action what is it called? The dispatch? Dispatch in action? Sorry. You don't run an action, you dispatch an action.

Then then that performs, another operation which in turn will return a new set of data. I mean, it's like this this abstraction, abstract universe kind of thing. Right? So the the answer here is, like, where do you put this kind of business logic? The answer is to follow community guidelines in terms of how people are doing it in view.

And so what I what I mean by this is because this sounds like a a cop out answer. What I mean is is there it just looked at the React world has a a 1,000 different state libraries. There's a 1,000 different places to put your application state, manager state, and your business logic.

And one of the main ones is Vuex.

Vuex is exactly as it sounds, vuex.vuejs.org, and Vuex is sort of like their their redux style state management. Right? Vue action state. So what I would do is I would follow something like this and not really try to invent the wheel yourself here by creating class singletons or whatever. I I wouldn't try to reinvent any sort of wheel here and just go ahead and look through some of the large examples of large scale Vue JS apps that exist out there or at least those sort of guidelines in terms of how to build that. Beautiful. I have nothing out there. I think you nailed it. Next question we have here from Amber Williams. I commonly find myself engineering complex programs and left flabbergasted

on how to express these ideas to other people when the need arises.

I need to explain to them and remember why I did it in a specific way.

How can I get better at conceptualizing intricate design patterns or functions, as well as have a better recall for these abstractions? That's that's that's a great question because sometimes, like, you come back to Node Bos, like, a year and a half later, and you're like, wait. Where where was this like, when you're you're following around functions for 20 minutes just to sorta understand what's going on. And, honestly, there, I think the important thing, and Scott Scott has it here, is just bright lots of comments.

There seems to be this, like, anti comment wave going around lately where people say, like, your your code should speak for itself. And I I get this like, on Instagram, I've gotten this question from newbies, like, many times in the last couple months. And just say, like, no. Like, comments are absolutely fine. It's it's important to be able to write down, how these things work. And if it if it is even even larger than that, like, you have this idea of where you have, you you have 1 function that generates a bunch of stuff and they have business logic and that that gets passed into it. That should probably live inside of a Wiki, especially when your head is in it just because it might make sense to you right now. But if you come back to it a year later or even more, somebody else has to come back to it a year later, it's important to have that documented. So stick it in a comment or and or stick it in a GitHub wiki or Notion or something like that. That'll explain, how it all works.

Yeah. And sometimes those, comments, they seem unnecessary at the time, like, specifically comments around maybe failed attempts to solve a problem. I I don't know about you, Wes, but have you ever had a situation where you you chose not to do one thing one way specifically because you realized it was a bad idea at some point. Right? You chose not to say, okay. I'm gonna do this a different way, and then you leave the Node. You come back to it, and you say, oh, hey. This other abstraction of this idea seems like it would make a lot more sense. Why don't I just do it that way? Then you start to do it that way, refactoring or whatever, and then run into the exact same use case that you had already solved before. You're like, oh, yeah. This is why I couldn't do it this way.

This is why.

And sometimes I leave comments like that into my into my code that says, like, by the way, a future you might try to do this. This is why you don't want to do this. I understand this code looks weird, but until, you know, full rewrite is in order, it needs to be done this way specifically, you know. So, don't don't be, like, I I'm pretty business y with my comments. Like, I write very, like, very direct and explicit comments. This is what this thing does, whatever. But sometimes you can be a little fun with it too. And in fact, one of my favorite, Versus Node extensions, which is better comments, allows you to have comments that have different coloring. Right? Yeah. And and so the cool thing about that is if you do, like, double forward slash, and then maybe I think one of them says, like, Wes mark for questions or an asterisk turns it green.

So I'll use things like the asterisk to be like, Node to user. This is why this does this way or, you know, there's an exclamation point for danger to dos, but I only use to do for actual to dos in code. So, I I would recommend using just better comments, but writing more comments, better comments Vercel, and don't be, don't be afraid to write notes to yourself in the code that's not just, oh, this is you know, the this component goes and fetches the data, whatever. Explaining what the code does. Maybe explain a little bit more conceptually too.

Even like this is not something I've done, but maybe even just a quick little little video.

Grab the there's a, a free app called Kap, k a p, and it just records your microphone and your screen really quickly. Throw that up to Dropbox or even on a I'm not sure where else you would host it. So somewhere you can host videos, YouTube private video. When your head is in it, record a quick little video, and that will probably be super helpful. I do that for a lot of, like, my clients that I build websites for. I would just throw a screen recorder on and go through the entire website showing how to do something because I might forget specifically how to update its content type or something like that. And it's so much easier that just to throw them a video 2 years later than have to, like,

get on a call and screen share with them and all that annoyingness. Yeah. Yeah. So I I did this for a little while. And I still do this under Vercel up tutorials code blogs Wes I do, like, a video just explaining 1 small section of the code Bos and why we're doing things a certain way or why it's cool or an awful or whatever. But it does make it really easy. And I've started to lean on this a little bit more heavily knowing that I, like, have the ability to quickly and easily record screen casts. So it's like, oh, man, that's like a core competency of mine.

Why don't I just record a a screen cast of something that I I'm having a hard time with or want to to really explain. Like, if I wanna explain some code to somebody else, like, it makes more sense for me to screen record that video and share that video with them. Like, let's say, Eric wants to work on a new feature in this one part of the code base that he hasn't touched before. Hey. It might make more sense for me to, record the to, like, a a walk through of the code and what's important and what's not important because that that will save a ton of time getting up and running with it. Yeah. Definitely, something cool thought there, Wes.

So next question is from Rafael Davis Hernandez, and he asks, can I get some recommendations for a junior dev who has mid experience but has not managed to complete projects and desperately needs a portfolio? What are 5 projects that you would recommend to build that would significantly help getting a job as a front end developer and why? K. So the the actual end result of the project, whether or not this is like a video movie catalog, a database, or a store, whatever, the the actual end result, what is the theme of this thing, does not matter. If somebody does, like, a a Reddit clone or something like that, I don't care. I don't care about, like, what the actual site JS. But what I care to look at is, like, the core skills involved in the application. So, something that hits an API, something that does basic CRUD operations, something that needs to look nice on mobile, something that has UI refinement, whether or not these are animations or good looking CSS or or like a pixel perfect implementation of a design.

Those are all the skills you're gonna be using day to day. Right? Especially, I know this it seems like kind of ridiculous, but pixel perfect refinement of a design that somebody else created, Hey. I've worked with so many devs who will spit out the code, and I'll I'll look at the Photoshop, you look at their their their version, the web version, Just say, do these look the same to you? Like and I don't mean to be rude, but these do not look the same to me like what, this, you know, this line this Vercel JS like 44 pixels here where it's 3 in this one. Like, sometimes I wonder if people just take a look at the p PSD and or the sketch file and just, like, guess when that information's all right there in those files. So I would care less about whether or not, this app is a calculator or something like that, but I would care more to really just show those foundations.

Hitting an API, basic CRUD, NICE on mobile, UI refinement, doesn't run like total dog s h I t. That's it.

Love it. That's super key. I think those are are great suggestions. Just most important one is just finish something.

Take on something small and make it polished and done. And then that's that's way better than the 40 the graveyard of 40 projects you started but had to quit because for whatever reason, it got too hard. You you ran out of motivation because, like, I don't Node. Sometimes I look at, at people and and they just finish all of their projects. And it seems like they're super productive, but it's just that they're able to push through that last 10% and actually finish the whole thing. Yeah. It's actually I it is funny to think about that because I'm, like, historically not

a tutorials has allowed me to do. It's allowed me to get that feeling while maintain actually shipping stuff because I have to ship something new each month. So it's like, okay. Look. If I get through this little bit, I get the reward of getting to do something new next month.

Next question we have here from Andrew. Thank you for a phenomenal podcast. You're adding incredible value to the community day in and day out. Wow. Thank you. Thank you for an incredible question, Andrew. Yeah. I am now working on building a Minesweeper game with React.

You know how on the computer, you right click a flag to disable the cell. I'm just thinking about that. Like, I don't actually think I know how Minesweeper works. I played it a whole lot when I was a kid, but Do you wanna run this down? Click stuff. Yeah. Tell me. So the the whole goal of Minesweeper is to find the mines, to find these bombs that are hidden. Right? So

you click 1 square, and that tells you, like, a number. That number, whatever it say it's 1, that means that that square is touching 1 bomb.

If its square is not touching another bomb, it, like, gives you a whole bunch of more squares depressed for free until one of them is touching a bomb. So you have to use these sort of logic and deduction to set find where are all the bombs based on, these, like, sort of numeric rules you're giving up the landscape.

Bomb explanation.

So the question is, you know how you hold a computer. You right click a flag to disable a cell. I am thinking about doing a press and hold on mobile instead. This is I'm I'm really glad that, like, your billings are here thinking about mobile as well because sometimes, like, you build saying, like, yeah, it doesn't work on mobile, but you could probably get it working. I'm not sure how to do either right click logic or press and hold. How can you listen for these events in React and need some help and guidance? Well, the press and hold is is pretty simple in JavaScript. So the way that it works is you create, like, a a flag Boolean or where it's called, like, is pressed, and and you set that to false. And then when somebody does a mouse down event, so not not just listening for a click, but listen for mouse down ESLint. When that happens, you turn that flag boolean to true.

Then you set a time out where, like, I don't know, maybe 400 milliseconds. And then you say after 400 milliseconds, if that flag boolean is still true, then that means that they're still holding their finger down. Because the flip side of that is you listen for a mouse up event as well. And when somebody does a mouse up event or a, a touch end event, I guess, in your case, you would set that flag boolean to, to false. So when somebody touch start, set it to true, set a timer. After 400 milliseconds a second, check if that is still true.

Then if that is true, then then the user is obviously still holding their finger down. And then you can go ahead and fire off. Like, I would probably just fire off a custom event called long press or something like that. I'm sure there's a JavaScript polyfill that you can you can add in and you can just listen for the long press ESLint, but that's that's kinda how it will work.

The other flip side is how do you listen for a a right click? That is an event called context menu.

So instead of listening for click, listen for the event called context menu, and that will give you a right click event.

Yeah. I think, like mouse and pointer events in terms of, like, clicking or touching or whatever, those things are underrated skills in the moment you need to pick them up. I think they're they're exquisitely done in modern frameworks. Right? I I think that's some one of the better things that you can do is write custom stuff.

Specifically, I think about, like, using React Spring or something to do, like, dragging animations or those types of things or even frame or motion. Right? And I think that, like, having those type of, interaction skills are definitely something that you'll get a lot more use of as you get into more and more interesting developer problems. So, very cool. Highly recommend you, you checking that out. Man, that that minesweeper sounds a lot of fun. Share it with us when it's done. Kinda wanna build it now. One more thing about that I just remembered is,

use pointer events instead of mouse and touch events. Pointer events are the new spec in JavaScript that cover both touch and mouse and Wii controller and all of that things.

And then Node more thing JS, Node, like, little gotcha you have with that is if you press down and then drag your finger off of the the thing and lift up Oh, yeah. Yeah. It won't it won't trigger a pointer up event on that element. So you often have to listen for a pointer out event, and that is when the the pointer or the finger or the mouse has been moved out of the the box. So if that's the case, then you also set the, is pressing to false because they've they've essentially moved their finger off of it, so they're no longer pressing it. Or you could have, like, a pointer up on the container. Right? Yeah. Yeah. As long as the container goes all the way to the edge of the Yeah. Screen. Right. Or the body if you want if you wanna have that on the body.

If you were to, like, click down in Canvas and then drag your mouse out of the out of the even out of the browser and then click up, then you come back, and the browser still thinks that you're clicking down because you we never fired that,

pointer up event. Yeah. There it's it's funny. I actually just hit the same same thing when I was building my own gesture based stuff in Svelte because there wasn't like a I don't know if there's like a a Svelte gestures library because you can do so much just straight up stuff with Svelte. So either way, I was just doing, like, the gesture stuff with it. And then it was building one of those, like, swipers Wes you not like, a not like the the Tinder swiper, but, like, more or less, like, when you wanna delete kind of swiper, that kind of swiper. Oh, yeah. Yeah. Oh, that's fun. I like that kind of stuff. Yeah. I Node. Those projects are way easier than you would, expect them to be given that, you know, it it's a complex functionality, but it's really pretty easy. You just trigger that that press down, animate the value, and then determine how far you've moved it, and use that value to trigger an event. Very simple. Okay.

So, building these, like, kind of complex things. It's just it's a it's a lot of fun. And what can you imagine, a a service, Wes? Can you imagine a service that JS gives you, the ability to create custom content types and custom, forms using your own cool React stuff, like maybe gestures or any of those things. Can you think of a service like that?

I can.

I can think that you would use Sanity for that. So if you wanna build, a headless CMS, you can go ahead and grab Sanity. And the cool thing about Sanity is that, Sanity Studio is there's the, like the CMS that you'd expect to interact with and change your data types and, update and delete and things like that. But, it's a React application that you have access to. So if you want to be able to make your own custom swipe and delete on specific elements because that doesn't exist in in the CMS, then you can go ahead and make your own custom inputs, which is really cool. I just recorded the video yesterday for my upcoming Gatsby course of us creating our own custom input.

It's really cool because they give you all the handlers and the helper functions and the pnpm values, and you just have to, handle binding the input to to these methods yourself. So check it out. Your next project, if you need a, a headless CMS for your project, check it out at sanity.i0forward/syntax, and that's going to get you double the free usage tier. Thanks so much to Sanity for sponsoring.

Cool. Yeah. I wanna I wanna build my own interface for Sanity Wes if I do, like, a 2 finger swipe on a component, then, the it will just delete all the collections that I have. That'd be cool.

Yeah. That you could totally do that. You could use Vercel describe. Pointer events.

I think pointer events tells you how many what do they call it? Like, not not fingers because you could use your toes. How many appendages Digits. Are on the digits? I guess that's That's on, like, 4. The digits, man. Digits. Hey. Well, when when I was in biology

in high school, I had to do a report pnpm extra and, missing digits. So digits. Sometimes sometimes you you have more digits than 5, and, maybe that that should be something to think about. Okay.

Don't implement 5 finger swipe. Yeah. Like, a like a secret trick, like a little Easter egg in your application. A 6 finger swipe where you have to actually use your toe if you don't have an extra digit.

Cool. So next question here comes from Matt Tavares says, what are your thoughts on Sales JS as a Rails equivalent framework in JavaScript? I recent they recently released a version 1 point o, and I'm wondering if I should start using it in projects or wait to see if it pans out. So the reason why I picked this prod, this question in particular is that sales has been around since, like, the start of note pretty much.

So when I read this, I was like, wait a second. I just had version 1 and ensure enough it did. I have not really had sales on the radar for a very long time because it was, like, sort of along with Happy and Express and Sales were, like, different versions of the the, like, node, quote, unquote framework that you could use despite the fact that Express is just, like, routing. Right? So I personally am very surprised to hear that this just hit 1 point o, and I have not looked at it in several years because I just figured it was its own thing, its own little community of, of people using it. And I was surprised to see that the progress has still been going on, but that it was only at version 1. What what do you think, Wes?

Yeah. I I think it's it's, like, probably fairly stable. I don't think that it's gonna change on you anytime anytime soon, which is good.

So It's got 21,000 stars on GitHub, so it's certainly not a Wow. Yeah. It's a it's not a not a young young pup here. So it

this doesn't do, like, this is not like a front end focus framework. This is a Node framework. Right?

It is the rails of JavaScript, hence the name Oh, yeah. Sales.

So it does do a front end.

But it's not like, it it doesn't have, like, a specific, like, front end, like, in React or anything like that. It it'll just spit out a it it does the back end logic, your your Wes API, your database interactions, your controllers, your MVC pattern, all of that, but it doesn't do it doesn't care what you use on the front end in terms of your your React application. Is that right? My understanding is that you can use anything with it that could be wrong,

because I do see sales reactive example. Front end agnostic.

Yeah. So they don't care what you use.

I would use sales. It is mature. It it has existed for a long time. There's a large community.

That's I don't know. I I know it's surprisingly little about this despite the fact that I've probably tried it at some point in my life, maybe, you know, 4 or 5 years ago, whatever. I probably tried it at some point. So would I use it? Sure. I would absolutely use it. There are other options available for this type of thing, in case you're you're wondering what is the what's the new Node? Redwood? Is that the new one? Or Blitz, which

is Next. Js is an extras I got a sticker in the mail the other day from them. You got Redwood stickers? Yeah. Well, they just had, like, a form on their website, and I filled I thought it was a hop.

Hop. Well, that does not make any sense with the Redwood JS.

It's not hop. It's not it's not hop t j s.

That sounds pretty dope, though. It's true.

Yeah. You're right. So you want that? Scott. I the only thing I I would say about the sales is that it doesn't look like it has a GraphQL API. So you don't absolutely need that for your application. But if you are going full hipster, you're gonna need a a GraphQL API for that.

If you're excuse me. This project is okay, but you're gonna need a full GraphQL API GraphQL.

Okay.

All the way by the way, if somebody wants to take hoptea.js, it's available.

Available project namespace. Hoptea? Hoptea. You've never read hoptea? No. H o p t e a. That seems like something that would be right up your alley, mister Bucha.

Like, I feel like Craft beer brewed like tea.

So it's well, it's yeah. It's it's nonalcoholic or at least not really. 0 0, like it it basically is tea, but it tastes like hoppy. So it's kind of like an IPA tea if you could think about it. I've had, I don't know. I've had a couple of brands here that they sell it at one of our favorite poke places, so I'm a fan. I'm into this. This looks like it would cost $11 for a can, and I would love it. You know, walk the line over to Whole Foods. You're gonna go to that small little refrigerator.

You're gonna pick yourself up at a a hot tea.

Hoppy.

Alright. I'm in. Next question we have here is from Kenneth Liarly.

Thank you for the pronunciation there, Kenneth.

How do you go about creating reusable React components reusable from project to project? Do you create packages and publish them to Npm, or do you have another method for storing code, or components that you'll likely need to use again? So, if it's a recent component that I need in multiple projects, I will either just copy paste it.

Or if if it's like I'm like, okay. This needs to be properly done across all the projects, then I'll go ahead and just bundle it up and publish that to to NPM.

That's, that's a little simple for me, Wes. I gotta do it. We what you need here is you need to learn a monorepo, and then you need Yeah. Actually so I've been down this road so many times because I have such a hard time with this, and I still haven't found the best solution.

I know saying this, people will have their best solutions. I've tried a lot of different solutions because somewhere along the line, I realized I make, really, really helpful modules for myself that can be reused across projects, and I've started doing that. For instance, we open sourced. Instead of, like, open sourcing level up tutorials Scott, we started open sourcing aspects of it. So we open sourced our forms library called Fresh, and so people can use Fresh. And then we open sourced our drag and dropper, which called Dropin. I have one called animated elements that is, actually, animated elements is a a package of mine that I I really should make a little bit more robust. But, you know, Node the timing here and everything, it's just difficult to do these kind of projects to to move this Scott, especially when it's such a pain in the butt to do exactly what you're talking about here. I've found this to be such a tremendous pain to work on a project locally, use that version in your application, whatever the up to date modern version is, and still keep everything separate, GitHub repos, those kind of things. I do it right now through separate repos using, npm link or, in my case, the Yarn ESLint, and it's just not good. I, like, occasionally run into some issues where the linking gets all messed up, and it's, like, not transparent. There's nothing in your package dot JSON. You have no idea if it's being linked or not, and it can just get really, really super annoying. So then I tried the whole Lerna thing, and, man, Lerna is not fun. I'll tell you that right now. Props to the Lerna people, people out there working on Node repos. Man, this stuff is tough, tough, tough, at least in in terms of, like, getting everything the way you want it specifically. I have a bunch of, like, custom babble config stuff that I I really wanna hold on to that it it makes some of that a little bit difficult. So what's the best way? Right now, the best way for me is, unfortunately, using Yarn.

Another thing I've started to do recently is in Meteor, you can have local packages just by creating a package directory and writing a package dot JS file, not package dot JSON. It's like a Meteor thing, and then you can publish them separately. I've been doing those as a git submodule where you just don't commit anything in the packages folder, and then you keep an entirely separate git tree as a subtree of your other Node. It is just it's also not a lot of fun, but it both requires a bunch of, a bunch of, you know, running git commands until everything works, and then you can be on your way. I'm interested in whatever people have for their best workflows around creating local packages.

I typically use t s d x to create my local React packages or my my React packages, but I'm interested in seeing what people do beyond the the sort of Yarn link or NPM link. And, I don't suggest learning Node because it's not good, but because I've already been down that route. Alright. Next question is from Trick PR.

What are your thoughts on the Shadow DOM custom elements? Would you use them in your own projects? I'm getting more likely to use them in my own projects as time goes on here.

But that said, you know, React is still more useful. Svelte is still more useful. And probably what I find at the end of the day is that I would prefer to build something in Svelte compared to web components right Node. And, you know, remember do you remember, like, way back when you first started learning React when there was, like, sort of, oh, and by the time web components are ready, maybe this can even output to web components, you Node? Yeah. That was, like, going on because Polymer was was growing at that ESLint, and Angular had the same sort of idea.

But it never really happened because web components just never got to the level of usefulness that reacted or any of these things. And Scott that the React team was ever planning on doing that, but that was always sort of, this idea that loomed in people's heads of like, oh, wow. If we write our things and components, maybe we can just convert these to web components one day. Yeah. That was kind of a bummer that

Scott necessarily a bummer, but I think, like, the people who have spoken, the fact that we're not all using web components and we're all using some sort of framework is that the framework figured it out, how to do it better. And as someone who loves vanilla JavaScript and and the standard of the web, that that hurts me, but I'm not also using it myself. So it's cool, but I'd just rather use React. You know what I would use if I wanted to use Wes components?

I would ESLint html, which is part of just Polymer.

Lit is basically, like, like, templating syntax that allows for, like, individual updates, and it outputs to because it's Polymer, it outputs to web components. You have to use Polymer with it, but it's just not it's just not, like, great great for me. I don't know why. It it just it's just not there to the level of ease of use and and whatever. May maybe it will be. Maybe there'll be this, like, perfect framework. Polymer kinda does a little bit of these things. It's just a polyfill. But, maybe maybe this lit html, which seems to be picking up steam, will actually have, you know, some some energy behind it in those sort of ways.

Next question from Mark Volkmann. Seems like a lot of questions come from Mark Volkmann, very good ones.

Yeah. I feel like we said that name a couple times. So yeah. Good on you, Mark Volkmann.

Next question from Mark Volkmann is, how do you organize CSS properties within a rule and why? Random alphabetical, logical grouping, etcetera.

We've answered this a couple of times, but I thought we'd answer it one more time.

I don't have any sort of system. I'd like to keep my CSS grid stuff together. I like to keep my positioning, trouble top right, bottom left together. I like to keep my margin and padding together.

And past that, that that's it. I've I've seen people who do it all alphabetical or it doesn't make a whole lot of sense to me. I've never had a, like a like, they always say, like, oh, there's cognitive overload where you you look at something and you have to figure out where it is in the selector. I'm like, no, I just look at the selector, and I add it to beside the property that makes sense. So I don't really have a system other than just try to keep, like, things together and everything usually works out. Yeah.

I use I don't know. Is this built you tell me, Wes, because I'm I can't remember if this is an extension or if this is built into Versus Node. The sort ascending.

Yeah. It that is built into Versus Code. If you select the lines Yeah. It will do it. But I'm sure there's, like, a prettier plug in that will automatically do that for you as well. Oh, yeah. That's a good point. I wonder if there is because that's something that ever so often, I'll Node, like, have a kick of. But, like, if I'm in a component and I'm, like, buttoning it up and I'm straightening its tie and I'm, you know, tucking in its shirt coattails, when I'm doing those kind of things, I will find a big list of things whether it's CSS or maybe it's, like, props being destructured or something like that, and I will select those lines and I will do, what is it? Command, or sorry. It's, you know, command p and then do sort and and or command shift p and then sort lines ascending. In fact, no joke, Wes.

If I just do command shift p, the very first recently used command is sort ascending because I just use it all the time. So when I'm, like, going through my code, go through, use this sort ascending, and it probably makes absolutely no difference at all, but it makes me feel good. So, that's why I do it. You know what else makes me feel good as Bos my website on Netlify Because it's so easy. Let me tell you.

I'm I'm I'm an original Netlify fanboy over here, and, it absolutely shows. We talk about Netlify all the time on this show, and I'm so glad, to be talking about Netlify again. I host everything on Netlify.

So if you want to host any of your front end code or code with serverless functions or anything like that, you wanna check out netlify.comforward/syntax and sign up. And people often tell us that, like, dang, I had no idea Netlify was so easy. It is so very easy whether or not you need to get a GitHub project just up and running in no time. You Scott a sapper, statically generated site or a Gatsby site, any of that stuff. Maybe you just have a straight up HTML file. You know what I put on Netlify? I put my my slides, my MDX deck. I put that on Netlify just to have it available. Right? You Node, don't have to host it somewhere else or whatever. Just throw it up on Netlify.

And it it's so fantastically easy and free to get going that, you won't want to throw up everything on Netlify that you have yourself just to just to experience it, just to have it up someplace, just to test it in production and check it out. I mean, they work with just about anything. Not to mention, they have some very fantastic tools that, allow you to make some really more complex applications whether or not that it's, like, super simple serverless functions, DNS based analytics, or a split ESLint, forms, media.

It's just, endless, the the kind of stuff they're adding. They're they're one of these companies that is constantly innovating on the web, and it shows because everyone who tries Netlify doesn't stop talking about it. So check it out, netlify.comforward/syntax.

Just a a quick note on the last thing that we had. Prettier does not order your CSS properties either logically or, alphabetically because there's a whole, like, lot of little edge cases where

Nested

or yeah. Or if you, like, re if you have a mix in or you, have, like, flex flow and flex direction. And then, like, the order of your CSS properties often matters, especially, like, if you've got, like, like you have your regular margin and then you want to override just one of them, the margin dash right. And like, what if they they Vercel? And there's a lot of little cases like that. So, not under the scope of Prettier to do. And, like, I would do it if a tool did it for me properly, but I'm not gonna spend any time doing that. So, toolmakers

out there, Wes a tool that does it automatically.

Yeah. I don't know that there's I think there's, like, it'd probably be really easy to make a proof of concept. And then the like, it would be death by edge cases. Death by edge cases. Right. Yeah. Totally.

Next question from Codefinity, also another big submitter of questions. Have you ever used a second parameter of JSON dot stringify for anything useful? So I had to look it up. I was like, oh, no. I've the JSON stringify has the 1st param is obviously the object that you wish to stringify.

The 2nd param is something called the replacer. I'll talk about that in a second. Then the 3rd param is a string or a number for what you want Wes you wanna use to indent. So you generally could pass a space or a tab or you could you could do an arrow or a poop emoji if you wanted. And that's that that will neatly format your JSON based on indentations of what you pass it. The 2nd argument of JSON stringify is a sort of like a map function where it takes in the object value and the property value, and then you can return whatever you want for that. And like, quite honestly, I've never used it myself. And I was just, like, looking at, what would you use that for? And, what it seems to be is if you wanna filter values out before you stringify and send it over the wire.

So if for whatever reason before you stringify it something, you Node to clean up an object.

You could do it that way. And then also, like, remember we were looking at, like, there's now a function dot TypeScript where you can convert a function's actual code to a string?

Yes. Yeah. Yeah. I remember that. Yeah.

So, like, I'm thinking, like, okay. Well, like, JSON stringify doesn't doesn't parse methods. It just removes them. But I was like, well, maybe you could use a replacer function to add in the code of a method now. So maybe.

Yeah. I have not used this for anything useful. I didn't even know it existed, to be honest. I didn't know what it was until about 20 minutes ago. Yeah. So, no, I have not used it for anything useful, but it seems like it JS possibly useful. I'm interested in hearing if anybody else has actually used this for anything in their day to day.

Last question is from Nate Spielman here. He says, hey, Scott and Wes. My getting my 1st web dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle that can be enterprise code Bos. Used to be Nate Nate's dead on here. It's a safari out there.

So I've also learned the importance of writing code that can be readable later, ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code Bos, etcetera. My question is, are there resources these sorts of topics, for folks trying to break into the industry, a lot of tech topics revolve around how to get your code to run, which feels like half the battle. Where can juniors find more resources on robustness? Okay.

So I think the reason why you're not gonna see a ton of this, Nate, is because it's, I wanna say, a bigger problem than than JavaScript. Right? These are conceptual issues. These are our planning things. So you you most likely won't find this this information around, like, here, like, take this JavaScript course, and all of a sudden, you're gonna learn how to write dry code or correctly abstract code or whatever even that means.

My my suggestions to you is to, one, get good at commenting, 2, get good at functional programming, 3, read a bunch of books on programming. So there's there's even 1, a repo, that I always suggest called clean code JavaScript.

This is going to teach you a lot about writing, like, maintainable code in terms of, like, hey. You know these patterns? Follow these patterns. Oh, naming things? Follow this kind of naming pattern. And and I don't wanna, like, toot my own horn here, but I made a course called Better JavaScript that really focused on a lot of these principles. It's like, how do we name things in JavaScript to make them readable? Right? How do we how do we name things? What do we do here? Where do we go? Where do we write things? What are the best ways to declare a function to make it readable, lastable, expendable, workable? I'm gonna add a bunch more bulls here. But, like, where do we go for this stuff? And and I think that Clean Node, reading some of those those classic programming books like The Pragmatic Programmer, Those types of things will get you a long way, and don't just look in your bubble of web stuff because a lot of the good information has already been solved by computer scientists who've been doing this stuff in a lot larger context for a long time. Yeah. I think you nailed it there. Not much else

to to say there. Let's move into some sick picks.

I've got a really sick pick for you today, and it's a pool noodle.

So I don't know. Like, these are are pool noodles, like, a thing, like, in Europe? Like, it's just true.

I know you're gonna yeah. I don't I do not know. No idea. Pool noodles I'm sure. They've been around for a long time. Float.

Like, in Paris, they're swimming in the river there under the Eiffel Tower. They probably have a pool noodle. Anyways, a pool noodle for I'm not sure if everybody around the world knows it, but it's just usually, what it is is this big piece of foam that you throw in the water, and you can you can float on it and play with it. And they often have holes in the middle.

And they are awful because they they rip. They get waterlogged.

And, we had a couple just, like, a couple years ago, and and Wes had to just throw them out. And I was like, this is kind of a waste that we're buying Node pool noodles every year.

And we were at Costco, like, I don't know, 3 or 4.

JS the are you enjoying this? Yeah. I am. I'm just like dying that you're like, it's kind of a waste that we're buying new pool noodles every who's buying new pool? I can't even say that word. Pool noodle. Pool noodle. Yeah. Pool noodle. So if you've, like we have cottage. So every day, we go swimming, and they're just always in the water, things like that. So, like, I don't know, maybe maybe 3 or 4 years ago, we bought these, these massive super heavy duty pool noodles, and they are I'm not sure what's inside. I would like that YouTube channel to cut 1 open and see what's inside, but, it's just like like plastic dipped pool noodle, and they're super super comfy.

It's it's called the just Google fluid pool noodle, and you can see what it is.

And we've had them for 3 or 4 years now, and they are still perfect.

They, like, support your weight. Like, I can I can float on 1 as an adult and have my kids on my back and still be supported? And I don't know. It's just like the best pool Node ever, and we Yarn won't be throwing them out every every single year. So like a really silly sick pic. But I was, like, looking at them yesterday, and I was like, these things are awesome. And if you look them up online, they're, like, silly expensive. They were like I see see them online for, like, $80 in noodle, which is silly.

But I found we got all of ours at Costco for, like, $30, which is still a lot. But did you say in noodle?

Fluid pool Node, or they're also called Wow Wow Water Sports Dipped Noodle. No. I'm sorry. You said I'm, like, looking them up in and then said a word that sounded like Node?

Oh,

no. Okay. So yeah. Cool. Well, that is sick. I've never heard of these at all. Never heard of them.

We have a, you know, in those little tiny kitty pools, like, little kiddie pool that has, like, this giant whale whale tail. And the whale tail, you hook the hose up to it, and it sprays water out of it. And Landon's been loving it. Maybe he needs a giant pool noodle that's larger than the pool itself, but, that that's as much lake action as we're getting this year. That's for sure.

Alright. My sick pick here is gonna be a Versus Node extension. I'm going there. I'm I'm going there, and it is easy snippet.

I, love snippets.

I create snippet libraries for myself all the time whenever I do things, and I don't know why I never took the time to say, This could be an extension. So just yesterday, I was, like, writing out some very specific comments, and I was like, I'd like to have this comment be used on the page in various ways and different pages to have the same sort of comment sort of denoting locations of things.

Only I don't have to type this every time, so I made an extension.

And well, I made a a snippet for it because why Scott? Right? Why not make a snippet? So what this extension allows you to do is just highlight, select a bunch of code, and then do a command shift p, and then type in create snippet or just snippet. Oh, that's great. If you do create snippet, it just asks you to give it a Node, and you hit type in the name and hit enter, bingo bingo. It's there. Since it already knows what type of file you're in, it knows what type of file to use this in and, therefore, making the entire process extremely easy. You never even have to touch a config. You never even have to leave your file, and then all of a sudden, you have a snippet for it. So, I've been using this for the past week here, and I really like it. I I've been making a whole ton of snippets, probably more than I'm even going to remember later, and that's why.

Let me tell you. Part 2 of this is the little toolbar that it gives you. So it gives you a toolbar of all of your snippets telling you split up based on file type. So if you pop open to your React JavaScript or JSX or TypeScript React, you can see, see, I have a, oh, a TS React component. It even gives them your names. You can click on them. And when you click on them, it takes you right to the snippet so you can see exactly what the snippet is. So if you if you're not good at naming things, you can always see what they're named. So I think this is fantastic easy snippet. I've been using it a Scott, and a big fan of this one. In fact, this this sick pick was so sick that it overrode the sick pick that I was going to do. So I'm a big fan and, wanted to Scott this one out.

Oh, that's awesome. That's a sick pick.

And it's not a hugely it's only 21,21,000 installs. So, get in get in on the ground floor here. It's a sleeper. It's a sleeper pick here. It's a sleeper.

Shameless plugs. I'm gonna shamelessly plug all my courses. Westboss.comforward/courses.

Check it out. And, by the time you're listening, my Gatsby course might be out. We'll see, and it will be listed on that page using tax for $10 off.

Cool. I I release new courses every single month. I have not selected this month's course as you've heard me talk about already, but by the time you're listening to us, this course that I have not selected yet will be already out. So whatever that course may be, I'm excited I'm excited to to be in the time machine here and see ended up what I what I went it with and created a course around. So, leveluptutorials.comforward/pro.

We have a new course every single month. The most recent one was on modern CSS design systems using CSS variables to create really, really, really small design systems. So it's fantastic Vercel up tutorials Scott.

Beautiful. Thank you so much for tuning in. We'll catch you on Monday.

Peace. Peace.

Head on over to syntax.f m for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show.