In this episode of Syntax, Scott and Wes talk with Jerome Hardaway about web dev, vets who code, diversity in tech, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. 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”. Guests Jerome Hardaway Show Notes 01:50 - Captain America of Tech 03:25 - Where do you work and what type of stuff do you work on? 08:03 - What was your introduction to programming? 15:46 - When did you start Vets Who Code? 24:13 - What is the stack behind Vets Who Code? 29:56 - How do you help prep vets to get jobs? 41:32 - How can you be an ally and amplify black voices in tech? 50:05 - Everybody against racism Links Vets Who Code Quicken Loans Eventbrite Animate.css Laws of UX react-spring General Assembly Code Bootcamps uses.tech keycode.info Tech Talent Pipeline @vetswhocode ××× SIIIIICK ××× PIIIICKS ××× Jerome: 1: HBO’s Watchmen 2: https://vidr.io/ Scott: Explained on Netflix Wes: Jeremy Fielding YouTube Channel Shameless Plugs Jerome: Vets Who Code Scott: Design Systems with CSS Variables - 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 

Syntax - Tasty Web Development Treats

Jerome Hardaway + Vets Who Code

In this Hasty Treat, Scott and Wes talk about forms, captchas, dealing with malicious users, 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 02:00 - So you made a form: Contact form Sales form Email signup for newsletter Bug report Sign up for an account Password reset 03:00 - Now someone is going to: Have a bot that submits it Maliciously write a bot that submits thousands 04:14 - So what can you do? 4:54 - Honey pot This is a field that is either hidden or you tell the user not to fill in Can goof up autofill Works in many cases 07:37 - IP Throttle Only allow each IP to do an action a certain number or times inside a window You may only try signing up once per 10 mins 09:48 Block known ASN 12:37 - Captcha Soft captcha: “What is 1 plus 1?” Annoying captcha: Type these letters Google captcha: Train our self driving cars Hidden captcha Cloudflare hCaptcha Links Cloudflare Digital Ocean Google reCaptcha Cloudflare hCaptcha Cloudinary 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 

Hasty Treat - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms

 In this episode of Syntax, Scott and Wes talk about what they wish existed in React! DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY. 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 React 03:53 - Unmount delay for animation 06:20 - Suspense with SSR released (or not because I think they are shelving it) Dan's tweet: https://twitter.com/dan_abramov/status/1259614150386425858 09:24 - File based components Like Svelte and Vue This would look like a file with a special scoped tag per page. 11:50 - Prevent Default shortcuts 13:00 - No more useIsoLayoutEffect useLayoutEffect on SSR should just work without a custom hook Simple data fetching strategy based on promises 15:52 - Recommended hooks E.g. "here is the best way to do things" Official list of best practice hooks 18:25 - A good form strategy Bind inputs to state directly without any change handlers Inputs and forms all around need more magic - it's painful 20:43 - Write once deploy everywhere Not likely ever E.g. automatic transformation into react-native (obviously not going to happen) 22:28 - Compile time directives https://github.com/bukharim96/directive-x 25:11 - Slots instead of children Allows for things like named slots more explicit than children JSX 26:44 - Removal of htmlFor, className and all other abominations of html 29:09 - Import Raact from React for JSX to work Soon will be fixed https://github.com/babel/babel/pull/11154 react-require 32:31 - Better conditional / if statement syntax 33:09 - Fragments by default Just do it for us - the error message already knows 33:54 - Automatic key ids If mapping an object, check for common _id or id 36:36 - Simple scoped CSS built in 37:29 - Short hand for props with same name is prop={prop} 39:00 - Prop interpolation without backticks: name="$first $last" Or just backticks without brackets name=${first} ${last} instead of name={${first} ${last}} Tooling 39:43 - Story for typescript/prettier/babel 40:11 - Automatic a href client side routing 41:51 - Scaffolding and component generation Links Svelte Vue React Native NativeScript react-spring Paul Henschel Scream Sneeze: https://twitter.com/morganc_smith/status/1235332301044801538 ××× SIIIIICK ××× PIIIICKS ××× Scott: Software Engineering Daily Podcast Wes: PicQuic Screwdriver Shameless Plugs Scott: Sapper For Everyone - Sign up for the year and save 25%! Wes: Wes' New Gatsby Course - 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 

Our React Wish List

In this Hasty Treat, Scott and Wes talk about rural and mobile internet — options, tools, and things to be aware of. 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 05:04 - Satellite High latency Satellite congestion Oneweb Starlink 08:43 - WISP Can be different techs - LTE, LOS, Long range WiFi Local towers put up in town 900mhz, 5 + 2.5gz Pretty cowboy 12:09 - Cellular LTE Goes over the cell signal Can be super fast or slow depending on your reception Cell plans can be rate limited 12:52 - Routers WE826-T2 Rooter / Golden Orb / Wifix Based on Open WRT https://www.ofmodemsandmen.com/ Nighhawk M1 ZTE MF288 17:03 - Modem Two types of modems: Host modems PCI-e / M2 Cards Sierra Wireless AT Commands Band locking Enable carrier aggregation Get detailed values on modem power See cell tower IDs 23:16 - Antennas Omni Yagi Gotta get them high Lots of connectors - Type N, SMA, RP SMA 25:47 - Boosters Adds noise 26:04 - Plans Some plans are phone only Some plans are tower restricted Most Hot spot plans are a rip off Calyx Institute Canada: Bell Internet Five Telus Smart Hub 29:27 - Speeds Depends on tower, congestion Depends on pre paid, post paid or first responder Depends on if you hit the cap or not 30:15 - Tools: Cell Mapper LTE Hacks Facebook group LTE Fix website Links Syntax 169: Hasty Treat - Remote Internet 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 

Hasty Treat - Rural and Mobile Internet Revisited

It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. 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 01:37 - Q: Why does React bill itself as a library instead of a framework? 03:14 - Q: Are y’all still using Firefox now that it has been six months? 06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace! 09:34 - Q: Who would win in a thumb war, Wes or Scott? 10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache. 14:53 - Q: Should I start a new project with jQuery or React? 17:21 - Q: I’m a young teen (60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management? 42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it? Links React Firefox Brave CodeSandbox VS Code in the browser CodePen Source Making Design Patterns Figma Auto Layout ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Myths and Legends Podcast 2: Fictional Podcast Wes: Parchment Paper Baking Sheets Shameless Plugs Scott: Sapper For Beginners - Sign up for the year and save 25%! Wes: Beginner JavaScript Course - 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 

Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War × More!

In this Hasty Treat, Scott and Wes talk about CSS functions, what they are, how to use them, 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 02:13 - attr() 04:14 - calc() 06:05 - :is() 07:20 - sin, cos, tan, acos, asin, sqrt, pow 08:52 - clamp() 12:13 - minmax() 14:24 - fit-content() 15:35 - filter blur() grayscale() sepia() opacity() contrast() url() Links https://twitter.com/wesbos/status/1256229763225657348/photo/1 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 

Hasty Treat - Some Neat CSS Functions That You Should Know About

In this episode of Syntax, Scott and Wes continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:17 - Typing Take an online typing test or skills - https://www.keybr.com/ 07:02 - Bash / Terminal WSL What directory am I in? SSH How to copy / paste / remove files and folders z Nice prompt (ZSH or fish) Know how to get out of VIM/VI and how to use it for fast editing Know how to make an alias 13:19 - Text editors Command Palette Keyboard shortcuts (just look them up!) Click through to source Multiple cursors Find/replace master Find and replace across files 18:37 - Regex Regex101 https://regexone.com will teach you just enough 22:03 - OS Basics Switching apps Unzipping File organization Searching for/in files 28:50 - Googling Learn how to google well What words to use and what not to Basic operators “-”, ", Use Reddit: for opinions Add dates - example: Library has been out for 6 months, and you can filter out 33:08 - Navigating GitHub Explore for finding interesting projects and creators Know how to clone a repo Create repo and push to it https://octolinker.now.sh/ to click through to files Use Octotree to navigate 36:20 - Navigating source View source Where to start in a repo (ie the entrance to a project) Most code repos are easier to read and understand than you give yourself credit for - it will improve your code reading and parsing skills Access to the minds of other developers 37:31 - Knowing how to pick the right dev tools pane Is it network based? Does it happen once you click something? Toggling CSS on/off When console logging makes sense vs using a better tool Links TypingTest.com Wes’ Command Line Power User Karabiner BetterTouchTool Alfred ××× SIIIIICK ××× PIIIICKS ××× Scott: The Fabric of the Cosmos Wes: Cosmonaut Stylus Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets 

The Fundamentals Leftovers - Terminal, Shortcuts, View Source, Github + More!

In this Hasty Treat, Scott tells Wes about his new Linux laptop — what it is, why he did it, pros and cons, 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 01:38 - Why? 04:20 - What is System76? System76 Lemur Pro 08:53 - What is Pop OS? Pop OS 09:41 - How has Linux compared to Mac? Pop OS is a great distro with lots of features, but command line knowledge is still necessary 10:07 - I can still run: Alfred Figma VSCode DaVinci Resolve Zoom Brave Chrome Firefox 10:43 - I can’t run: ScreenFlow Logic Sketch 13:46 - What do I miss? Trackpad gestures It’s not as polished of an experience Links Dell Toughbook 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 

Hasty Treat - Scott Goes Linux with Pop OS

In this episode of Syntax, Scott and Wes talk with Ian Ramzy about ZipCall.io — how he built it, why, and some of the surprising choices he made along the way. 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”. 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. Guests Ian Ramzy Show Notes 02:08 - Who are you and what’s your background? 05:34 - Why did you build this? 13:55 - What is it built in? Express server Web sockets 16:10 - Why is there no tooling? GetUserMedia WebRTC Twilio STUN/TURN/ICE infrastructure https://www.twilio.com/docs/stun-turn/faq VideoChat.peerConnection = new RTCPeerConnection({ iceServers: token.iceServers, }); 24:31 - How does your server deal with an influx of users? 27:11 - How do each of these features work? Auto-scaling video quality Text chat Screen sharing Picture in picture Live captions Loading animation No download required, entirely browser based Direct peer to peer connection ensures lowest latency Single use disposable chat rooms 41:32 - Have you looked into any of the recording APIs? Links ZipCall Zoom jQuery WebTorrent Heroku Adopter.js Figma ××× SIIIIICK ××× PIIIICKS ××× Ian: Notion Scott: Summoning Salt Wes: 4 Channel WiFi Momentary Inching Relay Self-Lock Switch Module Shameless Plugs Ian ZipCall Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets 

WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections. Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%. Show Notes 03:27 - Images Resize client-side when uploading Lazy load or progressive JPG Width + height so the content doesn’t shift with placeholders Compress your images - lossless and lossy Use SVG where possible 08:33 - Scripts + CSS assets Hasty Treat - 5 Things That Make Your Site Slow Hasty Treat - 5 More Things That Make Your Site Slow 08:51 - Video Variable-rate video is key 09:13 - Connections that go in-n-out a lot Save form state on page refresh Show UI when user goes offline window.addEventListener('offline', updateOnlineStatus); window.addEventListener('online', updateOnlineStatus); Retrying in _____ 10:27 - Service workers! Serves up local cache initially 12:05 - Fonts Font-display CSS https://css-tricks.com/font-display-masses/ Sometimes possible: tree shake your fonts - load only the characters you need font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 14:04 - CSS tricks Text over background image — make sure you also set a color so the text will show while the image is loading 14:37 - Testing slow connections Dev tools Mimic a speed, or 3G Links ImageOptim Slack Discord Cloudflare Workbox by Google Chrome Dev Tools Firefox Dev Tools 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 

Hasty Treat - Slow Connections Part 2

In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 02:38 - What and why A headless CMS doesn’t mean you have to use a static site generator A headless CMS has an API: REST GraphQL GROQ A headless CMS can pipe its content into: Static Site on build - like Gatsby An app on run/refresh An existing website - widget What makes a CMS? Do you need a UI? What is the threshold? Is a hotdog a sandwich? Things to think about when choosing an API Auth - Rules + roles + levels How easy is it to create new data types? Is it code or UI? Can my mom use it? Can you create one-off content types? (e.g. settings pages) Custom workflows dRafts, revisions, roll backs How are images handled? Do you need another service for that? Pre-determined UI Is custom UI possible? Two-way relationships? Tags? Data validation? UI + API? Hosting? Pricing? Content movability? Can you get your data out? Schemas Users Revisions CORS or realtime API? APIs Can you insert data via the API? (or just pull) Node API Importing data 24:37 - Hosted Sanity Prismic Contentful Dato CMS Storyblok 8Base Agility CMS Seems to be making a big corporate play 36:59 - Self-Hosted WordPress WordPress REST API GraphQL API WP GraphQL Advanced Custom Fields for custom UI Most things in WordPress are custom post types and taxonomies, so data from plugins can often be surfaced The theme UI from plugins is often lost Drupal contentacms.org Craft CMS Ghost Strapi Keystone Joomla (JK!) 44:33 - API (BYOUI) Hasura Prisma Firebase 47:37 - Git Based Netlify Forestry 50:30 - Other Google Sheets Sheety Airtable Tina CMS Not a CMS Markdown under the hood Notion Links https://twitter.com/wesbos/status/1254772936935739393 Pixel & Tonic GraphCool GraphCMS Sapper ××× SIIIIICK ××× PIIIICKS ××× Scott: DEWALT Random Orbit Sander Wes: Shelf Brackets Shameless Plugs Scott: New course on Sapper - Sign up for the year and save 25%! Wes: 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 

Headless CMS Break Down & Roundup

In this Hasty Treat, Scott and Wes talk about how to develop for slow internet connections. 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 02:26 - Types of Slow connections Slow upload Slow download This could be that your kids are watching a show and your partner is on a zoom call High latency Intermittent 07:47 - Loading UI Show loading UI for everything, but after X seconds Page transitions on SPAs Form switches - enter country, get list of provinces/shipping/whatever 11:58 - Account for XHR failures Sometimes I’m in a loading state forever State machines will account for this 13:26 - “Still working” timeouts Some sort of timeout so the user can get feedback Links Sentry Sapper Backblaze 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 

Hasty Treat - Developing for Slow and Spotty Connections

It’s another potluck! In this episode, Scott and Wes answer your questions about kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, 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. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Show Notes 03:11 - Q: Do you think Selenium could get replaced by Cypress in the future? 16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog? 11:13 - Q: Do my students NEED to understand recursion to be effective JS devs? 15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web https://github.com/cdr/code-server). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser. 22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that? 26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my boys (age 8 and 5). They’re obsessed with Pokémon right now and I figure this could be a fun little group activity. I see how much they struggle focusing on some of the online instruction they have through school, and they’re a bit fatigued with “learning” right now. We tried doing a bit of scratch/scratch jr. I figured a fun-themed project could help them stay engaged with learning, but I’m struggling with where to start. How would you go about creating a course/activities (like Wes’ Javascript 30 course) specifically designed for primary/elementary aged kids? 30:52 - Q: How much should someone who wants to work as a web developer (starting in a junior position) know about data structures and algorithms? Should I practice algorithms and do questions before applying for jobs? 33:53 - Q: I’m working with a friend to start up a website for our YouTube channel, and we’re getting into podcasts too (not tech-related so no competition, no worries). I’m thinking about trying to host my own RSS feed for podcasts to save some bucks. Am I crazy? 36:27 - Q: Do you guys name your colors in terms of the color or the use of the color. For example, say you styled all your links to be purple. Would you name that color “purple” or “link”? 41:00 - Q: I’ve been listening to you for about a month and really dig it. I’m working on an app that will require a couple of different databases. I’ll need a database for user information, and a larger database for application data. The app does some analytics stuff, so data is critical. I’m getting lost in the world of hosted database options (mLab, Digital Ocean, etc.) and big cloud providers (AWS, Google, etc.). Could you guys talk a little bit about how you choose database hosting? Bonus question - have you ever used Auth0 or Okta for user authentication? 45:09 - Q: I’m a bit confused about using GitHub. What happens to the files that are ignored, but required for development? What’s the best practice for backing up both? I have used .env files, but not too sure how it works if it’s in the gitignore and the site is deployed via GitHub (like with Netlify). Right now I have a backup folder on my hard drive and I back up both the dev and the live versions with a timestamp, whenever I do a new ‘release’. Also, you spoke about Jetpack, and I’d be curious what’s the best way to do this with a cronjob for example. 48:50 - Q: I was laid off in early April because of COVID-19. I’ve been trying to file unemployment since then. The state unemployment office said they were launching an updated website for filing claims on Friday, April 24th. At 9:00am that day, they ran a banner saying demand has been so high that it’s affecting the process ‘despite rigorous testing.’ Why is this so hard to scale? 55:57 - Q: What is your take on all of these rails-like server side rendered React and GraphQL frameworks? Here is another one built by Michael Jackson, Ryan Florence and some others: https://twitter.com/remix_run. This of course is in addition to Redwood and Blitz. Links Prism VS Code gatsby-remark-vscode CodeSandbox vscode-textmate System76 Linux Laptop JS Refactor ScratchJr Javascript30 GraphiQL Pokedex AWS Auth0 Okta mLab Jetpack Backup Remix Redis Redwood Blitz Next.js Encarta ××× SIIIIICK ××× PIIIICKS ××× Scott: EGO battery-powered lawn gear Wes: AmazonBasics Notebook Laptop Stand Arm Mount Tray Shameless Plugs Scott: Level Up Tutorials Pro - 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 

Potluck - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × More!

In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision. 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 03:21 - When was IE11 made? 03:48 - When is it deprecated? 04:44 - How to make the decision? Look at your analytics Look at your users Is a 2% drop in sales worth it? 09:00 - What doesn’t IE11 have? What can you start using now that IE11 is gone? Modern Flexbox CSS Grid CSS Variables 10:26 - Can you partially support it? Major features Progressive enhancement Gracefully degrade Polyfill 11:16 - What about testing? Links wesbos.com VirtualBox modern.ie IE11 Surface Book 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 

Hasty Treat - Should You Support IE11?

In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, 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. 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 03:14 - General premise Sapper compiles away, removing framework code from build Component & Props based Easy reactivity Built-in tools like animation Template-based 07:57 - Svelte 101 .svelte files Files can include , , and straight-up CSS Variables are used in templates via {var} - even works Import component and use just like React and Vue 10:49 - Stylin’ All styles are scoped by default global() to wrap around global declarations Language type sass to use sass 12:22 - Reactivity Baked in let count = 0 count = count + 1 will reactively update in template variables are essentially state $: double = count + 2 - to create a reactive variable that updates when another variable updates $: console.log(count) = will run whenever count is update a-la useEffect $: if (count >10) = same… reactive if  updates let name in script 15:55 - Props Same was React, but need to be exported before they can be used Seems counterintuitive, but you get over it quickly EZ defaults export let answer = 'a mystery'; import Nested from './Nested.svelte'; export let answer = 'a mystery'; The answer is {answer} 20:08 - Template logic If statements {#if user._id} {/if} Loops {#each cats as kittens} Promise tags {#await promise} ...waiting {:then number} The number is {number} {:catch error} {error.message} {/await} 23:12 - Events On directive Functions can also be inline Modifiers Click me 26:11 - Baked-in goodies Animation Dimensions {text} Lifecycle methods Advanced State Via Stores A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes. import { writable } from ‘svelte/store’; export const count = writable(0); count.update(0) Slots React helmet like stuff, ie 36:39 - Sapper Similar to Next.js Folder routes Static export with all of the good stuff like service workers and preloading Links Svelte Sapper r/webdev Vue.js ScottTolinski.com WesBos.com Next.js ScottTolinski.com Github Repo Gatsby.js Shawn Swyx ××× SIIIIICK ××× PIIIICKS ××× Scott: Lewisia Battery Backup Solar Fountain Pump Wes: Firefox Containers Shameless Plugs Scott: LevelUpTuts YouTube Channel Wes: Wes’ New Website 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 

Scott Teaches Wes Svelte and Sapper

Wes Bos and Scott Tolinski are two full stack web developers who like to break down complex topics and make them easy to understand.

hubhopper

Syntax - Tasty Web Development Treats

hubhopper