DEV Community: Arman @programmerByDay

How to Enhance Your Dev Workflow with Privacy-First, Client-Side Tools

Arman @programmerByDay — Mon, 21 Jul 2025 00:28:58 +0000

I am the kind of developer who hates to install things and likes to use online quick tools for my daily small dev tasks.

I recently found myself frustrated (again) with the usual dev utilities online: slow, ad-heavy, sketchy data leaks, and zero consistency. Every time I needed something as simple as a YAML validator or regex tester, it felt like stepping into a time warp of old-school websites with painful UX.

I had enough, So I decided to do something about it and build something better. And this time, I do it in public.

🚀 Why privacy-first and local?

No tracking or spying: Everything runs in browser. No user data is ever sent to server or anyone.
Zero latency: Instant results = no loading bars, no waiting.
Secure & portable: Works offline or behind firewalls. Perfect for corporate private environments or company setups.

💡 How I Started

I started by bundling together a suite of essential dev tools that always annoyingly require a tab:

YAML & JSON Validators / Formatters
Markdown Editor + Markdown→PDF/DOCX converter
Regex tester & builder
Diff checker
Base64, Timestamp, UUID, and Hash generators
CSV ↔ JSON converter, HTML/XML encoder-decoder
QR Code & OG Image generator

All running locally, loading in under 200 ms, even for big files.

🔧 Demo time

Need to prettify some JSON? Paste it here and see it clean and tree-formatted.

Testing a regex? Type it and instantly validate it with sample text.

Want a QR code for a URL? Generate it in-browser with a click.

It’s live here: DigitalToolPad.com/tools

🎯 What’s next

I’m aiming to make this a go-to dev/workspace for teams. The long-term plan is:

Team subscriptions – let businesses manage access
Custom tool bundles – choose only the tools your team needs
More tools by demand – just tell me what you’re missing
White-label deployments – embed it into company portals

🤝 I’d love your feedback

Would this fit into your workflow? What tool are you always searching for? Would love your insight, especially if it’s something simple you wish "just worked."

Thanks for reading, and feel free to ping me with questions on the implementation, stack, SEO strategy, or anything in between.

Posted as part of my journey building in public, no sponsorships, no fluff, just real dev tooling.

What is an Embedding? And Why Should Devs Care?

Arman @programmerByDay — Mon, 16 Jun 2025 23:54:33 +0000

If you're venturing into AI-powered applications, understanding embeddings is crucial. In this post, I’ll show you exactly what they are — and how to use them in a modern TypeScript stack with PostgreSQL + pgvector. Let's demystify this concept.

What Is an Embedding?

An embedding is a vector—a list of numbers—that captures the meaning of a piece of data, such as text, images, or audio. It transforms:

✍️ Text → 🧠 Meaning → 🔢 Vector

"I love programming."\
becomes → [0.123, 0.089, ..., 0.245] (1536 dimensions)

Similar texts = similar vectors (close in distance).

Example:

Consider these two sentences:

“I love programming.”
“Coding is my passion.”

These have different words but similar meaning. Their embeddings—numerical representations—are close in vector space, reflecting their semantic similarity.

So… How Are Embeddings Generated?

Embedding models (like text-embedding-ada-002 from OpenAI or all-MiniLM-L6-v2 from HuggingFace) process your text through a deep neural network trained on massive corpora.

Here’s what they do:

Tokenize your input.
Process through Transformer layers.
Output a vector—e.g., 384 or 1536 floats—that represents that sentence in vector space.

You don’t need to train these from scratch. Just use the APIs.

const response = await fetch('https://api.openai.com/v1/embeddings', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    input: "I love programming.",
    model: "text-embedding-ada-002"
  })
});

const json = await response.json();
const embedding = json.data[0].embedding; // This is a 1536-dimensional vector

Why Should Developers Care?

Embeddings power:

🔍 Semantic Search: Search by meaning, not just keywords.
🧠 Chat with Documents: Retrieval-Augmented Generation (RAG).
🎯 Recommendation Systems: Suggest similar items based on content.
🗂️ Clustering and Classification: Group similar data points.

🛠️ Store Embeddings in PostgreSQL (with pgvector extension)

PostgreSQL supports pgvector, which makes PostgreSQL a full-on vector database.

Step 1: Create the table

Use SQL to create your table with a vector column:

CREATE EXTENSION IF NOT EXISTS vector;

CREATE TABLE documents (
  id SERIAL PRIMARY KEY,
  content TEXT,
  embedding VECTOR(1536)
);

Step 2: Insert from TypeScript

import { Pool } from 'pg';

const pool = new Pool({
  connectionString: process.env.DATABASE_URL, // Your Neon DB URL
  ssl: { rejectUnauthorized: false }
});

await pool.query(
  'INSERT INTO documents (content, embedding) VALUES ($1, $2)',
  ['I love programming.', embedding]
);

🔍 Perform a Semantic Search

Let’s search for the top 5 documents semantically closest to a given input:

const result = await fetch('https://api.openai.com/v1/embeddings', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    input: "Coding is fun",
    model: "text-embedding-ada-002"
  })
});

const queryVector = (await result.json()).data[0].embedding;

const { rows } = await pool.query(`
  SELECT content, embedding <#> $1 AS distance
  FROM documents
  ORDER BY distance ASC
  LIMIT 5
`, [queryVector]);

<#> is the cosine distance operator in pgvector.
Smaller distance = higher similarity.

🚀 Final Thoughts

Embeddings are not just for ML engineers anymore. With a few lines of TypeScript and a PostgreSQL DB, you can build semantic search, recommendations, AI chat, and more.

All inside your favorite stack.

If you want a starter template using Next.js + Neon + pgvector + OpenAI, let me know, I’ll publish it on GitHub.

P.S: This post has been written via (JekyllPad)[https://www.JekyllPad.com]

How I Created My Own Background Jobs Server At Home in TypeScript

Arman @programmerByDay — Fri, 03 May 2024 00:30:03 +0000

There are very good cloud services available to create background jobs in Nextjs serverless environments (such as Vercel or Netlify), however, they have a big problem. There is a function timeout on each call and therefore you cannot have long-running background jobs in there.

That's why I decide to start my own background jobs server, but with a totally new approach. I wanted it use the same code but extract the job functions and run them in a docker container. It can be easily run on an old laptop or home PC.

1. Define job functions

I checked and compared multiple npm packages and decided to use Cron npm package for job functions. To install it,

npm i cron

Cron npm package, lets me to define functions and assign cron time string to run them. Therefore, it's a great choice for me.

Then, create a folder in your code called worker, and inside that create a file called run-jobs.ts

// run-jobs.ts

import { CronJob } from "cron";

export const mySpecialFunction = async () => {
  console.log("Function Started!");

  const job1 = CronJob.from({
    cronTime: "0 */2 * * *",
    onTick: async () => {
      console.log(`job1 started at ${new Date().toLocaleString()}`);

    /// DO WHATEVER YOU WANT TO DO HERE      

      console.log(`job1 finished at ${new Date().toLocaleString()}`);
    },
    onComplete: () => console.log("job1 ended"),
    start: true,
    timeZone: "Australia/Sydney",
  });
};

(async () => {
  console.log("Worker Started!");
  await mySpecialFunction();
})();

Now, you have a file that starts a function. You can define as many functions you want here, each with a different cron time string.

To learn more about how cron functions are defined take a look here

To learn more about how cron time string should be defined, use this crontab.guru tool

2. Extract functions code using Webpack

In order to run functions in a docker container, first I needed to extract them out of the code. There is no need to include all the codebase into the docker container. This way, your container will be as small as possible and can be run on a small Laptop or PC at home easily.

In order to use Webpack, first we need to install it:

npm install --save-dev webpack

You also need to install ts-loader package to be able to use typescript files in webpack:

npm install --save-dev ts-loader

Then, inside your worker folder, create a file called webpack.config.js :

const path = require('path');

module.exports = {
  mode: "development",
  entry: './run-jobs.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    alias: {
        '@': path.resolve(__dirname, '../src/'),
      },
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  target: 'node', // Important for Node.js specific modules
};

In this config file, we are telling webpack to start from 'run-jobs.ts' file from current folder path. It tried to extract the code (with all their dependencies) into a bundle or package defined in the 'output' section.

We added ts-loader plugin for webpack, so that it can work with Typescript files. Also, if you are using '@' in your import paths, you need to define where this '@' refers to. This is what I did in 'alias' section.

You can test this easily with running this command in your worker folder:

npx webpack

This should start webpack and based on the config we defined, extract the code require to run jobs and bundle them into a .js file called bundle.js in a folder called 'dist'.

3. Defining Docker Container

Creating a docker container is easy now since everything is ready. First create a file called 'Dockerfile' in worker folder:

FROM node:18.19.0

WORKDIR /app

COPY node_modules/ ./node_modules

COPY dist/* .

CMD ["node", "bundle.js"]

This file tells docker on what to do in order to create the docker container to run jobs. Remember that you cannot access any file outside of this folder in Dockerfile.

4. Run it!

Now, it's time to put everything together, create the docker and run it for the first time. Create a bash file called 'build-and-run.sh' and put these command in it:

rm -rf dist
rm -rf node_modules

(cd .. && npm i)
(cd .. && cp -r node_modules worker)

npx webpack

docker build -t my-jobs-img .

docker run --detach --rm --env-file .env --name my-jobs my-jobs-img

Couple of points:

You need to do npm install first so that all dependencies already exist before you run Webpack. Webpack expects to have access to all node_modules when you run it.
Docker cannot copy node_modules from outside folders, therefore I copy node_modules from upper-folder into this folder first.
Docker Build runs docker based on the Dockerfile we created before and creates the docker image for us.
Docker Run starts the docker in detach mode. Note that I copied my env file and referencing it to the docker container. This way all your environment variables will be available inside the container.
I like to use --rm so that when the container is finished/stopped, docker automatically deletes it, so that there is no name conflict in future runs.

5. Run It At Home

I'm not recommending it, but if you want to run it at home on an old laptop/pc, you just need to install docker on it, pull the code base on it, and run this shell script on it.

Voila, now you can have infinite number of jobs defined and you won't be bounded by Vercel serverless function timeout or any other platform :)

Let me know what you think about it, you can find me on Twitter (X) here

Top 5 Online Markdown Editors (2024)

Arman @programmerByDay — Thu, 04 Apr 2024 23:19:51 +0000

When I first embarked on my blogging journey on Github Pages, one of the biggest challenges I faced was finding the right markdown editor. With an array of options available, each boasting different features and functionalities, it was a bit overwhelming to choose the perfect fit.

Through trial and error, I've narrowed down the list to the top 5 online markdown editors that have significantly streamlined my writing process. In this post, I'm sharing these gems with you, hoping they'll make your content creation as enjoyable and efficient as they have made mine.

1. JekyllPad Markdown Editor

I started building JekyllPad when I felt there is not one that fits my needs.

JekyllPad.com stands out as an innovative online markdown editor, specifically tailored for Jekyll blogs hosted on GitHub Pages. It redefines the blogging experience by providing a user-friendly, intuitive interface, making it accessible for both beginners and seasoned developers.

Its WYSIWYG markdown editor simplifies content creation, allowing users to focus on their writing while the tool takes care of the technical details.
Key features of JekyllPad include seamless media integration, which enables easy addition of images and videos to enrich your content. It also offers efficient image gallery management, enhancing the visual appeal of your blogs.
The direct syncing with GitHub ensures that your work is always up-to-date and securely stored. JekyllPad's commitment to simplicity and efficiency makes it arguably the best markdown editor on the internet for Jekyll users.

For a detailed look at all the features and to experience JekyllPad yourself, visit JekyllPad.com.

2. Editor.md

Editor.md is an open-source online Markdown editor that is feature-rich and versatile. It supports Standard Markdown, CommonMark, GFM (GitHub Flavored Markdown), and Markdown Extras, making it highly adaptable for various markdown needs.

Editor.md stands out with its full-featured capabilities including real-time preview, image upload, code syntax highlighting, and support for LaTeX expressions, Flowchart, and Sequence Diagram.

It's ideal for those who need a comprehensive markdown editor that is compatible across major browsers and integrates well with different workflows.

3. StackEdit

StackEdit is a powerful online markdown editor perfect for writers, bloggers, and anyone needing a robust tool for their markdown needs.

Its user-friendly interface and rich set of features, including live preview, synchronization with cloud services, and collaborative writing capabilities, make it a top choice.

Whether you're drafting a blog post or taking notes, StackEdit offers a seamless and efficient writing experience.

4. Dillinger

Dillinger is an impressive cloud-enabled, mobile-ready markdown editor, ideal for those constantly on the move.

It allows you to write and export markdown documents directly from your browser. The editor supports various cloud services for saving and retrieving your documents, making your writing accessible anywhere.

Dillinger's simplicity and ease of use make it a great choice for markdown enthusiasts of all levels.

5. Typora

Typora stands out as a minimal markdown editor that provides a seamless live preview feature.

It removes the preview window, mode switcher, and syntax symbols of markdown source code, offering a clean and immersive writing experience.

Typora supports images, lists, tables, code fences, and more, making it a versatile tool for writing. It's ideal for those who prefer a distraction-free environment to focus solely on their writing.

Conclusion

As I wrap up this list, I hope my journey through discovering these markdown editors helps you find your perfect match. Each editor has its own charm and set of features that cater to different writing styles and needs.

Remember, the right tool can transform your writing experience from tedious to terrific. So, dive in, try them out, and see which one resonates with your creative flow!

How to Host an External Blog on Your Site's /blog URL

Arman @programmerByDay — Thu, 28 Mar 2024 04:53:52 +0000

Having a blog as part of your website is like opening a window into the heart of your business or passion project. It’s not just about sharing ideas; it’s a powerful tool to connect and grow. Especially when it’s located right on your site, under the easy-to-remember /blog URL. This isn't just good for your audience; it's great for search engines too.

Search engines love fresh content. A blog that's part of your site means there's always something new for them to index. This can boost your site's visibility and lead more people to discover what you have to offer. Whether you’re sharing insights, tips, or stories, each post helps paint a picture of what makes your work unique.

Now, imagine having an external blog on your website. This could be a blog you've started on WordPress, Medium, or even GitHub Pages. \
Integrating this into your site could bring all sorts of benefits. It means you can tap into the features and ease of use these platforms offer while keeping your audience close to home.

Your readers won't have to hop between sites to catch up on your latest posts. Everything’s right there, under your /blog URL, making for a smoother, more cohesive user experience. On top of that, You'll get SEO juice for your website on every content you publish.

Understanding the Challenge

Many website owners want their blog to live under the easy-to-remember /blog URL but find the process challenging. Why is that?

Well, every piece of your website needs to fit perfectly to create a smooth, enjoyable experience for your visitors. When it comes to adding a blog, especially one that's hosted externally on platforms like WordPress, Medium, or even GitHub Pages, the fit needs to be just right.

The biggest hurdle? Ensuring a cohesive user experience and seamless integration. Your blog isn't just a collection of posts; it's a vital part of your website's identity. When visitors click from your homepage to your blog, they shouldn't feel like they've left your site. The design, navigation, and overall feel should be consistent. This unity is crucial not just for user experience but from an SEO standpoint as well.

Speaking of SEO, let's talk about why hosting your blog as a subdomain (like blog.yoursite.com) might not be the best idea. While it might seem like a simple solution, search engines like Google treat subdomains almost like separate websites. This means that all the hard work you put into your blog posts—those keywords you've researched, the quality content you've created—doesn't directly contribute to the SEO authority of your main website domain. Instead, hosting your blog in a subdirectory (like yoursite.com/blog) ensures that your main site benefits from every visitor, every link, and every bit of recognition your blog receives.

Achieving this seamless blend of blog and website, where each blog post reinforces the strength of your main domain, is the key to overcoming the integration challenge. It's about making sure every piece of the puzzle fits perfectly, enhancing both the user experience and your site's SEO performance.

Solutions Overview

When you decide to host an external blog on your website's /blog URL, you're taking a significant step towards enriching your site's content and SEO. But how do you go about it? There are two main paths you can take, each suited to different kinds of website management scenarios. Let's break them down.

If You Have Control of the Web Server \
If you're in charge of your website's hosting web server—think Apache, Nginx, or similar platforms—you have the freedom to configure the server settings directly. This path allows you to set up reverse proxies, redirects, and other server-level configurations to seamlessly integrate your external blog into your main site. It's a bit like having the master keys to the building; you can set up the space exactly how you like it.
If You Have Control of the Source Code of Your Website \
For those who have direct control over their website's source code but might not have access to server settings, there's another route. This approach involves integrating the blog into your site through coding solutions—embedding, API calls, or even custom scripts that pull in your blog content to the /blog section of your site. It's akin to crafting the interior of your space to make it welcoming and functional, even if you can't alter the building itself.

Each of these paths has its set of tools and techniques, which I'll dive into in the next sections. Whether you're a server guru or a code wizard, there's a way to make your blog feel right at home on your website.

Integrating Blog using Web Server

Incorporating an external blog into your website's /blog URL can be seamlessly achieved through the strategic use of web server configurations, specifically with servers like NGINX and Apache. These powerful tools have the capability to act as intermediaries, or proxies, funneling requests from your visitors directly to an external blog platform without the user ever noticing a difference.

Imagine you're at a busy train station, but instead of trains, you're directing internet traffic. This is what a reverse proxy does. It's like a traffic director for the web. When someone visits your blog, the reverse proxy decides where to send that request on your network. This way, you can have your blog somewhere else but make it appear as if it's part of your main website, under the /blog URL.

What is a Reverse Proxy and How It Works?

A reverse proxy sits between the internet and your web server. Think of it as a middleman. When someone types in your website looking for your blog, the reverse proxy takes this request and forwards it to where your blog is actually hosted, like on WordPress, Medium, or GitHub Pages. Then, it takes the blog's response and sends it back to the visitor. All of this happens behind the scenes, making your blog feel like an integral part of your website without actually being on your main server.

NGINX Reverse Proxy

NGINX is a popular choice for setting up a reverse proxy due to its efficiency and flexibility. To host an external blog under the /blog URL with NGINX, you would use a configuration snippet like this:

location /blog/ {
    proxy_pass https://your_external_blog_address;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

This tells NGINX that whenever someone visits yourwebsite.com/blog, it should forward those requests to https://your_external_blog_address and then serve that content back to the visitor as if it were coming from your own site.

Apache Reverse Proxy

Apache, another widely used web server, can also be configured to serve an external blog under the /blog URL. An Apache reverse proxy configuration might look like this:

ProxyPass "/blog" "https://your_external_blog_address"
ProxyPassReverse "/blog" "https://your_external_blog_address"

This setup directs any traffic going to yourwebsite.com/blog to your external blog platform and then back to the user, making the blog appear to be hosted on your main site.

Reverse Proxy in IIS

For those using Windows servers, Internet Information Services (IIS) can also be configured to use a reverse proxy. With the URL Rewrite module and Application Request Routing, you can set up a rule like:

<rule name="ReverseProxyInboundRule1" stopProcessing="true">
    <match url="blog/(.*)" />
    <action type="Rewrite" url="https://your_external_blog_address/{R:1}" />
</rule>

This IIS configuration forwards all requests from yourwebsite.com/blog to the external blog, ensuring visitors access your blog content under your main website’s URL.

Integrating Blog using Source Code

Integrating an external blog into your website's /blog URL through source code manipulation involves setting up a proxy within your application. This method allows you to route requests for your blog through your main application, fetching and displaying content from the external blog platform as if it were part of your original site. Let's explore how this can be achieved in various server-side and client-side frameworks.

Next.js

To integrate an external blog into your Next.js application under the /blog URL using Next.js rewrites, you can leverage the rewrites feature in your next.config.js file. This approach does not require server-side API routes but rather a configuration that tells Next.js to proxy requests for /blog to your external blog platform. Here’s how you can do it:

Open or create the next.config.js file in the root of your Next.js project.

Add a rewrites async function to define custom rewrite rules.
Here is an example configuration that redirects requests from /blog to https://external-blog.com:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug*',
        destination: 'https://external-blog.com/:slug*' // Proxy to External Blog
      }
    ]
  },
}

This setup ensures that any request to yoursite.com/blog/_ will be proxied to the corresponding path at https://external-blog.com/_, seamlessly integrating the external blog content under your site’s /blog path without changing the URL in the browser.

Remember, while rewrites are powerful for seamlessly integrating content, they do not enable server-side rendering of the proxied content. The content will be fetched client-side, which means the initial HTML response will not contain the blog content. This approach is great for user experience but consider SEO implications, as search engines may not index the proxied content as part of your site.

Next.js Server-Side

Next.js supports API routes, which you can use to create a proxy endpoint for your external blog.

Create a new API route in your Next.js project under pages/api/blog/[...slug].js.
Use fetch to call the external blog API and return the blog content.

// pages/api/blog/[...slug].js
export default async (req, res) => {
  const response = await fetch(`https://external-blog.com/${req.query.slug.join('/')}`);
  const data = await response.text();

  res.setHeader('Content-Type', 'text/html');
  res.send(data);
};

C# ASP.NET Core

ASP.NET Core can use middleware to forward requests to an external blog.

Create a middleware that intercepts requests to /blog and forwards them.

// In your Startup.cs
app.Use(async (context, next) =>
{
    if (context.Request.Path.StartsWithSegments("/blog", out var remainder))
    {
        var client = new HttpClient();
        var externalResponse = await client.GetAsync($"https://external-blog.com{remainder}");
        var content = await externalResponse.Content.ReadAsStringAsync();
        context.Response.ContentType = externalResponse.Content.Headers.ContentType.ToString();
        await context.Response.WriteAsync(content);
    }
    else
    {
        await next();
    }
});

Client-side Frameworks (React, Vue.js, Angular, and Svelte)

For client-side frameworks, integrating an external blog typically involves making an AJAX request to the external blog's API and rendering the content. Due to the similar nature of these frameworks in handling HTTP requests, the approach is somewhat uniform:

Use the native fetch API or a library like axios to request the blog content.
Set up a route in your application (using React Router, Vue Router, etc.) for /blog.
In the component mounted to the /blog route, make the request to the external blog and render the response.

Example in React (applicable concept for Vue, Angular, Svelte with respective syntax adjustments):

// BlogComponent.jsx in React
import React, { useEffect, useState } from 'react';

function BlogComponent() {
  const [blogContent, setBlogContent] = useState('');

  useEffect(() => {
    fetch('https://external-blog.com/api/posts')
      .then(response => response.json())
      .then(data => setBlogContent(data.content));
  }, []);

  return (
    <div dangerouslySetInnerHTML={{ __html: blogContent }} />
  );
}

For each framework, adapt the fetching and state management according to its conventions. The key is to fetch the blog data from the external source and integrate it seamlessly into your app's component structure, making the external content appear as though it's a native part of your application.

Integrating Blog using Feed or Its Url

Integrating a blog into your website doesn't always mean you have to host the blog yourself. Sometimes, you might find it easier or more convenient to pull in content from an external blog. Two popular methods for doing this are using RSS feeds and iframes. Both offer unique advantages and considerations, especially when it comes to implementation and SEO.

Using RSS Feeds

RSS stands for Really Simple Syndication. It's a type of web feed that allows users and applications to access updates to online content in a standardized, computer-readable format. By using the RSS feed of an external blog, you can display its latest posts directly on your website.

To do this, you'd typically fetch the RSS feed programmatically and then parse the XML to render the blog posts in your site's HTML. This method keeps your site content fresh and ensures visitors have access to the latest posts without needing to navigate away from your site.

Here's a simplified example in JavaScript:

fetch('https://external-blog.com/rss')
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  .then(data => {
    const items = data.querySelectorAll("item");
    let html = "";
    items.forEach(el => {
      html += `<article>
                <h2>${el.querySelector("title").textContent}</h2>
                <p>${el.querySelector("description").textContent}</p>
              </article>`;
    });
    document.getElementById("blog-posts").innerHTML = html;
  });

Using Iframes

An iframe, or inline frame, is an HTML element that allows an external webpage to be embedded within your own webpage. This means you can simply place the external blog directly on your website by using its URL. However, while iframes are easy to implement, they have limitations, especially regarding SEO. Content within an iframe is considered part of the external site, not your site, so it doesn't contribute to your site's SEO.

Here's how you might embed an external blog using an iframe:

<iframe src="https://external-blog.com" width="100%" height="600px"></iframe>

Note that, while iframes are convenient for embedding content like videos or external blogs, they're not ideal for SEO. Search engines typically crawl and index the content of the parent page, not the content within the iframe. This means that even though your site visitors can see and interact with the blog content through the iframe, this content doesn't directly boost your site's search engine ranking.

Tips for Seamless Blog Integration into Your Website

Integrating a blog into your main website isn't just about plugging in content; it's about creating a seamless experience for your visitors. This means ensuring that your blog feels like an integral part of your site, not just an afterthought. Here are some tips to help you achieve this.

Consistent Look and Feel

Your blog and website should look like they belong together. This goes beyond just slapping your website's header on top of your blog posts. You'll want to match the font styles, color schemes, and even the button designs between your blog and the main site. If your website uses a minimalist design with lots of white space, your blog should follow suit. Consistency in design makes your whole site feel professional and cohesive.

Smooth Navigation and Linking

Navigation between your blog and the main site should be effortless. Ideally, visitors shouldn't even have to think about whether they're on your blog or another part of your site. Here are a couple of ways to achieve this:

Use Relative URLs: When linking to different parts of your site, use relative URLs (like /contact) rather than absolute paths (like www.yoursite.com/contact). This ensures that links will work correctly regardless of the subdomain or domain changes and helps keep the user experience smooth and consistent.
Unified Navigation Bar: Ensure that your site’s navigation bar is present across all pages, including blog posts. This makes it easy for visitors to explore other sections of your site without having to backtrack.

Engaging User Experience

Finally, consider the overall user experience. Your blog should load quickly, be easy to read, and be accessible on both desktop and mobile devices. Engaging images, videos, and other multimedia elements can also help to break up text and make your content more enjoyable to consume.

Common Pitfalls and How to Avoid Them

Integrating an external blog into your main website can be a game-changer for content diversity and engagement. However, there are common pitfalls that can hinder your success and impact your site's SEO negatively.

Let's explore how to navigate these challenges and ensure your blog enhances your website's overall search engine ranking.

Avoid Duplicate Content

One of the biggest risks when integrating an external blog is creating duplicate content. Search engines penalize sites that publish content that exists elsewhere on the web. To avoid this, ensure that your integrated blog content is unique to your site or use canonical tags to indicate the preferred URL of content that's published in multiple places.

Maintain Loading Speed

Another critical factor is your website's loading speed. Integrating content from external sources can slow down your site, which negatively affects user experience and SEO. Optimize images, cache blog content, and use lazy loading to keep your site speedy.

Ensure Mobile Responsiveness

With the majority of users accessing the web through mobile devices, your integrated blog must be mobile-friendly. A responsive design ensures that your blog looks great and functions well on all devices, which is crucial for keeping visitors engaged and improving your SEO.

Keep Navigation Seamless

The integration should be seamless, with blog posts easily accessible from your main site. Avoid using absolute URLs that can create a disjointed experience. Instead, use relative paths that keep users within your domain, strengthening your site's internal linking and SEO.

Regularly Update Content

Fresh, regularly updated content is key to driving traffic and improving SEO. Ensure that your blog integration allows for easy updates and additions. This keeps your site dynamic and interesting for return visitors and search engines alike.

Conclusion

Integrating an external blog onto your website’s /blog URL can significantly enrich your site's content and enhance its SEO. By thoughtfully choosing how to host and display your blog, you can ensure that it serves as a dynamic extension of your main site, attracting more visitors and improving your search engine rankings.

I've explored several methods for integrating a blog for my Jekyll Blogging Editor and CMS, from RSS feeds and iframes to web server proxies and direct source code adjustments. Each approach has its unique advantages and considerations, especially regarding SEO. The key is to experiment with these methods to discover which one aligns best with your website's goals and your audience's needs.

I encourage you to try these techniques and see how they impact your site. And I'd love to hear from you! If you've experimented with integrating an external blog, or if you've faced any challenges along the way, reach out to me on social media, especially Twitter (X). Sharing your experiences can help others in the community make informed decisions and navigate their integration journeys more smoothly.

How to Easily Start Blogging in 2023

Arman @programmerByDay — Tue, 12 Dec 2023 20:50:02 +0000

Blogging has evolved significantly, and today's landscape offers various platforms to share your voice. Among these, Jekyll combined with GitHub Pages stands out for its simplicity, power, and cost-effectiveness.

In this comprehensive guide, we’ll walk you through the steps of setting up your blog using Jekyll, GitHub Pages and JekyllPad, perfect for beginners and seasoned bloggers.

Understanding Jekyll and GitHub Pages

What is Jekyll?

Jekyll is a popular static site generator, transforming plain text into static websites and blogs.

It's widely praised for its simplicity, speed, and flexibility, allowing customization without the bloat of traditional CMS platforms.

Ideal for bloggers who prefer control and efficiency, Jekyll is a cornerstone in the world of static site generation.

Why GitHub Pages?

GitHub Pages (github.io) provides a free hosting solution, seamlessly integrating with Jekyll.

It’s a perfect match for developers and bloggers who already use GitHub. Offering robust performance and ease of use, GitHub Pages makes publishing your Jekyll blog a hassle-free experience.

Setting Up Your Jekyll Blog

Creating a GitHub Account

If you’re new to GitHub, setting up an account is your first step. It’s straightforward: visit GitHub’s website, sign up, and you're ready to go.

A GitHub account not only gives you access to hosting on GitHub Pages but also opens up a world of possibilities for collaboration and version control.

Using Jekyll Now for Quick Setup

By forking the Jekyll Now repository on GitHub, you can bypass the complex configuration and jump straight into blogging.

This approach is perfect for those who want to focus more on content than coding.

Customizing Your Jekyll Blog

Customizing your Jekyll blog is easy. Start by editing the _config.yml file to personalize settings like your blog’s title and description.

You can also choose themes and customize layouts to match your style. Remember, changes you make are reflected once you push them to GitHub.

Understanding Markdown

Markdown is the heart of Jekyll’s content creation. It’s a simple markup language that lets you format text using plain text.

For instance, # for headers or * for bullet points. It's straightforward, and there are plenty of online resources to get you started.

For example, take a look at this Markdown cheat sheet.

Start Using JekyllPad

JekyllPad.com is an online Jekyll WYSIWYG editor and CMS for Jekyll blogs hosted on Github Pages.

It takes the burden of dealing with Markdown directly of your shoulders and gives you tools to write, manage, tag and share your posts.

Writing Your First Post

Creating your first post in JekyllPad is easy and exciting.

Log into JekyllPad with you Github account
Navigate to the Posts menu
Click on New Post button. This will open an empty editor for you.
- File name follows the naming convention YYYY-MM-DD.md. You can modify that to whatever you want.
Start writing your content
Click on Save. Your post is now committed directly to Github and published.

Advanced Jekyll Blogging Tips

SEO Best Practices

Optimizing your Jekyll blog for search engines is crucial. Focus on quality content, use relevant keywords, and ensure your site has a clean, responsive design.

Utilizing SEO-friendly URLs and meta tags in your Jekyll configuration can also significantly boost your visibility.

Enhancing Your Blog with Plugins

Jekyll supports various plugins that can extend functionality, from SEO tools to feed generators.

Explore Jekyll’s plugins directory to find ones that suit your needs. However, remember that GitHub Pages has some limitations on custom plugins for security reasons.

Maintaining and Updating Your Blog

Regular Updates

Keeping your blog updated with fresh content is key to engaging your audience and improving SEO.

Establish a consistent posting schedule and stick to it, whether it's weekly, bi-weekly, or monthly.

Regular updates keep your blog relevant and visitors coming back.

Keeping Jekyll and Dependencies Updated

Just like any software, Jekyll and its dependencies need to be kept up-to-date.

Regular updates ensure security, introduce new features, and improve performance. Check for updates periodically and follow the Jekyll update guide to keep your blogging platform running smoothly.

Conclusion

Starting a blog with Jekyll and GitHub Pages is a journey that combines the simplicity of static site generation with the power of web development.

It’s a pathway to a more controlled, cost-effective, and enjoyable blogging experience. JekyllPad has been built and released so that it makes this journey even more enjoyable.

Dive in, explore the possibilities, and start sharing your unique voice with the world.

Top 5 Playlist AI Tools (2023)

Arman @programmerByDay — Tue, 12 Sep 2023 11:55:27 +0000

Music is one of the most powerful forms of expression and entertainment. Whether you want to relax, work, study, or party, there is a playlist for every mood and occasion. But how do you find the perfect playlist for your needs? How do you discover new songs and artists that match your taste and preferences? How do you create your own playlists without spending hours browsing through millions of tracks?

Artificial Intelligence (AI) has revolutionized many aspects of our lives, and music is no exception. Playlist AI tools are the latest innovation in the music industry, offering a personalized and enhanced listening experience. These tools use advanced algorithms to curate playlists based on your preferences, mood, and listening history. They can introduce you to new artists, help you rediscover old favorites, and even create the perfect soundtrack for your day. Here are the top 5 Playlist AI tools in 2023 that are changing the way we listen to music.

1. Taranify

Taranify stands out as the most unique tool on this list. It's not only a playlist Ai, but a mood-based recommendation ai.

This innovative Spotify Playlist AI discovers the perfect tunes to match your current mood and preferences. It's an experimental tool designed to simplify playlist creation by generating playlists according to your mood.

If you're looking for a tool that offers a unique approach to playlist creation, Taranify is worth checking out. It can also recommends Netflix shows and Books based on how you are feeling at the moment.

2. PlaylistAI

PlaylistAI is another impressive tool that uses AI to generate music playlists.

You can describe what you want to listen to, and PlaylistAI will make you a playlist on Spotify or Apple Music. It also offers unique music discovery experiences like instant playlists for music festivals.

With its user-friendly interface and advanced features, PlaylistAI is a great choice for both casual listeners and music enthusiasts.

3. Playlistable

Playlistable is an AI-powered music companion that creates personalized playlists based on your preferences.

It manages your playlists effortlessly and integrates seamlessly with Spotify. What sets Playlistable apart is its ability to revolutionize your music experience by helping you discover new artists and songs.

4. Uppbeat AI Playlist Generator

The Uppbeat AI Playlist Generator uses advanced AI technology to understand any prompt you give it and generates a customized playlist of the most suitable royalty-free music from the Uppbeat music catalog.

This tool is perfect for content creators looking for copyright-free tracks for their projects.

5. PlaylistGenius AI

Last but not least, PlaylistGenius AI simplifies playlist creation by using song suggestions from ChatGPT and Spotify Web API to generate playlists according to your input. It's a handy tool for those who want a more hands-on approach in curating their playlists.

Conclusion

In conclusion, these top 5 Playlist AI tools offer a new way of experiencing music.

They take into account your personal preferences and use advanced algorithms to curate playlists that cater specifically to your taste.

So why not give them a try and see how they can enhance your listening experience?

The Magic of Mood-Based Playlist Ai

Arman @programmerByDay — Tue, 29 Aug 2023 00:06:22 +0000

Music is not just a collection of melodies and harmonies. It's a universal language that transcends borders, cultures, and, most importantly, our emotions. We've all experienced that overwhelming surge of nostalgia when a certain song plays or felt instantaneously happy listening to an upbeat track.

Bridging Beats and Emotions

Why does a melancholic tune on Spotify make us teary, and an energetic one uplift our spirits? The answer lies deep within our brain's neural pathways. When music enters our ears, it isn't merely processed as sound. Our brains interpret these melodies and harmonies, leading to emotional responses. Essentially, music becomes an emotion-translator.

A Dance of Dopamine

When you stumble upon a Spotify playlist that matches your mood perfectly, there's science at play. Listening to music releases dopamine, the feel-good neurotransmitter. The right song can literally bring joy, thanks to this neurochemical magic. So, when Taranify recommends a mood-based playlist, you're in for a dopamine treat!

AI: The Modern Maestro

Enter Taranify Playlist AI, the technology making waves in the music world. Gone are the days of manually curating songs. With advanced algorithms, platforms like Taranify can gauge your mood and instantly curate a Spotify playlist tailored just for you. Think of it as having a personal maestro, understanding your feelings and setting them to music.

The Cultural Canvas

Music and emotions aren't a new affair. Historically, different cultures have used music to express feelings, celebrate, or mourn. From the tribal beats of ancient civilizations to the grand orchestras of the Renaissance, music has always mirrored human emotion. Platforms like Spotify give us a modern twist, offering an endless cultural canvas of tracks to explore.

The Power of Personalization

Imagine having a Spotify playlist that understands not just your musical taste, but your heart's state. That's the power of mood-based playlists. By aligning with your emotions, it creates a deeply personal listening experience. Every song becomes a reflection of your inner world, making each note resonate deeper.

From Moods to Melodies

As we progress in the world of AI and tech, the bond between our moods and melodies will only strengthen. Services like Taranify are at the forefront, pioneering a movement where music is more than just sound—it's a mirror to our souls. A world where every emotion has its own soundtrack is not far away.

To Conclude: An Emotional Encore

Music is an ever-evolving journey, and with the advent of technologies like Taranify Mood AI, we're entering an era of emotional encore. So, next time you dive into a Spotify playlist, remember, it's not just tunes you're listening to but a reflection of your very emotions.

Vertical Scaling vs. Horizontal Scaling: Explained Simply

Arman @programmerByDay — Mon, 31 Jul 2023 04:40:59 +0000

Scalability is one of the aspects to make any system future-proof. In this blog post, I will share my learnings about what the scaling is in software deployment, the difference between vertical scaling and horizontal scaling, and when to use each one.

What is scaling?

An app or an API is useless unless it is deployed to a publicly available server. As you know, servers are computers with specifically designed hardware. These hardwares (CPU, Memory, Storage, processing units, GPUs, etc.) are designed to be switched on all the time, and endure under severe workloads and be durable. However, they have one drawback. They are not limitless. They can only process so much work, and when the workload is increased, they won’t be able to process in a timely manner. This is when scaling comes into the play.

Scaling means increasing the capacity of a server with the goal of being able to process more requests/workloads. There are two ways of doing it.

Vertical Scaling

Vertical Scaling is when we swap a server’s hardwares with another hardware with higher capacity. For example, we swap the Memory or the storage to a bigger one. Or change the CPU with another one with more cores. When we change the server, in a way that it becomes bigger with more resources and capacity, this is called Vertical Scaling.

In today’s world, most of the servers are created using Virtual Machines. Virtual machines are configurables and therefore each parts of them (such as CPU or memory or storage) can be increased or decreased via a configuration setting.

Horizontal Scaling

It is not always possible to add a bigger resource to a server. However, sometimes we might be able to increase the number of servers. When we increase the number of servers, in a way that they collectively process more requests, this is called Horizontal Scaling.

As I said, most servers are deployed as Virtual Machines, and duplicating a virtual machine is a simple task these days. However, with more servers, comes more complexity. Requests need to be distributed among multiple servers. This is usually done by a load-balancer server that sits in front of all the servers to do this distribution.

Vertical Scaling vs. Horizontal Scaling

The are differences in terms of implementation, technicality, costs and etc. I’ve captured it in a simple table below:

	Vertical Scaling	Horizontal Scaling
How it works	Increases the capacity of a single server	Increases the number of servers usually each with the same capacity
Pros	Easier to implement	Infinite scalability / Can scale down easily when the load is less / More cost effective
Cons	Scalability is limited to available hardwares in the market / Can be more costly in the long run / It takes time to spin up a new server with higher capacity and switch it with the current one / Can cause disruption to the users	-- More complex to implement (needs a load-balancer) / It Is not suitable with legacy system (e.g. sticky sessions issue)
Best use case	When workload has increased and it is predicted to stay that high from now on OR for a long time	When the workload can increase/decrease at any time

Conclusion

Vertical Scaling is when we increase the resources/hardwares in a single server, whereas Horizontal Scaling is when we increase the number of servers. Each has its own merits and pitfalls. I'd recommend to lean towards horizontal scaling for green field projects. Even if you are working on a legacy system, try to change it in a way that it is more deployable with horizontal scaling.

How to Run dotnet apps Like npm run on Every Platform

Arman @programmerByDay — Tue, 29 Nov 2022 07:00:00 +0000

Instead of publishing your dotnet application for each platform separately, there is a way to publish your app once as platform agnostic and run it on every platform easily.

We all know, dotnet applications can be run on any platform. Be it a windows machine, macOS (both x64 and arm64 architectures) and linux, dotnet can run our application. Although I will explain how to publish an executable of your application for any platform, there is a way to publish your app platform agnostic. A platform agnostic is when you publish your application once and you can run it on every platform. This is similar to the same approach npm has been doing since the beginning.

How to publish a dotnet application for different platforms?

dotnet cli has a nice parameter for that:

dotnet publish -r <runtime-ID>

runtime-ID tells dotnet which platform this application is going to run on. Common IDs are win-x64 , osx-x64 , osx-arm64 and linux-x64. To see the full list of all runtime IDs you can publish to, check here.

A few examples I usually use, are:

dotnet publish -r win-x64 -p:Configuration=Release -p:DebugType=None -p:DebugSymbols=false -p:Version=1.0.1

dotnet publish -r osx-x64 -p:Configuration=Release -p:DebugType=None -p:DebugSymbols=false -p:Version=1.1.25

How to publish platform-agnostic?

That's a good question. There is a simple way to do that, but there is an issue with that. So, you can publish the app in platform agnostic way, by not mentioning -r option in dotnet publish. Here is an example:

dotnet publish -p:Configuration=Release -p:DebugType=None -p:DebugSymbols=false -p:Version=1.0.1

When you don't mention a specific runtime platform, dotnet publish generates an executable for the current platform you are on as well as the dll file for the app. Even if it is a console application, it still generates a dll for it. The executable file is platform-dependant but the dll file is not. But as you know, you cannot run a dll file directly by clicking on it. So how do end users get to run the application by using its dll file? here is how:

dotnet <dll filename>

For example:

dotnet ConsoleApp1.dll

This is a very similar pattern to how npm applications and packages are run via npm run

How and What to Release to end users?

What I like to do is that I publish my app in runtime-agnostic way, then I remove any executable it might have generated and keep only dll files. Then I can easily zip this folder and ship it to end users or other developers. I tend to put a small README.md file to explain how they should run it.

What would make it better?

As you've seen, when we publish our .NET application in runtime agnostic manner, it generates a dll file. In order to run it we have to give the whole filename and its extensions to the dotnet CLI. This is a little bit bothersome, as a .dll file is not usually an executable file and this can confuse users or developers. I wish there was a way to remove this extension completely and just use the filename.

I haven't been able to find any solution for that, if you know, please share it with us in the comment section.

What is GraphQL? How to Use it in ASP.NET Core WebApi? Let Me Explain Simply…

Arman @programmerByDay — Thu, 06 May 2021 08:50:38 +0000

From ASP.NET Web Forms to ASP.NET AJAX, then ASP.NET MVC and ASP.NET Web API, building an API has evolved massively. An API started from being a function you can run on another computer, evolved massively to accommodate what today's applications need.

Throughout the projects I have been involved in, I have always worked with REST APIs. REST API architecture is simple and clean, it's easy to pick up for new developers and it is less mistake-prone since each and every API is going to have the same structure.

In a typical REST API, you would have a separate endpoint for each object type. That endpoint, based on your implementation, would provide GET, POST, PUT, PATCH, DELETE actions. In addition to that, they could get some query parameters, to filter the data (for example based on an ID or date, etc.). But when you would get the result, you would get the whole object. And that can be a bigger headache when you are using Domain-Driven Design architecture and dealing with millions/billions of aggregate objects.

Entering GraphQL...

GraphQL is a query language for APIs. GraphQL gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql.org

In 2012, Facebook built GraphQL to address the above issue. GraphQL, typically has one endpoint. And, that endpoint accepts a query. So far, it is not that fascinating, but the actual beauty is in the "query" I just mentioned. In the query, you mention what type (or types) you want, what property values you'd want to use as filter, and lastly, what properties of those types you'd like to get back.

How does GraphQL work?

As you guessed, you can request for one or more types, you can search/filter based on any property and you can only get the properties you are interested in. The query is in JSON format and you'd get the result back in JSON format. This can save you multiple roundtrips to the server and decrease your server load as well as network traffic and latency.

I know you are excited to see an example of a query .. so let me show you:

Query

query PersonAndFriends {
   person (id: 2001) {
      name
      friends {
         name
      }
   }
}

Result

{
   "data": {
   "person": {
       "name": "Rose DeWitt",
       "friends": [
       {
          "name": "Jack Dawson"
       },
       {
          "name": "Cal Hockley"
       },
       {
          "name": "Ruth DeWitt"
       }
     ]
    }
  }
}

Above, I defined a query with the name "PersonAndFriends", I'm asking for a person with ID=2001, and I am interested to get back its name and friends fields. Within friends (which can be an array), I'm only asking to get back name field. On top of that, the shape of a GraphQL query closely matches the result of it. It's cool, isn't it?

There are 3 types of query. "query" itself, "mutation" and "subscription". query is your way to request for data, mutate is the way to change the data (such as create a new record, update it, delete it).

Queries accept variables so that you don't need to manipulate string to put your arguments dynamically.

Query with variables

query PersonQuery($id: ID!) {
  person(id: $id) {
    name
  }
}

{
  "id": 2001
}

{
"id": 2001
}

Result

{
  "data": {
    "person": {
      "name": "Rose DeWitt",
    }
  }
}

Internally, The query and each field of types is backed by a separate function called resolver which is provided by the developer to GraphQL. Execution of a query starts by calling the resolver function of the query with passed-in arguments. If the function returns an object, GraphQL will execute its resolver passing in the object. For each selected field, GraphQL calls their resolver functions to get their values. This process continues until all resolvers return Scalar types and not objects. It is as if GraphQL traverses a graph from its root until it covers all the leaves, hence the name Graph Query Language.

How to use GraphQL?

In order to use GraphQL, two things should be provided to build a GraphQL server. Firstly, object types, what data can be queried, and how it can be queried. Defining types and schemas, help GraphQL to validate queries and execute them. Secondly, resolver functions for each type and its fields.

Defining types

type Query {
  actor(episode: Episode): Cast
  car(id: ID!): Vehicle
}

type Cast {
  id: ID!
  name: String!
  episode: [Episode!]!
  height(unit: LengthUnit = METER): Float
}

enum Episode {
  PILOT
  ONE
  FINALE
}

"!" comes after the field type and shows that field is non-nullable and when you query that field, it will always have a value. [ and ] represent an array. Fields can have arguments, and arguments can have default values(e.g. height field). Built-In scalar types can be Int (32-bit integer), Float, String, Boolean and ID (which is non-human-readable and unique string).

The query structure is actually another type named "Query". It defines, what fields can be queried, and what arguments each field can take. Also, it defined what fields and arguments are non-nullable. Mutation is also defined in the same way.

GraphQL allows you to define input object types which are objects that you can pass as an argument to a query or mutation. Input types need to be defined separately with input keyword. Input types can have relationship with other input types but cannot refer object types or have arguments.

input FoodReviewInput {
  stars: Int!
  comment: String
}

Defining resolver functions

It's quite straight-forward, you start with a function to resolve the query:

Query: {
  actor(obj, args, context, info) {
    return context.db.getActorByID(args.id).then(
      response => new Actor(response)
    )
  }
}

Each function has four arguments, obj is the object resulted from running the previous function, args is field or query arguments, context is a contextual object containing information like the logged-in user and etcetera, info contains information about the query and its types.

Just like that, you define the rest of the functions for types and fields:

Actor: {
  name(obj, args, context, info) {
    return obj.name
  }
Vehicle(obj, args, context, info) {
    return obj.vehicleIDs.map(
      id => context.db.getVehicleByID(id).then(
        response => new Vehicle(response)
      )
    )
  } 
}

But That seems to be a lot of work!

Yes, but the good news is, there are many libraries available that would take the complexity away from you. They take care of object definition, authorization, security, pagination, caching, etc. GraphQL website provides you with a list of libraries and tools you can use in your preferred programming language here.

How to use GraphQL in .NET Core?

I found hotchocolate library which does most of the work and creates a neat GraphQL server in no time. I found its tutorial quite succinct and to-the-point, you can find it here

Architect discussion: When to use GraphQL?

Like any other technology, GraphQL has its own pros and cons. When you want to make an architectural decision, you need to be aware of these pros and cons and make sure that this technology can do what you want to achieve. I found these points about GraphQL versus REST Api:

What you get:

Ask for what you need: As you know by now, in GraphQL you mention the fields you want to be returned to you, and that is one of the main benefits of using GraphQL. Especially if you are dealing with large aggregate objects and you need to transfer data over public internet (which incurs cost), This is very beneficial. Although REST API doesn't have this feature by itself, it is technically possible to use OData to query REST API. However, in my opinion, GraphQL is more like a standard for this and it's better to rely on a standard than a combination of technologies.
Solves n+1 problem: Imagine a situation where you get a root object (like a Person) and then loop through its Friends collection and send another request to fetch each Friend object separately. GraphQL solves this problem, since you can mention whatever you want in your query.
Combined Query: Combined queries are when you request for separate not-related objects in the same query. For example, you can write a query that returns persons and books. Normally you would have to make two separate API calls, but with GraphQL you can do it in one query.
API Versioning: GraphQL query and its result is in JSON format. Therefore, if there is any changes in the schema, JSON inherently handles that for you. And every subsequent systems that use your GraphQL endpoint, since they use JSON, it's safe for them as well. Obviously, if you delete/rename a field, that's still a breaking change.

What to watch out:

Caching: REST API is heavily based on how HTTP works, and HTTP has a nice caching mechanism. However, GraphQL needs a bit of more work to implement its own caching.
Harder with Microservice Architecture: When you have separate micro-services for different aggregates, in REST API, you can call separate URLs and get both objects. But in GraphQL, since you only deal with one endpoint, GraphQL needs to call those endpoints separately behind-the-scene, aggregate the data and send it back to you. Which can be not-ideal in some solutions.
Combined Query: Combined query is one of the great features, however, if you are not careful, it can expose some data to the users that should not have access to that part of the data.
Monitoring: Since REST API is based on HTTP protocol, there are many layers of monitoring already built around that. You can monitor and log your REST API calls inside and out. However, the monitoring tools for GraphQL is still thin and you need to consider what's available if monitoring and logging is a requirement for your solution.

How to learn more...

Volia! Thanks for reading.

How to Secure Your ASP.NET Core WebApi with Azure AD and OAuth 2.0

Arman @programmerByDay — Tue, 20 Apr 2021 12:54:15 +0000

Azure AD is a common way of access control these days. OAuth is a well-known protocol that is used and expected from APIs. I found it tricky to integrate my APIs with Azure AD. So I decided to explain it all in very simple terms in this post.

Twenty years ago, when Active Directory was part of Windows NT and Windows 2000 Server, I was no big fan of it. Nowadays, Active Directory (AD) is a core service offered in Microsoft Azure and it really is a comprehensive access management service. It offers various ways of Authentication, Single Sign-on (SSO), Business to Business authentication (B2B), Business to Customer/Guest Authentication (B2C), Application/API management, Device management and etc. On top of that, it provides conditional access rules and Multi-factor Authentication (MFA).

One of the common industry authentication standards these days is OAuth. OAuth is an open protocol for simple and secure authorization of web, mobile and desktop applications. It's widely used and expected and if any API doesn't have that, I'd say that's a big negative point. As I always say, best practices and standards help us to know how that part of the system works generally and how it's going to behave in different edge cases. No one has the time to study and learn how your API authentication mechanism works and how it's going to behave in different situations.

OAuth offers different authentication paths (which are called as Grant Types). Each Grant Type is designed for a specific situation. For example, client credential grant type is for when an application (such as an API or a mobile App) wants to authenticate itself to another system. If you want to read more about OAuth, I'd suggest to look here.

How to accept authenticated requests in your API?

Microsoft recommends using Microsoft.Identity.Web library, and it's a great library. It's super easy to secure controllers with this library and only let in signed-in requests.

In Startup.cs or where you have ConfigureServices method, add this:

 using Microsoft.Identity.Web; 

 public void  ConfigureServices(IServiceCollection services) 
 { 

 // Adds Microsoft Identity platform (AAD v2.0) support to protect this Api 
 services.AddMicrosoftIdentityWebApiAuthentication(Configuration); 

 services.AddControllers(); 
 }

And, in Configure method, add these middlewares to app-builder instance:

 app.UseAuthentication(); 
 app.UseAuthorization();

And, finally, in your controllers, you can easily use Authorize custom attribute:

 [Authorize] 
 public class TodoListController : Controller 
 { 
 /// controller actions 
 }

How to make an authenticated request to an API?

Again, we are using Microsoft.Identity.Web library. By default, the configuration of this library should be in a*ppsettings.json*:

{ 
"AzureAd": 
{ 
 "Instance": "https://login.microsoftonline.com/", 
 "Domain": "[Enter the domain of your tenant, e.g. contoso.onmicrosoft.com]", 
 "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id", 
 "ClientId": "[Enter the Client Id", 
 "ClientSecret": "[Copy the client secret added to the app from the Azure portal]", 

 // If using other OAuth authentication paths 
 "CallbackPath": "/signin-oidc", 
 "SignedOutCallbackPath": "/signout-callback-oidc", 

 // If instead of client_id and client_secret, the Api requires a certificate 
 "ClientCertificates": "[or Enter the certificate details]"

 } 
 }

Then, in order to obtain an access token, simply inject ITokenAcquisition in the constructor:

 using Microsoft.Identity.Web; 

 private readonly ITokenAcquisition _tokenAcquisition; 

 public TodoListService(ITokenAcquisition tokenAcquisition) 
 { 
 _tokenAcquisition = tokenAcquisition; 
 }

And, for client credentials flow, simply do:

 var accessToken = await _tokenAcquisition.GetAccessTokenForAppAsync("<Put your scope here>");

Voila! You have the accessToken. You can assign it now to Authorization header of your HttpClient and make the call.