--- title: Best LogRocket posts — July 2022 | daily.dev description: The most upvoted LogRocket posts from July 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/logrocket/best-of/2022/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/logrocket/best-of/2022/07 og:type: website og:site_name: daily.dev og:title: Best LogRocket posts — July 2022 | daily.dev og:description: The most upvoted LogRocket posts from July 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 LogRocket — July 2022 1. 1 [](https://daily.dev/posts/build-an-automated-ecommerce-app-with-whatsapp-cloud-api-and-node-js-jih8x-wtx "Build an automated ecommerce app with WhatsApp Cloud API and Node.js") Article LogRocket · 4y Build an automated ecommerce app with WhatsApp Cloud API and Node.js In May 2022, Meta announced that they were opening up the WhatsApp Business API to the public. This article intends to welcome you to Meta’s world of opportunities. WhatsApp chatbots can help you generate leads, receive orders, schedule appointments, run surveys, take customer feedback, provide scalable customer support, send invoices and receipts. 147 4 2. 2 [](https://daily.dev/posts/bun-the-javascript-runtime-taking-on-node-js-and-deno-7tkakygw7 "Bun: The JavaScript runtime taking on Node.js and Deno") Article LogRocket · 4y Bun: The JavaScript runtime taking on Node.js and Deno In 2022, former Stripe developer Jared Sumner released Bun. Bun is a runtime developed in the Zig programming language. It aims to provide many of the features of transpilers, like Babel, and Bundlers like Webpack, Rollup, Snowpack, and Vite. 53 2 3. 3 [](https://daily.dev/posts/using-em-vs-rem-in-css-fzbml0sz9 "Using em vs. rem in CSS") Article LogRocket · 4y Using em vs. rem in CSS Within CSS, em and rem are both scalable units that also specify values of properties. Em and rem meet web accessibility standards, and, unlike px , scale better. Consequently, they are more suited for responsive design. We’ll also go over code examples to demonstrate how they work and their difference. 37 1 4. 4 [](https://daily.dev/posts/animate-a-react-app-with-animxyz-vrvhbnhoy "Animate a React app with AnimXYZ") Article LogRocket · 4y Animate a React app with AnimXYZ AnimXYZ is a composable CSS animation toolkit. It allows you to compose complex animations by combining simple utility classes. In this tutorial, we’ll guide you through the process of adding animations to your React application. At the end of the tutorial, you will have built an animated webpage that looks like the following. 32 1 5. 5 [](https://daily.dev/posts/how-to-use-redux-in-next-js-bg6ultkbu "How to use Redux in Next.js") Article LogRocket · 4y How to use Redux in Next.js Redux is one of the most popular state management solutions in the React ecosystem. Many projects that use Next.js want to take advantage of Redux as well. But using Redux in a Next application has a few catches, and the setup is not always straightforward. This article will walk you through how we can set up a Next project with Redux. 31 6. 6 [](https://daily.dev/posts/make-reading-json-easy-with-json-hero-iuvbiorhm "Make reading JSON easy with JSON Hero") Article LogRocket · 4y Make reading JSON easy with JSON Hero JSON is an important mechanism for data exchange in modern programming. Its text-based format and object-like syntax make it very convenient and easy for use in many programming languages. Working with raw, long JSON files can be hard, boring, and time-consuming. To see the actual data in action, you must first render it in your app. 30 1 7. 7 [](https://daily.dev/posts/build-3d-visuals-in-vue-with-lunchbox-js-gjcof3-rp "Build 3D visuals in Vue with Lunchbox.js") Article LogRocket · 4y Build 3D visuals in Vue with Lunchbox.js Lunchbox.js is a custom renderer for Three.js. It uses Vue’s component-based model and declarative style to handle imperative Three.JS functionalities under the hood. The library provides access to primitive Three. JS objects and classes through components, such as: mesh, light, material. 29 8. 8 [](https://daily.dev/posts/understanding-react-higher-order-components-kynlwzjn9 "Understanding React higher-order components") Article LogRocket · 4y Understanding React higher-order components In this article, we’ll cover the basics of React’s HOC concept, including introducing you to higher-order components, teaching you the syntax, and showing you how you can apply HOCs. We will also go over some common problems you might encounter with higher- order components. 24 9. 9 [](https://daily.dev/posts/rust-solidjs-and-tauri-create-a-cross-platform-desktop-app-mw6goz0jk "Rust, SolidJS, and Tauri: Create a cross-platform desktop app") Article LogRocket · 4y Rust, SolidJS, and Tauri: Create a cross-platform desktop app Tauri is a new framework for building binaries for most major desktop platforms. Tauri uses a multi-process approach. The Core process is essentially the backend of the application with all the data models and application logic written in Rust. The WebView process is the application UI that is built in the JavaScript framework of your choice. 23 10. 10 [](https://daily.dev/posts/web-scraping-with-rust-expwpjky3 "Web scraping with Rust") Article LogRocket · 4y Web scraping with Rust Web scraping refers to gathering data from a webpage in an automated way. The details of web scraping highly depend on the page you’re getting the data from. 22 1 11. 11 [](https://daily.dev/posts/reduce-maintenance-effort-with-shared-eslint-and-prettier-configs-eq952qzsz "Reduce maintenance effort with shared ESLint and Prettier configs") Article LogRocket · 4y Reduce maintenance effort with shared ESLint and Prettier configs If you work on multiple projects, you might end up using the same ESLint and Prettier settings in each of them. With this approach, you only have to make changes in a single place, publish a new version, and update the dependency version in your projects. In addition, you can add or override rules, or add configurations that are project-specific. 17 12. 12 [](https://daily.dev/posts/how-to-build-a-notes-app-with-react-and-localstorage-cigkpciwq "How to build a notes app with React and localStorage") Article LogRocket · 4y How to build a notes app with React and localStorage In this article, we’ll learn how to create a notes app in React and integrate the app with localStorage. The main functions of our app will include creating a note, setting a character limit, deleting notes, and saving them in localStorage . Let’s get started! 17 13. 13 [](https://daily.dev/posts/how-to-use-dataloader-with-nestjs-g8xutc9ek "How to use DataLoader with NestJS") Article LogRocket · 4y How to use DataLoader with NestJS The Data loader package is a generic API that we can use to speed up loading data from any remote data source. It does this by providing batching and caching functionalities. In this article, I will show how the Data loader can help us minimize the number of trips we need to make to the data sources. I will also show how we can using it to solve a common problem with GraphQL servers, the N+1 problem. 16 14. 14 [](https://daily.dev/posts/using-custom-events-in-react-wsmprpu0w "Using custom events in React") Article LogRocket · 4y Using custom events in React Custom events are actions that happen on a web page to HTML elements. They can also be used to pass data easily across an application. This article will show you how to use custom events in React. We’ll build a demo to show how to make use of custom events. 15 15. 15 [](https://daily.dev/posts/guide-to-promises-in-node-js-yw5zvjvyp "Guide to promises in Node.js") Article LogRocket · 4y Guide to promises in Node.js Node.js promises are an improvement of callbacks that manage all asynchronous data activities. A promise represents an activity that will either be completed or declined. Promises are generally created by calling a Promise constructor, which accepts a single callback function as an argument. The callback function, also known as the executor function, is executed immediately after a promise is created. 14 16. 16 [](https://daily.dev/posts/understanding-the-exclamation-mark-in-typescript-f5vw3aext "Understanding the exclamation mark in TypeScript") Article LogRocket · 4y Understanding the exclamation mark in TypeScript The non-null assertion operator tells the TypeScript compiler that a value typed as optional cannot be null or undefined. For example, if we define a variable as possibly a string or undefined, the ! operator tells TypeScript to ignore the possibility of it being undefined. We will be using these terms interchangeably in this article. 14 17. 17 [](https://daily.dev/posts/the-advanced-guide-to-the-css-has-selector-pmib5t23z "The advanced guide to the CSS :has() selector") Article LogRocket · 4y The advanced guide to the CSS :has() selector The.has() pseudo-class is a level 4 CSS selector, now available as a fully supported feature in Chrome 105 onwards. It works on the parent rather than children, and uses a comma-separated list of selectors as arguments. The class.selector only gets selected if it contains the elements passed to it as parameters using the has() Pseudecessor. You can also provide a list of multiple element selectors. 11 18. 18 [](https://daily.dev/posts/handling-user-authentication-with-redux-toolkit-z4hknqbwy "Handling user authentication with Redux Toolkit") Article LogRocket · 4y Handling user authentication with Redux Toolkit In this article, we’ll learn how to use Redux Toolkit (RTK) to create a frontend authentication workflow in React. The backend for this project is built using Express with a MongoDB database, but the frontend workflow should still apply for any authentication service you use that provides a token. 10 [See all LogRocket archives](/sources/logrocket/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/logrocket/best-of/2022/07#page","url":"https://daily.dev/sources/logrocket/best-of/2022/07","name":"Best LogRocket Posts — July 2022","description":"The most upvoted LogRocket posts from July 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/logrocket/best-of/2022/07#items","numberOfItems":18,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/build-an-automated-ecommerce-app-with-whatsapp-cloud-api-and-node-js-jih8x-wtx","name":"Build an automated ecommerce app with WhatsApp Cloud API and Node.js"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/bun-the-javascript-runtime-taking-on-node-js-and-deno-7tkakygw7","name":"Bun: The JavaScript runtime taking on Node.js and Deno"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/using-em-vs-rem-in-css-fzbml0sz9","name":"Using em vs. rem in CSS"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/animate-a-react-app-with-animxyz-vrvhbnhoy","name":"Animate a React app with AnimXYZ"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/how-to-use-redux-in-next-js-bg6ultkbu","name":"How to use Redux in Next.js"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/make-reading-json-easy-with-json-hero-iuvbiorhm","name":"Make reading JSON easy with JSON Hero"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/build-3d-visuals-in-vue-with-lunchbox-js-gjcof3-rp","name":"Build 3D visuals in Vue with Lunchbox.js"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/understanding-react-higher-order-components-kynlwzjn9","name":"Understanding React higher-order components"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/rust-solidjs-and-tauri-create-a-cross-platform-desktop-app-mw6goz0jk","name":"Rust, SolidJS, and Tauri: Create a cross-platform desktop app"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/web-scraping-with-rust-expwpjky3","name":"Web scraping with Rust"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/reduce-maintenance-effort-with-shared-eslint-and-prettier-configs-eq952qzsz","name":"Reduce maintenance effort with shared ESLint and Prettier configs"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-to-build-a-notes-app-with-react-and-localstorage-cigkpciwq","name":"How to build a notes app with React and localStorage"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-use-dataloader-with-nestjs-g8xutc9ek","name":"How to use DataLoader with NestJS"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/using-custom-events-in-react-wsmprpu0w","name":"Using custom events in React"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/guide-to-promises-in-node-js-yw5zvjvyp","name":"Guide to promises in Node.js"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/understanding-the-exclamation-mark-in-typescript-f5vw3aext","name":"Understanding the exclamation mark in TypeScript"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/the-advanced-guide-to-the-css-has-selector-pmib5t23z","name":"The advanced guide to the CSS :has() selector"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/handling-user-authentication-with-redux-toolkit-z4hknqbwy","name":"Handling user authentication with Redux Toolkit"}]},{"@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":"LogRocket","item":"https://daily.dev/sources/logrocket"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/logrocket/best-of"},{"@type":"ListItem","position":5,"name":"July 2022"}]}]} ```