teleren/devto huggingface dataset:
Microservices architecture using .Net core.
Tags: dotnet, microservices, kubernetes, webdev
Published: 2022-11-06 11:53:35

In this article, I am going to explain the microservices architecture.
The article is divided into four parts as i have listed below.
 
* Microservices architecture.
* [Creating microservices in .Net core using ocelot apigateway](https://dev.to/siddharth151199/creating-microservices-in-net-core-using-ocelot-apigateway-5had).
* [Dockerizing all microservices and apigateway](https://dev.to/siddharth151199/creating-docker-image-of-microservices-and-apigateway-3ild)
* Deployment on kubernetes

## Microservices architecture
As the name implies, a microservices architecture is an approach to building a server application as a set of small services. That means a microservices architecture is mainly oriented to the back-end, although the approach is also being used for the front end. Each service runs in its own process and communicates with other processes using protocols such as HTTP/HTTPS, WebSockets, or AMQP.
Each microservice implements a specific end-to-end domain or business capability within a certain context boundary, and each must be developed autonomously and be deployable independently.
Finally, each microservice should own its related domain data model and domain logic.

![microservice with apigateway](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jldaukgtah4lqp1hb4qn.jpeg)

Above picture is showing how the microservices architecture works.
There is a client basically an user-interface that communicates with an apigateway.
Apigateway is a single entry point for all microservices. Its acts as a middleware between the microservices and client. Microservices is developed by the devops team and every microservice has their own database.

1. Client : A client is an user-interface.

2. Apigateway : API Gateway handles all the tasks involved in accepting and processing up to hundreds of thousands of concurrent API calls, including traffic management, CORS support, authorization and access control.

In next article we are going to develop the [microservices architecture using .Net core 6.0] (https://dev.to/siddharth151199/creating-microservices-in-net-core-using-ocelot-apigateway-5had). In that project will have an apigateway(Ocelot) and microservices.
Dev Blog #03
Tags: gamedev, writing, ramblings
Published: 2022-11-06 11:44:28

So, I bring news of what has be going on with the writing for Monster Killer MV! Small progress has been made but, I have a rough draft story written down now. The last few weeks, a lot has been going on and I haven't had as much time to work on it as I would like but, I have gotten a little bit done on my design doc. If you haven't yet, check out the other dev blogs:



I wanted to keep the story kind of small, so I decided that I would go with 4 bosses. In the original proof of concept game, I had wanted to go with 6 to 8 bosses and 5 different endings (a unique one for each of the 5 classes). This time around, I want to take a little bit of a smaller scale approach.

This will be my first completed RPG MV game and I feel like it is better to start out small and then scale it up than to go hard on am 80 hour "super RPG".


![divider_armor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un8xqx5bb6l4t397aexo.png)
I have a few ideas for weapons, armors, and a few events in the doc but, I am mainly trying to focus on getting a story finished up so I can move on to rounding out the classes.

I think the part I am looking most forward to is the items weapons and armors. Those always seem to be the most fun to work on and I'm kind of excited to get to them. Hopefully I can buckle down this weekend and get a few projects done that I've been neglecting recently.

Sorry there wasn't more to add in this update. With work and everything else, it's been kind of slow going. I'll try to make the next update more eventful.

Thanks so much for reading, and have a wonderful day!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7ap6oqbl3wvsg2yjqq2.png)
Letter and numbers
Tags: perl, python, theweeklychallenge
Published: 2022-11-06 10:50:23

## Weekly Challenge 189

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-189/), [My solution](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-189/sgreen)

## Task 1: Greater Character

### Task

You are given an array of characters (a..z) and a target character.

Write a script to find out the smallest character in the given array lexicographically greater than the target character.

### My solution

There are two ways this challenge could be tackled. One solution is to work through the alphabet and exit on a match. This is relatively straight forward in Perl (`++a` is `b`), it's not that easy in Python.

So the approach I took was as follows:

1. Take the last value from the input and store it as `target`
1. Find all other values in the list greater than the target.
1. Sort this list
1. Print the first item in the list. If no item is found, print the target.

### Examples

```bash
$ ./ch-1.py e m u g b
e

$ ./ch-1.py d c e f a
c

$ ./ch-1.py j a r o
r

$ ./ch-1.py d c a f a
c

$ ./ch-1.py t g a l v
v
```

## Task 2: Array Degree

### Task

You are given an array of 2 or more non-negative integers.

Write a script to find out the smallest slice, i.e. contiguous subarray of the original array, having the degree of the given array.

The degree of an array is the maximum frequency of an element in the array.

### My solution

For this challenge, I have created a function call `get_degree`. This returns the frequency of the most used number. The function creates a dict (hash in Perl) counting the frequency of each number, and then returns the maximum of all the values.

I then have a double loop for looking at all possible slices of the array. If the slice has the required degree and either we don't have a solution or the sum of the slice is less than any previous solution, we mark this slice as the solution.

I then print the slice found in the above loop.

### Examples

```bash
$ ./ch-2.py 1 3 3 2
3, 3

$ ./ch-2.py 1 2 1 3
1, 2, 1

$ ./ch-2.py 1 3 2 1 2
2, 1, 2

$ ./ch-2.py 1 1 3 2 3
1, 1

$ ./ch-2.py 2 1 2 1 1
1, 2, 1, 1
```
Redux is not DEAD!
Tags: tutorial, redux, state
Published: 2022-11-06 10:30:13

WHY REDUX IS NOT DEAD even if every year you can read some articles or devs that say the opposite?


First of all I love #redux especially since "Redux Toolkit (RTK)" and RTK query has been released . It has been significantly simplified compared to the past.

Redux Toolkit offers several utilities to handle your store, actions, selectors, side effects and now (thank to Redux Toolkit Query) caching, prefetch, loading/error/pending states, pagination and more.

Redux is a library but also a pattern : you don't need to reinvent the wheel every time, and each developer of your team can easily understand what are you're doing and where to find stuff since it's opinionated.

📘 REDUX DEV TOOLS
There are many reasons why I love Redux but one of the most important is because it has amazing "Redux Dev Tools".
As you can see from the attached image you can keep everything under control and it is essential when your application grows and you have to manage complex states in relation to each other.
Furthermore it's also useful to understand the flow of your actions and how your application works.


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

Let's imagine a complex authentication process or complex views that involves a lot of steps, side effects and state updates: old and new team members can easily understand how your app works just opening Redux Dev Tools.

Anyway the main tabs of Redux Dev Tools is the most important and allow you to track anything:

1) what action is emitted and its payload
2) the current state and how it's updated after an action
3) what is changed from the previous state (thanks an useful DIFF panel)

But there is more:
➡️ Time Travel Debugging
➡️ Jump and Skip actions
➡️ save and load a JSON snapshots (imagine to have a bug: you can save a snapshot, send to anyone and re-create the scenario)
➡️ remote debugging
➡️ see the structure of your state by using the "chart graph"
➡️ and more...

Of course it's not simple as other micro state managers and you should not use it in any application or any case.
But there are scenarios in which this can be really useful.

😅 UNPOPULAR OPINIONS

1) Context is not a valid replacement of Redux.
2) I love Zustand, JOTAI, Valtio and other micro state managers. They are super easy to use and valid solutions for a lot of scenarios.
3) I know that some of these state managers partially support Redux Dev Tools but not completely because of different approaches.
4) We may write a state manager from scratch, or use Context or other state managers to create our own state manager but why reinvent the wheel?
Redux exists since the beginning, it's solid, tested, has a huge ecosystem, maintained and it's well know from a lot of devs
How to Convert Web to PDF Using PYTHON?
Tags: api, python, webdev, tutorial
Published: 2022-11-06 10:10:30

### WEB TO PDF Conversion

APITier extract web content as PDF from web url or html content. The APITier is converting web url or html content to PDF file. It is very Simple, easy to integrate, self-explanatory API will get you up and running in under 10 minutes. Web to PDF Conversion API is easy to use and fast API. 

You can easily call this API using python code. We’ve provided below in python code. Below are two steps for how to convert web to pdf using python.

### Step 1 
Users can need to create account and register without providing Card Details. Users can register Free with a user name (email) and password. **[Get free access API KEY](https://www.apitier.com/signup)**

The registered user gets the Unique API KEY, to access the API. API KEY can be used to access endpoints of the WEB Conversion API. 



### Step 2 
Create your PYTHON Project and install their all dependencies. After that add this code.  
In this code need to add 
 *  Your Web URL or HTML content. **For Example -** https://www.apitier.com
 *  Your APITier API KEY.  **For Example -** hv90CBlVBN9R6Tbfx4wsg3CxRTXyk9CA6bvx2f11


```
import requests
import json

url = "https://web.apitier.com/convert/url/to/pdf?x-api-key={x-api-key}"

payload = json.dumps({
  "url": "https://www.apitier.com"
})
headers = {
  'Content-Type': 'application/json'
}

response = requests.request("POST", url, headers=headers, data=payload)

print(response.text)
```
TS#1 Type-safe publish event function
Published: 2022-11-06 10:08:00

---
title: TS#1 Type-safe publish event function
published: false
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-06 10:08 +0000
published: true
---
When we design an event, the descriptors are simply the type and payload, where payload is composed of the properties describing what's happened in the system.

```ts
enum MyEvent {
  FOO = 'FOO',
  BAR = 'BAR'
}

interface MyEventPayload {
  [MyEvent.FOO]: {
    prop1: string;
    prop2: string;
  }
}

async function sendEvent<T extends keyof MyEventPayload>(type: T, payload: MyEventPayload[T]): Promise<void> {
  // implementation
}

// @ts-expect-error
sendEvent();
// @ts-expect-error
sendEvent(MyEvent.FOO);
// @ts-expect-error
sendEvent(MyEvent.FOO, {});
// @ts-expect-error
sendEvent(MyEvent.FOO, { prop1: 'x', prop2: 'y', prop3: 'z' });

// works!
sendEvent(MyEvent.FOO, { prop1: 'x', prop2: 'y' });
```

By taking advantage of the generics, we can easily construct a type-safe function where the type of arguments are dependent on each other.
Tip: JavaScript array sorting shorthand
Tags: javascript, beginners, programming
Published: 2022-11-06 10:00:00

When sorting an array of primitive values (e.g. strings or numbers), you'll often see a lot of code that looks like this:

```js
const arr = [8, 2, 1, 4, 5, 0];
// Sort in ascending order
arr.sort((a, b) => {
  if (a > b) return 1;
  if (b > a) return -1
  return 0;
}); // [0, 1, 2, 4, 5, 8]
```

While this piece of code does the job, there is also a one-line alternative for it. The trick hinges on `Array.prototype.sort()` expecting either a positive or a negative value to perform a swap between two elements, thus allowing for more flexible values than `1` and `-1`. Subtracting the numeric values in an array is sufficient and can also be used to sort the array the other way around:

```js
const arr = [8, 2, 1, 4, 5, 0];
// Sort in ascending order
arr.sort((a, b) => a - b); // [0, 1, 2, 4, 5, 8]
// Sort in descending order
arr.sort((a, b) => b - a); // [8, 5, 4, 2, 1, 0]
```

If you are working with string arrays, you should instead use `String.prototype.localeCompare()`, as it provides far greater flexibility, by accounting for specific locales and their unique needs:

```js
const s = ['Hi', 'Hola', 'Hello'];
// Sort in ascending order
arr.sort((a, b) => a.localeCompare(b)); // ['Hello', 'Hi', 'Hola']
// Sort in descending order
arr.sort((a, b) => b.localeCompare(a)); // ['Hola', 'Hi', 'Hello']
```

---

_Do you like short, high-quality code snippets and articles? So do we! Visit [30 seconds of code](https://www.30secondsofcode.org/) for more articles like this one or follow us on [Twitter](https://twitter.com/30secondsofcode) for daily JavaScript, React and Python snippets!_ 👨‍💻
GraalVM Native Image for Mobile Development
Tags: graalvm, android, ios, kotlin
Published: 2022-11-06 09:52:40

This is a 2 part article on the current state of GraalVM Native Image on mobile development. Using this technology, you can share core logic between Android and iOS.

[Part 1](https://betterprogramming.pub/graalvm-native-image-for-mobile-development-49eb87a00eee)

[Part 2](https://betterprogramming.pub/making-multiplatform-mobile-apps-with-graalvm-native-image-7e9131fb185f)

Complete source code for sample apps is available on GitHub.
VueJs Beginners part 3 - Component
Tags: webdev, javascript, vue, beginners
Published: 2022-11-06 09:50:27

I started learning VueJs and tend to share it with you step by step. Slowly, but steadily.

In this episode, we are going to see what is a component in VueJs and how we can use it.

With components, we can split the UI into small and reusable pieces and by compositing them solve a problem or make an application.


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


#Defining a Component

Vue component schema: 

```js
app.component('component-name', {
  template: `<div>component</div>`,
  data:...
  methods:...
  ,...
})

```

As you can see it's completely same as defining the app, indeed we can define a component's logic using an object of options such as `data`, `methods`.  
and with `template` option we can use the logic and expose as a component.

for instance we are going to define a component that provide a button that counts. 
Then by importing `<Count/>` , it can be used.

{% embed https://codesandbox.io/embed/vuejs-beginners-part-3-component-xw2v8t?fontsize=14&hidenavigation=1&theme=dark %}

Right now we are trying to learn Vue by injecting it to a html file, obviously there are some other ways to define the components and using them will discover them later together.

see you in the next episode 

learn more [VUE-Components](https://vuejs.org/guide/essentials/component-basics.html)
Why Programmers use const while declaring variable in JavaScript ?
Tags: javascript, webdev, programming, node
Published: 2022-11-06 09:36:52

## const
**“const” has to be initialised.**
```javascript
const n1 = 20;
console.log(n1)
```
<br>
**once you have assigned, you cannot reinitialise.**

```javascript
// Will throw error
const n2;
console.log(n2)
```
<br>
**“const” can be scoped into blocks**

```javascript
const n1 = 20;
if(n1<=20){
   const n3 = 9;
   console.log(`n3 : ${n3}`)
}
console.log(`n1 : ${n1}`)
// Will throw error if you uncomment this line
// console.log(`n3 : ${n3}`)
```
<br>
**“const” content can be modified**
-> If I assign it as an object, JavaScript does not care if you change the object. All it cares about is whether it is an object or not. Do not change it to a number or string. You can now update or change the inside of an object.

```javascript
const movie = { "title" : "Avengers" }

// will throw error
// const movie = 10; 

// But changing inside object is fine
movie.title="test"
movie.year=100
movie.genre="Action"
console.log(movie)
```
<br>
**you cannot do initialization in any of the ways**

```javascript
const n=1
n++ or n=n+1 or n=19
```
<br>
**you cannot do loop with “const”**

```javascript
for(const i=0 ; i<10 ; i++)
{
   console.log(i)
}
// will throw error at i++ at first time
```
<br>
## let
**let** follow the same rule as **const** except it can be assigned and left uninitialised.

```javascript
let n;
n=10;
n=[]
n={}
n="StringHere"
console.log(n)
```
<br>
**you can always do loop with let**

```javascript
// will run perfectly
for(let i=0 ; i<10 ; i++)
{
    console.log(i)
}
```
<br>
the value of undefined **let** variable is **undefined**

```javascript
let x;
console.log(x)                // check console => x --> undefined
```
<br>

## var
A classical way to initialise Javascript variables. The awful thing about var is It is expensive to manage in the browser.<br>
Look at that! Right there, so the _window_ will become this


![window_var](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44uuhol99tkgj4n1lyg8.png)
Global object which already exist in the browser and any **var** variable will attach itself to this thing. You can imagine with a thousand variables later, you can attach yourself to this or stop, so it’s a **security problem** and it is taking an **unnecessary memory**.
<br>
**Answer of the above question :** 
→ Always use **const** use **let** when you need to reassign variables. 
→ And avoid using **var**.
→ We need to clear things up, like that we should always use **const**. If you need to reassign the value to the reserved variable, use **let** Otherwise, never use **var**, and in my programming experience with JavaScript till now, I’ve noticed that I barely use **let**, like only in loops. Otherwise, it’s constantly happening **const**. 
Yes, if you require anything really, just use **const** all the time because of the **optimisation**.
Check GitHub for code : [Click Here](https://github.com/prkskrs/javascript-nodejs-expressjs/blob/master/const-let-var.js)
1-ый пост на дев посмотрим что получиться
Published: 2022-11-06 09:35:40

Ну а здесь текст с [сылками](http://www.ya.ru) и фотками 


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1z12o2190pt0vqo1jjk5.jpg)](http://www.ya.ru)
How To Create A Resizing Header With Plain CSS
Tags: css, tutorial
Published: 2022-11-06 09:28:47

For my projects I want to use as much CSS and as little JavaScript as possible (for accessibility reasons).

That's why I was looking for a way to resize the header when scrolling with simple CSS.

{% embed https://youtu.be/UnVGMXyhm5A %}
_Demo from website [YurisCodingClub](https://www.yuriscodingclub.com/) - tips on how to get into tech as a career switchers at any stage._

Here's what I found.

## The Code 

The project was built using Next and TypeScript.

To achieve the resizing effect, we need to create an outer and an inner container in HTML - shown here as `<header className"header-outer">` and `<div "header-inner">`.

### HTML
Here is the HTML code to create the header.

```html
<header className="header-outer">
  <div className="header-inner">
    <Link href="/">
      <div className="logo-container">
        <a className="logo" aria-label="back to home">
        </a>
       </div>
    </Link>
    <Navbar />
  </div>
</header>
```

### CSS

Here is the CSS code for styling the header.

To create the effect, we have to work with different heights and top positions for each container.

Both the outer and the inner container must have `position: sticky`. The height of the outer container is greater than that of the inner container by how much the position on top is less. You can use the height you are aiming for.

```css
.header-outer {
  align-items: center;
  background: white;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  /* set the height for the header at its max height you want */
  height: 150px;
  left: 0;
  padding: 0 50px;
  position: sticky;
  /** set the value of `top` with the difference between
  * the height of the outer and inner container to compensate
  * for this */
  top: -50px;
  width: 100%;
  z-index: 1;
}

.header-inner {
  align-items: center;
  background: white;
  display: flex;
  /** specify the height of the header that you want when scrolling 
  *The difference between this height and the height of the outer header
  *is the value of the `top` of the outer container */
  height: 100px;
  justify-content: space-between;
  left: 0;
  position: sticky;
  top: 0;
  width: 100%;
}
```

That's it.

Now, when scrolling, the sticky position of the outer container starts outside the screen by 50 (because of the negative value `top: -50px`), while now the inner container sticks at the height you aim for.

## Conclusion

There are so many great things you can do with just CSS. You just have to be a little creative and willing to find a solution for using plain CSS.

If you have other suggestions, I'd love it if you could share them in the comments below.

---
![Thank you](https://docs.google.com/uc?export=download&id=166Ecq6uBl61U14OUlkHOHIBv2ArKoumJ)

_Thanks for your reading and time. I really appreciate it!_
HTML tags
Published: 2022-11-06 09:20:18

In HTML use tags like "h" , "P", "lorem".
"h" use for header file like i am posting this Article and my title is "HTML tag" so this a basically it a my header file 
P tag use for writing a paragraph if i want to write anything like a story i use P tag. 
The lorem tag inserts a specified amount of random text
Reorder Data in Log Files
Tags: leetcode, python
Published: 2022-11-06 09:09:35

You are given an array of logs. Each log is a space-delimited string of words, where the first word is the identifier.

There are two types of logs:

Letter-logs: All words (except the identifier) consist of lowercase English letters.
Digit-logs: All words (except the identifier) consist of digits.
Reorder these logs so that:

The letter-logs come before all digit-logs.
The letter-logs are sorted lexicographically by their contents. If their contents are the same, then sort them lexicographically by their identifiers.
The digit-logs maintain their relative ordering.
Return the final order of the logs.


```py

class Solution:
    def reorderLogFiles(self, logs: List[str]) -> List[str]:

        def get_key(log):
            _id, rest = log.split(" ", maxsplit=1)
            return (0, rest, _id) if rest[0].isalpha() else (1, )

        return sorted(logs, key=get_key)
    
    


```
Creating a Styles Conference Website
Published: 2022-11-06 08:28:58


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

Been a while since I created anything, so I decided to put together an HTML/CSS website with multiple pages to continue practicing my skills and enhance my abilities.  

I enjoyed creating this project, since it gave me the opportunity to work with the box-model, column usage, CSS gradients, organizing data with tables, building forms, iframes, creating lists and practicing best code.  

The more I build projects that are similar in style, the more I feel these principles are becoming ingrained in my memory and more able to recall it at a moments notice.  It really becomes fun when it all comes together.  

https://stylesconferencesite.netlify.app/