Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about Gihub Actions — what they do, why you might be interested in them, best practices 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:30 - What are Github Actions? 4:40 - Examples of Github Actions 6:02 - Will Github Actions replace continuous integration services? 9:19 - Libraries Links Codeship Github Actions nextdiff Figma Action 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

It’s another potluck! In this episode Scott and Wes talk about tabs vs spaces, coding music, SEO, React vs Angular vs Vue vs Svelte, Rapping, Soy sauce 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 3:18 - Q: I am potentially starting a job as an Angular developer (modern angular). But I am scared that, even though I will continue to stay on the cutting edge in my personal projects, using Angular in my job will make it harder to get a job after that in more modern tech like React. Do you think there is any truth to this? 5:30 - Q: Yo guys, saw soy sauce stirred up quite the controversy…lol. What are some big developer disagreements you guys have? 11:40 - Q: In JavaScript, ! == is the same as ! =, but I was told there was a slight technical difference. I cannot find what the difference is. Could you elaborate on this? 14:17 - Q: What are the rules on using another dev’s repos as a boiler plate? Example: Using Wes’s advanced react starter files to utilize his set up for my own project? 15:35 - Q: What music do you listen to while you code? As an extension, could we crowd source a dev playlist and host it on Spotify? 20:26 - Q: How do you go about working with different technologies and stacks (front-end related) when you have to accommodate for the client or other developers’ biases towards specific things. For example, you have to learn a different set of tools because in a new project someone doesn’t like what you use and says X is a better tool for the job. 23:11 - Q: I know there is no magic SEO silver bullet, but what are some best practices for implementing SEO into your website or web application? 27:26 - Q: When dealing with responsive sites, how do you go about respecting the request in iOS safari to show desktop sites? 28:45 - Q: I get confused about your usage of the word ‘app’. You don’t make iPhone or Android apps, but you often through the word around like “I would create a Node App”, or “Some of the apps I made” etc. Is it just website applications, or how exactly should I interpret “Node App” or “Web App” compared to a mobile app? 31:36 - Q: I wanted to ask your thoughts on transform class properties plugin from Babel? Heard the podcast on react state, I found it mind blowing when setting everything up without constructors. 36:53 - Q: I am a beginner, I have mostly learned front-end so far (HTML/CSS, JavaScript, React). Should I first get pretty good at these before I start learning some back-end? Or, should I actually start learning back-end now and have a basic knowledge of both front-end and back-end? 39:00 - Q: If for some reason React died today and you were no longer able to use it, which framework would you pick up and use full time? Would it be Vue or Angular? Or something new like Svelte? 40:11 - Q: What habits, strategies, or specific tools do you rely on to prevent your hard drives from filling up with useless files? find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 47:20 - Q: Which JS library is most like the Tesla Cybertruck? Links Tailwind CSS Syntax Spotify Playlist Head Bob Spotify Playlist Retired Scenester Metalcore Spotify Playlist DaisyDisk CleanMyMac Backblaze Tesla Cybertruck RxJS SynthWave '84 VS Code Theme RoboCopJS ××× SIIIIICK ××× PIIIICKS ××× Scott: Keychron K1 Mechanical Keyboard Wes: Everlane Uniform Crew Neck Shameless Plugs Scott: Black Friday Sale on All Courses Wes: Beginner Javascript Course 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

In this Hasty Treat, Scott and Wes talk about new CSS Logical Properties. Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io. Show Notes 2:27 - The Box Model 5:32 - Grid and Flexbox 10:17 - Widths and Heights 11:20 - Text Align Links New CSS Logical Properties! Elad Shechter Adam Argyle 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

In this episode of Syntax, Scott and Wes celebrate 200 episodes of Syntax with a live Q&A! 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. 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 2:27 - With 2020 around the corner, what are your wild predictions for the the future of web design and development? 8:44 - Are site builders going to replace us as web developers? 13:30 - What does the future look like for Syntax? 19:01 - What emerging tech advancements most excite you for the next 5-10 years? 23:27 - What is the future of web hosting? What should hosting companies do differently? 27:40 - Why do you set your base font size to 10px? 32:40 - If you could go back in time, what would you say to yourself? 36:29 - How do you make an iFrame go 100% high? 39:10 - What’s one thing you see developers stress out about for no reason? 44:46 - Do you feel overwhelmed with creating new content when there’s so much already out there? 48:42 - How do you stay sane with your naming conventions? 51:15 - If Gatsby is best for static websites and Next is best for apps, how does Create React App compare? 54:30 - How much is too much or too little magic in a framework or library? 58:11 - Does Kait ever get tired of you buying a bunch of stuff? 61:45 - What is your office setup? 64:01 - How long until we can use Suspense for data loading with libraries other than Relay? Links Pigeonhole Keystone VulcanJS NextJS Gatsby Meteor Wix Squarespace Modulz Figma Sketch Framer Netlify dnsimple Digital Ocean AWS Heroku Syntax016: Rems vs Ems Seth Godin Notion Laravel Blaze Relay SWR Suspense Project Farm YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: The Missing Crypto Queen Wes: Bosch Wiper Blades Shameless Plugs Scott: React and Typescript Wes: Beginner Javascript Black Friday Sale - Get 50% off! Scott’s Courses Wes’ Courses 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

In this Hasty Treat, Scott and Wes talk about making courses — techniques, best practices, things to avoid, 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”. Show Notes 3:07 - Validating your ideas 4:44 - Generating ideas 6:38 - Figuring out which ideas will stick 10:00 - Show your expertise 14:02 - Pay attention to what’s popular 15:50 - Collect email addresses Links Microsoft Excel Stream Highlights Refactoring UI Adam Wathan Steve Schoger Scott’s Svelte 3 course Wes’ Sublime Text articles 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

In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Prismic - Sponsor Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at Prismic.io/syntax. Show Notes 2:43 - Gather info What is this thing trying to do? Use tools DevTools are your best friend during this phase 8:01 - Know where to look (and use tools) Dev tools for client side Error logs Sentry LogRocket The most experienced people in any field know how to ask the right questions. Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve. 10:00 - Look at the end game What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture. 13:17 - Read Again Error logs provide the best clues. Read them closely. Actually read your code — don’t skim it. Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts. 18:08 - Make it simple (break it into smaller parts) Limit the number of inputs and outputs Get it working in a limited capacity (e.g. safe mode, Codepen, etc.) Comment out major sections of code until you have a working example Does this problem exist outside of the framework? Does this work in a clean environment? 25:35 - Take yourself out of your environment You should be able to take a look at the problem at all zoom levels Does it work locally but not on the server? Does it work in other browsers? 27:32 - Stay calm It’s easy to get nervous or worked up when the stakes are high It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath Take a shower, lift weights (seriously) 30:14 - Talk it over Getting the perspective of another developer can be invaluable 32:28 - Make things obvious Use debugger or label logs — don’t let it be ambiguous For CSS bugs, use primary colors to make things stand out Use the right tool to make the problem stand out Layers for CSS issues Network for network issues Performance tab (etc.) 35:12 - Use Git correctly to free up your techniques If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix. 36:10 - Don’t jump at solutions Take the time to fully dissect the problem Question you assumptions It can’t possibly be a problem with ____. Well maybe it is. Wes once spent hours trying to diagnose a check engine light when the gas cap was lose. 43:51 - Get good at pattern matching This comes with experience When did this problem start? Did we deploy any code? Did we change any logic? 44:54 - Get good at googling Being able to describe your problem is key. Search the error from Firefox Links DevTools Sentry LogRocket CodePen Syntax 154: SVGs with Sara Soueidan @walpolea Syntax 152: Debugging Tools + Tips @bowlendev @dan_abramov Ryan Dahl on creating Node.js @LaurieonTech Firefox DuckDuckGo ××× SIIIIICK ××× PIIIICKS ××× Scott: Jeremy Ethier Youtube Channel Wes: Marpac Rohm Sound Machine Shameless Plugs Scott: Typescript in React Course - Sign up for the year and save 25%! Wes: Beginner Javascript Course 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

In this Hasty Treat, Scott and Wes talk about tips for writing good CSS. Sizzy - Sponsor Sizzy - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Sizzy.co. Show Notes 4:08 - Use a system 4:50 - Use overrides and cascading Embrace the cascade Don’t rewrite the same CSS over and over again Understand why scoping is good 9:07 - Nail down typography early You can always revisit if it isn’t what you need 10:36 - Pick a pattern and stick to it BEM Functional CSS CSS in JS 14:39 - Don’t style based on element type (kind of) — a class should describe the component 17:09 - Good naming techniques Describe what it is, not what it looks like Thing ThingChild ThingChild-modifier Scale sizes (e.g. s, m, l, xl) 21:43 - Other tips Group like CSS together Chunk into different files Write good comments CSS properties FTW Links Stylus Webpack Parcel 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

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better! 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 6:35 - Our backgrounds in design 12:41 - Foundations Consistency makes a big difference Use “training wheel” tools until you are confident Always work within a system Less is more - subtle is better 19:39 - Color Color theory Complementary colors and shades Stick to color pallet generators until you are good enough 28:51 - Spacing More spacing than you think you need Vertical rhythm Letter spacing: -1px Consistent margin and padding 34:47 - Typography Sans vs serifs Finding fonts Use proven combinations until you know your way around 41:49 - Interaction Design for all states (e.g. standard, visited, active, hover, etc.) Animations should be quick Interactions should make sense 45:04 - Concerns beyond visuals Accessibility via color contrast Thin fonts and light grey are awful Think about the poor Windows users 48:47 - Inspiration + Resources Take inspiration from the best — you’ll find your own voice after enough work Go easy on trends - blobby characters with purple hair Take a trip around the world wide web Stripe Dribbble Site Inspire codrops Refactoring UI Links Designer Starter Pack - Andrea Crofts LastPass Colour Lovers Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google Bloomberg Dropbox FontPair FontJoy Figma - Google Font Pairings Type Scale Creative Market Radnika Next Stripe Dribbble Syntax 72: Accessibility Firefox Site Inspire codrops Refactoring UI Adam Wathan Steve Schoger ××× SIIIIICK ××× PIIIICKS ××× Scott: Reelgood Wes: Magnesium Shameless Plugs Scott: FullStack React with NextJS - Sign up for the year and save 25%! Wes: Beginner Javascript 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

In this Hasty Treat, Scott and Wes talk about domain names — buying and selling, best practices 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:50 - Buying a domain 10:47 - Selling a domain 13:50 - Transferring a domain Links who.is GoDaddy JavaScript.co BeginnerJavaScript.com LearnNode.com BeginnerJS.com KitBos.com Cloudflare Learn.li Learnli.co Escrow.com Hover Bob.com Sedo.com Park.io 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

It’s another potluck! In this episode, Scott and Wes answer your questions about Gatsby vs Next, Google Home and privacy, flat file CMS, working with designers, CSS frameworks and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. 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 6:15 - Q: Curious if you would ever consider running your course platform on Gatsby instead of NextJs? If not, what dynamic content would prevent you from doing so? 10:48 - Q: What’s the difference between a software developer and a software engineer, in your opinion? 13:11 - Q: How do you deal with designers who design without any thought about how dev will implement it? 15:46 - Q: I saw that Wes has an example in one of his slides where the Array prototype is written onto the Nodelist prototype. Is this safe enough for production as it overrides all regular NodeList behavior? 19:18 - Q: In a potluck episode you mentioned that you do not host your clients’ website. If you don’t host you clients’ website how do you usually go about handling clients that are less tech savvy? Or do you avoid those types of clients? 21:30 - Q: I know you guys (especially Wes) have been pretty insistent recently on not hosting clients’ sites yourself, but what do you guys think about continuously hosting client sites with a service like Netlify? It’s highly unlikely to go down and scales all for you, so it might be a bit of reoccurring income if you bill them yearly for the minimal Netlify fees. 24:44 - Q: I was listening to your episode on “The Smart Home” and I’m very interested in buying a Google Home Mini myself. However, I cannot stop thinking about the privacy implications of an always listening device around the house. What are your thoughts on this topic and on privacy related to online services in general? 29:08 - Q: What are your thoughts about using a CMS that uses flat files vs one that uses a traditional MySQL or Postgres database for a company blog that won’t have insane traffic? We’re currently evaluating Grav CMS and Craft CMS. 32:17 - Q: Have you used data attributes as custom elements in CSS and JS? 37:32 - Q: Why do so many people jump on styled-components/CSS in JS? Are these all people who have never used Sass/SCSS?! It seems like such a PITA to get Sass working with either of these. It feels like coding tables vs HTML 5. To me it seems like a step backwards. 44:26 - Q: When do you, if ever, reach for a component library, like Material or Bootstrap? Currently working a corporate job where it’s almost expected to use one of these for all internal applications. I usually prefer to make my own, but I’m wondering if I’m just making my life more difficult than it needs to be? Any advice? 48:30 - Q: Could you guys chat about Git clients and which ones you guys use and why? Or are you guys hardcore terminal geeks? Links Gatsby Next.js Bling.js Syntax 118: The Smart Home Grav CMS Craft CMS prismic Sanity Contentful Tiny CMS Forestry Airdale Chemical Material Bootstrap VS Code ××× SIIIIICK ××× PIIIICKS ××× Scott: HeavySet - Gym Workout Log Wes: Baroness Von Sketch Shameless Plugs Scott: FullStack React with NextJS - Sign up for the year and save 25%! Wes: Beginner Javascript Course 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

In this Hasty Treat, Scott and Wes bring you more web dev horror stories! 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 2:26 - Perf Woes 3:42 - Always Backup Your Backups 4:54 - Kill Children 6:03 - Robots Don’t Eat Food 8:32 - Email Goof Up 9:44 - Hundreds of Thousands of Date Issues 10:46 - Spooky August 12:32 - You’re up to .bat 13:17 - Printed Code 15:12 - ThinkGeek 16:12 - It would take a while to Ketchup on all these orders 17:05 - This story makes me want to stick my head in async 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

In this episode of Syntax, Scott and Wes talk about web dev horror stories — things you can only hope will never happen to you! 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. 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 2:09 - Scott’s Disastrous Git Clean 4:35 - Magic Updates the Gathering 8:52 - YAAAAS 9:37 - Token Trouble 12:16 - jQuery Plugins 15:22 - Success! 18:00 - Parental Advisory 21:47 - Students Changing Grades 22:46 - Lorem Sh!tsum 26:22 - Drowning in a Waterfall 28:53 - Magneto Upgrades 30:00 - JOHN CENA 33:24 - Migration Migraine 35:39 - Primary Key Nightmare 36:26 - The $20,000 YAML formatter Links Adam J. Sontag jQuery GitLab Gitlab Database Incident Magento Meteor ××× SIIIIICK ××× PIIIICKS ××× Scott: Dyson Hand Vacuum Wes: /r/ AbsoluteUnits Shameless Plugs Scott: Fullstack React with JS9 - 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

In this Hasty Treat, Scott talks about moving to iPhone — his experiences with both Android and iOS, the advantages and disadvantages of both, 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”. Show Notes 1:59 - My device history OG Droid → Nexus → Pixel Misconceptions of android It’s Windows for phones It’s cheaper or not as nice 5:03 - Why switch? 6:39 - Who wins what? Android Homescreen Low light photography Usability Squeeze assistant Google search integrated everywhere Search Keyboard Notification iOS Apps Performance Camera overall Device quality Fun stuff Haptics Links 1Password LastPass Gboard 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

In this episode of Syntax, Scott and Wes talk with Brad Touesnard of Delicious Brains about migrating, deploying, and hosting WordPress. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Hasura - Sponsor Hasura is an open-source GraphQL engine that helps you instantly setup a scalable and realtime GraphQL backend. Hasura makes your team super productive by dynamically composing a schema backed by databases and services that you can securely query from frontend clients. Get started at hasura.io to try it out in 30 seconds! Show Notes 3:50 - Why did start Delicious Brains? 5:25 - What plugins does Delicious Brains make? 11:40 - Migrating WordPress 16:50 - Migrating databases 24:20 - How do you do version control with WordPress? 37:06 - What’s the easiest way to deploy and host WordPress? 40:23 - What are some examples of managed WordPress hosts? 46:58 - What does your deployment process look like from beginning to end? 50:22 - Thoughts on headless WordPress 53:12 - Is serverless WordPress a thing? Links Delicious Brains WP Migrate DB Pro WP Offload Media WP Offload SES SpinupWP Heroku Now.sh WP Engine Flywheel Advanced Custom Fields Composer WP Packagist WordPress.org React Laravel Pagely Kinsta GoDaddy WordPress.com SiteFround Buddy Digital Ocean Laravel Forge npm Codeship Gatsby Laravel Vapor Installing via Composer WordPress deployment workflow Managing your WordPress site with Git and Composer ××× SIIIIICK ××× PIIIICKS ××× Brad: Teppanyaki Grill Scott: Succession and The Righteous Gemstones Wes: Magnatiles Shameless Plugs Brad: All Products Scott: Svelte For Beginners - 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

In this Hasty Treat, Scott and Wes talk about server side rendering — what it is, how to use it, best practices, things to avoid, 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”. Show Notes 3:20 - What is SSR? 4:16 - Why SSR at all? 8:39 - Platforms that do SSR out of the box 11:18 - Gotchas useLayoutEffect import { useEffect, useLayoutEffect } from 'react' const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect export default useIsoLayoutEffect 18:20 - Tools Links Next.js Gatsby Webpack Parcel Meteor React NoSSR component Syntax 127: Hasty Treat - React Suspense 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

In this episode of Syntax, Scott and Wes talk about server side fundamentals — the important things you should know if you’re interested in diving into server side. 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:53 - Requests and responses 9:21 - What is a server? 10:33 - Ports 13:50 - Database connection and interaction 15:16 - Cookies and sessions 15:48 - Writing files and directory permissions 19:34 - Headers 22:13 - Error Handling 22:50 - Logs 25:04 - Async data handling 26:33 - Routing 30:44 - Mime types 36:26 - Authentication 37:49 - Environmental variables 40:37 - Deployment 43:24 - Advanced Links GraphQL Node React For Beginners Next.js Meteor Papertrail pjax jQuery Github iMazing HEIC Converter Now.sh Netlify Twitter streaming API B is for Build ××× SIIIIICK ××× PIIIICKS ××× Scott: Samcrac YouTube Channel Wes: Wyze Plugs Shameless Plugs Scott: Svelte For Beginners - 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

In this Hasty Treat, Scott and Wes talk about their experiences with float tanks! 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:28 - What is a float tank? 6:47 - What are the benefits? 8:50 - How did you feel during the float? 17:28 - Would you do it again? Links The Joe Rogan Experience 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

It’s another potluck! In this episode, Scott and Wes answer your questions about freelancing, handing off projects to other developers, terminal configs, podcast apps, how much flexbox is too much flexbox, npm dependencies, 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. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 3:49 - Q: I’m interested in freelancing full-time and have some projects, big and small, lined up over the next few months to work on the side. How much work is a good amount of work to transition into freelancing full-time? 9:52 - Q: How much flexbox is too much flexbox? Is it a bad idea to use a dozen flexboxes for a viewport-filling application? 13:19 - Q: Can you explain the “potential” benefit of resetting CSS and whether it’s necessary? In which circumstances should we use such an approach? 15:26 - Q: I would love to hear an episode, or potluck segment, about your shell/fish/zsh configs. Maybe explain little tweaks you’ve made and why you’ve chosen the shell you use. 23:26 - Q: I always get confused on when and how to use .bind() method. Any pointers on when I should use .bind(), like in what situations? I also see it used a lot in React apps, but have no idea why they are using it. Could you explain this in detail? 27:02 - What are your suggestions for handing off client sites for freelance work? I don’t take many contracts (I have another full time job) but I’ll take one here or there during summer to supplement a little bit. I’m finding it difficult to make a clean hand-off when the project is finished. The contractual requirements are met and like anything, there are always tweaks to be made. I’ll handle some minor deployment issues without billing, but I struggle with where to draw the line. What suggestions do you have? 35:19 - This question is for Wes. I live in Central New York, and every time I go on the highway heading north or south I see several Ontario license plates. Where are ya’ll going all the time? Is there a secret Canadian spot down here? 38:20 - Each time I re-open an old project I lose so much time with npm dependencies being outdated and it drives me mad! I’m starting to dislike npm and everything around it, but is it npm only? How does other languages like php, python or GO handle this mess of dependencies? Are we better today than yesterday and I’m just complaining about nothing? 43:50 - Which podcast player do you use (Android, PC, or other phone/tablet), and why? Where do you listen to them? Links Flexbox React Native CSS Grid Normalize iTerm2 zsh Fish Hyper Wes’ Command Line Power User Course Overcast Pocket Casts Planet Money Joe Rogan The Indicator ××× SIIIIICK ××× PIIIICKS ××× Scott: Garmin vivoactive 3 Wes: Untitled Goose Game Shameless Plugs Scott: Svelte For Beginners - Sign up for the year and save 25%! Wes: Wes’ Instagram 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

In this Hasty Treat, Scott and Wes talk about feature and release planning — dealing with bugs, task management, best practices, 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”. Show Notes 4:06 - Wes: Features are logged into software (Github, Jira, etc.) I use a Kanban board - I bubble them up and down in the order in which I want to release them I don’t plan for Q1, Q1, etc… Tear off an issue, tackle it, test and deploy. 10:39 - Scott: All issues/features get a priority tag (e.g. p1 → p4) regardless of the system Bugs go in Github Features and platform improvements go in Notion Table of priorities (with git branch, lead dev, release number, emoji icon, what it contains, etc.) Links Github Trello Kanban Jira Canny Notion Getting Things Done 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

In this episode, Scott and Wes talk with Etienne Lemay, developer of Missive, about his experience building Missive, best practices, and the pros and cons of building desktop and mobile apps with a single codebase. 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. 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 0:57 - What is Missive? 6:10 - What is the desktop app built in? 9:44 - Did you use any particular libraries for the front-end? 11:44 - How are you managing state? 13:37 - Is it challenging to do all of this in JS? 15:07 - What was the catalyst for the “multi-conversation swipe”? 21:32 - What is the mobile app built in? 24:00 - What are the advantages of Cordova? 30:30 - How do you manage offline/syncing/etc. so well in a JS app? 34:56 - How do you test it? 36:52 - Have you looked into Cypress? 39:35 - How do you style it? Links @EtienneLem Missive Spark CoffeeScript Backbone Redux Typescript Electron Webpack Javascript30 Cordova React Native Fastlane Amazon S3 Cypress Sass TailwindCSS Svelte Syntax 176: Building Steam Games with React ××× SIIIIICK ××× PIIIICKS ××× Scott: Disgraceland Podcast Wes: Wagner 590 Spray Gun Etienne: Prettier Shameless Plugs Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Etienne: Missive 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

In this Hasty Treat, Scott and Wes are talking about developing better habits — strategies, avoiding distractions, best practices, 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”. Show Notes 2:03 - Habits we’re trying to build Scott Focus on one project at a time Alfred tasks to quit apps and block sites Not being efficient with my time Daily todo lists and utilizing calendar Too much screen time Listening to music in the background instead of having the TV on Wes Flossing Mindless context switching 13:37 - General strategies for building habits Make them trackable Easy enough to not ignore them Quantifying them is key Make them small enough Be accountable Tell other people your habits and have them remind you about them Replace bad habits with good things Design a sticker Reply to three emails Drink some water Celebrate your wins productively Keep the streak alive Can’t do x until y is done Links uhabits Done Loop K-Safe Alfred Codepen Atomic Habits The Power of Habit 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

In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. 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 3:03 - Backend Express Node GraphQL MongoDB 14:45 - Frontend React Next.js Styled components Stay as close to real CSS as possible 22:39 - Deployment process Serverless Now Ideally one app that handles everything 28:38 - Email Syntax Ep 32: Designing, Templating, Inlining and Sending Email mjml Juice Inky Nodemailer Postmark Mailjet Mandrill Get everyone set up and working in two different systems, so you can switch easily if something goes wrong 33:32 - Users / Auth / Cookies / Permissions Use something a pre-existing package or service rather than role your own (though it can get expensive quickly) Passport Auth0 accounts-js 38:48 - Images Cloudinary imgIX 41:50 - Other things to be aware of Handling cash Stripe PayPal Braintree Recurly Queueing Links Ruby on Rails Django Meteor MySQL PHP Postgres Mongoose Drip ConvertKit Feathers David Luecke Tweetdeck Next.js react-router Reach Router Gatsby Digital Ocean Heroku Redux Svelte Gridsome Mailchimp ××× SIIIIICK ××× PIIIICKS ××× Scott: K-Safe Wes: Bon Appetit YouTube Channel Shameless Plugs Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%! Wes: Flexbox.io Course 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

In this Hasty Treat, Scott and Wes are talking about automation — apps, workflows, resources, 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”. Show Notes 3:16 - Alfred workflows 9:32 - Smart home routines 13:16 - Bash scripts & aliases 18:43 - Other Links Alfred Wyze Cam Google Home Drip Divvy 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

It’s another potluck! In this episode, Scott and Wes answer your questions about webpack, serverless, agencies, recruiters, CSS Grid, media queries 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 5:06 - Q: What do you think about webpack vs parcel vs the old way (gulp, etc.)? 11:30 - Q: What is your opinion on AWS Lambda functions? 15:42 - Q: How do you push new Syntax.fm episodes into production? Each episode is written in markdown. Do you have a different branch for each episode and merge into master? What’s your strategy to avoid releasing the episode before the intended date? 21:24 - Q: Can Scott share some of his experiences working at an agency? Are there any red flags for when you should jump ship? 30:44 - Q: Whats the deal with recruiters? How do they work, and should you use one to land a new job? 36:46 - Q: What do you think about Upwork? Is it possible to find cool full-time jobs there or is it only ‘work for beer’? 41:28 - Q: If my website is already fast, why should I sacrifice my developer experience and learn a new syntax? 44:17 - Q: Will there be a CSS grid inspector on Chrome? Do you use any 3rd party grid inspectors or stick with Firefox’s CSS grid inspector? 46:39 - Q: What the best way to handle media queries in Gatsby with styled components? Links Webpack Parcel Gulp Codeship Semaphore r/reactjs r/webdev Wordpress Upwork Fiverr Svelte Syntax 173: Hasty Treat - Wes & Scott Look At Svelte 3 Firefox CSS Grid Inspector ××× SIIIIICK ××× PIIIICKS ××× Scott: DIY Air Filter Box Fan Air Filter Wes: Ripride with Andy Roy - Episode 6 with Steve-O Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - 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

In this Hasty Treat, Scott and Wes are playing a game! It’s called the TLD game, where Scott and Wes try to stump each other with questions about top level domains. 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 1:55 - The rules of the game We pick a TLD from a list, and the other person needs to guess: Is it for a country or business? -5 points What country, business, or type of business is it for? -5 points How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ is scott.___ and wes.___ available? -10 for each 5:40 - .BO 7:51 - .BZH 9:50 - .BANANAREPUBLIC 11:15 - .BABY 14:04 - .KR 16:09 - .MOTO 17:25 - .AW 19:16 - .IM Links 101Domain 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

In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, 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. 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 5:42 - Recording Wes: Screenflow Uberlayer Loopback Heil PR40 Heil PL-2T dbx 286s Focusrite Scarlett 2i2 Scott: Screenflick iShow HD Divvy Principal for Mac EV RE-20 dbx 286s Focusrite Scarlett 2i2 Sony a7 III Logic 33:04 - Editing Wes: Screenflow Speed up slow typing Edit out some goof-ups (but not all) Edit immediately after recording so I’m in the same headspace and can easily re-record Scott: Hire a video editor Cut out all blank spaces in audio, because I know that pauses are typically where I stop to think Normalize audio DaVinci Resolve 16 42:31 - Hosting Wes: Wistia Vimeo Rev Backblaze Amazon S3 My own course platform, with additional controls added via React Scott: YouTube Vimeo Plyr Video Player Backblaze Amazon S3 Custom course platform 52:46 - Common Questions Links Syntax 014: Our Stacks Explained Adobe Premier Pro Figma VS Code Audio-Technica AT2020 Blue Bluebird BSW Sweetwater Tim Smith - Video Editing ××× SIIIIICK ××× PIIIICKS ××× Scott: Hyperdrive Wes: PicQuic Screwdriver Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - 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

In this Hasty Treat, Scott and Wes talk about moving from PHP to Node — pitfalls to avoid, best practices 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”. Show Notes 3:43 - Servers need to be started and baby sat 4:48 - There is no built-in file system based routing 6:34 - Some "gotchas" 7:02 - Functional programming 8:17 - Async vs sync 11:11 - Event lifecycles 12:09 - Dependencies 14:17 - Keyed arrays Links Wes’ tweet thread Forever PM2 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

In this episode, Scott and Wes talk with Drew Conley about building games with Javascript. 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. 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 1:58 - What is Danger Crew? 5:25 - Did you have a background in game dev before this? 8:36 - What were the initial resources you went to to make a game in React? 10:27 - How much of it is Canvas? 13:06 - What other libraries are you using? 14:00 - How did you lay out the environments? 16:35 - How is text rendered? 22:40 - How did you do all of the animation? 26:08 - What performance issues did you run into? 27:31 - How do you handle user states and saves? 29:21 - Is there any server side aspect? 30:42 - What was the process for creating the level editor? 34:38 - How did you publish the game / wrap it as an executable to sell? 38:16 - How do you update it? 39:43 - How difficult was creating the game logic? 41:20 - The dev theme in the game is super prominent, did that make working on it more fun? Links Steam Danger Crew aseprite Buy Danger Crew Drew Conley Pixels to SVG GameMaker Making an editor Electron ××× SIIIIICK ××× PIIIICKS ××× Drew: Strange Planet Instagram Wes: MX Master Config Tweet Thread Scott: Figma Shameless Plugs Drew: Danger Crew Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify 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

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. 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 3:54 - What is the difference between NULL and undefined? 5:40 - What is short circuit evaluation in JS? 7:25 - What is use strict? 9:07 - What is the only value not equal to itself in JS? 10:36 - When would you create a static class member? 11:54 - What is a pure function? 13:08 - What is JSONP? 14:24 - Describe the layout of the CSS box model? 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

In this episode, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important. 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 and using the coupon code “tastytreat”. Show Notes 2:15 - How do you build an API from scratch? 3:54 - Choose an API type REST GraphQL 8:15 - Setup some sort of server that will accept requests and send responses Express Koa Meteor 11:11 - Document the endpoints What is the end point What parameters are required Filters Sorting Headers required What you get back when you hit this endpoint Any request limits Examples in common languages JS PHP Ruby 21:20 - Naming Make it obvious 27:39 - Securing Only accept requests from logged-in users oAuth Cookie/Session jwt API key CORS Check roles - access level Syntax 055: Hasty Treat - User Role Systems 32:42 - Protecting Rate limit Whitelist / blacklist Cloudflare 36:00 - Write resolvers Modify data if needed Send back the data requested Send back the correct HTTP code Log what happened 37:56 - Tools Postman Swagger Links Stripe ××× SIIIIICK ××× PIIIICKS ××× Scott: Hoax Podcast Wes: Solar Lights Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify 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

In this Hasty Treat, Scott and Wes talk about Svelte 3 — initial impressions and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 2:16 - What is Svelte? 11:32 - Sapper 13:05 - Svelte Native 14:58 - Questions we have What’s the Typescript story here? How hard would it be to convert a large React app to Svelte? Will Svelte be able to capture the market share it needs to grow and compete? Would you (Wes & Scott) use this? Links https://svelte.dev/examples#hello-world Mustache Webpack Rollup.js Next.js Sapper Svelte Native React Native Svelte - Typescript support Rethinking Reactivity 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

It’s another potluck! In this episode, Scott and Wes answer your questions about deploying applications, the value of Typescript, live coding via Twitch 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 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 1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis. 4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up. 9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.). 13:07 - Q: Do you think Typescript adds value to React, or more complexity than value? When should you choose Typescript for a project? 18:09 - Q: I am in a well known Bootcamp, and as of right now (from what they have taught us) this is what I am working with: HTML/CSS, JavaScript, jQuery, Node, Express, SQL, Auth, MVC, APIs, React, Redux. As we finish off the program, they are going over Java. I do want to learn Java, however I feel like my time would be better spent fine-tuning my knowledge on my stack. And I can learn Java at some other time. Do you recommend that I fully engage with Java and try to absorb some of the basics and fundamentals now, or do you recommend that I take this last month we have here and strengthen my current skills so I do better during my technical interviews? And by the way thanks for everything you do, it helps :) 22:02 - Q: Have you seen the live coding going on at Twitch? Thoughts? Maybe a Syntax stream in the future? There’s a good list at livecoders.dev. Thanks for all you do. Keep killin’ it! 26:11 - Q: How do you handle people (i.e. C# bastards) who think JavaScript is a joke and is going to be overthrown by Blazor or some other C# library framework? Can’t we all just get along and live in the same industry? I’m having a hard time being the adult in these kinds of responses around the web, and in random discussions with people I know very well. 29:55 - Q: There are plenty of places saying that it is important to secure API keys by not embedding them in front-end code. Cool. I’m on board! But there is not many that tell you specifically how to do this. How do you safely use an API key in a CRUD project? 34:15 - Q: Do you plan to launch a Syntax.fm app? 45:49 - Q: I was hired as a junior developer at a company in the last year. It’s my first development job and I was so excited. The interview and application were all about React and fullstack development. However now that I’ve been here a while, I have found out the company does primarily dev ops work. None of this was mentioned in the interview or application, but it looks like soon it will be the majority of my workload. I am feeling very discouraged and was wondering what you guys would do in this situation? Links Develop Denver AWS Zeit Heroku CircleCI Buddy.works Travis CI Gitlab CI Kubernetes VSCode Typescript Blazor Linkedin ××× SIIIIICK ××× PIIIICKS ××× Scott: VIVO Premium Heavy Duty Arm Wes: AmazonBasics Pro-Style Spring Sprayer Kitchen Faucet, Oil-Rubbed Bronze Shameless Plugs Scott: LevelUpTutorials Pro - Gatsby Ecommerce Wes: All Courses - Beginner JS Course Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to i

In this Hasty Treat, Scott and Wes talk about documentation libraries, starting and maintaining projects, how to publish React components to NPM, 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”. Show Notes 2:40 - Create React Library 6:55 - Documentation libraries 10:54 - What I’m building 13:13 - Linking library to projects 14:52 - Improvements and community thoughts Links Rollup testing-library/react-testing-library transitive-bullshit/create-react-library leveluptuts/fresh How To Make a React Component Library - Making A React Library React Styleguidist Storybook Docz DocSource npm-link Yarn wesbos/dump wesbos/Waait 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

In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data 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. 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 3:38 - What is state? 4:58 - What kind of things are kept in state? Data Temporary client side data From forms, button clicks, etc. Cached server data Data from API UI status AKA isModalOpen isToggled 12:48 - Global state vs. Local state Ask yourself: does the data need to be accessed outside this component? If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”. Do you count Apollo API calls as global state? 21:15 - Managing Local state useState, setState Passing state & update functions down State machines 31:12 - Approaches to Global state Redux Complicated, hard to learn Very useful, organized and structured Actions, reducers and more Time traveling do to nature of store Immutability Tons of Redux based hooks libs Mobx Based on Observables An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. Context Functions just work and update global state. Downside is there are no fancy tools Apollo Apollo quires for data in global cache Apollo client for global UI state Not quite there, isn’t super elegant Links Thinkso Learn Node! Meteor Session xstate-react React Context Mobx easy-peasy hype.codes providerCompose.js Relay React Podcast ××× SIIIIICK ××× PIIIICKS ××× Scott: Command Line Heroes Wes: MASSDROP CTRL MECHANICAL KEYBOARD Shameless Plugs Scott: LevelUpTutorials - Gatsby Ecommerce — Subscribe before price goes up! 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

In this Hasty Treat, Scott and Wes talk about remote internet! Remote internet is an important because it opens up living options to developers as the industry moves toward more remote work. Netlify Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info. Show Notes 4:31 - Remote internet options 7:55 - Modems and routers 10:52 - Antennas 13:47 - Boosters 14:54 - Plans, data and speeds 20:11 - Other things to think about Links Deadmau5 house ZTE MF288 Netgear LB1120 Mofi Routers ZBT WE826T Rogers Ubiquiti Networks Tomato Firmware 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

In this episode of Syntax, Scott and Wes talk about blogging — both the specifics of content (how to make great content), as well as the mechanics of where and how to publish blog posts. 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”. 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 7:06 - What are some of the different platforms for publishing a blog? 23:41 - How to structure a blog post? 29:10 - How to direct traffic to a blog post? 38:51 - How do you make technical content in-depth and also succinct? Links WordPress Gatsby Squarespace Netlify Tumblr Medium Hacker Noon Freedcamp Devtoo Smashing Magazine Net Magazine Gridsome GraphQL Vuepoint Next Nuxt Everything I wish I knew running a sole proprietorship business @peterc JavaScript Weekly Cooperpress Seth Godin Overreacted - Dan Abramov ××× SIIIIICK ××× PIIIICKS ××× Scott: Business Wars Wes: Spectacular Failures Shameless Plugs Scott: Level Up Tutorials Pro — Subscribe before price goes up! 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

It’s another VSCode episode! In this Hasty Treat, Scott and Wes talk all the things they love about VSCode — things to learn, how to get around more quickly, using keyboard commands, being more efficient, using snippets 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 and using the coupon code “tastytreat”. Show Notes 2:14 - Things to learn Jump by word, line Select by word Command Palette (cmd + shift + p) Move and copy lines - option up down or with shift Multi cursor Find and replace in files Use the Insiders build if you like updates every day 11:03 - Keyboard commands Cmd + b to hide sidebar Cmd + shift + x 13:55 - Snippets Snippet Generator Get to know defaults as well as tabs Mongo Snippets for Node-js Links VSCode Marketplace VSCode Insiders Build React Snippets JavaScript (ES6) Code Snippets HTML Snippets ES7 React/Redux/GraphQL/React-Native snippets Vue VSCode Snippets Atom Snippets Text Expander 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

It’s another Syntax potluck! In this episode, Scott and Wes answer your questions about remote work, AI agendas, motivation, fitness, the future of coding, and much 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 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:03 - Q: I hear you both talk about “state” a lot in your podcasts. And while I understand a little about it, I never understand it in the context you both use it. Can you enlighten us? 6:52 - Q: I have an idea for a project that is suited for web sockets, push text/images/documents to a bunch of users in real time. I just learned about Firebase’s real-time database, and it looks like it would be pretty easy to implement my idea. What are your thoughts, pros/cons, of these two technologies? 10:42 - Q: How’s your fitness going? 12:15 - Q: Let’s say both of you gents were junior developers that had basic knowledge and skills in HTML, CSS and JavaScript but you had all the experience and knowledge of how to best master those skills and where the industry was heading. What would be the outline and focus of your road-map knowing what you do now? 17:22 - Q: Is it worth it to find a remote dev job at an early stage of your career? Considering the stuff I learn from my seniors and other devs on the team, I wonder if I will lose the opportunity to learn stuff from my team members? 19:49 - Q: How do I keep myself motivated in coding? 22:47 - Q: What’s y’all’s opinion on using some obscure (at least in my opinion) features of a language, such as Javascript bitwise operators, in a production app that dozens of other engineers maintain, and will continue to maintain long after you leave the company? It seems hard to read and immediately understand, which possibly makes it harder to debug/refactor in the future. Is it the responsibility of future devs to learn if they don’t know, or should you find a different way to code the solution in the first place? 26:00 - Q: Wes, I keep hearing you talk about working from your Dropbox. Do you sync up everything? Even things like your node module folders? 29:26 - Q: Have you talked about Firefox Developer Edition? It looks like it should be very useful, but I can’t quite make the transition. 32:58 - Q: Hey guys, what your opinion of CSS naming convention methodologies such as BEM? 35:04 - Q: I would like to refer to the question from ep 140 about fronted development possibly dying. I don’t feel satisfied with the answer, so maybe I could state the question differently: With the machine learning being developed rapidly in recent years, will the web change, causing reduction of front-end jobs? Maybe we will just be training smart algorithms and developing them instead? What do you think? 40:32 - Q: How do you deal with anxiety and fear during interviews that might hinder your ability to give the best impression of yourself or solve coding challenges? Links FeathersJS Syntax 020: Fitness, Nutrition, and Losing Weight Syntax 084: Fitness for Developers Syntax 164: A Story About Kanye West and Learning to Code Syntax 140: Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More! FireBase Slack Dropbox Backblaze FireFox developer edition Brave Wix Squarespace How you can train an AI to convert your design mockups into HTML and CSS How AI And Machine Learning Are Transforming Front-End Development? ××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze Sense Wes: Arthur on CBC kids Shameless Plugs Wes: CSS Grid Course Scott: Gatsby Ecommerce Course, and Dev Tools & Debugging Course 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

In this Hasty Treat, Scott and Wes talk about more of their favorite VSCode tasty treats - extensions, features, keyboard shortcuts and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info. Show Notes 3:45 - Extensions Git Blame Apollo GraphQL VS Code Spell Checker 9:36 - Features Indent lines in explorer - Workbench > Tree Indent & Guides Breadcrumbs Commit all & visual git commands Change branch in lower left Rename Symbol Links Syntax 161: Hasty Treat - VSCode Extensions & Themes Alfred Playlist.js 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

In this episode of Syntax, Scott and Wes talk with Harry Dry about the crazy story behind his Kanye West dating site, how he taught himself to code, and how to come up with cool side projects! 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 and using the coupon code “tastytreat”. 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 2:30 - How did you get into web dev and come up with the idea for the Kanye West dating website? 10:29 - Do you have a background in design? 13:05 - What’s your story? 15:28 - Do you wear yeezys? 36:26 - What made you decide to take this story and make a bit site out of it? What was the plan? 40:45 - How did you learn to code? How did you decide what to learn next? 45:30 - How do you push through hard problems? 48:50 - Any final advice to offer? Links The Kanye Story TheNetNinja @rogerfederer Refactoring UI @GonzoVice Dang That’s Delicious Puck @joerogan Code Academy ChatKit by Pusher @grantimahara Mythbusters @elonmusk Marketing Examples @goodmarketinghq @harrydry ××× SIIIIICK ××× PIIIICKS ××× Scott: BattleBots Wes: Logitech MX Master 2S Wireless Mouse Harry: Twitter Demetricator Harry: CAMP LIFE: BIG JOHN FURY GIVES TOUR OF VINTAGE CARAVAN Shameless Plugs Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Scott: Dev Tools and Debugging and Gatsby and E-commerce 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

In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks! 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. Show Notes 2:03 - Twitter Accounts Scott: HeyDesigner Wes: Mathias Bynens 5:00 - Web Dev Resources Scott: Scotch.io Wes: Webgems.io 7:37 - Design Resources Scott: UI Movement Wes: Creative Market 11:36 - Desktop Tools Scott: Pock Wes: MongoDB Compass 14:59 - YouTube Scott: JSConf stance Wes: Andrew Camarata dotconferences Links Studio3t 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

In this episode of Syntax, Scott and Wes talk about the fundamentals of JavaScript - the set of core skills you should know before branching off into other frameworks, libraries, etc. 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. FreshBooks - Sponsor Get a 30 day free trial of FreshBooks at FreshBooks and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:07 - Variables + Scoping var/let/const Block scope Function scope Scope lookup 6:06 - Types Objects Reference vs. copy 7:15 - Functions Types of functions Anonymous vs. named Expressions Arrow functions Methods 9:33 - DOM Selecting Updating Creating 15:07 - Prototypes + this this Objects 20:16 - Events Listening, callbacks dispatchEvent Bubbling 22:05 - Arrays Push, pop, manipulate Spread, rest Map, filter, reduce Arrays vs. objects Mutation vs. immutable 26:25 - Flow control Looping If Promises + Async + Await 29:47 - Security and accessibility XSS and innerHTML 32:04 - Things you should know, but not necessarily master Modules Closures Ajax requests 35:26 - Clean code Clean Code Javascript Links Syntax 043: 20 Javascript Array and Object Methods to make you a better developer Syntax 141: Hasty Treat - Async + Await Error Handling Strategies Syntax 072: Accessibility ××× SIIIIICK ××× PIIIICKS ××× Scott: BaseCS Wes: Owlet Baby Monitor Shameless Plugs Scott’s new E-Commerce and Gatsby Course Wes’ 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

In this Hasty Treat, Scott and Wes talk about everything they love regarding VSCode: themes, fonts, extensions, techniques and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info. Show Notes 3:18 - Theme Cobalt 2 SyntWave '84 4:58 - Fonts Dank Mono Operator Mono 7:12 - Five things we love Wes: Bracket Pair Colorizer Permute Lines, Unique Lines Breadcrumbs Toggle Quotes Snapshot Tools Scott: Better Comments Import Cost Ctrl+Click Go To Definition Wrap Console Log Simple Git History 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

In this episode of Syntax, Scott and Wes talk with Jason Bahl (author of WPGraphQL) about GraphQL, headless WordPress, frameworks in WordPress, React in WordPress, 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. 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. Show Notes 4:55 - Data in WordPress 6:26 - WPGraphQL 10:31 - What were your initial thoughts/first experiences with GraphQL? 16:58 - Does it use MySQL queries or wpQuery? 19:36 - How does authentication work? 24:38 - What does the WP local dev experience look like in 2019? 26:49 - What about deployment? How do you handle migrating data? 30:10 - How does WPGraphQL handle mutations? 32:46 - What are the preferred hosting methods for a headless WordPress setup? 36:44 - Do you see any push back about giving up much of what WordPress gives you out of the box? 41:23 - What are techniques for preventing all of WordPress from loading When you’re using it exclusively for the API? 43:40 - How does WPGraphQL support custom post types, taxonomies and fields, etc? Links WPGraphQL Kyle Mathews GraphQL Gatsby WordPress Meteor Apollo GraphQL GraphiQL WPGraphiQL WAMP Flywheel Local by Flywheel PhpStorm Lando Laravel React Netlify Jason Schuller Leeflets Press75 Advanced Custom Fields WPGraphQL Tax Query WPGraphQL Meta Query WPGraphQL for Advanced Custom Fields Jason’s Twitter WPGraphQL Twitter ××× SIIIIICK ××× PIIIICKS ××× Scott: Figma Wes: CalDigit TS3 Plus Thunderbolt 3 Dock Jason: Local by Flywheel Shameless Plugs Scott’s new course - Dev Tools & Debugging Wes - All Courses - Use the coupon code ‘Syntax’ for $10 off! Jason - WPGraphQL Jason - Gatsby 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

In this Hasty Treat, Scott and Wes talk about front end security and what to do in order to avoid hacking. 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 and using the coupon code “tastytreat”. Show Notes 2:53 - SSL Encrypted transfer of information Digitally binds a cryptographic key to an organization’s details Web-cam, geolocation, etc. 6:15 - innerHTML React’s dangerouslySetInnerHTML Name intentionally chosen to be frightening Allows you to write HTML to the DOM Data should be sanitized before used in prop Removes unexpected data from string Used to prevent cross site scripting attacks 10:25 - Don’t trust the client The client can be manipulated to send any info to your server E-commerce example — don’t take the price total from the front end to make the charge, DB call and calculate on the server Validate form inputs via HTML 5 field validation/check data types on the server Don’t allow your users to send an object when it should just be a string Get this for free with GraphQL via types 13:41 - PCI Compliance Protect card holder data SSL or Secure iFrame Encrypt transmission of card data Restrict access to card holder data Restrict physical access Front of front-end 16:44 - Tips Don’t put a name on sensitive fields if you are using JS HTTP only cookies Local Storage tokens XSS Links React GraphQL Express 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

In this episode of Syntax, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations 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 and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:54 - Learning fundamentals vs framework specialists Learning vs getting a job Abstractions work well until they don’t and you need to debug them HTML 7:58 - Semantic markup 9:15 - Accessibility basics 9:57 - Attributes CSS 16:13 - Specificity 22:42 - Selectors 24:52 - Layouts 27:53 - Box model 32:50 - Positioning 36:42 - Forms and inputs 40:45 - Block vs inline vs inline-block 43:09 - Sizing units 44:40 - Typography 47:53 - Media Queries Links Interviewing candidates with a lack of fundamentals - Tweet Jean-Philippe Sirois Tweet Syntax 72: Accessibility Syntax 107: Hasty Treat - CSS Units ××× SIIIIICK ××× PIIIICKS ××× Scott: I Think You Should Leave with Tim Robinson Wes: Forearm Forklift Lifting and Moving Straps Shameless Plugs Scott’s new course - “Debugging and Dev Tools” Wes’ 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

In this Hasty Treat, Scott and Wes talk about headless CMSs - why to use them, how they work, pros and cons, examples 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 and using the coupon code “tastytreat”. Show Notes 2:11 - What is a headless CMS? It’s a system or CMS that has no front-end (aka head) Allows you to use front-end specific tech (static generators/front-end frameworks) instead of the back-end to generate pages 4:37 - Some examples Can be used with any type of website that can consume an API WordPress API + Gatsby Hosted Service + React App 7:06 - Why? Separation of concerns - your data is in a single spot, and can be pulled into any app, website, marketing micro site, etc. Keeps ergonomics of WordPress or $CMSHERE, while developers get to use what they like Optimizes for performance with static builds Hide the implementation details and back-end from view 10:19 - Live vs statically-generated website Syntax 120 - Gatsby vs Next 10:55 - How? Connects to API via normal fetch calls/GraphQL/whatever you use Needs to host your back-end either as a service or on a host Needs to host your front-end either on the same server as your back-end or on something specialized like Netlify Links WordPress Sanity.io React Syntax 120 - Gatsby vs Next Netlify GraphQL Cobalt Gatsby.js Drupal Next.js Nginx 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

It’s another potluck! In this episode, Scott and Wes answer your questions about career changes, preprocessors, moving, “the gap”, hip hop 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 and using the coupon code “tastytreat”. 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. Show Notes 1:54 - Q: I am 33 with a wife and two young daughters, and am trying to change careers. My job pays $80,000 a year, but I hate it. My wife is ok with me doing university, but she wants me to stay at the job I don’t like. Should I stand my ground? Any tips on achieving my goals to make me happy, but also keep my family happy? 10:10 - Q: What is your advice to very junior/junior devs in writing cover letters for jobs? I wonder what to say without sounding canned and fake. 14:35 - Q: Scott, what was the stack you were using at Ford? 17:09 - Q: Other than reading the docs, how do you guys go about learning/trying out new technologies? Do you rebuild similar applications or pick out individual features you think are “sIcK”? 22:32 - Q: Is it always necessary to use setState in react when storing data (for example, a form input) even if you don’t intend on re-rendering the page, or can you get away without using state? 25:04 - Q: Development has a stereotype for being a young person’s game. As someone who started their career out of university, I often wonder how long I can sling divs for? Do you think you could make it to retirement age or do you think the game will change out from under you? 30:34 - Q: Scott, you’ve mentioned you love hip hop. Would you be willing to share any playlists of your all-time favorite hip hop artists? 32:08 - Q: What are your thoughts on HTML pre-processors? If you use one, which one(s) do you prefer and why? 36:04 - Q: What advice would you have for someone considering to “level up” their career by moving from a city with few tech jobs to a city with more opportunity for tech jobs? What are some of the biggest things to consider when moving possibly cross-country to further a career? 42:11 - Q: What are your recommendations in terms of resources for first time dads (and moms) like books, podcasts, etc. and generally good co-parenting advice for working professionals? 46:45 - Q: Loved the show with Travis. Had a question about “the gap”. Similar to design ambitions/taste surpassing current skill, when did you feel like your code had “grown up” and that you could actually DO what you envisioned with Javascript? Links Syntax 044: How to Learn New Things Quickly Scott’s Spotify playlist - “Rap Music To Code To = Level Up Tutorials” Scott’s Spotify playlist - “Golden Era” Scott’s music picks Apache - Apache Ain’t Shit MF DOOM - MM…Food Kendrick Lamar - To Pimp A Butterfly GZA - Liquid Swords Gang Starr - Daily Operation Slick Rick - The Ruler’s Back Redman & Method Man - Blackout Q-Tip - The Renaissance Enter The Wu-Tang (36 Chambers)[Expanded Edition] - Wu-Tang Clan Pete Rock on Spotify Preemo on Spotify Codeland Conference Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google ××× SIIIIICK ××× PIIIICKS ××× Scott: Oculus Quest All-in-one VR Gaming Headset Wes: Marpac Rhom Portable White Noise Sound Machine Shameless Plugs Scott’s new course - “Dev Tools and Debugging” Wes’ 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

In this Hasty Treat, Scott and Wes talk about pushing yourself in uncomfortable areas to grow as a programmer, be a better developer, and become more efficient in general. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info. Show Notes 3:50 - CCS Preprocessor parable 6:09 - Efficiency 10:40 - When to learn new systems 13:03 - Common pain points 14:42 - Pushing yourself to foster growth 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

In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG! 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 and using the coupon code “tastytreat”. 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. Show Notes 6:05 - What are SVGs? It’s an image you can edit 16:17 - Icon fonts Better tools Fails in certain areas SVG sprite icons Grunticon 24:24 - SVG files / Build tools SVGO / SVGOMG 31:50 - Where to find SVGs Noun project Exporting from Sketch/Illustrator/Figma Freepik Iconmoon 33:48 - What is the viewbox? 40:39 - Animating SVG 43:41 - Accessibility & text with SVG 45:44 - Graphing with SVG D3.js 47:58 - Filters Links Font Awesome Grunticon Grunt gulp.js React Vue.js Sketch Illustrator Figma imagemin gulp-imagemin Gatsby.js gatsby-plugin-sharp jakearchibald/svgomg Noun Project Freepik Icomoon GreenSock Snap.svg SVG Animations: From Common UX Implementations to Complex Responsive Animation By Sarah Drasner Codrops D3.js ××× SIIIIICK ××× PIIIICKS ××× Sara: Netlify Wes: Wise Contact Sensors Shameless Plugs Sara’s Website & Workshop Dates Wes’ 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 Sara’s Twitter