Skip to main content

Posts

Showing posts from April, 2022

Building Reducer Using Redux Toolkit

Redux Toolkit is one of the libraries that can help us manage our application state which depends on Redux. It allows us to create reducers within our application and separate each reducer from one another based on any criteria that we desired in a specific kind of module. There are some approaches that we can utilize to build reducers in Redux Toolkit. Basic Shape const slice = createSlice({ // ... reducers: { increment: (state) => { state += 1; } } }); On the code above, it seems that we mutate the state, but actually, Redux Toolkit utilizes Immer in the backstage so it will be translated into immutable operation. Then, unlike legacy libraries that require us to manually define the action that will be dispatched to be handled by a specific reducer, Redux Toolkit can generate action creators for us. const { increment } = slice.actions; // "increment" is the action creator Then, we can dispatch the action inside our compone...

Double Invoking In React Application with Strict Mode Enabled

When we use create-react-app to generate our application source code, we will be provided with a base code that enables  React.StrictMode by default. This wrapper component doesn't render an HTML element but it performs useful functionality to verify that our application is safe for production. It checks for legacy or deprecated React functions or APIs, unexpected side-effects, and unsafe lifecycle. We can read the details about those functionalities on its documentation page . To help us spot side-effects, React will double-invoking several functions in our application such as render , constructor , functions passed in useMemo or useReducer , and so on. By double-invoking such functions, we can detect if unexpected results will show up. But, this process will be initiated only in development mode. When we ship our application in a production environment with Strict Mode enabled, double-invoking will never happen. This is why when we render a component that contains useEffect ...

Tokyo - Yui

 

Limiting Bitrate and Network Throttling

We may limit incoming or outcoming data rates to/from our infrastructure to maintain the stability of our service for customers. Bitrate limitation is an action to limit the number of bits that can be passed through a transmission channel in a period of time. Network throttling is an intentional action to slow down transmission speed in a network channel. It is not only about limiting bitrate but also limiting the allowed number of requests in a period of time. There are several tools and techniques that can be used to apply bitrate limitation and network throttling. Wondershaper It is an easy-to-use tool for Linux and is already in the package repository. It can limit the bit rate that can be achieved by network interfaces in the system. We can install it by running the following command. apt install wondershaper We can choose an interface to have a limitation either or both on download and upload. wondershaper <interface-name> <download-rate-in-bps> <upload-...

Handle File Upload with Express and Multer

Express undoubtedly has become a popular framework for building web applications based on Node.js. It is shipped with support for handling file uploading using middleware that takes the user requests, parses the contents for the files, and provides the next handler with the files information. The following snippet shows a basic example of handling files uploading in Express using Multer. const multer = require('multer'); const storage = multer.diskStorage({ destination: (req, file, cb) => { // store files to "uploads/" directory cb(null, 'uploads/'); }, }); const upload = multer({ storage }); // initiate an upload handler that can accept multiple fields and multiple files const uploadHandler = upload.fields([ { name: 'galleryImages', maxCount: 10 }, { name: 'userFiles', maxCount: 2 }, ]); app.post('/upload', uploadHandler, (req, res) => { res.json(req.files); }); The sample above can be used if we just...

Object Storage Comparison of DigitalOcean, Linode, and UpCloud

In this post, I want to show a test result of object storage services provided by DigitalOcean, Linode, and UpCloud. The result shows the average durations required to download/upload files from/to their cloud infrastructures. But, before we go into the test detail, let us overview the user features provided by each cloud provider. DigitalOcean has the most advanced features compared to the rest. By utilizing its user dashboard, we can set a custom domain for the CDN of object storage, customize permission per object, and custom CORS headers. UpCloud has a more straightforward interface but with a unique concept for creating separate bucket domains (directories) in a single object storage subscription. Linode has the simplest features in its interface but it provides CLI tools for managing the buckets and stored objects. Now, let us go back to the main topic. For the test, I deploy an AWS EC2 server based in Tokyo as a tester node. Then, I set separate object storages on DigitalOcean, ...

Zoro vs Mihawk

An old fight and the first encounter with Mihawk. " Scars on the back are the swordman's shame "

Managing MongoDB Records Using NestJS and Mongoose

NestJS is a framework for developing Node.js-based applications. It provides an additional abstraction layer on top of Express or other HTTP handlers and gives developers a stable foundation to build applications with structured procedures. Meanwhile, Mongoose is a schema modeling helper based on Node.js for MongoDB. There are several main steps to be performed for allowing our program to handle MongoDB records. First, we need to add the dependencies which are @nestjs/mongoose , mongoose , and @types/mongoose . Then, we need to define the connection configuration on the application module decorator. import { MongooseModule } from '@nestjs/mongoose'; @Module({ imports: [ MongooseModule.forRoot('mongodb://localhost:27017/mydb'), ], controllers: [AppController], providers: [AppService], }) Next, we create the schema definition using helpers provided by NestJS and Mongoose. The following snippet is an example with a declaration of index setting and an o...