DEV Community: ullas kunder

Using GitHub as a Headless CMS for Blogs with Next.js – and Publishing to dev.to + RSS!

ullas kunder — Thu, 08 May 2025 00:00:00 +0000

Using GitHub as a Headless CMS for Blogs with Next.js – and Publishing to dev.to + RSS!

📝 GitHub → 🔁 Next.js API → 🌍 Blog + 🔗 RSS → ✨ dev.to

TL;DR: We're managing blog posts with MDX files inside a GitHub repo (private for safety), pulling them into our Next.js app as a read-only CMS , rendering them dynamically with Markdown, generating an RSS feed, and publishing to platforms like dev.to. Clean, modern, no bloated CMS, no rebuilds on blog edits. 💡

🧐 Why GitHub as a Blog CMS?

Most devs use tools like Notion, Sanity, WordPress (ew 😬), or even headless CMSes like Contentful. But what if I told you...

“You already have a version-controlled, Markdown-friendly, Git-powered CMS sitting in your toolbelt.”

That’s right: GitHub.

We manage all blog content as .mdx files in a dedicated repo , separate from our actual portfolio or blog frontend. Why?

🔥 The Pain Point

If you include blog .mdx content inside your Next.js app repo , every time you tweak a typo, you have to:

Push code
Rebuild the whole app
Redeploy

That’s... not ideal. Especially when the blog isn’t even changing the codebase.

💡 The Solution

So we decoupled it. Blog content lives in a separate GitHub repo (like blog-api) and our main blog frontend fetches blog files from it using the GitHub API.

Private repo? Absolutely.

Because if it’s public, some clever clowns 🤡 might try to PR garbage or scrape it aggressively. Not today, Internet.

🗂️ Blog Content Structure

Our blog-api repo looks like this:

C:\dev\blog-api
|
|-- advance-javascript.mdx
|-- basic-of-react-hooks.mdx
|-- basic-of-react17.mdx

Each file contains frontmatter metadata at the top:

---
title: "Advance JavaScript"
subtitle: "Exploring closures, scopes and the weird parts"
id: 001
date: "Aug 3, 2023"
tag: ["js", "closures", "advanced"]
---

Your content goes here in MDX...

That’s it. Simple, readable, version-controlled.

🔌 Wiring It into Next.js

C:.
│ favicon.ico
│ head.tsx
│ Home.tsx
│ layout.tsx
│ loading.tsx
│ manifest.ts
│ not-found.tsx
│ page.tsx
│ robots.ts
│ sitemap.ts
│
├───api
│ ├───blog
│ │ └───v2
│ │ │ route.ts // GET all blog posts
│ │ └───[slug]
| └───route.ts // GET blog by slug
│
├───blogs
│ │ BlogClient.tsx
│ │ page.tsx // Blogs list page ssr
│ └───[slug]
│ └───page.tsx // Dynamic blog post page
│
├───rss
│ └───route.ts // RSS feed route
│
└───lib
    ├───assets.ts
    ├───dateFormater.ts
    ├───fetchBlogFromGithub.ts
    // Fetch all MDX posts via GitHub API
    ├───fetchPostFromAPI.ts
    // Fetch single post from GitHub raw
    ├───getBaseUrl.ts
    ├───getProjectsData.ts
    ├───mailApi.ts
    ├───markdownToHtml.ts
    ├───nodemailer.ts
    ├───utils.ts
    └───getPostMetaData.ts
    // Pull metadata from all blog posts

Now let’s break down how we make this dynamic in Next.js (App Router), without rebuilding every time.

🧠 Step 1: API route to fetch all blog posts

Inside /app/api/blog/v2/route.ts, we add:

export const dynamic = "force-dynamic";

export async function GET() {
  const posts = await fetchBlogPostsFromGitHub();
  return NextResponse.json(posts);
}

Why dynamic? Because we want on-demand rendering with periodic revalidation, not static build-time fetches.

🪝 Step 2: `fetchBlogPostsFromGitHub()` from our GitHub repo

In /lib/fetchBlogFromGithub.ts:

const res = await fetch(
  `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents?ref=${BRANCH}`,
  { headers: { Authorization: `Bearer ${GITHUB_TOKEN}` } }
);

const files = await res.json();
const mdxFiles = files.filter((file) => file.name.endsWith(".mdx"));

We loop through each file and use gray-matter to parse the frontmatter:

const { data, content } = matter(rawContent);

That gives us metadata like title, date, and the actual blog content.

This returns a nice, digestible array of blog posts to the API consumer (our blog frontend).

📦 Client-side Fetch & Rendering

In /app/blogs/page.tsx, we call our API:

const posts = await getPostMetaData();
return <BlogClient posts={posts} />;

Inside getPostMetaData():

const response = await fetch(`${BASE_URL}/api/blog/v2`);

Why fetch from an API instead of reading .mdx files directly?

Keeps server-side data handling clean
Allows for revalidation with next: { revalidate: 60 }

🔍 View Individual Posts

In [slug]/page.tsx, we dynamically fetch the content:

const postContent = await fetchPostFromAPI(slug);

This hits:

GET / api / blog / v2 / [slug];

Which in turn fetches:

https://raw.githubusercontent.com/${REPO_OWNER}/${REPO_NAME}/${BRANCH}/${slug}.mdx

We parse the raw .mdx again using gray-matter, then render it with:

<Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
  {postContent.content}
</Markdown>

Boom. Fully dynamic blog. No build required. New blog post? Just git push to your content repo and you’re done. 🎉

📰 Bonus: Generating an RSS Feed

RSS is still relevant – especially if you want to syndicate to sites like dev.to or Feedly.

In /app/rss/route.ts, we:

Call getPostMetaData() again
Convert each post to <item> XML
Wrap everything in a valid <rss> schema

<rss version="2.0">
  <channel>
    <title>Ullas Kunder Blog</title>
    <link>https://ullaskunder.com</link>
    <description>...</description>
    ${items.join("")}
  </channel>
</rss>

Served with:

return new NextResponse(rss, {
  headers: {
    "Content-Type": "application/xml",
  },
});

You now have an auto-updating RSS feed from your GitHub-powered blog. 🤘

Want to make sure it’s valid? Use this tool from W3C:

In development , use Validate by Direct Input
Once deployed, use Validate by URL

👉 https://validator.w3.org/feed/

Make sure your XML is well-formed — dev.to and other RSS consumers can be picky.

✍️ Publish to dev.to via RSS

Platforms like dev.to can automatically sync articles from your RSS feed.

Just head to your dev.to settings → Extensions → RSS Integration , and paste your RSS feed URL (e.g., https://yourdomain.com/rss).

Once dev.to pulls in your post, you'll see it listed in your dashboard under Posts :

But here’s the catch: 🚫 There’s no visible "Publish" button or any clear indication on that list view — which honestly sucks. You’d expect to be able to publish right from there, but no.

Instead, you have to click "Edit" on a post. Only inside the edit screen will you see the message:

Unpublished Post. This URL is public but secret, so share at your own discretion. > (Click to edit)

Click that link, and in the editor, you’ll see the synced metadata at the top:

---
title: Essential React Hooks: A Comprehensive Guide
published: false
date: 2023-07-19 00:00:00 UTC
tags: react, hooks, beginners
canonical_url: https://ullaskunder.tech/blogs/basic-of-react-hooks
---

👉 All you need to do is change:

✅ published: false to published: true

...then save. Boom — it’s live.

🛠️ Hopefully dev.to improves this flow — it would be far more intuitive to allow publishing directly from the post list.

🧠 What We’ve Achieved

✅ Keep content and code separate
✅ Avoid rebuilding the blog for every new post
✅ Secure and version-controlled Markdown storage
✅ Dynamic content loading with caching
✅ Auto-generating RSS feed
✅ Easy syndication to dev.to or elsewhere

🔐 Why a Private GitHub Repo?

Because the internet is... well, the internet.

Public repo = free-for-all
Random people might PR garbage
Or worse, spam bots might crawl it constantly

So, we keep it private and authenticate with a GitHub token (stored securely via environment variables like GITHUB_TOKEN).

🚀 Future Enhancements

✍️ Add support for content previews (e.g., /drafts)
🧠 Add AI summaries or highlights
🔎 Integrate search indexing (Algolia, Meilisearch)
💌 Generate email newsletters from RSS

💬 Wrapping Up

Using GitHub as your blog CMS might feel odd at first, but it makes total sense for dev-centric blogs:

Markdown is natural for us
Git is already part of our workflow
Next.js handles the rendering like a champ

Write locally. Commit. Push. Done. Let your blog do the heavy lifting, not your deploy pipeline.

From Frontend to Go: Why I’m Switching Gears

ullas kunder — Sun, 06 Apr 2025 08:10:37 +0000

When I graduated, the world was locked down. COVID had pushed everything remote, including my final year of college. And to be honest? What we were taught back then didn’t feel like something that would help me land a real job. So, I thought — screw this, I’ll figure it out myself.

🎨 The Artist Who Switched Tabs

Before code, I was deep into 3D art. I was self-taught, building photorealistic renders in Blender during my free time. You can even find some of my work online if you search “ullas kunder 3d art” — I used to go by ullaskingsman back then — a playful twist on my name that still makes me smile. 😄

If you're curious to see more of my 3D work, I’ve also saved a highlight on my Instagram: @z_haruu.

In my first year of college, I even tried getting a job as a 3D artist. Didn’t work out. But that curiosity to understand how things are made — from pixels to logic — never left me.

💻 The Jump into Web Development

That curiosity led me to web dev. I already knew some HTML, CSS, and JavaScript, and I picked up React through blogs and YouTube. Then came React Native — and the idea of building mobile apps felt exciting. So I started building. Learning. Repeating.

After graduation, I applied like crazy. It wasn’t easy. But eventually, I landed my first role as an Associate Software Engineer. The pay was okay, but something felt off. Not long after, I moved to a Frontend Software Engineer role — better work, but I still felt like something was missing.

🗾 A Curiosity for Culture

Somewhere along the way, I started falling in love with Japanese culture — the aesthetics, the philosophy, the engineering behind their everyday systems. It clicked with the way I think and how I want to grow. That’s when I made a choice:

I want to build systems, not just interfaces.

I want to understand how things run, not just how they look.

🐹 Enter: Go

I chose to learn Go — not just because it’s fast or trendy, but because it teaches you to think in terms of performance, simplicity, and clean architecture. I’m still early in my journey, but it feels like a new mental model. A new chapter.

I don’t know where this path will lead. Maybe Japan. Maybe somewhere else. But I’m staying open.

For now, I’m:

Continuing to improve my portfolio https://ullaskunder.tech/
Deepening my Go knowledge github golang learning repo
Keeping frontend in my toolbox (just in case)
And learning like I always have — by doing

🎯 Why Write This?

Because I know I’m not the only one in transition.

If you’re out there switching gears, jumping stacks, or just unsure where you belong — I get it. Tech is wide. Your path doesn’t have to be a straight line. Mine sure isn’t.

Let’s build weird things. Let’s stay curious. And maybe, just maybe, let’s meet in Japan someday.

—

Thanks for reading. If any part of this resonated, feel free to say hi. I’m always down to chat about code, art, or anime.

The Enchanting Guide to JavaScript Exports and Imports

ullas kunder — Tue, 30 Jan 2024 00:00:00 +0000

The Joy of Imports and Exports in JavaScript

Welcome to the whimsical world of JavaScript exports and imports! 🚀 Today, we embark on a delightful journey to unravel the secrets of named and default exports, and we'll sprinkle in some tips on the best practices that make your code sing!

Once Upon a Time in the Export Kingdom

🌈 Named Exports: A Symphony of Harmony

In the magical land of JavaScript, named exports are like the individual musicians in an orchestra. Each module can export multiple values, functions, or objects, and they all get a chance to shine!

// magic.js
export const spellBook = ['Abracadabra', 'Wingardium Leviosa'];

export function castSpell(spell) {
  console.log(`Casting ${spell}! ✨`);
}

export const potionIngredients = {
  eyeOfNewt: 3,
  unicornHair: 1,
};

Behold! The magic.js module has bestowed upon us three marvelous exports: spellBook, castSpell, and potionIngredients. Now, other modules can import these enchanting elements and bask in the magic!

// wizard.js
import { spellBook, castSpell, potionIngredients } from './magic';

console.log(spellBook); // ['Abracadabra', 'Wingardium Leviosa']
castSpell('Expelliarmus'); // Casting Expelliarmus! ✨
console.log(potionIngredients); // { eyeOfNewt: 3, unicornHair: 1 }

🚀 Default Exports: The Star of the Show

In our magical symphony, the default export is the soloist, the star of the show! Only one value can be the default export in a module, and it doesn't need a fancy name when imported.

// wand.js
const wand = 'Elder Wand';
export default wand;

Prepare to be amazed! The wand.js module has a single, dazzling export: the Elder Wand. Let's bring this mystical artifact into another module's spotlight!

// sorcerer.js
import wand from './wand';

console.log(`The sorcerer wields the mighty ${wand}! 🪄`);

Choosing the Best Spell: Default vs. Named

🌟 Default Export: The Chosen One

Use default exports when there's a clear protagonist in your module. It simplifies imports and allows you to pick the "main character" of your module.

// Only one export in wand.js
export default wand;

🌈 Named Exports: The Ensemble Cast

Named exports shine when your module has multiple important entities to offer. It's like creating a team of heroes, each with their own strengths.

// Multiple exports in magic.js
export const spellBook = ['Abracadabra', 'Wingardium Leviosa'];
export function castSpell(spell) {
  console.log(`Casting ${spell}! ✨`);
}
export const potionIngredients = { eyeOfNewt: 3, unicornHair: 1 };

The Grand Finale: Importing Magic

🚀 The Full Ensemble: Named Imports

To harness the full power of named exports, import them by name. It's like inviting specific wizards to your magical gathering.

// wizard.js
import { spellBook, castSpell, potionIngredients } from './magic';

🌟 The Solo Act: Default Import

For default exports, a simple import statement is all you need. It's elegant, straightforward, and lets the star shine solo.

// sorcerer.js
import wand from './wand';

The Magical Encore: Best Practices

Consistency is Key: Whether you choose named or default exports, stick to a consistent style across your project. A harmonious codebase is a joy to maintain.
Mindful Naming: Give meaningful names to your exports. Make your code a delightful read, like a well-crafted spell.
Organize the Orchestra: Group related exports in a module. A tidy module is a happy module.
Default for Simplicity: If a module has a clear protagonist, embrace the default export. It makes imports clean and straightforward.
Named for Flexibility: When your module features a diverse set of entities, let them shine as named exports. It's like creating a magical team!

And there you have it, dear reader! The magical world of named and default exports in JavaScript. May your code be enchanting, your imports be seamless, and your JavaScript adventures be full of joy and whimsy! 🌟🪄

Comprehensive Guide to Advanced JavaScript Concepts

ullas kunder — Thu, 03 Aug 2023 00:00:00 +0000

Thanks

I would like to express my gratitude to the following YouTube creators for their impactful videos that greatly aided my understanding of JavaScript core concepts:

CodeSmith (Will Sentance): "JavaScript The Hard Parts: Object Oriented Programming"
Kyle Simpson: "You Don't Know JS" (also available on YouTube)
Dave Gray: YouTube JavaScript Playlist
Enes Karakaş: Advanced Object Concepts (available on YouTube)

Thank you all for sharing your knowledge and helping me on my learning journey!

function outerFun() {
  let counter = 0;
  function increment() {
    counter++;
    console.log("counter:", counter);
  }
  increment();
}
outerFun();


Global Execution Context:
  - Variables:
    - outerFun: `<function reference>`
  - Function Declarations:
    - outerFun()

Execution Context of outerFun():
  - Variables:
    - counter: `0`
    - increment: `<function reference>`
  - Function Declarations:
    - increment()
  - Call Stack:
    - outerFun()

Execution Context of increment():
  - Variables:
    - (none)
  - Call Stack:
    - increment()
    - outerFun()
    - Global Execution Context

In this representation:

The global execution context includes the outerFun function reference.
When outerFun() is invoked, a new execution context for outerFun is created. It includes the counter variable initialized to 0 and the increment function reference.
Within the outerFun execution context, there is a call to the increment() function. This triggers the creation of a new execution context for increment.
The increment execution context does not have any variables specific to it.
The call stack keeps track of the active execution contexts. Initially, outerFun() is at the top of the call stack. When increment() is called, it is pushed onto the call stack above outerFun(), and the global execution context is at the bottom.
After the increment function completes its execution, its execution context is popped off the call stack.
Once outerFun() finishes, its execution context is also popped off the stack.
Finally, only the global execution context remains on the call stack.

I hope this Markdown format helps you understand the execution contexts more clearly. Let me know if you have any further questions!

function outerFun() {
  let counter = 0;
  function increment() {
    counter++;
    console.log("counter:", counter);
  }
  increment();
}
outerFun();

Global Execution Context:
When outerFunction() is called:
Call Stack:
When exFun() is called the first time:
Call Stack:
When exFun() is called the second time:
Call Stack:

In summary, the counter variable is not incremented because exFun tries to access it in the global execution context after the outerFunction execution context has been deleted. The value of counter is not persisted, so it remains at its initial value of 0.

Promises and Async/Await:

Promises: Asynchronous programming is a fundamental aspect of JavaScript. Promises provide a way to handle asynchronous operations and avoid callback hell

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      const data = "One piece is real";
      if (data) {
        resolve(data);
      } else {
        reject("Error occurred");
      }
    }, 2000);
  });
};

fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Async/Await: Introduced in ES2017, async/await simplifies asynchronous code even further by allowing you to write asynchronous code that looks like synchronous code

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Some fetched data";
      if (data) {
        resolve(data);
      } else {
        reject("Error occurred");
      }
    }, 2000);
  });
};

const fetchDataAsync = async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchDataAsync();

Closures

Closures allow functions to retain access to variables from their parent scopes even after the parent function has finished executing.

const outerFunction = (outerParam) => {
  const innerFunction = (innerParam) => {
    console.log(outerParam + innerParam);
  };

  return innerFunction;
};

const closure = outerFunction(10);
closure(5); // Output: 15

Object Oriented Programming OOP ✨

4 principle:

Abstraction
Encapsulation
Inheritance
Polymorphism

Prototypes

The prototype is a special hidden property object that is associated with every functions and objects by default in JavaScript.

Objects in JavaScript are linked to a certain prototype, by means object can access that prototype method => Prototypal inheritance

let myArray = [11, 22, 33];
console.log(myArray.at(0));
//output: 11

/** Array.prototype is the prototype of all array objects
 * behind its calling myArray.prototype.at(2)
 **/

OOP is an enormously popular paradigm for structuring out complex code

Easy to add features and functionality
Performant (efficient in term of memory)
Easy for us and other developers to reason about (a clear structure)

Objects - store functions with their associated data!

const user1 = {
  name: "ullas",
  score: 2,

  increment: function () {
    user1.score++;
  },
};

user1.increment();

This is the principal of encapsulation.

Multiple way to create an object, just to get familier with few means of defining the object

Using empty object and then populate it with dot notation 🔰

Creating user2 user 'dot notation'


const user2 = {};

user2.name = 'ullas';
user2.score = 6;
user2.increment = function(){
    user2.score++;
};

// Square bracket notation [] (never used except in one condition: evaluatng what goes in ex: user2[property] property: 'name')

Using the built in js Object.create which will create empty object


const user3 = Object.create(null);

user3.name = 'ullas';
user3.score = 7;
user3.increment = function(){
    user3.score++;
};

! our code is getting repetitive, we are breaking our DRY principle

? What if we have milion of user....?

Champ => Functions 😁

They are helpfull in this case so we don't have to repeat the code. They are wrapping up the instructions... write once call as many time you want

Solution 1. Generate Object using a function

function userCreator(name, score){

    const newUser = { };

    newuser.name = name;
    newuser.score = score;

    newuser.increment = function(){
        newuser.score++;
    };

    return newUser;
};

const user1 = userCreator('ullas', 10)
const user2 = userCreator('kingsman', 10)

user2.increment()

! this solution is doing its task but fundamentally Unusable

Reason:

In global memory

user1 = userCreator('ullas' 10)

which create a new execuation context

In a local memory
In global memory

Same with => user2 , declaring user2

In global memory

user2 = userCreator('kingsman' 10)

which create a new execuation context

In a local memory
In global memory

next step was => to increment

User1.increment();
User2.increment();

Problem

Each time we create a new user we make space in our computer's memory for our data functions. But our functions are just copies

In Global memory:

    global memory with >
    - [function userCreator()]

    - user1 : {
        name: 'ullas'
        score: 10
        increment: -[f]- // same copy
    }

    - user2 : {
        name: 'kingsman'
        score: 10
        increment: -[f]- // same copy
    }

    - what if n number of user...

Each object have brand new increment function defined on them... We should be able attach multiple function on them not single function ex: login, logout, render etc...

Is there a better way? to getting single copyies of them in Global Memory

Solution 2 😮

Store the increment function in just one object and have the interpreter, if it doesn't find the function on user1, look up to that object to check if it's there

How to make this link ?

Prototype chain

In Global memory:

    global memory with >

    userCreator : -[f]-

    user1 : {
        name: 'ullas'
        score: 10
        => functionStore
    }

    user2 : {
        name: 'kingsman'
        score: 10
        => functionStore
    }

    function functionStore: {
        increment: -[f]-
    }

    // => this bond is called prototypal bond : chain link to or go look functionStore
    /**
     * when user doesn't find increment it goes look in function store for increment()
     */

The Code Base

function userCreator(name, score) {
  const newUser = Object.create(functionStore);

  newUser.name = name;
  newUser.score = score;

  return newUser;
}

const functionStore = {
  increment: function () {
    this.score++;
  },
  Login: function () {
    console.log("Your are loggedin");
  },
};

const user1 = userCreator("ullas", 10);
const user2 = userCreator("kingsman", 10);

user1.increment();

In the global memory

Initially:

  global memory >

  userCreator: -[f]-

  functionStore: {
      increment: -[f]-
      login: -[f]-
  }

  User1 :undefined

user1 = userCreator('ullas' 10)

which create a new execuation context

In a local memory

Now the increment()

This increment() function need to be usable on what ever object we run it on.
We need some placeholder inside of that function increment in order to refer to that object

Or we need label thats always going to refer to that object on which we are running the function

this Fundamental rule always pointing to the relevent object to the left-hand side of the dot on which we calling the function

Creates a execuation Context

In a local memory

In the example above, user1 is to “the left of the dot” which means the this keyword is referencing the user1 object. So, it’s as if, inside the increment method, the JavaScript interpreter changes this to user1.

// this => to user1

this.score++
===> user1.score++

Do we have copies of increment() stored in user1 and user2 => none

Super sophisticated but not standard

solution 3, new Keyword 🤩

Embracing the Magic of the new Keyword: No Hard Work, Just Automation! 🤩

Let's witness this enchantment in action with a spellbinding code example:

const user1 = new userCreator("ullas", 10);

When we call the constructor function with new keyword in front we automate 2 things

Create a new user object
return the new user object

Creating a New User Object : By simply adding new before the function call, the new keyword conjures a brand-new user object into existence. No more manual labor required!

Returning the New User Object : The new keyword, being the generous enchantress it is, automatically returns the newly created user object. We can catch it and cherish it as our very own.

But now we need to adjust how we write the body of userCreator

Refer to the auto-created object?
Known where to put our single copies of functions?

Interlude - functions are both objects and functions

Before we continue our journey, let's explore a mesmerizing fact about functions. In JavaScript, functions possess the remarkable ability to be both objects and functions simultaneously. Mind-bending, isn't it?

function multiplyBy2(num){
    return num*2
}

multiplyBy2.stored = 5
multiplyBy2.(3) // 6

multiplyBy2.stored //5
multiplyBy2.prototype // ()

Here, we have the captivating multiplyBy2 function. It gracefully showcases its object-like qualities by sporting a stored property with a value of 5. But wait, there's more! When invoked as a function, it magically multiplies the provided number by 2. In this case, multiplyBy2(3) gracefully yields 6.

Curiously, we can access the stored property separately, giving us a surprising value of 5. Additionally, the enigmatic multiplyBy2.prototype property returns an empty parentheses pair (). Its true purpose will soon be revealed.

let's return to the enchanting world of the UserCreator constructor function.

Code Base

function UserCreator(name, score) {
  this.name = name;
  this.score = score;
}
UserCreator.prototype.increment = function () {
  this.score++;
};
UserCreator.prototype.login = function () {
  console.log("You are loggedin");
};

const user1 = new UserCreator("ullas", 10);
user1.increment();

In the global memory

Initially:

  global memory >

  userCreator() -[f]- //userCreator function version

  userCreator: {
      //userCreator object version
      prototype: {
          //functionStore
          increment: -[f]-
          login: -[f]-
      }
  }

  User1 :undefined

user1 = new UserCreator('ullas' 10)

which create a new execuation context

Within the realm of Local Memory, secrets are revealed:

In a local memory

Now the increment()

user1.increment();

Creates a execuation Context

In a local memory

// this => to user1

this.score++;
// Translates to: user1.score++

Benefits

Faster to Write : The new keyword automates object creation and eliminates the need for manual object instantiation. We can summon objects into existence with a single line of code. Huzzah!
Simplicity Reigns : Our code becomes cleaner and more intuitive. We no longer need to explicitly return the object or worry about the intricate details of object creation. The new keyword takes care of it all. How delightful!
Professional Practices : Despite its magical powers, using the new keyword remains a widely accepted and professional practice. Embrace this technique to impress your peers and create code that shines like a star.

Solution 4, class 🙌

The class `Syntatic Sugar`

class userCreator {
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }
  increment() {
    this.score++;
  }
  login() {
    console.log("loggin");
  }
}
const user1 = new UserCreator("ullas", 10);
user1.increment();

In the global memory

Initially:

  global memory >

  //class
  [
      userCreator() -[f]- //userCreator function version

      userCreator: {
          //userCreator object version
          prototype: {
              // =>functionStore
              increment: -[f]-
              login: -[f]-
          }
      }
  ]

  User1 :undefined

user1 = new UserCreator('ullas' 10)

which create a new execuation context

In a local memory

Proxy Object

Proxy Objects:
Creating a Proxy Object:
Trap Methods:
Proxy Handler:
Example: Property Access (get trap):
Example: using receiver parameter in get trap
Example: Property Assignment (set trap):
Example: Property Deletion (deleteProperty trap):
Example: Prohibit Property Deletion (deleteProperty trap):
Example: Validation and Security:
Example: Array Manipulation (apply trap):

Sort Visualization using p5.js

ullas kunder — Sun, 09 May 2021 00:00:00 +0000

Sort Visualization

This is an example of bubble sort, I'll try to upload other Visualization practical

Table Of Content

Bubble Sort Theory
Practical Bubble Sort Visualization
File Structure

Bubble Sort Theory

Bubble Sort| Runtime O(n²) average and worst case. Memort: O(1).

O(n) (Best case) This time complexity can occur if the array is already sorted , and that means that no swap occurred and only 1 iteration of n elements

In bubble sort, we start at the beginning of the array and swap the first two elements if the first is greater than the second. Then, we go to the next pair, and so on, continuously making sweeps of the array until it is sorted. In doing so, the smaller items slowly"bubble" up to the beginning of the list.

Bubble sort can be implemented as follows:

Bubble-sort(a)

  for i = a.length() to 1
    for j = 1 to i-1
        if a[j]>a[j+1]
            swap(a[j],a[j+1]);
        end if

In the case of the standard version of the bubble sort, we need to do N iterations. In each iteration, we do the comparison and we perform swapping if required. Given an array of size N, the first iteration performs (N - 1) comparisons. The second iteration performs (N - 2) comparisons. In this way, the total number of comparison will be:

(N - 1) + (N - 2) + (N - 3) + .......+ 3 + 2 + 1 = N(N - 1)/2 = O(N^2)

Take an array of numbers " 5 1 4 2 8", and sort the array from lowest number to greatest number using bubble sort. In each step, elements written in bold are being compared. Three passes will be required

First Pass
Second Pass

The algorithm needs one additional whole pass without any swap to know it is sorted.

Third Pass
- ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )
- ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )
- ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )
- ( 1 2 4 5 8 ) → ( 1 2 4 5 8 )

Practical Bubble Sort Visualization

All you need is a Vs code(Visual studio code) or any other editor or IDE

I'm using p5.js javascript library which is used for creative coding, Visualization, etc...\

File Structure

Algorithm-Visualization:.
├── libraries
│ └──p5.min.js
│
├── style.css
├── script.js
├── jsconfig.json (not required if you dont use vs code p5 extension)
└── index.html

You can install p5 extension in vs code and run with live server extension

You just have to link the p5.min.js from cdnjs in you script that's it!!!

Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js">
</script>

Basic of p5.js

setup():

It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts
random()

Name itself define it's generate random floating point number between ranges given as the parameter
noise()

noise() cannot be called without parameter if called it will return NaN.

The range is between 0 and 1 noise will always return floating point value will not exced greater than 1 it will always cluster around 0.5 they dont have uniform distribution

DEV Community: ullas kunder

Using GitHub as a Headless CMS for Blogs with Next.js – and Publishing to dev.to + RSS!

Using GitHub as a Headless CMS for Blogs with Next.js – and Publishing to dev.to + RSS!

🧐 Why GitHub as a Blog CMS?

🔥 The Pain Point

💡 The Solution

🗂️ Blog Content Structure

🔌 Wiring It into Next.js

🧠 Step 1: API route to fetch all blog posts

🪝 Step 2: fetchBlogPostsFromGitHub() from our GitHub repo

📦 Client-side Fetch & Rendering

🔍 View Individual Posts

📰 Bonus: Generating an RSS Feed

✍️ Publish to dev.to via RSS

🧠 What We’ve Achieved

🔐 Why a Private GitHub Repo?

🚀 Future Enhancements

💬 Wrapping Up

From Frontend to Go: Why I’m Switching Gears

🎨 The Artist Who Switched Tabs

💻 The Jump into Web Development

🗾 A Curiosity for Culture

🐹 Enter: Go

🎯 Why Write This?

The Enchanting Guide to JavaScript Exports and Imports

The Joy of Imports and Exports in JavaScript

Once Upon a Time in the Export Kingdom

🌈 Named Exports: A Symphony of Harmony

🚀 Default Exports: The Star of the Show

Choosing the Best Spell: Default vs. Named

🌟 Default Export: The Chosen One

🌈 Named Exports: The Ensemble Cast

The Grand Finale: Importing Magic

🚀 The Full Ensemble: Named Imports

🌟 The Solo Act: Default Import

The Magical Encore: Best Practices

Comprehensive Guide to Advanced JavaScript Concepts

Thanks

Promises and Async/Await:

Closures

Object Oriented Programming OOP ✨

Prototypes

Using empty object and then populate it with dot notation 🔰

Champ => Functions 😁

Solution 1. Generate Object using a function

Problem

Solution 2 😮

Prototype chain

solution 3, new Keyword 🤩

Interlude - functions are both objects and functions

Solution 4, class 🙌

The class Syntatic Sugar

Proxy Object

Sort Visualization using p5.js

Sort Visualization

Table Of Content

Bubble Sort Theory

Practical Bubble Sort Visualization

File Structure

🪝 Step 2: `fetchBlogPostsFromGitHub()` from our GitHub repo

The class `Syntatic Sugar`