Our Code Styles

Episode Summary

Executive Summary: Scott and Wes compare personal coding preferences across JavaScript, TypeScript, CSS, and component architecture, emphasizing practicality over dogma. They favor functional patterns, const by default, explicit typing at boundaries, readable if-statements, modest CSS nesting, and team-friendly conventions like comments and TODOs. The episode also touches on tooling (Prettier, Stylelint, VS Code settings, Sentry, FreshBooks, Sanity) and when “magic” or abstraction improves developer experience.

Main Topics: JavaScript style preferences: They discuss functional vs OOP, interfaces vs types, tabs vs spaces, semicolons, const vs let vs var, and explicit vs inferred TypeScript typing. Both lean toward functional code, const by default, and pragmatism over rigid rules. Naming conventions and code readability: They compare camel case, snake case, kebab case, screaming snake case, and file naming strategies. The discussion centers on readability, conventions by domain, and tooling choices like VS Code label formats and barrel files. Looping and conditional style: They prefer array methods for most iteration, but keep classic loops for async control, object iteration, break/continue, and special cases. They also strongly prefer one-line if statements over terse ternaries or unconventional formatting. CSS conventions and layout choices: They cover property spacing, nesting, alphabetizing vs grouping properties, unit choice (px, rem, em), centering techniques, and achieving full-height layouts. Both favor readability and component-level scoping over heavy nesting. Comments, TODOs, and developer tooling: They argue that comments still matter for intent and implementation details, especially in complex code and teaching. They use Better Comments and TODO-tracking tools to surface important notes and future work. Component structure and isolation: They discuss single-file/single-component-per-file organization, naming components, and whether to build in isolation. Both mostly work inside the app, but acknowledge isolation helps catch styling and prop inconsistencies. Framework magic versus explicitness: They prefer frameworks and abstractions that reduce boilerplate, as long as they do not limit control or cause performance issues. Their stance reflects a preference for developer productivity and sensible defaults.

Key Arguments: Functional programming is preferred because it is easier to test with simple input/output functions. Interfaces and types both work in TypeScript; the choice is mostly about ergonomics and edge cases, not a hard rule. Tabs, spaces, semicolons, and many formatting choices matter less than consistency and automation via tools like Prettier. Const should be the default in JavaScript, with let reserved for intentional reassignment; var is avoided because it is function-scoped. Explicit TypeScript types are most valuable at API boundaries, while inferred types are acceptable for internal code. Camel case is common in JavaScript, while snake case is increasingly favored for readability and in certain domains. One-line if statements are considered more readable than ternaries or logical-expression tricks for simple conditional actions. Array methods are the default for iteration, but classic loops remain useful when async control, break/continue, or object traversal is needed. CSS nesting should be used sparingly; too much nesting reduces reuse and increases complexity. Pixels are acceptable and often preferred for many layout values, while rems are useful when scalable relative sizing is needed. Comments are still valuable for explaining why something is done a certain way, especially in complex or non-obvious code. Working in isolation can reveal component inconsistencies, but most development still happens within the full app context.

Data Points: Podcast sponsor count: 3 - The episode mentions FreshBooks, Sentry, and Sanity as sponsors. FreshBooks trial length: 30-day free trial - Advertised during the sponsor segment for cloud accounting and invoicing. Sentry promotional offer: 2 months for free - Listeners are told to use coupon code 'tasty treat' at century.io. Sentry coupon code: tasty treat - Discount code mentioned for the sponsor segment. Sanity free usage boost: double the free usage share - Offer mentioned for syntax listeners at sanity.io/syntax. Course discount: $10 off - West Boss mentions his courses are discounted with coupon code syntax. Tutorial catalog size: Over 128 courses - Level Up Tutorials promotion near the end of the episode. Subscription discount: 50% off - Summer sale offer for the pro subscription on Level Up Tutorials. Course length estimate: About 27 videos per course - Describes the size of the Level Up Tutorials catalog. House-moving timeline: A couple weeks ahead - Scott says they are recording ahead so he can move and work on the house. Framework usage estimate: 90% - Scott estimates most of his code is written functionally.

Pivotal Quotes: "I find myself programming almost entirely functionally where I'm not using classes." — Scott: Explaining why he prefers functional JavaScript over object-oriented patterns. "No semicolons. I don't know in what universe I would ever need a semicolon." — Scott: His strong preference against semicolons, relying on Prettier/ESLint when needed. "I use Snake Case for everything now." — Wes: Describing his current naming convention preference after becoming convinced by readability arguments.

Implications: The episode reinforces a pragmatic, tool-assisted approach to coding style: choose conventions that maximize readability, testing, and team clarity, and let automation handle formatting. It suggests modern JS/CSS developers can be less dogmatic and more focused on maintainability and developer experience.