teleren/devto huggingface dataset:
DNS -The gatekeeper 24/7 of the internet - Part 1
Tags: internet, dns, learning
Published: 2024-03-04 20:31:52

The first time I learned about web development, I had so many questions to ask like:

- What happens behind the scenes after I type the URL and press enter? 
- Why in ULRs have too many suffixes diff (.com, .gov, .edu, etc)?
- And how can web browsers find the right website in millions to trillion websites? 

With the help of Mr.IKnowEveryThing aka [Google](google.com), I met the gatekeeper - **DNS** aka **D**omain **N**ame **S**ystem, he/she (or maybe it 👀) answered every my question above

## What is DNS?
For an easy explanation, think of DNS as a phone book. Unlike a regular phone book that stores names and phone numbers, DNS stores both the domain name and the corresponding IP address.

## Why call DNS the gatekeeper?

![DNS Gatekeeper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr0esbdp4c01dhw1ao24.jpg)

<u>Gatekeeper</u>, the name talks the meaning, every request you send or response you receive must go through DNS first. But the action DNS makes with request and with response is diff. 

With request, DNS becomes a translator, it will translate human-friendly domain names (`example.com`) into numeric IP addresses (`192.0.2.1`). With this, it guides your request through a hierarchy of servers, ensuring you reach the right place.

![Web Process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a14aup6qiayjnzbwl5ek.png)

With response, DNS becomes security guys, it will ensure the response from legit servers only. On another hand, with some security steps, DNS helps prevent unauthorized alterations

## Where is DNS?

In fact, DNS will be stored on a server in the data center of your ISP (Internet Service Provider). Means it appears around the world

![DNS location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brb8p77aj57bb12j4ia6.jpg) 

## Summary
That's it, you have met the gatekeeper of the internet, and you know why it works 24/7. If it retire or sick, we need access the website by magic number - IP address, not mention security problem yet 😂 

I will talk about how DNS works in [the next part](https://dev.to/locnguyenpv/dns-the-gatekeeper-247-of-the-internet-part-2-3hl9).

Happy Coding!
An Introduction to Design Patterns
Tags: designpatterns, webdev, programming, computerscience
Published: 2024-03-04 20:27:40

## Introduction
This article introduces design patterns, reusable solutions to common software development problems. Design patterns help us structure our code and make it more maintainable.

## Why Design Patterns?
- **Maintainability**: Software is constantly evolving. Design patterns help us write code that is easier to modify and update.
- **Communication**: Design patterns provide a common language for developers to discuss software design.

## Types of Design Patterns
There are three main categories of design patterns:

1. **Creational Patterns**: These patterns hide the details of object creation.
2. **Structural Patterns**: These patterns focus on how classes and objects are structured and composed.
3. **Behavioral Patterns**: These patterns define how objects interact with each other.

**Examples**

**Singleton Pattern (Creational)**: This pattern ensures that only one instance of a class exists.
**Bridge Pattern (Structural)**: This pattern separates an object's implementation from its interface.
**Observer Pattern (Behavioral)**: This pattern allows objects to subscribe to events and be notified when they occur.

**When to Use Design Patterns**

**Solve a specific problem**: Use a design pattern when it directly addresses a problem you're facing.
**Anticipate change**: Use a design pattern for parts of your system that are likely to change frequently.

**Conclusion**
Design patterns are a valuable tool for any developer. They provide solutions to common problems, improve code maintainability, and promote better communication among developers.
Mastering Data Streaming Pipelines
Published: 2024-03-28 13:11:24

---
title: Mastering Data Streaming Pipelines
published: true
date: 2024-03-04 20:20:00 UTC
tags: 
canonical_url: 
---

<iframe frameborder="0" height="270" src="https://youtube.com/embed/EoKEl9q_H0c?si=bDf515V1_IffSa0b" style="background-image: url(https://i.ytimg.com/vi/EoKEl9q_H0c/hqdefault.jpg);" width="480"></iframe>
Next.js 14 Intercepting Routes with Dynamic Routes
Tags: nextjs, react, webdev, development
Published: 2024-03-04 20:11:17

I would like to introduce a practical example about Intercepting Routes with Dynamic Routes which is a new feature in **Next.js** (**App Router**) that enhances UI flexibility and user experience.

In many modern web applications we could want to achieve loading a route from another part of web application within the current layout by using modal as in the following diagram:

![Intercepting Routes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xmn8darxfmiclh045uz.jpg)

* When clicking on a product card, we will see the result in a modal (Next.js intercepts the /products/[product-id] route), which will overlaying the current page context (/products).

* When navigating to the product page by clicking (/products/[product-id]) URL or by refreshing the page, the entire product page should render instead of the moda -No route interception will occur- .

💻💻

![Intercepting Routes Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u54qmjzgn4nrsu14a216.jpg)

🎉🎉Production Link => https://shops-finder-nextjs.vercel.app/ 

🎉🎉[Project on GitHub](https://github.com/alaa-m1/nextjs14-approuter-nextauth-shopsfinder)
Handling Migrations on NestJS with TypeORM
Tags: nestjs, node, typeorm, sql
Published: 2024-03-04 20:06:24

When facing challenges in managing migrations in NestJS with TypeORM, I realized that the existing documentation did not adequately address this area. Given my recent immersion in NestJS, I decided to share the solution I discovered while researching and resolving these issues.

One of the initial challenges arose when I realized that maintaining the "synchronize" property as true is not a recommended practice for production environments, as it could result in data loss. Consequently, I opted to implement migrations. However, initially, I didn't know how to separate the TypeORM configuration into an independent file and turn it into a data source for the TypeORM CLI to recognize.

PSDT: I'll assume that you're ready create a new nestjs project.

## 1. TypeORM Configuration in an Independent File
In the file src/db/typeorm.ts, I defined the data source options as follows:

```typescript

// src/db/typeorm.ts
import { DataSource, DataSourceOptions } from 'typeorm';

export const dataSourceOptions: DataSourceOptions = {
  type: 'postgres',
  host: 'localhost',
  port: 5432,
  username: 'postgres',
  password: 'securepassword',
  database: 'db',
  synchronize: false,
  entities: ['dist/**/*.entity.js'],
  migrationsRun: false,
  migrations: ['dist/db/migrations/*.js'],
};

const AppDataSource = new DataSource(dataSourceOptions);

export default AppDataSource;
```

## 2. Integration into the AppModule
Subsequently, in the file app.module.ts, I imported the data source options and incorporated them into the module's configuration:

```typescript
// app.module.ts
@Module({
  imports: [
    ConfigModule.forRoot(),
    TypeOrmModule.forRoot(dataSourceOptions),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {
  constructor() {}
}
```

## 3. Configuration of Scripts in the package.json
Finally, to facilitate the execution of migrations, I added new scripts to the package.json file:

```json
{
  "scripts": {
    "typeorm": "pnpm run build && npx typeorm -d dist/db/typeorm.js",
    "migration:run": "pnpm run typeorm migration:run -- -d dist/db/typeorm.js",
    "migration:generate": "pnpm run typeorm migration:generate",
    "migration:revert": "pnpm run typeorm -- -d ./src/db/typeorm.ts migration:revert"
  }
}
```
Following these steps, I managed to overcome the issues associated with migrations in NestJS with TypeORM, ensuring a more robust and secure management of the database, especially in production environments. I hope this guide proves helpful in your experience with NestJS and TypeORM.
Gwinnett Plumber Pro Service
Published: 2024-03-04 20:04:25


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76kqao5d2mwxr3ix7z08.jpg)

Looking for reliable plumbing services in Lawrenceville? Look no further than Gwinnett Plumber Pro Service. As a locally-owned and family-operated plumbing business serving Gwinnett County, we are dedicated to providing top-notch plumbing solutions. Whether you're facing a clogged drain, a damaged sewer line, or a malfunctioning water heater, we've got you covered. What sets us apart is our unwavering commitment to customer satisfaction. With convenient scheduling options, competitive pricing, and exclusive discounts year-round, we strive to make every interaction seamless for our valued customers. Count on our skilled and certified team to keep abreast of the latest plumbing advancements to ensure efficient and effective service. Plus, we specialize in emergency plumbing repairs, guaranteeing swift solutions when you need them most. Don't let plumbing problems disrupt your day – contact us today for prompt and professional assistance.


Gwinnett Plumber Pro Service
Address: [440 S Perry St, Suite 203, Lawrenceville, GA 30046](https://www.google.com/maps?cid=736984585150356847)
Phone: (706) 247-6872
Website: [https://gwinnettplumberpro.com/
](https://gwinnettplumberpro.com/
)Contact email: samivey55@gmail.com


Visit Our Profiles:

[Gwinnett Plumber Pro | Yelp](https://www.yelp.com/biz/gwinnett-plumber-pro-service-lawrenceville-5)
[Gwinnett Plumber Pro | Facebook](https://www.facebook.com/plumberproservice)
[Gwinnett Plumber Pro | X](https://twitter.com/PlumberProServ)
[Gwinnett Plumber Pro | YouTube](https://www.youtube.com/@plumbergeorgia)
[Gwinnett Plumber Pro | Pinterest](https://www.pinterest.com/plumberprous/)
Some great new posts from new authors in February 💞
Published: 2024-03-04 20:00:17

Happy March! This is a particularly special month here at DEV so I'll just take this opportunity to highlight our we_coded event happening now:

{% link https://dev.to/devteam/wecoded-2024-empowering-change-for-gender-equity-in-tech-30nj %}

Anyway, like last month, I took a look at all the posts published by new authors in February, and wanted to highlight a few that I'm particularly fond of. 

These posts are all from brand new authors - folks that are either totally new to the community or past lurkers who have finally been awarded their writing debut badge :) 

For your reading pleasure: 

{% link https://dev.to/shinyvision/why-is-everything-javascript-33ii %}

{% link https://dev.to/farshed/building-a-neural-network-in-rust-from-scratch-5bm1 %}

{% link https://dev.to/pseudocoder_in/an-indian-software-engineer-577g %}

{% link https://dev.to/browserless/how-and-why-we-ripped-our-open-source-product-apart-for-a-full-rebuild-552n %}

{% link https://dev.to/johanpiquet/progpjs-a-fast-javascript-engine-for-go-294i %}

Happy Coding!
Learn x86 Assembly with me
Tags: assembly, beginners, programming, learning
Published: 2024-03-04 18:58:47


What's up.

Based off of my posts, I think it might be kind of strange to see an article like this

But yeah, I've decided to learn assembly

Also - Correct me if I'm wrong somewhere here or oversimplified a term. I'd be more than happy to read such comments and get my knowledge and understanding to the higher level

## Why Assembly and why x86?

Starting with the second part - that's what my processors architecture is. 

I don't have ARM processor, yet someone would tell me.
> Just buy used computer or VPS with such access

I could, of course - Yet I would not like to spend too much money right now

I believe, that with some curiosity and time to search, I can dig information for free - This will be the challenge itself

I like challenges - so why not?

And why assembly? Simple answer...

**Reverse Engineering** 

Just got into it - so Assembly might be fairly useful there, as not always everything can be found with C# or even C de-compiler

## Where I'll be learning from?

I've found 2 decent sources
- [tutorialspoint](https://www.tutorialspoint.com/assembly_programming/index.htm) - in english, with nice segments and everything
- [This paper from Jagiellonian University](https://ww2.ii.uj.edu.pl/~kapela/pn/print-lecture-and-sources.php) - yet in polish, so my native language

But, that's it for the talking - let's learn something

## What does assembly code consist of

If we look at assembly code - it consists of **sections**

Some basic ones are

1. `.bss` - In this section, we declare variables, that will be changed while execution
2. `.data` - it stores constants, like strings or ints
3. `.text` - contains the code itself. We need to also declare `_start` here
```asm
section.text
    global .start
_start:
```

`_start` tells the kernel, where should it look for the beginning of the code.

In there, we can find **mnemonics** - Assembly instructions

In one line, there can only be one mnemonic

So, this
```asm
MOV TOTAL, 48 ADD TOTAL, 10
```

Can never appear - so we need to write this in 2 separate lines
```asm
MOV TOTAL, 48 ; Move 48 to variable in memory called TOTAL
ADD TOTAL, 10
```

As you see, I've also added `;` to the end - that's **comment** in assembly

That's it, not to much yet still I hope it will expand very soon

## What will I learn now?

Probably start reading about registers and other parts such as variables or conditional instructions

Right now, I'd like to thank you for reading - Share you expirance in comments. Maybe we as community can learn a very valuable lessons from you.

Also, feel free to share your sources - where have you been learning assembly from and that's it

See you next time
Quick and easy loading spinner without JavaScript!
Tags: tailwindcss, javascript, react, vue
Published: 2024-03-04 19:47:32

In this article, you will learn how to set up a quick and easy loading spinner using just Tailwind CSS. Stick around till the end to get the extra feature.

### Why use Tailwind CSS, not JavaScript?

The reason for using Tailwind CSS is to reduce the amount of JavaScript being shipped with the framework you are making use of. The less JavaScript you have, the more lightweight your web application becomes.

### The Spinner

Working with Tailwind CSS helps you ship faster, and you don't need to spend so much time styling or organising your CSS files.

Let's get started.

```
<div class="flex items-center justify-center h-[50vh]">
  <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-blue-500"></div>
</div>
```

That's all you need to get a simple loading spinner in your web application.

- `animate-spin`: This class adds a rotating animation to the element.

- `rounded-full`: This class makes the element a perfect circle by rounding its corners.

- `h-16 w-16`: These classes set the height and width of the spinner. You can adjust the values based on your design.

- `h-[50vh]`: This class sets a responsive height for all screens.

- `border-t-2 border-blue-500`: These classes add a border to the top of the spinner, creating the appearance of a spinner with a specific color (blue-500). You can customize the color by choosing a different Tailwind CSS color class.

### Make it Reusable

An extra is to show you how to make it reusable in Vue and React.

**Vue**

```
<template>
  <div class="flex items-center justify-center">
    <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-blue-500"></div>
  </div>
</template>

<script>
export default {
  name: 'Spinner'
};
</script>

<style scoped>
/* Add any scoped styles if needed */
</style>
```

**React**

```
import React from 'react';

const Spinner = () => {
  return (
    <div className="flex items-center justify-center">
      <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-blue-500"></div>
    </div>
  );
};

export default Spinner;
```

You can conditionally render the loading spinners when updating a state or fetching data from an API.

### Resources

- [Get started with Tailwind CSS.](https://tailwindcss.com/docs/installation)

- [Get started with React.](https://react.dev/learn)

- [Get started with Vue.](https://vuejs.org/guide/introduction.html)
Understanding python Decorators
Tags: python, beginners, webdev, programming
Published: 2024-03-04 19:43:51

**Understand Python Decorators: A Twist on Functions**

Have you ever encountered the @ symbol used with functions in Python and wondered what it meant? That's the magic of decorators, a unique concept that adds functionality to existing functions without altering their original code.

**So, what are decorators?**

Imagine wrapping a present. The present itself (the function) remains unchanged, but the wrapping (the decorator) adds something extra – maybe a bow or a ribbon. Similarly, a decorator "wraps" a function, adding new features or modifying its behavior.
**Let's see an example:**

```
import time

def timer(func):
    #Decorator that logs the execution time of a function.
    
    def wrapper(*args, **kwargs):
        start_time = time.time()
        result = func(*args, **kwargs)
        end_time = time.time()
        print(f"{func.__name__} took {end_time - start_time:.2f} seconds to execute.")
        return result

    return wrapper

@timer
def my_function(a, b):
    #This function does some calculations.
    return a * b + 5

result = my_function(3, 4)
print(result) # Output: my_function took 0.00 seconds to execute.
```
Here, the timer decorator is a function that takes another function (func) as its argument. It then defines an inner function (wrapper) that executes the original function (func) and logs its execution time. Finally, the decorator returns the wrapper function, which replaces the original one.

**Benefits of using decorators:**
**Code Reusability:** You can create reusable decorators for common tasks like logging, authentication, or caching, avoiding repetitive code.

**Maintainability:** Code becomes cleaner and easier to understand by separating concerns (core functionality and additional features).

**Flexibility:** You can easily add or remove functionalities using decorators without modifying the original function code.

**Decorators are versatile and can be used for various purposes:**
**Such AS:**
-Logging, Authentication, Caching, Validation 

Remember, decorators add a unique twist to functions in Python, making them a powerful tool for writing clean, maintainable, and feature-rich code. So, embrace the fun and start decorating your functions today.
What is Mutex ?
Tags: go, backenddevelopment
Published: 2024-03-04 19:36:43

Before using mutex? It's a good idea for you to learn about race conditions, because these two concepts are closely related to each other.
A race condition is a condition where more than one goroutine accesses data together at the same time. When this happens, the data value becomes chaotic. In concurency programming this value often occurs.

Mutex changes the access level of data to executive, making the data only able to be consumed (read/written) by one goroutine. When a race condition occurs, the goroutine is lucky enough to be able to access the data. Other goroutines (whose running time happens to be the same) will be forced to wait, until the wait for using the data is complete.

Go provides sync.Mutex which can be used to lock and unclock data
The Importance of Semantic HTML for SEO and Accessibility
Tags: webdev, html, beginners, programming
Published: 2024-03-04 19:28:11

**The Importance of Semantic HTML for SEO and Accessibility**

One essential component of web development that has been gaining in prominence recently is semantic HTML. It is a subset of HTML where the structure and meaning of the information are prioritized over its aesthetic presentation. The purpose of this article is to go over the value of semantic HTML for accessibility and Search Engine Optimization (SEO), and how it may help both web developers and users.

Algorithms are used by search engines like Google to crawl and index online sites. These algorithms assess a web page's relevancy to a user's query by examining its structure and content. Search engines can now comprehend a web page's content in an organized and understandable manner thanks to semantic HTML. Web developers may effectively communicate the hierarchy and arrangement of their information by employing semantic components like <h1>, <h2>, <p>, and <ul>. This improves a web page's exposure and ranking in search results by making it simpler for search engines to comprehend the primary subjects and subtopics of the page.
Semantic HTML can also increase a web page's click-through rate (CTR). Users are more likely to click on a search result that has well-organized material and distinct headings. This is a result of the user's ability to rapidly scan the page to see if the information they're looking for is there.

When a website is considered accessible, it means that individuals with impairments, such as those who are visually or hearing challenged or have mobility problems, can use it. The use of semantic HTML is essential for improving the accessibility of websites. Web developers can give assistive technologies like screen readers an organized and unambiguous means to explore and comprehend the content of a webpage by incorporating semantic features.

For instance, it is simpler for screen readers to determine the primary subject of a web page when the main heading is defined using the <h1> element. In a similar vein, making an unordered list with the <ul> and <li> components can facilitate easier navigation for persons with visual impairments.

Semantic HTML, in summary, is an effective tool for accessibility and SEO. Web developers can increase search engine rankings and visibility by employing semantic components to make webpages easier for search engines to understand and index. Semantic HTML also ensures that everyone can access and use online material by improving website accessibility for those with disabilities. Semantic HTML is becoming more and more important as web development progresses, and we as web developers need to be proficient in it.

									Author: Alice Wangechi
FORM WITH A SEMANTIC HTML, LEGEND AND FIELD SET
Tags: login
Published: 2024-03-04 18:40:59

<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale1.0"> 
  <title>Form With Semantic HTML</title>  

</head>
</body> 

   <h1>Form With Semantic HTML</h1>

   <form> 
    <fieldset> 
      <legend>Legend</legend>
     <section> 
       <label for="fullName">Full Name:</label> 
       <input type="text" id="fullName" name="fullName" required> 
     </section> 

     <section> 
       <label for="email">Email:</label> 
       <input type="email" id="email" name="email" required> 
     </section>

     <section>
       <label for="password">Password:</label> 
       <input type="password" id="password" name="password" required> 
     </section> 

     <section> 
        <label for="gender">Gender</label> 
        <select id="gender" name="gender"> 
          <option value="male">Male</option>
          <option value="female">Female</option> 
          <option value="other">Other</option> 
        </select> 
     </section> 

     <section> 
       <label> 
         <input type="checkbox" id="newsletter" name="newsletter"> 
         Subscribe to Newsletter
       <label>
     </section> 

     <section> 
        <label for="comments">Comments</label> 
        <textarea id="comments" name="comments" rows="4"></textarea> 
    </section> 

    <button type="submit">submit</button> 
  </form> 
</fieldset>

</body>
</html>