Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios

It’s another potluck! In this episode, Scott and Wes answer your questions about bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. 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 3:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode? 5:36 - The dreaded monitor question, flat or curved? 8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first? 12:35 - What is AMP and should I be using it? 16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js? 21:46 - Would you ever consider moving from Mongo / Mongoose? 24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program. 33:15 - Loved your recent episode(s) on serverless functions. I’ve implemented a few myself, but I always come back to the same question: how exactly do I secure these endpoints? Because you are charged for compute time, and those endpoints are publicly available, couldn’t anyone just send requests to them and run up your bill? 36:53 - I’ve decided to make a career out of coding and programming and I’m an absolute beginner starting out in HTML and CSS. It might be a weird question but how many/what percentage elements and declaratives do I need to memorize? It’s not that the info is necessarily difficult to parse, it’s the amount of tags that I’m bombarding my brain with is muddying my progress. I’m more of a theory-driven learner so it’s not the biggest obstacle in the world but I’m starting to see the breadth of this endeavor and I’m not sure how to focus my mental acuity. 40:39 - Do you have a standard folder structure that you follow for placing “utility” function JS files? Is there an “industry standard”? I’ve just been using utils or utilities inside src, but curious if there is a more common way. 44:12 - Is figuring out new techs/modules/plugins/whatever really as easy as reading the docs for most people? A common response to “what’s a good way to learn x” seems to be “the docs are good”. I then open the docs and am absolutely clueless. Are these people just giving bad advice, or do the docs actually give most people enough to go on? For example, I tried to implement username login with Passport using their docs, and a lot seemed to be left out, implying you’re supposed to just already know all this other stuff. It’s a bit demoralizing to feel like I can’t figure out much of anything on my own, and I’ve been doing web dev for a few years now, albeit not professionally, but I have done some big projects that are used regularly. So anyway, just wondering what your take on this common advice is, your experience with being able to figure out things on your own without needing an hour-long tutorial, and so on. I know you’re both tutorial makers, but I don’t get the impression that you two have to take a course to understand something new. 48:19 - Do you have any tips for getting over “code shyness” or “imposter syndrome”? I find myself struggling with this issue from time to time and was curious to know your suggestions for dealing with it. 53:36 - If I rename my GitHub repo, will all the links that are in the wild still work. For instance will github.com/webruin map to github.com/newname? Links Cloudflare AMP Blitz.js Brandon Blitz Meteor Mongoose DynamoDB uses.tech Course Report - Modern Labor Passport.js Syntax 058: Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More Syntax 015: Advice for New Developers, Imposter Syndrome and Interviewing at Google Syntax 075: Hasty Treat - Feedback and Criticism Brendan Eich ××× SIIIIICK ××× PIIIICKS ××× Scott: Stronger by Science Podcast Wes: iStat Menus Shameless Plugs Scott: Animating React with Framer Motion - 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

25 Maalis 202057min

In this Hasty Treat, Scott and Wes talk about purchasing power parity — what it is, and how Wes has implemented it on his course website. 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. Show Notes 2:36 - What is it? 5:43 - How do you calculate it? Big Mac Index Purchasing Power Parity Spotify Pricing Index Glassdoor Just ask developers what they make 8:04 - How do you implement it? Cloudflare headers Dealing with VPNs Does it work with sales? 16:09 - Is it client-side only? Links country-emoji npm package 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

23 Maalis 202018min

In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more! 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. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 1:26 - Hooks vs Render Props Hooks win hands down useState useReducer useRef useContext useEffect Custom hooks to hide and encapsulate functionality 35:06 - How we use them Scott Index that imports all custom hooks Babel alias to hooks folder Import { useHook } from ‘hooks’ useContextState Wes useResizeObserver useForm useGridRower useWickedFavIcon 45:54 - Which built-in hooks do we not use? useImperativeHandle useCallback useDebugValue 48:22 - Are hooks harder to learn? Wes: Yes — but easier to maintain after the fact Scott: Yes — harder conceptually and initially but easier after concepts are understood 50:29 - Are classes going away? Wes: I say yes Scott: Double yes Links Syntax Ep 092: React Hooks Making setInterval Declarative with React Hooks - Dan Abramov babel-plugin-module-resolver awesome-uses uses.tech ××× SIIIIICK ××× PIIIICKS ××× Scott: Ars Technica War Stories Wes: Mpow CH1 Kids Headphones 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

18 Maalis 20201h 1min

In this Hasty Treat, Scott and Wes talk about how to hire an assistant — something that can make your life a lot easier as a solo developer. 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 2:34 - Finding someone Virtual Assistant Offset timezones can be handy Flexible is great - two hours here, two hours there 5:55 - Types of tasks to delegate Support Email replies Mail and shipping items Invoicing Expenses Research - find emails for X Blog post edits Sponsorships 14:50 - Standard Operating Procedures If something happens more than once, make an SOP Common questions that come up 18:07 - Tools 1Password Missive Custom backend tools for: Managing courses Issuing refunds Chromebook Google Docs 21:52 - Hours Links 1Password Missive Notion Freshbooks Syntax Ep 184: Desktop & Mobile Apps With a Single Codebase 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

16 Maalis 202023min

In this episode of Syntax, Scott and Wes talk about soft skills tips — productivity, planning, communication, and more. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. 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. Show Notes 2:20 - Productivity Make a todo list and prioritize Get ideas out of your brain Use a tool like Notion as a second brain Batch related things together Recharge when you need it Have a system and stick to it 16:34 - Finishing projects Start Do a little every day Go all-in for a few days Clearly identify what needs to be done (Github issues, todo app) 23:30 - Planning tips I use Mind Node Whimsical Write it down when you have an idea Put everything in a calendar 30:24 - Communication Be honest and upfront with deadlines Give yourself padding — many people are overly optimistic Don’t let people expect communication from you, at all, or at all times Assume good intentions Don’t be a jerk to clients or coworkers 40:28 - Skill and career advancement FDD — fun driven development Share what you learn Don’t let other’s progress get you down — there is always someone smarter doing crazier stuff Solve your own problems Apply and interview for anything that’s interesting Track your progress I want to ___, I wish I could ____, You are lucky that you get to _____ Just start! Seriously. Plan on doing something. Links Todoist Things Notion Evernote Notable Beginner Javascript Level 1 Electron uses.tech Rework Jason Freid David Heinemeier Hanson It Doesn’t Have To Be Crazy At Work Mind Node Whimsical Javascript30 CodeSandbox Streaks Xerf Xpec YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: Katsumi Horii Project - Sky Cruisin’ Album Wes: AmpliFi ALIEN Router Shameless Plugs Scott: Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Beginner Javascript - 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

11 Maalis 20201h 1min

In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, and more! 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 2:45 - What do you personally use Cloudflare for? DNS provider Domain registration at cost Caching DDoS protection Hiding server IP address Free HTTPS Firewall rules Scrape shield Lightweight stats Serverless functions DNS Cloudflare Warp 16:40 - What are you not using? KV storage Video streaming Deep customization around blocking/errors 19:49 - How do you set it up? Links Cloudflare Beginner Javascript Digital Ocean DNS Simple Let’s Encrypt Syntax Ep 224: Serverless / Cloud Functions - Part 1 Begin 7-Eleven hit “Dance The Slurp” 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

9 Maalis 202025min

In this episode of Syntax, Scott and Wes do a part 2 about Serverless — databases, files, secrets, auth, and more! 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. 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. Show Notes 2:47 - Wes tried Cloudflare Workers Also this is so cool: Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc. A word on Digital Ocean Kubernetes + FAAS allows you to scale up/down 13:54 - Secret management Some have a great UI Some have a CLI Some only have production Some have dev/staging/prod 16:24 - Vendor lock-in Two kinds of vendor lock-in Lock into a low-level provider (Like AWS, or MongoDB) Lock into a framework Questions to ask: Can I go, take my app as-is, and host it on another provider? Can I refactor the config and run my code as-is? Do I need to refactor my code for it to run on other platforms? Next.js will only run on Now There is a community package Begin all runs on Arc.codes Firebase is locked in? 25:12 - Sharing dependencies Each function will have its own package.json, which can be a pain Publish utils a private module AWS Layers Import/export Bundle and tree shake 30:26 - Local development Now dev NPX sandbox Wrangler for Cloudflare workers 36:40 - Existing applications Difficult to move with many routes, but easy to move a Graphql API that has one single route Maybe do piece by piece instead of all at once Begin has http express method 45:21 - Data Any DB you want Dynamo DB integrated into many Firebase KV Storage for Cloudflare workers Fauna 48:14 - File storage Generally files go in the associated file place like Amazon S3, Backblaze B2, Cloudinary Many also have this integrated as well 52:18 - Auth Serverless is ephemeral and stateless JWT likely as sessions will work, but doesn’t really make sense Links Cloudflare Workers Akamai MongoDB Stitch Hitler uses Kubernetes Digital Ocean Kubernetes Firebase Google Cloud Architect Next.js Now.sh Begin Netlify Now Wrangler Apollo Federation Monaco Postman Codesandbox DynamoDB Amazon S3 Backblaze B2 Cloudinary ××× SIIIIICK ××× PIIIICKS ××× Scott: The Power of Bad by John Tierney Wes: Socket Organizer Shameless Plugs Scott: Animating React with Framer Motion - 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

4 Maalis 20201h

In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 4:30 - The General Idea Toward Responsive Elements — Brian Kardell 6:20 - Problems It’s not as easy as, “how do we write them” Some of the requirements may need a fundamental change to browser engines May be very impractical and take a long time “Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell 8:56 - What’s been happening? Lots of conversations Dead ends “How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell ‘containment’ and ResizeObserver, Implemented in all browsers in about 2 years 12:00 - Progress Lot’s of discussion Goog, Moz, Apple, smart people Not there yet Big ideas that could go somewhere .foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); } “A whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.” ~ Brian Kardell Or a system based on resizeObserver “In the coming months I hope to continue to think about, explore this space and continue discussions with others. I would love to publish some research and maybe some new (functional) experiments with JS that aim to be ‘closer’ to a path that might be paveable.” ~ Brian Kardell https://github.com/ZeeCoder/container-query https://github.com/FreddyFY/styled-container-query Links uses.tech Ian Kilpatrick Jared Palmer’s tsdx 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

2 Maalis 202024min