Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios

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 Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com 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

20 Touko 202051min

In this Hasty Treat, Scott and Wes talk about Scott’s new website! 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 02:25 - Relaxed fit development Not concerned with it being perfect Will act as a loose digital garden, so it needs to be flexible Keep my talks and podcast appearances somewhere 04:40 - The stack Svelte / Sapper CSS variables Static generation with markdown No API Hosted on Netlify 08:15 - Why? I dropped that db life in 2015 and never looked back I’m a developer - markdown is good for me I like a playground for ideas, so the new site throws out any idea of formality and dives into being a playground for myself. Full page animations. Orchestration. Fully SSG. Code is painless to add to — adding a blog post is as easy as creating a markdown file Links ScottTolinski.com Svelte Sapper Maggie Appleton Shawn Swyx 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

18 Touko 202015min

In this episode of Syntax, Scott and Wes talk about what is new in Javascript — a whole bunch of new stuff that you can use now and in the next sixth months or so. 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 ES2019 04:03 - Array.flatMap() 05:30 - Array.flat() 07:37 - Array.fromEntries() 09:50 - String.trimStart() and String.trimEnd() 11:23 - Function.toString() 11:57 - Object Key Order Integer keys in ascending order (and strings like “1” that parse as ints) String keys, in insertion order (ES2015 guarantees this and all browsers comply) Symbol names, in insertion order (ES2015 guarantees this and all browsers comply) ES2020 14:50 - Big int 18:09 - Nullish coalescing 20:57 - Optional Chaining 24:55 - promise.allSettled 25:33 - Dynamic import 27:14 - string.matchAll(regex) and string.replaceAll 29:30 - globalThis 30:44 - Module Namespace Exports 33:11 - Navigator.share() API 36:34 - Async Hooks 37:39 - Pipline Operator 39:59 - Top Level Await Links https://twitter.com/wesbos/status/1181584047144878080 https://twitter.com/wesbos/status/1238472679893671938 https://twitter.com/wesbos/status/1230515254687301635 Regex101 Regexr https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare Sketch CloudApp Figma https://nodejs.org/api/async_hooks.html Gulp https://v8.dev/features/top-level-await https://github.com/tc39/proposal-pipeline-operator ××× SIIIIICK ××× PIIIICKS ××× Scott: Sapper Wes: Dewalt Oscillating Multitool 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

13 Touko 202048min

In this Hasty Treat, Scott and Wes talk about Wes’ new website - its first update since 2014! 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 05:04 - The stack Gatsby Styled components React MDX 07:04 - The content Blog posts Twitter Hot Tips 09:54 - Styling Styled components Less 16:54 - MDX 17:45 - Serverless functions Links wesbos.com bos.af WordPress ACF Netlify Gatsby React MDX My New Website! Here are the deets Next Operator Mono Mono Lisa Puppeteer gatsby-image Jason Lengstorf gatsby-plugin-prettier-build 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

11 Touko 202028min

In this episode of Syntax, Scott and Wes talk with Heather Payne about bootcamps — how to get the most out of them and what to look out for! 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”. Guests Heather Payne Show Notes 07:52 - Bootcamps What do you teach in the bootcamp? How long is it? SHow do you validate and pick topics? What makes a good bootcamp student? Do bootcamps work? How do you get the most out of a bootcamp? 20:45 - Finding a job How do you prepare for an interview? What qualities, outside of technical skill, do you see in developers who get jobs easily out of the bootcamp? Do you see any common traits in the few that don’t get jobs? What about getting a job in the current climate? 43:30 - Other How do income share agreements work? Pay what you can income share agreements How do you tell if a bootcamp is good? Links Heather Payne Juno College WordPress React Council on Integrity in Results Reporting Zoom ××× SIIIIICK ××× PIIIICKS ××× Heather: Whereby Scott: Original Grind Coffee Co. Cold Brew Coffee Maker (1 Gallon) Wes: iStat Menus Shameless Plugs Heather: Juno’s Continuing Education Online Courses Scott: Design Systems In Figma - Sign up for the year and save 25%! Wes: Wes’ New Website - 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

6 Touko 20201h 1min

In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls! 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 02:23 - Event bubbling Some events bubble, some don’t Clicks bubble Mouseevents bubble Focus doesn’t bubble 04:10 - Event capturing Capture: down, bubble up Canceling: prevent default target` vs currentTarget currentTarget is what got clicked target is what you listened for the click on event.isTrusted addEventListener once: true Links Javascript30 BeginnerJavascript 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

4 Touko 202013min

It’s another potluck! In this episode, Scott and Wes answer your questions about custom hooks, static site generators, code management, CSS, 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 04:02 - Q: Could you do a quick overview of how to effectively use a platform like Cloudinary? I have a Gatsby site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service. 10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)? 16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them. 18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team? 23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using? 27:37 - Q: Have you tried gqless, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code. 29:15 - Q: What are the main differences in working for a software agency and a software product company? Pros and cons of each? 33:53 - Q: Advice for having static blog with minimal moving parts? I used to have a static blog but I eventually got sick of touching it because instead of writing content I often got stuck keeping up with all the dependencies involved. 38:18 - Q: Micro Frontends—is it the solution to rewriting legacy components? 42:16 - Q: I am relatively new to web development and I feel like it is very difficult to “catch up” with JavaScript. It seems like whenever I try to contribute an open source, I can’t figure out the code because they’re using newer (and presumably better) ways of doing things. How can I get up to date with everything that’s going on in the JavaScript world? Also, at what point should I start learning a front-end framework? 46:56 - Q: My team and I are starting to write pretty complicated custom hooks gathering data from a number of different endpoints and/or polling certain endpoints on a continuous interval timer before returning it to the component that needs the data. Since this is the case some hooks have gotten fairly large with multiple functions inside of them getting called to get/manipulate all the data, or multiple hooks using those same functions to get slightly different data. Is it a best practice to keep all those hooks together in one file if they support all the hooks? Or should we break the hooks into separate files and move the helper functions into another file and just have one hook per file? 51:10 - Q: Any tips for navigating projects with bad project managers? Working with non-technical agency project managers makes it pretty difficult to effectively plan and allocate time to ensure that all of the projects are done on time, on budget, and done well. It’s important to me to maintain an optimistic attitude in the organization, but sometimes I’d love to just hit 'em with the 'ol “Peace out” and go smoke some pork butt. Wondering if you guys have any good experience managing these types of projects? 55:45 - Q: I’m committing often and early, but this means that I end up writing the same vague git commit message over and over again. I know the solution to the problem is to just be more verbose, but it’s a difficult habit to break. Any advice? Links imgIX Netlify Sass Less Bootstrap Stylus PostCSS WordPress Reddit StaticGen Gridsom Vue Laravel Hugo ××× SIIIIICK ××× PIIIICKS ××× Scott: Jelle’s Marble Runs Wes: Hyundai HHC2GNK Vertical Style Electric Air Compressor 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

29 Huhti 20201h 4min

In this Hasty Treat, Scott and Wes talk about getting buy-in from your team when using new tools. 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:53 - Q: "I wrote a long message to our architect asking if I could install prettier into our component generator for new projects moving forward, and the response I got was: “Don’t auto-format, not all devs want that and prettier doesn’t always format the way I like, I don’t want to enforce that on devs.” This sucks because I know the codebase would benefit so much. Right now every time I visit a project so much of the code is not spaced out that it makes it hard to read quickly for me, lots of the React code is bunched up with no spacing - it’s a mess to read for me especially because I am very organized. If this was your situation where you know a new tool/standard is something that can help a lot but it’s shot down, do you just give up? I don’t know how to respond to this because I am the only dev who has ever proposed this at my company and I just started here. 05:03 - Lots to unpack here Some senior devs don’t like getting suggestions from other devs. There is a sense that these things change quickly and I bet there is some anxiety over that at play here. Senior devs know better than to slap new tools into the codebase because they have probably done it and regretted it. What if it broke your code. 08:20 - So what can you do? Ask for their thoughts on a tool instead of suggesting it - it seems you have done this already Show the dev that even though it looks weird, it’s better for readability. Look at existing guidelines and try to match the settings as close as possible (not always an option with prettier). Put together a solid argument for it, written down. Use it in a smaller project. Everyone is against prettier at first, but once they use it, they realize how amazing it is. Can you just Prettier the code yourself and then format it otherwise before you check it in? This depends on if you have existing formats. Links Prettier js-beautify 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

27 Huhti 202017min