Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes wrap up season one of the podcast and talk about what’s coming. 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:32 - Plans for the Fall 06:59 - Fav Hasty Scott Ep 161: Hasty Treat - VSCode Extensions & Themes Ep 165: Hasty Treat - VSCode Treats Part 2 Ep 167: Hasty Treat - VSCode Love Part 3 Ep 277: Hasty Treat - 5 Things That Make Your Site Slow Wes Ep 211: Hasty Treat - Modules in Node 08:55 - Fav Tasty Scott Ep 236: Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout Ep 250: Scott Teaches Wes Svelte and Sapper Wes Ep 224: Serverless / Cloud Functions - Part 1 Ep 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy 10:22 - Top Episodes of 2020 10: Ep 214: 2020 Fitness 09: Ep 228: More on Severless - Databases × Files × Secrets × Auth × More! 08: Ep 220: The Synology Show - Backups and Home Server 07: Ep 222: Are Web Dev GUIs Going to Replace Us? 06: Ep 210: Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More! 05: Ep 212: Pika Pkg 04: Ep 224: Serverless / Cloud Functions Part 1 03: Ep 218: Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More! 02: Ep 226: Potluck - Next vs Gatsby × Headless CMS × Vue.js × Is Ruby on Rails still good? × More! 01: Ep 216: Tech to Watch in 2020 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

31 Aug 202016min

It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, 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. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:18 - I’m curious to know what you guys think of MDX. I’d love to learn more about pros and cons, if you guys had a chance to use it. 08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind? 12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions? 18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why? 21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you help with some guidance or resources? :) 30:00 - What are your thoughts on SailsJS as a Rails-equivalent framework in Javascript? They recently released version 1.0 and I’m wondering if I should start using it in projects or if I should wait to see if it pans out. 34:35 - How do you go about creating reusable React components (reusable from project to project)? Do you create packages and publish them to NPM? Or do you have another method for storing code for components that you will likely need to use again? 38:33 - Thoughts on shadow dom / custom elements? Would you use them in your own projects? 40:49 - How do you organize CSS properties within a rule and why? Random, alphabetical, logical groupings, etc. 46:04 - Have u ever used the 2nd parameter of JSON.stringify for anything useful? 48:00 - Getting my first dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle that can be enterprise code bases. I’ve also learned the importance of writing code that will be readable later - ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code base, etc. My question is - are there resources on these sorts of topics for folks trying to break into the industry? A lot of tech topics revolve around how to get your code to run, which feels to me like only half the battle. Where can juniors find resources on robustness? Links https://github.com/jxnblk/mdx-deck https://mdsvex.com/ Spectacle MDsveX Vue.js Redux VueX Better Comments Kap Redwood.js Blitz.js GraphQL https://github.com/ryanmcdermott/clean-code-javascript ××× SIIIIICK ××× PIIIICKS ××× Scott: Easy Snippet Wes: WOW Pool Noodles 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

26 Aug 202057min

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. 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 03:28 - What is the difference between HTML and React event handling? 05:55 - What are JavaScript data types? 07:00 - In which states can a Promise be? 07:48 - Discuss the differences between an HTML specification and a browser’s implementation thereof. 09:14 - What is a stateless component? 10:10 - What is a pure function? 10:51 - What is the output of the following code? const a = [1, 2, 3] const b = [1, 2, 3] const c = "1,2,3" console.log(a == c) console.log(a == b) 13:35 - What is memoization? 15:15 - How do you pass an argument to an event handler in React? 15:59 - What is HTML5 Web Storage? Explain localStorage and sessionStorage. Links 30 Seconds of Interviews 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 Aug 202019min

It’s another potluck! In this episode, Scott and Wes answer your questions about React subscriptions, ES Modules in Node, how to cook a chicken thigh, being a good dad 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”. 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 02:11 - What are “subscriptions” in React, or in programming in general? The React docs mention that setting up a subscription is an example of a side effect, but what exactly is a subscription, and how do you set one up? 05:43 - Using the latest node esm imports, is it possible to use aliases? Using the old require() syntax I used the npm package module-alias (https://www.npmjs.com/package/module-alias), but I cannot seem to find a solution for node v14 imports. In a deeply nested file, I find the import ‘…/…/…/some/folder’ syntax to be awful compared to require(’@/some/folder’). 09:20 - I’ve been a full-time developer for over 10 years and my company has a fairly flat hierarchy. I want to take on more responsibility (and salary) but my company doesn’t have anything like a “lead developer” position. Any ideas for how to move up without switching companies? I know my boss would be receptive if I came to him with a pitch, but we work full stack so it feels like I’m already doing it all. 12:59 - In Wes’ website episode, he mentioned using Gatsby Parallels for images. Why not git LFS? 17:25 - For Wes: Any Big Green Egg tips for beginners? I just ordered a kamado style grill and I’d appreciate any tasty tips you’ve got. 22:45 - Inline code is considered harmful because of potential XSS attacks. Lighthouse recommends inlining critical CSS to improve page speed. What do you think about this tradeoff? 26:30 - What advice would both of you have for being a first-time father, and how can I best prepare? My wife is pregnant, and we are both very excited! I want to do the best I can at being a good father. Our baby is due in January. As both of you are fathers (multiple times), I would love to hear your thoughts. 32:58 - Are present web developers merely crud bastards for corporate culture? If not, What entrepreneurial opportunities are open with Javascript and hooking up React with backend Node/Laravel and reading the Google Map docs? Of course the list isn’t exhaustive but you get my point right? Note: I’m not interested in selling courses and creating frameworks. 37:08 - Do you have any use for ES6 Generators and yield? It seems that they are a mechanism for async-await “under the hood,” so using ‘async-await’ is probably sufficient. 39:10 - With a legacy project that has old build dependencies how do you decide when to retool and fix all the npm audit issues? 46:10 - In what instances do you prefer to use rem vs em vs pixels for font size? I usually think about it like so: if I’m okay with an element’s font size being sized based on the parent, then I’ll use em. If not, then I’ll use rem. I almost never use pixels anymore except sometimes on the html element. But even then, I usually use a percentage. In practice, I’ve found it a bit hard to gauge what to expect with ems because of nesting issues. So, I’ve mostly been leaning towards rem. Though I also understand that using rems can be less modular. How do you guys make the decision? 52:49 - Hello chaps. Thank you so much for the show, I’ve learned an awful lot through listening. I’ve been dabbling in development for some time now and have taken on a project for an Express site which aside from a few static pages will include a shop with a small number of items (

19 Aug 20201h 3min

In this Hasty Treat, Scott and Wes talk about tips and tricks for using Gatsby in your projects 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:02 - React Helmet Make a re-usable SEO component that sets defaults. Spread children to override. 04:27 - When in doubt, stop the build and restart Gatsby clean Nuke node_modules + package-lock 05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser 06:44 - Run the build command locally to troubleshoot prod Dev mode isn’t SSG’d - people overlook this 08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser wrapPageElement and wrapRootElement 09:50 - Consider just adding the layout component manually to each page This will allow you to skip the layout if you need to have a page that isn’t typical 11:21 - Layout is not suitable for unmount animations Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components. 12:59 - use onCreatePage to pass context to the layout exports.onCreatePage = ({ page, actions }) => { const { createPage } = actions; if (page.path.match(/thumbnail/)) { page.context.layout = 'thumbnail'; createPage(page); } }; 14:03 - You don’t have to query for everything Hard-coding data in html/jsx is super valid 15:32 - Gatsby Parallel Runner For lots of images Links Gridsom Google Cloud Cloudinary Sanity Image 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 Aug 202017min

In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS. 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. Guests Adam Argyle Show Notes 01:48 - Who are you and what do you do? 04:13 - How does stuff get added to CSS? 06:44 - Github issue proposal or public document Shares use case Problem made succinct StrawMan solution JS demo 10:12 - Time Multiple proposals Comments Back and forth Bikeshedding 20:00 - Editor’s draft spec (Stage 1) CSS typed Examples Provided code logic Implementor interest Can go stale Explainer Implementor Prototype behind flags in browser Intent to Prototype (I2P) 24:42 - Working Draft (Stage 2) WPTs Prototype behind flags in browser Needs two or more to graduate Intent to Ship (I2S) 24:54 - Conference Calls Around 10 items to discuss Issues or proposals Flexible list Things can be injected as emergency Things can get punted to the next call 25:26 - Face 2 Face (F2F) Four times a year Presentations Breakout sessions Houdini focus groups, etc Try to resolve as many Github issues as possible 27:34 - Candidate Recommendation (Stage 3) Could still be behind a flag Edge cases are being worked through WPTs and standards are being nudged into a final state 44:20 - Roles Spec author Community Member Print Color Internationalization Box Model AOM JS APIs Renderers etc Implementor It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real 46:32 - Questions What language is CSS written in? What's the deal with Houdini? Links https://github.com/w3c/csswg-drafts @rachelandrew @hj_chen Incomplete List of Mistakes in the Design of CSS 10 Things I Regret About Node https://ishoudinireadyyet.com/ ××× SIIIIICK ××× PIIIICKS ××× Adam Wok Scott: Balance Pad Wes: Security Bit Set Shameless Plugs Adam: The CSS Podcast Scott: CSS Design Systems - 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

12 Aug 20201h 3min

In this Hasty Treat, Scott and Wes talk about refining your processes, how to evaluate them, make them better, 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”. Show Notes 04:18 - Find slow process Getting through email Cleaning my desk 06:29 - Set clear goals (smart goals) Is my inbox less crazy? Don’t spend too much time Do a 30-day challenge 09:46 - Ask around What are people you know using and why Time-blocking Batching Eat that frog Links Streaks Matt Cutts — Try something new for 30 days 1Writer Notable Dropbox Notion Obsidian Todoist 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 Aug 202018min

In this episode of Syntax, Scott and Wes talk about React State libraries, should you use them, pros, cons, 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 01:24 - Context Have we used? Scott: Yes Wes: Yes Pros Built into React As simple or complex as you want Cons Takes effort to optimize Takes effort to plan and organize aka can get out of hand quickly 08:49 - Redux Have we used? Scott: Yes Wes: Yes Pros Huge user base Legacy of growth and improvements Modern API Even though it’s hard to learn, it has a clear “how to build with it” path Dev tools Cons Complex Thing that calls a thing that calls a thing that calls a thing Confusion around what additional packages are needed, e.g. ducks, saga, whatever 17:08 - XState Have we used? Scott: Yes Wes: No Pros Enforces solid design patterns Very safe Awesome tooling like UI to see state machines https://xstate.js.org/viz/ Cons Knowledge overhead - having to understand state machines Complex syntax 23:26 - Zustand Have we used? Scott: Yes Wes: No Pros Fast, scalable, easy to use Simpler No context providers Cons Smaller community 2.6k stars on Github Can inform components transiently (without causing render) 27:04 - Apollo Client Have we used? Scott: Yes Wes: Yes Pros Fits in well with your GraphQL API Dev tools Cons Complex, large syntax for simple operations Dev tools SSR story is really complex. It’s hard because they aren’t also the framework. 31:35 - RXJS Have we used? Scott: No Wes: No Observable based 33:02 - React Query Have we used? Scott: No Wes: Pros Fast growing community Awesome dev tools Cons Not sure if this can be used for application state or just data 35:37 - Recoil Have we used? Scott: Yes Wes: No Pros Very good for complex, splintered state needs Cons Overly complex for most use cases 38:34 - MobX Have we used? Scott: No Wes: No Pros Big community Not just React Powerful Observable capabilities Cons Uses decorators, but doesn’t have to? 43:15 - Easy Peasy Have we used? Scott: No Wes: No Pros Simple API (easy peasy) Redux dev tools supported 45:06 - Meteor ReactiveDict / ReactiveVar Have we used? Scott: Yes Wes: No Pros Very simple Get, set Is Reactive Cons Lock-in to Meteor 46:19 - Final Thoughts On State Wes: Go for simpler solutions Scott: I think application state should be separate from application data, but maybe that’s because there isn’t a solution that does both how I want Links Svelte Meteor Syntax 206: State Machines, CSS and Animations with David K Piano Syntax 268: Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More! Zustand CodeSandbox swr ××× SIIIIICK ××× PIIIICKS ××× Scott: Becoming Bond Wes: IRWIN VISE-GRIP GrooveLock Pliers Set Shameless Plugs Scott: Modern CSS Design Systems - 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

5 Aug 202054min