teleren/devto huggingface dataset:
Does functional programming have any advantage in real environments?
Tags: discuss, programming, javascript, career
Published: 2022-05-18 21:36:55

I've been thinking about learning something new, so I went to [Stack Overflow Surveys](https://insights.stackoverflow.com/survey/2021) to see what technologies are people actually working on right now, and I saw this:

![Survey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2dv62fnju36ldyv8ki1.png)

The top paying programming language is Clojure? Followed by F#, Elixir and Erlang, and a few positions below Scala and LISP, I'm impressed.

I don't have almost any knowledge in functional programming, I've heard that has better performance in certain situations (like managing big data), is more predictable, and more readable, but I don't see real use cases for functional programming instead of a traditional approach.

What are the advantages of the functional paradigm? In what situations are this languages used? For someone that wants to learn something new, what language do you recommend to learn first? I thought about Haskell or Clojure.

Thanks! 🙌
Remix :: CRUD com Supabase - Parte 06 - Testando a inserção de novos registros
Published: 2022-05-18 20:32:41

Nesta parte iremos testar se o nosso formulário está funcionando.

Vamos editar novamente o arquivo `index.tsx` e colocar o nosso menu que irá para área de postagens, onde iremos visualizar e inserir novas postagens

### Re-editando o arquivo `index.tsx`
Abra seu arquivo `routes/index.tsx`, apague os `imports` e importe apenas o componente `Link` do Remix:

```ts
import { Link } from 'remix'
```

Agora edite o componente `Index`, deixando-o assim:

```ts
export default function Index() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Blog Remix com Supabase</h1>
      <ul
        style={{
          listStyle: 'none',
          display: 'flex',
          flexDirection: 'row',
          gap: '8px',
        }}
      >
        <li>
          <Link
            to={'posts'}
            style={{
              textDecoration: 'none',
              backgroundColor: '#ef62df',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Visualizar Posts
          </Link>
        </li>
      </ul>
    </div>
  )
}
```

Por último, vamos adicionar um componente `ErrorBoundary` para "capturar" os erros na `Index` de forma que não quebre o resto da aplicação.

```ts
export function ErrorBoundary({ error }: { error: Error }) {
  return (
    <div className='error-container'>
      <h1>😱 App Error</h1>
      <pre>❗ {error.message}</pre>
    </div>
  )
}
```

### Testando a aplicação
Finalmente estamos prontos para testar a nossa aplicação, para isto rode `npm run dev` e se tudo deu certo você verá no navegador algo parecido com a imagem abaixo:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yoo4w1wb91xkyx6hsxz.png)
 Clique no link `Visualizar Posts` e você será direcionado para a página de visulização, que também será nossa página de inseração de novos posts.
 
A página que será aberta deve ser algo parecido com a imagem abaixo:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jzxaq8rte5w9biimruu.png)
Clique no botão `Novo` e repare que o formulário abrirá logo acima da visualização dos posts e isto se deve a mágica do componente `<Outlet/>` que inserimos na parte 05 enquanto estávamos editando o componente `Posts`.
 
Clique em novo, preencha todos os dados e depois clique em `enviar`. Se tudo deu certo até aqui, um novo post aparecerá abaixo dos botões `Home` e `Novo`.
 
 Com isto finalizamos esta primeira parte do tutorial, na parte 07 instalaremos a lib [https://chakra-ui.com/](https://chakra-ui.com/) para melhorar a aparência da nossa aplicação. Te vejo lá! 😉
Vue.js Transition See Up
Tags: vue, css, nuxt, transition
Published: 2022-05-18 20:25:05

In this article i will share my concept **How To Make Drawer with Animation From Left to Right using vuejs transition Component**

**1.** Create Drawer Component named **Drawer.vue** in components folder and then paste the code bellow.

```vue
<template>
  <transition name="slide">
    <div class="drawer" v-if="open">
      <ul>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer">Home</a>
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer">About</a>
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer"
            >Portfolio</a
          >
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer"
            >Contact</a
          >
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
export default {
  name: "drawer",
  props: ["open"],
  created() {
    console.log("props: ", this.open);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.drawer {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(228, 70, 70, 0.7);
  z-index: 2;
  overflow-y: hidden;
  padding: 1em;
}

.drawer ul li {
  margin: 0;
  list-style: none;
  text-align: center;
  margin: 1em;
}

.drawer ul li a {
  text-decoration: none;
  color: white;
}

.slide-enter-active {
  transition: all 0.7s ease;
  transform: translateX(-90%);
  opacity: 1;
}

.slide-enter-to {
  transition: all 0.7s ease;
  transform: translateX(0%);
}

.slide-leave-active {
  transition: all 0.7s ease;
  transform: translateX(-30%);
  opacity: 0;
}
</style>

```

**2.** In App.vue component import the **Drawer.vue** component and use it.Also create a button that will toggle the drawer component.See the codes beloew in **App.vue**

```vue
<template>
  <div class="main">
    <Drawer :open="open" />

    <button @click="open = !open">Toggle Drawer</button>
  </div>
</template>

<script>
import Drawer from "./components/Drawer";
export default {
  name: "App",
  data: function () {
    return {
      open: true,
    };
  },
  components: {
    Drawer,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

button {
  background: crimson;
  color: white;
  padding: 1em;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>
 ```

## And that's it. You have made an awsome Drawer component with vuejs and vuejs built in transition component :rocket:

### You will find the whole project below :point_down:
[See in code sandbox](https://codesandbox.io/s/drawer-wa-l-r-git5wc?file=/src/App.vue:0-670)

_Thank You :blush:_
Kats: Forecasting
Tags: beginners, 100daysofcode, python
Published: 2022-05-18 20:23:19

Kats is a toolkit to analyze time series data, a lightweight, easy-to-use, and generalizable framework to perform time series analysis. Time series analysis is an essential component of Data Science and Engineering work at industry, from understanding the key statistics and characteristics, detecting regressions and anomalies, to forecasting future trends. Kats aims to provide the one-stop shop for time series analysis, including detection, forecasting, feature extraction/embedding, multivariate analysis, etc. Kats is released by Facebook's Infrastructure Data Science team. It is available for download on PyPI.

Here's, the sample example notebook with metrics expanded for better understanding:

https://colab.research.google.com/drive/1kElLOB0KArrU8hzpHh-bu_VG17yFWrhA?usp=sharing
🤔 how do you respond to sales cold-emails? 📨
Tags: communication, email, sales
Published: 2022-05-18 20:08:01

---
title: 🤔 how do you respond to sales cold-emails? 📨
published: true
description: 
tags: #communication #email #sales
//cover_image: https://direct_url_to_image.jpg
---

As the member of a medium-to-large sized company with plenty of $$ spent with vendors, I'm sure you're exposed to your fair share of cold-emails.

I'm curious of how those of you who fit into that profile respond to cold-sales tactics.

_Bonus points for creative responses:_

* "Got any free samples/subscriptions?"
* Reverse-sale of your side-projects
* etc
Introducing vim-groff-viewer: A vim plugin for displaying Groff files in a document viewer
Tags: groff, neovim, vim, plugin
Published: 2022-05-18 20:26:10

---
title: Introducing vim-groff-viewer:  A vim plugin for displaying Groff files in a document viewer
published: true
date: 2022-05-18 19:58:44 UTC
tags: groff, neovim, vim, plugin
canonical_url: https://www.preciouschicken.com/blog/posts/introducing-vim-groff-viewer/
---

## Introduction

I like (Neo)vim, I like Groff. So much so that I’ve [blogged about letter writing in Groff](https://www.preciouschicken.com/blog/posts/groff-art-letter-writing/) before. What I don’t like is writing markup in Neovim, exiting Neovim, compiling Groff, opening a document viewer and then going back into Neovim to edit again. And repeat.

To remedy this my first vim plugin - **vim-groff-viewer**. It is probably easier to demonstrate, than explain, so…

## Video demonstration

{% embed https://www.youtube.com/embed/-NOvAKriByM %}

## Download, usage, configuration, etc

Interested? Find more at [preciouschicken.com/software/vim-groff-viewer/](https://preciouschicken.com/software/vim-groff-viewer/).
How the DEV {% embed %} codes were created 🎙
Tags: podcast, forem, meta
Published: 2022-05-18 19:47:13

In this week's episode of DevDiscuss, we welcomed @aritdeveloper and @jeremyf from the Forem team to discuss how they migrated from our old embed style of `{% special_snowflake ... %}` to a much more flexible and usable `{% embed ... %}` syntax while maintaining backward compatibility.

Forem is the code that powers DEV, and it's open source — so if you're interested by the content of this show, you can literally [read through the code](https://github.com/forem/forem).

Hope you like this episode, it was a good one!

## Listen on Apple Podcasts

{% embed https://podcasts.apple.com/us/podcast/s9-e2-a-journey-in-real-world-problem-solving-with-regex/id1513053883?i=1000562190248 %}

## Listen on Spotify

{% embed https://open.spotify.com/show/4Jae2mPUqx0XnGychucsE4 %}

## **[Listen right here on DEV](https://dev.to/devdiscuss/s9e2-a-journey-in-real-world-problem-solving-with-regex)**

***

**If you like the episode, definitely subscribe to the show. It's a great season!**

Happy coding!
Grid css O GUIA RESUMIDO
Tags: webdev, css, beginners, braziliandevs
Published: 2022-05-18 19:30:49

Colocando o grid no contêiner

display :grid


O display grid também gera as tags :


Grid-template-columns : propriedades da exibição do conteúdo

Gap : espaçamento entre os elementos

grid-template-columns : 1fr 1fr 
// Criou 2 colunas , o fr eh uma propriedade própria do grid , usada
para definir tamanhos de colunas


Gap: 20px;
// Separa as colunas de forma igualitária



Align content⇒ espaçamento na vertical

Justify contente ⇒espaçamento na horizontal

Align-items ⇒espaçamento vertical dos itens

Justify-items ⇒espaçamento horizontal dos itens

Place-items ⇒os 2 acima

Align-self ⇒ espaçamento vertical do item selecionado

Justify-self ⇒ ... Do item selecionado

Place-self ⇒os 2 acima


Grid column


grid-column: 1 / 3// O item ocupará a coluna 1 e 2 (Sim, isso mesmo, 1 e 2, pois os valores 1 / 3 são referentes as linhas da coluna. Isso significa que começa na linha 1 (início do grid) e vai até a linha 3, que é o começo da terceira coluna).


grid-column: 1// O item ocupará a coluna 1.

Define quais colunas serão ocupadas pelo grid item. É possível definir uma linha de

início e final, assim o item irá ocupar múltiplas colunas.
Lambda Event
Tags: serverless, cloud, aws, lambda
Published: 2022-05-18 19:23:04

Lambda Event
● Lambda Event is an entity that invokes the lambda function.
● Lambda supports synchronous invocation of Lambda Functions.
● Lambda supports the following sources as an event:
o AWS DynamoDB
o AWS SQS
o AWS SNS
o CloudWatch Event
o API Gateway
o AWS IoT
o Kinesis
o CloudWatch Logs
Clean code resumo
Tags: codequality, codereview, braziliandevs, javascript
Published: 2022-05-18 19:22:38



Escrever um código limpo, compreensível e sustentável é uma habilidade crucial para todo desenvolvedor dominar.

Um código limpo , economiza tempo , dinheiro e armazenamento , e também mostra que sua equipe controlando o código não o código controlando sua equipe.

Por isso que nos temos que manter a habilidade de limpa sempre em pratica.


Resumão dos preceitos


Como nomear variaveis e etc?


os nomes são muito mais fáceis de lembrar. E, mais importante, eles podem fornecer mais informações sobre a variável, para que outra pessoa possa entender seu significado. Por isso é importante definir bons nomes.


Criando nomes

Não use comentários para explicar por que uma variável é usada. Se um nome requer um comentário, você deve reservar um tempo para renomear essa variável em vez de escrever um comentário.

exemplo ruim :
`
var d; // dias do mes`


exemplo bom :
`
var diasDoMes;`


Usar nomes pesquisáveis

Evite usar números mágicos em seu código. Opte por constantes nomeadas e pesquisáveis. Não use nomes de uma única letra para constantes, pois elas podem aparecer em muitos lugares e, portanto, não são facilmente pesquisáveis.


Escrevendo boas funções
Mantenha-os pequenos

As funções devem ser pequenas, muito pequenas. Eles raramente devem ter 20 linhas. Quanto mais longa uma função fica, é mais provável que ela faça várias coisas e tenha efeitos colaterais.


Certifique-se de que eles apenas façam uma coisa

Suas funções devem fazer apenas uma coisa. Se você seguir essa regra, é garantido que eles serão pequenos. A única coisa que essa função faz deve ser declarada em seu nome.


Menos argumentos

As funções devem ter dois ou menos argumentos, quanto menos, melhor. Evite três ou mais argumentos sempre que possível.


Bônus


.Não deixe código nos comentários


valeu pela atenção espero que esse artigo tenha ajudado

quem quiser pode acessar meu linkedin.

https://www.linkedin.com/in/ysrael-sacrati/

valew!! 

😌
How to create Azure Kubernetes Service using Terraform - Part 2
Tags: terraform, azure, aks, kubernetes
Published: 2022-05-18 18:56:14

In this article, We will see how to create AKS cluster using Hashicorp [Terraform](https://www.terraform.io/)

## How to create Azure Kubernetes Service using Terraform

**- [How to create Azure Kubernetes Service using Terraform - Part 1](https://dev.to/kcdchennai/how-to-create-azure-kubernetes-service-using-terraform-part-1-3mcf)**
**- [How to create Azure Kubernetes Service using Terraform - Part 2](https://dev.to/kcdchennai/how-to-create-azure-kubernetes-service-using-terraform-part-2-56mo)**


## Terraform files


**[provider.tf](https://github.com/MakendranG/Azure_AKS_Terraform/blob/main/provider.tf)**

This file contains subscription details and backend details where we are going to store the `tfstate` file.

**[main.tf](https://github.com/MakendranG/Azure_AKS_Terraform/blob/main/main.tf)**

This file will create the AKS cluster with log analytics workspace.

**[variables.tf](https://github.com/MakendranG/Azure_AKS_Terraform/blob/main/variables.tf)**

This file contains all the variable details.

**[outputs.tf](https://github.com/MakendranG/Azure_AKS_Terraform/blob/main/outputs.tf)**

Once the cluster created, we need some details to access the Kubernetes, with outputs.tf files we can get those details.

Once all the files created, lets start the execution.

## Terraform initialization


```
terraform init
```

Execute the above command to initialize the Terraform deployment. This command downloads the Azure modules required to manage our Azure resources.

## Terraform plan execution

```
terraform plan
```

Execute the above command to create an execution plan. This command creates an execution plan, however doesn’t execute it. Instead, it determines what moves are critical to create the configuration targeted in our configuration files. This sample approves us to confirm whether the execution format suits our expectations before making any modifications to true resources.

## Applying the Terraform Execution Plan

```
terraform apply
```

Execute the above command to use the execution plan to our cloud infrastructure.

Gratitude for perusing my article till end.I hope you learned some thing specific today. If you loved this article then please share to your pals and if you have suggestions or thoughts to share with me then please write in the comment box.
Network via Terminal
Published: 2022-05-18 18:48:51

`lshw -class network`
Logical name of the network adapter: eth0
Serial number of the network adapter (= MAC Adress) b8:27:eb:5c:c4:37
`ip addr show eth0`
- Status:  up/down (on and off) 
- MAC Adress: consists of 8 hexadecimal numbers 
- IPv4:   10.10.10.86 consists of 4 numbers between 0 and 255
- IP- Broadcastadresse Gateway Rechner 

`ip-neigh`
eigenen Rechner + Broadcast Rechner + ggf die, die mich angepingt haben 

`ping IPv4-Adresse` - geht, dann auch Rechner mit ip-neigh sichtbar

Aus Sicherheitsgründen antworten Hosts standardmäßig nicht auf pings an die Broadcastadresse. Dies können Sie jedoch explizit mit dem folgenden Befehl erlauben: `sudo sysctl net.ipv4.icmp_echo_ignore_broadcasts=0`    

 WLAN
vorhandenen WLAN-Access Points mit dem Befehl `sudo iw wlan0 scan`
`sudo iw wlan0 scan | egrep "^BSS|SSID"`
iw ist ein Kommandozeilenwerkzeug zur Konfiguration von WLAN-Geräten
BSS (noch ein weiterer Name für die MAC-Adresse bei WLAN-APs) und den Namen des WLANs (SSID) 

`iw wlan0 link` iw ist speziell Wlan (Info WLan?)

`sudo shotdown all` - rasberry runterfahren 

Kontrollieren Sie die Signalstärke mit dem Befehl:`sudo iw wlan0 scan | egrep "SSID|signal"`

Die Übertragungsfrequenz gibt als Nyquist-Frequenz das obere theoretische Limit für die maximale Übertragungsrate vor 
tatsächliche Übertragungsfrequenz (tx bitrate)

rx recieved
tx transmitted 

`ip -s link show ADAPTER`

 - RX bedeutet Receive, also Empfangen von Daten,  TX bedeutet dabei Transmit, also das Senden von Daten.
 - Die ersten beiden Spalten (bytes  packets) geben die Gesamtzahl an übermittelten Daten an, seit der Netzwerkadapter gestartet wurde.
 - errors gibt die Anzahl an fehlerhaften Paketen (z.B. aufgrund zu schlechter Signalqualität) an.
 - dropped gibt die Anzahl der Pakete, die vom Netzwerkadapter weggeworfen wurden, an. Dies kann passieren, wenn der Netzwerkadapter überlastet ist oder das übemittelte Paket nicht die richtige Größe hat.
 - overrun gibt die Anzahl der Pakete, die nicht bearbeitet wurden, weil der interne Speicher des Netzwerkadapters übergelaufen ist.
 - Carrier gibt die Anzahl der Pakete, die aufgrund der fehlenden Verbindung des Übertragungsmediums nicht übertragen werde konnten.
 - mcast sind die per Multicast gesendeten Pakete.
New start
Tags: javascript, node, css, html
Published: 2022-05-18 18:45:05

Today I will start **two new projects**. **First** is **this one here**, start registering my evolution as a developer.
Some months ago I started a course of Python and Web Developing using Django Rest Framework, and that was awesome. I learn soo much and I noticed that I want to join this area.
A few weeks ago I participate in an event of Front-End, call 
"Next Level Week", introduced by **Rocketseat**, and I was blown away. I made the _Origin_ trail, and that wasn't the first time I have contact with the Front-End stack, but was the first I made a project till the end, and im very proud of what I made.
Soo I decided to start my **Second Project**. In the same event, i will join the _Impulse_ trail, and document some of this project. The project is a **Feedback Widget**, or **FeedGet** as the tutor said. So let's get it started!
Google Maps direction Implementation with just HTML !
Tags: html
Published: 2022-05-18 18:31:44

**I have implemented google maps get direction 
in my website using just HTML !!**

## Here is how it works ? 

> when you click on getdirection without adding value it opens external website/app of google maps and shows your position location that you have set value of the hidden input type which have the name daddr. 


![google image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0ueox5gljjrfsg9fs1o.png)

> When you add some location in the placeholder and press get direction it shows ways like this :

![uploaded image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuyybe81i5kwcm4t6952.png)

>  index.html 

```
<head>
    <meta charset="UTF-8">
    <title>Css tips</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>

<body>
    <form action="http://maps.google.com/maps" class="map-get" method="get" target="_blank">
        <div style="display: flex; align-items:
              center;justify-content: center;">
            <input style="margin-right: .2em; min-width:
                 20em;" class="input is-link is-rounded is-small" type="text" name="saddr" placeholder="where
                    you at now ?" />
            <input type="hidden" name="daddr" value="Nees' Web
                 Service, Kathmandu 44600" />
            <input type="submit" class="button is-link is-
                rounded is-small" value="Get location" />
        </div>
    </form>
</body>
```

I am using bulma CSS for fast styling. 

don't forgot to center div 😂😂 :

```
body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
```

## And with this implementation you will get this result ! 
 
![neeswebservices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkq3cx2jov7hccpczphw.png)
 

> Thanks for Reading Do check my other posts !
Hashedin by Deloitte Interview SDE-1 || Off- Campus (Trainee+ FTE)
Published: 2022-05-18 18:16:21

Selection Status : Selected ✅

Offer Accepted : Accepted ✅

Interview Experience : 💚💚💚💚

My Profile while applying

* 4rd Year student pursuing BTech. in CSE from THDC Institute of * * HydroPower Engineering and Technology.
* Google Summer of code and other opensource contributions.
* Founder of Soution#Hub 100+ installs at Google play store.
* Past internship experience with Mindtree, TheHouseMonk and LearnForCause and ColouredCow .
* Problem Solver

#### STEP 1: 
* I Applied through their Carrer Page but You can find Openings through LinkedIn Also.


#### STEP 2 (Online Test):
* Online test was conducted on codility platform. There were 3 questions which are to be solved in 1.5 hours.

One is easy and 2 are medium-level Question

#### STEP 3 (Technical Interview - 1): Approx 40 to 50 minutes

* 2 DSA questions easy and medium (from array and tree)
* Project dicussion			
* Cs fundamentals

#### STEP 4 (Technical Interview - 2):

* 2 DSA questions easy and medium (both from maps)
* Project dicussion			


#### STEP 5 (HR Round):

* Tell me about yourself?

* Education Background.

* Why Hashedin and what excites you to join Hashedin.
  and Similar.


#### Thank Tou!!