teleren/devto huggingface dataset:
GitHub - Adiciona Mermaid para suporte nativo para ferramenta de diagramação
Tags: github, mermaid, documentation, tools
Published: 2022-03-22 04:28:48

![Octocat Surf Mermaid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hq3kvxc93uavcgvxgldk.png)

Nós desenvolvedores supostamente vemos um aumento de produtividade de 50% quando a documentação é detalhada e disponível em diferentes formatos, mas anteriormente, se você quisesse incluir imagens e/ou diagramas em arquivos Markdown no **GitHub**, era necessário incorporar uma imagem. A partir de então, no entanto, os desenvolvedores agora podem incluir diagramas e fluxogramas gerados usando a popular linguagem Mermaid. Portanto, o que aconteceu é que o GitHub adiciona **Mermaid** para suporte nativo para ferramenta de diagramação baseada em JavaScript.

Isso permitirá que os usuários compartilhem informações por meio de formatos visuais ricos, oferecendo melhor gerenciamento e qualidade de projetos e fluxo de trabalho aprimorado.

A diagramação e a documentação custam um tempo precioso do desenvolvedor e ficam desatualizadas rapidamente. No entanto, não ter diagramas ou documentação prejudica a produtividade e dificulta o aprendizado organizacional.

A Mermaid aborda essa situação Catch-22 reduzindo o tempo, o esforço e as ferramentas necessárias para criar diagramas e gráficos modificáveis que, por sua vez, resultam em conteúdo mais inteligente e reutilizável. 

Mermaid, como uma ferramenta de diagramação baseada em texto, permite atualizações rápidas e fáceis e torna a documentação muito mais fácil. Ele também pode ser incluído em scripts de produção e outras partes de código conforme a necessidade.

O diretor de relações com desenvolvedores do GitHub, Martin Woodward, explica que o Mermaid “suporta vários tipos de diagramas comuns para projetos de software, incluindo fluxogramas, UML, gráficos Git, diagramas de jornada do usuário e até o temido gráfico de Gantt”. Adicionar diagramas Mermaid à documentação do GitHub é muito simples. Ao marcar um bloco de código como mermaid um iframe será gerado. Ele então pega a sintaxe bruta do Mermaid e passa para o **Mermaid.js**, transformando esse código em um diagrama em seu navegador onde você pode exportá-lo ou simplemente pegar o link e adicionar no seu readme, para isso basta acessar [por aqui](https://mermaid.live/edit#pako:eNpVkM-KwkAMxl8l5OSCfYEeBG3Vi6Cgt46H0InOIPOHdMoibd99p5aF3ZyS7_t9IWTANmjGEp9C0cCtVh5ybZvKiO2So-4ORbEZj5zABc_vEXarY4DOhBitf34t_G6GoBpOM8aQjPWvabGqT_7seYS6OVFMId7_OrfvMMK-sReT1_93jHBOHZoHlQ8qWhKoSD4IrtGxOLI6nz7MisJk2LHCMrea5KVQ-SlzfdSUeK9tCoJlkp7XSH0K17dvf-eFqS3lL7hFnH4ABg5bBA).

Fontes onde pesquisei esse conteúdo:

- https://imasters.com.br/noticia/github-adiciona-suporte-nativo-para-mermaid-que-facilita-criacao-de-diagramas
- https://docs.github.com/pt/enterprise-cloud@latest/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams
- https://github.com/mermaid-js/mermaid
Hire ReactJs Developers in 2022
Tags: javascript, reactj, hirewebdevelope
Published: 2022-03-22 04:23:39

ReactJs is one of the most loved open source web development fabrics by inventors worldwide. [Hire React Native Developers](https://externlabs.com/hire-react-native-developer.php) Due to having several advantages, the enterprises also prefer to have robust web operations that they can work for their separate business. Read this blog to know further about how to hire ReactJS inventor? 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl1r6da1okzty0tl9fgr.jpg)
Terraform - Como baixar e instalar no macOS
Tags: terraform, beginners, tutorial, macos
Published: 2022-03-22 04:15:18

![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcdj4y0hh19gmn0qpiud.png)
 
A primeira coisa que é necessária para utilização do Terraform é instalação no sistema operacional que utiliza ou em qualquer servidor em nuvem que estivesse usando. Existem muitos recursos disponíveis online que o orientam nas etapas de instalação e, é claro, os documentos do Terraform também têm um guia de instalação muito bons.

### Pré-requisitos
- Um computador/notebook com sistema operacional com macOS instalado
- Alguns conhecimentos básicos de CLI

### Mãos a obra
Vamos começar a instalação do Terraform, seguindo alguns passos que estão decritos abaixo:

- Primeiramente faça login no sistema e crie uma pasta para o executável do Terraform:

```
sudo mkdir -p /opt/terraform
```

Navegue até a nova pasta:

```
cd /opt/terraform
```

Agora vamos navegar até a página de download do Terraform, onde serão listados os downloads do Terraform para várias plataformas, e para isso navegue até a seção Windows e baixe a respectiva versão.

![Mac](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ofivzuatfy9xwiaz02s.png)

Baixe o arquivo `zip` na pasta criada anteriormente:

```
sudo curl -O <copied_url>
```

Descompacte os arquivos do Terraform na pasta atual:

```
sudo unzip <zip_file_name>
```

Os arquivos descompactados estarão na pasta atual, adicione o Terraform ao PATH. Navegue até a pasta inicial e execute este comando para abrir e editar o perfil bash:

```
sudo vi ~/.bash_profile
```

Adicione estas duas linhas no arquivo aberto:

```
PATH="/opt/terraform:${PATH}"
export PATH
```

Execute o arquivo para que as alterações de caminho:

```
source ~/.bash_profile
```

Agora que o Terraform está instalado, verifique a versão do Terraform executando

```
terraform –version
```

Pronto, agora seu Terraform foi instalado corretamente agora é só usufruir do mesmo.

Fontes onde pesquisei esse conteúdo:

- https://learn.hashicorp.com/tutorials/terraform/install-cli
- https://www.hashicorp.com/resources
- https://www.hashicorp.com/blog/products/terraform
The First Few Lines
Tags: javascript, codenewbie, beginners, html
Published: 2022-03-22 04:08:21

Hey there!

I'm Jonathan, and I decided to give Dev.to a shot for keeping track of my coding journey. It is one that I have started several times, but a path I return to nonetheless. This post will serve as  small background about myself.

For the past seven years I have been in the Navy, serving as a nuclear electrician's mate in the submarine force. It's a job that has taught me several engineering practices, but I found it just is not my calling. Coming home  at 9pm, caked in carbon dust and covered in cuts from working on motors and generators, just is not the life I could foresee as being the most enjoyable one for me. The first four years I saw that I didn't like have an office building cut off from the world that much. While I am stationed at a shore command for the next two years, I am using my time to learn code to prepare me to transition into the world of tech. 

After talking with friends in the industry and doing some research, the role of a web developer sounded the most appealing to my interests and skill sets. My recent trek into tech has me taking the curriculum through FreeCodeCamp- something I find to be both a challenge and rather rewarding. On my Twitter, I'm starting to track my progress in #100daysofcode; there, it says I'm on my second day whereas this journey got its reboot back in the end of January.

So yeah, that's the first few tidbits about myself. I look forward to connecting with other like minded people here.
[Leetcode]74. Search a 2D Matrix - Python Solution
Published: 2022-03-22 04:08:07

## Write an efficient algorithm that searches for a value target in an m x n integer matrix matrix. This matrix has the following properties:

Integers in each row are sorted from left to right.
The first integer of each row is greater than the last integer of the previous row.
 

Example 1:


Input: matrix = [[1,3,5,7],[10,11,16,20],[23,30,34,60]], target = 3
Output: true
Example 2:


Input: matrix = [[1,3,5,7],[10,11,16,20],[23,30,34,60]], target = 13
Output: false
 

Constraints:

m == matrix.length
n == matrix[i].length
1 <= m, n <= 100
-104 <= matrix[i][j], target <= 104
```
class Solution:
    def searchMatrix(self, matrix: List[List[int]], target: int) -> bool:
        n=len(matrix)*len(matrix[0])
        start=0
        end=n-1
        while start<=end:
            mid=(start+end)//2
            row=mid//len(matrix[0])
            column=mid%len(matrix[0])
            if matrix[row][column]==target:
                return True
            elif matrix[row][column]>target:
                end-=1
            else:
                start+=1
        return False        

## 
```
SQL-Quick tip #5 - Create a sequence of date and time
Tags: tsql, sqlserver, sql, mssql
Published: 2022-03-22 03:55:58

## Sql Server tips and tricks

This is part of a series of quick tips and tricks I have accumulated over the year, that I think can be useful for others.
If you have similar short tips and tricks please leave a comment.

### Create a sequence of date and time

When working with data that is somehow related to dates and times you may need to generate a sequence of date to group by or select from.
The trick here is to use a recursive CTE ([Common Table Expression](https://docs.microsoft.com/en-us/sql/t-sql/queries/with-common-table-expression-transact-sql?view=sql-server-ver15)). It is a bit tricky to read but what the CTE does is to make a union with one additional datetime for each recursion.

The code below will create a sequence of datetimes with 10 minutes interval between to dates.

Like recursion in general this can take up a lot of resources and be slow so I would not recommend using it in production code with high number of execution. But for data analysis and drilling into your data this trick can be very useful.

```sql
DECLARE @stepSizeInMinutes INT = 10; -- Change this line to change the time interval
DECLARE @from DATETIME2 = '2017-01-01 00:00:00.00000',
          @to DATETIME2 = '2017-01-04 23:50:00.00000';

-- Create Recursive Discrete Table
WITH Recursive_CTE AS
(
       SELECT @from AS TimestampUtc
        UNION ALL
       SELECT DATEADD(MINUTE, @stepSizeInMinutes, TimestampUtc) 
         FROM Recursive_CTE
        WHERE TimestampUtc < @to
)
SELECT *
  FROM Recursive_CTE
 ORDER BY TimestampUtc
OPTION (MAXRECURSION 0);
```

![Sql Server Management Studio screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50cuaxzx7crr8cg53slz.png)
How to add like and dislike functionality in my laravel website?
Tags: laravel
Published: 2022-03-22 03:54:14

we may sometime require to create like and dislike functionality for your posts, tutorials, articles, products etc in your laravel 5.6 application like on facebook, twitter, google etc. here i will show you how to build ajax realtime like unlike system in laravel 5, laravel 6, laravel 7, laravel 8 and laravel 9 application.

In this tutorial, we will integrate like system from scratch and step by step so you can understand and learn how it works. it is very simple and easy way to create like a system in laravel. we will use overtrue/laravel-follow composer package for like dislike system in laravel.

So basically here we will create users table and posts table. we will add some dummy records on posts table using laravel seeder. then we will create laravel default auth using auth command. after that we as we know we can register login new users. after that we will list all posts with like icon and also we will display counter for how many users likes this post like on facebook. we will write code for jquery ajax and make it real time like dislike system. So you need to just follow bellow step and get layout like as bellow screen shot.

[How to add like and dislike functionality in my laravel website?](https://www.codecheef.org/article/laravel-9-like-dislike-system-using-ajax-request)
#39 - Two Sum CodeWars Kata (6 kyu)
Tags: javascript, webdev, tutorial, 100daysofcode
Published: 2022-03-22 03:54:09

##Instructions
**Task**
Write a function that takes an array of numbers (integers for the tests) and a target number. It should find two different items in the array that, when added together, give the target value. The indices of these items should then be returned in a tuple / list (depending on your language) like so: (index1, index2).

For the purposes of this kata, some tests may have multiple answers; any valid solutions will be accepted.

The input will always be valid (numbers will be an array of length 2 or greater, and all of the items will be numbers; target will always be the sum of two different items from that array).

<u>Based on: http://oj.leetcode.com/problems/two-sum/</u>

**Examples:**

```
twoSum [1, 2, 3] 4 === (0, 2)
```

---

##My solution:

```javascript
function twoSum(numbers, target) {
  for(let i = 0; i<numbers.length; i++){
    for(let j = i+1; j<numbers.length; j++){
      let res = numbers[i] + numbers[j]
      if(res == target) return [i,j]
    }
  }
}
```

---

##Explanation
First I made a loop that will iterate through all the elements of the array

```javascript
for(let i = 0; i<numbers.length; i++)
```

---

Inside of this loop I used another loop that will iterate through all the elements that are after the one that is being iterated in the last loop.

```javascript
for(let j = i+1; j<numbers.length; j++)
```

---

In each iteration I'll check if the sum of the element iterated in the first loop (i) plus the one being iterated in the last loop (j) is equal to the target, it'll return their positions


```javascript
let res = numbers[i] + numbers[j]
if(res == target) return [i,j]
```

---

**What do you think about this solution? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/52c31f8e6605bcc646000082)
Sonderbase - Travel Content Sharing Platform
Tags: travel, travelcontent, trip, backpacker
Published: 2022-03-22 03:52:01


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

Sonderbase is the platform that allows travelers to share their travel experiences with the community.

Treating it as a personal blog, Sonderbase aggregate all the travel-related information, articles, providing your a one-stop solution.

In Sonderbase, you can create your personal profile, write and share your experiences with the community.

In the future, we will bring in features like trip planner, personal travel recorder(Leaving digital footprint that others can learn more about you), and more. If you would like to see any feature, feel free to leave me some comments.
here is our website: [Sonderbase](https://sonderbase.com)
DevOps Lead Takes on DevOps, DevSecOps, Culture, Processes, and Mindset
Tags: devops, interview, devsecops, culture
Published: 2022-03-22 03:33:01

I got recently interviewed by some IT Industry Leaders here in Hong Kong, and part of the interview was about __DevOps__, its culture, and the overall __DevOps mindset__. 

We also talked about how to be a __better DevOps engineer__.

### 📚 Topics Covered in the Interview

- DevOps Before DevOps: ALM
- Should Small Companies Do DevOps?
- What Is DevOps? And How To Do DevOps?
- How To Become A DevOps Engineer?
- MLOps, DevSecOps, DataOps: The Future Of DevOps?
- DevOps Mindset In Real Life
- DevSecOps Doesn't Make Sense


### 📺 The Video

Here you have the video of the interview.

{% youtube 9hNDCvhTODI %}

[Link to the video: https://youtu.be/9hNDCvhTODI](https://youtu.be/9hNDCvhTODI)

### 🎙️ The Podcast

Do you prefer listening instead of watching? The interview is also available on my Podcast:

- Spotify: [Podcast Episode](https://open.spotify.com/episode/0YwJPU5bUJ06SByFdtRjhj)
- Apple Podcasts: [Podcast Episode](https://podcasts.apple.com/hk/podcast/coderdaves-takes-on-devops-devsecops-culture-processes/id1556397751?i=1000554713783)
- Google Podcasts: [Podcast Episode](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkLnBvZGJlYW4uY29tL2NvZGVyZGF2ZS9mZWVkLnhtbA/episode/Y29kZXJkYXZlLnBvZGJlYW4uY29tL2M1NmI1ZDAxLTRjNGEtM2M4ZS05MTM1LTBiOTEyY2EyZmI3Ng?sa=X&ved=0CAUQkfYCahcKEwigyduwhtn2AhUAAAAAHQAAAAAQAQ)
- Amazon Music: [Podcast Episode](https://music.amazon.com/podcasts/30841901-20ff-403d-a56a-807ad5165e45/episodes/cf223fca-8d4b-444c-852f-3b307c68f9ce/the-coderdave's-podcast-coderdave%E2%80%99s-takes-on-devops-devsecops-culture-processes-and-mindset)
- PodBean: [Podcast Episode](https://coderdave.podbean.com/e/coderdave-s-takes-on-devops-devsecops-culture-processes-and-mindset/)

### Conclusions

❓Do you agree with my views? Let me know in the comment section below.

Also, if you are into DevOps, check out [this video in which I debunk 10 DevOps myths](https://www.youtube.com/watch?v=OsnWo4j4zIo)!

__Like, share and follow me__ 🚀 for more content:

📽 [YouTube](https://www.youtube.com/CoderDave)
☕ [Buy me a coffee](https://buymeacoffee.com/CoderDave)
💖 [Patreon](https://patreon.com/CoderDave)
📧 [Newsletter](https://coderdave.io/newsletter)
🌐 [CoderDave.io Website](https://coderdave.io)
👕 [Merch](https://geni.us/cdmerch)
👦🏻 [Facebook page](https://www.facebook.com/CoderDaveYT)
🐱‍💻 [GitHub](https://github.com/n3wt0n)
👲🏻 [Twitter](https://www.twitter.com/davide.benvegnu)
👴🏻 [LinkedIn](https://www.linkedin.com/in/davidebenvegnu/)
🔉 [Podcast](https://geni.us/cdpodcast)

<a href="https://www.buymeacoffee.com/CoderDave" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important; width: 108px !important;" ></a>
Acessibilidade - ColorAdd® o código de cores para daltónicos
Tags: beginners, a11y, design, code
Published: 2022-03-22 03:22:19

![ColorAdd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hy9p36qveavsbn3fcvei.jpg)
 

Focado na acessibilidade Miguel Neiva, professor da Universidade do Minho, criou um código de cores universal para daltónicos, o ColorAdd®, que foi já adaptado pela empresa de tintas CIN e despertou interesse internacional pela ajuda que dá às pessoas portadoras desta deficiência.

Em declarações, Miguel Neiva designer e mentor do projecto, adiantou que "o ColorAdd é um código gráfico monocromático, sustentado em conceitos universais de interpretação e desdobramento de cores, que permite aos daltónicos identificá-las correctamente".

"O conceito apoia-se nas cores primárias como ponto de partida (Cyan, Magenta e Amarelo) e no seu consequente desdobramento para cores secundárias. "Às três formas que representam as três cores primárias, foram acrescentadas mais duas que, de forma simples, representam o preto e o branco", adiantou.

Disse que com o Código "o daltónico olha para um dado objecto, uma peça de roupa ou um sinal de trânsito, por exemplo, e através dos símbolos nele colocados consegue distinguir as cores".

Miguel Neiva salienta que "os primeiros sintomas de daltonismo são detectados na idade escolar", frisando que, "mais tarde, a pessoa daltónica vê serem-lhe interditas diversas profissões". Entre elas - frisou - contam-se profissões como a pilotagem de aviões, a navegação marítima, a indústria gráfica, a indústria química, a geologia, a arqueologia, actividades ligadas à área da informática ou áreas financeiras, a decoração e a moda".

No seu quotidiano existem muitas situações que implicam a ajuda de terceiros, algo que deixa de suceder com a introdução do Código: na escola, para a escolha de marcadores ou de canetas coloridas; na compra de vestuário; na orientação em interpretação de mapas e sinais de trânsito. O novo instrumento gráfico vai, ainda, "facilitar a identificação correta das bandeiras da praia e a identificação e escolha de qualquer tipo de produto ou serviço onde a cor seja factor de decisão".

### Uma das melhores 40 ideias para melhorar o mundo

O investigador, que estudou tema nos últimos nove anos em parceria com pessoas daltónicas, sublinha que a adesão das tintas CIN é o início do processo de internacionalização do Código, iniciado depois do registo da marca. "Temos obtido grande receptividade no estrangeiro, como sucede no Brasil onde foi considerada uma das melhores 40 ideias para melhorar o mundo", revelou, frisando que o projecto foi concebido numa óptica de "responsabilidade social".

A ideia tem aplicação nas áreas dos transportes - na sinalização em comboios e no metro - na educação, na saúde e nos têxteis e vestuário.

Fontes onde pesquisei esse conteúdo:

- https://www.coloraddsocial.org/pt
- https://veja.abril.com.br/saude/coloradd-o-idioma-das-cores/
- https://pt.wikipedia.org/wiki/Coloradd
componentWillUnmount lifecycle method
Published: 2022-03-22 03:21:52

This is _part III_ of the tutorial series **[Class Component Vs Functional Component(Lifecycle Methods)](https://dev.to/codescript/class-component-vs-functional-componentlifecycle-methods-1kcl)**.  To implement the **componentWillUnmount** lifecycle method in a class-based component, let consider the code snippet below: 

![componentWillUnmount in class component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntbmrs6wgl9ao7jsg332.png)
Likewise, to implement the same code in a functional component let’s consider the code snippet below: 

![componentWillUnmount in functional component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5d0kx97gj3vdcf76unz0.png)
Now, analyzing the two code snippet we can conclude that for the class-based component, the **componentWillUnmount** function is defined in the class.
On the other hand, to implement the same code in a functional component, we have to return an anonymous function inside the **useEffect** hook. Inside the return function, we write the code for the clean-up.
Concluding this series, these methods are used to run side effects in a component lifecycle and must be used when it is necessary.
JS Interview Question #2 (Accidental Global Variable)
Tags: javascript, webdev, react
Published: 2022-03-22 03:21:46

Visit [think1s](https://think1s.com) to get more such questions.

Revise Accidental Global Variable concepts to answer this questions.

What is the output the following code?

```
function getNumber() {
        var a = b = 2;
        a++;
        return a;
      }
      console.log(typeof a);
      console.log(typeof b);

```

To know the answer [click here](https://think1s.com)

What is the output the following code?

```
 function getNumber() {
        var a = b = 2;
        a++;
        return a;
      }
      getNumber();
      console.log(typeof a);
      console.log(typeof b);

```

To know the answer [click here](https://think1s.com)
componentDidUpdate lifecyle method
Published: 2022-03-22 03:01:30

This is _part II_ of my tutorial series **[Class Component Vs Functional Component(Lifecycle Methods).](https://dev.to/codescript/class-component-vs-functional-componentlifecycle-methods-1kcl)** If you haven’t already read _part I_, you can do so to get a better understanding of this tutorial series going forward.
To implement **componentDidUpdate** in a class-based component let’s consider the code snippet below:

![componentDidUpdate in class component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3ankkehrddum8j11fpt.png)
To implement the same code in a functional component let consider the code snippet below: 

![componentDidUpdate in functional component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9pf2qi48ta8apt24a4p.png)

Now, let’s discuss the two code snippet above and see how the **componentDidUpdate** lifecycle method is implemented in each of them. 
Looking at the class-based component, the **componentDidUpdate** method was defined inside the class component as the way of implementation.
On the other hand, if we look at the functional-based component, the **useEffect** hook was used to implement the **componentDidUpdate**. 
**NB:** The **useEffect** hook takes an optional array of dependencies. Whenever the **useEffect** hook is configured to have an array of dependencies, it is equivalent to the **componentDidUpdate** function in the class-based component.
Therefore anytime any of the values in the dependency array changes, the component has to re-render to update the **DOM**