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

Hoppy.

Okay.

we started open sourcing aspects of it. So we open sourced our forms library called Fresh, and so people can use Fresh. And then

to work on a project locally, use that version what are your thoughts on Sales JS as a Rails equivalent framework

that's a little simple for me, Wes. I gotta do it. We what you need here is you need to learn a monorepo,

when you first started learning React

yeah. Good on you, Mark Volkmann.

anytime soon, which is good.

Liarly.

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,

in Meteor, because I do see sales reactive example. Front end agnostic.

All the way by the way, if somebody wants to take hoptea.js,

What are your thoughts on the Shadow DOM custom elements? Would you use them in your own projects?

find at the end of the day is that I would prefer to build something in Svelte Last question is from Nate Spielman here. He says, hey, Scott and Wes. My getting my 1st web dev job

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

Or if if it's like I'm like, okay. This needs to be properly

Lit is basically, like, like, templating syntax that allows for, like, individual updates, around, 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, Great podcast. I learned so much from it. Where would you go to put business logic and it probably makes 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.

Kenneth So, like, I'm thinking, like, okay. Well,

Scott necessarily a bummer, but I think, like, the people who have spoken, false because they've they've essentially

people out there working on Node repos. Man, this stuff is tough, tough, tough,

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

where you just don't commit anything in the packages folder, and then you keep an entirely separate git tree as a subtree

when there was, like, sort of, oh, and by the time web components are ready, maybe this can even output to web components, Vuex of, of people using it. And I was surprised to see that the progress has still been going on, but that really focused on a lot of these principles. It's like, how do we name things in JavaScript like, here, like, take this JavaScript course, and all of a sudden, you're gonna learn how to 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? get in get in on the ground floor here. It's a sleeper. It's a sleeper pick here. It's a sleeper.

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 that it was only at version 1. What what do you think, Wes?

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?

Yeah. I feel like we said that name a couple times. So

how to do it better. And as someone who loves

Another thing I've started to do recently is to be talking about Netlify again. I host everything on Netlify.

quote, unquote framework that you could use despite the fact that Express is just, like, routing. Right? 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

and why? Random alphabetical, logical grouping, etcetera.

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

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

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 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, Cool. So next question here comes from 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 you know, remember do you remember, like, way back

So it's well, it's yeah. It's it's nonalcoholic launching a whole bunch of cool stuff. So guidelines So it does do a front end.

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 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 granted,

this doesn't do,

Thank you for the pronunciation

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, Available project namespace. Hoptea? Hoptea. You've never read hoptea?

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 or and or stick it in a GitHub wiki or Notion or something like that. That'll explain, trouble top right, bottom left together. I like to keep my margin and padding together.

there, Kenneth.

But that said, you know, React is still more useful. Svelte is still more useful. And probably what I Zite day. I I was speaking at Zite day, and, What are the best ways to declare a function to make it readable, lastable,

really, really helpful modules for myself that can be reused across projects, 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.

in case you're you're wondering what is the what's the new Node? Redwood? Is that the new one? Or Blitz, which because 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.

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 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,

like, this is not like a front end focus framework. This is a Node framework. Right?

hence the name Oh, yeah. Sales.

around creating local packages.

versions of the the, like, node, That's,

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

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

But it never really happened because web components just never got to the level of usefulness that reacted from business logic for things. I don't know. To to part of the the whole componentized

or at least not really. 0 0, like it it basically is tea, but it tastes like

and it outputs to because it's Polymer, it outputs to web components. You have to use Polymer with it, but we open sourced

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.

done across all the projects, then I'll go ahead and just bundle it up and publish that to to NPM.

No. H o p t e a. That seems like something that would be right up your alley, mister Bucha.

I don't know. I've had a couple of brands here that they sell it at one of our favorite poke places, so forms

npm link or, in my case, the Yarn ESLint, I would use sales. It is where Guillermo and all sorts of, Tim and all sorts of the the people from the the next team were all, like, sort of that's a

hoppy. So it's kind of like an IPA tea if you could think about it. I've had, is exactly as it sounds, vuex.vuejs.org, There's also, from what I saw, there was Vue JS versions, but I have not used a to create custom content types and custom, then,

you Node? Yeah. That was, like, going on because Polymer was was growing at that ESLint, and Angular had the same sort of idea.

I would ESLint html,

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,

you know, running git commands until everything works,

I thought it was a hop.

repos using,

you don't absolutely need that for your application. But if you are going

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

and I've started doing that. For instance, we open sourced. Instead of, like, open sourcing level up tutorials Scott, 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, using MDX JS, And I think that, like, having those type of, the sick pick that I was going to do. So I'm a big fan and, wanted to Scott this one out.

that is, actually, I had to do a report pnpm extra and, missing digits. So leveluptutorials.comforward/pro.

or components that you'll likely need to use again? So, if it's a recent component that I need in multiple projects,

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

I'm getting more likely to use them in my own projects as time goes on here.

How do you go about creating reusable React components reusable from project to project? or yeah. Or if you, like, re if you have a mix in or you,

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

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.

Like, I feel like Craft beer brewed like tea.

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, And past that, that that's it. I've I've seen people who do it all alphabetical or

Okay.

3, 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, 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 I was wondering if this is a good solution, or do you have a better alternative? somewhere along the line, I realized I make, 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.

maybe 3 or 4 years ago, we bought these,

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

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

like, JSON stringify doesn't doesn't parse methods. It just removes them. But I was like, well, maybe you could what do they call it?

code Bos. Used to be Nate Nate's dead on here. It's a safari out there.

that I always suggest called clean

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?

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

where you can convert a function's actual code to a string?

So

that that's as much

Alright. My sick pick here

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

and it's a pool noodle.

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

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.

for folks trying to break into the industry, a lot of tech topics revolve around how to get your code to run,

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

super heavy duty pool noodles, and they are and mouse and Wii controller and all of that things.

expendable, 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

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, If you're excuse me. This project is okay, but you're gonna need a full GraphQL API GraphQL.

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

And, is pressing to I can.

at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute So next question is

is a string or a number of a method

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

You could do it that way. And then also, like, remember we were looking at, like, there's now a function dot TypeScript there's a whole, like, lot of little edge cases where

use a replacer function to add in the code

of this is the little toolbar that it gives you. So it gives you a toolbar 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, 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

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,

into

And it's not a hugely it's only 21,21,000

I, love snippets.

to make them readable? Right? How do we how do we name things? What do we do here?

some

of writing code that can be readable later, ensuring any hacky workaround is replaced with a pattern called Where do we go?

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

installs. So,

read a bunch of books on programming. So there's there's even 1, a repo, when I think about this stuff, code just to manage, Wes if I do, like, a 2 finger swipe on a component, Dispatch in action? Sorry. You don't run an action, you dispatch an action.

So I think the reason why you're not gonna see a ton of this, Nate, is because 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 The answer is to follow

write dry code or correctly abstract code or whatever even that means.

these sorts of topics, 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,

lake action as we're getting this year. That's for sure.

jungle

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

We have a new course every single month. The most recent one was on modern CSS design systems using CSS 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.

Peace. Peace.

we had a couple

Yeah. I have not used this for anything useful. I didn't even know it existed,

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, and that tells you, like, a number. That number, whatever it say it's 1, that means that that square is touching 1 bomb.

suggestions to you is to, one, get good at commenting, 2, get good at One of the things I really like about MDX overall

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.

functional programming,

is 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

now. So maybe.

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

JavaScript.

these massive 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 values out before you stringify and send it over the wire.

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, 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

And they 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.

seen elsewhere in the code Bos, etcetera. My question is, are there resources abstract universe kind of thing. Right? So the the answer here is, like, where do you put this kind of business logic? workable? I know saying this, people will have their best solutions. I've tried a lot of different solutions because

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

which feels like half the battle. Where can juniors find more resources on robustness?

variables to create really, really, really small design systems. So it's fantastic Vercel up tutorials Scott.

Let me tell you. Part 2 another operation which in turn will return a new set of data. I mean, it's like this Where do we write things?

I've also learned the importance

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 a couple different, like, frameworks and plugins,

This is going to teach you a lot about writing, like, maintainable code in terms of, like, hey. You know these patterns? 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.

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

I'm not creating that many abstractions.

community

and Vuex is sort of like their their and a big fan of this one. In fact, this this sick pick was so sick that it overrode

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,

middle or large scale

That action what is it called? The dispatch?

applications?

to other people when the need arises.

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

I guess I am occasionally, but I cannot I I like a class singleton Because it's so easy. Let me tell you.

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

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 which is basically creating a slide deck in MDX.

in terms of how people are doing it in view.

And one of the main ones is Vuex.

universe that we're living in now allows you to sort of write your business logic right there near the template, especially 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 where you you chose not to do one thing one way specifically 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, And sometimes Wes people think about

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, 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.

they had a really great initial, like, what is that, Deno? They had, like, a really great keynote that can be enterprise but until, you know, full rewrite is in order, it needs to be done this way specifically, you know. So,

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

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, Wes a tool that does it automatically.

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

Yeah. Cool. So next question is from Johan

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.

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.

code blocks in h Node through h six and pretags and block quotes and all that stuff, I mean, most markdown

Schakya.

just use regular React components HTML and CSS you want from that specific thing. And I use that a lot in my own,

writing it in an actual compared to web components right Node. And, using your own cool React stuff, like maybe gestures or any of those things. Can you think of a service like that? 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.

website because

at this MD specs

But then you can also,

if you want to do Markdown 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.

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.

whatever I will either just copy paste it.

pnpm, in Vue JS, 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

slides

huge

MDX deck,

where it's not just a React thing anymore. So, there is a Svelte MDX So I personally Davis Hernandez, Then then that performs,

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, no. Okay. So yeah. Cool. Well, that is sick. I've never heard of these at all. Never heard of them.

I've tried using

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,

it's every bit as cool as you'd expect it to be. It's fantastic.

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,

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

have ever written Yeah. So they don't care what you use.

plug in ecosystem

and JSX

and I always get, like, 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.

So, as markdown renders out

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.

is that it seems to have, like, caught on conceptually I'm I'm I'm an original 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 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, Johan, I I usually

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

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.

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.

a YouTube video or you wanted to throw in a React component or you warp it to

MDX is,

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,

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

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 at people alphabetically

Matt Tavares

use pointer events instead of mouse and touch events. Pointer events are the new spec in JavaScript that cover both Yeah. I don't know that 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.

I think pointer events tells you how many

to false. So when somebody

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 MDSpecs,

is still true,

where, like, I don't know, maybe a pointer up event

down and then drag your finger off of the the thing and lift up Oh, yeah. Yeah. It won't it won't trigger they Vercel? And there's a lot of little cases like that. So, 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 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 if you need a,

Yeah. I think,

Sanity Studio is there's the, like the CMS that you'd expect to interact with and change your data types and, 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, 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,

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 Next question from Mark Volkmann is, how do you organize CSS properties within a rule

Hitting an API, basic CRUD, NICE on mobile, UI refinement, digits. Sometimes sometimes you you have more digits than 5, and,

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.

refinement of a design that somebody else created,

It's really cool because they give you all the handlers and the helper functions and the pnpm values, and you just have to,

in modern frameworks. Right? I I think that's some one of the better things that you can do is write custom stuff.

a My my

Love it. That's 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

if that flag boolean

doesn't run like total dog s h I t. That's it.

in JavaScript?

That is what it seems to be is if you wanna filter It's very easy to work with,

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 and he asks,

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, 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.

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.

it's a React application that you have access to. So if you want to be able to make your own custom

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 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, 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, I've got a really sick pick for you today,

touch start,

a right click?

I can think that you would use Sanity for that. So if you wanna build,

you create, like, a

the it will just delete all the collections that I have. That'd be cool.

handle binding the input to to these methods yourself. So check it out. Your next project, Oh, Beautiful. Thank you so much for tuning in. We'll catch you on Monday.

dragging animations or those types of things or even frame or motion. Right? the start of note pretty much.

update and delete and things like that. But,

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, our

like mouse and pointer events in terms of, like, clicking or touching or whatever,

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.

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,

a headless CMS for your project, check it out at sanity.i0forward/syntax,

says, from Trick PR.

an event called context menu.

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 Then you set a time out how these things work. And if it if it is even even larger than that, like, you have this idea of where you have, right side of your markdown files. So if you wanted to embed 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 a headless CMS, or where it's called, like, is pressed,

super key. I think those are are great suggestions. Just most important one is just finish something.

on that element. So you often have to listen for a pointer out event,

touch how it all works.

you can go ahead and grab Sanity. And the cool thing about Sanity is that, 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 set it to true, set a timer. After 400 milliseconds a second, check if that is still true.

Well,

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

called long press or something like that. I'm sure there's a 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 Alright. I'm in. Next question we have here is from are awful because they they rip. They get waterlogged.

these, like, sort of numeric rules you're giving up the landscape.

swipe and delete

how it will work.

Take on something small for my upcoming Gatsby course of us creating our own custom input.

the press and hold is is pretty simple in JavaScript. So the way that it works is

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,

a flag Boolean ordering CSS. Do you ever use the 2nd property of or 2nd param of JSON stringify?

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.

Spring or something to do, like, or a split ESLint, 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

and that's going to get you double the free usage tier. Thanks so much to Sanity for sponsoring.

And then Node more thing JS, Node, like, little gotcha you have with that is if you press

400 milliseconds. And then you say after 400 milliseconds,

maybe that that should be something to think about. Okay.

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?

The other flip side is how do you listen for a

and make it polished and done. And then that's that's way better than the

Bomb explanation.

Cool. Yeah. I wanna I wanna build my own interface for Sanity

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

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

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, those things are underrated skills in the moment you need to pick them up. I think they're they're exquisitely done

doesn't stop talking about it. So check it out, netlify.comforward/syntax.

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

The 2nd param is something called the replacer. I'll talk about that in a second. Then the 3rd param

forms, media.

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,

Netlify fanboy over here, and, it absolutely shows. We talk about Netlify all the time on this show, and I'm so glad, redux style state management. Right? Vue action state. So what I would do is I would follow something like this It is the rails of JavaScript,

DNS based analytics,

because

or sorry. It's, you know, command p and then do 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, 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, 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.

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.

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,

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

the JSON stringify has the 1st param is obviously the object that you wish to stringify.

I 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 from Codefinity,

I don't have any sort of system. I'd like to keep my

CSS grid stuff together. I like to keep my positioning, 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

Just a a quick note on the last thing that we had. Prettier does not order your CSS properties

more complex applications whether or not that it's, like, super simple serverless functions, and don't be, it's available.

just to have it available. Right? You Node, don't have to host it somewhere else or whatever. Just throw it up on Netlify.

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

have, like, flex flow and flex direction. And then,

what is it? Command, Yes. Yeah. Yeah. I remember that. Yeah.

If I just do command shift p, 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.

And it it's so fantastically easy and free to get going that, and then you can be on your way. I'm interested in whatever people have for their best workflows

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.

for and sign up. And people often tell us that, like, dang, I had no idea Netlify was so 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, is

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,

What are 5 projects that you would recommend to build that would significantly help getting a job as a front end developer and why? which is part of just Polymer.

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.

Versus Node extensions, which is better comments,

oh, hey. This other and use 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.

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

How can I get better at conceptualizing

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, sort and and or command shift p and then sort lines ascending. In fact, no joke, Wes.

Grab the Do you create packages and publish them to Npm, or do you have another method for storing code,

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, you click 1 square, of all of your snippets telling you split up based on file type. So if you pop open to your Nested

a junior dev 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, 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.

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, 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.

something cool thought there, Wes.

There seems to be this, like, sick picks.

I I'm pretty business y with my comments. Like, I write very, like, very

who has mid experience one of my favorite projects 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.

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

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,

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, you're gonna need a a GraphQL 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, on how to express these ideas sort of like a map function where it takes in the object 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.

or even

intricate design patterns or functions,

Rafael

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, either logically or,

a free app called Kap, k a p, and it just records your microphone and your screen really quickly. Throw that up to Dropbox

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,

I've gotten this question from newbies, like,

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 And then it's just a React component from there, and you can return

the important thing, and Scott Scott has it here, is just bright lots of comments.

can I get some recommendations

it's important to have that documented. So stick it in a comment to to say there. Let's move which could be a downside. But

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.

but has not managed to complete projects and desperately needs a portfolio? JavaScript files Wes each file is a class singleton.

one of my favorite, You're gonna pick yourself up at a a hot tea.

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 Specifically, I think about, like, using React 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

there's a, to being a sponsor. 1st Node, Sanity. They are a structured content CMS.

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

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.

This is why.

don't don't be, like, this abstraction, 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, mature. It it has existed for a long time. There's a large community.

we can talk drag and dropper, which called Dropin. I have one called animated elements

MDX today, We are sponsored today by, oh, this is funny, 2 companies that I am using in my next course,

Unfortunately, I don't Wes, So It's got 21,000 gonna be a Versus Node extension. I'm going there. I'm I'm going there, and it is easy snippet.

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

Some really neat ones today, so stay tuned for that.

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

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, 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,

Hey. I'm doing good. Getting, getting some dev work done, getting my next course planned out. And out there, Head on over to syntax.f in high school, 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.

but totally unrelated

mdxjs.com.

How are you doing today, mister Tolinski?

I'd love to learn more about the pros and cons if you guys have had a chance to use it. So, API for that.

They are the hosting 2nd Node is Netlify.

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