Check out how easy it is to create a stunning Parallax effect using the framer-motion library
TypeScript's type system makes it very easy to add types as per our requirements. But most of the time, we may need to perform some transformations on existing types to get resultant type as per our requirements instead of adding a new one. Some common type transformations may include: Extraction of types Exclusion/Inclusion of types Setting types to required/optional Utility Types provided by TypeScript help in performing such type transformations. Utility Types are built-in and globally accessible functions available in TypeScript. Under the hood, they make use of Generics extensively. Some frequently used Utility Types are as follows:
Hooks introduced in React 16.8, allow us to use stateful logic, lifecycle methods, and side-effects in Functional Components. React's official doc on Hooks is the best way to get you started with them. useRef is one such very helpful Hook that returns a mutable ref object having current property initialized with the value passed as the argument. This mutable object's value persists across multiple renders in the lifecycle of the component and can have various applications based on use-cases. In this blog, we'll understand different scenarios in which the useRef Hook can be helpful with the aid of examples.
In Web Development, one of the core decisions developers have to make is to decide where to implement rendering in their application. The two most common rendering techniques are Client-Side Rendering: renders web page on the browser Server-Side Rendering: renders web page on the server Let's understand both the techniques in detail. Server Side Rendering VS Client Side Rendering: Before understanding both the techniques, let's get familiar with the following two important Performance Metrics: First Contentful Paint (FCP): This metric measures the time from when the page starts loading to the time when any part of the page's content is
Netlify offers free static website hosting with features like continuous deployment services, user-authentication, and form-handling. But static sites have limitations to perform server-side operations. These limitations have been addressed by Netlify by providing features to create Serverless Functions. In this blog, we'll create a simple application that displays a positive quote when we click the button. The quote displayed is returned from the API we'll create using netlify lambda function and deploy it. So let's get started. What is Serverless Computing? Serverless computing (or commonly referred to as serverless) is an execution model where cloud providers execute the piece of
In Part 1 we learned some fundamentals of react-native-reanimated, its declarative syntax and its working under the hood by creating a simple Accordion. If you missed the first part, it will be better if you visit it and come back here as lots of concepts covered there will be referred here in this article. In this blog, we'll understand how to perform translation transformation by creating a shiny effect on the progress bar using react-native-reanimated. So, let's get started. Pre-requisites: Basic knowledge of react-native Basic knowledge of react-native-reanimated from the previous article Initialize project: Let's create our project by running:
In recent years, location tracking of products/services provided by businesses has become a vital part for businesses as well as customers as it provides them with live updates. In one of our health and fitness-based apps, we had a requirement of integrating the map with custom style and track location of the user while performing activities such as running or cycling. In this blog, we will walk you through steps for integrating Google Maps with custom style and tracking the location of the user using react-native. Contents: Initialize project Add react-native-maps and link it Load default map Enabling Google