Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about PNPM and monorepos! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 4:40 - What is pnpm? https://pnpm.io/ Performant npm https://www.youtube.com/watch?v=hiTmX2dW84E Find and remove node modules find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 08:30 - Why monorepo? Internal packages all in one place Forks and custom packages easier Commands that control everything at once 10:33 - Workspaces Not exclusive to pnpm Yarn, npm, pnpm all have them now Different syntax packages: - "packages/**" 12:48 - How it works in practice All commands run through root Use in host, hook up my monorepo to render run commands Filter and recursive "install:all": "pnpm recursive install", "clean": "pnpm recursive exec -- rm -rf node_modules; rm shrinkwrap.yaml; rm -rf node_modules", "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", 16:35 - Using submodules https://paigeniedringhaus.substack.com/p/march-2021-git-submodules Why submodules? Public and private Links https://www.npmjs.com/package/npx https://yarnpkg.com/ Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

1 Nov 202122min

For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 02:54 - Hi guys, love the show. I wanted to share with you something that happened just the other day (Oct 4th), I was starting my new job today at a large tech company. They use React for everything (even DNS!, don’t ask me how, it’s complicated). I figured I’d celebrate my first day and push some code to prod, (how hard could useEffect be right?) Next thing you know, they ended up bringing in a guy with an angle grinder to get access to the server cage. 04:15 - No one from Denver can buy 06:38 - Bug accidentally gives $90 million to users https://www.cnbc.com/2021/10/01/defi-protocol-compound-mistakenly-gives-away-millions-to-users.html 08:34 - Share Pointy Knives Hi! I’m a developer at a consulting firm in Sweden, writing C# on the backend and using React with either JavaScript or TypeScript and hosting things in Azure 99% of the time (and 1% in SharePoint). I was in my last week at my last job before I was due to start my new job. Worked 12 h/day to keep up with all the handovers etc. to colleagues so they would have a chance to continue working on the solutions I have taken care of. One project was a process tool hosted in SharePoint Online. The guy who would oversee it had -1% experience with SharePoint (which I pointed out to my bosses). But to make things a bit easier, I wrote a deploy script to ease things a bit. Starts the terminal and runs the script towards the acceptance environment. Umpteen million errors appear… Which is strange, because there would only be about 20 commands (which can cause errors like these). I log into the environment to double check if I now accidentally entered the wrong values in the script (which looked okay according to me). But I get a 404 error when I try to reach the environment… I log into the admin interface; I discover that the site is gone… Also checking the trash can, there are no things there. Very strange. I find that I’m in a different folder than the one where I saved my script… In that folder there is an old deploy script that was used when the project was started a thousand years ago (which was not used after the project was “finished”). The first thing the script does is force delete the site and then try to create a new empty site… The site is gone with lists and everything (lists are a SharePoint thing, think of it as sql-lite), there are no backups of the acceptance environment (although it is very important). I just feel a little panicked about how I’m going to solve this. However, I remember testing a tool six months ago to copy entire environments. Where the first attempt was made on the acceptance environment. Finds the cloned environment and can use the same tool to clone it back. It took only 8-12 hours of work to create all the new things done in the environment in the last 6 months instead of X number of hours to build everything from scratch. Once I updated a feature that saves accessories on orders (same solution). However, I failed to add all the new fields to the production environment. Which meant that accessories were not saved at all… Which was discovered after a week… I fixed the error in 5 minutes and the sellers had to contact x number of customers to double check what kind of accessories they would have for their orders… 11:22 - External HD One time I needed to format a server. It was an outdated Windows server. I selected all the files and copied and pasted to an external hard drive. My drive was pretty fast and it took like a minute. I was like: “Wow! That’s a great external hd”. Formatted the server and, as soon as I realized it didn’t copy 10% of the files, I had that face. We all know that face. Anyways. Tried to restore the files using some HD recovery tools but they were all corrupted, not by the formatting itself but for the installation of the new OS. My boss was pissed! I was very young so I blame it on the server. I’m not proud of it. But why the heck they would ask a developer to format a server in the first place? By the way, my birthday is on Halloween. Spoooky. 13:07 - Hey Loser I was testing new code to automate mass-mailings to our customers. Who knows what demon drove me but I wrote the “test” mailings like ransom notes: “Dear loser! Fork over all your $$$ or else!” Well, all was looking great and I wa s feeling pretty pleased with myself. Progress bars were sliding and counters were spinning. But I could hear a rising commotion from the marketing guys behind me. Phones ringing, voices raised. Turns out I had moronically wired myself to the production database! Even worse for me, I’d only been at the company a month or two. I thought my goose was cooked and the Big Boss was plenty mad, but I owned up right away and apologized. We put out a cover story that we’d been hacked and all was forgiven. 15:01 - HE HATE ME I was part of the developer team that accidentally leaked the 8 cities the XFL, an alternate football league, a week before their press conference. ewrestling.com/article/wwe-ac… We were using Contentful and Gatsby. A junior dev entered the information into the prod space instead of the UAT space and when we released some bug fixes, it picked up the contact us content update. I found out after seeing stories pop up in Google News when I was about to go to sleep. Was taking the content down when we started getting calls from the CIO of the WWE. The league went bust because of COVID. 19:23 - I Don’t Have Memory of This I had two pretty bad code changes that only showed their problems when they went live in production. Around 6 years ago, I was running into a large performance issue with some of our queries running slowly against this giant DB. We were using JPA/Hibernate and we had a bunch of joins that were done lazily. I switched a few of them to eager so that they would create a single SQL statement instead of a bunch (or thousands). The change worked fine on my dev environment, QA, and staging. Staging was supposed to be representative of production. So we went live and within minutes the entire system went down because of out of memory errors. We quickly switched back to the lazy joins. We found out that staging had more memory and fewer DB records than production though they were supposed to be exactly the same. 21:05 - Your Performance is Slowing us down Back when VMWare was becoming a thing, like 2010 or so. I was working at an ecomm site and we were seeing slow performance between the app server and some data services. I decided to build a little multithreaded logger that could track when a query to Oracle Financials was running too slow and generate a warning. Oracle Financials was doing the credit card transactions, orders, and all the rest of the sites DB work. The code had no impact on my dev, QA, and staging environments. We were hitting well over our minimum number of concurrent users. We deployed it to production and then the system got slower and slower, but never crashed. Again, production and staging were set up differently. Staging was a bare-metal server. Production was running on an ESXi server on a host that was split 4 ways. The multi-threaded code meant to detect performance degradations was slowing the whole system down when it tried to synchronize data across threads. I was pretty embarrassed by both these two issues. It went to show that production is its own special thing and that you really don’t know if your server-side code is really going to work until it starts running there. 23:15 - Dead Button Way back when mainframes were king, a guy I worked with pushed a button in, that if released, would immediately take down the entire company. He stood there for 4 hours, holding the button in, until we could let it crash after business hours. We gave him a chair after 2 hours. 25:12 - No Deploys on Fridays I was a junior dev working on our company’s website. They were HTML + nunjucks templates that were later being integrated with the backend using some Python witchcraft. There was also a metric ton of JS libraries added (like Babra for page transitions, threejs for a cool interactive animation on the landing page etc.). Didn’t really get much of all this package.json stuff at that seniority level. So after running yarn or npm or whatever, and seeing some warnings about a couple packages being outdated, I decided to update some of them. It ran great locally, but I didn’t build the prod version, as I didn’t know there could be any differences. I was working on some minor feature (or maybe even some minor bug) and the PM decided there’s no time for code review. So I pushed it to the repo, the backend guy did his integration, and launched it on prod. As it turned out, there were some breaking changes in one of the libraries I decided to update. It crashed the entire site. On Friday. At 4:30PM. And that, kids, is why you don’t deploy on Fridays. 27:33 - Stupid Selfie Horror story for you Wes. I work for one of the biggest retailers in the UK and we were working on an app that would go on a ‘media wall’ in their flagship store in London. Basically a giant 200-inch screen in the middle of the store that social content can go on. Turns out that I left my local Dev version connected to the production API when I uploaded a couple of stupid selfies of my big head in the office. Get a call the next day to ask why my face is on the medial wall. 28:37 - Soda I was a computer operator back in the late 1960’s, operating a Honeywell mainframe. The consoles were huge, about the size of a dishwashing machine, with the console typewriter and printer inset in the middle, on top. I had a soft drink on the console, next to the typewriter mechanism. We were told never to bring a drink into the room but we all did it, especially on third shift. Long story short, someone called my name, I turned around and knocked the glass of soda into the console. Had to be completely replaced – machine was down for two days. My boss was not happy. 31:22 - Oof A bigger horror story. I had my own software company in the 90’s and was in Singapore, customizing my software package for Johnson & Higgins Insurance Brokers – I had their Asian contract for my Insurance Broker/Accounting package. I spent a good 40 hours on Saturday and Sunday, making all the changes they asked for, getting ready for a demo on Monday morning. I finished up about 4am on Monday morning and was cleaning up my files. All this work was done on a Novell server. Print files had an extension of .prt and I had a ton of them in the main directory from all of the testing I had done. I was cleaning out old files, getting ready to back everything up and I thought I would delete all of the print files. I mistakenly keyed in erase *.prg, instead of erase *.prt (or whatever the delete command was – can’t remember it now). Programming files have a .prg extension – I had deleted all of my updated files from the weekend. In desperation I called Novell in Utah, hoping they could help me recover the files, but no-go. The demo Monday morning was not fun. 33:24 - Young Dev I was a young dev right out of college. My first job was at a child support company where we had desktop apps that would handle case information more efficiently than using Excel. My first project was to write a POC that would later be implemented into a new, bigger app that consolidated all the “POCs” for various parts of the child support process. For some odd reason, I still don’t know why to this day, my boss wanted me to write this “new” app on top of an old app with a bunch of legacy code. I never understood why but as a young dev fresh out of school, you tend to just do what you’re told. In school, I mainly used PHP/HTML/CSS for learning how to work with a database; this job however used C#/.NET for their desktop apps so I was doing a lot of learning as I went. I remember finally learning how to connect to the database and run some SQL after fighting with this old pile of legacy code. In early versions, I chose to handle creates/updates for these records in the same function. My young, dumb self wrote a try catch statement that would attempt to create the record and if it failed, it would try to update the record. Before the first production release, I updated the flow to handle creates/updates in separate functions - but never removed the update in the catch block of the original function now used for creates only. Somehow I, or any PM/QA, never failed on a create and hit this catch block while testing. Fast-forward probably 9-12 months later, I got a ticket to investigate why every case’s data looked the same in Production. I login to the app, search a few case numbers and sure enough, every case’s data is the same. I began freaking out as I had no clue how this could’ve happened. I mean it had never happened in all the dev work, testing, and months of live Production use. After I investigated with a senior dev, we realized the try block had failed and the update query in the catch block ran for that record - we also realized that I left off the where clause in the related SQL query to specify which record needs updating - so ALL records got updated with this data. Thankfully, we kept regular back-ups and were able to restore the data to a recent timeframe without users losing a ton of work. We commented out that database update call and redeployed the code ASAP. Also the senior dev was cool about it and was like “hey, it happens to all of us at some point”. Let’s just say I’ve learned a ton since then and definitely steer clear from writing code like that. You live and you learn I suppose. 38:40 - Where Wolf Here’s my development tale of terror: One night I was burning the midnight oil trying to get caught up on a never-ending workload. At the time I was working for an online travel booking site. It was after 11, and the last thing I had to do for the night was to rename one of the hotels in our production database. So I wrote my query: UPDATE hotels SET name=‘Some Hotel Chain’; One problem, I FORGOT THE WHERE CLAUSE. Suddenly, over 5,000 hotels in our production database all had the same name. This was around 2003, so well before the time of point-in-time restores, and we were only backing up the database every week at that point. I was panicking. Fortunately, I had a dump of the production database that I had created only a couple of hours earlier sitting on my local hard drive. So thankfully, I was able to restore almost all of the hotel names, save for a couple that signed up after that data dump, and my boss was none the wiser. That’s when I learned that working late hours is not worth it, because at some point you are so tired that you can no longer make good decisions. 41:19 - I Want Your Job When I first started out I worked for a consultancy and they trained us in sales meetings to help managers get promoted because we were coming in to make them “look good”. This was okay b/c obviously, we were coming in as a contractor; however, after being laid off due to 9/11 (yes, this was about 20 years ago), I was looking for a new job and during an interview when asked where I’d like to be in X years, I mentioned to the hiring manager that I wanted to eventually do what he was doing. Well, I guess he didn’t take it that I wanted to make him get promoted to then take his spot. Safe to say I didn’t get hired. 🤦‍♂️😜 ××× SIIIIICK ××× PIIIICKS ××× Scott: Portable Air Compressor Wes: ESR Magnet Phone Mount Shameless Plugs Scott: Latest courses on Prisma and Astro - Sign up for the year and save 25%! Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

27 Okt 202151min

In this Hasty Treat, Scott and Wes talk about web dev horror stories — real things that have happened to real developers Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:36 - https://twitter.com/CameronPak/status/1445051951843061767 04:48 - https://twitter.com/susanlangenes/status/1445049321871712257 05:29 - https://twitter.com/DevJordanW/status/1445052979644706823 06:12 - https://twitter.com/HerbieDuah/status/1445088892177108994 07:04 - https://twitter.com/bbbryan14/status/1445400072921956357 07:43 - https://twitter.com/stephendennis30/status/1445074683062362114 07:59 - https://twitter.com/Tim__Moran/status/1445102727701221377?s=20 08:37 - https://twitter.com/SoyAlejandroAl/status/1445063677896450048 09:34 - https://twitter.com/sudonetizen/status/1445132694531231760 11:09 - https://twitter.com/chrislaughlin/status/1445049210840178690?s=20 11:58 - https://twitter.com/sbitaxi/status/1445208793072156675 12:44 - https://twitter.com/AlexHBruns/status/1445067663919755269 13:05 - https://twitter.com/costerad/status/1445069263568580616 14:02 - https://twitter.com/gcnx86/status/1445045635250638853 14:25 - https://twitter.com/JustMetMe_app/status/1445041678167920640 14:47 - https://twitter.com/alanshortis/status/1445048899899645959 15:50 - https://twitter.com/Swizec/status/1445191324215353347 16:17 - https://twitter.com/_RobJohansen/status/1445137057236467722 17:14 - https://twitter.com/fienen/status/1445040513678196743 17:57 - https://twitter.com/TechBill777/status/1445172824822452226 18:54 - https://twitter.com/Zircoz/status/1445041440770252806 Links https://twitter.com/wesbos/status/1445039778035032068 Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

25 Okt 202120min

It’s another Potluck! In this episode, Scott and Wes answer your questions about privacy policies, coding for kids, MongaDB hosting, cloud backups, system design, #NoMoreFoo, and much more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I’m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks! 06:45 - Fumbles O’Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I’d like to start teaching her basic concepts when she’s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks like. 11:01 - Kenny: Gentlemen! Love this show and the content you put out. It keeps me occupied during my 5 and 6 mile runs. Thank you both for working so hard to keep it active, I know it takes a lot of work. I’m curious what you think about hosting your own MongoDB server? I’m relatively new to Mongo but want to start working with it for smaller projects. I’ve used MySQL for a decade, hosted online with shared hosting. Worked well for my relational db needs. Should I host my own Mongo when I’m ready for production, or pay the reasonable costs for something like Linode or maybe even Atlas? I have experience in Linux (enough to get by) and have my own virtualization cluster that I can spin up a server in seconds, along with an enterprise level firewall for managing traffic to and from. I actually just spun up a docker server this week and have a Mongo container running on it, though it’s not accessible outside my network. This is purely for my development environments. Despite the firewall, my concern is security. Is it worth paying for a trusted solution like Linode, or should I put a little time in locking down my own Mongo container for my own use? Thank you both! Keep up the great work. 14:42 - Mike: Not a question but more of a rant… It’s 2021, almost 2022, can we all stop using ‘foo’ and ‘bar’ and ‘baz’ when teaching a programming concept? I applaud both of you because I don’t recall seeing any of your content ever using such atrocious terms, however, I’m sad to see other prominent educators in the web development community use these terms from time to time. I feel like there are so many better examples that we could use to explain a concept and the use of ‘foo’ is just confusing to beginners. That’s all, just wanted to get that off my chest. Thanks for a wonderful podcast! #nomorefoo 18:53 - Amir: Hey Wes and Scott, thank you for your awesome podcast. What are the best cities in Canada and USA to get (more quantity, highest-paying) developer jobs? 23:44 - LW: Hi guys, I am finally starting to get into GraphQL and I don’t get it. Specifically I am working to convert an existing REST API to GraphQL. This seems really tough and there is not much guidance out there on how to do it. The main part I am unsure of is how to write resolvers. If I use the existing query then GraphQL just seems like an over-engineered filter method. If I write an individual resolver for each column in the table - that’s gonna be 100s of resolvers and super annoying to write. Have either of you ever moved something from REST to GraphQL? And, if so, how did you handle this? 27:57 - Dan: How does someone learn and actually practice using these system design topics like load balancing, caching, and database sharding. I have never had the need to use some of these things in my day-to-day work, but recently been interviewing and in the system design portion of the interview I feel a little lost. I’ve read about these topics and watched videos but haven’t really seen how to implement these things. Any good resource recommendations? 31:57 - Matt: How do you know if you can trust an NPM package, from an unknown developer, that does not have many GitHub stars and has relatively few downloads? (The repo that made me ask this question is https://github.com/Wondermarin/react-color-palette). NPM audit automatically runs when you install a package, do any of you ever use additional security checks? 38:32 - Yosef: Hi I’m a beginner front-end developer and I heard you saying that being able to copy prototypes is a valuable skill, so I found some Figma free template and I copied them, the question is can I put them in my portfolio or deploy them? 40:00 - Nick: Hey dudes! I picked up a freelance project to make a brochure-style website and found myself having trouble to decide on what tools to pick for this site. I wanted to ask you and get your take, what tools/tech would you use to build a brochure site? By this, I mean the site should have mainly company information that is ideally editable by the stakeholders and has a contact form. Thanks! 44:22 - Casey: Hi Scooter and Wild Wes! Why do I feel so dirty when I’m forced to use negative values in CSS? 45:45 - Gnommer: Do you use some cloud sync service to backup your directory with projects? I mean OneDrive, Dropbox etc. I tried to use it alongside with Git, and it just messed my files so badly. On the other side I feel very uncomfortable without any backup apart from Github. BTW, according to last Potluck: polish ‘ł/Ł’ is pronounced like ‘w’ in ‘what a sick podcast you have’. Best from Poland ;) Links https://www.ryzerobotics.com/tello https://www.mongodb.com/cloud/atlas https://snyk.io/ https://deno.land/ https://kit.svelte.dev/ https://astro.build/ https://www.gatsbyjs.com/ https://www.dropbox.com/ https://www.backblaze.com/ https://www.synology.com/ https://support.apple.com/en-us/HT201250 ××× SIIIIICK ××× PIIIICKS ××× Scott: The Way Down Wes: Wooster Shortcut Shameless Plugs Scott: Modern GraphQL with Prisma - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

20 Okt 202159min

In this Hasty Treat, Scott and Wes talk about handy utility functions with Just! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 03:44 - What is Just? https://github.com/angus-c/just No dependencies It’s written in JS, so you can copy+paste them if you really need it Types available https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5 06:46 - Some nice ones just-safe-set → deeply setting dynamic object properties set(data, 'a.long[0].path', value) object-typeof Why not use typeof? Everything is an object Why not use array.isArray? Handy to have a switch statement just-*-case Camel, kebab, snake just-compare 10:54 - Why? This is the NPM install of Stack Overflow copy+paste Handy as hell Battle-tested Lots of ways to do simple stuff Sometimes the simple stuff has weird edge cases - these are caught Sometimes your checks can be messy Check if an object is empty 25 lines Just install it 12:05 - Other Great to learn and test yourself There are tests for each function Run them See them fail Try and make it so all the tests pass without looking at the source Links https://github.com/angus-c/just https://github.com/antony Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

18 Okt 202115min

In this episode of Syntax, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:45 - Recording Setup Zoom to chat Record on Zoom Quicktime Logic Riverside Wes: Heil PR-40 dbx 286s Scott: Electro-Voice RE20 Cloudlifter dbx 286s 09:13 - Notes Shows begin as a Notion doc Big outlines with a point-based outline to where to go Sometimes points are detailed, other times are just one-word reminders as to what to hit Sponsors pulled from a Notion relational table Shows are created in a kanban board but moved to a calendar view 12:37 - How do you find stuff to talk about?! Technical skills Hasty Tasty Potluck Game shows Collabs ShopTalk Collab Changelog Collab Soft skills Productivity Apps We Cooked It: Explainer Episode Add ideas to the list anytime it pops into your head 21:02 - Editing Podcast Royale We record a clap for syncing Upload to Dropbox for our editors 22:07 - Hosting Libsyn Archaic feeling, but covers everything 22:36 - The website Next.js Open source PRs are submitted adding the latest episodes 24:10 - Transcripts Generated 24:40 - Would you still start one? Podcast vs YouTube vs Twitch 29:20 - Getting popular / Marketing How do you do it? Consistency is key Need external audience 35:34 - Sponsors Five to six hours per week in prep Most of our sponsors are products we already used We sell and manage all our sponsors ourselves 42:17 - What about Patreon? Ad-free version? 46:04 - Live shows Confs Livestream Links Delicious Brains Syntax Ep 004: JavaScript Tooling LulaRich ××× SIIIIICK ××× PIIIICKS ××× Scott: Untold: Crime & Penalties Wes: Roadrunner: A Film About Anthony Bourdain Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

13 Okt 202152min

In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon! Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 04:39 - color-contrast() Part of CSS5! Maybe. The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list. 06:01 - Accent color https://davidwalsh.name/css-accent-color 07:34 - currentcolor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword 08:54 - Profiled color values - color() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() 11:00 - color-mix() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix() The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount. Would be handy for programmatically generating colors - 10% more blue for a border? Sure! 14:18 - Space-separated functional color notations rgba(255 255 255 0) instead of rgba(255,255,255,0.5) 15:28 - RGB and HSL with Alpha rgb() and hsl() can take alpha and percent values - rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5) 18:22 - Hex + Alpha values RRGGBBAA How do you remember?!?! Transparent 21:49 - lch(), lab(), hwb() notation CIELAB color space aka Lab is a color space. A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color Lab is intended as perceptually uniform Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space. https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ Links https://developer.mozilla.org/en-US/docs/Web/CSS/color_value https://twitter.com/argyleink Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

11 Okt 202126min

It’s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, more! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 02:55 - Hey guys, I love the podcast! This is a silly question and possibly the least important potluck question you’ll ever get. When you get a new Apple device like an iPhone, Apple Watch, or Macbook Pro… do you keep the box? Why or why not? 06:56 - Hey guys! Awesome podcast! Could you go over the advantages and disadvantages of using local images vs external images service (e.g. Cloudinary) for displaying images on a web app? 11:26 - Heyyyy Scott and Wes! 40-year-old lady here looking to make a career change. It’s taken me a year plus, but after building several tutorial React apps, I finally built a fullstack JavaScript app of my own, with lots of rad Postgres database stuff, a bunch of secure Node/Express API endpoints, role-based access control, fancy Oauth, and of course the latest React tech (context, hooks, etc). I’m pretty proud of it. I even managed to configure Nginx and deploy it to AWS. The only problem is…it looks like crap. My portfolio site itself is pretty darn slick, since I used a gorgeous Gatsby template that required only a bit of tweaking. But the site I architected and worked so hard to bring to life? It looks like an 8-bit game for toddlers, a responsive yet Bootstrapy game. My question: does this matter? I would hope that this project shows off my backend skills, but I’m afraid they’ll judge a book by its cover. (I guess a second question would be: how do you show off your backend skills? I have a README in my repo, but will they actually read it? Or, can you be a fullstack React developer with no design skills?) I am very, VERY ready to apply to jobs (emotionally and financially), but I am terrified of making a fool of myself and worried I’ll never get hired. I am completely self-taught and have just been plugging away at this on my own for the duration of the pandemic, so I send a massive thank you to you guys for the sense of community that your show provides! Props to Wyze sprinkler controllers! 16:14 - Scott, I just finished your “SvelteKit” course and now I’m working on “Building Svelte Components”. I have some questions regarding testing. I was listening to an interview with Rich Harris on Svelte Radio and it’s my understanding that the framework is trying not to be opinionated as far as testing. What are you doing as far as testing with SvelteKit? Do you have any recommended packages/plugins/libraries? I’ve only ever written unit tests with Jest in Vue. I’m loving Svelte, but I really want to work on writing tests as well. Basically, everything/anything you’ve got on testing with SvelteKit would be much appreciated. I’ve been listening to the show since forever, you guys are both awesome, shout out to Wes too, you’ve both taught me so much! Thank you, peace, love, and happiness <3 20:25 - Hi Wes and Scott, I am weak when it comes to dev ops. I would like to confidently set up and deploy my applications on AWS and manage dev/prod environments. Any course recommendations to learn how to do this and how it all works so I really understand? If you don’t personally, can you tweet this out so other developers can share their thoughts? 22:30 - You both have praised MDX in the past but why would you use it? I understand that it lets you put JSX in your Markdown, but that seems counter to the purpose of using Markdown files for content. Markdown is a portable format for static content and independent of any front-end framework. That makes it a good choice for writing posts and rendering them in any site. Once you inject a React component into it, doesn’t that eliminate the portability and the static nature of Markdown? At that point, why not just have a dynamic website where you have complete control of how content is rendered? What are your thoughts? 27:14 - Hey Scott and Wes! I, like you both, am a developer with young kids (I have 3 boys age 6 and under). Needless to say, my house has a lot of energy in it. My job is quite flexible, which I appreciate, because it gives me some freedom to structure my day in a way that helps out my family. My question for you both is this: as a web developer with a spouse and young kids working from home, how do you both maintain a healthy work-life balance (avoid working too much, find time for yourselves, family time, etc.) Thanks so much! 33:46 - Should I write a portfolio site using just the three fundamentals (HTML, CSS, JS) or should I write them in something I am comfortable with such as Angular/React? Unsure if using a framework for a portfolio site is a good idea. 36:38 - How do you handle hosting when using WordPress as a headless CMS with something like Gatsby? WordPress needs good PHP hosting, while Gatsby needs good CI integration. 38:52 - How frequently do you use div tags, versus trying to find a ‘better’ tag? Love the pod btw. 40:48 - This is less of a question and more of a heads up for other listeners. Beware of scam job opportunities. I recently encountered a scam where they used a website that seemed like a very normal and reasonable job board for a major company. I went through the whole process until they asked for personal info, and I asked for verification of their person. They couldn’t provide it so I left. But they had profiles matching the actual employees at the company. They had emails. They had an HR department and employees. They had a very legitimate operation going on. Make sure to take a second and verify with the company before giving away personal information or depositing any of their money into your account. 47:38 - What percentage of North Americans keep their mobile device longer than three years? Five years? Eight years? I am a freelancer and I want to put a clause in my contract of what age of device my app will support, but I can’t seem to find this information. Just more general answers like “most people expect a phone to last two-three years.” Links https://kit.svelte.dev/ https://www.cypress.io/ https://www.svelteradio.com/ https://www.digitalocean.com/blog/ https://caddyserver.com/ https://daringfireball.net/ ××× SIIIIICK ××× PIIIICKS ××× Scott: LuLaRich Wes: Flame Bulb Shameless Plugs Scott: Web Components For Beginners - Sign up for the year and save 25%! Wes: Beginner JavaScript Course - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

6 Okt 202157min