Potluck — Copilot × Glasses × Databases × Dealing with Stress × Employment vs Self-Employment × Auth in GraphQL × Headless CMS × More!

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss. Welcome to Syntax, the podcast with the tastiest web development treats out there. We've got another potluck for you today. This is where you, the audience, submits the questions, and Scott and I, the hosts, will answer them for you. We got some really good Questions today specifically about unstructured data in a database, omitting stuff in local hosts, GitHub co rid. Pilot taking our job.

All kinds of really good stuff, so stay tuned. We are sponsored by 3 awesome companies today. First1, Linode, does Cloud computing and hosting, Sentry, error exception, and performance tracking, and FreshBooks, cloud accounting. We'll talk about all of them partway through the episode.

How you doing today, mister Talinski?

Hey.

Doing good. Just, Scott's yard work update. I just rid Did all the leaves Oh, man. For, like, 8 trees on Saturday, and all it was an all day job. We had entire, you know, rid Talinsky fan, Courtney and, both the kids helping, and it still took all day. And at the end of it, I was just like, you know, I'm just gonna hit all these, The remaining ones with the lawnmower and put it put it into the bag and call it a day. And then, like Oh. We still probably have, you know, I don't know. 30% of our leaves total still on the trees here, so,

it's gonna be another whole day. Yeah. My parents live in a, Like a beautiful neighborhood like you do, and the leaves is it's insane. Like, they they probably you know, those, like, yard bags, the big, like, rid brown you got those big brown paper bags you throw at yard waste? Yeah. Like, you probably got rid of what? Like, 15 of them or something like that?

Yeah. 16 16 of the brown bags and a full green bin, which is like a full sized bin bin. So full size green bin, Andan. And and this is I'm a fearless jumper. I'm I'm jumping in that thing and stomping around like a elephant in there. I'm rid. I'm just jump, jump, jumping on that thing to compress them, and it still was 60 bags. It was outrageous.

Oh, man. Luckily, we don't have any trees at our house rid. Where we live right now, we've got, like, with, like, trees, but not ones that throw leaves. Yeah. But we went to our cottage, and we have millions of trees up there. Oh, thankfully, we have much bigger equipment. Yeah. You got like a track up there.

Yeah. A tractor, a lawn sweeper, a huge gas blower. So it's it's it's not too bad, up there. And then we can also drive the trailer to the dump and just rid Dump all the leaves or just push them into the forest because it's also good for the wildlife.

So it's a bit easier up there.

Anyways, that's rid Lawn Talk with Scott and Wes. We should do, like, a 3rd episode every week. Just checking in on Scott's lawn here. What's going on? Yeah. Homeowner show.

Re People always message us, being like, love talking you guys talk about random homeowner and family stuff as well. I'm sure some people are like, get to the point. I wanna hear about unstructured of data in a big database. Yep. Not about your league. Just press that, 32nd skip button. Just just just press the whole bunch of times.

Well, let's get into it here. The first question is from Durz, and Durz asks, has GitHub Copilot become part of your daily workflow, Or have you turned it off? Me and GitHub Copilot are very close, and I would never turn off GitHub Copilot at this point because it helps me so much. You know, there there's a couple of ways that it really helps me, and and one of the ways is is sometimes, You know, you write the code and then you write the comments. And a lot of the times, GitHub Copilot is so good at predictively writing your comments you just do the forward forward slash, and then it says you maybe write 1 word, and then it writes the rest of the comment for you. And you're like, okay. Well, that's That's really awesome. But, also, if you do write out the comments first before writing out your code and and Sort of scaffold with comments, Copilot can, like, really do a ton of the heavy boilerplate y stuff of writing functions with names and things like that that really help you out. So, no, I absolutely am a big, big fan and have been using this thing like crazy for a long time. So, yeah, shout out to GitHub Copilot. Ready. I just got it 4 days ago, and I've been absolutely

loving it. It's pretty cool how it just kinda knows what you want. The one rid thing I don't like about it is it will often complete code that is not closed.

So, like, it will, like, rid. Complete the start of a function, and then I have to go like a sucker and write the closing curly bracket and or, like, I know I was in a package JSON, and I was writing a script To start my thing, it was next start.

And it put a comma dangle after that even though that was the only script I had. And I was like, oh, okay. Like, that's kind of annoying because you can't have a a common dangle in your package JSON because that's not valid JSON. Right? So rid. Little things like that, I'm hoping it's gonna get better at, like, being syntax aware.

But that said, it's been been really, really good. And one kinda really neat thing, and I'm excited about rid. For my tutorials is that I was writing comments and functions that I have written in my courses.

And because thousands of people have posted the code that we write in the course to GitHub, it was, like, auto completing the the code from the course. Rid. So that's really exciting because for things like writing comments as part of the course, it's going to help you quickly autocomplete those. You don't necessarily have to type those, But it's nice to have them when you're doing the course. So I was pretty excited about that. I'm very, very impressed. We'll probably do a a whole show. It's not gonna take your job. It's just gonna make your job rid Faster and easier. Totally. Yeah. Big fan. Next question we have here is from Gaston Jumazi.

Rid Hey, guys. You rock. I'd like to know if you use eyeglasses and if you have any preference regarding models, design, and features like blue light blocking and anti rid Reflection.

Also, where do you buy them? Do you go to the store to try them out off ordering online? Blah blah blah blah. Do you have a doctor's prescription? If you could get any sick rid. Pick about eyeglasses. That would be great. Thanks so much. I love the show. This is actually really interesting one to me. I had glasses for, like, 3 weeks. Rid The doctor's like, yeah. You need, like, very light glasses for reading or something like that, and I hated them. And I'm fine. My eyes are my eyes are great. I rid I eat carrots, so I don't. But my wife has them, and she's always like I eat carrots. I always have to, like, look out for her not to get swindled by the eye doctor because they're like, oh, rid Oh, yeah. We'll do your eye exam and also sell you $500 pair of glasses that you could buy online for $50. But, you wear glasses, You actually have a new set on right now. Yeah. Hey. Thank you for noticing. They are somewhat new. Yeah. These are from CC Eyewear, which is

Place that we used to go a lot in in Ann Arbor, Michigan, and oddly enough, they have one here in Denver as well. They're not exactly that widely they don't have that many locations, so it's It's pretty neat. I guess they got a handful of them. They they got a handful of locations. So I really like this place if you're in blessed in one of the There's a Warby Parker store in the mall, and I will go to the Warby Parker store and try on the glasses because there's a the glasses are I mean, they're fundamentally altering the rid look of your face, so you kinda want to make sure you get some nice ones or at least some ones that look good on your face. If you're going on the cheap end, I like the Warby Parker ones for the cheap end, but they don't, like, last super long. They're probably, like, a year or 2 length in in ownership for these glasses. You know, something like these c sea glasses are are a little bit more, robust, I would say. But Mhmm. Here's a pro tip. Go get your eye exam done at Costco.

Costco has good cheap eye exams. They're fast and easy. I've never bought glasses from there because they're not really my style, but I'll always at least look because the prices are somewhat good. But, yeah, if I'm getting glasses, I do get the blue light protection, because I stare at screens all day long. And before, they were like, you know what? If you keep wearing your glasses while you're on the computer, your eyes will, eventually, get bad enough and just keep keep getting worse, so you should probably take them off while you're on the computer. And I didn't really listen, so now I have to wear my glasses while I use the computer. Otherwise, I can't see the screen.

So, my eyes just keep getting worse. But, yeah, definitely get that blue light. Again, Costco is great for eye exams, but as far as purchase cheap end, Horby Parker, more expensive end, you can go boutique, which, Honestly, it depends on on how ritzy you're feeling, but they're glasses. And, typically, like, we're spending money out of it, like, an HSA account or something. My wife has, like, a health care spending account, and it's, like, we don't use enough of it. So that the very end of the period, we're, like, oh, crap. Time to go get rid. Expensive glasses because we have nothing else to spend this money on, so we'll we'll go get go to the boutique glasses store and get something fancy. Rid. That's hilarious. We every year, I I'd look at how much we pay into our health insurance because, like, Canada has has free health care, but it doesn't pay for things like rid. Dental, glasses,

medications, things like that. So I always look at it, and, like, we use every year more at the dentist than we pay into the entire thing, which is Super low, but also awful because we have to go to the dentist so much.

Yeah. Do you get the anti reflective coating on them so that when you're on you're, like, you're on a rid with me right now, and I can depending on you very faintly, sometimes I can see myself Yeah. But not very much. I get the anti reflective. This doesn't really do think just by the nature of the way Glass works, you're gonna get some reflection on there no matter what. That anti reflection is sort of, like, almost just for you, use using the The wearer of the glasses, not like the, because I've looked into it, man. I don't know if there's anything I can do to remove reflections on my on my glasses from, like, rid. Yeah. You you don't know this because you don't have to light yourself with the glasses. But when you light yourself, what do you do? You just put a key light right in front of your face. Right? It's Pointed up towards I have these, like, weird angles You're doing, like, reflections to, like, fill the room with light. It bounces off the rid. Angled ceiling into my into my face. You have this, like It's a little red right now. Perfectly angled ceiling directly into your face. So it's, like, almost like someone's holding up a reflection board right right in front of you, which is awesome. I wish I had something like that. But for me, I have to have a key light over here, Wes, and I have to have a fill light over here.

So reason being is if you have any light that's in front of your glasses, it just shows up as this giant white square on your glasses. Oh, yeah. So I have to make my lighting setup so much more complicated, and they have to be high. They gotta be all over the place, and and I have watched maybe, like, you know, 20 hours of YouTube, Videographer YouTube, which honestly is there any better YouTube than videographer YouTube? They're they all look so good. So good.

So It's rid It's a rabbit hole for sure. DSLR shooter or any of those any of those accounts are some of my favorites. Alright. Next question is from Isaac.

Hi. I would like to know how the 2 of you deal with stress.

I am a freelancer, and sometimes clients can get the worst rid me. When they do, I usually take a long walk and listen to a podcast, but I don't always have time for that. I can actually go to my commit history and show which ones were under stress. So which commits? I think a lot of developers, especially freelancers, could benefit from that. Please keep me anonymous.

So, how do I deal with stress? You know what? Stress in my life right now is probably close to an all time high with a a 2 year old and a 4 year old and move to a new house and running a business and all that stuff during a pandemic, stress has never been any any higher than it has been. And, honestly, I think so many of us, because of a global pandemic, a now endemic or whatever it's called, are just dealing with this baseline stress that is is really just pervasive in our entire lives at this point. So What do I do about it? I make sure that my fundamentals in my daily life are taken care of in good order, as in rid I am taking care of the things that need to be taken care of to put myself in a position where I'm not going to be experiencing as much stress rid from the other things because you're going to get stressed in your work, and my wife likes to talk about buckets. Right? We all have buckets, and if your bucket gets filled up, it can overflow.

So, like, how much is your bucket being overflown or overfull with things that aren't work related? Because chances are it's, like, And so I I like to do as much as I can to dump that bucket out, whether it is, I'll play some some video games, in the evenings Depending on what night it is, I have, like, a a Sunday night is my game night. I'll also down and play some some games right now. I'm playing NHL 22. So I'm playing some hockey, playing against those Canadians up there, those those nasty old Canadians.

Rid. But, that's typically what I'm doing. I'm looking for ways to remove that stress from my life. We go on walks. We do whatever. But You know what? It's gonna be there. Deep breaths, deep breathing, all that stuff works. Exercise every day. I do some bit of exercise, rid Doing weightlifting or whatever to remove that sort of stress, but it isn't like I said, I I don't necessarily think your client, in particular is is doing enough to totally overflow your bucket. So you wanna make sure that, you know, the things in your life that you You can find time to reduce that stress that you're actively working on reducing that stress and then removing the stress from other areas because work is Well, it can get stressful. We've all had those periods, and, you know, if you're overly stressed out for 1 or 2 days, 3 days, 4 days at work, rid A week, whatever, that's that's normal. But if if it's, like, really becoming a problem, we gotta find ways to mitigate that. And, typically, it's

rid Just like I said, expelling some of that stressful energy from your life. Yep. For me, it's I go on lots of walks, generally. Lucky to be able to do that throughout the day. Rid. I'm very good at keeping a pretty strict 9 to 5. I also found that, like, I have, like like, processes in place to deal with things that stress me out. People having issues with the courses, being overwhelmed with all of the business stuff that I have to do, taxes, things like that. So rid. Putting as many processes in place to deal with those things. Like, I used to get really upset when someone would send me a nasty email at, like, 8 PM rid About course that wasn't going their way. You know? Like, you're awful teacher.

This course is garbage. Why would you charge money for this? I need a refund right now. And, like, I used to like, that would just, like, be a night ruiner. But, like, now it's just I just see those, and I swipe the notification away. And rid. Either my assistant will deal with it or I'll follow-up with them when it comes back to the time. And I find that that is really important is learning how to to properly deal with that and put the rid place so that when these things that can be triggers for a stressful time come up, that you know how to appropriately deal with them. Like you've mentioned, it's really easy when you're under under stress

for your systems to go by the wayside, and it's almost, like, important to build the systems and make them easy enough and robust enough that, like, if you are under that kind of duress that You can fall back to that system.

We use it. It resonates a lot. You know, those those types of emails can definitely be a night runner, but if you, You know, dismiss it until the next day, whatever. You put it into your system, you put it into progress or whatever. It it always helps. Yeah. And I also like, my wife always tells me this is that rid. She's like, you're always in a good mood when you get things done. Yeah. Like, you could be in the worst mood ever, and you could go to the garage and clean up a corner,

Or you could bang off 6 things on your to do list for work, or you could right now, it's just Trying to clean up the house and organize the basement, things like that. And, like, that's what puts me in a good mood. So I always just, like, say, like, okay. I'm in a bad mood. I'm stressed out. Like, what are 1 or 2 things that I could reasonably get done in the next couple hours that will make me feel a little bit of accomplishment, rid. And that will instantly improve my mood. And for me, that that's what makes me happy. For other people, it's I was, you know, watch a movie, have a beer, things like that, And that will make me happy, but for me, it's like, no. I need to deal with this in some constructive way so that I feel better about the situation.

Yeah. I hear you on that. I'm always in a great mood when I get things done and in a pretty rotten, stressed out mood when I'm not. I'm, like, Panicked like, oh my gosh. There's so much to do. Alright. Next question we have from Mike Varleya.

Question about dynamic re Database fields and API requests. I'm a self taught programmer, but I've been struggling with the workflow on how to allow users to create dynamic content types And then to save those types of via REST or REST calls, particularly, I have an express back end in some database, could be SQL or not.

In the past, I've defined routes and database tables that the user could save data to. Think users are products or orders. Okay. Makes sense. Rid. But how would I give the ability to create new resources where they could create fields with data types that have the request re Create new tables in the database.

So, like, this is kind of like, how do you create the thing that needs creating? Yeah. I get you can programmatically create tables, blah blah blah. So, basically, this question goes on a little bit more, but I'm just gonna sum it up as how do you let the user create and store dynamic data? Rid. Meaning that the piece of data or the fields of those data is unknown until the user can create it. And, like, a a perfect example of this is If you have a CMS like WordPress, you create a custom field. The custom field is, like, maybe you have a user, and on that, you have a user's name and their Twitter and their Instagram and their, employee ID. Right? Like, those are not if you don't know ahead of time that those are the that's the metadata that user needs, like, how do you do that? Rid Right? So first of all, you get sort of abstract with your types. If you don't know if it's a user, it's just a document. And then the fields on those can be Generally, depends on the database in this case. So a lot of databases will allow you to store, what we're gonna call this, unstructured data or or metadata.

You store that as JSON. So you JSON stringify that thing and and save it to the entire database.

And some databases will let you Search and index that. Specifically, I know Postgres will allow you to search and index unstructured data so you can throw anything in there. Rid. MongoDB, another option is use a schema less database. This is this is why a lot of these NoSQL databases got really popular. Like, MongoDB lets you have I think it's called loose mode. Whatever the heck you want in it. Just yeah. Toss the mold in there. Careful. Yeah. Careful with that because rid. It's a nightmare if you just, like, let that thing run wild, and you just put whatever you want in there, but definitely doable.

Maria DB is not one I've used, but this is something I found has dynamic columns.

And then also, like, if you just start using MySQL, you can just rid Throw JSON into a field called metadata. And then if you need that to be searchable, you can usually index that rid. As part of a cron job, which whatever is your your search process that you're using. So that's a long answer to say. It depends on your database, But there this is not a uncommon thing to have to run into.

Well, that's awesome, and, it seems like a a Type of project that you might want to host on a service like Linode if you are Linode. If you're gonna be rid a service, and then then then you'd have the database somewhere, and you could host the site on. Linode West, do you wanna talk about Linode?

Yes. Linode is an infrastructure provider. What does that mean? Linode does cloud hosting and computing for any of the apps or processes that you are running. So what are some things that they use? They have Linux cloud hosting for your applications. If you've got rid. A Next. Js website or express website or literally anything, you can sign up for Linode. You get a box, and you can re SSH into that box and install node. You you can get an image that already has it in there, and you can run your application on that. It's an awesome way to host your application. They have all kinds of other stuff like dedicated CPU, image hosting, object storage, load balancers. So if you need rid. High availability or things spike or you need to be able to run 4 different servers at once and and direct 4 different people to each of those, you totally can do all of out with Linode, and they're gonna give you a $100 of the free credit. Just try it out. Go to linode.comforward/syntax, And that's gonna get you a $100 in free credit. Thank you, Linode, for sponsoring.

Sick. Okay. Next question is from a Valentine Michael Smith.

Says, Can you touch on the use of the word grok? That's g r o k in the dev world. I know a lot of who have no idea what the word means, I just happen to read Stranger in a Strangeland, the novel the word originated from a few years ago, Or else, I wouldn't have ever heard it before starting in the dev world. Have either of you read the books? Anyways, what why do devs say this? Okay.

So I did a little bit of looking, and Grok was coined, as you said, in the 1961 science fiction novel, Stranger in a Strange Land, which I have not read. I'm not that well read, to be honest. Wes, have you read this this book? No. No. I I haven't read a book in, Like, 15 years. To kill since To Kill A Mockingbird or yeah. Yeah. Yeah.

At least a a fiction book. I I've I've read plenty of nonfiction.

I don't know why. That's just that's just how I how I am. Okay. So this this book or this word grok basically means To understand intuitively or by empathy, to establish a rapport with, to emphasize or communicate sympathetically with, To experience enjoyment.

So this is, like, really interesting because I think a lot of people just use the word grok to mean, like, I get it. Like, I understand something. I know something. Yeah. And it seems like the word in the decades after 19 sixties Ended up becoming used in computer culture in 1984, where in an InfoWorld magazine, I believe, There isn't any software, only different internal states of hardware. It's all hardware. It's a shame that programmers don't grok that better.

So that seems to be how it it became into it kinda came into the programming lexicon.

And then in the Jargon File, which is another book, This talks about programming here, and the word grokking says when you claim to grok some knowledge or technique, you are asserting that you are not merely You have not merely learned it in a detached instrumental way, but that it has become part of you, part of your identity.

For example, to say you know Lisp is to certainly assert that you can write code in it if necessary, but to say you grok rid Lisp is to claim that you have deeply entered the worldview and spirit of the language and the implication that it has transformed your view of programming, contrazen, which is similar supernatural understanding experience as a single brief flash. Rid. So, Wes, do you grok JavaScript? Have you become one with the language? Have you merged your human body with the object rid 1. Yes. Have you be yes. You've become an array method. That's a

fantastic explanation for it. Because, like, when I say rid. That, like, I grok some code. It's that it's not that I, like, look at it and I understand what each line is doing. Rid. It's that I understand what it's doing in the greater application. You know? Like, I sort of understand all the moving parts of this application, and I know that when rid. When I push this button, what is actually happening behind the scenes? That's that's what I would say is is grokking to me. So, yes, I would say I grok JavaScript. And then, also, when you jump into a new framework or existing code base, grokking it is different than just, like, Understanding a little piece of it. Yeah. You fully

you get it.

That's that's the You get it. You get it. You know, we are

rid Just merged with some code there. Let's talk about the next one, which is from Steve Lewis. If you guys were not self employed, Would you prefer to work at a big company like FAANG, Facebook, Apple, Amazon, Netflix, and Groupon? Groupon, rid Groupon, I haven't heard that word in a long time. Do you know my brother used to work at Groupon for a little while? That's, that's fun to yeah. Or would you prefer rid. To go for a smaller agency or a start up, what would you like to do? Oh, that's that's a good question. First of all, I think I would be a awful employee at either of these Just because of the type of person I am, I don't know that I would do a good job at either, but I probably would like, if I take a look at this type of thing, rid. I think that I would like to work at, like, somewhere like Google. The people that are working on like, Adam Argo is doing stuff at Google with, like, cutting edge rid. CSS and just like, his job is developer relations. So he's just trying to help the greater dev community understand rid How these new things in CSS or JavaScript are work and then communicate that to the rid The people that are actually making the browser and and implementing these specs. So I think that's where I would be, but that may may change at any given point, Especially if I was working at Groupon.

Yeah. I feel you. I would also like to be Adam Argyle. That'd be pretty sweet.

But yeah. No. I I think I think you're right. Rid That that kind of thing would be would be really nice. If we're talking about pen to paper coding, like, that's what you're doing all day, I would prefer to be in the The agency world, because I'm way too ADHD to work on 1 project for the rest of my life, I need a new project every single week. I need a new new framework to try each project on. When I worked in agency world, that's honestly I'm joking, but that's honestly, like, one of my Favorite things about working at an agency was I was able to try out a lot of new tech in different projects, especially when I was a decision maker on some of those things. But Big companies have a lot of resources, and if that meant I could be doing what I'm doing right now at a big company, then I would probably rather be doing that. But if it If it was like, oh, you're gonna be a a dev full time, which I am a dev full time, but if you're if you're gonna be a dev full time on, like, individual product code, I probably rather have it be something that I could change up somewhat frequently. Alright. Next question here is from so many local host errors.

And this may be a softball, but how do you set up logging so your dev environment isn't firing all the time? I can't seem to find a way to do this, And it's probably because I'm trying to learn as I go.

Yeah. It depends on on what you're using here. He did mention Sentry rid Many of these things also have ways ways to do this in your in your configuration.

So, like, Sentry has, like, a domain whitelist.

Rid What else? When I set up my my Sentry, it it is only for the production database or only for the production URL. So instead of thinking, like, How do I get it to work fine in only local host? I actually only want it to work fine in one specific context, which is in the rid The production URL. I don't want it to I don't want it to be firing on our our beta URL or our staging URL. I don't wanna be firing on anything like that. So, Yeah. Yeah. I'm blocking all of that in the configuration and having a white list again for just my production site. If it is

Browser based, you can just whitelist URLs. It's funny because I did a a sponsored video for Century in my Redux course, I don't know, 4 or 5 years ago. And part of that was, like, we set it up, and a lot of people used my Sentry code. Rid. So I still, every now and then, get emails of people who are testing out how to use Sentry, and they're sending their errors to me, which is funny. Rid. So you can whitelist the URL. If it's, like, server side, then you have to disable the setup code. So whether that's Sentry uses thing called Raven rid. LogRocket has a method. LogRocket dot init. Basically, it's just an if statement. If process dotenv dot and almost rid. Everything in JavaScript land uses node underscore env.

And if that is set to production, then go ahead and initialize it. Otherwise, don't rid. Because then you're gonna be sending millions and millions of local host errors as you are debugging something over to your your thing there. Yeah. I have one of those big old if statements. And and, like you said, rid because this user directly mentioned LogRocket. LogRocket themselves is just in a net code, where Sentry, you have, like, Sentry to capture errors as well. Rid I have all of that behind, and if if is production, then initialize at least for the browser based stuff for LogRocket specifically as well. Speaking of Sentry and error and exception handling tracking, this episode is also sponsored by Sentry. We didn't include this question in such a time for that, but it it worked out nicely. So Sentry is the perfect place to track all of your errors and exceptions and handle them with care. You can make sure that you have taken care of any of these creepy crawly bugs that are in your site here, and I I'm personally a huge fan of Sentry. It's something that we used long before syntax, But Sentry to me at century.io is one of those essential services if you have any production code. Why? Well, it lets you know who's having issues on the site, rid where they're having the issues, and it allows you to track and make sure you are keeping all of those things under control. And they have recently added Performance metrics, which are really, really super good because they tell you your user misery scores and how just how, You know, slow some pages can be for some users, and it's it's very nice. It's one of those things that if you're not motivated By users saying your site is slow, which, you know, they may or may not say that. They may just never come back. Well, you might be motivated by some big old things that says, rid This says 4 bars of user misery, so take that one. So check it out at century.i0.

You can use the coupon code re Hasty treat, all lowercase, all one word, and get 2 months for free. And thank you so much for Century for sponsoring.

Next question from Josh Jay from Jersey. Hey, Josh Jay from Jersey. Hey, guys. I've been listening to podcast for about a month, but I've been binging it in my mind numbing warehouse rid I have a question. I've been wondering.

When you're sitting down for a new project, how do you design the website? Do you just slowly develop it as you code, or have you sit down and draw out the rent entire thing, what it's going to look like ahead of time. I've heard talk of this thing called a remarkable pad, and I've seen ads for it on Instagram, YouTube, but I always assume it's rid Just a gimmicky thing, but their marketing team make it look very leggy. Is this a good investment? So rid. Sort of 2 questions here. Oh, a third question. I'm wondering how you both met.

We'll we'll answer that in just a second as well. So rid. How do you do it? For a lot of my websites, I like to at least sketch out a wireframe rough sketch, rid A design of what it is that I'm going to be building, and then Do you do that on pen and paper or what? I yeah. Usually, I start on pen and paper rid for what a layout is going to be, and then I'll move that into a design program and get I've talked about this before. I usually get about rid. 50%, 80% of the way there with look and feel. Like, this is what a button looks like. Because, again, like, I we have rid fully moved away from thinking of websites and apps as pages and more in terms of, like, components. So I'll think about, like, a rid A player component or a video component or a button component, and then click them together in a in a little a loose little wireframe.

I think professional devs do a little bit more than me, but because I'm a 1 man show mostly, I can just kinda fill in the gaps in between there. Rid. That is very, very helpful, especially as you are learning because I've seen many times new developers get really frustrated in that. They wanna make it work.

You know, like, writing the code to make it work is really frustrating, but then it also doesn't look good. And then you're trying to figure out the code to make it look good, and then rid. There's lots of lots of frustration. So if you can, like, take one of those things out of the equation and have a sort of a mock up ahead of time rid. Or a wireframe. I think that's really, really important. I don't use any fancy stuff, just pen and paper.

I've tried all kinds of different apps in my rid In my past, but nothing beats pen and paper for me. But I know, Scott, you have something like this, don't you? Yeah. So I have the remarkable tablet, but, You know, to me, it isn't, like, a killer feature for

well, okay. I don't wanna say that because it is very good at, like, sketching out UI. But, like, for me, the reason why I bought it isn't Sketch out UI because you don't do that that often. The remarkable tablet, you could think of it as basically, what it is, Wes, is it's an e ink.

It's the e ink drawing tablet that I have, and it feels like paper. The interface is not so, like, if you're, like, you know, tapping something, Whatever in the interface, it's not like a phone. It's an e ink tablet, so there is going to be an inherent amount of lag there. But when you're drawing or writing, it's Instant. It's there's no lag. So the writing experience is extremely good. It feels like paper to write on. So if you're the type of person who's like, you know what? I would really love rid a notebook with infinite amount of paper, and I'm willing to spend money to have a notebook that never runs out of paper And that will, you know, have these things available as PDFs synced to my computer.

That's why you'd get the remarkable. I use it. I take notes on it daily. I I'm definitely like a rid Note Sketcher outer, it's way easier for me to sketch out some notes on the the remarkable than it is for me to open up a markdown tab or something like that in in Obsidian in in type amount. So for me, I really like to use it for sketching out notes, and I do use it for sketching designs, but that's not where I I go rid To actually design things, that's where I go to explore ideas in my brain, maybe, like, some potential layouts or something. I even made a PDF shell of the level of tutorials website that I draw on in the reMarkable tablet when I wanna see what it looks like in contact stripe, But I use a I use Figma for all of this. If I'm designing anything, I'm using Figma. If I'm prototyping things, I use Figma. And, in fact, I have what I did is I built a component system in Figma out of the way my site is. And then now when I want to try out new designs or new ideas, rid I just drag and drop the components, or I I copy and make a a version of them and modify them and stuff like that. So for me, if I'm working on the design And I'm designing ahead of time, which I did for level up tutorials, but I don't for freelance sites. Well, I guess, I don't do a lot of freelance work, but for, like, my own site or or just Goof around projects.

I'm not designing it ahead of time in in Figma, but for a level of tutorials, absolutely, all designs go in Figma first. Rid Try them out, see how they work, see how they fit into the system. It all builds through a system and then code after that. This remarkable tab seems really neat for also just taking notes in meetings, because I have, like, a problem where

when I'm having a meeting with somebody, it's not linear. Right? And trying to keep markdown notes Top to bottom, I often go back to the notes, and I'm like, what was I doing here? But if you can drop boxes and arrows and and Highlight.

Together, rid. Circle things, highlight stuff. That's kinda how I do it, and then I just throw at the piece of paper when I'm done. And you you sort of lose those notes or you have to write down the important stuff, so rid. It's pretty neat. The only thing it says it does, like, text. It, like, dictates the text, not dictates it. It takes, like, whatever you wrote and puts it into actual text. Rid What's that called? OCR? I have the worst handwriting in the world, like, to a point where my, like, my 6 year old is, like makes fun of me. She's like, let me rid tell you how to make an r. Scott's showing you it right now. How much so how much is this? It's expensive. I think it's, like, $600 else said and done. Oh my goodness.

Good gracious. You buy a iPad for that. Yeah. Well, this doesn't serve the same purpose as an iPad, and and ADHD folks will know that if you have an iPad in front of you And it's a drawing tablet. It is not a drawing tablet. It's gonna become a browsing Internet tablet, a Reddit tablet, whatever. I could see that. This thing It's probably worth it. Is a single purpose that single purpose is taking notes or or sketching or drawing. Right? This is a single purpose device, and it does that Better than an iPad could based like, the way the screen textures, the way the pen is, everything is is better than an iPad could possibly be for drawing or or not For drawing, drawing, but for for note sketching. But it comes at a cost is that it is a single purpose device. So if you're, like, compare if if your brain is in the in the world where you're comparing it to an iPad, then it's probably not what you want. But if your brain is like, oh, yes. This is the ideal device for me based on my needs as a human, then this thing rules. And let me tell you, $600 sounds like a lot, But I have thousands and thousands and thousands of pages in this thing now, and I use it every single day.

It just sits next to my desk, And the best part is the battery lasts for, like, 2 weeks, so it's always on when you want it. You never have to charge it. You never have to plug it in. It always ridged. It just works. Yeah. So I'm a I'm a big fan of this this device, but not necessarily for designing websites is the best way to say it. Okay.

Next Question here is from Andras.

Hi, Wes and Scott. You have talked a lot On the show about headless CMSs like Sanity, Prismic, or even WordPress being used as a headless CMS, I'm curious What the setup in the real world project looks like? How do you host the CMS, and what will the admin surface look like? Will the button styles and background, Etcetera be different than the actual website that the user sees? Is this a common problem for the admin users? Does the admin user see all of the menu Or creating new content types and new adding new features, or do they see the input fields in the content that can be added to a specific page? Thank you. So in the actual world of using these tools, it's really no different than the way it was before when you had a WordPress site because You had a WordPress site. The admin section of the WordPress site never, unless you did some some work to it, didn't look the same as the rest of the site. I mean, it looked like WordPress.

Rid So the the back end is gonna look like WordPress. It's gonna look like Sanity or whatever. It's not gonna look like your site unless you're writing a custom admin UI, which rid. That doesn't sound like a a necessary Very few people actually do that. Yeah. No. Thank you. Yeah. That that doesn't sound like a ton of fun to me. I I think there are some situations where that might apply, but, rid Yeah. It's not gonna look the same, but it didn't look the same in in the past. Now hosting is is kind of a kind of an issue. When you have a services like rid Sanity Prismic or Contentful or any of these other headless CMS services, they host it for you. It's hosted there. Right? So you don't have to worry about that. Not Sanity. Some of them.

They will host it for you, but you can host the Sanity your own. That's what I'm trying to say is is that they do offer a way to host it for you. Yes. You can host it yourselves, but That takes at least that bit of out of it if they're hosting it for you. Otherwise, you do have to find a host for this thing whether that is, like, cheapo WordPress host that's just allowing the API to go out that exists. That's what I've done in the past to say, like, alright. I'm gonna pay $5 a month for this WordPress Toast, and that's all it's gonna do is serve the API that gets hit every once in a while. None of that is great specifically because rid A lot of these times, you're dealing with static sites in the headless world and these static sites they have to rebuild. It's a little bit of a different admin experience rid Then the eventual user goes, but you do have to host that somewhere, whether that is hosted via the services or you're paying to host that yourself. The admin, though, is very much like it was before. The only difference is when you save some content, the site, if it's statically built, Needs to rebuild itself statically, and it is not instantaneous at that time. However, there are some tools in this space that are evolving.

Ready. There's another question here. It says, does the admin user see all the menus for creating new content types or adding new features? Generally, what you'll do in this case is you will have roles where they you can restrict both the seeing of that as well as the actual API access of that. Specifically, Keystone is one that I use in one of my courses.

They have the ability to both hide the UI, but also rid. Also have to lock it down in if you have the API in case someone would were to ever hit those API endpoints.

So there's that. It's it's pretty standard for your CMS to look like whatever CMS it is. And you might put a logo and and change the accent color, but generally, it's gonna look like whatever CMS It is. A lot of them that you host yourself, you can change it, but it's honestly not worth your time.

Yeah. I know. Yeah. It's funny because, actually, The Drupal world I know I I like to say nice things about Drupal on this podcast, but the Drupal world, in my mind, had, like, the best theming for admin sections because There was a ton of different admin themes out there for Drupal, and many of them looked very nice. I don't know what it's like today, but, like, compared to WordPress, where it's, like, always what you see is what you know, WordPress rid is what it is. And then Drupal at least had, like alright. If you wanna have, like, a material design UI or something like that, it's it's fairly easy to do that. Next question we have here is from Dave.

I always love a good course question, so I picked this one. I understand that course prevention is in place In the browser, to help improve security and prevent malicious requests going across domains. But I understand you can get around this by performing the request re Server side, for example, via curl. If I was a malicious actor, surely, I could send my cross domain request through a proxy rid To avoid the course issue. I'm sure I'm missing something obvious here. Can I please get your thoughts on this? So real quick, We've talked about Cors a couple times. I think we have an entire episode on Cors. But the idea, of course, is cross origin resource sharing, meaning that if you're logged in rid. On bank.com and you're logged in on scott.com, scott.com is not able to send a request rid. To bank.com which would unless there is some things called cores set in place, which allows you to share data between bank.com and scott.com.

And the reason we have that is because you're generally, you're logged in. You have cookies.

You've got sensitive stuff in the browser, In one origin, one website should not be able to reach into and make requests on behalf of the other origin.

And now the way to get that around that is if you were to run a request on in a node script or curl or a Python script or whatever.

When you're doing that, you exit the environment, which is the browser, and there are no origins. So if you were to try to make a malicious request re Via node or via curl, you would need to replicate the entire browser, and you would somehow need to get the rid. JWT tokens or the cookies or the sessions or whatever sensitive information is in the browser, you would need to somehow get that rid. And then replicate that in your request, which is not possible because how would somebody get that information unless they actually rid. Had some way to get access to your browser information. So that's why cores is not an issue when you're not inside the browser because it's a totally different environment You don't have access to those type of things. You do. There is still a little bit of risk there. You a script running still could access other sensitive things on your computer, like Your entire file system, all of your environmental variables, things like that. So that's where sandboxing comes into place, and That's kind of what Cors is as well is that you're sort of sandboxing

the scripts Mhmm. So that it doesn't reach its greedy tentacles outside and touch things it shouldn't have. Rid Greedy tentacles. Gotta love it. Alright. Next question here. Nice one, Wes. Next question here is from Lemon. Lemon says, How do you implement authentication in GraphQL, especially with Fastify? I know Scott recently moved from Meteor to Fastify, so I was checking Fastify, but Could not find a satisfying auth solution that fits well with GraphQL.

K. So here's how we do it. We actually use a plug in called Fastify Cookie, Which allows you to set and get well, the getting part is is irrelevant here, but it allows you to set HTTP only cookies. Rid So we use an HTTP only cookie, and go back and listen to the episode that we did on authentication.

Just do a command find on Sodex for authentication. We did a whole episode on this, and that explains definitely what we do pretty pretty closely.

So, basically, we're setting an HTTP only cookie via the server side in any of our mutations that require, like, a login, or It's also being said well, it's being received via context.

So context in GraphQL is something that becomes available rid all of your mutations and all of your queries, and it is run on startup.

So on any in well, it's run on any request that comes in. So the request comes in. It goes to, first, your context, and a context then receives that HTTP only cookie.

It verifies their authorization well, it verifies their authentication, which then verifies their authorization, and then that sets the user into context. And then throughout GraphQL, anytime we need to access the current user, we just look at the context dot user to get that specific user on the server side.

And on client side, we just have a well, we have a resolver that just returns the current user. So you just do a query for the current user. That current user pulls it from context, then it returns that to the the client side, and then that's ready to go. Now we don't use any of the Apollo link or any of that sort of rid We just use an h t p only cookie, and it it just works fine. If you wanted to do it the other way, essentially, you could set an authorization header, rid We don't have a ton of experience in, but you just have an authorization header that then has that token in there for the authentication aspect of it. But either way, we just use an HTTP only cookie, which is how you wanna do it. If you wanna learn a little bit more about how we're doing this exactly in a non GraphQL context, rid We do have a course on authentication on level up tutorials .com. It's definitely not required.

It is a tricky thing, though. So if you if you're looking for, like, a full on solution or something. You could have auth auth 0 or anything like that if you're looking for more of a service. And I'm sorry. I'm I'm getting distracted here because West son is being too cute on cam right now, and he's doing some cute stuff, and I'm getting getting distracted.

Hi.

Hi. Hi. Hi. Hi. He's waving. Hi. Say hello.

Hello.

Hello.

What else can you say? Rid Say, what what sound does an ambulance make? What what sound does a fire truck make? Yeah.

Alright. You go go have a nap. Okay? Good night. Bye bye. Good night. Bye.

He had he was crying. Oh. He wanted to come say hi. You say hi to dad.

Too cute.

Too cute. Awesome. Last question from Zach Vogel. I love when you play games on the podcast. I'm a high school technology teacher, and I play a game with my Students called the 5 second rule, where we drop some fish on the ground and eat it within 5 second. I'm just joking. That's not I'm sorry. Rid. It's based on a board game, and I have changed the topic to technology themes. The game works like this. 1 person who reads a rid Topic named 3 Versus Code extensions, and the other has 5 seconds to oh my gosh. I'm stressed out even thinking of this. The other has 5 seconds to respond with the correct answers.

I think this would be a fun game to play in the podcast. I've included a link to a Google form that a version I play in class. You probably wanna change the topics to more programming layer rid Related. Oh, that's a great idea. Yeah. I know it's a good idea.

5 seconds.

Name 3 technology CEOs. Rid. Name 3 things you might find on your desktop. Oh, man.

This is like the there's a game like this where you have, like, 10 seconds to get it spit it out.

Rid. Name 5 words that aren't Jackie Chan. You figured that one.

Oh, this is great. Yeah. We should do this. Yeah. I know. That's why I included this. I thought this is a great idea. Rid. Thank you, Zach Vogel. Yeah. I like playing games on the podcast as well. It's kind of fun. It's kind of fun. Alright. Well, that is all of our potluck questions. Thank you for submitting rid them to us. If you have 1 you'd like us to answer on the show, please send it to us syntax.fm.

Go in top right hand corner and click on rid Ask a potluck question. You can submit it via there. Sick. Let's move into some sick picks.

Do you have any sick picks for me? Oh. Do you have 1? If you have 1 handy, you go. If not, I will have 1. I have rid A sick sick sick sick pick. I am going to sick pick the new head unit that I installed in our car. I've had it installed for about 2 weeks now, and rid. I've run it through its paces.

And so we bought a new to us van, and it was a 2015.

And it has, like, the worst rid. Navdash built into it, and it's just like like you press the like button where it's supposed to do speech to text, and it just never ever gets anywhere close to it. So We ripped the entire thing out, and I was like, I gotta find some some sort of new one out there. Especially, I need, like, CarPlay ready. In in the thing where your your phone can hook up, and you can get access to all the stuff that CarPlay does. So I found this one called, Toto, a t o t o. I specifically got the s eight premium.

They have, like, 6 or 7 different models, and this one is has a 10 inch screen. It's huge. They have a 7 inch version as well that's like a standard double DIN, but thankfully, the car we had, you can fit it in with the 10 inch Version, and it looks pretty good. And this thing is awesome. It's it's in so it's a it's basically an Android tablet that has been re Set up for things like a backup camera and the radio and stuff like that, but then you can also put any apps that you want on it. So, specifically, we have a backup camera. We have a dash cam that it records 3 or 4 days worth of driving to the SD card on it, And then it has torque and look. You put literally anything you want on it. You can watch Netflix when you're driving down the road as long as you have a rid Internet connection. And then most importantly is that it supports wireless CarPlay and Android Auto. I don't think it has wireless Android Auto. I don't have Android, so I don't rid. Don't really care about that, but this thing has been wicked. It's so nice and fast, so nice and responsive.

It's so nice to have a re Huge screen with your maps open all the time.

And this is the first time I've ever used CarPlay before. Have you used CarPlay before, Scott? Oh, yeah. Oh, yeah. It's so good. Like, I can't believe how awesome it is just as a UI to be able to see your music and your maps and rid. Your text messages that come in and be able to dictate it to them. So it was pretty good. It was about $500 for the unit, Canadians, less than American. And And then I paid, I think, an extra 150 to get the 2 cameras attached to it. And it also does this really cool stitching rid. With the backup camera so on our last car, we had a 2 cameras in the mirrors, 1 camera in the in the bumper, and 1 camera on the back. And it would take all 4 of those cameras and stitch like a top down. Oh, yeah. And we really like that for So cool. Parallel parking and things like that. And our new car didn't have that. It just had, like, a crappy backup camera. So I replaced the crappy backup camera with the this new one, and then How did you do that, by the way? Oh, I'd It was a lot of soldering, but between this thing and wiring harnesses, I didn't cut any wires from the car.

I just had to take a lot of, like, the panels apart and get to the car wiring, but it was awesome. And it it stitches the backup camera's Video into a top down What? View. It's crazy. That's awesome. Like, as you back up as you back up, it. It must have an accelerometer or a compass or something in there so that it knows that way as you turn. And then it stitches that all of that rid. Stuff together into a top down view, and it is very, very good. I was very surprised with it. So check it out. The, Toto S8 rid. Premium is the one I got. I'll put a link in the the show notes for it. And, it took a little bit to install because you ready. You have to know how to put wires together and how to, like, hide wires in your dash and things like that. But once it's installed, man, I'm very happy.

I'm very happy about is my sick pick is this is this is actually pretty amazing, Wes. If you have a garage door You got a garage door, and it's not smart, and you want it to be a smart garage door. You might think, I need I need a smart garage door, which you actually don't. You just need this rid Chamberlain Smart Garage Control, a wireless garage hub sensor and smartphone control, rid It's $24 or $23 for this thing. Oh. Yeah. And, yeah, I got it. It's pretty neat. You hook it up to your unit. You do a quick little I think there's, like, a quick little, is my garage door compatible with this thing? And mine was mine was, like, some decently old Craftsman garage door worked. No problem. Yeah. So, this thing works with a lot of stuff, rid But, yeah, it's really pretty neat. So check it out if you're the type of person who's, like, you know, as much of a dad where you're like, is the garage door shut? You know, I am definitely that type of dad. Make sure all the doors are shut all the time and the garage doors shut. This tells you if it's shut or not? Yeah. It says Oh, that's great. About this item. Did I shut the garage? Question mark. No more worrying.

At our cottage, we have very old garage doors. And the way that garage door openers used work is you simply just touch 2 wires together and it would open or close depending on what it is. And you can buy these re Really cheap. They're called inching relays, and inching relay is a a smart relay that will turn on for, like, a re 2nd and then off again, and that will open and close. So I set those up in at our cottage, and they work great. And then I tried to do it at re Home. But our garage door opener is smarter, meaning that the the wires from the garage door opener button rid. Now send data instead of actually sending just a, like, a a voltage request.

So I haven't been able to do mine at home. And when I looked into it, it was like $150 for the, like, smart kit from whatever a stupid garage door is. So I just I gave up on it. But now I'm gonna see if this rid Cheap one will work on mine. That's awesome. There's a nice little wizard to help you determine if it is

not like a a not like a Merlin type of wizard, but, like, oh, you know this UI wizard.

I had a good joke. It was like, here it is. Entry relay. What is this? A race for worms? Rid I had a joke the other night. I've been just doing dad jokes. You know, I'm, like, trying to trying to fully embrace the dad joke thing, and Courtney's just, like Yeah. Not having it. She's just giving me these looks like, Thumbs down on that one.

Oh, that's good. Cool. Shamelessly plug. I'll shamelessly plug all my courses at westboss.comforward/courses.

Re You can learn advanced React and GraphQL or beginner JavaScript or beginner React. You name it. I've got it. Westboss.comforward/courses.

Rid Use coupon code syntax for $10 off.

Sake. I'm also going to be shamelessly plugging LevelUp Tutorials.

Rid That is level up tutorials.com.

You can sign up to become a LevelUp pro and save 25%, and you can get rid to all of the LevelUp Tutorials courses, of which there's a new one every single month from many expert content creators such as Kobe Fayock, rid Brian Douglas and Ryan Alinska and just a ton of courses from myself, Scott Talinski, a course from James Quick on there, rid Travis Nielsen and so much more. We have new content coming from new creators every single month. So check it out, level up tutorials .com. The latest course, at the time of recording this, is going to be on Astro.

Astro is a platform that we talked about last week, and a hasty treat in Astro is a really cool platform. So if you're interested in learning Astro, head on over to level up tutorials.com.

And that's all I got, Wes. Let's, let's close this one off here with a piece.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review

rid.