JoyDev

AngularJS: Implementing a Reusable Toggle Chevron with MVC Architecture

JoyJaewon — Wed, 29 May 2024 22:28:16 +0900

In this blog post, we'll delve into how to implement a reusable toggle chevron feature in AngularJS, which is particularly handy for collapsible panels or dropdowns. This example will follow the Model-View-Controller (MVC) pattern, ensuring our code is both manageable and scalable. We will create a controller that handles the logic, use a directive for our view, and maintain the state in our model.

AngularJS MVC Structure and Implementation

The MVC architecture separates concerns, making our applications easier to manage and extend:

Model: Manages data and rules. Here, the model will keep track of whether sections are expanded or collapsed.
View: Displays data (model) and sends user actions (events) to the controller.
Controller: Updates the model based on user actions captured in the view and updates the view in response to model changes.

Step-by-Step Implementation

1. HTML Structure

We start by defining our HTML structure that will utilize our AngularJS components. We'll pass chevronId through to our AngularJS code, ensuring we can uniquely identify and control our toggle chevron.

<div ng-app="toggleApp" ng-controller="ToggleController">
    <div>
        <a ng-click="toggleChevron()"
           class="btn btn-chevron_icon"
           data-bs-toggle="collapse"
           href="#{{chevronId}}"
           role="button"
           aria-expanded="{{isTableExpanded}}"
           aria-controls="{{chevronId}}"
           ng-class="{'disabled': itemCollection.length == 0, 'btn-chevron_icon--disabled': itemCollection.length == 0}">
            <i ng-class="{'fa fa-chevron-up': isTableExpanded, 'fa fa-chevron-down': !isTableExpanded}"></i>
        </a>
        Address
    </div>
</div>

2. AngularJS Controller

The controller will handle the logic for toggling the chevron and listening to changes in the collection that might affect the visibility and state of the chevron.

angular.module('toggleApp', [])
.controller('ToggleController', ['$scope', '$attrs', function ($scope, $attrs) {
    $scope.chevronId = $attrs.chevronId;
    $scope.isTableExpanded = true;

    $scope.toggleChevron = function() {
        $scope.isTableExpanded = !$scope.isTableExpanded;
    };

    $scope.$watch('itemCollection.length', function (newLength) {
        $scope.isTableExpanded = newLength > 0;
    });
}]);

3. Explanation of the Code

The ToggleController initializes with a default expanded state (isTableExpanded = true).
toggleChevron is a function bound to the click event of the chevron link, which toggles the state of isTableExpanded.
A $watch is set up on itemCollection.length to automatically collapse the chevron if the collection is empty, demonstrating responsive UI updates based on data changes.

By encapsulating the toggle logic in a directive and handling the state through a controller, this AngularJS implementation follows the MVC pattern, ensuring that each aspect of the application is properly isolated but works cohesively. This approach enhances maintainability and scalability, allowing other developers to easily understand and reuse components across the application.

Reflecting on 2023: A Year of Growth and Learning

JoyJaewon — Sun, 31 Dec 2023 15:11:25 +0900

2023 was a remarkable year for me – a period brimming with growth, both personally and professionally. As I sit down to pen this retrospective, it strikes me just how far I've come, particularly in my role at the company where I delved deep into the world of software development.

Embracing Full-Stack Development

The year marked a significant shift in my career. I transitioned from handling small-scale projects to taking charge of entire pages, a move that saw me diving into C#. This was more than just learning a new language; it was about understanding the intricate web of our company's codebase. I began navigating files with ease, uncovering the connections between JSON and C#, unraveling the mysteries of APIs, and applying concepts like `GET`, `PUT`, and `POST` that I'd only encountered in academic settings.

My work on the Directory and Mortgage Call Report Pages as the sole developer was particularly enlightening. These projects honed my problem-solving skills and taught me the value of thorough research and seeking guidance from senior developers. They were exercises in critical thinking, pushing me to consider not just how to make code work, but how to make it efficient and clean.

A Broader Perspective

2023 expanded my horizon beyond UI and UX design and simple AngularJS scripts. I delved into the full-stack cycle, gaining a broader perspective on project development. This shift in viewpoint wasn't just about seeing the bigger picture; it also led me to think more structurally. Where my earlier approach was just about getting code to work, I now focus on writing cleaner, more efficient code.

Continuous Learning and Side Projects

Outside of work, I kept the momentum going. I completed a 10-week study in React, bolstering my frontend skills, and embarked on various side projects, including developing my wedding website, cloning YouTube, and crafting a portfolio site. These endeavors not only supplemented my professional growth but also allowed me to explore and express my creativity in new ways.

On the education front, I graduated with a master's in Computer Science, specializing in Data Science, in May. The journey through academia reaffirmed my belief in the endless depth and breadth of this field. The more I learn and engage in diverse projects, the more expansive and profound my understanding becomes.

DSA and Mentoring

In my pursuit of deepening my knowledge in Data Structures and Algorithms (DSA), I joined the Formation platform. Here, I learned from top-tier industry mentors, dedicating time after work to study and grow. This experience was not just about acquiring new knowledge but also about understanding its practical application in real-world scenarios.

Looking Forward

As I look back on 2023, I'm filled with gratitude for the experiences and lessons. It's been a year of substantial growth, challenges, and achievements. And yet, I know there's so much more to learn and many more heights to reach.
I step into 2024 with excitement, ready to embrace new challenges, deepen my knowledge, and continue contributing to the ever-evolving world of technology.

Here's to another year of growth, learning, and coding!

AngularJS: Validating Data Before Updating the API

JoyJaewon — Sat, 30 Sep 2023 08:16:58 +0900

Last time, we went on a deep dive into importing CSV files, mapping the fields, and storing that data using AngularJS's `$http.post`. If you missed that part, make sure to catch up here . Today, as promised, we'll focus on a critical aspect of any data manipulation process: validation.

Why Data Validation is Important

First things first: Why do we even need to validate data? Simply put, garbage in equals garbage out. If you start with inaccurate or incomplete data, no amount of fancy algorithms or complex systems can make your application function correctly. Validation ensures that the data being sent to your API meets certain criteria, reducing the likelihood of errors and ensuring integrity.

Implementing Basic Validation Logic

Before you hit the "Save" button and make the POST request to the API, you should make sure that the data is valid. Let's start by adding some basic checks in our controller.

Here's an updated `$scope.validateData` function:

$scope.validateData = function(allItems) {
    let isValid = true;
    let errorMessages = [];

    allItems.forEach(function(item, index) {
        if (!item.FirstName || !item.LastName || !item.Email) {
            isValid = false;
            errorMessages.push(`Missing required fields in item at index ${index}`);
        }

        if (item.Email && !emailValidator(item.Email)) {  // Assume emailValidator is a function to validate emails
            isValid = false;
            errorMessages.push(`Invalid email format in item at index ${index}`);
        }

        // Add more validation logic here
    });

    return { isValid, errorMessages };
};

In the example above, `emailValidator` could be a simple function that uses a regular expression to check if the email address is in a valid format. We're checking for missing required fields (`FirstName`, `LastName`, and `Email`) and invalid email formats. If any item fails these checks, we store an error message and set `isValid` to `false`.

Using the Validation Function

Before we proceed to save the data, let's make sure to call this validation function. Here's how to integrate it with the `$scope.saveCSV` function:

$scope.saveCSV = function(allItems) {
    let validation = $scope.validateData(allItems);

    if (validation.isValid) {
        return $http.post('/api/YourEndpoint/', {
            Data: JSON.stringify(allItems)
        });
    } else {
        console.log('Validation failed:', validation.errorMessages);
        // Handle validation errors here
    }
};

Conclusion

That’s it! You now have a way to validate your data before making that crucial POST request. It's a simple but powerful addition to your data manipulation arsenal. Good validation is like a solid foundation; it may not be the most exciting part of the construction process, but without it, you're always at risk of everything tumbling down.

In the next post, I will talk about regex that can be used for the validation.

Until then, happy coding!

AngularJS: Importing CSV Files and Save Each Row

JoyJaewon — Fri, 1 Sep 2023 02:01:54 +0900

Recently, I wrapped up the development of a directory page at work, and I learned so much from this project. The project entailed a multitude of tasks—fetching data from an API, implementing sorting and searching functionalities, importing and validating CSV files, and updating the API through POST requests for CRUD operations. While these features might appear straightforward on the surface, diving deeper reveals a complex web of interconnected components.

Since this project was such a rich learning experience, I've decided to document it for both reflection and future reference. In my previous posts, we explored how to convert JSON data to a CSV file and enable its download.

Today, we're going to delve into the process of importing CSV files, mapping their data fields—such as Email, Title, and Phone—and then saving them using AngularJS's `$http.post`. And in the next post, we will talk about validating the data before making the POST request to update the API.

Creating a Custom Directive for File Input in AngularJS.

Before we get into the code, it's worth noting that AngularJS doesn't offer a native directive for file input handling. We'll need to create our own custom directive to bridge the gap between raw file input and AngularJS.

Here's a directive called `fileModel`, which leverages `$parse` to bind the file input to a scope variable:

.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}])

This directive ensures that any file input element in our HTML can bind to a scope variable, making it available for our AngularJS code to process.

Importing and Mapping CSV Data

In your controller, you can define a function named `$scope.importCSV`. This function will do the heavy lifting of reading the file, breaking it into lines and headers, and mapping these to JSON objects.

$scope.importCSV = function () {
    // Get the file from scope, populated by our 'fileModel' directive
    let file = $scope.myFile;
    if (file) {
        // Create a FileReader object
        let reader = new FileReader();
        
        // Define what happens when the file has been read
        reader.onload = function (event) {
            let contents = event.target.result;
            let lines = contents.split('\n');
            let headers = lines[0].split(',');
            let csvItems = [];

            // Loop through each line in the file
            let i = 1;
            while (i < lines.length) {
                let result = getNextRow(lines, i);  // Assume getNextRow is a function that gets the next row
                let row = result.row;
                i = result.nextIndex;

                // Skip empty lines
                if (row.join('').trim() === "") continue;

                let obj = {};
                // Loop through each header and assign the corresponding value to our object
                for (let j = 0; j < headers.length; j++) {
                    obj[headers[j].trim()] = row[j] ? row[j].trim() : "";
                }
                csvItems.push(obj);
            }

            // Map these objects to your desired format
            let allItems = [];
            for (let csvItem of csvItems) {
                let item = {
                    Id: generateId(),  // Assume generateId is a function that generates an ID
                    FirstName: csvItem["First Name"],
                    LastName: csvItem["Last Name"],
                    Email: csvItem["Email"]
                    // Add more fields as necessary
                };

                allItems.push(item);
            }

            // Save these objects by calling a function to do an HTTP POST operation
            $scope.saveCSV(allItems);
        };
        
        // Initiate reading the file
        reader.readAsText(file);
    }
};

This function is triggered when you want to import a CSV. It reads the file, iterates through the lines, and maps them to a list of JavaScript objects (`allItems`). Finally, it calls `$scope.saveCSV(allItems)` to save these objects.

Saving the Data

Finally, the `$scope.saveCSV` function is called to save this mapped data:

$scope.saveCSV = function (allItems) {
    return $http.post('/api/YourEndpoint/', {
        Data: JSON.stringify(allItems)
    });
};

This function posts the mapped JSON data to the API, where it's stored for future CRUD operations.

And that's a wrap for this installment! We've gone through the entire process of importing a CSV file, parsing its contents, and saving it to our API using AngularJS's $http.post. In the next post, we'll discuss how to validate this data before we hit that "Save" button and send it to our API. Until then, happy coding!

AngularJS: Converting and Downloading JSON as CSV

JoyJaewon — Tue, 15 Aug 2023 23:26:58 +0900

Today, I want to dive into an intriguing method that I've employed while working with the transition between CSV and JSON formats. As developers, we often encounter situations where data needs to be stored, processed, and then retrieved in a convenient format. In this blog post, I'm going to outline a technique that makes storing and retrieving data in a CSV format from a JSON object a seamless process.

When I was assigned this task, I was wondering why not just upload and store the CSV file in the system? So I did some research, and I learned that storing data in the JSON format in our database rather than as raw CSV files provides a multitude of advantages:

1. Readability and Structure: JSON format is both human-readable and easy to parse, making the stored data easily understandable and workable.
2. Flexibility: JSON's structure allows for nested objects and arrays, making it a more flexible data representation.
3. Standardized Data Interchange: Many modern APIs use JSON for data interchange, making it the lingua franca of web-based data.
4. Storage Efficiency: When storing data in a structured database, JSON can often be more space-efficient than CSV, especially when there are many optional columns in your data.
5. Security: Parsing CSV is prone to injection attacks if not done carefully, while JSON parsing libraries are typically more robust and safe.

1. Converting JSON to CSV

Before diving into the downloading part, let's first convert our JSON data to CSV. This function aptly named `jsonToCSV` takes care of that:

function jsonToCSV(objArray) {
    const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
    let csvString = '';
    
    if (array.length > 0) {
        const headers = Object.keys(array[0]).join(',');
        csvString += headers + '\r\n';
    }
    
    for (let item of array) {
        let line = '';
        for (let key in item) {
            if (line) line += ',';
            line += String(item[key]).includes(',') ? `"${item[key]}"` : item[key];
        }
        csvString += line + '\r\n';
    }
    return csvString;
}

The logic is quite simple:
- We first ensure that the data we have is an array of objects.
- We extract the headers (i.e., object keys) and append them as the first row of our CSV string.
- We then iterate over each object (row of data) and append its values to our CSV string, ensuring that data containing commas is wrapped in double quotes.

2. Fetching Data and Prompting a Download

Now, with our CSV string in hand, it's time to download the data. Here's an example function, integrated with AngularJS, that fetches JSON data from an API, converts it to CSV, and initiates a download:

$scope.downloadSampleCSV = function () {
    $http.get('/api/Settings/User/SystemDefaults/Your CSV')
        .then(function(response) {
            const jsonData = response.data;
            const csvContent = jsonToCSV(jsonData);
            $scope.downloadCSV(csvContent, 'Sample.csv');
        });
};

The function:
- Sends a GET request to fetch JSON data.
- Uses the `jsonToCSV` function to convert this data to CSV.
- Calls another function (in this example, `$scope.downloadCSV`) to handle the CSV download.

Happy coding!

AngularJS: Dealing with Async Updates using Promise.all() and $scope.$applyAsync()

JoyJaewon — Tue, 1 Aug 2023 00:46:46 +0900

During my recent work on an AngularJS project, I faced a peculiar issue. I needed to fetch data from multiple URLs, process the results once they were all fetched, and then update my controller's scope with the processed data. However, due to JavaScript's asynchronous nature, I found my view not getting updated promptly, leading to inconsistencies in the user experience. Here's how I resolved this issue using `Promise.all()` and `$scope.$applyAsync()`.

Issue

In my AngularJS application, I had to fetch data from a series of URLs. Each of these requests returned an object that I needed to process and then push into an array in my controller's scope. The array was then displayed in the application's view. The code for fetching and processing the data was something like this:

$scope.getData = function () {
    $http.get('url')
        .then(function (response) {
            const responseData = response.data;
            const dataPromises = responseData.map(function (item) {
                return $http.get('item-url')
                    .then(function (response) {
                        let itemData = response.data;
                        $scope.myArray.push(itemData);
                    });
            });

            //...
        });
};

The problem was that the view wasn't getting updated immediately when `$scope.myArray` was modified. This was because the `$http.get()` calls were asynchronous, and the view was getting rendered before the data was fully fetched and processed.

Solution 1. Promise.all()

Promise.all() is a built-in JavaScript function that takes an array of promises and returns a new promise that only resolves when all the promises in the array have resolved. This function was exactly what I needed to ensure that my view only got updated after all the data had been fetched and processed. I modified my code to use `Promise.all()` like this:

$scope.getData = function () {
    $http.get('url')
        .then(function (response) {
            const responseData = response.data;
            const dataPromises = responseData.map(function (item) {
                return $http.get('item-url')
                    .then(function (response) {
                        let itemData = response.data;
                        return itemData;
                    });
            });

            Promise.all(dataPromises).then(function (allData) {
                $scope.myArray = allData;
                //...
            });
        });
};

This solved part of the problem, but the view was still not getting updated immediately. This was because AngularJS wasn't aware that `$scope.myArray` was being modified inside the `Promise.all()` callback.

Solution 2. $scope.$applyAsync()

In AngularJS, `$scope.$apply()` is used to manually trigger a digest cycle, which checks for changes in the model and updates the view. But calling `$scope.$apply()` multiple times during the same digest cycle can lead to an error. `$scope.$applyAsync()`, on the other hand, schedules an apply operation that will occur later, which won't cause errors if it's called multiple times in the same digest cycle.

I modified my code to use `$scope.$applyAsync()` inside the `Promise.all()` callback, ensuring that AngularJS would be aware of the changes to `$scope.myArray` and update the view accordingly:

$scope.getData = function () {
    $http.get('url')
        .then(function (response) {
            const responseData = response.data;
            const dataPromises = responseData.map(function (item) {
                return $http.get('item-url')
                    .then(function (response) {
                        let itemData = response.data;
                        return itemData;
                    });
            });

            Promise.all(dataPromises).then(function (allData) {
                $scope.myArray = allData;
                $scope.$applyAsync();
            });
        });
};

And there you have it! By combining `Promise.all()` and `$scope.$applyAsync()`, I was able to fetch and process multiple sets of data asynchronously, update my controller's scope when all the data was ready, and ensure that the view was updated promptly and correctly.

This approach demonstrates the power of JavaScript's Promise API and AngularJS's built-in services and tools. It allows us to manage complex asynchronous operations more easily and efficiently.

Happy Coding!

AngularJS: Handling Null and Empty Values with orderBy Filter

JoyJaewon — Wed, 26 Jul 2023 11:44:16 +0900

Today, I want to share a powerful solution that I discovered while working with AngularJS's `orderBy` filter. Sorting lists is a common task in web development, and AngularJS offers a convenient `orderBy` filter to handle it. However, I stumbled upon a challenge when dealing with null or empty values during sorting. In AngularJS, orderBy filter doesn't provide a straightforward way to handle null or empty values in a special way, such as placing them at the end of the list. However, we can workaround this by creating a custom filter function. This custom function will separate the list into two arrays, sort both arrays, and then concatenate them.

Here's a simplified version of the custom sorting function:

function customSort(itemList) {
    var withTheData = [];
    var nullData = [];

    for (var i = 0; i < itemList.length; i++) {
        if (itemList[i].orderKey !== null && itemList[i].orderKey !== undefined) {
            withTheData.push(itemList[i]);
        } else {
            nullData.push(itemList[i]);
        }
    }

    withTheData.sort(sortFunction);
    nullData.sort(sortFunction);

    return withTheData.concat(nullData);
}
}

In the code above, we define the `customSort` function, which takes an `itemList` as its argument. Inside the function, we declare two arrays: `withTheData` to store items with valid `orderKey`, and `nullData` to store items with null or undefined `orderKey`.

Next, we loop through the `itemList` and separate the items based on whether they have a valid `orderKey` or not. If the `orderKey` is neither null nor undefined, we push the item into `withTheData`; otherwise, we push it into `nullData`.

After that, we sort both arrays using a custom sorting function called `sortFunction`. This function allows you to implement your specific sorting logic. In this example, we sort the items by 'Name', assuming 'Name' is a property of the items.

Finally, the function returns the concatenated result of `withTheData` and `nullData`, ensuring that items with null or undefined `orderKey` appear at the end of the sorted list.

With this custom sorting function, you can now easily manage null or empty values in your AngularJS projects and get the exact sorting you want.

Happy coding and happy sorting!

Introducing AngularJS and Analyzing the MVC Architecture

JoyJaewon — Fri, 19 May 2023 03:12:31 +0900

Today, we will explore AngularJS, a JavaScript MVC framework, and analyze its development pattern, the MVC (Model-View-Controller) structure. AngularJS has evolved since its inception, so let's take a look at its updated features and advantages.

Introduction to AngularJS

AngularJS is an opensource JavaScript framework that extends HTML for dynamic web application development. It provides a robust set of features and follows the MVC architectural pattern. With AngularJS, developers can build responsive and interactive web applications efficiently. Some key features of AngularJS include:

1. Two-way data binding: AngularJS simplifies data synchronization between the model and view by automatically updating the view when the model changes, and vice versa.

2. Directives: AngularJS introduces the concept of directives, which allows developers to extend HTML with custom attributes and elements. Directives enable the creation of reusable components and enhance the declarative nature of HTML.

3. SPA (Single Page Application) support: AngularJS facilitates the development of SPAs by offering features like routing, which enables seamless navigation between different views without page reloads.

4. Dependency injection: AngularJS provides a built-in dependency injection mechanism, allowing developers to manage and inject dependencies into components, promoting modularity and testability.

5. Templating: AngularJS uses HTML as a template language, making it easier to create dynamic views and declaratively bind data to the view.

While Angular and other frameworks like React and Vue.js have gained popularity in recent years, AngularJS still remains in many legacy codebases. It's important to note that AngularJS and Angular (also known as Angular 2+) are distinct frameworks with different features and syntax.

AngularJS MVC Structure and Execution Principles

The MVC architecture plays a central role in AngularJS application development.

1. Model (M): The model represents the data and business logic of the application. In AngularJS, the model is often defined as a JSON structure, which can be accessed and manipulated within the controllers. To bind the model to the view, AngularJS uses the ng-model directive.

2. View (V): The view is responsible for rendering the user interface. It is typically created using HTML templates and enhanced with AngularJS directives and expressions. The view interacts with the model through data binding, displaying and updating the data in response to user actions.

3. Controller (C): Controllers handle the application's logic and act as an intermediary between the model and the view. They retrieve data from the model, perform necessary operations, and update the model accordingly. In AngularJS, the $scope service acts as the bridge between the controller and the view, allowing easy access and manipulation of data. Controllers are defined using the ng-controller directive.

The AngularJS execution model allows real-time updates and efficient data synchronization between the model and the view. Unlike traditional web applications, which require manual updates, AngularJS automatically reflects changes in the view as soon as the underlying data changes.

In addition to the MVC structure, AngularJS provides routing capabilities. Similar to back-end routing in frameworks like Node.js, AngularJS enables front-end routing, allowing efficient navigation between views based on user interactions.

AngularJS MVC Code Structure

Let's take a look at the basic code structure of an AngularJS application.

This represents the fundamental structure of an AngularJS application. The structure can evolve and become more complex over time. In this post, I will focus on explaining how the MVC structure is translated into code. The code structure of AngularJS follows a hierarchical tree-like organization. The top-level attribute is ng-app, which refers to the AngularJS module in the JavaScript part of the application. In most AngularJS projects,

the ng-app attribute is typically set on the <html> tag, indicating that the HTML file follows the AngularJS model. Controllers are implemented within <div> elements, allowing the grouping of related functionality within a controller code block. To define a controller, a callback function called controller() is used. Multiple controllers can be created based on different functional areas. Finally, the binding between the controller and the view needs to be established. The $scope interface facilitates this binding, allowing the view to access the data (model) within the controller using $scope.modelName notation. When values are updated, the view is automatically refreshed. Each scope can access the data within its corresponding controller area.

In conclusion, we have explored the MVC structure of AngularJS. While other frameworks like Angular and React are more commonly used today, AngularJS still exists in many legacy codebases. In the next post, we will explore the directives and {{expressions}}.

My Desk Setup✨

JoyJaewon — Tue, 28 Mar 2023 05:18:11 +0900

During the pandemic, remote work and online classes have become the new norm, resulting in us spending more time than ever at our desks. To make my work experience more productive and comfortable, I decided to upgrade my desk setup and have been using it ever since. In this post, I'm excited to introduce you to my tech desk setup and share how it has helped me to enhance my productivity and comfort while working from home. So, Let's dive in!

1. Dual Monitor

One of the best investments I made in my tech desk setup was adding a second monitor. The dual monitor setup has improved my productivity and made multitasking a breeze. With the ability to work on two screens simultaneously, I can easily reference multiple documents or applications without having to switch back and forth between them.

My first monitor is LG UltraFine UHD 27-inch 4K UHD and the second monitor is Dell 24-inch FHD.

2. Standing Desk

One of the most significant changes I made to my desk setup was purchasing a standing desk. I had been contemplating buying one for a long time and finally decided to take the plunge when I found a great deal on Amazon Prime Day. It turned out to be a life-changer! The standing desk has helped me to reduce back pain and improve my posture. I no longer feel sluggish or tired after sitting for long hours at my desk. Instead, I can switch between sitting and standing positions throughout the day, which has helped me to stay more alert and focused!

3. Leopold 660C + Arm Rest

As someone who spends a lot of time typing, I wanted a keyboard that would be both comfortable and produce satisfying typing sound. After researching various options, I decided on the Leopold 660C mechanical keyboard with Topre switches. I also added an wrist rest to provide extra support for my wrists and arms. It has significantly improved my comfort during long typing sessions, and I highly recommend getting the wrist rest if you haven't used it before.

4. Vertical Laptop Stand

To save space and improve the design of my desk setup, I invested in a vertical laptop stand for my MacBook. The stand allows me to close my MacBook and connect it to my external monitor, which frees up space on my desk and provides a clean, minimalist look. I even have some hidden space behind the stand, which means that even if I make a mess behind it, no one will know

Having the ultimate desk setup is crucial for productivity and comfort while working from home.

This desktop has made a significant impact on my work experience during these times of remote work and online learning. If you have any questions about my setup, please let me know. Have a wonderful day✨

Client-Side Rendering(CSR) vs Server-Side Rendering(SSR)

JoyJaewon — Thu, 16 Mar 2023 06:30:46 +0900

When learning React, one of the terms you will often encounter is client-side rendering. As I'm currently studying next.js, I keep coming across the term server-side rendering, so I decided to write a blog post to better understand and clarify these concepts.

At a glance, server-side rendering (SSR) and client-side rendering (CSR) seems to indicate whether the rendering takes place on the server or client side, but what exactly is the difference between the two? First, let's define rendering: it refers to the process of displaying content received from a server on a browser screen.

The difference between SSR and CSR lies in where and how the content is rendered. CSR renders the content in the browser, while SSR fully renders the content on the server and sends it to the browser. Now that we understand what CSR and SSR are, let's take a closer look at how they work and their advantages and disadvantages.

1) Client-Side Rendering (CSR)

CSR became popular alongside the rise of the SPA trend, increased CPU performance, and the standardization of JavaScript frameworks (such as React, Vue, and Angular). In a nutshell, CSR involves processing everything on the client side. The server renders the entire page once, and the client then interprets and renders any additional resources requested by the user. Unlike SSR, CSR does not involve requesting HTML documents from the server but rather rendering content in the browser using JavaScript.

*SPA (Single Page Application): an application that loads an entire page once and then only changes the data for subsequent use.

A simple example of CSR involves an HTML body containing only a single element with an id of "root" and links to the necessary JavaScript files. The HTML is almost entirely empty, so when users first visit the page, they see a blank screen while the linked JavaScript files are downloaded. These files contain the logic, framework, and libraries necessary for the application to run, which can take some time to download initially. When additional data is needed, it is fetched from the server and dynamically rendered on the client side, along with the JavaScript, before being shown to the user.

The main disadvantages of CSR are 1) it can take a long time for users to see the initial content and 2) poor SEO (Search Engine Optimization) performance.

*What is SEO?

Search engines like Google crawl registered websites and analyze their HTML documents to help users quickly find the desired content. However, since the HTML body in CSR is mostly empty, search engines struggle to analyze websites built using CSR.

These issues have led to the introduction of server-side rendering (SSR).

2) Server-Side Rendering

In SSR, instead of handling everything on the client side, the server fetches all necessary data and creates an HTML file when a user visits a website. This HTML file and the source code needed for some dynamic control are sent to the client. The client then displays the fully rendered HTML document to the user.

As a result, SSR has the advantages of faster page loading and efficient SEO, as all content is included in the HTML. In SSR, the drawbacks of CSR, such as 1) slow page loading and 2) poor SEO performance, are addressed.

However, SSR does have its own disadvantages:

1. Blinking Issue

2. Server Overload

3. Gap between TTV and TTI

First, the Blinking Issue occurs when users refresh the page and the entire website has to be fetched from the server again, causing the screen to momentarily disappear and reappear. This is not ideal from a UX perspective.

Second, SSR can lead to server overload, as more users result in more requests for data from the server.

The third and most critical disadvantage is the gap between Time To View (TTV) and Time To Interact (TTI). To understand this, we need to first know what TTV and TTI are.

In SSR, the server-generated HTML file is sent to the client, allowing users to view the website immediately. However, since the JavaScript files needed for dynamic control have not yet been received, users cannot interact with the website even if they click on elements. Only after the JavaScript files are received can users interact with the website as intended. As a result, SSR has a significant gap between the time users can view the site (TTV) and when they can actually interact with it (TTI).

On the other hand, in CSR, nothing is displayed until the HTML and all linked JavaScript files have been received. When the website becomes visible, users can interact with it immediately, eliminating any gap between TTV and TTI.

In conclusion, both SSR and CSR have their own advantages and disadvantages. SSR provides faster page loading and better SEO, but it suffers from issues such as the Blinking Issue, server overload, and a gap between TTV and TTI. Meanwhile, CSR offers seamless interactivity with no gap between TTV and TTI, but it can result in slower initial loading times and poor SEO performance. When choosing between SSR and CSR, it's essential to consider the specific requirements and goals of your project to determine the best rendering approach.

Reference

Youtube-Dream Coding

Youtube-Code Factory

Vue SSR Guide