Best of JavaScript — July 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    8 Frontend Tools to Become a Better Developer

    Front-end developers can significantly boost their productivity and create high-quality applications by incorporating lesser-known tools into their workflows. Essential tools include Uiverse for UI elements, the Motion plugin for Figma, CSSFX for animations, Frontend Mentor for real-world coding challenges, GSAP for high-performance animations, CodePen for code experimentation, Polypane for multi-device previews, and Can I Use for browser compatibility checks.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    15 amazing things you can do with simple JavaScript 🤯

    Discover the versatile and surprising capabilities of vanilla JavaScript through practical examples. Learn how to find operating system details, prevent page refreshing, redirect users to new pages, validate emails, get the current URL, and detect mobile browsers. Additional features include handling disabled JavaScript, accessing module metadata, getting timezone offsets, setting the cursor to wait, and manipulating console messages with CSS.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    100 FREE Frontend Challenges

    The post offers a set of 100 free frontend challenges aimed at improving web development skills, focusing on HTML & CSS, with opportunities to incorporate JavaScript and other frameworks. Each challenge involves recreating a design to build a working website or web app. The goal is to foster a project-based learning approach, encouraging developers to complete all challenges and enhance their chances of landing a web development job.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    8 Exciting New JavaScript Concepts You Need to Know

    Explore 8 new and exciting JavaScript concepts including Optional Chaining, Nullish Coalescing, BigInt, globalThis, matchAll(), Promise.allSettled(), String.prototype.at(), and Error Cause. These features help in writing modern, efficient, and scalable code. Examples are provided for each concept to demonstrate their usage.

  5. 5
    Article
    Avatar of communityCommunity Picks·2y

    Frontend Libraries for Your Next Project

    Choosing the right tools in web development can drastically enhance productivity and user experience. Key frontend libraries to consider include AOS for scroll animations, Chart.js for data visualization, Luxon for date and time manipulation, SweetAlert2 for customizable alerts and modals, SortableJS for drag-and-drop sorting, Floating UI for dynamic tooltips and pop-overs, and FullCalendar for comprehensive calendar functionalities.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    React Design Patterns

    React design patterns are essential for frontend development as they offer solutions to recurring challenges in component design. They promote consistency, modularity, and scalability by simplifying state management, logic, and element composition. Examples include custom hooks, higher-order components, and prop-based rendering techniques. These patterns not only solve technical problems but also enhance code efficiency, readability, and maintainability. This guide provides insights into various patterns like Custom Hook, HOC, Extensible Styles, Compound Components, Render Props, Control Props, Props Getters, State Initializer, and State Reducer, along with their benefits and implementation examples.

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    CORS: the ultimate guide

    CORS (Cross-Origin Resource Sharing) is a security mechanism that protects users' data from being accessed by malicious websites when different origins interact. AJAX (Asynchronous JavaScript And XML) requests from web browsers are controlled by CORS rules, ensuring data confidentiality and security. This guide explains how CORS policies are configured via HTTP response headers to allow or deny access based on origin and credentials. It also highlights the dangers of misconfigured CORS policies and provides steps to define a secure CORS policy effectively.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    Why the with() method of JavaScript Array is a gem?

    The with() method in JavaScript arrays, introduced in ECMAScript 2023, allows developers to change a value at a specified index immutably, meaning the original array remains unchanged. It also supports negative indexing, which is not possible with direct indexing. The method is useful for maintaining the integrity of original data structures and enabling method chaining with other array methods like map() and filter().

  9. 9
    Article
    Avatar of bitBits and Pieces·2y

    Mastering Microfrontends: 9 Patterns Every Developer Should Know

    Microfrontend architecture allows independent frontend pieces to be developed by separate teams and integrated into a complete system, enabling faster releases and reduced complexity. The post explores nine integration patterns, such as Micro Apps, iFrames, App Shell, and Module Federation, highlighting their strengths and weaknesses. Each pattern addresses different aspects like autonomy, fault isolation, performance, technology compatibility, and flexibility. Combining multiple patterns can help leverage their strengths to meet specific project requirements and maintain long-term application efficiency.

  10. 10
    Article
    Avatar of communityCommunity Picks·2y

    face-api.js

    face-api.js is a JavaScript API built on the tensorflow.js core for face detection and recognition in browsers. It supports multiple models like SSD MobileNetV1, Tiny Face Detector, and MTCNN, each optimized for different needs. The library also provides lightweight and fast 68-point face landmark detection, face recognition using a ResNet-34 model, and face expression recognition. It can be used both in browsers and Node.js environments and includes comprehensive examples for setup and usage.

  11. 11
    Article
    Avatar of devtoDEV·2y

    Top 6 React Hook Mistakes Beginners Make

    Learning React involves not just grasping its basics but also writing clean, efficient code. Common mistakes include using state unnecessarily, not using the function version of useState, misunderstanding state updates, and unnecessary useEffect dependencies. Optimizing component rendering can be achieved through proper use of useRef and useMemo. Additionally, it's crucial to manage fetch requests properly by using AbortController to prevent memory leaks.

  12. 12
    Article
    Avatar of kdnuggetsKDnuggets·2y

    5 Free Certifications to Land Your First Developer Job

    Free certifications can be a valuable asset, especially for those switching to software development from non-tech roles. The post lists five certifications, including freeCodeCamp’s Responsive Web Design and JavaScript Data Structures and Algorithms, and Harvard’s CS50 Introduction to Computer Science, which teach essential skills through hands-on projects and coding challenges. Completing these certifications can help build an impressive project portfolio and prepare for technical interviews.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    Patterns For JavaScript Frontend Applications

    Patterns are crucial in managing the complexity of JavaScript frontend applications, much like they were in desktop and enterprise applications. By drawing on architectural patterns like MVVM, CQRS, and Flux, developers can better manage the state and interactions within their applications. Frameworks like Angular, React, and Vue help streamline these processes through structured state-management techniques. Understanding these patterns allows for sustainable and maintainable application development.

  14. 14
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    Learn Asynchronous JavaScript

    Mastering asynchronous programming is essential for modern JavaScript development, providing efficiencies and responsiveness. A new freeCodeCamp.org YouTube course offers a comprehensive guide, covering synchronous vs asynchronous programming, callbacks, promises, async/await, and the Fetch API. It includes practical projects with APIs like Chuck Norris API, Weather API, and Pokedex API to reinforce learning.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    The Differences Between 'Object', '{}', and 'object' in TypeScript

    In TypeScript, 'Object', '{}', and 'object' serve distinct purposes. 'Object' (uppercase) describes properties common to all JavaScript objects and can have boxable objects like string, boolean, etc. '{}' describes an object with no members and behaves similarly to 'Object' but represents a different concept. 'object' (lowercase) refers to any non-primitive type. 'Record<string, any>' is also often used to represent non-primitive types and is more semantic.

  16. 16
    Article
    Avatar of communityCommunity Picks·2y

    Top 15 Animation Libraries for React & Modern Javascript Apps

    Animations enhance web applications by making them more engaging and interactive. This guide explores the top 15 animation libraries for React and modern web apps, ranging from simple CSS-based options like Animate.css to powerful JavaScript libraries such as React Spring, Framer Motion, and GSAP. Specific use cases are addressed with libraries like Remotion for video generation and Vivus for SVG animations, while advanced needs can be met with Three.js and Theatre.js. Each library is evaluated based on its best use case, pros, and cons, helping you choose the right tool for your project.

  17. 17
    Article
    Avatar of devtoDEV·2y

    Image Lazy Loading

    The post introduces image lazy loading as a technique to improve React application performance. It highlights advantages such as faster initial load times, reduced bandwidth usage, smoother scrolling, and improved search engine ranking. It provides an example using both native lazy loading attributes and the `react-lazy-load-image-component` npm package. The author advises caution for certain use cases like carousels and above-the-fold images.

  18. 18
    Article
    Avatar of devtoDEV·2y

    Building a CRUD Application with the MERN Stack: A Step-by-Step Guide

    This guide walks you through building a CRUD application using the MERN stack. It covers setting up the backend with Express, MongoDB, and Mongoose, creating API routes for CRUD operations, and setting up the frontend with React. The frontend components include TodoList, TodoItem, and TodoForm, and the guide explains how to integrate these components and run the application.

  19. 19
    Article
    Avatar of syncfusionSyncfusion·2y

    React Hooks vs. Redux in 2024

    The post explores the differences between React Hooks and Redux for state management in React applications in 2024. React Hooks are ideal for simpler, component-level state management and faster development, while Redux is better suited for complex, large-scale applications with global state management. It provides an in-depth comparative analysis and examples of both approaches, highlighting their advantages, common use cases, and performance considerations.

  20. 20
    Article
    Avatar of logrocketLogRocket·2y

    7 best product tour JavaScript libraries for frontend apps

    Modern web applications often contain numerous features which can overwhelm users if not presented properly. Product tours are a structured way to guide users through these features, enhancing user experience. This post reviews seven JavaScript libraries suitable for creating product tours, highlighting their features, pros, cons, and use cases. Libraries discussed include Intro.js, Onborda, Bootstrap Tour, Driver.js, TourGuide.js, Flows, and Shepherd.js, each catering to different needs and frameworks, helping developers make an informed choice for their projects.

  21. 21
    Article
    Avatar of communityCommunity Picks·2y

    Security Best Practices for Your Node.js Application

    Node.js applications are common targets for attacks, including XSS, DoS, and brute force. This guide outlines common security threats and provides best practices to mitigate them. Techniques include using parameterized queries, sanitizing inputs, employing ORMs, implementing rate limiting, and using multi-factor authentication. The importance of using secure headers, securing dependencies, and monitoring/logging activities is also highlighted, along with practical code examples.

  22. 22
    Article
    Avatar of thedevcraftThe Dev Craft·2y

    Free, Open Source Course to Learn Full Stack Development

    The Odin Project offers an incredible, free, and open source course for learning Full Stack Development. It provides two paths: Full Stack Ruby on Rails and Full Stack JavaScript, with detailed content and an active community for support.

  23. 23
    Article
    Avatar of cerbosCerbos·2y

    Simple Role-Based Access Control in JavaScript

    Learn how to integrate Cerbos, an open-source authorization layer, with a JavaScript To-Do List application to implement role-based access control (RBAC). Understand the benefits of using RBAC and Cerbos for better security and scalability. The tutorial covers policy creation, testing, and implementation. Examples demonstrate how different permissions can be assigned to various roles such as admin and user.

  24. 24
    Video
    Avatar of t3dotggTheo - t3․gg·2y

    A Very Exciting New Chart Library

    Shaden has released a new chart library that promises ease of use and powerful customization options, built on top of technologies like D3 and Recharts. The setup process is straightforward, involving just a few commands, and the library includes numerous pre-configured chart types and components. Users can easily integrate and customize these charts to suit their needs, making it a versatile tool for developers looking to enhance their projects with dynamic data visualizations.

  25. 25
    Article
    Avatar of communityCommunity Picks·2y

    Building Microservices with nodejs nestjs #series

    The video series covers building microservices for enterprise applications using the Node.js ecosystem. It includes topics like Express/NestJS with TypeScript, deploying services with AWS CDK, and various microservice architectures such as event-driven and serverless. The series provides practical insights into deploying with AWS ECS or Lambda and discusses best practices for different microservice patterns.

See all JavaScript archives