Best of JavaScript — October 2023
- 1
- 2
freeCodeCamp·3y
Web Animation Techniques – CSS vs JavaScript
Web animations using CSS and JavaScript play a vital role in enhancing user experience on web pages. CSS animations are easy to use, perform well, and are responsive. JavaScript animations offer more flexibility and interactivity, making them suitable for complex animations and data-driven content. A combination of both CSS and JavaScript animations can provide the best of both worlds.
- 3
- 4
DEV·3y
The Roadmap to Web Dev Mastery (Best Resources)
Learn about the complexities of today's web development landscape, including frameworks and libraries. Acquire skills for free through resources and avoid critical mistakes. Grasp the workings of a website, delve into front-end mastery with HTML, CSS, and JavaScript, optimize workflow with JavaScript frameworks, build a portfolio, and explore back-end mastery. Bright Data provides a valuable tool for accessing web data.
- 5
David Heinemeier Hansson·3y
We tried that, didn’t work
The article discusses the 'we tried that, didn't work' fallacy and emphasizes the importance of not letting unsuccessful attempts deter progress. It highlights the success of building fast, modern web applications using the #NoBuild JavaScript approach, refuting the notion that it leads to slow applications. The author encourages testing priors, questioning assumptions, and embracing the progress happening now.
- 6
Unlocking JavaScript Design Patterns: Mastering Singleton for Ultimate Code Efficiency
The Singleton pattern in JavaScript guarantees a single instance of a class and provides a global point of access to that instance. It is useful for managing shared resources or controlling access to a single point, such as a logging system. Implementing the Singleton pattern for logging in a JavaScript application offers centralized logging, consistency in working with the logger instance, and easy integration into code. Mastering the Singleton pattern can enhance the organization, maintainability, and efficiency of JavaScript applications.
- 7
Community Picks·3y
Announcing TanStack Query v5
TanStack Query v5 is released with new features, breaking changes, and improved APIs. It introduces a simplified way to perform optimistic updates, introduces suspense support, offers improved server-side rendering with Next.js, and provides better options for query definitions and persistence.
- 8
- 9
habr·3y
React + Three.js. Creating your own 3D shooter. Part 1
This article explores the integration and features of React Three Fiber, a library that combines React and Three.js for creating 3D graphics on the web. It discusses the advantages of using React Three Fiber, the relevance of web game development, and performance aspects to consider. The article provides a step-by-step guide on setting up the project, customizing the Canvas display, adding a floor surface, lighting, physics, camera movement, importing 3D models, enabling shadows, and adding animation. The next part of the article will cover further improvements to the game.
- 10
- 11
🧠 An AI / neural network...in vanilla JS! 😱 With no libraries! 🤯
Learn how to build a neural network in vanilla JavaScript without any libraries. The article covers the basics of neural networks, including the concept of neurons, back propagation, and the use of bias and weightings. It provides step-by-step code examples and demos of simple and more complex neural networks.
- 12
- 13
Hacker News·3y
Goodbye, Node.js Buffer
The article discusses the need to move from Node.js Buffer to Uint8Array for binary data handling. It highlights the incompatibilities between the two and provides guidance on transitioning from Buffer to Uint8Array. It also mentions the need for more utility methods in Uint8Array.
- 14
Towards Dev·3y
Asynchronous JavaScript
This article explores the world of asynchronous JavaScript and how it can be managed using promises and the elegant async/await syntax. It discusses the concept of asynchronous actions in JavaScript, the use of async/await keywords, the need for error handling in async/await, and the execution order of asynchronous code. With the right tools and understanding, developers can write readable and maintainable asynchronous code in JavaScript.
- 15
- 16
Web Storage Explained – How to Use localStorage and sessionStorage in JavaScript Projects
This article explains how to use web storage in JavaScript to store data locally and securely within a user's browser. It covers the differences between session storage and local storage, and provides examples for preventing To-Do items from disappearing, auto-displaying previously added tasks, checking the total items in storage, and emptying session storage.
- 17
React Custom Hook: useStorage
Discover the potential of React custom hooks with a focus on the 'useStorage' hook. It provides convenient functions for storing and retrieving data in the browser's local or session storage. The hook handles serialization, deserialization, and automatic synchronization with the component's state. The remove function allows for easy deletion of stored values. Use the hook in various scenarios, such as persisting user preferences in a settings panel.
- 18
- 19
Unit-Testing: The Unsung Hero of Code Quality 🛡️
Unit testing is essential for code quality as it acts as the first line of defense against bugs, provides immediate feedback, improves code confidence and design. However, it can be time-consuming and requires setting up a testing environment. Passing unit tests doesn't guarantee bug-free code.
- 20
Welcome to the dark side. Ree.js awaits you!
Ree.js is a lightweight web framework that is built for speed, simplicity, and compatibility. It supports URL Imports and Packit. The file size of create-reejs-app with preact feature enabled is 1mb. Reejs comes with cool tricks like the 'x' command and the 'repl' command.
- 21
Vercel·3y
How we optimized package imports in Next.js – Vercel
Next.js has optimized package imports, resulting in faster cold boots, faster builds, and improved local development speed. Barrel files, which group and export multiple modules from a single file, can cause slowdowns in importing packages. The new solution, `optimizePackageImports`, automatically maps all imports in barrel files, improving performance without the need for manual configuration. Upgrading to the latest version of Next.js is recommended for significant performance improvements.
- 22
ITNEXT·3y
SOLID in React: the good, the bad, and the awesome
This article discusses how to apply SOLID principles in React, focusing on the Single Responsibility Principle, the Open/Closed Principle, the Liskov Substitution Principle, the Interface Segregation Principle, and the Dependency Inversion Principle. It explores the separation of components into managers and workers, the importance of extension over modification, the concept of substituting supertypes with subtypes, the principle of depending only on necessary properties, and the inversion of dependencies through component composition in React.
- 23
asayer·3y
React Router for Beginners - A Complete 2023 Guide
React Router is a library that helps in handling navigation and routing in a React application. It allows you to define different routes in your app and link them to their respective components without reloading the page. React Router provides complex navigation, seamless page navigation structure, and support for dynamic URLs. To set up React Router, you need to install the react-router-dom package, wrap your app's components with the BrowserRouter component, define routes using the Route component, and use the Link or NavLink component for navigation between routes.
- 24
Why TypeScript?
TypeScript is a syntactic superset of JavaScript that adds static typing. It makes code more self-documenting and allows developers to explore how packages can be used. However, it has a learning curve, requires an additional compilation step, and its type definitions may not always be perfect. It is seen as an investment for future-proofing applications.
- 25
You can't get faster than No Build
The article discusses the state of the art in building JavaScript and CSS, highlighting the use of import maps, HTTP/2, and modern browser support. It mentions the native support for bun in Rails 7.1 and the fast and simple approach of using Hotwire and No Build.
