--- title: Best freeCodeCamp posts — April 2022 | daily.dev description: The most upvoted freeCodeCamp posts from April 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/freecodecamp/best-of/2022/04 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/freecodecamp/best-of/2022/04 og:type: website og:site_name: daily.dev og:title: Best freeCodeCamp posts — April 2022 | daily.dev og:description: The most upvoted freeCodeCamp posts from April 2022, 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 — April 2022 1. 1 [](https://daily.dev/posts/how-to-write-good-api-documentation-lqerto7d6 "How to Write Good API Documentation") Article freeCodeCamp · 4y How to Write Good API Documentation API documentation is a written guide stating the functions of the API, how to integrate it into your program, and use cases for the API. It should contain some technical terms, but should still be readable and easy to understand. The goal is for everyone to work together to produce documentation that fully explains the API and guides users without confusion. 85 2. 2 [](https://daily.dev/posts/how-to-remove-a-property-from-a-javascript-object-acfxqpgoq "How to Remove a Property from a JavaScript Object") Article freeCodeCamp · 4y How to Remove a Property from a JavaScript Object There are two ways to remove a property from a JavaScript object. There's the mutable way of doing it using the delete operator, and the immutable way of do it using object restructuring. Let's go through each of these methods in this tutorial. If you have any questions, feel free to reach out to me! 54 3 3. 3 [](https://daily.dev/posts/react-websockets-project-build-a-real-time-order-book-application-sihp9hnvu "React + WebSockets Project – Build a Real-Time Order Book Application") Article freeCodeCamp · 4y React + WebSockets Project – Build a Real-Time Order Book Application In this tutorial, we will see how to build an Order Book web application. We'll use React with Typescript for creating the UI, Redux for managing the application state, and styled-components for applying the styling. And last, but not least, we'll use WebSockets for fetching the data feeds. 51 1 4. 4 [](https://daily.dev/posts/command-line-for-beginners-how-to-use-the-terminal-like-a-pro-tyubek4hc "Command Line for Beginners – How to Use the Terminal Like a Pro") Article freeCodeCamp · 4y Command Line for Beginners – How to Use the Terminal Like a Pro Command line (CLI) is the interface in which we enter commands for the computer to process. Console is the physical device that allows you to interact with the computer. Terminal is a text input and output environment. Shell is a program that acts as command-line interpreter. 39 2 5. 5 [](https://daily.dev/posts/learn-crud-operations-in-javascript-by-building-todo-app-nzsr17wle "Learn CRUD Operations in JavaScript by Building TODO APP") Article freeCodeCamp · 4y Learn CRUD Operations in JavaScript by Building TODO APP Learn how to do CRUD Operations in JavaScript by making a Todo App. In our case, we will have 4 options to create tasks, read tasks, update tasks, or delete tasks. For that, let's create a very very simple Social Media Application. We will be following these steps below. 37 1 6. 6 [](https://daily.dev/posts/low-code-for-freelance-developers-startups-96n4t8czi "Low-Code for Freelance Developers & Startups") Article freeCodeCamp · 4y Low-Code for Freelance Developers & Startups This course will teach you how to use the Appsmith Low-Code platform. You will learn how to quickly build tools that many startups use by using the low-code approach. Watch the full course below or on the freeCodeCamp.org YouTube channel (2-hour watch). 35 1 7. 7 [](https://daily.dev/posts/how-to-contribute-to-open-source-projects-a-beginner-s-guide-e9hmsj1uk "How to Contribute to Open-Source Projects – A Beginner's Guide") Article freeCodeCamp · 4y How to Contribute to Open-Source Projects – A Beginner's Guide Open-source projects bring developers together in a more collaborative setting than almost anything else. There are plenty of platforms out there that give developers a chance to write in public. We can even call these developers "Developer-as-a-blogger" (DaaB) for their blogging contributions. Here are some tips and guidelines to help you start your open-source journey. 33 1 8. 8 [](https://daily.dev/posts/how-to-create-a-habit-system-and-stay-motivated-as-a-developer-f4v2ri8-2 "How to Create a Habit System and Stay Motivated as a Developer") Article freeCodeCamp · 4y How to Create a Habit System and Stay Motivated as a Developer Some days motivation looks like going on a 7-mile hike, whereas other days, it is about taking care of yourself and working your butt off. A habit system is a carefully thought-out daily routine of habits that take you closer to your goal. By only relying on motivation to fulfill your dreams and goals, you are not creating a strategy for being consistent. 27 1 9. 9 [](https://daily.dev/posts/the-beginner-s-guide-to-sass-bupkay00 "The Beginner's Guide to Sass") Article freeCodeCamp · 4y The Beginner's Guide to Sass Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that gives your CSS superpowers. It allows us to write stylesheets in two different syntaxes, indented and SCSS. Sass helps keep your code organized by using partials. It helps reduce the repetition of CSS, because of its powerful features. 26 4 10. 10 [](https://daily.dev/posts/how-to-check-if-a-property-exists-in-a-javascript-object-1lkwemchl "How to Check if a Property Exists in a JavaScript Object") Article freeCodeCamp · 4y How to Check if a Property Exists in a JavaScript Object In this article, I will show you three ways to check if a property exists in a JavaScript object. The hasOwnProperty() method will check if an object contains a direct property. The in operator will return true for both direct and inherited properties that exist in the object or its prototype chain. 25 2 11. 11 [](https://daily.dev/posts/how-to-get-started-with-react-a-beginner-s-guide-nl1zw1bcs "How to Get Started With React – A Beginner's Guide") Article freeCodeCamp · 4y How to Get Started With React – A Beginner's Guide React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript framework for creating UI components-based user interfaces. In this article, we will see reasons why you should learn React and how to get started with it. 20 12. 12 [](https://daily.dev/posts/what-is-memoization-how-and-when-to-memoize-in-javascript-and-react-e0osxku8u "What is Memoization? How and When to Memoize in JavaScript and React") Article freeCodeCamp · 4y What is Memoization? How and When to Memoize in JavaScript and React In this article we will talk about memoization, an optimization technique that can help make heavy computation processes more efficient. We will start by talking about what memoization is and when it's best to implement it. Later on we will give practical examples for JavaScript and React. 19 13. 13 [](https://daily.dev/posts/windows-vs-macos-vs-linux-operating-system-handbook-h-1wck--e "Windows vs MacOS vs Linux – Operating System Handbook") Article freeCodeCamp · 4y Windows vs MacOS vs Linux – Operating System Handbook In this article I'm going to give a brief introduction to operating systems and compare the three main OSs that are out there nowadays. First we're going to review what an OS is and little history about them. Then, we'll review the main features and differences of the most popular operating systems (Windows, Mac, and GNU/Linux) 18 1 14. 14 [](https://daily.dev/posts/how-webauthn-authenticates-users-without-a-password-kvhxjj1mk "How WebAuthn Authenticates Users Without a Password") Article freeCodeCamp · 4y How WebAuthn Authenticates Users Without a Password WebAuthn is an API that enables strong authentication with public-key cryptography. It lets you implement passwordless authentication and/or secure second-factor authentication without SMS texts. WebAuthn works hand in hand with other industry standards such as Credential Management Level 1 and FIDO 2.0 Client. 17 1 15. 15 [](https://daily.dev/posts/learn-redux-toolkit-the-recommended-way-to-use-redux-exoqqw-pg "Learn Redux Toolkit – The Recommended Way to Use Redux") Article freeCodeCamp · 4y Learn Redux Toolkit – The Recommended Way to Use Redux Redux is a JavaScript library for managing application state. It is most commonly used with React, but can be used with other JavaScript frameworks as well. Redux Toolkit is a set of tools that helps simplify Redux development. It includes utilities for creating and managing Redux stores, as well as for writing Redux actions and reducers. 17 1 16. 16 [](https://daily.dev/posts/closure-in-javascript-explained-with-examples-elxs3tfip "Closure in JavaScript – Explained with Examples") Article freeCodeCamp · 4y Closure in JavaScript – Explained with Examples Closures are functions that have access to the variables that are present in their scope chain even if the outer function ceases to exist. In this article, we will walk you through the definition of a closure, a simple day-to-day fetch utility closure example, and some of the advantages and disadvantages of using closures. 16 17. 17 [](https://daily.dev/posts/skeleton-loader-example-how-to-build-a-skeleton-screen-with-css-for-better-ux-0qlfyzq6r "Skeleton Loader Example – How to Build a Skeleton Screen with CSS for Better UX") Article freeCodeCamp · 4y Skeleton Loader Example – How to Build a Skeleton Screen with CSS for Better UX A skeleton screen is an animated placeholder that simulates the layout of a website while data is being loaded. Skeleton screens draw the user's attention to progress rather than waiting time. They appear to be faster and are more user friendly. Improved perceived performance provides both good UX and helps in increasing conversion rate. 14 18. 18 [](https://daily.dev/posts/how-to-use-the-git-stash-command-f-ns-vgyv "How to Use the Git Stash Command") Article freeCodeCamp · 4y How to Use the Git Stash Command Stash means to store (changes) safely in a hidden place (the stash stack) You can use any one of the below commands to stash your changes in the stash stack. It undoes things to the latest commit and doesn't delete the changes. The stash command lists the stashes in the below format. 14 1 19. 19 [](https://daily.dev/posts/nextjs-and-harperdb-tutorial-build-a-full-stack-productivity-timer-app-ixk1akydf "NextJS and HarperDB Tutorial –Build a Full Stack Productivity Timer App") Article freeCodeCamp · 4y NextJS and HarperDB Tutorial –Build a Full Stack Productivity Timer App In this article, I'll show you how to build a task timer app using NextJS and HarperDB. We'll be building a full stack app that includes JSON Web Token Authentication, fetching data using HarperDB's built-in API, and rendering the data with NextJS. 14 20. 20 [](https://daily.dev/posts/how-to-use-sass-with-css-ph2foomjz "How to Use Sass with CSS") Article freeCodeCamp · 4y How to Use Sass with CSS Sass is a CSS preprocessor that helps you manage tasks in large projects. It lets you reuse your code, split it into files, and it also helps you create functions, variables, nest your CSS selectors, and other shortcuts. In this article, I'll show you two ways to install Sass. 12 1 21. 21 [](https://daily.dev/posts/what-is-docker-learn-how-to-use-containers-explained-with-examples-tpfginbkq "What is Docker? Learn How to Use Containers – Explained with Examples") Article freeCodeCamp · 4y What is Docker? Learn How to Use Containers – Explained with Examples Docker takes away repetitive, mundane configuration tasks and is used throughout the development lifecycle. The core of Docker’s superpower is leveraging so-called cgroups to create lightweight, isolated, portable, and performant environments, which you can start in seconds. In this blog post, you will learn to use Docker for the top 3 most essential use cases. 12 22. 22 [](https://daily.dev/posts/react-18-new-features-concurrent-rendering-automatic-batching-and-more-cacvrwzrb "React 18 New Features – Concurrent Rendering, Automatic Batching, and More") Article freeCodeCamp · 4y React 18 New Features – Concurrent Rendering, Automatic Batching, and More React 18 was released in March 2022\. This release focuses on performance improvements and updating the rendering engine. Concurrency is a foundational update to React’s rendering mechanism. Automatic batching helps to reduce the number of changes that happen when a state changes. Suspense, streaming server rendering, and transitions are powered by concurrent rendering. 12 1 23. 23 [](https://daily.dev/posts/how-to-become-a-better-programmer-use-a-skill-building-planner-xt9ghvac6 "How to Become a Better Programmer – Use a Skill-Building Planner") Article freeCodeCamp · 4y How to Become a Better Programmer – Use a Skill-Building Planner Many programmers are missing out on a simple way to improve their programming progress. A planner and journal in tandem can help you stay on the direct path, measure progress, stay motivated, and conquer imposter syndrome. Planners are often used to give productivity a boost in order to stay organized. 11 24. 24 [](https://daily.dev/posts/how-to-get-ready-for-a-job-in-tech-tips-for-beginners-j4fwq1ley "How to Get Ready for a Job in Tech – Tips for Beginners") Article freeCodeCamp · 4y How to Get Ready for a Job in Tech – Tips for Beginners After 15+ years developing software, I had a bagful of thoughts to share with the younger generation. I was able to summarize everything in eight high-level points without making my audience bored with it. All the points mentioned in the article apply to everyone, irrespective of their current experience in the industry. 11 4 [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/2022/04#page","url":"https://daily.dev/sources/freecodecamp/best-of/2022/04","name":"Best freeCodeCamp Posts — April 2022","description":"The most upvoted freeCodeCamp posts from April 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/freecodecamp/best-of/2022/04#items","numberOfItems":24,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/how-to-write-good-api-documentation-lqerto7d6","name":"How to Write Good API Documentation"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/how-to-remove-a-property-from-a-javascript-object-acfxqpgoq","name":"How to Remove a Property from a JavaScript Object"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/react-websockets-project-build-a-real-time-order-book-application-sihp9hnvu","name":"React + WebSockets Project – Build a Real-Time Order Book Application"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/command-line-for-beginners-how-to-use-the-terminal-like-a-pro-tyubek4hc","name":"Command Line for Beginners – How to Use the Terminal Like a Pro"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/learn-crud-operations-in-javascript-by-building-todo-app-nzsr17wle","name":"Learn CRUD Operations in JavaScript by Building TODO APP"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/low-code-for-freelance-developers-startups-96n4t8czi","name":"Low-Code for Freelance Developers & Startups"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-contribute-to-open-source-projects-a-beginner-s-guide-e9hmsj1uk","name":"How to Contribute to Open-Source Projects – A Beginner's Guide"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-create-a-habit-system-and-stay-motivated-as-a-developer-f4v2ri8-2","name":"How to Create a Habit System and Stay Motivated as a Developer"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/the-beginner-s-guide-to-sass-bupkay00","name":"The Beginner's Guide to Sass"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/how-to-check-if-a-property-exists-in-a-javascript-object-1lkwemchl","name":"How to Check if a Property Exists in a JavaScript Object"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-get-started-with-react-a-beginner-s-guide-nl1zw1bcs","name":"How to Get Started With React – A Beginner's Guide"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/what-is-memoization-how-and-when-to-memoize-in-javascript-and-react-e0osxku8u","name":"What is Memoization? How and When to Memoize in JavaScript and React"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/windows-vs-macos-vs-linux-operating-system-handbook-h-1wck--e","name":"Windows vs MacOS vs Linux – Operating System Handbook"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-webauthn-authenticates-users-without-a-password-kvhxjj1mk","name":"How WebAuthn Authenticates Users Without a Password"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/learn-redux-toolkit-the-recommended-way-to-use-redux-exoqqw-pg","name":"Learn Redux Toolkit – The Recommended Way to Use Redux"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/closure-in-javascript-explained-with-examples-elxs3tfip","name":"Closure in JavaScript – Explained with Examples"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/skeleton-loader-example-how-to-build-a-skeleton-screen-with-css-for-better-ux-0qlfyzq6r","name":"Skeleton Loader Example – How to Build a Skeleton Screen with CSS for Better UX"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-to-use-the-git-stash-command-f-ns-vgyv","name":"How to Use the Git Stash Command"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/nextjs-and-harperdb-tutorial-build-a-full-stack-productivity-timer-app-ixk1akydf","name":"NextJS and HarperDB Tutorial –Build a Full Stack Productivity Timer App"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/how-to-use-sass-with-css-ph2foomjz","name":"How to Use Sass with CSS"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/what-is-docker-learn-how-to-use-containers-explained-with-examples-tpfginbkq","name":"What is Docker? Learn How to Use Containers – Explained with Examples"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/react-18-new-features-concurrent-rendering-automatic-batching-and-more-cacvrwzrb","name":"React 18 New Features – Concurrent Rendering, Automatic Batching, and More"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-to-become-a-better-programmer-use-a-skill-building-planner-xt9ghvac6","name":"How to Become a Better Programmer – Use a Skill-Building Planner"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-to-get-ready-for-a-job-in-tech-tips-for-beginners-j4fwq1ley","name":"How to Get Ready for a Job in Tech – Tips for Beginners"}]},{"@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":"April 2022"}]}]} ```