Logo
    Search

    Podcast Summary

    • Google Chrome's new approach to measuring user experienceGoogle Chrome's new approach focuses on user interactions, not just page load times, to evaluate user experience.

      Google Chrome is working on expanding the measurement of user experience beyond just complete page loads. This initiative, detailed in a GitHub issue, raises questions about the impact on best practices like deferring scripts, style sheets, images, and fonts. However, according to the discussion on Syntax, the importance of these tools like Lighthouse lies in how they are interpreted. A high score doesn't necessarily mean a good site, and a low score doesn't mean a bad one. The goal is to use the data as a roadmap and interpret it to improve the user experience. Google's new approach aims to gauge the experience of users as they interact with a website, not just when it loads. This includes measuring the speed and responsiveness of specific user actions. Ultimately, the discussion emphasizes the importance of understanding and interpreting the data from these tools to create an optimal user experience.

    • Understanding PageSpeed Insights recommendationsFocus on improving user experience while considering PageSpeed Insights suggestions. Be cautious when running NPM commands as root and ensure proper permissions. No strict rule for boolean naming conventions, consider clarity and consistency.

      While tools like Google PageSpeed Insights can provide valuable insights for optimizing website performance, it's essential to remember that they offer suggestions, not hard rules. Focusing solely on load times and following every recommendation without considering the user experience can lead to suboptimal results. Another key takeaway is regarding the execution of NPM commands safely. While it's generally recommended not to run NPM as a root user, it's important to understand the implications of doing so. Installing packages globally without proper understanding can potentially lead to malicious behavior. Instead, ensure you have the necessary permissions to install packages within your project directory and avoid running NPM commands with sudo unless absolutely necessary. Lastly, regarding the naming convention for boolean functions and variables, there's no hard and fast rule. While prefixing with "is" or "has" can be helpful, you may encounter naming collisions when setting variables. In such cases, consider prefixing with "get" or using a descriptive name that clearly conveys the function's purpose.

    • Comparing Enums and String Unions in TypeScriptEnums offer easier comparisons and debugging with named values and behave like objects, while string unions provide flexibility with dynamic string values.

      Both enums and string unions in TypeScript serve similar purposes, but enums offer additional benefits, particularly in the context of comparisons and debugging. Enums are essentially named sets of values, and they behave like objects with properties and values. This allows for easier comparisons using the enum properties directly, making the code more readable and debuggable. Additionally, enums are the only TypeScript feature that gets compiled into actual JavaScript values, enabling their use in various applications such as populating dropdown menus. However, the choice between enums and string unions ultimately depends on personal preference and the specific use case. Another topic discussed was WebAssembly (WASM). WebAssembly is a low-level bytecode format for the web that aims to solve the problem of running complex applications in the browser without sacrificing performance. It offers benefits like improved performance, ability to run native code, and better interoperability between JavaScript and other languages. WebAssembly is already in use by many organizations and is gaining popularity due to its ability to run complex applications directly in the browser. To get started with WebAssembly, one needs to learn Rust, C++, or another supported language, and familiarize themselves with the WebAssembly API. While it may require a learning curve, the potential benefits make it a worthwhile investment for developers looking to push the limits of web applications.

    • Running other languages in the browser with WebAssemblyWebAssembly enables faster and more efficient processing of data and code by allowing other languages like Rust, C++, or Golang to run in the browser and interface with JavaScript.

      WebAssembly (WASM) is a technology that enables running other languages besides JavaScript in the browser and interfacing with them using JavaScript. Figma, a popular design program, is an excellent example of this, as most of its heavy lifting is done in C++, but it uses JavaScript and WebAssembly for interfacing. Node.js is another example of a language that can be run in a container with WebAssembly. The benefits of using WASM include the ability to run any language, such as Rust, C++, or Golang, for specific use cases that require better performance. MongoDB's Compass app is another example of a company that uses WASM for offloading heavy processing of data. While not every developer or designer needs to be an expert in WASM, it's essential to understand its capabilities and potential benefits, such as faster data processing and improved performance for specific use cases. The tooling and people who write WASM code make it accessible for others to use. Jq, a JSON processing tool, is an excellent example of a tool that runs in WebAssembly because it's written in another language and would be too slow or resource-intensive to run in the browser directly. Overall, WebAssembly is a powerful technology that can enhance digital experiences by enabling faster and more efficient processing of data and code.

    • A content platform that caters to both developer and marketing team happinessSanity offers efficient development processes for developers using JavaScript/TypeScript and an intuitive UI for marketing teams to manage content

      Sanity is a content platform that caters to the happiness of both developers and marketing teams. Developers can define data schemas using JavaScript or TypeScript, making the process efficient and enjoyable. The marketing team, on the other hand, benefits from an intuitive UI for editing and managing data. Sanity's UI is also praised for its ease of use, allowing marketing teams to create custom workflows and even get legal approvals. The speaker, who has experience using both Mac OS and Linux, shared that while Linux has its merits, it may not be as user-friendly as Mac OS, especially for those less familiar with command lines. He bought a Linux laptop as a backup but plans to sell it due to the subpar experience. Linode, a Linux host, was also discussed. Linode offers a Marketplace that allows users to install various control panels and stacks, including popular ones like Cpanel, Plesk, and MERN (MongoDB, Express, React, Node.js). This marketplace makes it easier for users to manage their servers and applications.

    • Simplifying Application Hosting with LinodeLinode offers a platform for easy hosting of React, Express apps and MongoDB, with automatic installation of essentials and firewalls. For API batching, consider GraphQL or throttling requests.

      Linode sponsors a platform that simplifies the setup process for hosting React, Express applications, and MongoDB with automatic installation of Express, React, Node.js, and firewalls. This allows for quick deployment and hosting of applications. Regarding batching requests in Node.js to an API, if the API doesn't support batching, using GraphQL is an option as it enables sending multiple requests in a single query. Alternatively, throttling or debouncing requests can help prevent overwhelming APIs. Micro frontends, a concept of using multiple frontend frameworks or versions in one project, is not a necessity for most developers. It's designed for large teams working on different parts of a site with varying tech requirements. The idea has been referred to as mini sites, micro sites, and now micro frontends, often arising from organizational bureaucracy that hinders the ability to build desired features within an existing framework.

    • Allowing teams to choose tech stack leads to efficiency in large companiesChoosing a tech stack for large companies can lead to increased efficiency, but it may require dealing with multiple frameworks and websites. Monitor performance with tools like Sentry.

      Allowing teams to choose their own tech stack can lead to increased efficiency in large companies, even if it means dealing with multiple frameworks and websites. However, this approach may not be suitable for all types of sites, especially those that require dynamic functionality. A tool like Sentry can be helpful in monitoring the performance of various sites and identifying any issues. Regarding the question about rebuilding a site in Astro and Sveltekit, while Astro is fantastic, it's not the same thing as Sveltekit, which is better suited for dynamic sites.

    • Comparing SvelteKit and Astro, each with unique use casesAstro is best for static and server-first websites, while SvelteKit and other full-stack platforms handle dynamic server data and response. Be aware of different redirect types and their implications.

      SvelteKit and Astro have different use cases and comparing them directly may not be beneficial. Astro is ideal for static and server-first websites, while SvelteKit or other full-stack platforms are necessary for dynamic server data and response. During the discussion, the topic of redirects in Express and Koa (as well as other server frameworks) was brought up. Redirects maintain the same method as the original endpoint, but changing the method, like from POST to GET, requires using specific HTTP codes like 302, 303, or 307. A 301 redirect is permanent, while 302 is temporary. Be cautious when using 301 redirects as they are permanent and can cause issues if incorrectly set. The podcast listeners shared their appreciation for the show and requested an episode about being a developer with ADHD.

    • Tools and Techniques for Individuals with ADHD to Stay FocusedIndividuals with ADHD can use focus apps, set phone usage times, create distraction-free environments, seek professional advice, and understand their condition through diagnosis to maintain focus and productivity.

      Individuals with ADHD, like the speaker in this conversation, can face challenges with concentrating on single projects and staying focused. However, they can use various tools and techniques to help them stay on track. These can include focus apps, setting up specific app usage times on phones, creating distraction-free environments, and seeking professional advice. The speaker also mentioned the importance of understanding the condition through a formal diagnosis, even if no medication is taken. The conversation highlighted the importance of finding what works best for each individual to maintain focus and productivity.

    • Managing ideas and staying focused with GitHub Issues and conventional commitsUsing GitHub Issues for managing features and linking commit messages to issues, and conventional commits for a structured commit message can help keep projects organized and focused.

      Managing ideas and staying focused can be challenging, but using tools like GitHub Issues and conventional commits can help keep projects organized and focused. Wes shared his experience of using GitHub Issues to manage features and linking commit messages to issues. He recommended including a brief explanation in the commit message for better understanding when checking git log. Scott mentioned using conventional commits for a structured commit message, but admitted he hadn't been consistent with it. They also discussed the importance of updating browsers, with most modern browsers automatically updating, but not all users keeping their browsers up-to-date. So, in summary, using GitHub Issues and conventional commits can help manage ideas and projects effectively, while keeping browsers updated ensures access to the latest features for most users.

    • Compatibility with older web browsersDevelopers face challenges in ensuring websites and applications work with outdated browsers, requiring a balance of problem-solving and creativity.

      While it's rare for individuals to run extremely outdated web browsers these days due to automatic updates, there may still be instances where older versions are used, particularly in certain organizations or situations. This can lead to compatibility issues with websites and applications. On the topic of software development, daily tasks can vary from adding new features and fixing bugs to maintaining existing functionality. Developers often find joy in creating small enhancements that make the user experience smoother, while also addressing larger issues as they arise. Overall, the role requires a balance of problem-solving and creativity.

    • Understanding REST, GraphQL, RPC, gRPC, and JSON for data transferREST and GraphQL are popular methods for transferring data, REST uses endpoints, GraphQL allows describing data, RPC and gRPC are older protocols, JSON is a common format, webhooks send data to clients, and understanding these methods can help choose the best tool for a project.

      REST and GraphQL are two common methods for transferring data between a client and a server, while RPC and gRPC are older communication protocols. REST is based on endpoints that you hit to send or receive data, while GraphQL allows you to describe what data you want and receive it in one request. RPC and gRPC are similar in that the client builds the instruction and sends it to the server, but they are less common in web development and more popular in low-power situations. JSON is a common format for data transfer, but it's not always used, and other formats like new line or tab delimited may be used in low-power devices. Webhooks are the opposite of REST requests, where the server sends data to the client when an event occurs. The speaker also mentioned that they haven't used RPC or gRPC before and find JSON sufficient for their web development needs. Overall, understanding these different methods and formats can help developers choose the best tool for their specific project and use case.

    • Wireless Charging Stand and Podcast RecommendationInvest in a practical wireless charging stand for multiple devices, listen to the It's Always Sunny in Philadelphia podcast, and learn web accessibility with Amy Kapernick's course.

      The Satechi 3 in one stand is a practical and minimal solution for wireless charging multiple devices, such as an iPhone, Apple Watch, and AirPods, all using just one cable. The stand is a great space-saver and is worth the investment despite its higher price point. Additionally, the It's Always Sunny in Philadelphia podcast featuring the actual actors of the show is a hilarious and entertaining listen. Lastly, for those interested in learning about web accessibility, Amy Kapernick's accessibility for everyone course on LevelUpTutorials.com is an excellent resource. It's user-friendly and a must-have for every developer's toolkit. Don't forget to check out the various courses offered on West boss dotcomforward/courses and leveluptutorials.com.

    Recent Episodes from Syntax - Tasty Web Development Treats

    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

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more.

    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

    779: Why SQLite is Taking Over with Brian Holt & Marco Bambini

    779: Why SQLite is Taking Over with Brian Holt & Marco Bambini

    Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let’s get into it!

    Show Notes

    • 00:00 Welcome to Syntax!
    • 01:20 Who is Brian Holt?
    • 02:26 Who is Marco Bambini?
    • 05:12 Why are people starting to talk so much about SQLite now?
    • 08:47 What makes SQLite special or interesting?
    • 09:46 What is a big misconception about SQLite?
    • 11:13 Installed by default in operating systems.
    • 12:03 A perception that SQLite is intended for single users.
    • 13:36 Convincing developers it’s a full-featured solution.
    • 15:11 What does SQLite do better than Postgres or MySQL?
    • 17:30 SQLite Cloud & local first features.
    • 20:38 Where does SQLite store the offline information?
    • 23:08 Are you typically reaching for ORMs?
    • 25:00 What is SQLite Cloud?
    • 27:29 What makes for an approachable software?
    • 29:18 What make SQLite cloud different from other hosted SQLite options?
    • 32:13 Is SQLite still evolving?
    • 34:40 What about branching?
    • 37:37 What is the GA timeline?
    • 40:04 How does SQLite actually work?
    • 41:19 Questions about security.
    • 44:28 But does it scale?
    • 45:52 Sick Picks + Shameless Plugs.

    Sick Picks

    Brian: Trainer Road
    Marco: Tennis

    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

    Syntax Highlight

    Syntax Highlight

    In this episode of Syntax, Wes and Scott review your websites that you submitted including bald.design, Anh Hoang Nguyen, bradleyshellnut.com, and more.

    Prismic - Sponsor

    NEEDS AUDIO RECORDING FIRST

    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.

    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

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    EP 117: Making AI Design User Friendly

    EP 117: Making AI Design User Friendly

    How can we make AI more accessible for everyone? What role does the design of AI play? Yaddy Arroyo, Principal VUI Designer at Truist, joins us to dive into the importance of accessibility and user experience in AI design. We also discuss the challenges and possibilities of making AI more user-friendly.

    Newsletter: Sign up for our free daily newsletter
    More on this Episode: Episode Page
    Join the discussion: Ask Yaddy and Jordan questions about AI design
    Upcoming Episodes: Check out the upcoming Everyday AI Livestream lineup
    Website: YourEverydayAI.com
    Email The Show: info@youreverydayai.com
    Connect with Jordan on LinkedIn

    Timestamps:
    [00:01:25] Daily AI news
    [00:04:30] About Yaddy and being a VUI designer
    [00:08:30] Designing in multimodality
    [00:11:50] Will chatbots become multimodal?
    [00:14:50] Accessibility: improving input methods for assistive devices
    [00:23:10] Limitations as a designer
    [00:25:10] Gen AI tools and UI/UX
    [00:28:30] Yaddy's advice for accessibility and AI

    Topics Covered in This Episode:
    1. Multimodal Input Methods and AI
    2. Accessibility and Assistive Devices
    3. Transforming the Internet and AI Capabilities
    4. Generative AI Tools and User Experience

    Keywords:
    accessibility, assistive devices, unable to move arms, pointer attached to forehead, input methods, blinks, Morse code, text input, diverse input options, companies working behind the scenes, privilege of sight, privilege of hearing, privilege of touch, generative AI, transformational technology, multimodality, images, voice recognition, handling multimodal data, special needs, creating something for their son, equitable world, democratize education, caring for others, putting humans first, equitable internet experience, one-dimensional internet, AI chips, DALL E, AI watermarks, machine learning training.

    Hasty Treat - Web Dev Resource Sick Picks

    Hasty Treat - Web Dev Resource Sick Picks

    In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks!

    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.

    Show Notes

    2:03 - Twitter Accounts

    5:00 - Web Dev Resources

    7:37 - Design Resources

    11:36 - Desktop Tools

    14:59 - YouTube

    Links

    Tweet us your tasty treats!

    Επ. 12 - Γιάννης Φενέρης - UX

    Επ. 12 - Γιάννης Φενέρης - UX
    Ο Γίαννης μου εξηγει ότι το User Experience έχει εφαρμογή σε όλη την διαδικασία παραγωγής λογισμικού, απο την αρχική επιβεβαίωση μιας ίδεας μέχρι το τελικό μενού της εφαρμογής που εντέλει θα φτάσει στον χρήστη μας. Σκοπός μας είναι να φέρουμε τον χρήστη στο κέντρο και μέσα απο μεθοδευμένες διαδικασίες να κάνουμε την εμπειρία του καλύτερη.