teleren/devto huggingface dataset:
How can you access AWS S3 objects with lower latency.
Tags: aws, cloud, s3
Published: 2022-05-31 05:13:37

We can provide lower latency in AWS with the help of cross-region replication because it uses to replicate the same object to all regions so the end-user can access the object by nearest region.

**What is cross-region replication**

Amazon S3 supports cross-region replication that automatically replicates data across AWS regions with cross region replication, every object uploaded to an S3 bucket is automatically replicated to a different bucket on a different AWS region that you choose.

For E.g. you can use cross-region replication to provide lower latency data access in a different geographic region.

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

In the diagram, you can see that the user uploads an object to a specific region (Ohio) but the same object will replicate in all-region(London, Mumbai, Paris) which is decided by the user. 

When we upload the file from the source region (Ohio) it will replicate to the destination region (London, Mumbai, Paris) bucket but when we upload an object from the destination region it does not replicate to the source region bucket.

It reduces latency like data is stored in the US(Ohio) and one person lives in London to access that data the request will go to the Ohio region but if we replicate the same object in the London region as well then it will take less time to access the object.

Cross-region replication can help if you have a compliance requirement to store copies of data hundreds of miles apart.
React client error
Tags: react, javascript
Published: 2022-05-31 05:32:02

When I work with **react-quill** and **react-editor-js** I got either a double instance or an error which shows _react-dom/client error_.

I fix problem by using render method. The two of the cases caused by the same.

## Editorjs

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


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

## index.js 
`import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();`

## Fix worked for me.
import ReactDOM from "react-dom";
import React from "react";
// import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
// const root = createRoot(rootElement);
ReactDOM.render(<App />, rootElement);


My question is that, why this happening ?

More thoughts on [JSU](https://devmnj.blogspot.com)
The challenges of DevOps
Tags: devops
Published: 2022-05-31 04:59:45

There are a myriad of challenges to face in an DevOps initiative. The company must rethink its structure to enhance the process by how things are done. 

The majority of companies are unaware of the amount of work required for completing the DevOps transformation, but. According to the most recent Gartner study, the study concluded an average of the majority of% of DevOps initiatives up to 2020 won't achieve their goals due to challenges in the area of organizational learning and transformation.

"Organizational changes and education are vital to enable DevOps to flourish. This is why the factors that impact people are the main obstacles instead of technology " says Gartner Principal analyst George Spafford.

Making the right Choice for Metrics isn't an easy job.
Enterprises who are transitioning towards DevOps practices should utilize metrics to assess improvement, measure success, and identify areas that need adjustments, Forrester notes. 

For instance, an improvement in time to deploy without an improvement in the quality of deployment isn't a an effective. A well-designed DevOps program needs indicators to assist in making intelligent automated decisions. Many organizations, however, are unable to comprehend DevOps metrics.

But where do we start? Look for the measures that correspond to the rate of progress as well as throughput.

**Limited Funds**

DevOps initiatives come with difficulties as well. Due to the massive organizational and IT changes required -- including previously distinct teams becoming a team and roles changing along with other shifts, it takes time to adjust. Based on a survey of IT executives from Pensa the software company Pensa the top concerns to consider for DevOps success include:
Budgets aren't as large (cited as a factor in 19.7% of respondents)

Systems that were in earlier (17.2%)
Application complexity (12.8%)
The challenges of managing multi-environment environments (11.3%)
Corporate culture (9.4%)
Complexity

DevOps initiatives are often overwhelmed by the sheer difficulty. IT managers might have difficulty communicating the value of their work to senior executives. Concerning standardization and governance, will this result in better outcomes or does it only add layers of bureaucracy that will hinder the spirit of innovation? There's also the issue of organizational change. 

How can your team members overcome resistance to change as well as resistance? getting rid of the past of working according to certain rules? Are they able discuss their experiences and gain knowledge from other organizations, and use and integrate the most effective tools? If you're new to DevOps then you might want to consider taking the [DevOps PGP](https://www.edureka.co/executive-programs/purdue-devops).

**Unrealistic Goals, Bad Metrics Can Derail DevOps**

DevOps efforts can fail for many reasons, such as setting unrealistic expectations, tracking metrics that don't align with business goals, or implementing a half-baked DevOps effort that embraces agile methodologies while keeping IT ops and engineering/development teams in traditional silos.
React Updating State
Tags: react, tutorial
Published: 2022-05-31 04:51:29

**Overview**

In this code along, we'll discuss updating state in React.

**Objectives**

- Update state in class component
- Update state in functional component

**Updating State in class component**

If the initial value like this,
```
this.state = {
     hasBeenClicked: false,
};
```
Then update state look like this,
```
this.setState({
    hasBeenClicked: true
})
```

If the initial value is like more than values in object ,

```
this.state = {
  theme: 'blue',
  addressInfo: {
    street: null,
    number: null,
    city: null,
    country: null
  },
}
```

- Update theme like this,

```
this.setState({
    theme: ‘red’,
})
```

- Update addressInfo like this,

```
this.setState({
  addressInfo: {
    ...this.state.addressInfo,
    city: "New York City",
  },
});
```

Call a function after state has been updated
```
  this.setState({
    hasBeenClicked: true
 },
   //This callback will fire once the state has been updated
  () => console.log(this.state.hasBeenClicked)// prints true
) 
```

**Updating State in functional component**

Basic structure

```
const MyComponent = () => {
    const initialState = () => 1;
    const [value, setValue] = useState(initialState);
};

```
Using Multiple State Values

```
const [value, setValue] = useState({foo: "bar"});
setValue({foo: "foobar"});

```

```
const [value, setValue] = useState({foo: "bar", test: “demo”});

setValue({...value, foo: "foobar"});
Or
setValue(prev => {...prev, foo: "foobar"});
```

**Conclusion**

React’s useState() hook makes functional components more powerful by allowing them to possess state. You can set an initial value, access the current value with an assurance it’ll persist between re-renders, and update the state using a specially provided function.

Stateful functional components are often quicker to write than their class-based counterparts. Moreover, they can make it more obvious what’s going on in your codebase as the references to state and setState() are eliminated in favour of clear variable names. Ultimately, useState() provides flexibility and means you no longer need to convert functional components to class components the moment you require state.
I Just Realized Brave Has a Built-In Crypto Wallet
Tags: brave, crypto
Published: 2022-05-31 04:35:00

> Did you know Brave has their own cryptocurrency?


![bat logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7tw5u8bvm9kagjmy2c3.png)

My brain automatically filters out all popups, promotions and otherwise unrelated distractions that the internet is plagued with these days. But it's 2022, I can't be the only one.

Anyway, while I've been using Brave for over a year now, I haven't even noticed the occasional popups notifying me of the "tipping" system that is apparently baked right into my browser. But after finally seeing the little "tip" triangle that quietly appears on Reddit posts, I started to look into it. And it's pretty awesome.

### Basic Attention Token
They're calling it the [Basic Attention Token](https://basicattentiontoken.org/) (BAT), and it's essentially a coin that is rewarded if you choose to activate some ads on your Brave Browser. The ads aren't nefariously injected into the sites you visit, like you might initially think. Rather, you just get those Chrome-style text notification popups occasionally. Your browser then becomes a wallet to store your coins on your local machine, but you can link it with [Gemini](https://www.gemini.com/) (or Uphold, but what even is that?) to sync your accessible BAT within Brave across devices.

But the cool part is the integrations with third party sites. You can visit their [creator portal](https://publishers.basicattentiontoken.org/) and set up your Reddit, Twitter or even your personal sites to accept BAT tips, so when someone visits your page (whether it be your Tweet, Reddit profile, or website) the BAT icon on their browser will show your tag. Want an example? Check out my personal site on Brave: [shaneduffy.io](https://shaneduffy.io/)


![brave screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihlvvqtg9lyjchij917a.png)

### But Why?
A lot of the new decentralized apps are introducing their own tipping systems, and even [their own cryptocurrencies](https://steem.com/) for achieving this. But the issue with this is the difficulty of use: in order to "tip" on [Steemit](https://steemit.com/), for example, you'll need to create an account, link your wallet and transfer funds.

This isn't so bad in one case, but once every website and app starts doing this I can see it becoming pretty cumbersome. Having your crypto wallet automatically built into your browser with integrations for easily contributing to creators in a platform agnostic way is a brilliant idea, and I'm excited to see where Brave goes with it.
Deploy your Angular app to GitHub pages directly
Tags: angular, gihub, angularcli
Published: 2022-05-31 04:32:15

---
title: Deploy your Angular app to GitHub pages directly
published: true
description: Deploy your Angular app to GitHub pages directly from the Angular CLI!
tags: angular, gihub, angularcli
//cover_image: https://direct_url_to_image.jpg
---

In this tutorial we’ll see how to host an Angular web application using Github Pages. Let’s get started.

**Prerequisites**
You need to have Node.js, NPM and Angular CLI installed, you also need to generate a new Angular project using Angular CLI.

**Step 1**: `ng new child-demo` in Visual Studio IDE terminal

**Step 2**: cd child-demo

**Step 3**: command follow step by step

```
- git init
- git add .
- git commit -m "first commit"
- git remote add origin https://github.com/bipon68/child-demo.git (git remote add origin https://github.com/<username>/<repositoryname>.git)
- git push -u origin master
- npm install -g angular-cli-ghpages
- ng build --prod --base-href="https://bipon68.github.io/child-demo/" (Note: copy all file in dist folder into child-demo project folder and paste(one level up)) ($ ng build --prod --base-href "https://<YOUR_GITHUB_USER-NAME>.github.io/<YOUR_REPO_NAME>/"
)
- angular-cli-ghpages
- Your project should be available at - https://<username>.github.io/<repositoryname> (Sample example : https://bipon68.github.io/child-demo/)
```
**Reference**
[angular cli ghpages](https://github.com/angular-schule/angular-cli-ghpages), [Upload angular Project github Pages](https://www.youtube.com/watch?v=ScGfjQC6Kd4)

[Source Code](https://stackblitz.com/github/bipon68/child-demo)
[Github](https://github.com/bipon68/child-demo)
How to Rotate an Array in Java
Tags: dsa, array, java
Published: 2022-05-31 04:23:57

In this blog, we will learn what exactly array rotation is? And how to rotate an array either in the left or the right direction. Here rotation only means shifting the elements of the array in the desired direction.

## Example
```
Input  : Arr[] = [1, 2, 3, 4, 5]
k = 2

OutPut : Arr[] = [4, 5, 1, 2, 3]
```

## Explanation
Initially, the array was [1, 2, 3, 4, 5], if we rotate the array once (k=1) towards the right, the element will shift from the index 0 to index 1 Similarly, we need to shift all elements towards the right, which means the last element will end up with at the first position.

Now after the first rotation – Arr[] = [5, 1, 2, 3, 4]

If we rotate on more time – Arr[] = [4, 5, 1, 2, 3] - k = 2

Similarly, if we want to rotate the array towards the left. In that case, we have to shift the elements to the left, the element will shift from index 1 to index 0, and the other elements as well making the first element the last element of the array.

```
Input  : Arr[] = [1, 2, 3, 4, 5]
k = 2 

Output : Arr[] =  [3 4 5 1 2] 
```

## How to solve it
There are many kinds of approaches, but we will only be seeing two approaches in this blog They are – 

1. Using the temp array
2. By reversing the Array

## Approach 1 – By using the Temp Array
The idea is simple, we will create a new array of size k and store the elements equal to k from either start or the end of the array depending upon the type of rotation we are doing, and then put them back in the original array where they were supposed to be placed after rotation. Check the example given below in which we are rotating k times towards left, to understand the approach better.

## Example
Input arr[] = [1, 2, 3, 4, 5] 
k = 2 

1. Store the first k elements in a temp array: temp[] = [1, 2]
2. Shift rest of the elements(according to the given data/ question): arr[] = [3, 4, 5,]
3. Store back the k elements: arr[] = [3, 4, 5, 1, 2]

[Continue Reading](https://tekolio.com/how-to-rotate-an-array-in-java/).
Channels no go
Tags: go, braziliandevs, beginners, todayilearned
Published: 2022-05-31 02:43:35

Channel no Go é uma forma de declarar um canal de comunicação entre os projetos que estão rodando

para declarar um channel podemos usar apenas o `msg := make(chan string)` e para passar mensagens para ele podemos utilizar o operador `<-`, então por exemplo `msg <- "olá"` passa o valor "olá" para o channel `msg` e para tirar esse valor do channel tambem usamos o mesmo operador então vai ficar por exemplo `result := <-msg`

```go
func main() {
	msg := make(chan string)

	go func() {
		msg <- "Hello World"
	}()

	result := <-msg
	fmt.Println(result)
}
```

Essa função main quando executada vai escrever no console "Hello World"

ps: o channel só pode receber um novo valor depois de ser "esvaziado", para esvaziar um channel é como faço ao atribuir o valor dele para result


## Comunicando entre routines
Como eu havia dito antes o channel é uma forma de termos comunicação entre go routines. Uma forma de demonstrar isso é a seguinte

```go
func main() {
	channel := make(chan int)

	go func() {
		for i := 0; i < 10; i++ {
			channel <- i
		}
	}()

	go func() {
		for {
			fmt.Println(<-channel)
		}
	}()
	time.Sleep(time.Second)
}
```
Nesse caso além de estarmos passando o valor de uma função para a outra sem gerar race conditions, ainda temos uma dependência entre as funções pois a primeira função só pode continuar atribuindo valor para o channel quando ele for esvaziado enquanto que a segunda função é responsável por esvaziar ele. 

É como se fosse uma corrida de revezamento, onde um depende do outro, no caso na corrida o corredor precisa que o seu parceiro chegue até ele, já no channel a primeira função precisa que o channel seja esvaziado

ps: é importante lembrar de usar o `close(channel)` depois de terminar de usar o channel

## Deadlock

O deadlock acontece quando criamos um channel e atribuimos um valor a ele sem que o channel rode dentro de uma go routine

```go
func main() {
	channel := make(chan int)
	// channel <- 10 DEADLOCK !!
	go func() {
		channel <- 10
	}()
	fmt.Println(<-channel)
}
```
How Tailwind works and integrate JIT: A big improvement on the productivity at development.
Tags: tailwindcss, beginners, css, opensource
Published: 2022-05-31 04:18:30

### What is Tailwind

Tailwind  is a utility CSS framework, that instead of define classes with prebuilt styles you’ll be able to add the css properties as a class. For example, ‘mt-10’ to define margin top with the existing values on tailwind. It’s also known that the principle of this framework is mobile first, is designed to be  responsive so we can build the desktop, tablet and mobile version of a project. 

Tailwind has one of the easiest learning curve and is highly recommended if you just started the journey of web development.

### Tailwind Plugins

Currently Tailwind is on their version 3.0 built by their own development community as an Open Source project everyone can collaborate.  But sometimes we need prebuilt components, and we also want to customize it. 

Tailwind offers some plugins such as: 

- Tailwind CSS Typography: This plugin provides a set of **`prose`**
 classes you can use to add beautiful typographic defaults to any vanilla HTML.
- Tailwind CSS Forms: A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
- Tailwind CSS Aspect ratio: This plugin provides a composable API for giving elements a fixed aspect ratio.

### Headless UI: Component library

Headless UI is a project build by Tailwind Labs, it includes completely unstyled and fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Compatible for   implementing with React js or Vue js. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8wde1mkmdiz4nx0lzgh.jpg)
 

Some examples of this library  components: 

- Menu ( Dropdown)
- Switch (Toggle)
- Listbox (Select)
- RadioGroup

### JIT (Just in Time) compiler

The Just-In-Time (JIT) compiler is a component of the runtime environment that improves the performance of applications by compiling bytecodes to native machine code at run time.

The JIT compiler is enabled by default. When a method has been compiled, the JVM calls the compiled code of that method directly instead of interpreting it. Theoretically, if compilation did not require processor time and memory usage.

The way this is implemented on the 3.0 version of tailwind CSS allows us to watch on real time the changes on our CSS styles. It also allow us to use arbitrary values on our project in case we wanted to build our own Design system.  

### But, how this improves our productivity?

The key of develop a better product is have enough time to take care of the details, If we have the tools to work faster with a CSS framework that allows us to watch changes on real time, Frontend developers will have more time to focus on customizing how the product looks and developing a high quality software. This can increase our productivity levels cause we can focus on other  important things at the same time that we create.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9ojdfllbmm46jiy91fn.png)
How to Debug Syncfusion Blazor Source Code Using the Source Code Add-on
Tags: blazor, webdev, dotnet, csharp
Published: 2022-05-31 03:58:16

Learn how to debug Syncfusion Blazor source code using the Source Code add-on. In this video, you will learn how to debug the Syncfusion.Blazor source package and the individual source packages, as well as how to debug the JavaScript files using the Syncfusion Blazor Source Code Add-on. 

**Product Overview**: https://www.syncfusion.com/blazor-components

**Explore our tutorial videos**: https://www.syncfusion.com/tutorial-videos

{% youtube ZPspVfWIQb0 %}
Mermaid snippet
Tags: diagrams, markdown
Published: 2022-05-31 03:30:29

Mermaid is a diagram creation tool built in the Github. You can create a diagram by typing '''mermaid''' on a markdown file (You have to replace quotes with back quotes actually).
Here a sequence diagram snippet being referred as a sample.

```
'''mermaid
sequenceDiagram
    %% Participants
    participant A as Alice
    participant B as Bob
    link A: Go to Wiki @ https://en.wikipedia.org/wiki/Alice

    %% Main loop
    autonumber %% Turn on sequence numbers on arrows
    loop Every minute
        opt A is ready
            A->>+B: OK?
        end
        note left of A: Note for Alice
        note right of B: Note for Bob
        alt B is ready
            B-->>A: Yes
        else B is not ready
            B-->>-A: No
        end
        note over A,B: Note for both
    end
'''
```

To render the sequence diagram you wrote at Intellij, enable "mermaid" markdown extension:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq4sryxf8hmd4vc7dqt9.png)
Code Smell 137 - Inheritance Tree Too Deep
Tags: oop, javascript, tutorial, python
Published: 2022-05-31 03:10:39

*Yet another bad code reuse symptom*

> TL;DR: Favor composition over inheritance

# Problems

- [Coupling](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7)

- Subclassification Reuse 

- Bad cohesion

- Fragile base classes

- Method overriding

- Liskov Substitution

# Solutions

1. Break clases and compose them.

# Context

Old papers recommended using classes as a specialization for code reuse.

We learnt that composition is a more efficient and extensible way to share behavior.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/ca80ab1c2443f8494817c027678ab7f3)
```python
classdef Animalia
   
end

classdef Chordata < Animalia 

end

classdef Mammalia < Chordata 

end

classdef Perissodactyla < Mammalia 

end

classdef Equidae < Perissodactyla  

end

classdef Equus < Equidae 
//Equus behaviour
end

classdef EFerus < Equus
//EFerus behaviour
end

classdef EFCaballus < EFerus
//EFCaballus behaviour    
end


```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/23622a20da88b3192eb97577557a1f08)
```python
classdef Horse       
    methods        
      // Horse behavior       
    end    
end
```

# Detection

[X] Automatic 
 
Many linters report *Depth of inheritance tree (DIT)*. 

# Tags

- Hierarchies

# Conclusion

Look after your hierarchies and break them often.

# Relations

{% post https://dev.to/mcsee/code-smell-11-subclassification-for-code-reuse-1136 %}

{% post https://dev.to/mcsee/code-smell-43-concrete-classes-subclassified-40fp %}

{% post https://dev.to/mcsee/code-smell-58-yo-yo-problem-ej9 %}

{% post https://dev.to/mcsee/code-smell-37-protected-attributes-4n4 %}

{% post https://dev.to/mcsee/code-smell-125-is-a-relationship-46f4 %}

# More Info

- [Coupling: The one and only problem](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7)

- [Wikipedia](https://en.wikipedia.org/wiki/Cyclomatic_complexity)

* * *

> Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.

_Bertrand Meyer_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}