Best of JavaScript — October 2024

1
Article
JetBrains·2y
JavaScript Best Practices 2024
JavaScript continues to evolve, and staying up-to-date with the latest best practices is crucial for developers. Key practices include aligning with project-defined rules, using 'let' and 'const' instead of 'var' for variable declarations, leveraging classes over function prototypes, and implementing private class fields with '#'. Arrow functions are recommended for better syntax and context binding, while the nullish coalescing (??) and optional chaining (?.) operators improve code readability and reliability. Modern methods like 'Object.entries()', async/await syntax, and the 'Intl' API are also important for efficient and maintainable code. Additionally, using tools for precise calculations, handling JSON with big integers carefully, and employing robust testing practices are essential for developing high-quality JavaScript projects.
3.5K
122
2
Article
freeCodeCamp·2y
React Best Practices Ever Developer Should Know
This guide offers crucial tips on optimizing React development using hooks. It covers the importance of maintaining immutability in state management, avoiding the overuse of useState, leveraging useMemo for performance improvements, ensuring unique keys for list items, and properly handling dependencies in useEffect. The guide also advises on alternatives to useEffect for managing side effects efficiently, contributing to cleaner and more efficient code.
1.4K
54
3
Article
Community Picks·2y
Create beautiful images of your source code
Instructions for creating visually appealing images of a provided JavaScript code snippet, including rendering button clicks and updating the button text dynamically.
751
63
4
Article
Community Picks·2y
10 JavaScript concepts every Node developer must master
Node.js has become a standard for building web apps and systems software, utilizing JavaScript on the back end. Key JavaScript concepts include closures, prototypes, private properties, modules, error handling, currying, call/apply/bind methods, memoization, IIFE, and argument handling. Mastering these concepts can help Node developers write scalable and efficient code, despite the challenges posed by JavaScript's multiparadigm nature and Node's single-threaded architecture.
636
24
5
Article
DEV·2y
Top 7 Web development projects for beginners
Gaining practical experience and building a portfolio is crucial for beginners in web development. Seven suggested projects include a personal portfolio website, a to-do list app with advanced features, a product landing page, a simple calculator, a weather app using an API, a responsive blog page with dynamic content, and a mini e-commerce product page. These projects cover essential skills like HTML, CSS, JavaScript, responsive design, API handling, and more.
510
6
6
Article
Bram.us·2y
Scroll-driven animated card stack with scroll snap events
A detailed breakdown and rework of Paul Noble's impressive scroll-driven card stack demo, which uses a few lines of JavaScript and zero dependencies. Key techniques include an invisible scroller with ScrollTimeline, CSS scroll-snapping to center cards, and custom animations for snapped cards. A remix of the demo simplifies the code by using shared keyframes and includes a fallback for browsers not supporting Snap Events.
478
15
7
Article
Community Picks·2y
Top Next.js Tools for Next-Gen Developers
Next.js is a powerful React framework ideal for building performance and SEO-friendly web applications. This post highlights essential tools for developers to enhance productivity, including those for SEO, authentication, data management, UI component testing, and styling. Key tools such as NextAuth.js, Prisma, Tailwind CSS, Storybook, Jest, and Cypress are covered to help streamline development and ensure high-quality applications.
459
16
8
Article
Community Picks·2y
Drag to Select
A developer from Makeswift shares insights from a project focused on improving their file manager with drag selection. They detail challenges faced, specifically with state management, and present a solution using vectors to simplify the drag selection process. The final implementation addresses various edge cases and enhances user experience by preventing unwanted text selection and enabling auto-scrolling.
336
14
9
Video
Web Dev Simplified·2y
This Folder Structure Makes Me 100% More Productive
A well-organized folder structure can significantly enhance code maintainability and enjoyment in development. This structure is applicable across various types of development, regardless of the language or framework used. By demonstrating with diagrams and real-world examples, the benefits of transitioning from a traditional folder layout to a feature-based structure are highlighted. ESLint configurations enforce these practices, making collaborative projects more manageable and helping keep each feature's code isolated, facilitating easier modifications and refactoring.
313
8
10
Video
Community Picks·2y
I made a multiplayer game from scratch because no one is hiring junior devs.
A junior developer, frustrated with the job market, built a multiplayer browser game to enhance their resume. The game features turn-based tactics on a 2D hexagonal grid with limited player visibility and a shrinking map. The client-side is developed using TypeScript and HTML5 canvas, while the server-side is implemented in Golang using websockets. The project includes complex features like responsive UI, pathfinding, animations, and real-time multiplayer logic. Despite some challenges, including iOS websocket issues, the game is functional and available to play.
274
9
11
Article
MDN Blog·2y
Fixing your website's JavaScript performance
Web performance can be hit hard by JavaScript issues like long tasks, large bundle sizes, and hydration. Long tasks lock the main thread, blocking user interactions; large bundles slow down download, parse, and execution times; and hydration can delay interactivity in server-rendered pages. Strategies to address these include breaking up JavaScript work, using Web Workers, implementing tree shaking, code splitting, lazy loading, and considering alternatives to popular JavaScript frameworks that may improve performance.
262
5
12
Article
controversy.dev·2y
Is Python’s popularity a sign of developer accessibility over technical depth?
Python has taken the lead on GitHub, surpassing JavaScript, with TypeScript rapidly rising to third place. This trend raises questions about whether the developer community is favoring languages that prioritize accessibility and readability over technical depth and performance. The shift may reflect an evolving expectation of developer skill sets, or it could simply be a response to the current needs of new developers and the data science field.
252
97
13
Article
Community Picks·2y
How to Use Web Workers in React
React applications can suffer performance issues when handling long tasks on the main thread. Using Web Workers, scripts can run in background threads, preventing the UI from becoming unresponsive. This guide covers the basics of Web Workers, their types, and their integration into a React app to offload intensive tasks. It includes examples of creating a Dedicated Worker, communication methods between the main thread and worker, and implementing these concepts in a React project to filter and display products efficiently.
210
5
14
Article
Web Tools Weekly·2y
CSS & HTML, Build Tools, JS Utilities
A collection of useful web development tools and frameworks including skellyCSS for skeleton screens, tailwind-to-inline for converting Tailwind classes to inline styles, and various other CSS libraries. It also highlights build tools and JavaScript utilities such as Hot Hook, nrr, and UAParser.js. Additionally, it features commercial apps for analytics, interactive FAQs, and drag-and-drop code editors.
198
7
15
Article
Hacker News·2y
Video & audio player themes for every web player & framework
Discover a variety of customizable audio and video player themes for every web player and framework. These themes can be tailored using just HTML and CSS, featuring designs inspired by popular platforms like YouTube, Vimeo, and social media apps. Themes include retro and modern options, each optimized for different types of content and viewer preferences.
190
6
16
Video
Web Dev Simplified·2y
I'm Ditching Try/Catch for Good!
Handling errors in JavaScript using try/catch can lead to issues with code organization and unexpected error handling. This guide explores alternative methods, including a custom function to return arrays of errors and successful states. It introduces advanced concepts like custom errors and references the Effect library for sophisticated error handling.
181
14
17
Article
Hacker News·2y
HTML Form Validation is heavily underused
HTML form validation is often underutilized despite offering several powerful methods. The `required` attribute prevents empty submissions, while `setCustomValidity` allows for complex validation logic. However, using purely imperative APIs like `setCustomValidity` in a declarative framework can create boilerplate issues. Implementing custom validations, such as async server checks or dependent input fields, showcases the power and flexibility of these APIs. Better native support in HTML standards could improve adoption.
172
6
18
Article
Community Picks·2y
Best Practices for Storing Access Tokens in the Browser
Web applications often use OAuth 2.0 for data security, which involves storing access tokens. This piece examines various browser storage solutions like local storage, session storage, and cookies, highlighting their vulnerabilities to XSS and CSRF attacks. The token handler pattern is recommended for enhancing security, suggesting encrypted tokens stored in secure cookies and managed by backend components.
159
5
19
Video
Kevin Powell·2y
This new CSS property just solved animating to height auto
Animating height to auto in CSS is now easy with a new property. By using 'interpolate size: allow keywords', you can transition to height auto without hacks. This method also works with other intrinsic keywords like min-content, max-content, and fit-content. Using this property at the root level applies the effect sitewide. Tips on managing visibility during transitions are also included.
154
8
20
Article
Community Picks·2y
themeselection/flyonui: 🚀 The most easiest, free and open-source Tailwind CSS component library with semantic classes.
FlyonUI is an open-source component library for Tailwind CSS offering semantic classes and interactive JavaScript plugins. It allows developers to build beautiful, maintainable, and scalable UIs with ease. Featuring over 800 free components, universal framework compatibility, unlimited themes, and built-in RTL support, FlyonUI enhances productivity and efficiency in web development.
149
7
21
Video
Lun Dev Code·2y
Multilayer Parallax Scroll Animation with HTML and GSAP
The post provides a detailed guide on creating a multilayer parallax scroll animation using HTML, GSAP, and SVG. It emphasizes the benefits of using SVG for maintaining fixed positions of images across different screen sizes and guides viewers through the steps of setting up the animation, integrating GSAP for animations, and triggering animations based on scroll events.
132
2
22
Article
Kirupa·2y
Two-Dimensional (2D) Arrays in JavaScript
Two-dimensional (2D) arrays in JavaScript are arrays made up of other arrays, allowing for storage of complex, tabular data. Key concepts include creating 2D arrays manually or programmatically, accessing elements using row and column indices, representing data in either row-centric or column-centric formats, and visualizing 2D arrays using console.table for better readability.
127
3
23
Article
asayer·2y
A Million Times Faster: Million.js vs React
Modern web development emphasizes performance, making the choice of a front-end library crucial. React, a mature tool with a component-based architecture, is often used for building dynamic interfaces but can be slower due to its size. Million.js, a newer library by Aiden Bai, focuses on highly optimized rendering, reducing overhead, and using performant algorithms, making it ideal for performance-sensitive applications. Detailed comparisons show Million.js to be faster in rendering speed, initial load time, update efficiency, memory usage, and time to interactive, despite React's broader ecosystem and more extensive features.
124
11
24
Article
Community Picks·2y
Animation library for Tailwind CSS Library
A new syntax animation library for Tailwind CSS, 'tailwindcss-motion', offers beautiful, performant, and accessible animations. The library is open-source and infinitely configurable, with an easy-to-use syntax. It ensures browser compatibility and optimized performance while integrating accessibility by default. Installation is straightforward with npm.
111
1
25
Article
Community Picks·2y
ESLint Stylistic
ESLint allows comprehensive customization of its rules to fit individual coding needs, offering the flexibility to fine-tune every aspect of code styling.
111
1

See all JavaScript archives