teleren/devto huggingface dataset:
Телеметрия
Published: 2022-09-08 15:13:01

В Aptos Labs мы разрабатываем программное обеспечение и услуги для сообщества и экосистемы Aptos. Помимо обратной связи с сообществом, мы используем телеметрию, чтобы помочь улучшить децентрализацию сети, понимая, как развертывается и работает наше программное обеспечение.

Двоичный файл ноды Aptos собирает телеметрию, такую как версия программного обеспечения, информация об операционной системе и IP-адрес. См. раздел "Типы собираемой информации".

Двоичный файл ноды Aptos не собирает личную информацию, такую как имена пользователей или адреса электронной почты.

Пользователи могут отключить телеметрию в любой момент. Если телеметрия остается включенной, двоичный модуль ноды Aptos будет отправлять телеметрические данные в фоновом режиме.

## Отключение телеметрии
На macOs и Linux вы можете отключить телеметрию, задав переменной среды `APTOS_DISABLE_TELEMETRY` любое значение.

```
export APTOS_DISABLE_TELEMETRY=true
```
Приведенный выше пример отключает телеметрию только для одного сеанса или терминала. Чтобы отключить ее везде, необходимо сделать это при запуске командной строки.

```
echo "export APTOS_DISABLE_TELEMETRY=true" >> ~/.profile
source ~/.profile
```

## Типы собираемой информации

- **Информация об ноде Aptos**, например, публичный IP-адрес и метрики ядра (включая тип ноды, версию синхронизации и количество сетевых подключений).
- **Использование инструментария Aptos**, например, команды и подкоманды, выполняемые инструментом Aptos CLI.
- **Информация о сборке Rust**, например, версия Rust, версия карго, целевая архитектура сборки и тег сборки.
- **Информация о системе**, например, информация об операционной системе (включая версии), информация об аппаратном обеспечении и использовании ресурсов (включая процессор, память и диск).
Creating a dropdown menu using Vue3 and PopperJS
Published: 2022-09-08 15:06:08

Been struggling for a while of creating a dropdown menu which auto adjusts when the element goes beyond the document's bounds.

Libraries used:
- [PopperJS](https://popper.js.org/)
- [Vue3](https://vuejs.org/)
- [Tailwind](https://tailwindcss.com/)
- [VueUse](https://vueuse.org/)

```html
<script setup>
import { createPopper } from '@popperjs/core'

const popperInstance = ref(null)
const popcorn = ref(null)
const tooltip = ref(null)

onMounted(() => {
  useEventListener(popcorn.value, 'click', show)

  onClickOutside(popcorn.value, hide)

  popperInstance.value = createPopper(popcorn.value, tooltip.value, {
    placement: 'right-start',
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 8]
        }
      }
    ]
  })
})

function show () {
  tooltip.value.setAttribute('data-show', '')
  popperInstance.value.update()
}

function hide () {
  tooltip.value.removeAttribute('data-show')
}

</script>

<template>
  <div>
    <div
      ref="tooltip"
      class="
        tooltip
        bg-neutral-900
        rounded
        p-2
        text-white
        text-xs
        w-[100px]
      "
    >
      <div
        class="arrow"
        data-popper-arrow
      ></div>

      <ul>
        <li
          v-for="i in 5"
          :key="i"
          class="
            px-2 py-2
            bg-neutral-900 hover:bg-neutral-800
            rounded
          "
        >
          Hey
        </li>
      </ul>
    </div>

    <button
      ref="popcorn"
      class="
        popcorn
        bg-blue-500
        text-white
        px-3 py-2
        rounded
      "
    >
      Add
    </button>
  </div>
</template>

<style lang="scss" scoped>
.tooltip {
  display: none;
}

.tooltip[data-show] {
  display: block;
}

.arrow,
.arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.arrow {
  visibility: hidden;
}

.arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.tooltip[data-popper-placement^='top'] > .arrow {
  bottom: -4px;
}

.tooltip[data-popper-placement^='bottom'] > .arrow {
  top: -4px;
}

.tooltip[data-popper-placement^='left'] > .arrow {
  right: -4px;
}

.tooltip[data-popper-placement^='right'] > .arrow {
  left: -4px;
}
</style>
```
Hi, There! I'm Wonkeun, Software Developer in Toronto
Tags: opensource
Published: 2022-09-08 15:03:38

My name is Wonkeun. I'm currently studying Computer Programming and Analysis in Seneca College in Toronto. And I'm about to start my first open source project through the course OSD600. 

The reason why I chose this course is that I often hear try open source project and learn from it. Moreover, one of the senior developer in my co-op told me that participating in open source projects will be a great way to improve my skills. Now I have a bit of understanding why he told me that after I experienced a large code base in a real business. It is amazing to develop something from a scratch but it is also very important to read someone else's code, and understand quickly how it works, and fix a real world problem. In addition, it is always helpful to get advice from someone more experienced than me. 

The expectation that I have in this course is that I will get myself familiarized in how the open source project works and what it is like to be in the open source community. So that this can be my trigger point to do more contributions and learning for my future career, or just my interest to do something cool with like-minded people. Obviously I will choose a project that I have some familiarity already. I will consider programming language first, then the fields of my interest such as technology, hobby, and lastly the size or popularity of the project. 


The one that I picked in trending list is Selenium. [LINK to repo](https://github.com/Genne23v/selenium_OSD600)

Selenium is a popular UI testing frameworks supporting many different languages. I learned Java, Python and Ruby versions of Selenium for the interview and have Selenium automated testing and writing test scripts experiences. 

Here's my reasoning why I chose this project. 

1. I want to improve my Java and Python skills as I didn't have much chances to use them 
2. I have some familiarity with Selenium as I wrote some testing scripts in the company
3. It is a large project that will give me some challenges

I know it can be so overwhelming at the beginning but I believe it is a challenge to move onto next level. So I'm worried a bit, at the same time, I'm very excited to do my first open source project!
How to Detect Outside Clicks in Vue
Tags: vue, javascript, webdev, tutorial
Published: 2022-09-08 14:30:24

Detecting outside clicks is a common thing we need in almost all the apps that we build.

Having a reusable component to detect that is a great way to save time and help us focus on what we build.

Let me first show you the code of the component and explain how it works below. We're going to call this component `DetectOutsideClick.vue`.

```html
<template>
  <div ref="root">
    <slot />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const emit = defineEmits(['detect'])
const root = ref(null)

const onClick = (e) => {
  if (e.target === root.value || root.value.contains(e.target)) {
    return
  }
  emit('detect')
}

onMounted(() => {
  document.body.addEventListener('click', onClick)
})

onUnmounted(() => {
  document.body.removeEventListener('click', onClick)
})
</script>
```

Here's an example on how to use it:

```html
<DetectOutsideClick @detect="onOutsideClick">
  <div class="popup">A popup component</div>
</DetectOutsideClick>
```

## How it works?

The idea here is to listen to all clicks on the page. If the clicked element is not the element inside `<DetectOutsideClick>` or any children of it, then it's an outside click.

We listen to all clicks on the page using this:
```js
document.body.addEventListener('click', (e) => {})
```

And here's how we check if it's the same element or a child of it:

```js
if (e.target === root.value || root.value.contains(e.target))
```

In this case we `return` because it's not an outside click. But if it is an outside click then we emit an event called `detect`.

That's it!
Undefined and Null are two dinstinct data types in javascript ...check the difference 👇
Tags: javascript, webdev, beginners
Published: 2022-09-08 15:01:18

- <u>**Undefined**</u>

**Undefined** data types in javascript means the variable has been declared, but has no value.
<u>Example</u> 👇

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

- <u>**Null**</u>

**Null** in javascript, is an object that can be assigned to a variable as a representation of nothing or void.
Example 👇

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

**THE END!**

I know most of you understand how the two data types in javascript differ,but this information is only for beginners. 

Thanks for Reading😊😊...
Remove classes of li having id
Published: 2022-09-08 15:00:49

This is my html. I want to remove 2 classes of given li id.
 

```
<ul id="menu-dd" class="fusion-menu">
  <li id="menu-item-798" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-798" data-item-id="798">
    <a href="#businesses" class="fusion-bar-highlight" style="height: 118px;">
      <span class="menu-text">Businesses</span>
    </a>
  </li>
  <li id="menu-item-3887" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-3887" data-item-id="3887">
    <a href="#about-us" class="fusion-bar-highlight" style="height: 118px;">
      <span class="menu-text">About Us</span>
    </a>
  </li>
  <li id="menu-item-3890" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3890" data-item-id="3890">
    <a href="/our-story/" class="fusion-bar-highlight" style="height: 118px;">
      <span class="menu-text">Our Story</span>
    </a>
  </li>
  <li id="menu-item-3889" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-3889" data-item-id="3889">
    <a href="#ourvalues" class="fusion-bar-highlight" style="height: 118px;">
      <span class="menu-text">Our Values</span>
    </a>
  </li>
</ul>
```
This my Javascript. What am I doing wrong?

```
<script>
window.addEventListener("load", function(){
  var element = document.getElementById("menu-item-3889");
  element.classList.remove("current_page_item", "menu-item-home");

});
</script>
```
Aptos Rust SDK
Published: 2022-09-08 14:59:34

Компания Aptos предоставляет официальный пакет SDK для Rust. Rust SDK тщательно тестируется, хотя он не так популярен, как [Typescript SDK](https://dev.to/egormajj/aptos-typescript-sdk-37o4).

На данный момент лучший способ использовать Rust SDK - это добавить зависимость в git-репо напрямую, например, так:

```
aptos-sdk = { git = "https://github.com/aptos-labs/aptos-core", branch = "devnet" }
```
Исходный код доступен в [репозитории aptos-core на GitHub](https://github.com/aptos-labs/aptos-core/tree/main/sdk).
Aptos Python SDK
Published: 2022-09-08 14:57:29

Aptos предоставляет легко поддерживаемый официальный Python SDK. Он доступен на [PyPi](https://pypi.org/project/aptos-sdk/) с исходным кодом в репозитории [Aptos-core на github](https://github.com/aptos-labs/aptos-core/tree/main/ecosystem/python/sdk). Большая часть функциональности Python SDK является зеркальным отражением [Typescript SDK](https://dev.to/egormajj/tranzaktsii-s-ispolzovaniiem-typescript-sdk-2k7n). Основное назначение Python SDK - помочь разработчикам Python быстро освоить Aptos и служить дополнением к учебникам по Aptos.

Python SDK может быть установлен через `pip`, из исходников или встроен:

```javascript
pip3 install aptos-sdk
```
`aptos-sdk` будет установлен в каталог пакетов локального сайта. Например, на MacOS вы найдете `aptos-sdk` в каталоге `~/Library/Python/3.8/lib/python/site-packages/aptos_sdk`.

## Установка из источника

Для установки из источника:

```javascript
git clone https://github.com/aptos-labs/aptos-core
cd aptos-core/ecosystem/python/sdk
python3 setup.py install --user
```

## Установка путем встраивания
Чтобы встроить Python SDK в существующий проект Python:

```javascript
cd /path/to/python/project
cp -r /path/to/aptos-core/ecosystem/python/sdk/aptos-sdk aptos-sdk
```
+ de 15 alternativas ao Heroku - nem todas grátis!
Tags: heroku, braziliandevs
Published: 2022-09-08 14:53:36

Você ficou orfã(o) do Heroku? 
Choraminga pelos cantos? 
Levanta as mãos para o céu e fica se perguntando os motivos? 

Eu posso te ajudar. 
mais de 15 alternativas ao Heroku(nem sempre grátis)

Netlify - Hospedar aplicativos sem servidor
https://www.netlify.com/
 
Cloudflare - Melhor para site estático.
https://workers.cloudflare.com/

Cyclic  - Implante aplicativos Node JS de pilha completa em segundos.
https://app.cyclic.sh/#/join/maanp

 Deta – A Nuvem para Desenvolvedores
https://www.deta.sh/
"Deta é grátis para sempre"

Firebase - Hospedagem de sites rápida e segura
https://firebase.google.com/docs/hosting

Railway - Feito para qualquer linguagem.
https://railway.app/

Render  - O mais rápido
https://render.com/

Devtron - voltado para Kubernets
https://devtron.ai/ 

Fly - Execute seus aplicativos full stack em todo o mundo.
https://fly.io/

Fathym - Desenvolva e implante micro frontends 
https://www.fathym.com/

 Back4app - Backend de baixo código para criar aplicativos modernos
https://www.back4app.com/

Dom Cloud - Hospedagem Clássica na Web Facilitada
https://domcloud.co/

Adaptable - A maneira mais fácil de implantar seu aplicativo FullStack
https://adaptable.io/

Microtica - Infraestrutura pronta para produção e modelos de aplicativos para criar soluções na AWS
https://microtica.com/

Coherence - A primeira plataforma de experiência do desenvolvedor
https://www.withcoherence.com/

Webiny - Você pode adotar serverless
https://www.webiny.com/

 Fleek - Simples como netlify, mas tem web3. 
https://fleek.co/

Koyeb - Plataforma serveless 
https://www.koyeb.com/

Vercel - Seu front vai adorar!
https://vercel.com/

Qoddi - Compatível com os buildpacks do Heroku.
https://qoddi.com/

Patr - sites estáticos, bancos de dados, CI/CD, gerenciamento de domínios
https://patr.cloud/

Gigalixir - Para Elixir 
https://gigalixir.com

Acorn - para kubernets 
https://acorn.io/

Staticbackend - API de back-end auto-hospedada gratuita e de código aberto. 
https://staticbackend.com/

Upstash - Banco de dados sem servidor para Redis®
https://upstash.com/

Clever Cloud - lida com todo o trabalho de operações enquanto você se concentra em seu verdadeiro valor comercial: codificação.
https://www.clever-cloud.com/

Oracle - grátis para (sempre)
https://www.oracle.com/br/cloud/free/

Tem versões gratis
https://cloudify.co/pricing/

Muito bom em quase tudo!
https://replit.com/

Uma plataforma revolucionária de hospedagem 
https://hostycord.com/index.php

Alternativa ao heroku usada por muitos unicórnios!
https://www.aptible.com/

SUGESTÕES: 
Seu free tier temos até bastante recursos disponível e a integração com o github
 
https://mogenius.com/pricing 

https://www.alwaysdata.com/en/


Quem tiver mais, coloque nos comentários! 


Se você gosta de VPS 

{% embed https://dev.to/urielsouza29/uma-lista-de-vps-baratos-51ne %}
Release 2.2.1 of my ack Bash Completion
Tags: release, opensource, ack, bash
Published: 2022-09-08 14:46:51

---
title: Release 2.2.1 of my ack Bash Completion
published: true
description: Bug fix my bash completion implementation for ack
tags: release, opensource, ack, bash
//cover_image: https://direct_url_to_image.jpg
---
Some time ago I released [version 2.2.0](https://dev.to/jonasbn/release-220-of-an-ack-bash-completion-fei) of [my Bash completion](https://github.com/jonasbn/bash_completion_ack) for `ack`.

Unfortunately a bug had sneaked in and since I no longer use Bash I had not discovered it.

Luckily [@grumpyf0x48](https://github.com/grumpyf0x48) did and reported [an issue](https://github.com/jonasbn/bash_completion_ack/issues/3) at same time hinting at a very basic fix.

So now if you do `ack` `-<tab>` it will again act as default Bash completions and expand using files and folder in the current directory.

Thanks to [@grumpyf0x48](https://github.com/grumpyf0x48) for his contribution in the shape of a bug report.

[Release 2.2.1](https://github.com/jonasbn/bash_completion_ack/releases/tag/2.2.1) is now available with the fix.
Kotlin Springboot -- Part 7 Rest でドメインのデータクラスから JSON のためのデータクラスに変換して JSON に変換する
Tags: kotlin, springboot, ca
Published: 2022-09-08 14:25:47


## why

前回は Driver で DB や API などから取ってこられる DB テーブルの世界のエンティティを返し、
Gateway でエンティティを業務の世界のオブジェクトを表すデータクラスである Domain に詰め直した。

今回は Usecase を介して渡された Domain オブジェクトを API として JSON で出力するための新しいデータクラスに Rest で変換する。

これは DomainName.toJson と名付け、Domain の拡張だが、Rest に定義する。

Django で Serializer が行っていた役割と似ているが、こちらは型をつける必要が有る。

---

## REST のどこに書くのか

```kotlin
@RestController
class PersonHandler {
  @GetMapping("/persons")
  fun getPersons(): String {
  // .....
}
```

この HTTP リクエストの対応を書くクラスの外に JSON のためのデータクラスを作る。

---

## Json にするための ObjectJson のデータクラスを作る

```kotlin
data class PersonsJson(val persons: List<PersonJson>)
data class PersonJson(
  val name: String,
  val age: Int,
)
```

JSON レスポンスのためのデータクラス。
JSON には型はないので、JSON にした瞬間に型は消滅し
val で入っている key と中身が残る。

```json
{
  "persons": [
    {
      "name": "text",
      "age": 12345
    }
  ]
```

よって、val persons とその中の配列の
val name, val age, これらがこうやって返される。

---

## Domain から ObjectJson にするための Object.toJson 関数を作る

Domain のデータクラス、Persons を拡張する。
こちらも REST に書く。
toJson といいつつ、これを実行したところで JSON にはならない。
JSON に変換する事前準備のための型という意味。

```kotlin
fun Persons.toJson() = PersonsJson(this.list.map { (it.toJson())})

fun Person.toJson(): PersonJson {
  val personJson = PersonJson( this.name.value, this.age.value,)
  return personJson
}
```

Person**s**.toJson では
ドメインの Persons を map して
中身の各 Person に Person.toJson を実行させる。

Persons.toJson では this で参照して
name と age の value を出して PersonJson の中にいれて return する。

Domain のデータクラスの中に入っていたものを
Json 用のデータクラスの中に詰め替えている。

---

## Kotlin オブジェクトを JSON に変換するための gson ライブラリを入れる

bulid.grade.kts を開き

```kotlin
dependencies {
	//...
	implementation ("com.google.code.gson:gson:2.9.1")
}
```

gson の依存を書いて Gradle をリロードする。
すると gson ライブラリがインストールされる。

---

## REST で gson を呼び出す

```kotlin
import com.google.gson.Gson
// ...
  val persons = personsUsecase.getAllPersons()
  val gson = Gson()
  val personsJson = persons.toJson()
  val json2 = gson.toJson(personsJson)

```

Gson はこのように使える。
UseCase などのインスタンスを作る時と同じように
一度クラスからインスタンスを作り、
そのインスタンスからメンバー関数を呼び出す。

Usecase から呼び出された Domain に入った persons を toJson 型に詰め直して、その後 gson で変換する。

---

## web で確認する

Springbooot で起動したサーバーにアクセスすると
このようにレスポンスが綺麗にみえた。これで使える。

```json
// 20220908225236
// http://localhost:8080/persons

{
  "persons": [
    {
      "name": "taro",
      "age": 3
    },
    {
      "name": "hana",
      "age": 5
    }
  ]
}
```

---

## まとめ

DB テーブルの都合のエンティティ
オブジェクト指向の都合のドメイン
JSON の都合のtoJson

これらの 3 つのデータクラスを使い分けるのが、クリーンアーキテクチャ。

Kotlin クリーンアーキテクチャで REST で API に適した JSON を返す。

そのためには Gateway でオブジェクト指向の都合で Domain に詰められているものを Usecase から Rest に運んできた後に

JSON 用のデータクラスに詰め替えて、その上で gson を使って JSON に変換すればうまく行く。

Domain のまま JSON に変換するとこうなりますからね。

```JSON 
{
  "list":[
    {
      "name":{
        "value":"taro"
      },
      "age":{
        "value":3
      }
    },
    {
      "name":{
        "value":"hana"
      },
      "age":{
        "value":5
      }
    }
  ]
}
```
Beautiful hover save button - How it's done
Tags: css, webdev, html, tutorial
Published: 2022-09-08 14:39:45

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



## <u>HTML</u>

For HTML, we have only a span element with button's text and a download svg inside a button element.

```html
<button>
    <span>SAVE</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
    </svg>
</button>
```
      

## <u>CSS</u>

For CSS, first we'll style button element.

First, I'll set cursor to pointer, align items inside using flexbox and add some paddings.

Then I'm setting background color to light blue, removing the button's default border, setting it slightly rounded and adding a little shadow.

I'll set the width to 120 pixels, font to bold and font size to 16 pixels.

```css
button {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: rgb(176, 206, 255);
    border: none;
    box-shadow: 0 0 5px #999;
    border-radius: 3px;
    width: 120px;
    font-weight: 600;
    font-size: 16px;
}
```
      
For the text inside a button, I'll set the width to 100 percents and right border, which divides it from the icon.

I'll set the height to 40 pixels and align text in the center using flexbox.

```css
span {
    width: 100%;
    border-right: 1px solid rgb(77, 98, 131);
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
```
      
For svg, I'll just add left padding.

```css
svg {
    padding-left: 10px;
}
```
      
On hover, I'll change button's background color to neon green.

```css
button:hover {
    background-color: rgb(0, 255, 102);
}
```
      
On button hover, I'll set text width to zero and hide everything that overflows, so that text disappears on hover.

Also, I'll add a little transition so that the disappearing is smooth.

Lastly, I'll set the border property to none.

```css
button:hover span {
    width: 0%;
    transition: .2s;
    border: none;
    overflow: hidden;
}
```
      
On button hover, I'll set the svg to 100 percent width and remove the left padding.

```css
button:hover svg {
    width: 100%;
    padding-left: 0;
}
```
      
And that's it. ☺️

You can find the whole code with video tutorial [here](https://designyff.com/code/save_button).

Thank you for reading ❤️