Best of JavaScript — August 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    Bye Bye, Try-Catch Blocks: Meet JavaScript's Safe Assignment Operator Proposal😉

    The proposed Safe Assignment Operator (`?=`) in JavaScript aims to simplify error handling by reducing the need for traditional try-catch blocks. This operator transforms function results into a tuple, improving code readability and consistency across APIs. It also automatically handles errors, enhancing security. Inspired by constructs in languages like Go, Rust, and Swift, it supports integration with Promises and async functions and offers customizable error handling via `Symbol.result`.

  2. 2
    Article
    Avatar of devtoDEV·2y

    🖥️ Windows 11 Clone with React.js

    A developer created a Windows 11 clone web app using React.js, mimicking various Windows 11 functions like an interactive desktop environment, taskbar with start menu, and applications such as Chrome, Calculator, and VS Code. Other features include a responsive frontend and a simulated login screen. The technical stack includes React.js, Tailwind CSS, React Router DOM, Framer Motion, and React Draggable. The source code and demo are available on GitHub.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    Every React Concept Explained in 5 Minutes

    React is a versatile JavaScript library for building front-end code efficiently. Key concepts include Components, JSX, Fragments, Props, State, Lifecycle Methods, Purity, Strict Mode, Hooks, Context API, Lists and Keys, Controlled and Uncontrolled Components, and React Router. Understanding these concepts enables efficient development of interactive and dynamic web applications using React.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    Create beautiful images of your code

    Learn how to create visually appealing images of your code using Raycast API. Customize by adjusting themes, background, dark mode, padding, and language to enhance readability.

  5. 5
    Article
    Avatar of logrocketLogRocket·2y

    JavaScript design patterns guide

    Developers use design patterns as reusable solutions to common problems. This guide demonstrates several JavaScript design patterns, including creational (factory and builder), structural (adapter and decorator), and behavioral (chain of responsibility and strategy) patterns. Each pattern is illustrated with practical code examples to aid understanding.

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

    Most common used methods in js

    An overview of commonly asked JavaScript methods in interviews, covering array, string, object, number, miscellaneous, date, and function methods. Detailed descriptions of each method include map(), filter(), reduce(), split(), replace(), Object.keys(), parseInt(), setTimeout(), JSON.stringify(), getDate(), call(), apply(), and bind().

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    101 React Tips & Tricks For Beginners To Experts ✨

    This comprehensive guide shares 101 React tips and tricks collected over 5 years of professional experience. It covers a wide range of topics including component organization, design patterns, state management, code optimization, debugging, testing, hooks, and useful React libraries/tools. Key takeaways include efficient use of props, state, and context, leveraging design patterns and memoization, and employing critical React libraries for enhanced development.

  8. 8
    Video
    Avatar of communityCommunity Picks·2y

    Implement Clean Architecture in Next.js

    Clean architecture, a concept developed by Robert Martin, integrates various software architectures like hexagonal, onion, and others into a cohesive framework. It focuses on ensuring that the business logic of an application remains independent of frameworks, UI, databases, and external agencies. The post discusses implementing clean architecture in a Next.js application, highlighting the importance of separating different concerns through layers. It explains how to structure code to make applications more testable and maintainable. Key aspects include dependency injection, unit testing, and the interaction between different architectural layers.

  9. 9
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    Create a PC game using JavaScript

    Learn to create a Flappy Bird-like game in JavaScript using the KAPLAY library and package it for PC installation with Tauri. The comprehensive course includes setting up the development environment, loading assets, implementing player logic, building the game, and creating a score UI. Suitable for beginners and experienced developers, this tutorial provides practical hands-on experience in game development and desktop application packaging.

  10. 10
    Article
    Avatar of itnextITNEXT·2y

    Frontend Performance Love Story

    Discover innovative methods to enhance frontend performance, focusing on optimizing the initial load and fast page navigation. Learn about the Neo client approach using small JavaScript HTML-generators, avoiding server-side rendering (SSR) and hydration complexities. Explore the challenges of bundling tools with apps that allow user-generated code at runtime, and how to run development and production versions concurrently. Interactive multi-window views and upcoming performance boosts are also discussed.

  11. 11
    Article
    Avatar of robinwieruchRobin Wieruch·2y

    React is a Full-Stack Framework

    React has evolved into a full-stack framework with the introduction of Server Components and Server Actions, allowing for seamless integration between frontend and backend. This paradigm shift has created an environment where TypeScript has become the industry standard, and tools like tRPC make calling backend functions more efficient. While initially popular as a frontend framework, React's new capabilities, especially as implemented in Next.js, empower developers to directly access server-side resources. This marks the beginning of a new era of full-stack development where React developers can implement features across the entire stack, from UI to database.

  12. 12
    Article
    Avatar of communityCommunity Picks·2y

    Encore.ts — 9x faster than Express.js & 3x faster than Bun + Zod

    Encore.ts is an Open Source backend framework for TypeScript, boasting performance numbers 9x faster than Express.js and 3x faster than Bun with Zod. Its architecture leverages a multi-threaded event loop using Rust, and precomputes request schemas to optimize performance. With infrastructure integrations built in Rust, Encore.ts aims to off-load non-business logic from the JavaScript event loop, making backend applications highly optimized for speed and efficiency while maintaining compatibility with Node.js.

  13. 13
    Video
    Avatar of communityCommunity Picks·2y

    JavaScript Visualized - Closures

  14. 14
    Article
    Avatar of phProduct Hunt·2y

    PlaceholderJS - Ridiculously simple and lightweight placeholders

    PlaceholderJS is a simple and lightweight tool for creating placeholders, launched by an open-source developer. Featured in Productivity and Developer Tools, its first debut was on August 15th, 2024.

  15. 15
    Article
    Avatar of logrocketLogRocket·2y

    Next.js View Transitions API

    User expectations for seamless web application experiences have led to the development of the View Transitions API. This API enhances navigation, providing smooth and fluid transitions between views in both single-page (SPA) and multi-page apps (MPA). Implementing transitions is simplified with the next-view-transitions library, which integrates smoothly with Next.js. The post outlines how to set up a Next.js project, install the library, and build components to showcase transitions, highlighting the ease of use, performance optimization, and consistency of using the library compared to manual implementation.

  16. 16
    Article
    Avatar of hnHacker News·2y

    instantdb/instant: The realtime client-side database

    Instant is a client-side database designed to simplify the creation of real-time and collaborative applications. It allows you to write relational queries, handles data fetching, permission checking, offline caching, optimistic updates, and rollbacks. It features multiplayer queries by default and supports ephemeral updates. SDKs are available for Javascript, React, and React Native. Instant uses a Postgres backend with a sync server written in Clojure and offers a free tier for quick startups.

  17. 17
    Article
    Avatar of asayerasayer·2y

    Exciting New Features in TypeScript 5.5

    TypeScript 5.5 introduces several new features designed to improve code safety and developer experience. Key updates include refined type-checking algorithms, inferred type predicates, improved control flow narrowing, and syntax checking for regular expressions. Additionally, new methods for Set operations such as union, intersection, difference, and symmetric difference have been added, enhancing code efficiency and readability. This version remains backward-compatible and addresses deprecated features from earlier updates.

  18. 18
    Article
    Avatar of webtoolsweeklyWeb Tools Weekly·2y

    JS Libraries, React Tools, Uncats

    Discover cutting-edge tools and libraries for JavaScript and React development. Learn about WorkOS, a modern identity platform for B2B SaaS, and various JavaScript frameworks like TargetJ and Z.Js. React developers can explore tools like nextjs-use-php and @pheralb/toast. Additionally, find unique tools in the 'Uncategorizables' section, such as roadmap.sh and FastUI.

  19. 19
    Article
    Avatar of devtoDEV·2y

    Hidden cost of frontend frameworks

    Modern frontend frameworks like React, Svelte, and Vue offer impressive engineering feats, but they come with hidden costs. Developers often end up managing numerous dependencies, which can make projects complex and difficult to maintain over time. Additionally, the rapid evolution of these frameworks can lead to frequent updates and increased technical debt. It's important to choose the right tool for the job, avoid unnecessary complexity, and focus on long-term developer experience.

  20. 20
    Article
    Avatar of communityCommunity Picks·2y

    Nue 1.0 (Beta)

    Nue 1.0 (Beta) introduces an intuitive web framework designed for UX developers. It simplifies web development, reducing reliance on extensive JavaScript and complex frameworks like React. Key features include a global design system, improved CSS theming, seamless view transitions, and easier setup. The latest release also includes extensive documentation and various enhancements to streamline building professional websites quickly and efficiently.

  21. 21
    Article
    Avatar of asayerasayer·2y

    Debugging TypeScript with Visual Studio Code

    Learn how to configure Visual Studio Code for debugging TypeScript code with a step-by-step guide. The guide covers generating tsconfig.json, setting up transpilation configurations, creating and modifying the launch.json file, and using VS Code's debugging tools. Includes practical examples and instructions for setting up automatic code transpilation.

  22. 22
    Article
    Avatar of communityCommunity Picks·2y

    Why Is Next.Js 15 Revolutionizing Web App Development?

    Next.js 15 Release Candidate introduces major updates aimed at enhancing web application development. Key features include full support for React 19 RC, revamped caching strategies with configurable invalidation periods, and experimental Partial Prerendering for hybrid rendering approaches. Additionally, the release introduces a new next/after API for handling secondary tasks post-response and updates to the create-next-app tool, including support for Turbopack. Improvements in bundling external packages and hydration error handling further optimize performance and simplify debugging. Developers are encouraged to explore these features to prepare for the official release.

  23. 23
    Article
    Avatar of rustdevsRust Developers·2y

    Rust is taking over

    Rspack 1.0, a Rust-based JavaScript bundler, is 10 times faster than Webpack and is compatible with most Webpack APIs. It is utilized by major companies such as Microsoft, Amazon, and TikTok, boasting 100k npm downloads per week and usage in 1000 ByteDance apps. Improvements include enhanced performance, compatibility, bundle handling, APIs, and TypeScript support.

  24. 24
    Article
    Avatar of bytesdevBytes by ui.dev·2y

    React Native goes stable

    React Native has moved closer to a stable release with its v0.75 update, which includes significant bug fixes, improvements in auto-linking speed, and the integration of Yoga v3.1. The update represents a step towards better developer experience and addressing long-standing interoperability issues. Additionally, there are changes on the horizon such as the sunsetting of the 'react-native init' command, further promoting the use of Expo. Also discussed are improvements and benefits offered by QA Wolf, a tool for enhanced QA testing efficiency.

  25. 25
    Video
    Avatar of communityCommunity Picks·2y

    6 Best Websites For Web Developers (2024)

See all JavaScript archives