--- title: Best LogRocket posts — September 2024 | daily.dev description: The most upvoted LogRocket posts from September 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/logrocket/best-of/2024/09 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/logrocket/best-of/2024/09 og:type: website og:site_name: daily.dev og:title: Best LogRocket posts — September 2024 | daily.dev og:description: The most upvoted LogRocket posts from September 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of LogRocket — September 2024 1. 1 [](https://daily.dev/posts/types-vs-interfaces-in-typescript-7poyzocja "Types vs. interfaces in TypeScript") Article LogRocket · 2y Types vs. interfaces in TypeScript Types and interfaces in TypeScript are tools used to define the shape of data, and each has specific use cases and capabilities. While interfaces define contracts for objects, types offer more flexibility, allowing for union types, conditional types, and more. Interfaces support declaration merging and extending other interfaces, but types are preferred for complex type manipulations due to advanced features. In many scenarios, the choice between the two can depend on personal preference. 716 16 2. 2 [](https://daily.dev/posts/understanding-jwt-oauth-and-bearer-tokens-8cuqxswdw "Understanding JWT, OAuth, and Bearer tokens") Article LogRocket · 2y Understanding JWT, OAuth, and Bearer tokens In the digital world, authentication and authorization are essential for secure access to online services. JWTs (JSON Web Tokens), OAuth, and Bearer tokens play crucial roles in ensuring security. JWTs are tamper-proof tokens composed of three parts: header, payload, and signature, used for securely transmitting information. OAuth typically utilizes JWTs to transport user information securely. Bearer tokens, included in HTTP headers, authenticate users for accessing protected resources. Understanding these concepts helps improve web security. 244 5 3. 3 [](https://daily.dev/posts/mastering-promise-cancellation-in-javascript-pqle7qbcs "Mastering promise cancellation in JavaScript") Article LogRocket · 2y Mastering promise cancellation in JavaScript Promises in JavaScript simplify handling asynchronous operations by avoiding 'callback hell.' The traditional method of resolving or rejecting a promise can now be streamlined using the new \`Promise.withResolvers()\` method, enhancing code readability. However, Promises lack built-in cancellation. Using \`AbortController\` or reactive programming libraries like RxJS with Observables offers more control, including cancellation capabilities. Promises are ideal for single operations, whereas Observables manage data streams, allowing for multiple emissions and cancellations. 164 3 4. 4 [](https://daily.dev/posts/jwt-authentication-best-practices-and-when-to-use-it-d0d1tym5n "JWT authentication: Best practices and when to use it") Article LogRocket · 2y JWT authentication: Best practices and when to use it JWTs are a widely used method for secure data transmission between parties. Although beneficial for API authentication and inter-service communication, JWTs pose challenges, especially in sessions due to token invalidation and storage issues. For secure use, store JWTs in HttpOnly cookies and utilize HTTPS. Consider alternatives for session management to address the limitations and potential security risks associated with JWTs. 150 4 5. 5 [](https://daily.dev/posts/building-telegram-mini-apps-with-react-m3qks0xgt "Building Telegram Mini Apps with React") Article LogRocket · 2y Building Telegram Mini Apps with React Telegram recently launched Mini Apps integration, allowing developers to build various applications within the Telegram ecosystem. These apps offer a native-like experience, bypassing the lengthy app store approval processes. This tutorial covers the creation of a full-stack ecommerce application using React, Node.js, and Postgres with Stripe integration for payments, all to run as a Mini App on Telegram. 148 2 6. 6 [](https://daily.dev/posts/how-to-build-scalable-micro-frontends-with-vike-and-vite-uc1j4w8ga "How to build scalable micro-frontends with Vike and Vite") Article LogRocket · 2y How to build scalable micro-frontends with Vike and Vite Micro-frontends allow large web applications to be split into manageable, independently scalable parts using different frameworks and tools. Vite's fast build times make it ideal for this architecture, especially with the addition of Vike for server-side rendering (SSR) and static site generation (SSG). This tutorial covers how to use Vike and vite-plugin-federation to build scalable micro-frontends, using Vike as the host and a Vite+Vue project for shared components. 141 7. 7 [](https://daily.dev/posts/node-js-performance-hooks-and-measurement-apis-myjyk7hso "Node.js performance hooks and measurement APIs") Article LogRocket · 2y Node.js performance hooks and measurement APIs Node.js provides built-in performance hooks and measurement APIs to help identify and address performance bottlenecks in applications. By using these tools, developers can achieve higher precision in measuring execution times, mark key events in the code, and use Prometheus for exporting performance data. The post covers methods like performance.now, performance.mark, and performance.measure for comprehensive performance monitoring, and provides examples of optimizing database queries and sorting algorithms. It also introduces the use of worker threads for offloading computationally intensive tasks without blocking the main thread. 134 8. 8 [](https://daily.dev/posts/types-of-fonts-and-when-to-use-them-b2smnoyls "Types of fonts and when to use them") Article LogRocket · 2y Types of fonts and when to use them Understanding typography is crucial for creating clean, high-quality websites. Typography affects visual hierarchy, readability, and user experience. Different font types like serif, sans-serif, script, and display serve various purposes and convey different moods. Key considerations include accessibility, font contrast, and pairing techniques. Tools like Fontshare, Fontjoy, and WhatFont can help in selecting and combining fonts effectively. 100 4 9. 9 [](https://daily.dev/posts/creating-an-animated-hamburger-menu-icon-for-react-h3v8rzuuf "Creating an animated hamburger menu icon for React") Article LogRocket · 2y Creating an animated hamburger menu icon for React Learn how to create an animated hamburger menu icon in React using the \`hamburger-react\` library and custom CSS animations. The tutorial covers installation, basic implementation, advanced customization, and accessibility enhancements. It also dives into state management using React Context, allowing various components like Sidebar and BackgroundOverlay to respond dynamically to the menu's state. Comprehensive examples and an invitation to try LogRocket for monitoring frontend performance are included. 93 3 10. 10 [](https://daily.dev/posts/nitro-js-revolutionizing-server-side-javascript-kmail5g21 "Nitro.js: Revolutionizing server-side JavaScript") Article LogRocket · 2y Nitro.js: Revolutionizing server-side JavaScript Nitro.js is a universal server toolkit designed to simplify the creation of performant and scalable server-side JavaScript applications. It's used as the server engine for Nuxt v3 and is built on the lightweight h3 framework. Key features include universal deployments, TypeScript out-of-the-box, automatic module imports, file-based routing, and built-in caching. Nitro.js offers zero configuration setup, supports multiple platforms, and enhances developer experience by reducing boilerplate code. It is part of the UnJS ecosystem and supports hot module reloading, making it a robust choice for building and deploying modern web applications. 90 11. 11 [](https://daily.dev/posts/choosing-the-best-color-combinations-for-ux-design-mcp0klm44 "Choosing the best color combinations for UX design") Article LogRocket · 2y Choosing the best color combinations for UX design Colors play a crucial role in UX design by enhancing usability, brand identity, and emotional connections. Understanding color psychology, the color wheel, and principles like the 60-30-10 rule can help designers create effective color combinations. Tools such as PaletteMaker, Adobe’s Contrast Checker, and Adobe Color aid in selecting and testing palettes. Designers must ensure their choices meet accessibility standards and consider user behavior through A/B testing. Real-world examples like Headspace and Mondly illustrate the impact of thoughtful color selection in UX. 54 1 12. 12 [](https://daily.dev/posts/auth-js-adoption-guide-overview-examples-and-alternatives-o9zxm5rtk "Auth.js adoption guide: Overview, examples, and alternatives") Article LogRocket · 2y Auth.js adoption guide: Overview, examples, and alternatives Auth.js simplifies the implementation of user authentication in web applications, supporting various strategies like OAuth and SSO. Originally called NextAuth, it was redesigned to work not just with Next.js but various JavaScript frameworks. With built-in support for numerous databases, Auth.js handles essential functionalities such as user registration, login, and session management. Despite its learning curve and some criticisms, it remains a comprehensive solution for secure authentication. The guide provides a step-by-step tutorial to set up Auth.js in a Next.js project and demonstrates its customization capabilities. 47 13. 13 [](https://daily.dev/posts/delivering-angular-apps-in-online-vs-offline-modes-f4vrxmk1z "Delivering Angular apps in online vs. offline modes") Article LogRocket · 2y Delivering Angular apps in online vs. offline modes Delivering web applications that function seamlessly both online and offline is crucial. Angular provides tools like service workers and caching strategies to build Progressive Web Apps (PWA) that work offline and sync data once connectivity is restored. This post guides you through creating such an application, configuring service workers, and monitoring network connectivity with basic browser APIs and the ng-connection-service package. 42 14. 14 [](https://daily.dev/posts/developing-modals-using-only-css-and-the-popover-api-nytzmn4v6 "Developing modals using only CSS and the Popover API") Article LogRocket · 2y Developing modals using only CSS and the Popover API Learn how to develop accessible modals using only HTML and CSS by combining the Dialog and Popover APIs. This approach reduces the need for JavaScript, making the code simpler and less error-prone. The guide covers how to style the backdrop, prevent scrolling, and ensure accessibility for keyboard and assistive technology users. 37 2 15. 15 [](https://daily.dev/posts/tauri-adoption-guide-overview-examples-and-alternatives-qawf2gelf "Tauri adoption guide: Overview, examples, and alternatives") Article LogRocket · 2y Tauri adoption guide: Overview, examples, and alternatives Tauri is a toolkit designed for building lightweight, secure, and cross-platform desktop applications using web technologies. Unlike Electron, Tauri leverages the host operating system’s native webview, resulting in smaller and more efficient applications. This guide explores Tauri’s capabilities, architecture, and how it compares to other tools like Electron. Additionally, it provides a hands-on quickstart for setting up a new Tauri project and highlights key features such as custom commands, error handling, and integrating front-end frameworks for UI development. Tauri's architecture, using Rust for the backend, offers significant benefits in performance and security. 33 16. 16 [](https://daily.dev/posts/how-to-create-a-hamburger-menu-2v7wipghm "How to create a hamburger menu") Article LogRocket · 2y How to create a hamburger menu The hamburger menu, characterized by its three horizontal bars, is a widely used UI element for hiding additional navigation options in mobile and web interfaces. Its use began with the advent of mobile interfaces to save space and simplify designs. While it offers advantages like reducing clutter and cognitive load, it has drawbacks including reduced discoverability and increased interaction costs. Effective use requires careful consideration of the user's needs and context, with alternative navigation icons like the bento and kebab offering different visual and functional benefits. Usability testing and best practices, such as clear labeling and appropriate placement, are essential for maximizing the menu's effectiveness. 23 [See all LogRocket archives](/sources/logrocket/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/logrocket/best-of/2024/09#page","url":"https://daily.dev/sources/logrocket/best-of/2024/09","name":"Best LogRocket Posts — September 2024","description":"The most upvoted LogRocket posts from September 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/logrocket/best-of/2024/09#items","numberOfItems":16,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/types-vs-interfaces-in-typescript-7poyzocja","name":"Types vs. interfaces in TypeScript"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/understanding-jwt-oauth-and-bearer-tokens-8cuqxswdw","name":"Understanding JWT, OAuth, and Bearer tokens"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/mastering-promise-cancellation-in-javascript-pqle7qbcs","name":"Mastering promise cancellation in JavaScript"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/jwt-authentication-best-practices-and-when-to-use-it-d0d1tym5n","name":"JWT authentication: Best practices and when to use it"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/building-telegram-mini-apps-with-react-m3qks0xgt","name":"Building Telegram Mini Apps with React"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/how-to-build-scalable-micro-frontends-with-vike-and-vite-uc1j4w8ga","name":"How to build scalable micro-frontends with Vike and Vite"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/node-js-performance-hooks-and-measurement-apis-myjyk7hso","name":"Node.js performance hooks and measurement APIs"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/types-of-fonts-and-when-to-use-them-b2smnoyls","name":"Types of fonts and when to use them"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/creating-an-animated-hamburger-menu-icon-for-react-h3v8rzuuf","name":"Creating an animated hamburger menu icon for React"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/nitro-js-revolutionizing-server-side-javascript-kmail5g21","name":"Nitro.js: Revolutionizing server-side JavaScript"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/choosing-the-best-color-combinations-for-ux-design-mcp0klm44","name":"Choosing the best color combinations for UX design"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/auth-js-adoption-guide-overview-examples-and-alternatives-o9zxm5rtk","name":"Auth.js adoption guide: Overview, examples, and alternatives"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/delivering-angular-apps-in-online-vs-offline-modes-f4vrxmk1z","name":"Delivering Angular apps in online vs. offline modes"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/developing-modals-using-only-css-and-the-popover-api-nytzmn4v6","name":"Developing modals using only CSS and the Popover API"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/tauri-adoption-guide-overview-examples-and-alternatives-qawf2gelf","name":"Tauri adoption guide: Overview, examples, and alternatives"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/how-to-create-a-hamburger-menu-2v7wipghm","name":"How to create a hamburger menu"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"LogRocket","item":"https://daily.dev/sources/logrocket"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/logrocket/best-of"},{"@type":"ListItem","position":5,"name":"September 2024"}]}]} ```