Skip to content

Instantly share code, notes, and snippets.

View aungthuoo's full-sized avatar
💭
I am looking for a job.

Aung Thu Oo @ Andrew Maung aungthuoo

💭
I am looking for a job.
View GitHub Profile

What is Throttling?

Quick notes (Using JavaScript )

Js code

// throttling
let count = 0;
function printScroll() {
  count += 1;
  console.log("scroll called", count);
}

JavaScript Promise

A promise is an object that will produce a single value sometime in the future. If the promise is successful, it will produce a resolved value, but if something goes wrong then it will produce a reason why the promise failed.

Simply said:- It behaves very much similar to real life promises.

// promises
let fruits = ["apple", "banana", "orange"];

const animateOne = (fruit, animate) => {

JavaScript Callback

A JavaScript callback is a function which is to be executed after another function has finished execution.

Simply said:- Any function that is passed as an argument to another function so that it can be executed in that other function is called as a callback function. This results in callback hell.

// callbacks an callback hell
let fruits = ["apple", "banana", "orange"];

Debounce with React.js search example with Github repo

Debouncing is a strategy used to improve the performance of a feature by controlling the time at which a function should be executed.

Simple words:- It delays the execution of your code until the user stops performing a certain action for a specified amount of time. It is a practice used to improve browser performance.

Debouncing is a technique used to limit the rate at which a function is invoked. In the context of search functionality, debounce can be incredibly useful. When a user types into a search bar, it triggers a function to update the search results. However, if this function is invoked every time a keystroke occurs, it can lead to performance issues, especially if the search involves fetching data from a server.

Debouncing is a technique used to limit the rate at which a function is invoked. In the context of search functionality, debounce can be incredibly useful. When a user types into a search bar, it triggers a function to u

Using Google's ReCaptcha V3 with NextJS 13 and the New App Router

Quick notes

React.js installation

npx create-next-app@latest my-recaptcha-app
cd my-recaptcha-app

npm install axios react-google-recaptcha-v3
npm run dev 

Feed data to the components using getInitialProps

In the previous chapter we had an issue with dynamically generating the post page, because the component required some data up front, and when we tried to get the data from the JSON file:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => {
  const router = useRouter()

 const post = posts[router.query.id]

Using next/router

We already saw how to use the Link component to declaratively handle routing in Next.js apps.

It's really handy to manage routing in JSX, but sometimes you need to trigger a routing change programmatically.

In this case, you can access the Next.js Router directly, provided in the next/router package, and call its push() method.

Here's an example of accessing the router:

import { useRouter } from 'next/router'

What is Next.js Prefetching?

The Link Next.js component can be used to create links between 2 pages, and when you use it, Next.js transparently handles frontend routing for us, so when a user clicks a link, frontend takes care of showing the new page without triggering a new client/server request and response cycle, as it normally happens with web pages.

There's another thing that Next.js does for you when you use Link.

As soon as an element wrapped within <Link> appears in the viewport (which means it's visible to the website user), Next.js prefetches the URL it points to, as long as it's a local link (on your website), making the application super fast to the viewer.

This behavior is only being triggered in production mode (we'll talk about this in-depth later), which means you have to stop the application if you are running it with npm run dev, compile your production bundle with npm run build and run it with npm run start instead.

Using the Network inspector in the DevTools you'll notic

Next.js - Dynamic content with the router

Blog posts have a dynamic URL. For example a post titled "Hello World" might have the URL /blog/hello-world. A post titled "My second post" might have the URL /blog/my-second-post.

This content is dynamic, and might be taken from a database, markdown files or more.

Next.js can serve dynamic content based on a dynamic URL. We create a dynamic URL by creating a dynamic page with the [] syntax.

How? We add a pages/blog/[id].js file. This file will handle all the dynamic URLs under the /blog/ route, like the ones we mentioned above: /blog/hello-world, /blog/my-second-post and more.