Potluck — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × More!

In this special Hasty Treat, Scott and Wes answer your questions about money, investments, online presence 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 https://logrocket.com/syntax. Show Notes 2:33 - Besides coding/teaching, do you have any another source of income (stocks, bonds, crypto, etc.)? 9:03 - How do I build my online presence? 13:05 - What’s your favorite tasty treat (as in actual food)? 16:33 - Wes, lets talk about the + symbol that you use to start the prompt for Cobalt2 — whats up with that? 18:41 - How do you get out of a rut? Links Canadian Couch Potato 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

29 Huhti 201923min

In this episode of Syntax, Scott and Wes talk about what’s new in web development: new promise static methods, new CSS functions, PWAs 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”. Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free. Show Notes 5:38 - New Promise static methods Promise.all Promise.race() Promise.allSettled() Promise.any() 10:16 - Lazy loading images Addy Osmani’s Lazy-Loading blog post 14:25 CSS Houdini aka JS in CSS CSS Houdini Experiments 20:32 - Subgrid Syntax 109: Hasty Treat - CSS Grid Level 2 aka Subgrid Subgrid is coming to Firefox - Jen Simmons Bugzilla 24:31 - Native modules in browser type="module" dynamic import() 27:08 - Node Native Modules update package.json will now have a type entry where NodeJS - Plan For New Modules Implementation New ESM Implementation 29:17 - PWA install app and Google PlayStore Already shipped in Chrome Java API that communicates through services with Chrome Trusted Web Activity aka TWA All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods Already existing TWAs include Twitter Lite, Google Maps Go, Instagram Lite Passing the PWA Criteria Performance Score with a minimum of 80/100, tested with Lighthouse All current Google Play Store rules 35:49 - CSS Scroll Snap In many browsers already scroll-padding 38:17 - Aspect Ratio Unit Designing An Aspect Ratio Unit For CSS 39:32 - CSS nesting Disallows cross-domain cookies unless on the same domain/subdomain Links Gatsby Promise.allSettled() Promise.any() Apollo CodePen UC Browser Parcel Node.js Myles Borins’ Twitter Twitter Lite Google Maps Go Instagram Lite Lighthouse Opera Can I Use - modules Apple’s ITP ××× SIIIIICK ××× PIIIICKS ××× Scott: Finding Drago Wes: The Punk Rock MBA Shameless Plugs Scott’s Gridsome Course 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

24 Huhti 201949min

In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they’re important, and when (and when not) to use them. Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm. Show Notes 2:52 - What is a CSS framework? Pre-written CSS that takes over the basic styling of your app Can include just utilities or lots of styles (minimal to overboard) Twitter Bootstrap and Zurb Foundation were the pioneers Follow different CSS styles from “functional CSS” to utility-first to BEM 7:33 - Functional (aka Utility) based Tachyons Tailwind 9:59 - Preprocessor based Bootstrap 11:33 - Styled Components based Rebass Styled Systems Facepaint 15:50 - Why use one? Makes styling FAST Makes hard things easy Some, like Bootstrap, have themes Keeps your own CSS minimal and organized Built on an established system Lots of people use the same CSS 19:22 - Why not use one? CSS class hell Stops you from learning how CSS works Size (not all have this problem) Brotli, Purify CSS You will be overriding a ton of it You like exclusively writing the code you need and nothing else Links Jamstack Gatsby Hugo Jekyll Bootstrap Foundation Tailwind CSS Tachyons Styled System REBASS Facepaint Brotli Purify CSS Cloudflare 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 Huhti 201927min

In this episode of Syntax, Scott and Wes talk about working remotely — problems, challenges, and how to keep yourself sane, productive and efficient. 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 https://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 4:34 - Find your spots Coffee shops Cafes Library 7:40 - Deal with Distractions Log out of Twitter/Facebook/Instagram Delete Apps — only use the browser Put phone and computer on “do not disturb” Focus App 11:33 - Prioritize your tasks Drifting is possible when it isn’t clear what you need to do If you don’t have someone telling you what to do, it can be hard to get started Todo lists 17:15 - Make time to be social Go to meet ups Chat in Slack or Discord rooms Talk to people at work spaces 21:48 - Get fresh air Go for a walk Open the windows 24:03 - Get moving Hit the gym Do push-ups in your office 28:09 - Have a separate work space Designated office Don’t work from the couch with the TV on Clean your damn office 😂 38:16 - Act like you are going to work Dress well Fix up, look sharp - get yourself ready to go 40:44 - Take Breaks (not too many, not too long) Some people like the Pomodoro Technique Take a lunch break away from your computer Don’t make a break longer than 15 minutes or so Links Focus Discord Todoist Getting Things Done Eat That Frog The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing ××× SIIIIICK ××× PIIIICKS ××× Scott: Doug DeMuro’s YouTube Channel Wes: Yeti Rambler 14 oz. Shameless Plugs Scott’s Gridsome Course Wes’ YouTube Channel 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 Huhti 201951min

In this Hasty Treat, Scott and Wes talk about cranky developers — those devs who never seem happy about anything, always mad about tech choices, and constantly writing off any new tech as simply a “fad” or unnecessary. 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:20 - How to deal with cranky devs Many experienced developers prefer older, stable technology for a reason. They have been through it before. 7:14 - Questions to ask when considering new tech: Is it better for the product? Is it better for the users? Is it better for the business? Is it better for the developer? 16:39 - How to convince them: Proof of concept - show them it’s better. 18:28 - Things to acknowledge: There are risks in changing technologies. There are costs - training, tooling, hosting. 21:20 - Some people are not interested in improving themselves They got the job they want and are short sighted about the future. You can appeal to management about making progressive choices. If management isn’t interested, you should look for a new job. Links Sass Backbone Babel Gulp Babel ES6 React for Beginners Missive Swix React Flux Glamorous PayPal GraphCool Facebook Netflix MJML Juice 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 Huhti 201924min

It’s another live episode of Syntax in which Wes and Scott do Hook’d on Hooks, Who’s Snackin’ on React, Stump’d, Unpopular Opinions, Q & Eh, 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”. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com. Show Notes 6:54 - Who’s Snackin’ On React Guess which of these websites have their homepage partially or fully built in React? EltonJohn.com or ArianaGrande.com? Ferrari.com or Lamborghini.com? Starbucks.com or Dunkindonuts.com? WayFair.com or Ikea.com? Walgreens.com or Cvs.com? 10:55 - Hook’d on Hooks Wes: useSocket useStaticQuery (gatsby) useKeyPress Scott useLocalStorage useClickOutside useMeasure useGesture 17:47 - This, That, Both, or Neither? Gutenborg: A WordPress GUI plugin for creating react-based gutenberg blocks, or a 90’s budget TV show about Cyborgs who read? Nashorn: A Java based JavaScript engine developed by Oracle, or a popular rock climbing spot in Portland? Easy Peasy: A React state library, or children’s spoon set? Use Boxmen: A hooks library that gets box model dimension, or a puzzle-based strategy game for children? Toggs: A lightweight styleable toggle component, or rain resistant outdoor gear? Landwind: A set of React components for using the Tailwinds CSS Library, or a Chinese Knock-off Land Rover SUV? Freeflow: A redux-like state management library built on state, context and hooks, or a California-based hot tub company? Ubergrippen: A popular rock climbing spot in Denver, or a client-side video stabilization framework built on the filereader API? 26:22 - Tag Team Coding React Fetch Data from the data jokes API Show a loading indicator Have a button to fetch a new joke 36:24 - Stump’d What is a react PureComponent for? Why might you use a callback with setState? How would you reverse an array without mutating the original array? Can you explain what a “downtown job” is? When would you use useReducer? What makes useLayoutEffect different from useEffect? What propType would you use for an object that contains a number and a string 43:11 - Unpopular Opinions. Overrated, Underrated? Our own unpopular opinions Scott: React devs like to make things harder than they need to be. Dan Abramov Ryan Florence Sebastian Markbage Jared Palmer Sean Thomas Larkin Sergey Ryzhov Sophie Alpert Parker McMullin Vue does it better _____ 52:45 - Q + EH with Wes and Scott What where the first apps you worked on? What React problem stumped you for the longest time? What’s your most expensive mistake? Do we need classes in Javascript? How do you explain what you do to your mom? How do you explain React? What made you start wanting to code? What’s the hackiest thing you’ve ever done? Where do you see yourselves in 10 years? 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 Huhti 20191h 6min

In this Hasty Treat, Scott and Wes talk about portfolios - best practices, organization, and how to use what people are looking for to stand out in the right ways. 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:21 - Include screenshots (or don’t). Often clients can ruin a site after you hand it off. 6:19 - Include list of technologies used 7:25 - Include list of problems solved 7:48 - Use company logos (if allowed) 9:13 - Show mockups on modern laptops/phones 10:04 - Show your work (mockups, sketches, layouts, etc.) 11:39 - Keep it updated 12:10 - You don’t need a million examples — max out somewhere around five. People just need a few quick examples of the type of stuff you work on. 14:11 - What about using side projects and tutorials? 16:28 - Dribbble, Github and Instagram are all valid portfolio options as well — often that is the first place people look. Don’t ignore these. A hot stuff profile on any of these will make you more hireable. Make sure it’s creative and looks nice. Links Wordpress Google Ford Air Canada Dribbble Github 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

8 Huhti 201920min

It’s another potluck episode in which Wes and Scott answer your questions! This month - interview questions, headless CMSs, resume design, redux vs context, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:21 Q: Are there any tutorials you would recommend to learn more computer science related knowledge (algorithms, closures, etc.)? 5:12 Q: Do you have any suggestions for picking a headless CMS? 8:55 Q: Do you have any advice for someone in a customer service background seeking a more flexible job with remote work opportunities? Resources? Is this a realistic goal or a good way to approach my job search? 15:13 Q: How much importance would you place in the design of a resume? Is it worth the cost? 21:09 Q: With the new React Hooks and Context API, do we still need Redux? 25:37 Q: If either of you could change anything about your personal tech stack, what would it be and why? 29:07 Q: Do you prefer to use React’s defaultProps or plain JS default function parameters to give your component’s props some default values? 30:44 Q: You guys chat CMS sometimes - why no love for Umbraco? 35:53 Q: I’m ready for a new challenge, how do I break this to my employer? 38:16 Q: What’s the difference between const add = (a, b) => { return a + b } and function add (a, b) { return a + b }? Links Udacity Coursera Contentful Ghost Prismic Strapi HeadlessCMS Sanity WordPress Drupal ××× SIIIIICK ××× PIIIICKS ××× Scott: J.A. Henckels International 10-piece Capri Granitium Nonstick Cookware Set Wes: IRWIN VISE-GRIP 2078300 Self-Adjusting Wire Stripper, 8" Shameless Plugs Scott’s Gridsome Series Wes’ YouTube 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 Huhti 201949min