All About CSS Grid

In this Hasty Treat, Scott and Wes continue a three-part series about old browsers, fallbacks and polyfills. In part two, they talk specifically about CSS Grid, Flexbox, new features and fallbacks, and how to use them. VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5. Show Notes 3:08 - CSS Grid and Flexbox Flexbox old spec Flexbox new spec CSS Grid Some popular options for supporting for supporting CSS Grid and/or Flexbox: Just serve the mobile layout Display block Separate layout that you will eventually delete Can I Use Do websites need to look exactly the same in every browser? Modernizr CSS3, Please! Autoprefixer 12:38 - CSS Variables Double define Just like Grid, unknown def will be ignored and fallback to CSS CSS Houdini 17:00 - Fallback Code @supports Display block then display grid Feature Testing Detect the browser as a last resort 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 Okt 201822min

In this episode Wes and Scott discuss fitness for developers. As a follow-up to Episode 20, they talk about the status of their fitness goals from that episode, what’s worked, what hasn’t, and how you can be more fit yourself in 2018. DevLifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! 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:30 Why is fitness important as a developer? 6:08 Working Out Update: Wes 14:37 Working Out Update: Scott 25:06 Nutrition Update: Wes 35:12 Nutrition Update: Scott 45:40 Supplement Update: Wes 48:00 Supplement Update: Scott 52:18 Plans for the future: Wes 54:53 Plans for the future: Scott ××× SIIIIICK ××× PIIIICKS ××× Scott: Fitness Blender Wes: Dr. Peter Attia - The Drive Podcast Shameless Plugs Scott’s Level Up Pro Wes’ Advanced React 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

17 Okt 20181h 2min

In this Hasty Treat, Scott and Wes kickoff a three-part series about old browsers, fallbacks and polyfills. In part one, Scott and Wes talk specifically about old browsers, how best to support them, and whether or not you should support them at all. VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5. Show Notes 5:10 - How do you decide if you should support an older browser? Google Analytics Data User base / Money earned from that audience IS it worth it? Time vs Money? 11:35 - How do you test your websites and app in older browsers? Actual hardware - there’s no substitution for the real thing Browser Stack Virtual Box Modern.ie Can I Use 18:24 - Supporting and Testing Mobile Browsers Resize your browser Build a device lab Remote Debugging Browser device view Faking Geolocation Emulators in XCode / Android dev tools Browsersync Ghostlab 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 Okt 201828min

In this episode Wes and Scott continue the discussion of their favorite top 18 new things in Javascript. 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. Graph CMS - Sponsor GraphCMS is trying to be the world’s most developer friendly CMS. It’s a great way to build a GraphQL API without having to write a custom GraphQL server. Try out the API-first CMS of the future today at graphcms.com/syntaxfm. Show Notes 3:30 Spread 8:40 Rests 11:54 Arrow Functions 15:48 Default Function Arguments 19:47 Named params 21:26 Modules 35:35 Classes 41:54 Things we never use Links Jake’s Minesweeper ××× SIIIIICK ××× PIIIICKS ××× Scott: Trader Joe’s Everything by the Bagel Sesame Seasoning Blend Wes: Trader Joe’s Green Dragon Hot Sauce Shameless Plugs Scott’s Better Javascript Course Wes’ ES6 For Everyone 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 Okt 201853min

In this Hasty Treat, Scott and Wes talk about this year’s Hacktoberfest - a great way to support open source. NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax. Show Notes 2:42 Hacktoberfest - The rules 7:35 Things to PR 12:56 Things not to PR 18:05 How Pull Requests work 21:45 Some of our repos Wes’ ES6 course blog posts Syntax Show Notes KeyCode.info CSSCursor.info 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 Okt 201825min

In this episode Wes and Scott discuss their favorite top 18 new things in Javascript. 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. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com. Show Notes 6:02 Const / Let 10:00 Template literals / Template strings Toggle Quotes Extension Prettier 14:29 Object destructuring 21:28 Array destructuring 27:25 Function Param destructuring 30:14 Promises Wes’ Async + Await Talk 36:24 Async + Await Syntax Ep 028 - Async + Await 40:59 Object Computed Property Name 43:42 Object Method Syntax Links Denver Startup Week ××× SIIIIICK ××× PIIIICKS ××× Scott: Red Bull VC One World Final 2018 Wes: Jura Impressa Shameless Plugs Scott’s Better Javascript Course Wes 1: CSS Grid in 45 Minutes Wes 2: Async + Await Talk 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 Okt 201851min

In this Hasty Treat, Scott and Wes are back for a second edition of Stumped! where they try to stump each other with interview questions from 30 Seconds of Interviews. NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax. Show Notes 5:05 What are defer and async attributes on a script tag? 7:15 What are the differences between var, let, const and no keyword statements? 8:45 What is a callback? Can you show an example using one? 9:52 What is recursion and when is it useful? 12:06 What is the difference between the array methods map() and forEach()? Syntax Ep 023 14:02 What is Big O Notation? 15:28 What does 0.1 + 0.2 === 0.3 evaluate to? wtfjs 17:44 What is CSS BEM? 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 Okt 201822min

It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:33 - Would you ever consider doing a live Syntax show? Yes! Get tickets at JAMstack_conf 4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now? Google’s answer to React Native. Flutter NativeScript 9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation? Not cool. Always do server-side validation. Netlify Cloudflare 14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project? Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura) 21:51 - What are your thoughts on 100 Days of Code Challenge? Consistency and accountability. The best way to get good. 100 Days of Code 25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React? Dynamic vs static. What are your needs, how often does the content change. Next.js Use for dynamic needs It can do static exports too Convert to markdown Nothing special other than Routing and SSR (Server request getInitialProps) Gatsby.js Use for static needs Gatsby has lots of adapters 30:38 - What are websockets and when should they be used? A request that is always open - it responds to events instead of pinging, pushing or pulling data 35:15 - I would love to hear your take on PWAs. Do either of you have any experience with building or using them? Syntax Ep 50 - Progressive Web Apps 40:16 - I’m a nervous newbie who’s concerned about doing a web app that accepts payments or sensitive information. How can I know I’ve done everything to create a secure website and also protect myself from being sued by the client if their website gets hacked? I’m trying to be a jam stack developer so I’m looking at things like Snipcart and Stripe Don’t save sensitive info in plain text. Use services that make it tough to do that until you are confident. Look up PIPEDIA 43:23 - What is a JavaScript generator? I heard that async/await creates a “generator” under the hood. Pausable function that can return multiple values - call .next() on it 46:54 - Are web components worth it in 2018? Web Components Polymer Svelte 49:52 - How soon the designers replace React Developers with the invent of tools like Framer X? Not soon. Your job is changing and will continually change SouthPark - They Took Our Jobs! 56:52 - Have you, or anyone you know ever thought of quitting the industry because of difficulties you have run into? ××× SIIIIICK ××× PIIIICKS ××× Scott: EGO Lawn Tools Wes: B is for Build YouTube Channel Shameless Plugs Scott’s Level Up Pro Subscription Wes’ Advanced React 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

26 Sep 20181h 10min