Best of JavaScript — September 2024

  1. 1
    Article
    Avatar of devtoDEV·2y

    React Mindset: How New React Developers Should Think

    React, a prominent JavaScript library for building user interfaces, enhances front-end development through reusable components and efficient UI management. New developers should adopt key principles such as thinking in components, embracing declarative programming, understanding state and props, prioritizing composition over inheritance, managing unidirectional data flow, mastering JSX, using hooks, and testing/debugging early to create modular, scalable, and maintainable applications.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    30+ app ideas with complete source code

    Discover over 30 exciting project ideas with complete source code to help developers generate revenue or build their reputation. Learn to integrate AI features into React apps using CopilotKit, build backends with Appwrite, and use various other tools like Resend, Shadcn UI, Buildship, Taipy, XYflow, Pieces, and Typesense. Each project description includes a popular app built with that tool, showcasing its practical application.

  3. 3
    Article
    Avatar of medium_jsMedium·2y

    Variable Naming Best Practices in JavaScript

    Effective variable naming in JavaScript involves using 'let' and 'const' instead of 'var', choosing clear and descriptive names, adopting camel case convention, using uppercase for constants, avoiding single-letter names, using plurals for arrays, and prefixing boolean variables. Establishing and adhering to a naming convention improves code readability and maintainability.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    35+ Free React templates and themes

    This collection offers over 35 high-quality free React templates and themes suitable for various projects such as admin dashboards, landing pages, blogs, and online portfolios. The list includes resources specifically designed to kickstart your development process with pre-designed components, dark and minimalistic designs, and modern UI elements. Each template comes with unique features like responsive layouts, customizable elements, and extensive documentation to facilitate easy setup and use.

  5. 5
    Article
    Avatar of devtoDEV·2y

    Get Screen Size in Pure CSS

    Learn how to use pure CSS to get screen size measurements, define custom properties, and perform mathematical operations on those properties. This method updates in real-time without JavaScript, utilizing new CSS features like @property, atan2, and tan functions.

  6. 6
    Article
    Avatar of logrocketLogRocket·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.

  7. 7
    Article
    Avatar of learn_javascriptLearn JavaScript·2y

    Javascript: Event loop visualizer for learners

    Albert, a software engineer, introduces a pet project called 'Event Loop Explorer' designed to help learners grasp the fundamentals of the JavaScript event loop. The tool visualizes various aspects of the event loop, including web APIs, request animation frames, macro and micro tasks, and the call stack. Users can modify code in the editor or choose from existing examples.

  8. 8
    Article
    Avatar of devtoDEV·2y

    Why React Won the Front-End Race

    React has won the front-end race due to its powerful backing by Meta, flexibility as a library rather than a framework, component-based architecture with JSX, the impressive Virtual DOM, multiple state management options, and the introduction of hooks. Its vast ecosystem and the capabilities of React Native further solidify its dominance, making it a go-to tool for modern web development despite its inherent complexities.

  9. 9
    Article
    Avatar of asayerasayer·2y

    HTMX 2.0 is here: Everything you must know about it

    HTMX 2.0, released in June 2024, brings several significant improvements to the JavaScript library used for creating dynamic web applications directly in HTML. New features include better support for Web Components, adherence to HTTP standards, and improved extension management. The new version addresses limitations and non-standard behaviors of HTMX 1.0, and migration to HTMX 2.0 requires minimal effort due to the focus on backward compatibility. A public roadmap is being developed, and more details can be found through the HTMX community and GitHub page.

  10. 10
    Article
    Avatar of communityCommunity Picks·2y

    Shadcn Form Builder

    Quickly create forms using Shadcn along with react-hooks-form and Zod for efficient form building and validation.

  11. 11
    Article
    Avatar of devtoDEV·2y

    Mastering JavaScript Arrays: Techniques, Best Practices, and Advanced Uses

    Arrays in JavaScript are versatile structures used to organize, access, and manipulate collections of data efficiently. They support dynamic resizing, various types of data, and come with built-in methods for common tasks like addition, deletion, and iteration. Javascript arrays can be created using different syntaxes, including literal notation and the new keyword, and have numerous methods for transforming and querying data.

  12. 12
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    New React 19 Features You Should Know – Explained with Code Examples

    React 19 focuses on simplifying the development process by automating performance optimizations and removing the need for manual memoization hooks like `useMemo` and `useCallback`. The new compiler transforms React code into optimized JavaScript, and features like the `use()` hook streamline data fetching and context handling. Simplified ref handling and form management enhancements also contribute to cleaner and more efficient code.

  13. 13
    Article
    Avatar of devtoDEV·2y

    How JS works behind the scenes?

    JavaScript operates in a single-threaded environment, executing code within Global or Functional Execution Contexts. The Global Execution Context is created when a code file is loaded, and it sets up the global object and variables. Each function invocation creates a Functional Execution Context. JavaScript has two execution context phases: memory allocation and execution. The Call Stack manages these contexts using a Last-In-First-Out (LIFO) approach, ensuring functions are executed sequentially. Despite being single-threaded, JavaScript can perform asynchronous operations, to be discussed in a subsequent post.

  14. 14
    Article
    Avatar of joshwcomeauJosh W Comeau·2y

    The Undeniable Utility Of CSS <code>:has<

    The CSS :has pseudo-class is a new and powerful tool that enables styling of parent elements based on their children, working in a 'bottom-up' fashion. This capability opens up numerous possibilities, such as cleaner state-based styling and global event detection without JavaScript. Although it offers compelling advantages, its current 92% browser support necessitates fallback strategies. Practical examples demonstrate :has's ability to solve complex problems effortlessly, although in some cases JavaScript may still be more suitable. The post also showcases practical applications and experiments to highlight its versatility and utility.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    Using JavaScript Generators to Visualize Algorithms

    Learn how to utilize JavaScript generators to create a step-by-step visualization of algorithms like Bubble Sort. By modifying the algorithm to be a generator, you can pause and resume execution, allowing for an interactive visualization of the array's state at each iteration. Examples and links to a comprehensive sorting algorithm visualizer are provided.

  16. 16
    Article
    Avatar of communityCommunity Picks·2y

    Bad questions for Senior Frontend Dev Interview

    The current landscape of technical interviews for Senior Frontend Developers often includes questions that fail to assess practical experience and real-world problem-solving skills. Common questions like the workings of the Event Loop, differences between arrow functions and regular functions, or memory management often focus on rote memorization rather than actual expertise. The post argues for more meaningful, experience-based questions that better evaluate a candidate’s ability to apply theoretical knowledge practically.

  17. 17
    Article
    Avatar of communityCommunity Picks·2y

    Clean React with TypeScript

    The post explores how to integrate TypeScript seamlessly into React applications. It covers typing React components, managing state with useState and useReducer hooks, handling refs for DOM elements, and working with events. It provides practical examples and tips to ensure clean and maintainable code.

  18. 18
    Video
    Avatar of fireshipFireship·2y

    Deno 2 is here… will it actually kill Node.js this time?

  19. 19
    Article
    Avatar of communityCommunity Picks·2y

    Leave useEffect Alone!

    Frontend development can be as intricate as backend work, especially when managing state and optimizing performance in React applications. The popular useEffect hook, while useful for synchronizing components with external factors, can often lead to issues like unnecessary re-renders and race conditions if misused. This post outlines common mistakes and best practices to avoid such pitfalls, offering solutions for proper cleanup, efficient data flow, and minimizing redundant renders. Guidance is provided on when it's appropriate to use useEffect, including initialization, managing external resources, and handling unmounted components without fear of memory leaks.

  20. 20
    Article
    Avatar of devtoDEV·2y

    100+ React E-Commerce Components for Modern Stores

    TailGrids offers over 100 eCommerce UI components specifically designed for React and Tailwind CSS, enabling developers to create scalable, high-performance, and user-friendly online stores with ease. These components cover every aspect of an eCommerce platform, from checkout flows to product carousels, and are fully customizable and responsive across all devices. Additionally, TailGrids provides three pre-built eCommerce templates to kickstart your development.

  21. 21
    Article
    Avatar of communityCommunity Picks·2y

    Why do React components need to start with capital letters?

    React components must start with capital letters for Babel to distinguish them from native HTML elements. When a name starts with a capital letter, Babel converts it to a React Fiber object, essential for React's rendering system. Lowercase names are treated as strings, not components.

  22. 22
    Article
    Avatar of webaccidentsWeb Accidents·2y

    Building a SOLID Pokémon Game in React: A Developer’s Adventure!

    This post explores how to build a Pokémon game in React by applying SOLID principles. It provides examples of breaking down components for Single Responsibility, using Higher-Order Components for Open/Closed, a base component for Liskov Substitution, and context for Dependency Inversion. The post includes a cheatsheet summarizing each SOLID principle with practical tips.

  23. 23
    Article
    Avatar of communityCommunity Picks·2y

    3D Book Flip Cover

    The post explains how to use HTML, CSS, and JavaScript preprocessors in CodePen to enhance your coding experience. It also covers linking to external resources using both secure (https) and non-secure (http) protocols, as well as how to properly apply vendor prefixes for cross-browser support. Additional tips include autosaving and live preview configurations in CodePen.

  24. 24
    Article
    Avatar of communityCommunity Picks·2y

    PGlite - run Postgres everywhere

    PGlite is a WASM-based Postgres database that works in various JavaScript runtimes, including NodeJS, BUN, Deno, and browsers. It's lightweight, supports popular Postgres extensions, and is ideal for local-first applications, prototypes, local caches, and CI pipelines. The database can be easily installed via npm and used with regular SQL queries.

  25. 25
    Video
    Avatar of youtubeYouTube·2y

    The Most Important Design Pattern in React

    Learn the most important design pattern for React applications, which involves breaking down large components into smaller, reusable components that follow the single responsibility principle. This approach makes code more efficient, readable, and easier to maintain. The author also offers a free document with examples of 10 other crucial design patterns via their newsletter.

See all JavaScript archives