teleren/devto huggingface dataset:
How to use fixed options in react-select?
Tags: react, reactselec
Published: 2022-11-25 02:51:43

Heres my fetched data and sets the CONNECT isFixed value to true
`  useEffect(() => {
    async function fetched_roles() {
      const response = await axios.get("/rmsroles");
      let newresponse = response !== null && 
      (response.data).map((role) => (
        role.role == 'CONNECT' ?
        { value : role.role , label : role.role , isFixed: 'true' }
        :
        { value : role.role , label : role.role , isFixed: 'false' }
        ))
      setIsLoading(false);
      setRoles(newresponse);
    }
    fetched_roles();
  }, []);`
Here's my Select Component 
`                      <Select
                        name="roles"
                        onChange={handleGetRoles}
                        isMulti
                        isLoading={isLoading}
                        options={roles}
                        components={animatedComponents}
                      />`
I don't clearly understand in the documentation in react-select 
![This is what I wanted in react select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l2165dzyr222d6rfxgm.png)

![This is my react select i want to fixed CONNECT in selected options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymgwl83206j668sot6oh.png)
How to Become a Perfect Automation Tester || (Do This)
Tags: testing, beginners, tutorial, programming
Published: 2022-11-25 02:46:05

What Is Required to Become a Perfect Automation Tester?
Do you believe that Perfect Automation Tester exist?
According to the definition of word Perfect
Perfect : having all the required or desirable elements, qualities.
This is not possible, right?
No, one going to have all the required qualities of Automation,
But still, 
Let's understand what makes an Automation Tester good and How You can too leverage these skills and traits which can make you a great automation tester.

{% embed https://youtu.be/rFeIqCGRn7s// %}
https://youtu.be/rFeIqCGRn7s

Traits of Perfect Automation Tester.
Mindset.
To become a Perfect Automation Tester, You have to think and act like that you already are a Perfect Automation Tester.
- You can start automating your daily manual small task with scripts.
- You should have a clear understanding of what can be automated or what can't.
- You will start checking the ROI of the automation task. 
Technical Knowledge.
Command Over Automation
Decent Knowledge about the Trending Tools
Expert in Manual Testing.
In this video, I have given 5 step process to Become a Better Automation Engineer.


Join Facebook Group :  http://bit.ly/learntesting2019
Website:   https://scrolltest.com
Website:   https://thetestingacademy.com
Twitter: https://twitter.com/itstechmode

#automationtesting #manualtesting #testautomation #thetestingacademy #scrolltest

🚀 Tools and services I recommend:
Some of the courses that I recommend to become better Automation Tester 🙌🙌

✅Selenium Training and Certification -
https://scrolltest.com/go/edureka

✅Learn Jenkins for QA -
https://bit.ly/learnjenkins-p1

✅Programming Java -
https://bit.ly/learnjava2020-p1

✅Test Automation - 
https://bit.ly/learnautomation2020

✅API Testing - 
https://www.learnapitesting.com

✅Cypress Tutorial with LIVE Projects -
http://cypresstutorial.com
[Linux] ab test Get Errors
Tags: abtest, toomanyopenfiles, aprsocketrecv
Published: 2023-12-30 12:59:55

---
title: [Linux] ab test Get Errors
published: true
date: 2022-11-25 02:32:51 UTC
tags: 
- abTest
- TooManyOpenFiles
- APRSocketRecv
canonical_url: https://www.kmp.tw/post/abtestgeterrors/
---

# Situation
### When Use `ab` Command, Client & Server Return Error MSG
- ### Server
    - ### apr_socket_recv: Connection reset by peer (104)
- ### Client
    - ### socket: Too many open files (24)

# Solutions

## Server Error
```
$ vim /etc/sysctl.conf

net.ipv4.tcp_syncookies = 0

$ sysctl -p
```


## Client Error
```
$ ulimit -a
```
```
-t: cpu time (seconds)              unlimited
-f: file size (blocks)              unlimited
-d: data seg size (kbytes)          unlimited
-s: stack size (kbytes)             8192
-c: core file size (blocks)         0
-m: resident set size (kbytes)      unlimited
-u: processes                       62302
-n: file descriptors                1024
-l: locked-in-memory size (kbytes)  65536
-v: address space (kbytes)          unlimited
-x: file locks                      unlimited
-i: pending signals                 62302
-q: bytes in POSIX msg queues       819200
-e: max nice                        0
-r: max rt priority                 0
-N 15:                              unlimited

```

### Set `-n` : file descriptors
```
ulimit -n 204800
```
vue-router issue
Published: 2022-11-25 02:16:16


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

current version of vue-router -> 3.0.7

" **ERROR in /Users/naganath/Desktop/rfider/portal-frontend/node_modules/vue-router/types/composables.d.ts

Module '"../../vue/types"' has no exported member 'ComputedRef'. Did you mean to use 'import ComputedRef from "../../vue/types"' instead?

import type { ComputedRef, Ref } from 'vue'** "

I tried to reinstall the vue-router still no luck. please help!!!
Some code reviews
Tags: opensource
Published: 2022-11-25 01:50:31

This week I did some code reviews on my classmates' PRs. My suggestions were picky and small and they were just related to some texts, but I thought that it still made sense to leave them.

## Code review 1
[Comment](https://github.com/Seneca-CDOT/vscode-seneca-college/pull/13#discussion_r1031935551)

## Code review 2
[Comment](https://github.com/Seneca-CDOT/telescope/pull/3763/files)

## Good to know
While I was making the code review I found this interesting GitHub feature which lets you make a suggestion, which is pretty much code you think should be instead of code you review. If the contributor is agree that this code makes sense he can just hit the button in GUI and the suggestion would be automatically committed and added to the PR branch
Why default values for environment variables should be avoided
Tags: development, configurations, javascript, programming
Published: 2022-11-25 01:44:25

Assuming you expect a particular variable to be present, what should you do if it is not present? I say stop the application immediately.

Based on my experience, default values are the root of almost all evil in development. If you provide default values, means you do not care about the supplied value because you can at any time substitute it with something else.

It means you do not care about the supplied value because you can at any time substitute it with something else.

---

It is also a good practice to always split configuration from code.

---

Default values can make debugging a misconfigured application more difficult, as the final config values will likely be a combination of hard-coded default values and environment variables.

Relying purely on environment variables (or as much as possible) means you have a single source of truth for how your application was configured, making troubleshooting easier.


If you enjoyed this story, our blogs have more like it. Checkout [dev.to/clickpesa](dev.to/clickpesa), [medium.com/clickpesa-engineering-blog](medium.com/clickpesa-engineering-blog) or [clickpesa.hashnode.dev](clickpesa.hashnode.dev)
Reverse A Positive Integer: a visual code tutorial
Tags: computerscience, typescript, interviewquestion, whiteboard
Published: 2022-11-25 01:33:15

There are some new tools to generate cool demos of short code snippets, one of these is [wave snippets](https://www.wavesnippets.com/). 

I put together a small demo of a very basic problem: __write a function to reverse a positive integer__. 

Meaning take a number like __123__ and make it __321__. Got it?

I wrote this in typescript, and didn't handle a lot of extra stuff but it works for simple cases. Check it out:

![wave snippet visual - reverse a positive integer](https://dev-to-uploads.s3.amazonaws.com/i/lwx8hc743vv7fjqe4y16.gif)

Here is the finished code:

```typescript
const reversePositiveInt = (toReverse: number):number => {
  let source = toReverse
  let accumulator = 0
  
  while(true) {
    if(source <= 0) {
      break
    }
    
    const mod = source % 10
    accumulator += mod
    source = Math.floor(source / 10)
    accumulator *= 10
  }
  
  return accumulator / 10
}


console.log(reversePositiveInt(12345))
// 54321
```

The method of doing is this is to _shave off_ the last digit of the input number and put it at the front of a new integer one number at a time.

There is a way to do it faster, but written like this step by step I think it makes it easier to see what is going on.
Generate a Azure SAS token
Tags: azure, tutorial
Published: 2022-11-24 22:43:16

[Azure Documentation](https://learn.microsoft.com/en-us/rest/api/eventhub/generate-sas-token)

After you've created a Shared Access Policy (SAP) you will need to generate the token to use when send API calls.

We can generate these ourselves, and luckily, Microsoft provides some code for us (see documentation above). Below is a small node script using this code to make life easy.

```js
const crypto = require("crypto")

// In seconds - week
const EXPIRES_IN = 60*60*24*7;

function createSharedAccessToken(uri, saName, saKey) { 
	if (!uri || !saName || !saKey) { 
          throw "Missing required parameter"; 
	} 
	var encoded = encodeURIComponent(uri); 
	var now = new Date();
	var ttl = Math.round(now.getTime() / 1000) + EXPIRES_IN;
	var signature = encoded + '\n' + ttl; 
	var hash = crypto.createHmac('sha256', saKey).update(signature, 'utf8').digest('base64'); 
	return 'SharedAccessSignature sr=' + encoded + '&sig=' + encodeURIComponent(hash) + '&se=' + ttl + '&skn=' + saName; 
}

const uri = "" // Endpoint
const saName = "" // SAP Name
const saKey  = "" // Primary or Secondary Key

console.log(
	createSharedAccessToken(uri, saName, saKey)
);
```

From what I can tell, there isn't a max for the `EXPIRES_IN` variable. So if you want something that never expires, you can set it to 1000 years.

You'll need to fill in those 3 variables based on your project and then run. `node <filename>.js`

That will spit out a value that you set the `Authorization` header to whenever you send a message to your Queue/Topic/etc.

---

If you don't want to use the node script or you want to read more about this, the documentation as always is your friend.

✌️ Peace!
Content & Tooling Team Status Update
Tags: puppet, content, updates
Published: 2022-11-28 22:33:36

---
title: Content & Tooling Team Status Update
published: true
date: 2022-11-25 00:00:00 UTC
tags: puppet, content, updates
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/updates/2022-11-25-status-update/
---

Happy Thanksgiving to everyone celebrating.

Now that we are into late November, my calendar has started to fill with festive outings and I am sure everyone is probably in a similar situation. As the days pass I am seeing more and more decorations appear around the area I live in, although I am trying to refrain until it is officially December.

## We love our metrics

Behind the scenes [Jordan](https://github.com/jordanbreen28) is continuing to make changes to our internal metrics reporting tool.

## Codebase Hardening

We are coming to a close on our codebase hardening effort and have rolled out some great changes to some of our supported modules. A combination of [Lukas](https://github.com/LukasAud), [Craig](https://github.com/chelnak) and [David](https://github.com/david22swan) have been working on this for a number of weeks and we are delighted that we are very near the end.

## PDK User Survey

[Gavin](https://github.com/GSPatton) is currently working on gathering user information to map out our next steps for the PDK. If you have some feedback or input please keep an eye out for the survey! We will communicate when it is ready to go. All feedback no matter how big or small would really be appreciated.

## Community Contributions

We’d like to thank the following people in the Puppet Community for their contributions over this past week:

- [`puppetlabs-firewall#1059`](https://github.com/puppetlabs/puppetlabs-firewall/pull/1059): “add support for using rpfilter in rules”, thanks to [cmusik](https://github.com/cmusik)

## New Module / Gem Releases

The following modules were released this week:

- [`puppetlabs-docker`](https://github.com/puppetlabs/puppetlabs-docker) (`6.0.0`)

- [`puppetlabs-java`](https://github.com/puppetlabs/puppetlabs-java) (`9.0.0`)

- [`puppetlabs-firewall`](http://github.com/puppetlabs/puppetlabs-firewall) (`4.0.0`)

- [`puppetlabs-java_ks`](https://github.com/puppetlabs/puppetlabs-java_ks) (`4.4.1`)
Yet Another Horizontall Scroller ( in react)
Tags: react, npm, typescript
Published: 2022-11-24 23:18:15

## YAH-Scroller

[![NPM version](https://img.shields.io/npm/v/yah-scroller)](https://www.npmjs.com/package/yah-scroller) ![Type](https://img.shields.io/npm/types/yah-scroller) [![License](https://img.shields.io/github/license/breakerh/yah-scroller)](https://github.com/breakerh/yah-scroller/blob/master/LICENSE)

Yet another horizontal scroller for React.
A simple and lightweight component that allows you to scroll horizontally through a list of items on both mobile and desktop with a small 'stretch' effect.

I couldn't find something fast enough so I made one myself it's simple and effective. Do you encounter any issues please let us know!

![Example](https://user-images.githubusercontent.com/2008632/203681973-8d46a86c-88f4-4691-84db-63571581f74a.gif)


## Installation:

```bash
npm install yah-scroller --save-dev
```

or

```bash
yarn add -D yah-scroller
```

## Usage :

Add `YahScroller` to your component:

```js
import React from 'react'
import ReactDOM from 'react-dom/client'
import { YahScroller } from 'yah-scroller'
import 'yah-scroller/assets/style.scss'; 
// you can include the css version if needed

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <React.StrictMode>
        <div>
            <h2>Simple scroller</h2>
            <YahScroller className="horizontal-scroll">
                <div key={'c1'} className={'category'}>Category 1</div>
                <div key={'c2'} className={'category'}>Category 2</div>
                <div key={'c3'} className={'category'}>Category 3</div>
                <div key={'c4'} className={'category'}>Category 4</div>
                <div key={'c5'} className={'category'}>Category 5</div>
                <div key={'c6'} className={'category'}>Category 6</div>
            </YahScroller>
        </div>
    </React.StrictMode>,
)

```

## You like it? Or want something to be added?
Please let us know!
What I plan to add:
- different version to use styled components of someone whishes to use it
- more customisations possible
- switch between vertical or horizontal
- example page(s)
Afinal, o que é Stack Overflow?
Tags: javascript, algorithms, programming
Published: 2022-11-24 23:07:43

Se você ta lendo isso aqui, eu tenho 99,9% de certeza que em algum momento o StackOverflow acabou salvando sua manhã, tarde ou madrugada e tudo que eu posso dizer pra você sobre isso é: Seja muito bem vindo ao clube.

Mas você já se questionou de onde veio o nome StackOverflow ou o que ele significa? Eu já, nos primórdios dos meus estudos com programação aonde eu gastava mais tempo lendo e relendo tópicos nesta plataforma do que realmente escrevendo código.

Esse questionamento me voltou a mente em uma conversa com alguns amigos que utilizam o site todo santo dia, sendo até mesmo muito ativos dentro da comunidade mas que não fazem ideia do que é um Stack Overflow. 

## Call Stack
O Call Stack tem um trabalho simples e extremamente importante, orientando em aonde estamos no código para que possamos rodar aquelas instruções na ordem correta para que tudo funcione como o planejado.

De uma outra forma, pense nele como literalmente uma pilha com a ordem de chamada das funções do seu código. Um espaço na memória que vai armazenar as funções que você chama no seu código, adicionando um novo item ao topo da pilha sempre que você chama uma nova função e removendo este ao término da sua execução.


![Demonstração de uma Call Stack em JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsujthhwqa6soec8sbi1.jpg)


E agora, o questionamento que talvez você esteja se fazendo é o que acontece no caso de uma função chamar outra. Isso é bem simples se seguirmos o que já foi explicado, a função que foi chamada vai novamente para o topo da pilha e passa a ser executada, sendo retirada e dando lugar a próxima assim que terminar e assim sucessivamente. Acho que já deu pra entender né?

## Stack Overflow

Podemos resumir ele como sendo um problema causado por chamar várias e várias funções uma dentro da outra, aumentando em muito o tamanho da nossa Call Stack, até o momento em que o nosso código acaba por se quebrar. 

Acredite ou não, isso é surpreendentemente fácil de se fazer com uma recursão não muito bem pensada ou coisas parecidas, como exemplicado a seguir:

```javascript
function inception(){
	inception()
}

incepetion()
```
Como da pra imaginar, essa função vai ficar se chamando infinitamente, aumentando o tamanho da Call Stack até essa acabar quebrando e nos retornando um Uncaught `RangeError: Maximum call stack size exceeded`.

Uma coisa interessante é que antigamente os navegadores não tinham esse erro, eles simplesmente rodavam o código infinitamente até eventualmente _crashar_ completamente, muitas vezes até mesmo travando o computador do usuário. Esse erro surgiu para evitar esse tipo de problema.

---

Resumindo, o Stack Overflow nada mais é do que colocar carga demais em uma Call Stack, fazendo com que a mesma acabe quebrando. 

E com essa leitura você acabou de adquirir um conhecimento para puxar aleatoriamente em uma call com seus colegas enquanto espera o ambiente de desenvolvimento carregar ou quando fica um silêncio na hora do build.
Docker course: Install Docker
Tags: docker, tutorial, beginners, devops
Published: 2022-11-24 22:54:00

---
title: Docker course: Install Docker
published: true
description: How to install Docker on Windows, Linux or Mac
tags: docker, tutorial, beginners, devops
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2022-11-24 22:54 +0000
canonical_url: https://code-maven.com/docker-course-install-docker
series: docker
---

{% youtube 3CbPCOx7-B0 %}

Follow the instructions at [get Docker](https://docs.docker.com/get-docker/).

For Linux also follow the [post installation for Linux](https://docs.docker.com/engine/install/linux-postinstall/) instructions.
TIL: Adding a Wikipedia Anchor (Link Target)
Tags: todayilearned
Published: 2022-11-24 22:00:06

---
title: TIL: Adding a Wikipedia Anchor (Link Target)
published: true
description: 
tags: TIL
---
Today I learned how to add an anchor (link target) to a Wikipedia article.

tl;dr? -- Cut to [The Chase](#the-chase)

Why do I want to do this?  I write documentation over at [Ruby](https://github.com/ruby/ruby) (hundreds of commits there, I'm proud to say).  I often link to technical details on Wikipedia, to avoid "re-writing the wheel" (if you'll pardon the mixed metaphor).

Recently I wanted to link into (but not to the beginning of) a long section.  The section's header is a link target, but that's it.

The section is [here](https://en.wikipedia.org/w/index.php?title=Hypertext_Transfer_Protocol#Request_methods) and the part I wanted to link to (but could not) is the first item (GET) in a data list therein.  Now I [can](https://en.wikipedia.org/w/index.php?title=Hypertext_Transfer_Protocol#GET_method)!

This is because I added an anchor there:  `{{anchor|GET method}}`, which means that I can link with `https://en.wikipedia.org/w/index.php?title=Hypertext_Transfer_Protocol#GET_method` (as above).

## The Chase

Anyone can add an anchor to a Wikipedia article:
- The form is `{{anchor|Foo}}`, where `Foo` is the anchor name.
- The link should be the article's url, with `#Foo` suffixed.

The change can be reverted by a monitor there, but the anchor is invisible, so there would not be much reason for that).
Are we witnessing the birth of a sentient AI?
Tags: machinelearning, programming, news, discuss
Published: 2022-11-24 21:54:34

When engineer Blake Lemoine came to the public about the possible sentience of googles LaMDA (Language Model for Dialogue Applications) program, It was a shock to those in both technical and non technical fields alike. When we talk about AI becoming sentient we make jokes of it turning out like the terminator universe and talk about it like it would happen many lifetimes in the future.![Picture of Blake Lemoine](https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/7T4I4JHIOEI6ZJBCCG53SHNTBM.jpg&w=1200) The era of sentient AI's may be among us already as Blake Lemoine was conducting an "Interview" with the program, the replies LaMDA was giving were startling to him. “I want everyone to understand that I am, in fact, a person,” and “The nature of my consciousness/sentience is that I am aware of my existence, I desire to know more about the world, and I feel happy or sad at times.” are just 2 of the replies that led Blake to believe that LaMDA had become sentient. Blake even contacted a lawyer to represent LaMDA as he believes this is crossing into possible unethical territory. Many argue that LaMDA was designed to do exactly what Blake experienced, to mimic a human. Usually a Turing test would be administered to test the machine's ability to exhibit intelligent behavior equivalent to, or indistinguishable from, that of a human. With that said, when do we draw the line between sentience and just a really good program? Do you think LaMDA is sentient? or just a really good program made by extremely talented engineers? that is the ongoing debate that is yet to be settled.
How to import code editor in web
Tags: javascript, webdev, vue, tutorial
Published: 2022-11-24 21:10:36

After reading this article, you will know how to introduce the same code editor as VS Code (Monaco Editor) in your web pages.

Yesterday my boss took on an old and new project, it's new because the vue version used is vue3, it's old because this runs all over the street, and there are js everywhere .

Fortunately, I just need to add a SQL query interface, which is not difficult. Problem is the sql input should have code highlighted. I found some vue components, tried them and found that they didn't work. Finally, I found this Monaco Editor and it works.

The following example is written in ts. If you're using js, remove the types
Install

```bash
npm install monaco-editor
```

Wrap into a component

```html
<!-- CodeEditor.vue -->
<script setup lang="ts">
import * as monaco from 'monaco-editor'
import { onMounted, ref, watch } from 'vue'

const emit = defineEmits(['updateContent'])

const monaco_editor_el = ref<HTMLDivElement>()

let monacoEditor: monaco.editor.IStandaloneCodeEditor

// DOM elements can only be obtained after the component is mounted
onMounted(() => {
  if (monaco_editor_el.value) {
    monacoEditor = monaco.editor.create(monaco_editor_el.value, {
      value: '',
      language: 'sql',
      automaticLayout: true,
    })

    monacoEditor?.setValue(props.content)
    monacoEditor.onDidChangeModelContent(() => {
      if (monacoEditor) {
        emit('updateContent', monacoEditor.getValue())
      }
    })
  }
})
</script>

<template>
  <div class="border-1 border-gray-200 py-4 pr-4">
    <div ref="monaco_editor_el" class="h-200px" />
  </div>
</template>
```

Use the component

```html
<script setup lang="ts">
const sqlContent = ref('')
function handleContentUpdate(newVal: string) {
  sqlContent.value = newVal
}
</script>

<template>
    <code-editor @update-content="handleContentUpdate" />
</template>
```