Syntax - Tasty Web Development Treats

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

It’s another potluck! In this episode, Scott and Wes answer your questions about mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms 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. 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:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt. 08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around? 13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like A-Frame and React 360. I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future? 19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers? 21:37 - Q: I was curious knowing your opinions regarding json:api and its consumption in React. Is it still a good pick compared to GraphQL or normal rest/json? 27:30 - Q: What’s your take on Blitz.js and RedwoodJS? Would you use a framework like this to build a large & scalable web app? 30:54 - Q: What do you think of Deno.js reaching version 1.0? Is it really going to be a Node successor, or is that just marketing hype? 34:34 - Q: When you are looking to refactor code, do you have a process you like to follow? 41:35 - Q: Which technology stack would you choose in 2020 for an e-commerce website and why? 46:32 - Q: I’m confused about developing a website for a client. I feel like most, if not all, clients want to take administrative control at the end of the project to be able to handle things themselves. Does this mean the only option for client projects is WordPress? I got really excited about making a client’s site in Gatsby, but they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here? 49:52 - Q: How do I use prop types to check a component when getting the props from context instead of passing them down? 51:51 - Q: Should I use the mongoDB or mongoose node module in my project? What are the differences? 55:48 - Q: Is it a bad practice if I mix up React Bootstrap and Material UI in one React project? Links gqless Prisma The Blitz.js Manifesto (A New Fullstack React Framework) Begin Shopify Snipcart Magento Sanity Gatsby Syntax 157: Hasty Treat - What is a Headless CMS? @dog_rates Wondery - Joe Exotic ××× SIIIIICK ××× PIIIICKS ××× Scott: Jackbox Games - Murder Party Two Wes: Tiger King Shameless Plugs Scott: Custom React Hooks - Currently 50% off! - Use the coupon code ‘Syntax’ for an additional 10% off! 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

22 Huhti 20201h 2min

In this Hasty Treat, Scott and Wes continue their discussion of website page speed — five more things that make your site slow! 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:01 - Shipping too much JS Code splitting Webpack Bundle Analyzer Look at dependencies of libraries Use fewer libraries 06:38 - Not bundling code Build process 08:24 - Not compressing code Google Closure Compiler Gzip via your server serving assets Minify CSS + JS 11:45 - Loading JS asynchronously Where should I put tags in HTML markup? Solution: Lazy load JS as needed Solution: Show HTML first, load JS in the footer Solution: Use Async + Defer 16:42 - Missing indexes on DB What is a DB index? Where should you add them? MongoDB Compass Links Syntax 239: Hasty Treat - 5 Things That Make Your Site Slow Google PageSpped 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 Huhti 202021min

In this episode of Syntax, Scott and Wes talk about emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website? 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 5:40 - Banners and popups Interfere Static Dismissible Cookie/localstorage When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated. Private client-side-only PWAs are hard 14:35 - Good styling What happens if they add an image? Do they have access to the branded fonts and colors in their WYSIWYG? Can you revoke 100px red Times New Roman? 18:32 - Page alerts Yellow, green, red Alerts on existing pages 21:08 - New pages Is there a good template for new pages? Can they easily set the slug? whatever.com/covid19 Can they add it to the nav? 23:52 - Google’s “Hours of Operation” Is that easy to change? Meta tags: https://schema.org/OpeningHoursSpecification 25:43 - Other Own your audience! Email newsletter ready to rock Online pickup? Basic scheduling software https://www.cityhive.net/ https://snipcart.com/ Live streaming - have a YouTube account ready to go, even if empty 34:38 - Deployment Detail how to deploy everything It might have been years and the CSS will only compile on Node 6 and Gulp 3 Do any caches need clearing? Does the CSS need to be cache busted? Links 1Password Cloudflare ××× SIIIIICK ××× PIIIICKS ××× Scott: Mellow Groovy Sounds YouTube Channel Mellow Grovvy AOR / West Coast Mix #4 Wes: Used projectors are cheap and can be a great deal Shameless Plugs Scott: All Courses - 50% everything! 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

15 Huhti 202045min