955: SvelteKit has solved data loading

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

24 Jul 201957min

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

22 Jul 201921min

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

17 Jul 201944min

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

15 Jul 201919min

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

10 Jul 20191h 4min

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

8 Jul 201920min

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

3 Jul 201956min

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

1 Jul 201917min