Logo
    Search

    Hasty Treat - Code Quality Tooling Part 2

    enFebruary 04, 2019

    Podcast Summary

    • Improving code quality with toolingUse TypeScript for static typing, Jest for testing, and error tracking tools like LogRocket for better code quality.

      Using the right tooling can significantly improve the quality of your code. In this episode of Syntax, Wes Boss and Scott Tolinski discuss code quality tooling in depth, building upon their previous episode. They introduce three categories of tools: TypeScript for better typing, Jest for testing, and error and exception tracking. First, TypeScript helps write better quality code by providing static typing, which aids in catching errors before they occur. It offers suggestions for variable names, function arguments, and return types, making the code more robust and less prone to bugs. Next, Jest is a testing framework that simplifies the testing process, allowing developers to write, run, and debug tests more efficiently. It offers features like snapshot testing, mocking, and test coverage reports, ensuring that the codebase remains stable and reliable. Lastly, error and exception tracking tools like LogRocket help developers identify and resolve issues quickly. By recording user interactions and providing detailed information about errors, these tools enable developers to understand the root cause of bugs and make informed decisions to fix them. These tools, while not directly transforming code into better quality, greatly assist developers in the process, ensuring that the codebase remains maintainable, efficient, and of high quality.

    • Improve code quality with TypeScript, Flow, and tools like ESLint and JestUsing TypeScript, Flow, ESLint, and Jest can enhance your code's reliability and maintainability by providing immediate feedback, catching errors during compile-time or linting, and ensuring type compatibility, reducing runtime issues and saving debugging time.

      Using type systems like TypeScript, Flow, or Reason, along with tools like ESLint and Jest, can significantly improve the quality and reliability of your JavaScript or TypeScript code as you write it. These tools provide immediate feedback and catch errors during compile-time or linting, preventing runtime issues and saving time for debugging. Type systems offer a better understanding of your application's structure and help ensure type compatibility, reducing the likelihood of errors. Jest, a popular testing framework, aids in writing better code by providing test coverage and enabling automatic testing, ensuring that your code functions as intended and catches potential issues before deployment. Overall, these tools streamline the development process and help create more robust, maintainable, and error-free code.

    • Immediate feedback tools enhance productivity and code qualityUsing tools like Versus Code extensions and error tracking services for real-time feedback during development and testing helps identify issues quickly, ensures effective refactors and fixes, and reduces the risk of unintended consequences.

      Having immediate feedback through tools like Versus Code extensions and error tracking services significantly enhances productivity and code quality. These tools provide valuable insights during development and testing, helping to identify issues quickly and ensuring that refactors and fixes are effective. The speaker emphasized the importance of tests in enabling confidence when making changes to code and reducing the risk of unintended consequences. Additionally, having the ability to replay and understand the context of errors allows developers to effectively address and prevent future issues. Overall, incorporating these tools and practices into development workflows can lead to more efficient and effective coding.

    • Maintaining a functional and high-performing website requires proper error tracking, logging, and code quality tools.Invest in error tracking, logging, and code quality tools to catch issues early, improve user experience, and build a robust website.

      Having proper error tracking, logging, and code quality tooling in place is crucial for maintaining a functional and high-performing website. Without these tools, issues may go away undetected for extended periods, potentially leading to a poor user experience and lost opportunities. When an issue arises, it's essential to have visibility into it as soon as possible to address the root cause effectively. However, not all issues are reported, and some users might not even be aware that they've encountered a problem. In such cases, having tools like LogRocket or Sentry in place can help identify and resolve issues quickly. On the other hand, not all reported issues are genuine, and some might be caused by specific user configurations or extensions. In such cases, checking if others are experiencing the same issue can save time and effort. Moreover, code quality tools like linters, hinting, Prettier, TypeScript, and Jest can help developers write better code by catching potential errors, inconsistencies, and style issues early on. These tools provide valuable feedback, enabling developers to write cleaner, more efficient, and more maintainable code. While setting up these tools requires an initial investment, the benefits far outweigh the costs. By catching issues early and maintaining high code quality, developers can save time, improve the user experience, and build a more robust and reliable website.

    • Improve code quality with ESLint and PrettierESLint and Prettier are essential coding tools that improve code quality, consistency, and save time. They require minimal setup and offer significant benefits, making them worth the investment.

      Implementing tools like ESLint and Prettier in your coding projects is a simple and effective way to improve code quality and consistency. These tools require minimal setup time and offer significant benefits, making them essential for any developer. It's hard to justify not using them, as the time saved in the long run is well worth the initial investment. While we didn't discuss continuous integration or pipelines in this conversation, they are also important aspects of maintaining high-quality code and can be integrated with the tools we mentioned. If you have any other tools or categories of tools to add to our discussion, please let us know. Overall, it's crucial to prioritize the use of these tools and continuously strive for better coding practices. Don't miss out on the benefits – make the necessary adjustments to your workflow today.

    Recent Episodes from Syntax - Tasty Web Development Treats

    790: State of JS 2023 Reactions

    790: State of JS 2023 Reactions

    Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    782: The Developer’s Guide To Fonts with Stephen Nixon

    782: The Developer’s Guide To Fonts with Stephen Nixon

    Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Related Episodes

    TypeScript Fundamentals

    TypeScript Fundamentals

    In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, 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.

    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.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes

    What is TypeScript?

    03:12 - Types?

    • What are types and why should you care?
    • JS is a typed language, it’s just not strongly typed
      • JS does not care about reassignment of a variable to a new type
      • Does not care about your types, but they do exist

    06:34 - The Fundamentals

    • You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like.
      • Create a variable: Will it be a string? A number? A custom type of show?
      • Create a function: What params does it take? What type are they? What does it return?
    • Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed.
      • This can allow you to prevent shipping code that has these errors by checking your code.
      • Some of the biggest benefits here come via errors in your text editor

    13:30 - Explaining the types

    • You can create your own types
    • Strings
    • Numbers
      • We only have numbers in TS, no floats/ints
      • We do have BigInt though, but not something most people will use
    • Arrays
      • Will be a list of another type
    • Unions
      • This type will be one of the possible options
      • String of DRAFT PUBLISHED or ARCHIVED
    • Intersections
      • An intersection type combines multiple types into one
    • Objects
      • These are custom types where each property is its own type
    • Any
      • Explicit any
      • Implicit any
    • Language types
      • These things are technically just Objects, but they have their own types
      • Dates
      • Timeouts
      • DOM Elements / Nodes
    • Void
      • When a function returns nothing — usually used with side effects like click handlers
    • Enum
      • A set of named constants
        • Used when you have a select amount of values — I like to think of these as the select lists of TS
        • String unions are also used for this same thing

    30:28 - Inference

    • Automatic detection of types
    • Typescript will try to infer your types based on their definition
    • Not every type can be inferred, leading to implicit anys and the need for explicit types

    33:25 - Getting types

    • Most popular packages already have types — you install them like npm i @types/whatever
    • If a package doesn’t have types, you have to create them yourself, which can be annoying
      • MakeTypes
      • Console log a JSON.stringify(obj), and pipe it in
    • Node has types
    • Vanilla JS has types, for the language and all of the DOM - HTMLInputElement
    • React has types
    • Typing Node modules that don’t have types

    Overall benefits

    40:39 - Type hinting

    • With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect
      • This seems like a small deal but in practice leads to being much more efficient

    42:50 - Refactoring

    • Rename a function, type, or variable and it will be updated everywhere in the project!
    • Moving a function to a new file is actually part of TypeScript
    • Drag + Drop file, update imports

    48:10 - Compiling

    • TSC vs Babel / Esbuild
    • Only TSC type checks
    • Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: ESM & Snowpack - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Testowanie na froncie - czy warto?

    Testowanie na froncie - czy warto?
    Bardzo kontrowersyjny temat. Ale chyba takie są najlepsze. Po 10-15 latach kodowania mamy swoje przemyślenia i chcemy podzielić się naszym punktem widzenia. Mamy nadzieję, że będzie kontrowersyjnie.

    Czy testowanie na froncie ma sens?
    Jak definiujemy testy jednostkowe, integracyjne i end-to-end?
    Czym różni się testowanie backendu i frontu?
    Kiedy warto testować?
    Na jakie elementy warto zwracać uwagę?
    Czym jest ROI?
    Dlaczego kiedyś programiści nie pisali testów, a software powstawał?
    Czy odchodzi pewna epoka kodowania?

    Często powstają dyskusje na temat testów, TDD i podejścia do tworzenia kodu. Mam nadzieję, że dajemy trochę argumentów do ponownego przemyślenia tematu.

    Zapraszam do wysłuchania rozmowy na Spotify, Apple Podcasts, Google Podcasts i poprostujs.pl

    Our Code Styles

    Our Code Styles

    In this episode of Syntax, Wes and Scott talk about their coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more.

    Freshbooks - Sponsor

    Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    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.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Potluck - How to Pick a Tech Stack × useEffect × setTimeout × Staying Focused

    Potluck - How to Pick a Tech Stack × useEffect × setTimeout × Staying Focused

    In this episode of Syntax, Wes and Scott answer your questions about picking the right tech stack, whether useEffect is still useful, benefit to use uses setTimeout, and more!

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    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.

    Auth0 - Sponsor

    Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. a0.to/syntax

    Show Notes

    Converting JS to TypeScript

    Converting JS to TypeScript

    In this episode of Syntax, Wes and Scott talk about their respective processes for converting JavaScript to TypeScript in their projects, why you might want to, and tooling for moving to TypeScript.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats