--- title: Best freeCodeCamp posts — November 2023 | daily.dev description: The most upvoted freeCodeCamp posts from November 2023, curated by the daily.dev community. canonical: https://daily.dev/sources/freecodecamp/best-of/2023/11 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/freecodecamp/best-of/2023/11 og:type: website og:site_name: daily.dev og:title: Best freeCodeCamp posts — November 2023 | daily.dev og:description: The most upvoted freeCodeCamp posts from November 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of freeCodeCamp — November 2023 1. 1 [](https://daily.dev/posts/what-s-new-in-javascript-in-2023-changes-with-code-examples-m5fgpok7b "What's New in JavaScript in 2023 – Changes with Code Examples") Article freeCodeCamp · 3y What's New in JavaScript in 2023 – Changes with Code Examples ECMAScript 2023 introduces changes to JavaScript that make programming easier. The changes include the Object.groupBy method for grouping objects based on a property value, the Array.toSliced(), Array.toSorted(), and Array.toReversed() methods for manipulating arrays without mutating the original array, and the findLast() and findLastIndex() methods for finding the last element or index in an array that satisfies a condition. 564 27 2. 2 [](https://daily.dev/posts/career-mistakes-to-avoid-as-a-developer-fywm1vjc9 "Career Mistakes to Avoid as a Developer") Article freeCodeCamp · 3y Career Mistakes to Avoid as a Developer Learn about the career mistakes to avoid as a developer, including not setting realistic goals, failing to recognize your potential, and neglecting networking opportunities. 454 73 3. 3 [](https://daily.dev/posts/how-to-write-commit-messages-that-project-maintainers-will-appreciate-tb7lvujxn "How to Write Commit Messages that Project Maintainers Will Appreciate") Article freeCodeCamp · 3y How to Write Commit Messages that Project Maintainers Will Appreciate Learn how to write effective commit messages that project maintainers will appreciate. Avoid vague messages and instead mention the type of change and summarize the details. Consider adding a description for more clarity and understanding. Writing good commit messages is crucial for communicating contributions. 370 25 4. 4 [](https://daily.dev/posts/api-documentation-best-practices-course-tfzv5gslj "API Documentation Best Practices Course") Article freeCodeCamp · 3y API Documentation Best Practices Course Learn how to write effective API documentation with this course. Understand the significance of API documentation, its impact on a business, and the best practices for creating high-quality documentation. 162 2 5. 5 [](https://daily.dev/posts/how-to-write-helper-functions-in-react-mrif0kkrz "How to Write Helper Functions in React") Article freeCodeCamp · 3y How to Write Helper Functions in React Helper functions in React.js simplify complex tasks, improve code organization, and enhance maintainability. They are small, reusable functions that assist React components in performing specific tasks. By following best practices, such as clear documentation, organized organization, and thoughtful testing, you can create efficient helper functions that enhance your development workflow and deliver robust and performant applications. 158 1 6. 6 [](https://daily.dev/posts/free-107-hour-aws-cloud-project-bootcamp-bnzjqsmne "Free 107-Hour AWS Cloud Project Bootcamp") Article freeCodeCamp · 3y Free 107-Hour AWS Cloud Project Bootcamp The AWS Cloud Project Bootcamp is a comprehensive training program for cloud project management. It covers various topics over 12 weeks and offers hands-on experience and skill enhancement. The bootcamp is ideal for individuals with some background in cloud computing. 135 2 7. 7 [](https://daily.dev/posts/javascript-game-tutorial-build-a-stick-hero-clone-with-html-canvas-javascript-2ve8iokbq "JavaScript Game Tutorial – Build a Stick Hero Clone with HTML Canvas + JavaScript") Article freeCodeCamp · 3y JavaScript Game Tutorial – Build a Stick Hero Clone with HTML Canvas + JavaScript Learn how to create a Stick Hero clone game using pure JavaScript and HTML canvas. This tutorial covers game initialization, different game phases, drawing platforms, hero, and sticks, the main animation loop, and event handling. 103 1 8. 8 [](https://daily.dev/posts/how-to-create-scroll-animations-with-react-tailwind-css-and-framer-motion-zfrieaqox "How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion") Article freeCodeCamp · 3y How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion Learn how to create scroll animations in React using Framer Motion and Tailwind CSS. The tutorial covers setting up the project, building the scroll component, adding animation functions, and animating the components on scroll. 102 4 9. 9 [](https://daily.dev/posts/secure-next-js-applications-with-role-based-authentication-using-nextauth-z9u2azhk2 "Secure Next.js Applications with Role-Based Authentication Using NextAuth") Article freeCodeCamp · 3y Secure Next.js Applications with Role-Based Authentication Using NextAuth Learn how to secure Next.js applications with role-based authentication using NextAuth. This comprehensive tutorial covers the basics of NextAuth, integrating OAuth providers, custom authentication provider using MongoDB, and protecting pages on both the server and client side. 103 1 10. 10 [](https://daily.dev/posts/data-structures-handbook-the-key-to-scalable-software-ejgn6pfdn "Data Structures Handbook – The Key to Scalable Software") Article freeCodeCamp · 3y Data Structures Handbook – The Key to Scalable Software Data structures such as linked lists, stacks, and trees are essential tools in software development, allowing for efficient data management and processing. Linked lists provide flexibility in memory allocation, while stacks follow the LIFO principle for orderly data processing. Trees organize data hierarchically, mirroring real-world structures. Understanding the advantages and limitations of each data structure is crucial for optimal use. 103 11. 11 [](https://daily.dev/posts/how-to-use-javascript-arrow-functions-explained-in-detail-rmopfibqe "How to Use JavaScript Arrow Functions – Explained in Detail") Article freeCodeCamp · 3y How to Use JavaScript Arrow Functions – Explained in Detail Learn about the arrow function syntax in JavaScript, how to convert a regular function to an arrow function, and the advantages of using arrow functions. 94 6 12. 12 [](https://daily.dev/posts/how-javascript-promises-work-tutorial-for-beginners-syqyvv6so "How JavaScript Promises Work – Tutorial for Beginners") Article freeCodeCamp · 3y How JavaScript Promises Work – Tutorial for Beginners Learn how the Promise object works in JavaScript and when to use Promises instead of callbacks. Explore the Fetch API and the Promise methods like Promise.all(), Promise.allSettled(), Promise.any(), and Promise.race(). 93 13. 13 [](https://daily.dev/posts/how-to-use-react-suspense-to-improve-your-react-projects-2pjx03wpj "How to Use React Suspense to Improve your React Projects") Article freeCodeCamp · 3y How to Use React Suspense to Improve your React Projects React Suspense is a feature in React.js 16.6 that allows components to pause rendering while waiting for asynchronous processes to finish. It simplifies the management of loading states and improves the user experience. React Suspense consists of the Suspense component, dynamic imports with lazy(), and error boundaries. It is useful for handling data fetching, lazy loading of components, and providing better user experiences. 88 14. 14 [](https://daily.dev/posts/how-to-use-cypress-for-end-to-end-testing-your-react-apps-zcovnm3s3 "How to Use Cypress for End-to-End Testing Your React Apps") Article freeCodeCamp · 3y How to Use Cypress for End-to-End Testing Your React Apps Learn how to use Cypress, an end-to-end testing framework, to efficiently test React applications. Set up the environment, write tests, interact with web components, organize tests using describe blocks, create custom commands, use the Cypress Dashboard to monitor test runs, debug tests with cy.debug() and Time Travel Debugging, and integrate Cypress tests into a continuous integration (CI) workflow using GitHub Actions. 80 15. 15 [](https://daily.dev/posts/how-to-create-dynamic-api-routes-in-next-js-i2eyna3kk "How to Create Dynamic API Routes in Next.js") Article freeCodeCamp · 3y How to Create Dynamic API Routes in Next.js Learn how to create dynamic API routes in Next.js, enabling you to create API endpoints and handle HTTP requests using Node.js serverless functions. 77 [See all freeCodeCamp archives](/sources/freecodecamp/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/freecodecamp/best-of/2023/11#page","url":"https://daily.dev/sources/freecodecamp/best-of/2023/11","name":"Best freeCodeCamp Posts — November 2023","description":"The most upvoted freeCodeCamp posts from November 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/freecodecamp/best-of/2023/11#items","numberOfItems":15,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/what-s-new-in-javascript-in-2023-changes-with-code-examples-m5fgpok7b","name":"What's New in JavaScript in 2023 – Changes with Code Examples"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/career-mistakes-to-avoid-as-a-developer-fywm1vjc9","name":"Career Mistakes to Avoid as a Developer"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/how-to-write-commit-messages-that-project-maintainers-will-appreciate-tb7lvujxn","name":"How to Write Commit Messages that Project Maintainers Will Appreciate"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/api-documentation-best-practices-course-tfzv5gslj","name":"API Documentation Best Practices Course"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/how-to-write-helper-functions-in-react-mrif0kkrz","name":"How to Write Helper Functions in React"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/free-107-hour-aws-cloud-project-bootcamp-bnzjqsmne","name":"Free 107-Hour AWS Cloud Project Bootcamp"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/javascript-game-tutorial-build-a-stick-hero-clone-with-html-canvas-javascript-2ve8iokbq","name":"JavaScript Game Tutorial – Build a Stick Hero Clone with HTML Canvas + JavaScript"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-create-scroll-animations-with-react-tailwind-css-and-framer-motion-zfrieaqox","name":"How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/secure-next-js-applications-with-role-based-authentication-using-nextauth-z9u2azhk2","name":"Secure Next.js Applications with Role-Based Authentication Using NextAuth"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/data-structures-handbook-the-key-to-scalable-software-ejgn6pfdn","name":"Data Structures Handbook – The Key to Scalable Software"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-use-javascript-arrow-functions-explained-in-detail-rmopfibqe","name":"How to Use JavaScript Arrow Functions – Explained in Detail"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-javascript-promises-work-tutorial-for-beginners-syqyvv6so","name":"How JavaScript Promises Work – Tutorial for Beginners"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-use-react-suspense-to-improve-your-react-projects-2pjx03wpj","name":"How to Use React Suspense to Improve your React Projects"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-use-cypress-for-end-to-end-testing-your-react-apps-zcovnm3s3","name":"How to Use Cypress for End-to-End Testing Your React Apps"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/how-to-create-dynamic-api-routes-in-next-js-i2eyna3kk","name":"How to Create Dynamic API Routes in Next.js"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/freecodecamp/best-of"},{"@type":"ListItem","position":5,"name":"November 2023"}]}]} ```