Ever wondered how Google Maps loads and zooms so smoothly? While their full system is massively complex, the fundamental idea behind map display is surprisingly approachable.
In this post, we'll walk through the process of building a very basic tile-based map display library - just enough to understand how tiled maps work, including zoom and pan behavior.
]]>Web performance significantly impacts user experience, search rankings, and overall site success. One indispensable tool frontend developers have at their disposal is Google Lighthouse—a powerful, open-source tool for auditing and improving web page performance, accessibility, and SEO.
Have you ever wondered how to build a video playback feature like YouTube, where videos seamlessly adjust quality based on your internet connection?
The magic behind this is Dynamic Adaptive Streaming over HTTP (DASH), a powerful protocol designed to optimize video streaming by dynamically adjusting the quality in real-time.
In this post, we'll explore how DASH works, why it's become the go-to solution for modern video streaming, and how you can implement it to deliver a smooth and responsive video experience for your users.
]]>React Query, also known as TanStack Query, is a powerful library designed to simplify data fetching, caching, and state management in React applications.
It excels at fetching, caching, synchronizing, and updating server state, addressing limitations in traditional state management libraries when dealing with asynchronous or server-side data.
Event delegation is a powerful technique in JavaScript that allows you to handle events for multiple elements efficiently.
This post will guide you through creating a custom utility function for event delegation in JavaScript. We'll cover the fundamentals of event delegation, explore its benefits, and build a robust and versatile utility function that you can use in your web development projects.
]]>
Ever found yourself ready to start frontend development for a new feature, only to be stalled because the backend API isn't ready? Mock server is your escape from this common development frustration.
Imagine a simulated backend, mimicking the behavior of real APIs, that lets you build and test your frontend code without waiting for actual backend services. That's the power of mock server in action.
]]>Ever wondered what i18n stands for?
It's short for internationalization, and it's a crucial concept for any application targeting a global audience.
Think of it as the process of making your app adaptable to different languages and cultural conventions, turning it into a true citizen of the world.
]]>In our previous post, we explained about how the fetch API can be used in JavaScript to make GET and POST requests. Let's look at some of the more advanced concepts of the fetch API in JavaScript.
In our previous post, we wrote about GET requests using JavaScript's fetch() method. This is a simple use case where we pass in a url into the method. However, fetch() also takes in a second parameter (optional) where we can pass in various request options.
In this post, we will be going through how we can control various settings using the request options parameter.
]]>Do you know what AJAX is? It seems to be an "old" concept today, it allows us to use JavaScript to send asynchronous data requests to the server and update the rendering of the page locally.
I still remember the excitement when I first knew this concept, I knew that a webpage was no longer just a piece of boring HTML code.
Today, we will focus on one of the most important features in a web application: Data Fetching from the Server.
The first time I heard the term Currying was during a job interview preparation. Fortunately, the interviewer did not ask me any questions about it.
Do you know what currying is? This simple concept can greatly simplify our code logic.
]]>The most common way of sending data to the server in a network request is by using a JSON object. But, in some cases, JSON maybe insufficient to transmit the data.
Let's see what are these use-cases and how we can handle them in JavaScript.
]]>
When a browser sends a request, the server responds with a corresponding HTTP status code, whether the request can be fulfilled or not.
As a developer, it is necessary to understand the meanings represented by common HTTP codes. But have you ever considered how HTTP codes affect SEO results?
]]>You're probably already familiar with using the HTTP protocol to retrieve data from servers. However, in addition to HTTP, browsers also provide another networking protocol to meet more advanced communication needs: WebSocket.
If you've never used WebSocket in your projects before, keep reading as we explore the world of WebSocket.
]]>Your website cannot readily use some services like camera, microphone, location, etc. on the user device. For security reasons, the websites need to specifically request for permissions from the user to use these services. In this post, let's learn how to handle these permissions on a webpage.
One of the crucial and fundamental component of a website is to make Network Requests to fetch some data. There are a lot of libraries available now, like axios, that make this task very easy to implement for the developers. But, if you've ever wondered what goes on underneath those libraries or if you want to achieve this using pure JavaScript, keep reading.
Let's discover some hidden gems and not so commonly used concepts in JavaScript. Iterators and Generators bring the concept of iteration directly into the core language and provide a mechanism for customizing the behavior of for...of loops.
As more websites embed YouTube videos into their pages to provide richer content, and it indeed helps users access information more effectively.
However, without proper optimization, it can burden the original page's loading efficiency.
]]>
The cloud storage has become an indispensable file backup and sharing solution in our daily work. But have you ever considered:
how is the resumable upload function implemented after an interruption?
Although JavaScript does not provide us with a built-in feature for this, we can easily solve the problem by following the ideas presented in this article.
]]>The Notification API allows web developers to create and display desktop notifications to users.
These notifications can provide asynchronous information, even if the user has switched between tabs or moved to another application.
]]>In JavaScript, functions are treated as first-class citizens. We can use functions as values, assign them to variables, pass them as arguments to other functions, or even return them from other functions.
This powerful feature enables us to create Higher-Order Functions (HOF).
"What is JavaScript Closure?"
This question frequently arises during interviews. If you're unsure, here is everything you should know!
]]>In many cases, we rely on the flex-direction property to manage the display order of flexible items.
In addition to this powerful property, we will explore another feature that enables precise control over the order of individual elements within the flex container
The order Property!
]]>Whether you're a seasoned developer or just starting your journey, understanding how to manipulate the web page's location through JavaScript can be a very useful tool in your arsenal.
From redirecting users to different pages to extracting valuable information about the current URL, location offers a wealth of functionality that every developer should master.
As a frontend developer, understanding how cookies work is essential for building robust web applications. In this article, we'll explore the world of browser cookies, demystify their mechanics, and learn how to harness their power in your projects.
]]>Understanding how to store data on the client side is essential for creating robust web applications. In this article, we'll explore local storage, one of the key mechanisms for caching data within the user's browser. Let's dive in!
]]>As a frontend developer, understanding how to store data on the client side is crucial. In this article, we’ll delve into the world of web storage, specifically focusing on session storage. Let’s explore what it is, how it works, and when to use it.
Please imagine you're building a spiffy weather application using JavaScript and you want to display live weather data from a popular weather service.
async function fetchWeatherData () {
const response = await fetch(
'https://api.weather.com'
);
console.log('weather', response);
}
You fire up your application, open the browser console, and… nothing. No weather data!!!
Cross-Site Scripting (XSS) is a web security vulnerability that allows an attacker to inject malicious code into a web page that is viewed by other users.
XSS can compromise the user's interaction with the web application, steal their cookies or session tokens, redirect them to malicious sites, or perform other actions on their behalf.
]]>Multiple Promises Handling in JavaScript
Promises are a powerful way to handle asynchronous operations in JavaScript. They allow us to write clean and readable code, without using callbacks or nested functions.
However, sometimes we need to deal with multiple promises at the same time, and handle their results or errors in different ways.
For example, we might want to:
- Wait for all promises to resolve, and get an array of their values.
- Wait for all promises to settle, and get an array of their statuses and values or reasons.
- Wait for the first promise to resolve, and get its value.
Fortunately, JavaScript provides us with three static methods on the Promise constructor that can help us achieve these goals: Promise.all(), Promise.allSettled() and Promise.any().
In this article, we will explore how these methods work, what are their differences, and how to use them in various scenarios.
]]>Promises are a fundamental part of asynchronous programming, providing a convient way to manage asynchronous operations.
In this guide, we'll delve into the ins and outs of promises, covering their syntax, usage, common patterns, and best practices.
]]>Drop caps have been used for a long time with print media to add flair to the first letter of a section or chapter. It draws attention and entices the reader.
The ::first-letter pseudo-element applies styles to the first letter of a block container.
]]>Google has announced its plan to disable third-party cookies by default in Chrome, a step that will reshape the landscape of online tracking and user privacy. This change is part of a broader effort to enhance user privacy and security on the web.
]]>Debounce is a common technique used in web development to improve performance by controlling the rate at which a particular function is invoked.
It is particularly useful in scenarios where user input events, such as keystrokes or mouse movements, trigger function calls that can be resource-intensive.
]]>Ever wondered how the Singleton Design Pattern is used in frontend development?
Let's dive into this topic and understand the usage with the App Translator demo.
]]>Ever wondered why some JavaScript functions start with 'use strict' at the beginning?
The ability to seamlessly switch between languages enhances user experience and makes your website more accessible to a diverse audience. Let's explore the steps involved in achieving this functionality.
