Best of JavaScript — November 2024
- 1
- 2
asayer·2y
Best 7 Practice Projects to Level Up your Skills
Building hands-on projects is essential for web development growth. This post discusses seven practice projects - To-Do List App, Simple Calculator, Weather App, E-commerce Product Page, Tic-Tac-Toe Game, Real-time Chat Application, and Personal Portfolio Website. Each project helps enhance various skills such as JavaScript event handling, API usage, responsive design, and more. Tips for leveling up include breaking down projects, using version control, seeking help, experimenting, and continual learning.
- 3
LogRocket·2y
Build a micro-frontend application with React
Building and managing large-scale projects can be challenging, and the micro-frontend architecture is gaining popularity for handling these challenges. It extends the concept of microservices to the frontend, allowing multiple teams to work independently on different modules. React is highlighted as a strong tech stack for implementing micro-frontends due to its extensive ecosystem and community support. The post includes a practical guide on creating a micro-frontend application using React and the create-mf-app package, as well as best practices and solutions to common issues in micro-frontend development.
- 4
Community Picks·1y
✨ How to Study Frontend Development the Lazy Way
The post details two effective approaches for learning frontend development, even for complete beginners. It highlights using paid resources like FrontendMasters, or leveraging free tools and tutorials, emphasizing the importance of building projects to facilitate learning. The author shares a 7-step plan for both approaches, covering foundational courses, project-building, mastering JavaScript, and diving into React and intermediate projects.
- 5
Vite 6.0 is out!
Vite 6.0 has been released with significant updates, including a new Environment API aimed at making development closer to production. The ecosystem has grown, with more companies using Vite and new frameworks joining. ViteConf highlighted various new projects and tools, including VoidZero's Rolldown and Oxc, and StackBlitz's bolt.new. Vite's new landing page is now at vite.dev. Important changes include Node.js support updates, extended support for asset references in HTML, and improvements like postcss-load-config. Migration to Vite 6 is generally straightforward with a detailed Migration Guide and Changelog available.
- 6
JavaScript Developer·1y
How I share my code across multiple JS projects without having to use npm
The author introduces a tool called jsrepo, which allows developers to share code across multiple JavaScript projects without using npm. Instead, it uses a CLI to download 'blocks' of code from a custom registry, giving developers full control over the source.
- 7
How to Set Up Next.js 15 for Production in 2024
This tutorial guides you through setting up Next.js 15 for production in 2024, focusing on key steps and tools such as creating a new project with TypeScript and Tailwind CSS, configuring ESLint and Prettier for code quality, setting up TypeScript type checks, and integrating testing frameworks Vitest and Playwright. It also covers organizing project folders for scalability, adding i18n support, using Prisma with Postgres for database management, implementing facades for database interactions, deploying with Vercel Postgres, and setting up continuous integration and delivery using GitHub Actions.
- 8
Codrops·1y
Consecutive Scroll Animations with One Element
Explore how to create a consecutive flip animation using GSAP's ScrollTrigger and scrubbing. The post includes a demonstration of animating a single element across various waypoints while scrolling, with example HTML and JavaScript code to implement similar animations.
- 9
Framer Motion is now independent, introducing Motion
Framer Motion is transitioning into a new independent open-source project called Motion, focusing on broader community support and integration beyond React. Motion will feature vanilla JavaScript APIs, improved search functionality, and expanded documentation, aiming to serve users of various frameworks such as Vue. The move is designed to better support a wider user base and ensure future growth and innovation.
- 10
Create Scroll Animations with just CSS
Learn to create scroll-based animations using only CSS with detailed examples and code snippets. Understand how to use the animation-timeline and animation-range properties to trigger animations when elements enter the viewport. Also, explore how to handle browser compatibility with JavaScript fallbacks using IntersectionObserver or scroll event listener.
- 11
DEV·1y
⚡🚀 ReactJS, TypeScript, Vite with Redux and TanStack (React Query) In Practice ⚛️
Learn how to combine Redux with Thunk and React Query (TanStack) for managing client-side and server-side state in a ReactJS application. The guide explains setting up a Node.js Express server to handle CRUD operations and provides a step-by-step implementation of the frontend using Vite, TypeScript, Redux, and React Query. This setup leverages Redux for local UI state and React Query for asynchronous data fetching, caching, and synchronization with the server.
- 12
Conditional React hooks pattern
Refactoring internal hooks in Headless UI revealed a pattern for conditionally enabling React hooks. By passing an 'enabled' boolean as the first argument to hooks like useOutsideClick and useScrollLock, developers can control their activation based on component state, such as whether a dialog is open. This approach avoids unnecessary event listeners and memory usage, enhancing performance.
- 13
YouTube·1y
You can now build AWESOME TailwindCSS Animations!
Discover Rumbo, a new TailwindCSS plugin for creating beautiful, performant, and accessible animations effortlessly. With easy installation and a variety of pre-built classes, you can quickly enhance your projects with animations. The plugin also offers a visual editor for custom animations, making it ideal for developers seeking simple and efficient animation solutions without the complexity of traditional animation libraries.
- 14
- 15
TkDodo·2y
React Query API Design - Lessons Learned
Dominik, a frontend tech lead at Adverity and maintainer of TanStack React Query, shares insights from his talk at React Advanced in London. He discusses the challenges of API design in open source, the balance between minimal and flexible APIs, and the importance of considering types from the beginning. He also touches on managing user expectations and feedback for new features, and the significance of early user feedback in open source projects. Key points include the evolution of React Query, handling API complexity, and the role of effective API design in user adoption.
- 16
This is Angular·2y
Angular 19 - 5 Game-Changing Features You Need to Know
Angular 19 introduces significant features aimed at improving developer experience and application performance. Key updates include partial and incremental hydration for faster load times, default standalone components for simplified code structure, zoneless change detection for better performance and smaller bundles, linkedSignal for enhanced reactivity, and new resource and rxResource APIs for streamlined data retrieval.
- 17
Tech With Tim·1y
Learn JavaScript as Fast as Possible Learn JavaScript in ~75 Minutes
This post is a comprehensive video tutorial on JavaScript, aimed at experienced programmers. It covers all fundamental aspects of the language including variables, loops, conditionals, and functions, and offers a quick way to master JavaScript. The tutorial also shows how to run JavaScript in both browser and backend environments using Node.js, and includes resources for further learning.
- 18
- 19
developedbyed·1y
I finally switched from VSCode To Neovim
The post discusses the author's recent transition from VSCode to Neovim, detailing the reasons for the switch, the learning curve, and the various configurations made to set up Neovim for an efficient workflow. The author also shares their experience with burnout and their plans to create new content focusing on broader computer science concepts.
- 20
Mastering JavaScript Event Delegation
Event Delegation in JavaScript is a technique to manage events efficiently by attaching a single event listener to a parent element to handle events for its children. This method leverages event propagation, enhancing performance, control, and memory handling. It includes practical scenarios, best practices, and comparisons with direct event handling. Key benefits are reduced memory usage and improved efficiency, with support for dynamic elements.
- 21
Platformatic·1y
Bringing HTTP Caching to Node.js
Undici v7.0.0 brings client-side HTTP caching to Node.js, aligning with RFC-9111 specifications. This new feature allows developers to enhance the performance and efficiency of their applications by seamlessly integrating caching into HTTP workflows. The caching system in Undici can be configured with a variety of options and offers default in-memory and SQLite cache stores. This development marks a significant milestone in achieving standards-compliant HTTP caching for the Node.js ecosystem.
- 22
Mastering the Mysteries of JavaScript Syntax: Discover the Secrets Behind These Symbols
JavaScript boasts a diverse set of operators that enhance its power and versatility. This post explores both common and lesser-known operators, including the safe assignment operator (?=), nullish assignment operator (??=), bitwise AND (&=), double NOT (~~), bitwise OR (|=), and logical OR (||=). Each operator's purpose, usage, and best practices are thoroughly explained to help developers write more efficient and readable code.
- 23
Why Virtual DOM: Faster Rendering and Performance
Explores the Document Object Model (DOM) and the virtual DOM, detailing how the browser creates and manipulates the DOM from HTML or XML content. The virtual DOM concept is introduced as a performance enhancement, describing how it maintains a copy in memory to optimize updates and rendering in modern web libraries.
- 24
freeCodeCamp·1y
How to Build a Memory Card Game Using React
This post walks you through building a memory card game using React. It includes details on the project's tech stack (NPM, Vite, React, CSS Modules), project structure, and performance optimizations for mobile devices. The game tests memory skills by challenging players to click unique anime images without repeating. It features dynamic gameplay, score tracking, responsive design, and smooth animations. The post explains how to set up the development environment, create components, manage state, and implement custom hooks, while also providing a GitHub repository for code reference.
- 25
A dependency-free JavaScript ES6 slider and carousel
A lightweight, dependency-free JavaScript ES6 slider and carousel that is modular and extendable. It weighs only ~28kb (~8kb gzipped) and is ready to use with modern bundlers like Rollup and Webpack. The slider is easy to integrate and theme, utilizing SASS styles based on the BEM methodology.
