## OG Image 

Every time I upload a new article or snippet, one thing that always annoys me is finding the right social image preview for the post. But with vercel's new og image generation we can easily transform our dynamic html contents into OG images.

To assist with generating dynamic Open Graph (OG) images, you can  use the Vercel @vercel/og library to compute and generate social card images using Vercel Edge Functions.

Vercel OG converts HTML and CSS into images.

By simply using the React components , social cards can be co-located with the rest of your frontend codebase. For example, inside a Next.js application:
```javascript
// pages/api/og.jsx

import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'experimental-edge',
}

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    )
  )
}
```
Then you can go the the */api/og* to get an image like this

![image_2022-11-02_001011473.png](https://media.graphassets.com/MbZWxTUzReeQR2zCXGWR)

Then in your application, you can just use
```html
<head>
  <title>Hello world</title>
  <meta
    property="og:image"
    content="https://og-examples.vercel.app/api/og"
  />
</head>
```
And it works  amazingly well.

## Dynamic Contents

The goal is to generate dynamic images depending on the data. For example, a blog post with different title and and descriptions. You can just use query parameters to receive different params depending on your data like this,

```javascript
import { ImageResponse } from '@vercel/og';
import { NextRequest } from 'next/server';

export const config = {
  runtime: 'experimental-edge',
};

export default function handler(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url);

    // ?title=<title>
    const hasTitle = searchParams.has('title');
    const title = hasTitle
      ? searchParams.get('title')?.slice(0, 100)
      : 'My default title';

    return new ImageResponse(
      (
        <div
          style={{
            backgroundColor: 'black',
            backgroundSize: '150px 150px',
            height: '100%',
            width: '100%',
            display: 'flex',
            textAlign: 'center',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            flexWrap: 'nowrap',
          }}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              justifyItems: 'center',
            }}
          >
            <img
              alt="Vercel"
              height={200}
              src="data:image/svg+xml,%3Csvg width='116' height='100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.5 0L115 100H0L57.5 0z' /%3E%3C/svg%3E"
              style={{ margin: '0 30px' }}
              width={232}
            />
          </div>
          <div
            style={{
              fontSize: 60,
              fontStyle: 'normal',
              letterSpacing: '-0.025em',
              color: 'white',
              marginTop: 30,
              padding: '0 120px',
              lineHeight: 1.4,
              whiteSpace: 'pre-wrap',
            }}
          >
            {title}
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      },
    );
  } catch (e: any) {
    console.log(`${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}
```
Which is amazing and it even supports tailwindcss as a experimental version now and I change all my blogs og images to this cool edge functions. 

For more info, [@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples#dynamic-text-generated-as-image)

Generating automatic and dynamic OG images using vercel's open graph image generation.

Automatic OG Image generation with @vercel/og

When I started learning machine learning, the term - linear regression - was the very first topic that I heard a lot. My first familiarity with linear regression was when I took the cs229 course from Standford University by Andrew Ng and lecture - 2 was about linear regression and gradient descent.

In this blog, I am gonna be talking about linear regression and how gradient descent algorithms can be used to get the best outcome of our model.

Linear regression is a type of supervised learning in machine learning where you give the data set to the algorithm with the outcome and we already have some idea of what the output might be if giving some sort of input. Then the algorithm figures out what the relationship might be between these datasets and can predict what the outcome will be,

Some example use cases of linear regression are

- Predicting the house prices based on the number of rooms, area, etc.
- Predicting the happiness of people based on their income
- Predicting the uber price based on the distance of the trip.

The simplest possible scenario is as follows, lets say we have 

```jsx
X = –1, 0, 1, 2, 3, 4
Y = –3, –1, 1, 3, 5, 7
```

There’s a relationship between the X and Y values (for example, if X is –1 then Y is –3, if X is 3 then Y is 5, and so on). If you have ever solved some critical thinking problems or taken part in some IQ tests, you may find out the relations between those numbers very quickly which is **Y = 2X + 1** . Different people can find out differently. In this case, X increases by 1 in its sequence so its Y = 2X + or - something . After some tries you will find out the equation is **Y = 2X + 1**. In machine learning, it's called the hypothesis,**Y = 2X + 1** fits, the data.

Not only in linear regression, in supervised learning, we first decide the approximate y ( labels) as a linear function of x (features) decide the approximate y as 
```math
h_θ (x) = θ_0 + θ_1 x_1 + θ_2x_2
```
Whereas, **x_i** are the inputs and **θ_i** are called weights (parameters)  which we guessed in above **Y = 2X + 1** equation.

Right now there is only one input in the equation. However, in reality, a label might depend on multiple features. For example, in the house price guessing example, the house price may depend on features like the number of rooms, area, location, and views. So we can create the hypothesis for each feature in a way like this by dropping θ and letting **x_0=1** (known as the intercept term).
```math
h(x)=\textstyle\sum_{i=0}^dθ_ix_i
```
The goal is to get close **h_θ** as close to y ( the label in the dataset ) . We gonna try to find the best fit of θ.

### Cost function
In supervised learning, we try to reduce the cost of a function by using features and labels from given data set and try to tweak the parameters to fit the data nicely.
![error.png](https://media.graphassets.com/3Z1ARoWBQOxDCqq2oEZc)

The purple line in the graph as you can see is the relation predicted by the algorithm for the first time, and the points are the data we provided to the algorithm. We can find how much the algorithm wrongfully predicted ( by subtracting the predicted value from the expected value ( the label, the red arrows ) . Also we can defined the sum of square of the error from each features and get what know as the cost function as you saw above. As **error = expected - predicted** then **error = y - h_θ(x)** . By using a method know as ordinary least square methods we can get the square sum of error for each feature.

```math
J(θ)=\textstyle\sum_{i=0}^d(h_θ(x^i)-y_i)^2
```
If we got the error function ( cost function ) the next thing we need to consider is how to make it smaller. We gonna try to find the θ value when J(θ) is close to zero. Luckily, we can make a function smaller by using some tricks from partial derivative. 
![error function.png](https://media.graphassets.com/eaD29I1Tui5PFoRUfSgw)

If we plot the function we now got a curve .  We can use derivative of the curve to get the slope at any value for the intercept ( θ ) .  Where the slope is zero means the there is no loss value and our predicted value and label are the same ( which not happen in reality ) .

### Gradient descent 

We want to choose the best value of θ where J(θ) is minimal. At first, we always gonna start at a wild guess by letting θ=0 and make changes to θ where J(θ) is the smallest.

```math
θ_j \coloneqq θ_j - \alpha\frac{∂(θ)}{∂J} J(θ)
```
Starting from a wild guess and repeatedly performing the update on θ for all values of j. Here, α is called the learning rate. This is a natural algorithm that controls how huge or how little we want to update the value of θ in every step of the each of j.
To find out how the cost function changes according to the value  θ . To get the relation between θ and the loss function.
```math
\frac{∂}{∂θ_n}J(θ) = \frac{∂}{∂θ_n}(h_θ(x) - y_i)^2
\\
\frac{∂}{∂θ_n}J(θ) = \frac{∂}{∂θ}(\sum_{i=0}^nh_θ(x) - y_i)^2
\\
\frac{∂}{∂θ}J(θ) = \frac{∂}{∂θ}(h_θ(x) - y)^2
\\
\frac{∂}{∂θ}J(θ) = 2(h_θ(x)- y)× \frac{∂}{∂θ}(h_θ(x) - y)
\\
\frac{∂}{∂θ}J(θ) = 2((θx + b)-y)× x
\\
\frac{∂}{∂θ_n}J(θ_i) = \frac{2}{n}\sum_{i=0}^n( (θ_ix_i + b)- y_i)× x_i
\\
\frac{∂}{∂θ_n}J(θ_i) = -\frac{2}{n}\sum_{i=0}^n( y_i -(θ_ix_i + b))× x_i
```
You may probably notice when I replace the value for h_θ(x) b is actually the y-intercept according to the slope equation, y = mx + b .  ( b is  θ_0 ) . 
We can also find the relation between b and the loss function in the same way we find for θ.
```math
\frac{∂}{∂b_n}J(b_i) = -\frac{1}{n}\sum_{i=b}^n( y_i -(b_ix_i + b))
```
### In Python
The final moment of truth! in this section, I am gonna be trying to code the linear regression with the equation we formulated above. This section is I think the coolest thing that I found out in my journey.
I am gonna be doing linear regression with some datasets that I found from Kaggle and trying to predict the outcome.

I am gonna be using numpy, pandas and matplotlib from python.
```python
class LinearRegression:
    def __init__(self,x,y):
        self.data = x
        self.label = y
        self.m  = 0
        self.b = 0
        self.n = len(x)

    def fit(self, epoch, lr):
        for i in range(epoch):
            y_pred = self.m * self.data + self.b

            L_M = (-2/self.n)*sum(self.data * (self.label - y_pred))
            L_b = (-1/self.n)*sum(self.label - y_pred)

            self.m = self.m - lr * L_M
            self.c = self.b - lr * L_b

    def predict(self,inp):
        y_pred = self.m * inp + self.b
        print(self.m,self.c)
        return y_pred
```

In the class LinearRegression, it has two functions predict and fit.
Predict function accepts two parameters epoch and lr. ( number of times we want to tweak θ to reduce the cost function.

```python
   def fit(self, epoch, lr):
        for i in range(epoch):
            y_pred = self.m * self.data + self.b
            L_M = (-2/self.n)*sum(self.data * (self.label - y_pred))
            L_b = (-1/self.n)*sum(self.label - y_pred)
            self.m = self.m - lr * L_M
            self.c = self.b - lr * L_b
```
The for loop as you can see is where we adjust the value of θ according to this equation  **θ_j \coloneqq θ_j - \alpha\frac{∂(θ)}{∂J} J(θ)** we mentioned above.
```python
L_M = (-2/self.n)*sum(self.data * (self.label - y_pred))
L_b = (-1/self.n)*sum(self.label - y_pred)
```
For each iteration, it finds out the **θ** and **θ_0** values and adjust them 
```python
self.m = self.m - lr * L_M
self.c = self.b - lr * L_b
``` 
by multiplying with the learning rate, self.c and self.m get better and better over each iteration. So our model fits with our data gradually.

```python
# load the csv using pandas 
df = pd.read_csv('score.csv')

# extract features and labels
x = np.array(df.iloc[:,0])
y = np.array(df.iloc[:,1])

model = LinearRegression(x,y)
model.fit(1000,0.0001)
y_pred = model.predict(x)

# plot the pred results 
plt.figure(figsize = (20,6))
plt.scatter(x,y , color = 'green')
plt.plot(x , y_pred , color = 'k' , lw = 3)
plt.xlabel('x' , size = 20)
plt.ylabel('y', size = 20)
plt.show()

print(y_pred)
```
## Complete code 

```python
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

class LinearRegression:
    def __init__(self,x,y):
        self.data = x
        self.label = y
        self.m  = 0
        self.b = 0
        self.n = len(x)
        
    def fit(self, epoch, lr):
        for i in range(epoch):
            y_pred = self.m * self.data + self.b
            L_M = (-2/self.n)*sum(self.data * (self.label - y_pred))
            L_b = (-1/self.n)*sum(self.label - y_pred)
            self.m = self.m - lr * L_M
            self.c = self.b - lr * L_b
            
    def predict(self,inp):
        y_pred = self.m * inp + self.b
        print(self.m,self.c)
        return y_pred

df = pd.read_csv('score.csv')
x = np.array(df.iloc[:,0])
y = np.array(df.iloc[:,1])
model = LinearRegression(x,y)
model.fit(1000,0.0001)
y_pred = model.predict(x)

plt.figure(figsize = (20,6))
plt.scatter(x,y , color = 'green')
plt.plot(x , y_pred , color = 'k' , lw = 3)
plt.xlabel('x' , size = 20)
plt.ylabel('y', size = 20)
plt.show()
print(y_pred)
```
### Examples 

#### Income vs happiness [income.csv](https://media.graphassets.com/EFy8cHXrTAWSfVe0ebvQ?dl=true&_gl=1*13nuzl*_ga*MTgyODMwOTE0NC4xNjY0NTA4ODc1*_ga_G6FYGSYGZ4*MTY2NjI2NTg2MS45LjEuMTY2NjI2NTkxNi41LjAuMA..)
![income.png](https://media.graphassets.com/PsYNEcWASSub5guSK8Uu)

#### USA housing data set [USA_Housing .csv](https://media.graphassets.com/lg8Y18bhSbmUin77QvVA?dl=true&_gl=1*rir253*_ga*MTgyODMwOTE0NC4xNjY0NTA4ODc1*_ga_G6FYGSYGZ4*MTY2NjI2NTg2MS45LjEuMTY2NjI2NjQ2MC42MC4wLjA.)
![housing.png](https://media.graphassets.com/xoTybarLSAmOykBQosed)



 I am gonna be talking about linear regression and how gradient descent algorithms can be used to get the best outcome of our model.

Linear regression in supervised learning

For the last two months, I have been preparing for machine learning and taking some calculus courses along the way. Then I want to share some ideas about gradient descent in machine learning.

Before I can do that, one thing comes to my mind is that how can I share mathematical calculations. Photos or using some tools on the internet to generate symbols?

Nah, there gonna be some way to render math symbols in React .

### [KaTex](http://katex.org)

The fastest math typing library for web. KaTex is an amazing library for rendering mathematical symbols in the web. KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.

[GitHub - KaTeX/KaTeX: Fast math typesetting for the web.](https://github.com/KaTeX/KaTeX)

Installation steps were very simple and described in the documentation of the website. You can use it in both browsers or node.js environments.

In [browser environment](https://katex.org/docs/browser.html),

```html
<!DOCTYPE html>

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.css"
      integrity="sha384-bYdxxUwYipFNohQlHt0bjN/LCpueqWz13HufFEV1SUatKs1cm4L6fFgCi1jT643X"
      crossorigin="anonymous"
    />

    
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.js"
      integrity="sha384-Qsn9KnoKISj6dI8g7p1HBlNpVx0I8p1SvlwOldgi3IorMle61nQy4zEahWYtljaz"
      crossorigin="anonymous"
    ></script>

    
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/auto-render.min.js"
      integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
      crossorigin="anonymous"
      onload="renderMathInElement(document.body);"
    ></script>
  </head>
  ...
</html>
```

In [Nodejs environment](https://katex.org/docs/node.html) ,

```bash
npm install katex
# or globally
npm install -g katex
```

and then you can basically use by importing the modules .

```jsx
const katex = require("katex");
require("katex/contrib/mhchem"); // modify katex module
const html = katex.renderToString("\\ce{CO2 + C -> 2 C0}");
```

## How I rendered in my website ?

My website content structure is based on MDX. I used [hygraph](http://hygraph.com) as my backend so markdown is built-in. I changed some settings in my component mapping and mainly used code blocks to render my symbols.

In my markdown, I used my custom language name _math_ and conditionally rendered it in my component mapping. Here is an example of my markdown rendering some matrix.

````latex

```math
\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix}
\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix}
\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix}
````

which results in ,

```math
\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix}
\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix}
\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix}
```

Example of my component mapping,

```jsx
{
  className === "language-math" ? (
    <MathBlock symbol={children} />
  ) : (
    <CodeBLock code={children} />
  );
}
```

Then if I got my string of math expression, I can use KaTex’s api to render my expression,

```jsx
const MathBlock = ({ symbol }) => {
  const renderMath = (sym) =>
    katex.renderToString(sym, {
      throwOnError: false,
    });
  return (
    <Box position="relative" my="1.5em">
      <Code dangerouslySetInnerHTML={{ __html: renderMath(symbol) }} />
    </Box>
  );
};
```

I used dangerouslySetInnerHtml, to render the Html string generated from KaTex because it was midnight and I want to sleep, probably look for a better solution the next day, hopefully...

And now I can use symbols as I want,

```math
\def\foo{y^2} \int \def\bar{x^3} \foo + 2\bar  = 4
\newline
\def\foo{y^1} \sum\def\bar{x^3} \foo + 4\sqrt\bar  = 4

```

They also have a nice documentation for you to look at the syntax for all math symbols.
[Supported symbols and expressions](https://katex.org/docs/supported.html)

Here is how I rendered mathematical symbols in my personal blog contents.

Rendering mathematical symbols in React

Simple linked list implementation with javascript.

Linked List Implementation with Javascript

The smooth scrolling effect used in this website with framer motion.

Smooth scrolling in React with framer motion

Have you ever seen some coding tests in leetcodes or HackerRank or codewars that ask you to find the max sub array in a given array or even linked list.

Kadane’s Algorithm

Arkar Kaung Myat

In thie video, we gonna be talking about how we can build performant websites with Next.js.From the ground up we gonna cover all the think and API  you should know with Next.js.

00:00 - Intro
01:20 - What is Next.js and Why ?
03:05 - What is CSR, SSR, ISR ?


Join us in discord so that you can discuss and share your project's bugs with us .Also i am gonna be sharing all the resources there.
Join us : https://discord.gg/q4bDzE5E

Getting started with Next.js in 2022 !   -  #EP1

In this video, we are gonna be warming up some of the features of react as we move toward to the world of Next.js.
Join us in discord so that you can discuss and share your project's bugs with us .Also i am gonna be sharing all the resources there.

00:01 - Create react app
04:15 - State 
11:36 - Effects 
22:30 - API fetching
33:53 - Props and Components

Join us in discord so that you can discuss and share your project's bugs with us .Also i am gonna be sharing all the resources there.
Join us : https://discord.gg/q4bDzE5E

Getting started with Next.js in 2022 ! ( React Warm up )   -  #EP2

In this video, we gonna talk about how you can handle routing in your next.js application.We goona talk about routing , prefetching and router object.
Join us in discord so that you can discuss and share your project's bugs with us .Also i am gonna be sharing all the resources there.

Join us : https://discord.gg/q4bDzE5E

You can check out our fund raising react course here !!!
https://www.facebook.com/262580030565389/posts/2078697105620330/

Follow us in Facebook !
https://www.facebook.com/262580030565389/posts/2078697105620330/

Join in telegram !
https://t.me/joinchat/OKA8Odnr_2g2ZjI1

00:00 - Intro
00:17 - What we gonna build ?
01:18 - Creating Nextjs Application
05:03 - Pages
12:37 - Link Component and prefetching
15:45 - Dynamic Routing
15:58 - useRouter Hook

Getting started with Next.js in 2022 ! ( Routing  )   -  #EP3

Today we gonna talk about styling in nextjs.We gonna cover about global styles, css modules, static files serving, alias import and many more. 
Make sure you check out other next.js video as well and hope this video helpful to you.

Join us in discord so that you can discuss and share your project's bugs with us .Also i am gonna be sharing all the resources there.

Join us : https://discord.gg/q4bDzE5E

00:00 - Intro
01:35 - Global Styles
05:01 - CSS modules
08:45 - Other styling options
10:14 - Alias import
15:34 - Building the blog
16:31 - Static file serving
19:45 - Image component
22:45 - Building the blog UI
25:09 - Layout Component
29:00 - Building the UI

Getting started with Next.js in 2022 ! ( Styling and Building the blog UI  )   -  #EP4

I am so excited to share you guys the recording from var.camp 2023 Myanmar. A virtual barcamp for everyone around the world.

Topic : Next.js 13 : Making Your Website More Paw-some
Slides : https://www.canva.com/design/DAFYRUeOYJE/45QrrXAXsMdEB1FGKDsbbw/view  
Topic : Next.js 13 : Making Your Website More Paw-some
Demo Github :  https://github.com/Riley1101/varcamp-next13-demo
Demo Live : https://varca
mp-next13-demo.arkardev.space/

Join us in discord so that you can discuss and share your project's bugs with us .Also i am gonna be sharing all the resources there.

Join us : https://discord.gg/q4bDzE5E

00:00 - Rendering in the Web
05:55 - What is nextjs ?
18:05 - Server components 
34:10 - Next.js 13

ArkarDev

Hi, I’m
Arkar Kaung Myat.

My Articles.

Code Snippets

Linked List Implementation with Javascript

Smooth scrolling in React with framer motion

Kadane’s Algorithm

My Latest Videos

Getting started with Next.js in 2022 ! - #EP1

Getting started with Next.js in 2022 ! ( React Warm up ) - #EP2

Getting started with Next.js in 2022 ! ( Routing ) - #EP3

ArkarDev

Hi, I’m .css-1fu7ha3{font-size:var(--chakra-fontSizes-2xl);font-weight:800;}@media screen and (min-width: 30em){.css-1fu7ha3{font-size:var(--chakra-fontSizes-6xl);}}Arkar Kaung Myat.

My Articles.

Code Snippets

Linked List Implementation with Javascript

Smooth scrolling in React with framer motion

Kadane’s Algorithm

My Latest Videos

Getting started with Next.js in 2022 ! - #EP1

Getting started with Next.js in 2022 ! ( React Warm up ) - #EP2

Getting started with Next.js in 2022 ! ( Routing ) - #EP3

Hi, I’m
Arkar Kaung Myat.