Syntax - Tasty Web Development Treats
Syntax - Tasty Web Development Treats

Potluck - Mobile First × Arrow Functions × Deno × JSON APIs × Refactoring Tips × More!

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

Featured Speakers

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers Host

Topics Discussed

Episode Summary

Executive Summary: This Syntax potluck covers practical web development judgment calls: mobile-first vs desktop-first CSS, arrow functions vs normal functions, experimental platforms like VR/AR, Deno, Blitz, Redwood, and JSON:API, plus refactoring strategies, e-commerce stack choices, CMS expectations for client sites, type-checking with context, MongoDB vs Mongoose, and why mixing UI libraries is usually a mistake. The hosts consistently favor flexibility, pragmatic tooling, and choosing the simplest stack that fits the problem.

Main Topics: Mobile-first vs desktop-first CSS: The hosts argue there is no universal rule; mobile-first is useful for prioritizing constrained experiences, but desktop-first can be fine when the product audience is primarily desktop. They emphasize keeping functionality/content intact and using media queries as patches rather than forcing a rigid ideology. Arrow functions vs normal functions: They explain the practical difference is mostly lexical 'this' binding and concise syntax/implicit return. Arrow functions are favored for inline callbacks and many modern patterns, while normal functions still matter for declarations, React components, and explicit return/debuggability. Emerging platform and runtime technologies: VR/AR web frameworks, Deno, Blitz, Redwood, and GQL-less tooling are discussed as promising but immature. The hosts see them as worth watching and experimenting with, but not something to bet major production systems on yet. Refactoring approach and maintainability: They recommend branching, committing often, leaning on tests, and refactoring incrementally or radically depending on the file/system. TypeScript is praised as especially helpful for safe renames and better refactors. Backend/data tooling choices: The episode compares JSON:API, GraphQL, MongoDB, and Mongoose. The hosts generally prefer GraphQL for structured APIs and Mongoose when schema/validation are needed, while acknowledging JSON:API can help in larger, more standardized organizations. E-commerce and client-site stack selection: For e-commerce, Shopify is recommended for most nontechnical clients, with Snipcart as an interesting Jamstack-friendly option. For client sites, they stress that Gatsby is only the frontend/theme layer and needs a real CMS, not GitHub markdown, for nondeveloper editing. UI library composition pitfalls: Mixing React Bootstrap and Material UI is discouraged because it creates inconsistent design language and unnecessary bundle bloat; the advice is to pick one framework and extend it rather than combining multiple systems.

Key Arguments: Mobile-first is a good default when users are mobile-heavy, but desktop-first is not inherently wrong; the real goal is preserving content and functionality across breakpoints. Arrow functions are most valuable for lexical 'this' and concise callback syntax, not because they replace all functions in all contexts. Most modern responsive design work is better thought of as component-based scaling with media queries used to patch edge cases. VR/AR web tech is exciting but still early; no one should expect immediate mass adoption, especially if tethered headsets remain common. Deno is promising because of first-class TypeScript support and a cleaner runtime model, but it will not replace Node quickly due to the size of the Node ecosystem. Refactoring should be done with safety rails: branch first, test if possible, and change code incrementally unless a full rewrite is clearly warranted. TypeScript reduces refactor risk by making renames, prop changes, and component interface changes much safer. For e-commerce, the best stack depends on client sophistication: Shopify for ease, Shopify+Jamstack for custom frontends, and custom builds only when control is worth the complexity. Gatsby does not eliminate the need for a CMS; it mainly serves as the presentation layer for content coming from WordPress headless, Sanity, or similar tools. Mixing UI libraries is usually a bad tradeoff because style consistency and bundle size matter more than novelty.

Data Points: Deno version: 1.0 - A listener asks whether Deno reaching 1.0 makes it a Node successor. JSON:API since: 2013 - The hosts note the JSON:API specification has existed since 2013. JSON:API last updated: Not stated exactly; described as last updated by the hosts as a long-standing spec - They describe it as an established standard rather than a new trend. VR headset model: Oculus Quest - Used as the example of a non-tethered headset the hosts find more appealing. React 360 stars/forks: 2.3k stars and forks mentioned for GQL-less, not React 360 - The hosts cite GQLess.dev as a new GraphQL client gaining traction. GraphQL client popularity: 2.3 thousand stars - GQLess.dev is described as having around 2.3k stars on GitHub. TypeScript refactor value: Qualitative, not numeric - Discussed as making renames and component changes safer. Free trial length for LogRocket: 14 days - Sponsor mention for LogRocket. Free trial length for FreshBooks: 30-day unrestricted free trial - Sponsor mention for FreshBooks. Custom React Hooks course discount: 50% off plus additional 10% with coupon syntax - Promo for Wes's course. Beginner JavaScript coupon: $10 off with code syntax - Promo for Wes's beginner JavaScript course.

Pivotal Quotes: "If you're not tethered to a computer, I think VR has a lot of possibilities." — Scott: On the potential of VR/web VR and why standalone headsets matter. "The big part of this is really how it deals with this and variables." — Scott: Explaining the main practical distinction between arrow functions and normal functions. "Gatsby is more just the theme." — Wes: Clarifying that Gatsby is the presentation layer, not the content management system.

Implications: Listeners should optimize for clarity and maintainability over ideology: choose the simplest stack that fits the project, preserve content/functionality on all devices, and use safer refactoring tools like tests and TypeScript. The episode also signals that VR, Deno, and newer app frameworks are worth monitoring but not yet default production choices.

🔓 Sign Up for Unlimited Episode Search

About Syntax - Tasty Web Development Treats

View all episodes from Syntax - Tasty Web Development Treats