teleren/devto huggingface dataset:
🤔 SQL vs NoSQL?
Published: 2021-04-04 22:01:15

> 📝 궁금한 모든 것을 기록합니다.
😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

# 🤔 SQL?
SQL은 Structured Query Language의 약자며 구조화된 쿼리 언어이다. SQL은 데이터베이스 언어의 기준으로 주로 관계형 데이터베이스에서 사용된다. 대표적인 관계형 데이터베이스로는 MySQL, Oracle, SQLite, PostgreSQL, MariaDB 등이 있다. 여기서 쿼리란 저장되어 있는 정보를 필터하기 위한 질문으로 원하는 데이터만을 가져오게 도와준다. SQL은 구조화된 테이블을 사용하는 DB(데이터베이스)에서 사용가능하다. 관계형 DB에서는 테이블을 사전에 정의한 뒤에 그에 알맞는 데이터만 넣을 수 있다. 그렇기에 처음 스키마 설계시 필요할 것으로 예상 되었던 데이터보다 더 많은 데이터를 다루게 되었다고 쉽게 스키마를 변경할 수 없다. 이를 보완하기 위해선 ORM을 사용할 수 있다. (Sequelize, TypeORM, 등) 
관계형 DB는 스키마 설계시 one-to-one, one-to-many, many-to-many를 명확이 규정을하고 스키마를 짜야한다. 이렇게 함으로 중복되거나 잘못 입력된 데이터가 쉽게 DB에 삽일될 수 없다는 장점을 가지고 있다. 

## 🧐 Where to use SQL?
- 초기 스키마 구성을 통해서 대부분의 데이터를 처리할 수 있을 때
- 스키마 구조는 비교적 간단하지만 Update가 많을 때
- Scale up을 해야하는 경우가 적을 때 (서버의 성능이 향상되어야 됨)

# 🤔 NoSQL?
SQL이 구조화 쿼리 언어라면, NoSQL은 비구조화 쿼리 언어이다. SQL이 관계형 데이터베이스로 테이블로 구조화되어 연결되어 있다면, NoSQL은 비관계형 데이터베이스로 데이터가 고정되어 있지 않다. JOIN(no Relations)의 개념이 사라지고, JOIN이 없기 때문에 조회가 SQL보다 비교적 빠르다. NoSQL 기반의 비관계형 DB는 다양한 타입으로 구성될 수 있다.
- Key-Value 타입: 여기서 key는 속성 이름을 뜻하고, value는 속성에 연결된 데이터 값을 뜻한다.
- 문서형(Document) 타입: 데이터를 문서처럼 저장한다. 보통 JSON 유사 형식으로 데이터를 문서화한다. 각각의 문서는 하나의 속성에 대한 데이터를 가지고 있고, 컬렉션이라 하는 그룹으로 묶어서 관리한다. 대표적인 문서형 DB로는 MongoDB가 있다.
- Wide-Column 타입: DB의 열에 대한 데이터 관리를 중점으로 삼고, 각 열에는 key-value 형식으로 데이터가 저장되고, 컬럼 페밀리라 하는 열의 집합체 단위로 데이터를 처리한다. 대표적인 Wide-Column DB로 Cassandra, HBase가 있다. 
- 그래프 타입: 자료구조 그래프와 비슷한 형식이다. 대표적인 해당 DB로 InfiniteGraph, Neo4J가 있다. 

## 🧐 Where to use NoSQL?
- 이후에 어떤 데이터가 추가될 지 예상할 수 없을 때
- Read / Write가 Update가 보다 현저히 많을 때
- Scale up을 해야하는 경우가 많을 때 (서버의 수량만 더 추가하면 OK)

## 👀 References
- [SQL vs NoSQL or MySQL vs MongoDB](https://www.youtube.com/watch?v=ZS_kXvOeQ5Y)
- [Difference between scaling horizontally and vertically for databases [closed]](https://stackoverflow.com/questions/11707879/difference-between-scaling-horizontally-and-vertically-for-databases)
Flexbox
Tags: css, html, braziliandevs, beginners
Published: 2021-04-04 22:01:09

# O que é FlexBox
> O CSS Flexible Box Layout, conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação de candidatos (CR) do W3C. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela (ou dispositivo).

Como a própria Wikipedia diz, facilita nossa vida na hora de criar layouts, e como facilita... Criar layouts complexos com linhas e colunas parece brincadeira de criança com FlexBox.

## Como funciona o Flexbox
Seu uso e conceito são bem simples, normalmente aplicamos o Flexbox em elementos que possuem filhos para ajustá-los da forma que queremos. Como assim?
```
<div class="container">
 <h1>Eu sou o filho 1</h1>
 <h2>Eu sou o filho 2</h2>
</div>
```
Podemos dizer que a nossa div com a classe **container** é a candidata perfeita para ser `display: flex`


## Propriedades do Flexbox
A partir do momento que definimos um elemento com `display: flex`, podemos usar as propriedades `align-items`, `justify-content` e `flex-direction`, além de outras.

### flex-direction
Por padrão a propriedade **flex-direction** vem com o valor padrão de **row**, isso significa que o posicionamento será sempre na horizontal. Podemos modifica-lo para **flex-direction: column** que muda o comportamento para colunas, ou seja, na vertical. Isso influencia diretamente nas outras propriedades do Flexbox, caso o **flex-direction** seja **column**, **align-items** e o **justify-content** vão inverter as direções.

### align-items
A propriedade **align-items** possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores: `center`, `flex-start` e `flex-end`.

**center** como o próprio nome diz, posiciona os elementos horizontalmente/verticalmente ao centro.

**flex-start** posiciona os elementos horizontalmente/verticalmente ao inicio.

**flex-end** posiciona os elementos horizontalmente/verticalmente no final.

### justify-content 
A propriedade **justify-content** possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores os mesmo do **align-items** com a adição de `space-between` e `space-around`.

**space-between** posiciona todos os elementos horizontalmente/verticalmente com o máximo de espaço entre eles

**space-around** posiciona os elementos horizontalmente/verticalmente com o máximo de espaço **ao redor** deles.

## Agora um exemplo com Flexbox
Vamos construir a barra de navegação do próprio Dev.to. Com apenas 3 linhas de CSS conseguimos ter o posicionamento idêntico, mostrando o poder do Flex box.

**HTML**
```
<nav>
  <div>
    logo
    <input type="search">
  </div>
  
  <div>
    <button>Write a post</button>
    <span>Icone 1</span>
    <span>Icone 2</span>
    <span>Imagem</span>
  </div>
</nav>
```


**CSS**
```
nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
```

Claro, estamos olhando apenas para o posicionamento dos elementos e não para a estilização.

**Resultado**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb5dv6fijbc200sa3slt.png)
🤔 some() & every()?
Published: 2021-04-04 22:00:41

> 📝 궁금한 모든 것을 기록합니다.
> 😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
> 🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

# 🤔 some()?
some 메서드는 배열 안의 어떤 요소라도 주어진 함수를 통과하는지 테스트한다.
콜백함수는 주어진 배열의 요소를 검사해서 참인 값을 찾는다.
그리고 some 메서드에서는 단 하나의 요소라도 콜백함수에서 참인 값이라면, 즉시 true를 반환하고 순회가 중단된다. 모든 값이 거짓이라면 false를 반환한다.  
```js
const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true
```

# 🤔 every()?
every 메서드는 배열 안의 모든 요소가 주어진 함수를 통과하는지 테스트한다. 
every 메서드는 콜백이 거짓을 반환하는 요소를 찾을 때까지 배열의 각 요소에 콜백함수를 실행한다. 해당 요소를 발견하면 즉시 false를 반환하고, 순회가 중단된다. 모든 값이 참이면 true를 반환한다. 
```js
const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true
```

## 👀 References
- [MDN - Array.prototype.some()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
- [MDN - Array.prototype.every()](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every)
Day 0: Things I Learnt Today (TILT). The beginning.
Published: 2021-04-04 21:35:16

![Photo by <a href="https://unsplash.com/@lastly?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tyler Lastovich</a> on <a href="https://unsplash.com/s/photos/new-dawn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwe70m27urehbc3d4zuj.jpg)
Today, I decided to start a challenge to write a post of things I learn every day.

I love how the acronym spells TILT.
It signifies how things are done and learnt every day to contribute to ones tilting forward in becoming a greater version of oneself.

Some topics that interest me:
- Technical project management (a topic I am interested in at the moment)
- Fronted web development (React, JavaScript, GraphQL)
- Personal development

Hoping to enjoy this journey of publicly documenting my daily progression! :smile:
Elasticsearch timezone issue with Laravel
Tags: laravel, php
Published: 2021-04-04 21:33:36

---
title: Elasticsearch timezone issue with Laravel
published: true
date: 2021-04-04 21:32:15 UTC
tags: laravel,php
canonical_url: https://adithya.dev/elasticsearch-timezone-issue-with-laravel/
---

After noticing something funny in my query results with Elasticsearch, I digged down to see what was happening. A lot of head scratching, cups of coffee after - the issue made sense.

My [Laravel project](https://arbeitnow.com/) has an elasticsearch query using Laravel Scout to fetch all records created in the last hour

```
'range': {
	'created_at': {
		'gte': 'now-1h' 
	}
}
```

I executed this on Kibana's dev tools and the results with my sample data set was fine. Once I started syncing the data from MySQL to an Elasticsearch Index, the appropriate result set wasn't being retrieved.

Turns out that Elasticsearch always stores the timestamps in [UTC](https://www.elastic.co/guide/en/elasticsearch/reference/current/mapping-date-format.html) where as the timezone in my Laravel project is set to CET which is +2 UTC.

Be careful here though - it isn't as simple as changing the timezone on your app (you probably shouldn't!) and you also cannot change the timezone on Elasticsearch. `now` is [not influenced](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-range-query.html#range-query-time-zone) by the `time_zone` parameter in a range query.

```
//In MySQL record - created_at
2021-04-04 22:12:09

//In Elasticsearch Index 
2021-04-04T20:12:09.000000Z
```

For now, all I can think of is to account for the +2 UTC and hard code it to `now-3h` which works _for now._ Ideally, all of the dates synced should be converted to UTC and stored which would solve this issue.
.Net Reverse Proxy with YARP
Tags: csharp, dotnet
Published: 2021-04-04 20:39:00

How about creating a reverse proxy with .NET Core or .NET 5?
If you had to do that once, you should know [**YARP**](https://microsoft.github.io/reverse-proxy/articles/getting_started.html)!

YARP is a Reverse Proxy project that Microsoft is working on. For now, it is in preview, but it's an easier way to create a simple reverse proxy for our applications.

##How does it work?

In this [**GitHub**](https://github.com/yt-tech-knowledge/proxy-sample/tree/main/ProxySample/src), you can find a sample that presents how we can use YARP:

- ProductA: the API that can only list "products".
- ProductB: the API that can only insert new "products"
- Proxy: the reverse proxy that will redirect each request to APIs: ProductA and ProductB.

Basically, what we need to create a simple Reverse Proxy is to set Routes and Clusters in ***appSettings.json*** from the Proxy project.

For each Route we should:
- Define how we want to expose an API.
- Set the API original path that Reverse Proxy must redirect our calls.
- Define which Cluster is associated with API.

For Cluster settings, we should define the host address for each API exposed by YARP. When we call a route, YARP will call the original path concatenated with the API address defined in the Cluster section.

See below a sample of YARP settings:

{% gist https://gist.github.com/yt-tech-knowledge/e0c44e7baee3246b67ea7764046754b2 %}

Finally, in our startup class, we need to register YARP and load all settings. 

{% gist https://gist.github.com/yt-tech-knowledge/1976eab44349b16a4d35c21959f5f7ee %}

After that, we need to add each route defined in our Proxy appSettings.json to endpoint collections.

{% gist https://gist.github.com/yt-tech-knowledge/4b8f00eca82e2b94c97d01159e7f9e7c %}

It's done! Now we can call our APIs through our reverse proxy. Try to get a list of products by this endpoint: ***http://localhost:5000/produto***

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dloaldvlhj9fbycpjhqc.png)
 
As presented above, when we call a route from our Proxy, the request is redirected to the original API, in this case to ProductA API.
Scoping and Namespacing in Javascript
Tags: javascript, webdev, programming, frontend
Published: 2021-04-04 20:08:52

While the notion of scope is a fundamental part of programming,  I keep running across new ways the concept is applied, especially with the plethora of Javascript namespacing techniques that exist. 

This weekend, I captured my thoughts on the subject in an article about scope and namespacing in Javascript. 

<a href="https://medium.com/codex/scope-your-javascript-variables-like-a-pro-257af6c913eb?source=friends_link&sk=359e010236e843ce1f02aa0bf0167607" target="_blank">Scope Your Javascript Variables Like a Pro</a>

The first part of the article introduces the idea of global and local scopes, with a few examples of how <code>let</code> and <code>var</code>, the two ways to initialize a JS variable, handle scope differently. 

After this, the second part delves into namespacing. Here, I ​include examples of <em>static namespacing</em> using direct assignment and object literals, as well as <em>dynamic namespacing</em> using immediately invoked function expressions (IIFEs) and the module design pattern.

There are many other namespacing variants that you will run across by studying Javascript frameworks and libraries. In addition to introducing the concepts of scope and namespacing, I hope that this article will be a good starting point towards learning more about how developers scope their frameworks and libraries to make them modular and compatible with the apps and websites that would use them.

Thanks for reading!
How to access your laragon local projects using Android phone
Tags: laravel, android, localhost, laragon
Published: 2021-04-04 19:58:58

Here i'm back with a little tutorial for you guys especially the team mobile developers that uses laravel as their backend and love using laragon as their local testing server. This particular tutorial details you on how to use your mobile phone to access all your laragon local files easily. *why do you need that if you may ask me?* **Okay let say for example you are developing a web app and you want to test the responsiveness cross devices from desktop to mobile view**, here is an easy way to go about it without deploying your web app on live server.

  You can also check this => [How to create your own alias for “php artisan” command on cmder](https://dev.to/donejeh/how-to-create-your-own-alias-for-php-artisan-command-on-cmder-5hhi). 

#Requirement
=> Android Phone.
=> Laptop or Desktop(where you are doing your development)
=> [Laragon server](https://laragon.org/).
=> USB or WIFI connections.

The above requirement are important for this tutorial to be successful. **okay let started**

STEP 1: very important You need to be connected on Thesame network either *via WIFI or USB TETHERING* make sure is connected else it wont work. ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmcic4yx8s9thc2absxa.png)

Above image shows my own connection using USB TETHERING..

STEP 2: Open your cmd **(windows key + r type cmd)**. Type **ipconfig** to list all the available network connection on your system.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgzdomb0b7ad2o3v4m5v.PNG)

Scroll down and look for **WIFI or Ethernet** 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2ekazsqfkpe0il3txde.PNG)
As you can see my connection on **Ethernet** and the listed IP address assigned to it. Just noted it down or copy the **IP ADDRESS** somewhere.

STEP 3: Goto your mobile phone browser, i love using chrome, so  open it and type the IP ADDRESS you copy from your **pc cmd** and hit enter. BOOM ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4i3609rsedm2cihxsp9c.png)
 
Above image shows you the root of my laragon projects files in which you can access all the file or project you currently working it.

**For more tutorial like this like, share and also comment if you have any question or issues.**

Follow me on X for more.. [Ejeh on X](https://twitter.com/don_ejeh)
Intro to Data Structures
Published: 2021-04-04 19:53:52



I have begun the process of studying data structures and algorithms.  I would like to share what I have been learning in hopes that other people can learn as well. 

I am going to start off by discussing data structures and give a brief overview of what it is. The definition of data structures according to Wikipedia is a data organization, management, and storage format that enables efficient access and modification. Basically, its a group of data that will be organized in a certain way, so that the data can be used efficiently.

Algorithms on the other hand is just a step by step process of how to do a certain task. In this blog I will only discuss data structures.

Here is a list of various data structures:

 1. **Array-** contains a group of elements. Usually of the same data type such as an integer or string. It is usually used because it can be easily sorted or searched.
 2. **Linked list**- it is a linear collection of data and the order is not by its specific physical placement in memory. Each element has a pointer that points to the next. Linked list consists of a collection of nodes.
 3. **Stack**-is a collection of elements that are placed one on top of the either. It has two operations that are very helpful push which adds an element to the stack and pop which removes the most recent element.
 4. **Queue**-is a collection of entities that is kept in a sequence. The queue can only be modified by adding an element to the rear which is called enqueue and removing an element from the front which is called dequeue.
 5. **Binary tree**-is a tree data structure that each node has two children a right and left child. 
 6. **Heap**-is a special tree that is binary. A heap can have two types max-heap which is the root node must be bigger than all of its children and min-heap is just the opposite which means that the root node must be less than all of its children.
 7. **Hashing**- is a process of mapping keys into a hash table and this is done by using a hash function.
 8. **Graph**- a data structure made up of nodes or vertices and edges are the connections between the nodes. Usually the representation of a graph would be of nodes represented by circles and edges as lines between the circles.
 9. **Matrix**- represents a collection of numbers and they are arranged by rows and columns.

This is what I got so far. In my upcoming blogs I will go into more detail for each data structure. 

Happy coding!
Never Ask Me, Why?
Tags: discuss, programming, productivity, beginners
Published: 2021-04-04 19:46:58

The problem that is often faced by many programmers (especially beginners) is the opportunity to write documentation. Like me in those stupid times, I was too busy with ideas that I found interesting and fun to be able to experiment and discover something new.

But all those experiments and discoveries just GONE after the full moon.

How important is writing documentation as a programmer?

## Documentation is history

History is written on purpose to find out how stupid we are from time to time and can be fun for us every now and then because we know that we were actually smart before.

## Documentation is a mind map

By writing documentation we can map thoughts and organize the flow of a system to achieve the desired goals. Because we realize that our brains are big and complicated, we often get lost in them. With documentation, we can by knowing how we can get started accordingly and get things done.

## Documentation is Novel

Writing documentation is the same as writing a novel, because basically all programming languages ​​are languages ​​for communicating, the language used to interact with machines and don't forget about humans.

In a program there are various kinds of plots, surprises, emotions, and characters for each feature or figure.

How nice would it be if we or even other people could read it and find out how great or stupid we were in making a program.

How about you? Do you guys enjoy writing documentation too?
Backend Musings E01 - Stability vs Velocity. 
Tags: architecture, startup, microservices, programming
Published: 2021-04-04 18:55:46

Any complex software must be cynical if it has to be stable. Such systems expect bad things to happen, and do not trust external external systems. They are designed and developed in a way that it doesn’t even trust itself, so internal barriers are put to protect itself from failures. They also avoid getting too intimate with other systems, because it could get hurt. 
 
When writing complex enterprise software, it is practically impossible to ensure bug free code when you release to production. In an early stage startup environment, the focus is on implementing features at minimal cost, which would lead to choosing the easiest design over the more costly but correct design. This happens mostly because you have a very short runway before you go bankrupt, and the business team might be following multiple leads or features out of which only one or two would ultimately make the product a success. 

Highly stable design usually costs the same to implement as the unstable one. The product as a whole being “stable” doesn’t mean that your individual applications or services have to stay up and running, but rather that the user can still get the work done. No matter how smart the engineers you hire are, individual services are going to crash. A robust system keeps processing user requests even when there are component failures. 

Before the catastrophic failure, some component of the system has to initially fail. The key is to contain the trigger, preventing it from spreading and taking the entire system down. Denying the inevitability of failures robs you of your power to control and contain them. Once you accept that failures will happen, you will have the ability to design your system’s reaction to specific failures.

At each step in a chain of failure, the crack may accelerate, slow or stop. A highly coupled system with many degrees if coupling offers more pathways for  the cracks to propagate along. 

![stephen-leonardi-5CH1TNfcZoo-unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9bg5wfmifawoupbbsbi.jpg)

The initial design decisions you take has a huge impact on stability in the long term, but those ironically are the exact decisions you have to make in the early stage with the least amount of knowledge. These are also sadly the decisions which are the most difficult to reverse later on. Stability can’t and should not be traded for velocity. 

Thoughts?

Related Reads: 

[Release It!: Design and Deploy Production-Ready Software (Pragmatic Programmers)](https://pragprog.com/titles/mnee2/release-it-second-edition/)