teleren/devto huggingface dataset:
HTML cool things
Tags: html, beginners, productivity, codenewbie
Published: 2023-01-29 18:58:52

Here are some HTML tips and tricks that people usually don't know.

#1) Make a call or mail:
Need a link to make a call or mail? a tag to the rescue
```html
<a href="tel:43211234123">Make a call</a>
<a href="mailto:abc@gmail.com">Send an email</a>
```
#2) Add a color picker:
Need a color picker to you webpage? No need to use any libraries. It's just one line far.
```html
<input type="color"/>
```
Here it is.
![This image is showing color picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duww8b2fp4vw1otw7vmp.png)

#3) Editabele Content:
Make you any content editable by just adding the `contenteditable` attribute to the element.
```html
<p contenteditable="true">
   This is a paragraph
</p>
```
Here! how it's look like.
![This is a video showing the editable text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmuh4o4uaa753mmgze41.gif)

#4) Mark tag:
Got something that is very important and wanna highlight it?
Here is the solution.
```html
<p>It is very <mark>Important</mark></p>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqccauxxvi24z53ny0y1.png)

#5) Time tag:
The `<time>` tag defines a specific time (or datetime).
```html
<time datetime="2022-01-18T14:00:00Z">January 18, 2022 2:00 PM</time>
```
The `datetime` attribute is used to translate date and time into machine-readable formate.

#6) Progress bar:
Want to show progress of anything. use `progress` tag.
```html
<progress value="75" max="100"></progress>
```
![Picture showing progress bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rmrws978g3aifazr3t7.png)

#7) Disable option:
Use `disable` attribute to disable any element from options.
```html
 <select>
   <option>Apple</option>
   <option>Orange</option>
   <option disabled>Mango</option>
 </select>
```
You can see _Mango_ is disabled

![picture showing disabled option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yq0qhau666tsa34m4rl.png)

#8) Lazy Loading Image:
The `loading` attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.
```html
<img src="image.jpg" loading="lazy" alt="Some detail mentioned">
```
**Hope you liked this post. If you got something to say Comment section is for you.**
Easier lazy loading ,Angular 15
Tags: webdev, javascript, programming, angular
Published: 2023-01-29 18:48:28

Angular 15, the latest version of the popular JavaScript framework, was recently released with several new features and improvements. One of the most notable features is the easier lazy loading of modules, which can significantly improve the performance of your Angular applications.

Lazy loading is a technique that allows you to load parts of your application only when they are needed, rather than loading everything up front. This can significantly reduce the initial load time of your application, making it faster and more responsive for users.

In previous versions of Angular, implementing lazy loading was somewhat complex, requiring developers to write custom code and manipulate the routing configuration. However, in Angular 15, lazy loading has become much easier thanks to the introduction of a new “magic comment” syntax.

Here’s an example of how to use the new lazy loading syntax in Angular 15:

```
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

```
As you can see, the syntax is straightforward and requires minimal setup. You simply specify the path to your lazy-loaded module and the module itself in the loadChildren property.

In conclusion, Angular 15 makes lazy loading much easier and accessible to developers, allowing them to improve the performance of their applications with minimal effort. If you’re already using Angular in your projects, make sure to upgrade to Angular 15 and take advantage of this powerful new feature.
helm chart for fastAPI
Tags: helm, k8s, kubernetes, fastapi
Published: 2023-01-29 18:45:54


---
title: helm chart for fastAPI
published: true
description: dockerfile and helm chart that deploys fastapi to EKS
tags: #helm #k8s #kubernetes #fastapi
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkbpj7szpojztfpjddxo.png
---
### what is it about
packaging the fastapi as docker image and deploying as helm chart

### Building docker image
Clone the repository
``` bash
https://github.com/uptownaravi/LearnfastAPI.git
```
change directories into /FastAPI_HelmChart/
in the Dockerfile we have a ubuntu base image on which we build the layers to install application and dependencies.

Using my sample application from previous blog
https://dev.to/harisharavindan/learning-fastapi-with-a-sample-python-library-5f2n

build the image 
``` bash
docker build . -t fast:v2 
```

Docker image built is stored in github package ( ref https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry )

``` bash
ghcr.io/uptownaravi/fast:v2
``` 

> any changes required can be done to the dockerfile and build a new image from that

### Creating an Helm chart
have created a basic helm chart which uses the image built from the above dockerfile 

change directories in the cloned repository folder
``` bash
cd FastAPI_HelmChart/helmChart-fastAPI/
```
explore the chart templates and values.
* we have set the docker image to ghcr.io/uptownaravi/fast:v2
* health check is at localhost:80/health 
* service is exposed at 80 as we had set that in the dockerfile

do a dry-run to check what is being installed
make sure to be in the directory FastAPI_HelmChart/helmChart-fastAPI/ where the Chart.yaml is available
``` bash
helm install fastencode . --dry-run
```
this installs the helm release fastencode which creates the deployment, service and related resources

check the details of the installed chart
``` bash
kubectl get all -l='app.kubernetes.io/instance=fastencode'
```

we can port-forward the service to check the app
``` bash
kubectl port-forward svc/fastapi 8080:80
```
this will forward the port 80 of the pod to the local host 8080
check fastapi ui with url http://localhost:8080/docs

to uninstall the release
``` bash
helm uninstall fastencode
```
Whats new in angular 15? Dynamic router outlet names
Tags: webdev, javascript, angular, programming
Published: 2023-01-29 18:34:56

Angular 15, the latest version of Angular, was released on January 26, 2023, with several new features and improvements. One of the most notable features is the ability to dynamically set router outlet names.

With Angular 15, developers can now assign unique names to each router outlet in an application. This allows for multiple instances of the same component to be rendered, with each instance being controlled by its own set of routes. This makes it easier to organize and manage complex applications, and it opens up new possibilities for building dynamic user interfaces.

Here's how you can set a dynamic router outlet name in Angular 15:


```
<router-outlet [name]="getOutletName()"></router-outlet>
```
In the example above, the getOutletName() function returns the desired name for the router outlet. This function can be used to dynamically set the outlet name based on the current state of the application.

For example, consider a component that displays a list of products. With a dynamic router outlet name, you could render multiple instances of this component, each with its own set of products. By assigning a unique name to each router outlet, you can control the flow of data and interactions between the different instances of the component.

Here's an example of how you could define routes for a dynamic router outlet:

```
const routes: Routes = [
  {
    path: 'products',
    children: [
      {
        outlet: 'list1',
        path: 'list1',
        component: ProductListComponent
      },
      {
        outlet: 'list2',
        path: 'list2',
        component: ProductListComponent
      }
    ]
  }
];

```
In the example above, the outlet property is used to specify the name of the router outlet for each route. This allows you to render multiple instances of the ProductListComponent and control the flow of data and interactions between them.

In conclusion, dynamic router outlet names is a highly anticipated feature in Angular 15 that makes it easier to manage complex applications and build dynamic user interfaces. With this new feature, Angular developers can now build applications with greater flexibility, control, and organization.
Variable in ReactJS(all about)
Tags: javascript, programming, beginners, react
Published: 2023-01-29 18:30:44

<u>What is variable ?</u>
Variable is like a container or box which used for store data(info,value etc).

<u>History</u> -
In past before ES-6(ECMA Script 6) there are only one way of definig variable like `var x=8.5` but now after ES-6 there are 3 way of defining variable i.e var, let and const.

<u>Explain</u> -

<u>Var</u> 
1. The var statement declares a function-scoped or globally-scoped     variable, optionally initializing it to a value. 
2. Default value is undefined.
3. Var first declare then used otherwise it show undefine error.
4. If you use var outside of a function, it belongs to the global scope.
5. If you use var inside of a function, it belongs to that function.
6. If you use var inside of a block, i.e. a for loop, the variable is still available outside of that block.

```
function foo() {
  var x = 1;
  function bar() {
    var y = 2;
    console.log(x); // 1 (function `bar` closes over `x`)
    console.log(y); // 2 (`y` is in scope)
  }
  bar();
  console.log(x); // 1 (`x` is in scope)
  console.log(y); // ReferenceError, `y` is scoped to `bar`
}

foo();
```
<u>let</u>
1. `let` Declaration declares a block-scoped local variable, optionally initializing it to a value.
2. If you use let inside of a block, i.e. a for loop, the variable is only available inside of that loop.

```
function var() {
  var x = 1;
  {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function let() {
  let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
```
<u>const</u>
1. `const` is a variable that once it has been created, its value can never change.
2. It does not define a constant value. It defines a constant reference to a value.
3. Because of this you can NOT:
- Reassign a constant value
- Reassign a constant array
- Reassign a constant object

But you CAN:
- Change the elements of constant array
- Change the properties of constant object

```
// define MY_FAV as a constant and give it the value 7
const MY_FAV = 7;

// this will throw an error - Uncaught TypeError: Assignment to constant variable.
MY_FAV = 20;

// MY_FAV is 7
console.log("my favorite number is: " + MY_FAV);

// trying to redeclare a constant throws an error
// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
const MY_FAV = 20;

// the name MY_FAV is reserved for constant above, so this will fail too
var MY_FAV = 20;

// this throws an error too
let MY_FAV = 20;
```

**Thank You.**
Ivy Landmark: The Key to Ultra-Fast Angular Applications
Tags: webdev, javascript, angular, programming
Published: 2023-01-29 18:23:18

Ivy Landmark: The Key to Ultra-Fast Angular Applications

Angular, one of the most popular front-end JavaScript frameworks, has just gotten even better with the introduction of Ivy Landmark. This new feature has taken Angular development to the next level by making it ultra-fast and efficient. In this article, we will take a closer look at Ivy Landmark and how it makes Angular applications faster.

Ivy Landmark is a new compiler and renderer for Angular, which has replaced the previous view engine. It was introduced in Angular 9 and has been the default compiler since Angular 10. The main goal of Ivy Landmark is to optimize the size and speed of Angular applications, making it easier for developers to build fast and scalable applications.

One of the biggest benefits of Ivy Landmark is that it generates smaller and faster JavaScript code. This is achieved by reducing the size of the code and optimizing it for performance. As a result, Angular applications built with Ivy Landmark load faster and perform better on both desktop and mobile devices.

Let's take a look at a concrete example to see how Ivy Landmark makes Angular applications faster. Consider a simple Angular application that displays a list of users. With the previous view engine, the size of the JavaScript code for this application would be approximately 1 MB. However, with Ivy Landmark, the size of the code is reduced to just 400 KB, making the application four times faster to download and execute.

Another benefit of Ivy Landmark is that it has improved the debugging experience for Angular developers. With the new compiler, developers can now easily locate and fix issues in the code, reducing the time and effort required to maintain the application.

Ivy Landmark has also introduced a new way of compiling components, which makes it easier to build and maintain large-scale applications. With Ivy Landmark, developers can now write components in a more modular and reusable manner, making it easier to update and maintain the codebase. This results in a faster development cycle and reduced costs for businesses.

In conclusion, Ivy Landmark is a game-changer for Angular development. With its faster and more efficient compiler, developers can now build fast and scalable applications with ease. The new feature has also made it easier to maintain and debug Angular applications, making it a must-have for businesses looking to stay ahead in the fast-paced world of web development. So, if you're an Angular developer, it's time to upgrade your skills and start using Ivy Landmark to build ultra-fast and efficient Angular applications.
@Input and @Output Decorators in Angular
Tags: angular, webdev, javascript, beginners
Published: 2023-01-29 18:15:42



Angular is a popular JavaScript framework for building web applications. It provides many features that make it easier to build applications, such as two-way data binding, dependency injection, and a component-based architecture. In this article, we will discuss the @Input and @Output decorators in Angular.

@Input Decorator

The @Input decorator is used to pass data from a parent component to a child component. It allows you to pass values from a parent component to a child component by binding them. This is useful when you want to share data between components, such as when you have a parent component that needs to pass data to a child component.

To use the @Input decorator, you need to declare a property in the child component and annotate it with the @Input decorator. Then, you can bind the property in the parent component to the child component by using the property's name. For example, let's say you have a parent component that needs to pass data to a child component. The parent component could look like this:

```

<app-child [data]=”value”></app-child>
```
And the child component could look like this:

```
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<h1>{{ data }}</h1>'
})
export class ChildComponent {
  @Input() data: string;
}
```
@Output Decorator

The @Output decorator is used to pass data from a child component to a parent component. It allows you to emit events from a child component that can be listened to by a parent component. This is useful when you want to notify a parent component of changes in a child component, such as when a user performs an action in the child component.

To use the @Output decorator, you need to declare an EventEmitter property in the child component and annotate it with the @Output decorator. Then, you can emit events from the child component by calling the emit method on the EventEmitter property. For example, let's say you have a child component that needs to notify a parent component of a change. The child component could look like this:

```

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<button (click)=”onClick()”>Click Me</button>'
})
export class ChildComponent {
  @Output() change = new EventEmitter<void>();

  onClick() {
    this.change.emit();
  }
}

```
And the parent component could look like this:

```
<app-child (change)=”onChange()”></app-child>
```
Conclusion

The @Input and @Output decorators in Angular allow you to pass data between components and emit events from components, making it easier to build complex applications. By understanding how to use these decorators, you can better structure your Angular applications and make them more maintainable.
Oracle-Linux 8'de "nmtui" Aracını Kullanarak Statik IP Nasıl Yapılandırılır ?
Published: 2023-01-29 18:14:57


RHEL 8 için statik IP adreslerini yapılandırmanın bir yöntemi de, bir metin kullanıcı arabirimi (TUI) olan "nmtui" aracını kullanmaktır. Kullanmak için terminalinize aşağıdaki komutu girmeniz yeterlidir:

```
# nmtui
```

Bu komut programı şekildeki gibi başlatacaktır:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yoh74y0quimh7vrzdn0d.PNG)

"Edit a connection" u seçin, ardından arayüzü seçin:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr892shc64cru2aamn1b.PNG)

Bir sonraki pencerede, klavyenizdeki ok tuşlarıyla imleci hareket ettirerek ağ arayüz ayarlarını düzenleyebileceksiniz:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x4ipzqlll0g7th3larm.PNG)

Bu örnekte, IP adresimi 192.168.20.150'den 192.168.20.160'a değiştirdim. Değişiklikleri kaydetmek için sayfanın sonuna gidin ve <OK> butonunu seçin.

Ardından "Activate a connection"u seçerek ağ arayüzünü yeniden yükleyin:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02m2p7beytnvmx5ih4xn.PNG)

Ardından bağlantı adını seçin ve <Deactivate> öğesini seçin:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39unilnk6un24pm2miga.PNG)

Ve şimdi arayüzü verdiğiniz yeni ayarlarla etkinleştirmek için <Activate> öğesini seçin:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8sbe0jn5jvz5id9c63o.PNG)

Ardından ana menüye dönmek için <Back> öğesini seçin ve ardından çıkmak için “Quit” öğesini seçin:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nk4ko3kq3ur9x920k6n.PNG)

Yeni IP adresi ayarlarının sonucunu bu komutlardan biri ile kontrol edin:

```
# ip a
```

ya da 

```
# ip addr
```


Sonucu şu şekilde olacaktır:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa9wlvljx39ge4xozehf.PNG)
𝗧𝗵𝗲𝗿𝗲 𝗮𝗿𝗲 𝗮 𝗳𝗲𝘄 𝘄𝗮𝘆𝘀 𝘆𝗼𝘂 𝗰𝗮𝗻 𝘂𝘀𝗲 𝗖𝗵𝗮𝘁𝗚𝗣𝗧 𝘁𝗼 𝗶𝗺𝗽𝗿𝗼𝘃𝗲 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝘃𝗶𝘁𝘆.
Tags: chatgpt, productivity
Published: 2023-01-29 18:12:54

𝗣𝗲𝗿𝘀𝗼𝗻𝗮𝗹 𝗔𝘀𝘀𝗶𝘀𝘁𝗮𝗻𝗰𝗲:
You can use ChatGPT as a personal assistant to help you with a variety of tasks, such as scheduling appointments, finding information, and making recommendations.

𝗧𝗲𝘅𝘁 𝗴𝗲𝗻𝗲𝗿𝗮𝘁𝗶𝗼𝗻:
 You can use ChatGPT to generate text for tasks such as writing emails, creating reports, and composing documents. This can save you time and effort.

𝗗𝗮𝘁𝗮 𝘀𝘂𝗺𝗺𝗮𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻:
You can use ChatGPT to summarize large amounts of text data, such as articles or research papers, to quickly extract key points and information.

𝗦𝗰𝗵𝗲𝗱𝘂𝗹𝗶𝗻𝗴 𝗮𝗻𝗱 𝗿𝗲𝗺𝗶𝗻𝗱𝗲𝗿𝘀:
You can use ChatGPT to set reminders and schedule tasks, so you can stay on top of your to-do list.

𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗲𝗱 𝗿𝗲𝘀𝗽𝗼𝗻𝘀𝗲𝘀:
You can use ChatGPT to generate automated responses to frequently asked questions, which can save you time and effort when communicating with others.

𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲 𝗧𝗿𝗮𝗻𝘀𝗹𝗮𝘁𝗶𝗼𝗻:
You can use ChatGPT to translate text from one language to another, which can be useful for communicating with people in different countries or for reading foreign-language documents.
JAVASCRIPT : AJAX AND FETCH
Tags: javascript, webdev, tutorial, programming
Published: 2023-01-29 17:57:44

## <u>**INTRODUCTION:-**</u>

<u></u>
### AJAX

AJAX is a technique for sending or requesting data without have to perform a page load. If you have ever used a single-page application like Gmail and Google Maps, this is how you are able to go through your inbox and navigate through the map without changing the page you are on. AJAX stands for Asynchronous JavaScript and XML. Asynchronous code is code that runs in parallel with something else, so in this case, you can request or send data without affecting your browsing experiences.

## XML

XML, standing for Extensible Markup Language, is similar to HTML but is used for data transfer, just like JSON. The only problem is that XML is typically heavily, harder to read and doesn't integrate as gracefully as JSON does with JavaScript.

```
<dog>
  <name>Rishi</name>
  <age>10</age>
  <weight>30</weight>
</dog>
```
Because of XML's downsides, AJAX originally created to be used in conjunction with XML, is now more popularly used with JSON instead.

---

## MAKING AJAX CALLS WITH FETCH

Instead of making AJAX calls using the original method, via and XMLhttpRequest, we will be using the modern fetch instead.

We will be using JSONplaceholder as the source of the information, and get their posts. If you were to click here, you will see the data that we are going to try and fetch.

With this data, you can do then do whatever it is that you had like with it. You can add it to the page, perform calculations on it, or pretty much anything.


```
// base url
let base = '<u>https://jsonplaceholder.typicode.com</u>';

//use fetch on the /posts route, then pass the response along
fetch(base + "/posts").then(function(response){
      // with the response, convert it to JSON, then pass it along
      response.json().then(function(response){
           //print that JSON
           console.log(json);
     });
});
```

Transferring JSON via AJAX from a server is not the only way you can provide your website with the data it needs to function. You can take advantage of client-sided methods of storing information, like cookies.


Follow for more.
Software Architecture — Inversion of Control Part 1
Tags: javascript, webdev, architecture, react
Published: 2023-01-29 17:54:01

Excited to share my latest article on software architecture and the concept of Inversion of Control! Dive into Part 1 of this series on Medium: https://aaron-janes.medium.com/software-architecture-inversion-of-control-part-1-9435f028241c
How to read explain query plan in postgresql
Tags: postgres, tutorial, beginners
Published: 2023-01-29 17:53:35


In PostgreSQL, the output of an EXPLAIN query shows the query plan used by the database to execute a particular SQL statement. The output of an EXPLAIN query can be difficult to read, but it provides valuable information about the optimization of a query.

[](https://mynotesoracledba.medium.com/how-to-read-and-understand-explain-query-plans-in-postgresql-8179299fd613)