DEV Community: Arkar Kaung Myat

Iterative Sorting algorithms in Javascript

Arkar Kaung Myat — Tue, 23 May 2023 14:21:52 +0000

Sorting algorithms are important in computer science because they help us organize data so it's easier to work with. I'll discuss three sorting algorithms:

Insertion sort: a simple sorting algorithm used for small datasets or as part of more complex algorithms.
Bubble sort: another simple algorithm that's easy to understand and implement, but not as efficient as other sorting algorithms.

Selection sort: a sorting algorithm that selects the smallest element from an unsorted list in each iteration and places it at the beginning of the list.

I will explain each algorithm in detail, with examples of how they work and their strengths and weaknesses. I'll also provide step-by-step instructions on how to implement each algorithm in your own code.
By the end of this post, you'll have a good understanding of interactive sorting algorithms and how they can solve real-world problems.

Insertion Sort

When using insertion sort, it is important to treat the first part of the list as already sorted, and the second part as unsorted.

The algorithm will then begin by considering the first element at index 0 as sorted, and the remaining elements as unsorted. By maintaining this approach, the algorithm can efficiently sort the entire list.

Okay, here's what we do: we'll take the next item - that's the second item at index 1 - and move on to the sorted list. We'll ask, "Is the item I'm about to add larger than the current item?”

If the condition is not met, we move toward the beginning of the list. once we reach the first item, we place the new item at the beginning. We repeat this process for the whole list!

Suppose you have an array [5, 2, 4, 6, 1, 3] that you want to sort in ascending order using insertion sort. The first step is to consider the element at index 0 as the first sorted element, and the remaining elements as unsorted. This means that the first sorted array is [5], and the unsorted array is [2, 4, 6, 1, 3].

5 | 2, 4, 6, 1, 3

Next, we’ll take the first element of the unsorted array, which is 2, and compare it to the sorted array [5]. Since 2 is smaller than 5, we insert it before 5, resulting in the sorted array [2, 5] and the unsorted array [4, 6, 1, 3].

2, 5 | 4, 6, 1, 3

We then take the next element of the unsorted array, which is 4, and compare it to the sorted array [2, 5]. Since 4 is greater than 2 and less than 5, we insert it between 2 and 5, resulting in the sorted array [2, 4, 5] and the unsorted array [6, 1, 3].

2, 4, 5 | 6, 1, 3

We repeat this process for all the remaining elements of the unsorted array. The next element is 6, which is greater than all the sorted elements, so we insert it at the end of the sorted array, resulting in the sorted array [2, 4, 5, 6] and the unsorted array [1, 3].

2, 4, 5, 6 | 1, 3

The next element is 1, which is smaller than all the sorted elements, so we insert it at the beginning of the sorted array, resulting in the sorted array [1, 2, 4, 5, 6] and the unsorted array [3].

1, 2, 4, 5, 6 | 3

Finally, we insert the last element, 3, between 2 and 4, resulting in the sorted array [1, 2, 3, 4, 5, 6].

Time and Space complexity of insertion sort

Let’s talk about the best and worst cases of insertion sort. In the worst-case scenario, where the list is in reverse sorted order, insertion sort will have to compare each element to every other element in the sorted portion of the list before inserting it in its correct place. This means that in the worst-case scenario, insertion sort has a time complexity of O(n).
In the best case, the list is already sorted, and the algorithm can simply go through the list without having to move any elements. In this case, the time complexity of the insertion sort is O(n).
However, it's important to note that the best case is rare and often not the case in real-world scenarios. Also, the worst case is much more important to consider when analyzing the efficiency of an algorithm.

Algorithm	Best Case Time	Average Case Time	Worst Case Time	Space
InsertionSOrt	O(n)	O(n^2)	O(n^2)	O(1)

When should you use insertion sort? Insertion sort is best for small data sets or data sets that are almost sorted. For larger data sets, insertion sort can become quite slow.

Note that the space complexity of the insertion sort is O(1) because the algorithm does not create any additional space beyond the input array. This can be an advantage over other algorithms that require additional space for sorting.

In general, if you are dealing with large data sets, you may want to consider using a more efficient sorting algorithm, such as quicksort or mergesort which I will be discussing later in this series.

However, if you're working with a smaller data set or a data set that is already partially sorted, insertion sort can be a good choice. Additionally, because of its simplicity, insertion sort can be a good choice for educational purposes or for situations where code readability is more important than efficiency.

export function insertion_sort(arr: number[]) {
  let length = arr.length;
  for (let i = 0; i < length; i++) {
    let j = i - 1;
    let current = arr[i];
    while (j > -1 && arr[j] > current) {
      arr[j + 1] = arr[j];
      j = j - 1;
    }
    arr[j + 1] = current;
  }
  return arr;
}

Bubble Sort

Bubble sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent pairs, and swaps them if they are in the wrong order. This sorting algorithm is named bubble sort because smaller elements bubble to the top of the list.

The algorithm works by repeatedly swapping adjacent elements if they are in the wrong order. The algorithm starts at the beginning of the list and compares the first two elements. If the first element is greater than the second element, the algorithm swaps them. The algorithm then moves on to the next pair of elements and repeats the process until the end of the list is reached.

At this point, the algorithm starts again from the beginning of the list and repeats the process until no more swaps are needed. This indicates that the list is sorted.

Bubble sort has a time complexity of O(n^2) in both the best and worst cases, and a space complexity of O(1). Like insertion sort. bubble sort is also best suited for small data sets or data sets that are almost sorted.

Suppose we have an array [5, 3, 1, 8, 7] that we want to sort in ascending order using bubble sort. The first step is to compare the first two elements of the array, which are 5 and 3. Since 5 is greater than 3, we need to swap these elements.

[5, 3] -> [3, 5]

We then compare the next two elements of the array, which are 5 and 1. Since 5 is greater than 1, we need to swap these elements.

[3, 5, 1] -> [3, 1, 5]

We continue this process until we have compared all adjacent pairs of elements in the array. At this point, the largest element in the array, which is 8, will have "bubbled" to the end of the array.

[3, 1, 5, 8, 7]

We then repeat the process, starting from the beginning of the array. We compare the first two elements of the array, which are 3 and 1. Since 3 is greater than 1, we need to swap these elements.

[3, 1, 5, 8, 7] -> [1, 3, 5, 8, 7]

We then compare the next two elements of the array, which are 3 and 5. These elements are in the correct order, so we do not need to swap them.

[1, 3, 5, 8, 7]

We continue this process until we have compared all adjacent pairs of elements in the array and no swaps are needed. This indicates that the array is sorted.

Time and space complexity of bubble sort

Algorithm	Best Case Time	Average Case Time	Worst Case Time	Space
Bubble Sort	O(n)	O(n^2)	O(n^2)	O(1)

In the basic implementation of bubble sort, the algorithm iterates through the entire list, even if it is already sorted. As a result, it makes unnecessary comparisons and swaps. Bubble sort will run even if the array is already sorted. We can add small optimizations for such cases as well.

In bubble sort, we make sure that after each iteration, the biggest number is in its correct place. This means that the last part of the array is already sorted. Therefore, we don't need to check if 8 and 9 are out of order during the second run-through of the array. We can check one less element each iteration because we know that we already have one guaranteed element in its correct place at the end of each iteration.

You can also add a flag that keeps track of whether any swaps were made during a particular iteration. Bubble sort will run even if the array is already sorted If no swaps were made, this means that the list is already sorted, and the algorithm can terminate early. This optimization can significantly reduce the number of iterations required, especially for larger data sets that are partially sorted.

export function bubble_sort(arr: number[]) {
  let swapped = false;
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        let tmp = arr[j + 1];
        arr[j + 1] = arr[j];
        arr[j] = tmp;
        swapped = true;
      }
    }
    if (!swapped) {
      return arr;
    }
  }
  return arr;
}

Selection Sort

Selection sort is a basic way to sort a list. It works by finding the smallest number in the unsorted part of the list, then moving that number to the beginning of the list. The algorithm keeps repeating this process for the rest of the unsorted part of the list until the entire list is sorted.

Suppose we have an array [64, 25, 12, 22, 11] that we want to sort in ascending order using selection sort. The first step is to find the smallest element in the array, which is 11. We then swap it with the first element of the array, which gives us the sorted array [11, 25, 12, 22, 64] and the unsorted array [25, 12, 22, 64].

11 | 25, 12, 22, 64

Next, we need to find the smallest element in the unsorted array, which is 12. We swap it with the second element of the array, resulting in the sorted array [11, 12, 25, 22, 64] and the unsorted array [25, 22, 64].

11, 12 | 25, 22, 64

We repeat this process for all the remaining elements of the unsorted array. The next smallest element is 22, which we swap with the third element of the array, resulting in the sorted array [11, 12, 22, 25, 64] and the unsorted array [25, 64].

11, 12, 22 | 25, 64

We repeat this process until the entire array is sorted. The next smallest element is 25, which we swap with the fourth element of the array, resulting in the sorted array [11, 12, 22, 25, 64] and the unsorted array [64].

11, 12, 22, 25 | 64

Finally, we swap the last two elements of the array, resulting in the sorted array [11, 12, 22, 25, 64].

Time and Space complexity of selection sort

Algorithm	Best Case Time	Average Case Time	Worst Case Time	Space
Selection Sort	O(n^2)	O(n^2)	O(n^2)	O(1)

Selection sort is not the best sorting algorithm for larger data sets as it has a time complexity of O(n^2) in all cases, even if the list is already sorted. However, it can still be useful for small data sets or in cases where memory usage is a concern because it has a space complexity of O(1) - it doesn't require any additional space beyond the input array.

function selection_sort(arr: number[]) {
  let length = arr.length;
  for (let i = 0; i < length - 1; i++) {
    let min = i;
    for (let j = i + 1; j < length; j++) {
      if (arr[j] < arr[min]) {
        min = j;
      }
    }
    if (min != i) {
      [arr[i], arr[min]] = [arr[min], arr[i]];
    }
  }
  return arr;
}

Iterative sorting algorithms are essential in computer science and it's important for programmers to understand them. I just think they are fun to learn !

Have fun sorting! ✨

Data Binding in React

Arkar Kaung Myat — Wed, 13 Apr 2022 03:23:43 +0000

It was 2018 ,I remember that at that time, I have been coding some Python codes especially django and I already did some projects. And at that time the only language I know was Python, started as a backend developer building apis with Django.
And I know a little bit of HTML and CSS and I was not very good at it.Out of nowhere, let's just say I cannot keep up with the Zen of Python and I feel like with all these templates,models and all that in Django,I am feeling the real pain in the a**.
So I decided run away from python and asked my brother who is a really good programmer to help me.In short, he told me I should learn Javascript.

I started to move on to Javascript from Python and I started loving it.Then I found React.And it is crazy to say that my journey to React's ecosystem was started with React Native.When I started introduced myself with React Native, me as a backend developer
coming from Django, personally I really enjoyed and amazed how the data binding in React Native is easy.Believe it or not I code React Native for about 5 months without seeing this website. I felt so bad and ashmed every time I think about it.

Me as a self-thougth developer with no CS background, the way I started into these programming technologies is pretty simple, I just go to Youtube.So I learnt React Native though it's documentation and tons of tutorials from Youtube, I didn't really understand how react reacts.
But one thing suprises me, who previously worked with templates

everytimes I change something the UI just changes

Data binding is the general technique of binding the data from any possible source together and synchronizing it with the UI.Before we talk anything about React, let's start with the venilla way.

To sync our data with the UI, obviously we need to know if our data change somehow we first need to observe any changes in the data model.


class Binder {
    constructor(value) {
        this.observers = [];
        this.value = value;
    }
    notify() {
        this.observers.forEach(listener => listener(this.value));
    }
    listen(listener) {
        this.observers.push(listener);
    }
    get value() {
        return this.value;
    }
    set value(value) {
        if (val !== this.value) {
            this.value = value;
            this.notify();
        }
    }
}

In the above code, we have a simple Javascript class with some setters and getters.In the constructor we have an array of observers to detect
any possible data changing methods or events in our data model in our case the value and we have a setter calling our observers to take action on any changes.

    let myName = new Binder("Initial Name");
    let dataUpdater = (newName) => {
        // updater event to change the data model
        console.log('Your coming new Name is ', newName)
    };
    myName.listen(dataUpdater);
    myName.value = 'Arkar Kaung Myat';

So are basically calling the notify function whenever we got an update in our data source through event listeners.That is how I understand one way data binding works.
Let's try with simple html doms.

    <div>
        <label for="Number">Enter Number</label><br>
        <input type="number" id="number" placeholder="Enter second Number">
    </div>

    <br>
    <p>Number : </p>
    <h1 id="result"></h1>


let number = document.querySelector('#number');
let result = document.querySelector('#result');

class Binder {
    constructor(value) {
        this.observers = [];
        this.data = value;
    }
    notify() {
        this.observers.forEach(listener => listener(this.data));
    }
    listen(listener) {
        this.observers.push(listener);
    }
    get value() {
        return this.data;
    }
    set value(value) {
        if (value !== this.data) {
            this.data = value;
            this.notify();
        }
    }
}

let num = new Binder(number.value);

let observer = (value) => {
    result.innerText = value;
}

num.listen(observer);
number.addEventListener('input', (e) => {
    num.value = e.target.value;
});

Well I think that's a bit self explanatory.

Binding data model with multiple data input

The above example is pretty easy to understand and I think that explains pretty well on how you can work around one way data binding.
So let's say we have multiple data input for our data model to rely on.Let say you want to update data input from two input form and update to the view.How do we create such a binding?


class WithEffect extends Binder {
    constructor(data,dependencies){
        super(data());
        const listener = () => {
            this.data = data();
            this.notify();
        };
    };

    get value() {
        return this.data;
    };

    set value(val) {
        // just to show you
        console.log(val, 'What do you expect ! is is read-only computed value');
        throw 'is is read-only computed value';
    }
}

Lets see in action


const num1 = new Binder(100);
const num2 = new Binder(900);

let observer = () => {
    return Number(num1.value) + Number(num2.value)
}
const full = new WithEffect(observer, [num1, num2]);
console.log(full.value);

// try full.value = 40000

Here is DOM in function


const num1 = new Binder(number1.value);
const num2 = new Binder(number2.value);

let observer = () => {
    result.innerText = `${Number(num1.value) + Number(num2.value)}`;
    return Number(num1.value) + Number(num2.value);
}

const full = new WithEffect(observer, [num1, num2]);

number1.addEventListener('input', () => {
    num1.value = number1.value;
});

number2.addEventListener('input', () => {
    num2.value = number2.value;
});

So as I understand, updaing on the UI is based on the data model.But updating the data model is done explicitly
by some listener or observers through callbacks or events from some possible data source.In our case, the input.

Two ways data binding

In the case of two ways, whenever we update the data model, we need to update the UI.And also the other way around.
In case of chainging the UI we need to update the data model.

    <div>
        <label for="number1">Enter Number1</label><br>
        <input onkeyup="update(event)" type="number" id="number1" placeholder="Enter second Number" data-binder="A">
    </div>
    <br>
    <div>
        <label for="number2">Enter Number2</label><br>
        <input onkeyup="update(event)" type="number" id="number2" placeholder="Enter first Number " data-binder="A">
    </div>

We got observer for each of the input in the above example.

let binded_inputs = document.querySelectorAll('[data-binder="number"]');

function update(event) {
    for (var i in binded_inputs) {
        binded_inputs[i].value = event.currentTarget.value;
    }
}

What about in React !

In React, it is never really designed for two way data binding even though it can be implement (Two Way Data Binding Helpers)(https://reactjs.org/docs/two-way-binding-helpers.html)

So lets take a look at some React code.

   const [message, setMessage] = useState('Hello World');

So we got a data model or state for our view and we want to stay sync between our view and in this case our state.

function App() {
  const [message, setMessage] = useState('Hell`o World');

  let handleChange = (e) => {
    setMessage(e.target.value)
  }
  return (
    <div className="App">
      <input type="text" value={message} onChange={handleChange} />
      <br>
      <h1>{message}</h1>
    </div>
  );
}

Everytime we type in our input we are calling the callback handler to update our day model.
So react let us change the data model from the view or some data source but we cannot do it directly, but we can attach events or handlers
to the view to observe the changes and update the model.

Let's take a look at some React.

    let myApp = document.getElementById('root');
    ReactDOM.render(<h1>Welcome to React</h1>, myApp);

Just basically rendering heading and lets put some data in it.

let myApp = document.getElementById('root');
let number = 0;

let handleClick = () => {
  number++;
  console.log(number)
};

let content = (
  <div>
    <h1>Welcome to React</h1>
    <p>Here is the number</p>
    <h1>{number}</h1>

    <br />
    <button onClick={handleClick}>ADD</button>
  </div>
)
ReactDOM.render(content, myApp);

When you try this you can see in the console logging out the number but it is not updating the UI.
We got data source and some data to show how do we bind them together ?

So lets see try changing the code as below and you will see the diffreence

let myApp = document.getElementById('root');
let number = 0;

let handleClick = () => {
  number++;
  console.log(number)
  renderContent()
};

let renderContent = () => {
  let content = (
    <div>
      <h1>Welcome to React</h1>
      <p>Here is the number</p>
      <h1>{number}</h1>

      <br />
      <button onClick={handleClick}>ADD</button>
    </div>
  );
  ReactDOM.render(content, myApp);
};
renderContent()

So what we do here is we put the content inside the renderContent funtion so basically
everytimes we click the button we are calling the renderContent function and creating a new updated instance of our content.
Click and inspect the our elements and you can see only the h1 is making the splash everytime we clicked throught the button.

How I built my blog with Next.js ?

Arkar Kaung Myat — Wed, 06 Apr 2022 12:40:41 +0000

Since the last months, I haven't got a chance to update any content on my youtube channel and something comes to my mind that I can still blogs while doing my jobs or even
gather what I have learned over the week and post a note about them.
So first thing first, where do I write the blog. Dev.to, medium, or any other platform? What about if I code my website and share the journey along the way with others and document it?
The features are pretty simple, a simple platform with some content and snippets of code perhaps.

Tech Stack

I love Next.js. And it has amazing static site generation features. Also since it is a blog post it gonna need to CURD some data such as comments, likes, etc. I am also pretty sure that I don't want to set up a
backend server for handling and storing my blogs information. So I just decided to go with Next.js serverless APIs.

Planetscale is a serverless database platform to store my blog post's information such as comments, likes, etc. Also, I used Prisma to define my app data models. As for me a guy with a Django background I am so enjoying ORM and
also, I am gonna be coding with Typescript so everything goes just perfect in my opinion.

How do I write the contents?

I have some experience working on some projects about content writing on the web. In some of my company's projects, I have used some rich text editors to write and parse the contents on the web.
(eg:Quilljs,Jodit,CKEditor,etc).

These editors were really amazing to leverage a better user experience but sometimes they come with their own tradeoffs. In this case, I realized that I am gonna be the only one who is gonna write and update the website. So
I decided to use markdown for writing the contents for my website.

What is markdown ?

Markdown is a lightweight markup language to format plain texts. One of the most obvious use case of markdown you can see is readme-files in GitHub repos.

When you add some text-decoration to a text such as bold, italics, or underline you are basically formatting it. So markdown is a syntax or you can say some sets of rules to format how you want your texts to be.
For example, on the web, we use hypertext markup language (HTML) to format our contents on how we want our browser to show. When we visit a webpage our browser reads the HTML and applies the rules to the text. When it sees this is some italic text it understands everything between the tags should be italic. However, HTML is relatively difficult for a human to read with tags. Also, there
can be a lot of HTML tags to tell the browser how we want our text to be formatted in their specific ways.

Markdown is meant to be easy to read / to write as is feasible. Markdown is created to make formatting texts be much more simpler and feasible than HTML because the tags can be quite difficult for a human to read and understand. Also, they are not very
user friendly for people who do not have a lot of experience reading it.

You can check out Markdown Syntax Guide here.

Hey, we are gonna be building a component-based react application. As we know we are gonna be using tons of JSX for our website and one great thing is we can use markdown in our JSX components.
Luckily as we are using Next.js, it automatically supports us to use markdowns in our application. We can use MDX for not only writing contents
in our application, we can even use our JSX components inside the markdown file thanks to MDX.

What is mdx ?

MDX is a better version of vanilla markdown but we can import and use our interactive react components inside the markdown file.

Here are some of the demos from MDXjs.

import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />

The code gets compiled to javascript and you can basically use in any framework that supports JSX.

How do I use MDX with my Next.js application?

Now that I am clear about what writing method I am gonna use, it's time to decide how!

Contentlayer

Basically, contentlayer can be used to turn any MDX files that I am gonna blog into data making it super easy to import the markdown. It is currently in the Alpha stage but
it is amazingly cool. It takes data sources from any local contents or any headless cms (eg. JSON, MDX) and transforms them into data files in JSON, and even generates typescript types as we defined.
So in my case with Next.js, isn't that cool that I can use static site generation from next.js and use contentlayer data to generate static pages. Well that is the power of dynamic with the speed of static.
You can check out the full blog on how I use contentlayer in my blog later on. I am gonna try blogging as much as I can later.

What about backend?

I love Next.js and one of the main features of Next.js that excite me is its serverless APIs.In Next.js you can build your own API within the Next.js application. Everything you put inside pages/api folder will be treated as an API endpoint instead of a webpage. They are also serverside bundles and they won't increase on your client-side bundle.
Once you create a Next.js application using create-next-app, you can already see an API folder created by create-next-app. Like so try requesting the URL and you can see the JSON response.


export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

This is really great for me as I don't want to put my own backend server for handling my blog post's information. So I just gonna write some API endpoints for authentications or anything else I need inside my Next.js application.

What about database?

I also gonna have to save some data on my website so I need a database. So do I set up my own database server on the digital ocean?

Prisma

Prisma is an open-source ORM to manage and interact with a database. In Prisma, you can define how you want your data model to be in its own Prisma schema and you can use the Prisma migration tool to change your database.

Check out below

    model Article {
        id        Int     @id @default(autoincrement())
        title     String
        content   String?
        published Boolean @default(false)
    }

Imagine in my personal blog, in this case, I can declare how I want my data model to be and all I have to do is migrate and it's done. It also has great modern developer toolings providing better developer experiences.
To query data from my database, you can use Prisma client.In Prisma,it's automatically generate types for your data models so when you query your data using Prisma client, you can leverage
the power of typescript to avoid mistakes and faster developer experiences.
Check out detail about Prisma client here, Prisma Client


const allArticles: Article[] = await prisma.article.findMany()

Also, Prisma officially supports an easier way to work with Next.js.You can use the Prisma client to query your data from your Next.js application. It May be from your Next pages or Next serverless API, so in my case, I feel like this is
the perfect choice for me to work with. I can use any rendering method I want from Next.js and it works perfectly well with the Prisma client.
Personally, as a developer coming from Django, I find myself pretty happy with how all these things work out. It has something called Prisma studio that allows you to manage your data updates with a cool GUI.

I am gonna try to find more time to write details on everything I know about Prisma later on this blog so stay tuned !!.
Check out how you can set up your Next.js application with Prisma here

Planetscale

Now that I have my ORM, I still need a database for my Prisma schemas to work with. I decided to try planetscale again. I already did couple of projects using the planetscale database and I am loving it.

Planetscale is a MySQL-compatible, serverless platform that allows you to manage and ship your databases faster without breaking anything. It also provides great developer toolings for better developer experiences.

And one thing that is really cool is that it works like a GitHub of databases. You can create multiple database branches, manage them branch them anything you want. It is really great that you can always do any test or changes to your table without even touching the production database.Just like GitHub you can create pull requests and merge them later.

You can check out your database schema in their dashboard. It also comes with its own console to work with any schema changes you want.

One of the things is that it works so well with Prisma. You can migrate your database changes with Prisma schema and it will automatically update your database.
Planetscale

Thank you for your time you can check out my website here

Github

Compositions in React

Arkar Kaung Myat — Sat, 19 Feb 2022 16:03:36 +0000

When I started learning React. One of the main features in React that excited me is that it is a component-based!.
So today I want to talk about what is composition and why composition patterns in React make react component system more powerful.

Components in React

In earlier days, the developers write more than a thousand of code for developing a single-page application. While following the traditional DOM structure making changes in them was
very challenging. Whether if you want to update, modify some of them, or even you want to fix some errors in them, it is very difficult to do.

You have to search for them and update
them manually. And then the component-based approach was introduced to overcome these issues. The idea is to divide the application into small logical groups and reuse them in different
places. Just like LEGO blogs, you create a component for each logical group and combine them into a bigger component.

Consider this example !

Imagine you are building the above navigation. The header has a logo and some navigation links to navigate around.
So basically there are logo and navigation components inside our header component.

<Header>
    <Logo />
    <Navigation />
</Header>

Well, this looks pretty ok until your designer or project manager wants to add a search bar or Christmas wish inside the navigation.
As we are not in the ideal world of software development, it is almost impossible for designs or features to be permanent.
Maybe we want to have our header have a search bar on a specific page or we want to have a Christmas wish on some pages or even we want our header to be
empty in specific cases.
What that means is that some component cannot always know their children
So how do we get the flexibility for our so-called reusable component?

Containment in Recuse

In React, we have special children props to help us solve this problem.
The idea is instead of creating hard-coded dependencies inside our component what if we can somehow dynamically pass what is gonna be inside our component's output.

function LOGO() {
  return (
      <h1>LOGO</h1>
    );
};

function Navigation() {
  return (
    <nav>
        // nav items
    </nav>
    );
};

function Header(props) {
  return (
    <header>
        {props.children}
    </header>
    );
};

function App() {
  return (
    <Header>
        <LOGO />
        <Navigation />
    </Header>
    );
};

Notice that if we do not use {props. children} inside our header component, we will only get a plain header in our output.That makes our header component
much more agnostic and dependency-free.

Let's see if we can satisfy our product manager requirements with this approach.
Imagine in the morning you got an assignment in your click up or Slack saying

Hey!
I want a new year promotion banner on top of our pricing page navigation !!!

Well you can just create a component for the banner and

// upcoming feature announcement
function Banner() {
  return (
    <div>
        {/* banner content */}
    </div>
    );
};

function Header(props) {
  return (
    <header>
        {props.children}
    </header>
    );
};

function App() {
  return (
    <Header>
        <Banner/>
        <LOGO />
        <Navigation />
    </Header>
    );
};

Well, that works better!

Specilization

Sometimes some components can possibly be a special case for other components.
During our previous example what if your product manager says

Hey! For our first 100 clients who took our new year promotion, I want them to have a text saying Hey you get a free t-shirt !.

In React, this is also achieved by composition, where a more “specific” component renders a more “generic” one and configures it with props:


// upcoming feature announcement
function Banner({getShirt,message}) {
  return (
    <div>
        {getShirt && <p>{message}</p>}

        {/* banner content */}

    </div>
    );
};

function Header(props) {
  return (
    <header>
        {props.children}
    </header>
    );
};

function SpecialBanner(props) {
    function getShirt (){ /* free t shirt logic */ }
    return (
        <Banner getShirt={getShirt} message={'Hey you get a free t shirt !'} />
    );
};

function App() {
    return (
            <Header>
                <SpecialBanner/>
                <LOGO />
                <Navigation />
            </Header>      
        );
};

That's great! The more I read about react the more I fall in love with it!

More on composition

We also have HOC(Higher Order Components) to compose react components !!

Before we talk about it, let me talk about what I learned from

Javascript design patterns : Decorators

A Decorator is an object which adds functionality to another object dynamically.

Let's say you are writing a form validator for your app!
When filling out a form you want to make sure your users fill up some of the essential fields. You want to have a distinctive validation between essential ones and non-essential ones.

If one field is essential in the form, we would want a special function to check whether it's empty or not in our validator.

class Validator {
    constructor(){
        this.error = [];
        this.data = []
        this.decoratorsList = [];
        this.decorators = {
            hasName: {
                validate: function (validator) {
                    // do all validation with the args here
                    if (!validator.name) {
                        this.error.push({ code: 'Name is required' });
                    } else {
                        this.data.push({ name: validator.name });
                    }
                }
            },
            hasAge: {
                validate: function (validator, args) {
                    // do all validation with the args here
                    if (!validator.age) {
                        this.error.push({ code: 'Age is required' });
                    } else {
                        this.data.push({ age: validator.age });
                    }
                }
            },
        };
    }
}

Here we have a validation class for our form validation library which we gonna look upon the form data we provide. If anything in the form is missing,
it gonna add up the error message to our validator class's error property or if everything is correct it is gonna add up the data
into our validator class's data property.

So how do we validate the form data?

class Validator {
    constructor(){
      {/* ...  */}
      {/* ...  */}

        decorate(name) {
            this.decoratorsList.push(name);
        };

    }
}

We add a decorate method to our validator class which takes a name as an argument.Now that we have a method to add decorators(our dynamic form field that we want to validate)
we can loop through our decoratorsList and call each decorator's validate method to finally all the validations.

class Validator {
    constructor(){
      {/* ...  */}
      {/* ...  */}
      {/* ...  */}

        validate(form) {
            let i,len,name;
            this.form = form;
            for (i = 0, len = this.decoratorsList.length; i < len; i++) {
                name = this.decoratorsList[i];
                this.decorators[name].validate.call(this,form);
            }
        };

    }
}


class Validator {
      {/* ...  */}
      {/* ...  */}
      {/* ...  */}
      {/* ...  */}
}

let validator = new Validator();
validator.decorate('hasName');
validator.validate({});
console.log(validator.error);

Our finalized code gonna be like

class Validator {
    constructor() {
        this.error = [];
        this.data = []
        this.decoratorsList = [];
        this.decorators = {
            hasName: {
                validate: function (validator) {
                    // do all validation with the args here
                    if (!validator.name) {
                        this.error.push({ code: 'Name is required' });
                    } else {
                        this.data.push({ name: validator.name });
                    }
                }
            },
            hasAge: {
                validate: function (validator, args) {
                    // do all validation with the args here
                    if (!validator.age) {
                        this.error.push({ code: 'Age is required' });
                    } else {
                        this.data.push({ age: validator.age});
                    }
                }
            },
        };
    }
    decorate(name) {
        this.decoratorsList.push(name);
    };

    validate(form) {
        let i, len, name;
        this.form = form;
        for (i = 0, len = this.decoratorsList.length; i < len; i++) {
            name = this.decoratorsList[i];
            this.decorators[name].validate.call(this, form);
        }
    };

}


let validator = new Validator();
validator.decorate('hasName');

let formData = {
    name: 'Riley',
};

validator.validate(formData);
console.log(validator.data)
console.log(validator.error);

As you can see we don't have any error on not putting the age in our form data because we haven't decorated the age decorator to our validator yet.
Try replacing an empty object in form data and you should see some results !!!

And this is how I got to understand what decorators are about and I hope you got the basic idea of them
please check out more snippets here

Higher order components in React

HOC is usually a function that takes a component and returns a decorated or enhanced version of it.
In our previous example, we said we need a banner with a special case for a free t-shirt.


    let Banner = () => {
        return <div>New year promotion is out Now !!!</div>
    }

    let decoratedComponent = (Component) => {
        class Decorate extends React.Component {
            constructor(props) {
                super(props);
                this.props = props;
            }
            render() {
                return <SpecialWrapper>
                    <Component {...this.props} />
                </SpecialWrapper>
            }
        }
    }

    let SpecializedBanner = decoratedComponent(Banner);

The first thing that the decoratedComponent does is render the original component that we passed in our decoratedComponent function and
then we can do special decorations and modifications by wrapping or enhancing it.

Render props in React

Render props are basically a function inside a render method.
Check out the code below!


let Todos = ({children,data})=>{
    return <section>
        <h1>A list of Todos</h1>
         <ul>
            {
                data.map((todo, i) => (
                    <li key={i}>
                       { children(todo) }
                    </li>
                ))
            }
        </ul>
    </section>
}

export default function App() {
    let [todos, setTodos] = React.useState([]);

    let handleDone = () => {
        // manageing the global state
    }

    let handleRemove = () => {
        // manageing the global state
    }
    return (<Todos data={todos}>
            {
                todo => todo.done ? <button onClick={handleRemove}>Remove ! {todo.label}</button> 
                :  <button onClick={handleDone}>Done ! {todo.label}</button> 
            }
        </Todos>);
    );
};

The App component has every data and logic. And the TodoList has no idea about what our todo may look like and it is just an encapsulation of our HTML markup.


let ContentProvider = ({render,data})=>{
    return(
            <section>{ render(data) }</section>
    )
};

let App = ()=>{
    let [data, setData] = React.useState({});
    return(
        <ContentProvider data={data} render={(data)=><p>{data}</p>}/>
    )
}

And There we go !

Generating display and sizing utilities with SASS

Arkar Kaung Myat — Wed, 10 Nov 2021 13:01:33 +0000

Greetings

Here we are again , this time I tried to add more utils to my previous mini utility library .

display and sizing utilities with SASS

I need to generate display properties for my utils classes so here I am .

$displayProps: ("block", "inline-block", "inline", "flex", "grid","inline-flex", "inline-grid", "table", "inline-table","list-item", "none", "contents");

I can add more display properties but that's ok for me just now as usual I store the displayProps obj in my _variables.scss just so I can start generating.

Make sure you checkout all the previous articles just so you can see how I ended up here !.

Got a object to work with so it's time to generate utility classes with it .

So I started typing in my _utilities.scss to work with the object I got.

Here's the code and it was pretty simple.

    @each $display in $displayProps {
    .#{$display}{
        display: #{$display};
    }
}

I can just loop through the displayProps object and have to use some interpolation .

To generate my css class names dynamically I have to use sass interpolation . And I found out that I can even interpolate the whole property name !.

Then , I can finally check my generated CSS and it seems ok .

/* .. more and more ...  */
.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}
/* .. more and more ...  */

Sizing utilities with SASS

For a utility base library I am gonna also need some sizing utility classes and so I have to work around some of those.

In my _variables.scss , I have to add some more classes

$dimensions :(
    "full":100%,
    "screen":100vh,
    "min":min-content,
    "max":max-content,
    // more and more
    "2/5": 40%,
    "3/5": 60%,
    "4/5": 80%,
    "1/6": 16.666667%,
    "1/3": 33.333333%,
    "1/2": 50%,
    "auto":auto,
);

Using the above object, I have to generate utility classes like w-full ,h-full,w-1/2,h-screen to work with just like tailwind ...

So In my _utilities.scss ,


@each $key,$dime in $dimensions {
    .w-#{$key}{
        width: $dime;
    }

    .h-#{$key}{
        height: $dime;
    }
}

Pretty s1mple hah man I am so glad.

Later in my index.css , I can see

/* .. more and more ...  */
.h-full {
  height: 100%;
}

.w-screen {
  width: 100vh;
}

.h-screen {
  height: 100vh;
}

.w-min {
  width: min-content;
}
/* .. more and more ...  */

Thank you and it is exciting to learn more about SASS with this personally !!!!
I am gonna try generate some grid layouts later in the series.

Feel free to suggest.

Generating CSS spacing utils with SASS .

Arkar Kaung Myat — Mon, 08 Nov 2021 05:54:40 +0000

Hello World

Greetings again , here I am in the episode 2 of trying to generate utility classes with SCSS.

Make sure you check the first one where Isetup my development environment and generate some color utils.

Here we go !!

Spacing utilities !!

If you are familiar with CSS utilities like tailwind , you would understand what I am trying to accomplish here !

I want utility classes like p-4 , m-4 , mx , my in my generated CSS .

So I added some base margin and padding values in my _variables.scss just so I can use them in my generating process.

As I told in my previous article _variables.scss is the file where I store all my base variable values.

    $p-base:0.75rem;
    $m-base:0.75rem;
    $gap-base:0.75rem;

_utilities.scss

In my utils folder , I add a scss file to handle all my generating process and I named it _utilities.scss .


    // NOTE: _utilities.scss 

    @use 'variables' as *;

@use

Hey also I forgot to mention that I am using @use in SCSS because @import is dying.

In short, @import allows all the stuffs in the file to be accessible throughout the whole project .

@import makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.

Because everything’s global, libraries must prefix to all their members to avoid naming collision.

All the naming collisions and as its hard to track where the specific rule comes from . Well I am gonna go with @use.

   // NOTE: _utilities.scss 

   @use 'variables' as *;

   $utilities:(
     "padding":(
         "prefix":"p",
         "values" : (
            "0":0,
            "1":$p-base * 1,
            "2":$p-base * 2,
            "3":$p-base * 3,
            "4":$p-base * 4,
            "5":$p-base * 5,
            "6":$p-base * 6,
            "7":$p-base * 7,
            "8":$p-base * 8,
            "9":$p-base * 9,
            "10":$p-base * 10,
         ),
     ),  
  );

.p-4 for padding: px;

We got an object to work with so I checkout the documentation of SCSS for the flow controls

Look what I found !!!

 $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

In SASS, we can loop through the objects !
I started programming with python so it's seem so familiar to me

   data = {'name': "George Costanza", 'quote': "We are living  in the society",}
   for property, value in data.items():
       print(property,value);

Cool !!

map-get

// NOTE: accessing values from object in SCSS

$values:("value": 10px);
@debug map-get($map: $values, $key: value)

// NOTE: generating spacing utils

@each $property,$map in $utilities {

    $prefix : map-get($map: $map, $key: "prefix");
    $values : map-get($map: $map, $key: "values");

    @each $key,$value in $values {
        .#{$prefix}-#{$key}{
            #{$property}:$value;
        }
    }
}

And its done !
I checked the output CSS file and good thing I am seeing these

/* 
... more 
 */
.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.75rem;
}

.p-2 {
  padding: 1.5rem;
}

.p-3 {
  padding: 2.25rem;
}

/* 
... and more 
 */

We got the padding and now for the rest all we have to do is add more values to our utility object.


$utilities:(
    "padding":(
        "prefix":"p",
        "values" : (
            //    values
        ),
    ),
    "padding-right":(
        "prefix":"pr",
        "values" : (
            //    values
        ),
    ),

    // goes with top,right,bottom,left,

    "padding-inline":(
        "prefix":"px",
        "values" : (
            //    values
        ),
    ),
    "padding-block":(
        "prefix":"py",
        "values" : (
            // values
        ),
    ),
    "margin":(
        "prefix":"m",
        "values" : (
            // values
        ),
    ),

    // goes with top,right,bottom,left,

    "margin-inline":(
        "prefix":"mx",
        "values" : (
            // values
        ),
    ),
    "margin-block":(
        "prefix":"my",
        "values" : (
            //    values
        ),
    ),
);

I should have use better way for my values but that's fine I ended up with ctrl+c and ctrl+v .

@forward to spit out all my _partials

Currently now I have multiple partials in my utils folder ,good thing i can somehow gather them in a single file and spit out all these property together in a single index file .

So in my index.scss file


@forward '_colors';
@forward '_variables';
@forward '_utilities';

And that's how its done !

No :( almost forgot I also created a partial file _base.scss just so I can remove all the browser's default styles .

body{
    margin: 0;
    font-family: 'Nunito';
}

ul,ol{
    padding: 0;
    list-style: none;
}

a{
    text-decoration: none;
}

*,*::before,*::after{
    box-sizing: border-box;
}

Don't worry we gonna check out the _base.scss later in the series.
This is what my final index.scss looks like

@forward '_base';
@forward '_variables';
@forward '_colors';
@forward '_utilities';

Thank you !

This is the episode of me trying to learn more about SCSS while generating CSS utils .

Feel free to suggest .

On my way to generate CSS utils with SASS .

Arkar Kaung Myat — Fri, 05 Nov 2021 16:10:51 +0000

Well I eventually fall in love

with SASS after I tried several projects with it .

Also I am a fan of tailwind CSS so this is the blog about me trying learn more about SCSS while generating some utility classes with SCSS.

There is gonna be several episodes though out this way.

So lets get started

my apology first for my writing skill cause we all have language barriers.English is my second language.

We all love reloading

I thought that while building this thing , first thing comes to my mind is that would be nice if I don't have to refresh or reload manually every time I make changes to my files or compile my sass files.

After a few google searches , I found of course tons of methods I can use to setup my development server.

webpack
parcel
gulpjs
and many more.

I found Gulp easy

No more chit chat dive into the code and I started with a blank HTML file and I called it index.

node modules !

npm init
npm install gulp 
npm install gulp-sass 
npm install sass

I know its annoying

npm init
npm install gulp gulp-sass sass

I waited a few seconds and it all works out perfectly well.

gulp file ?

I found out on the internet that I need to make a gulp file to tell gulp what I want !

In this case , I need the ability to launch a local development server that reloads every times I press
ctrl-s on my browser and of course compile my SASS.

Then I created a file called gulpfile.js in my project root which is basiclly a javascript and for some reasons they say I cannot rename it.

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();

function buildScss() {
    return src('./utils/**/*.scss')
        .pipe(sass())
        .pipe(dest('css'))
        .pipe(browserSync.stream())
}

function watchTask() {
    watch(['./utils/**/*.scss'], buildScss)
    watch('./*.html').on('change', browserSync.reload)
    browserSync.init({
        server: './'
    })
}

exports.default = series(buildScss, watchTask)

Lets break down a bit of this code

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();

Of course a little bit of imports and

function buildScss() {
    return src('./utils/**/*.scss')
        .pipe(sass())
        .pipe(dest('css'))
        .pipe(browserSync.stream())
}

This is the part responsible for compiling my SCSS files that I put them in one of my project folder called utils.

'./utils/**/*.scss'

double asterisks to make sure my SCSS files accessible in all sub folders inside utils and *.scss to make sure I include every SCSS files.

According to docs

Using code over configuration, utilize all of JavaScript to create your gulp file where tasks can be written using your own code or chained single purpose plugins.

I can chain my plugins or things I want to do .

   return src(índex.scss)
        .pipe(sass())
        .pipe(dest('css'))
        .pipe(browserSync.stream())

I put the input SCSS file and gently requested to output them in the folder called CSS and make sure its streaming !!

   function watchTask() {
    watch(['./utils/**/*.scss'], buildScss)
    watch('./*.html').on('change', browserSync.reload)
    browserSync.init({
        server: './'
    })
}

Compiling SCSS is now ok and I also have to watch the HTML files to reload every I edit them also and later initialized the browserSync right at my project's root folder.

Export the modules , build and watch straight in the series.

exports.default = series(buildScss, watchTask)

Later that I can finally start my development server which fit my needs for the project.

I prayed and typed in

gulp

Oh well not bad it's happening 😂.

Till now I got an ideal that would be great if I save this as I SASS , gulp starter kit and I uploaded this on my GitHub with a branch and you can check out here.

On my way to generate my utils

After setup it's time for me to generate my very first utility classes.

Color utility classes

With no doubt, I created a file called _variables.scss in my utils folder to store all my base variables like my base color palette, base padding and margin just so I can use them from my various SCSS modules.

Notice here I have to name my variable file start with underscore to tell SASS that I don't want to generate separate CSS file like variables.css in the output folder.

Here comes my color palette that's I store from bootstrap .

   $clr-primary: hsl(211, 100%, 50%);
   $clr-secondary:hsl(210, 8%, 46%);
   $clr-success: hsl(133, 62%, 41%);
   $clr-danger: hsl(354, 70%, 54%);
   $clr-warning:hsl(45, 99%, 51%);
   $clr-info: hsl(188, 78%, 40%);
   $clr-light : hsl(220, 27%, 98%);
   $clr-dark:hsl(213, 9%, 23%);
   $clr-white:hsl(0, 0%, 100%);

I put them all in SCSS variables and thinking a way to transform them to utils classes like text-primary-100, text-danger-800 which basically like tailwindCSS.

$colors : (
    "primary":$clr-primary,
    "secondary":$clr-secondary,
    "error":$clr-danger,
    "warning":$clr-warning,
    "info":$clr-info,
    "light":$clr-light,
    "dark":$clr-dark,
    "white":$clr-white,

    "black":hsl(0, 0%, 0%),
    "red":hsl(0, 100%, 50%),
    "blue":hsl(240, 100%, 50%),
    "green":hsl(120, 100%, 25%),
    "yellow":hsl(60, 100%, 50%),
    "orange":hsl(39, 100%, 50%),
    "purple":hsl(300, 100%, 25%),
    "gray":hsl(0, 0%, 50%),
);

Then I add more SCSS object in my variables to generate more color like tailwind.

_color.scss

Created another file called _color.scss to do all the looping and generating process.

   @use 'variables' as *;

   @each $key,$val in $colors {
    .text-#{$key}{
        color : $val
    }
    .bg-#{$key}{
        background-color:$val
    }

    .text-hover-#{$key}{
        &:hover{
            color: $val;
        }
    }

    @if($val != white ){
        @for $i from 1 through 9{
            .text-#{$key}-#{100 * $i}{
                color: mix( white,  $val,  $i * 10);
            }
            .bg-#{$key}-#{100 * $i}{
                background-color: mix( white,  $val,  $i * 10);
            }
            .text-hover-#{$key}-#{100 * $i}{
                &:hover{
                    color: mix( white,  $val,  $i * 10);
                }
            }

        }
    }

}

To soften color like tailwind I can use SCSS's build in function like mix to mix with the color I want .

mix(first_clr,second_clr,%)

In my case , I want to play around with lightness so I mixed it up with color white and cool I got what I wanted !!!

I have to make some conditioning to make sure I don't have classes like text-white-200 that would be dumb right?

Make sure you also check for black if you are playing with darkness 😂

Pretty cool and I am loving the generated css popping up in my file.
And I tried using the classes in my HTML.

Thank you for your time just sharing my journey.

feel free to suggest.

I am gonna try spacing utils soon.