Best of freeCodeCamp — September 2024

1. 1
   Article

   freeCodeCamp·2y

   New React 19 Features You Should Know – Explained with Code Examples

   React 19 focuses on simplifying the development process by automating performance optimizations and removing the need for manual memoization hooks like `useMemo` and `useCallback`. The new compiler transforms React code into optimized JavaScript, and features like the `use()` hook streamline data fetching and context handling. Simplified ref handling and form management enhancements also contribute to cleaner and more efficient code.

   383

   20
2. 2
   Article

   freeCodeCamp·2y

   How to Start Building Projects with LLMs

   Becoming an LLM engineer is a promising career path. The best way to learn is by building projects. This post suggests starting with practical projects like developing a YouTube video summarizer that uses Python packages such as langchain, pytube, and youtube-transcript-api. The core bot functionality involves receiving a YouTube URL, retrieving the transcript, and using LLM to summarize the content, which is then returned to the user. For deployment, serve the summarization functionality as a Flask API and use Twilio to connect to WhatsApp for testing. The post also introduces a project-based course for LLM applications.

   343

   9
3. 3
   Article

   freeCodeCamp·2y

   Skills You Need to Become a Backend Developer – A Roadmap for Beginners

   This guide outlines the essential skills needed to become a backend developer, providing a step-by-step roadmap for beginners. Key areas covered include understanding the role of a backend developer, mastering databases and server-side programming languages, building and integrating APIs, and deploying applications to the cloud. The guide also recommends tools and software commonly used in backend development, such as SQL databases, frameworks, web servers, and security protocols.

   274

   2
4. 4
   Article

   freeCodeCamp·2y

   How to Create a Reusable Modal Component in React

   Learn how to create a reusable modal component in React using principles like DRY (Don't Repeat Yourself) and the atomic design pattern. The guide covers component creation, state and callback function integration, and additional improvements. It emphasizes the use of React hooks like useEffect for better management of component behavior. The modal component is designed for flexibility, with options for custom content and actions.

   176

   1
5. 5
   Article

   freeCodeCamp·2y

   How to Use CSS to Improve Web Accessibility

   CSS can significantly enhance web accessibility by updating focus styles, avoiding content shifts, reducing motion for users with vestibular disorders, and customizing contrast options. Techniques such as using the :focus pseudo-class, prefers-reduced-motion, prefers-contrast media queries, and enabling dark mode help create a more inclusive user experience. CSS animations can also enhance UX by visually guiding users and providing feedback. Ensure purposeful and user-friendly implementation to support assistive technologies and improve overall accessibility.

   144

   3
6. 6
   Article

   freeCodeCamp·2y

   How to Build an AI Chatbot with Spring AI, React, and Docker

   Learn how to build a chatbot application using Spring Boot, React, and Docker. This guide walks you through creating a backend REST API with Spring AI for handling chat messages, generating a chatbot UI with React, and Dockerizing the entire application for easy deployment. The complete source code is available on GitHub for hands-on experimentation.

   98

   2
7. 7
   Article

   freeCodeCamp·2y

   How to Write Cleaner Code Using Mongoose Schemas

   Learn to write cleaner and more maintainable code in your NodeJS applications using Mongoose schemas. Key concepts include discriminators for creating multiple models with shared schemas, statics for reusable model-level methods, methods for custom instance-level functions, and hooks for adding custom behavior during different document lifecycle stages. These features help organize your data and streamline your database operations.

   93

   2
8. 8
   Video

   freeCodeCamp·2y

   FARM Stack Course – Full Stack Development with FastAPI, React MongoDB

   The FARM stack is a modern web development stack that combines FastAPI for the backend, React for the front end, and MongoDB for the database. This course covers each component, their integration using Docker, and steps to build a full-featured to-do application. FastAPI provides a high-performance Python framework for APIs, React enables efficient UI creation, and MongoDB offers flexible, document-oriented data storage. The tutorial emphasizes setting up the development environment, creating API endpoints, building a responsive UI, and managing databases, culminating in a Dockerized application deployment.

   85
9. 9
   Video

   freeCodeCamp·2y

   End-to-End Machine Learning Project – AI, MLOps

   The post provides a comprehensive guide on undertaking an end-to-end machine learning project focused on house price prediction. It delves into core machine learning concepts, data analysis, feature engineering, and model implementation with robust testing. Additionally, it emphasizes MLOps integrations using tools like ZenML and MLFlow for experiment tracking and deployment. The tutorial also underscores the importance of writing scalable and readable code by employing design patterns such as Factory and Strategy patterns. The project aims to differentiate itself by focusing on thorough data understanding and robust implementation practices, promising to enhance one's data science portfolio and career prospects.

   76
10. 10
    Article

    freeCodeCamp·2y

    What are Type Predicates in TypeScript? Explained with Code examples

    Type predicates in TypeScript provide more control over type checking by allowing predicates to refine types more specifically. With TypeScript 5.5, automatic inference of type predicates has become more intuitive, eliminating the need to manually write them. However, navigating older code-bases might still require understanding handwritten type predicates. This feature ensures that TypeScript can correctly narrow types within conditional checks, preventing type errors that could arise otherwise.

    70

    1