teleren/devto huggingface dataset:
Send Action Data to the Store
Tags: redux, javascript, webdev, beginners
Published: 2021-11-30 18:19:56

* Actions usually come from some user interaction and they tend to carry some data with them which Redux store needs to know.
* Code:
```React
const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    // Change code below this line

    // Change code above this line
    default:
      return state;
  }
};

const addNoteText = (note) => {
  // Change code below this line

  // Change code above this line
};

const store = Redux.createStore(notesReducer);

console.log(store.getState());
store.dispatch(addNoteText('Hello!'));
console.log(store.getState());
```

* We have a `notesReducer()` and an `addNoteText()` action creator defined in the code editor. We first have to finish the body of the `addNoteText()` function so that it returns an `action` object with a `type` property` with a value of `ADD_NOTE. As well as, a `text` property set to the `note` data that's passed into the action creator.
* After that we gotta finish writing the `switch` statement in the `notesReducer()`. We need a case that handles the `addNoteText)` actions. The case should be executed whenever there is an action of type `ADD_NOTE` and it should return the `text` property on the incoming `action` as the new `state`.

* Answer:
```React
const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    case ADD_NOTE:
    return action.text,
    default:
      return state;
  }
};

const addNoteText = (note) => {
  return {
  type: ADD_NOTE,
  text: note
  }

};

console.log(store.getState()); // Initial State
store.dispatch(addNoteText('Hello!')); // Hello!
console.log(store.getState()); // Initial State
```
Running a Redis command n times
Tags: redis
Published: 2021-11-30 18:17:26

Did you know that you can prefix any Redis command with a number to make it run multiple times on redis-cli?

```
127.0.0.1:6379> 5 lpush mylist myvalue
(integer) 1
(integer) 2
(integer) 3
(integer) 4
(integer) 5
127.0.0.1:6379> lrange mylist 0 -1
1) "myvalue"
2) "myvalue"
3) "myvalue"
4) "myvalue"
5) "myvalue"
```
Aliendscape 🪐
Tags: codepen
Published: 2021-11-30 18:08:41

<p>A parallax alien landscape generator featuring mountains, stars, meteors, and suns. Programmed in pure JavaScript with love. 🖖👽</p>

<p>Click to generate a new landscape.</p>

<p>The code is based on the background generator from my game Space Huggers. <a href="https://github.com/KilledByAPixel/SpaceHuggers" target="_blank">https://github.com/KilledByAPixel/SpaceHuggers</a></p>

<p>I have also released a simplified version as a dweet. <a href="https://www.dwitter.net/d/23889" target="_blank">https://www.dwitter.net/d/23889</a></p>

{% codepen https://codepen.io/Alisscco/pen/eYGmYNq %}
Redux: Combine Multiple Reducers
Tags: javascript, redux, beginners, webdev
Published: 2021-11-30 18:02:00

* Remember the first principle of Redux: all app state is held in a single state object in the store. You define multiple reducers to handle different pieces of your application's state, then compose these reducers together into one root reducer. 
* The root reducer is then passed into the Redux `createStore()` method.
* Redux gives us the `combineReducers()` method. Which accepts an object as an argument in which you define properties and give them keys to specific reducer functions.
* For the example coming up the state held in the Redux store would be a single object containing count and auth properties.
* Code:
```React
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

const counterReducer = (state = 0, action) => {
  switch(action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

const LOGIN = 'LOGIN';
const LOGOUT = 'LOGOUT';

const authReducer = (state = {authenticated: false}, action) => {
  switch(action.type) {
    case LOGIN:
      return {
        authenticated: true
      }
    case LOGOUT:
      return {
        authenticated: false
      }
    default:
      return state;
  }
};

const rootReducer = // Define the root reducer here

const store = Redux.createStore(rootReducer);
```
* With the `counterReducer()` and `authReducer()` functions provided to us along with the Redux store. Let's finish writing the `rootReducer()` function using the `Redux.combineReducers()` method. Then we have to give `counterReducer` and `authReducer` a key.
* Answer:
```React
const rootReducer = Redux.combineReducers({
  count: counterReducer,
  auth: authReducer
}) 

const store = Redux.createStore(rootReducer);
```
Review - Portainer Business Edition version 2.10
Tags: kubectl, kubernetes, portainer, container
Published: 2021-11-30 17:56:12

On the 15th Nov 2021, @portainerio Business Edition version 2.10 was released. 

In this new release, there are new features and improvements done looking at the previous version. These are some of the new features:
1. Improved UI
2. GitOps Integration 
3. Forced Redeployment 
4. Change Window Settings
5. Kubectl Shell
6. Proxy for container environments
7. Helm Charts support 
8. Custom Templates
9. K8S private registry support
10. HTTPS support
11. Removal of Advanced Mode
12. Dark Mode
You can check out more information on the new release in this YouTube Video: https://bit.ly/3qW4ETX

Among all these new features, let me talk about few of them that really does improve my use of Portainer. First and foremost, I will talk about Dark Mode. Since I spend so much time in front of a screen, dark mode really was a big update in my opinion. Now I can use Portainer without having to worry about brightness.

Another big update was the Kubectl Shell support in Portainer now. These are those updates that makes all the difference whiling using a tool. Now you can easily access the Kubectl Shell without having to leave Portainer at any point. Now I don't have to have kubectl installed on my PC. With this new feature, you can use the embedded kubectl on iPad or Chromebook or any other device which is pretty awesome. 

Last but not least, the other big update is the UI. I know most people don't think the UI doesn't matter but I know for myself it influences me how much time I spend using a tool. The menu is now well arranged and you can collapse the tabs not being used so that you can focus well while working.

My experience is much better now. But it doesn't stop there, there is a major update where now anyone can have 5 free lifetime nodes on the Business version and now you can use them as you test all the features Portainer Business Edition has to offer. This is great news for everyone who is always wondering which tool to give a go since most you only have access to the free version and be able to find out if indeed it does fit the organization needs.

If you wish to test the Portainer Business Edition, use this link to get started: https://bit.ly/3k9GjWw
Redux: Register a store Listener
Tags: javascript, devops, beginners, redux
Published: 2021-11-30 17:52:15

* There's another method you have access to on the Redux store object is `store.subscribe()`. What this does is basically subscribe a function to your store that simply logs a message every time an action is received and the store is updated.
* FreeCodeCamp Code:
```React
const ADD = 'ADD';

const reducer = (state = 0, action) => {
  switch(action.type) {
    case ADD:
      return state + 1;
    default:
      return state;
  }
};

const store = Redux.createStore(reducer);

// Global count variable:
let count = 0;

// Change code below this line

// Change code above this line

store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);
```
* Basically what they want us to do is to write a callback function that increments the global variable count every time the store receives an action, and pass this function in to the store.subscribe() method.

* Answer:
```React
let count = 0;

store.subscribe(function() {
  count += 1
})
```
Bug reports with useful information
Tags: javascript, webdev, github, showdev
Published: 2021-11-30 17:49:35

So I recently built a small open source project that lets you generate bug reports for your website with **useful** information that will give you more context and information on the details of the problem. The bug reporter will include helpful information such as: a screenshot of the page (generated with html2canvas), a copy of the console log, information about the user's device and much more. Instead of receiving bug reports with little information from non tech-savvy users, just generate the reports quickly with all the information you want!

[Demo](https://morcreate.net/github/BugReporter/) | [Dashboard](https://morcreate.net/github/BugReporter/dashboard/) | [Github](https://github.com/JackChilds/Bug-Reporter)

## How do I use the project
To use the bug reporter, just include the necessary files:
```html
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.3/dist/html2canvas.min.js" integrity="sha256-QT3W6xEiCZLGc8yEu9fiRM+V1UlKjJ/WEfg1VXnFns4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/JackChilds/Bug-Reporter@main/dist/bugreporter.min.js"></script>
```
And then just call the generate function:
```js
BugReporter.generate({
    additionalInfo: [ // the additionalData array allows you to specify additional information to go alongside the bug report
        ['User feedback', 'some text'],
        ['More information', 'some more text'],
        ['An array of integers', [1,2,3,4,5]]
    ],
    // default preferences:
    cookies: true, // bug reporter will include cookie data
    localStorage: true, // bug reporter will include localStorage data
    sessionStorage: true, // bug reporter will include sessionStorage data
    html: true, // bug reporter will include a copy of all the HTML on the page, tags with the 'data-bugreporter-hide' attribute will be omitted
    windowLocation: true, // bug reporter will include window.location data
    navigatorInfo: true, // bug reporter will include navigator data, including userAgent and language
    takeSnapshot: true, // bug reporter will use html2canvas library to take a snapshot of the page. Note: you need to include html2canvas.js in your page
    screenInfo: true, // bug reporter will include screen data
}, (data) => {
    const d = JSON.parse(data);

    // now do something with the data like send it to your server
});
```

{% github JackChilds/Bug-Reporter no-readme %}
Product application in php
Tags: php
Published: 2021-11-30 17:42:36

Hello
I have a problem with this application.



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

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

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

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

Instead of button I should use hyperlink to delete the posts with checkbox. Does anyone have an idea?
Redux: Use const for Action Types
Tags: javascript, redux, beginners, devops
Published: 2021-11-30 17:23:29

* Welcome again and thank you for continuing this journey with me. Today FreeCodeCamp wants us to work with action types. When working with Redux its common practice to assign action types as read-only constants( `const` declarations), then reference these constants wherever they are used.
* Code:
```React


const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {

  switch (action.type) {
    case 'LOGIN': 
      return {
        authenticated: true
      }
    case 'LOGOUT': 
      return {
        authenticated: false
      }

    default:
      return state;

  }

};

const store = Redux.createStore(authReducer);

const loginUser = () => {
  return {
    type: 'LOGIN'
  }
};

const logoutUser = () => {
  return {
    type: 'LOGOUT'
  }
};
```
* FreeCodeCamp wants us to declare `LOGIN` and `LOGOUT` as const values and assign them to the strings `'LOGIN'` and `'LOGOUT'`, respectively. Then, edit the authReducer() and the action creators to reference these constants. Remember to write them all uppercase.

* Answer:
```React
const LOGIN = 'LOGIN'
const LOGOUT = 'LOGOUT'

const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {

  switch (action.type) {
    case LOGIN: 
      return {
        authenticated: true
      }
    case LOGOUT: 
      return {
        authenticated: false
      }

    default:
      return state;

  }

};

const store = Redux.createStore(authReducer);

const loginUser = () => {
  return {
    type: LOGIN
  }
};

const logoutUser = () => {
  return {
    type: LOGOUT
  }
};
```
Developers say goodbey to non-coding tasks
Tags: career, productivity, tooling, agile
Published: 2021-11-30 17:11:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ttrd5p28ccghs9f22px.png)> Hello world (and all you developers out there)👋👋

𝐀𝐫𝐞 𝐲𝐨𝐮 𝐬𝐢𝐜𝐤 𝐨𝐟 𝐥𝐨𝐬𝐢𝐧𝐠 𝐭𝐢𝐦𝐞 𝐭𝐨 𝐧𝐨𝐧-𝐜𝐨𝐝𝐢𝐧𝐠 𝐭𝐚𝐬𝐤𝐬?
Are you tired of the constant noise around mundane tasks, endless systems, and complex processes that keep you from doing the work you love?

𝐒𝐨 𝐚𝐫𝐞 𝐰𝐞

Meet Zigi, your own AI-powered personal assistant that manages your entire dev workflow and handles all your mundane, non-programming tasks across multiple apps, so you can focus on code creation and innovation. 😎

𝐖𝐞’𝐫𝐞 𝐡𝐞𝐫𝐞 𝐭𝐨 𝐫𝐞𝐝𝐮𝐜𝐞 𝐭𝐡𝐞 𝐧𝐨𝐢𝐬𝐞 𝐟𝐨𝐫 𝐲𝐨𝐮 - 𝐣𝐨𝐢𝐧 𝐨𝐮𝐫 𝐛𝐞𝐭𝐚 𝐠𝐫𝐨𝐮𝐩 𝐭𝐨𝐝𝐚𝐲 𝐚𝐧𝐝 𝐡𝐞𝐥𝐩 𝐮𝐬 𝐬𝐡𝐚𝐩𝐞 𝐙𝐢𝐠𝐢!

https://www.zigi.ai/

** Zigi currently supports developers that are working with: Slack, Jira, Github, Bit bucket (with more on the way).
GitHub Issues to Wechat
Tags: actionshackathon21
Published: 2021-11-30 15:09:56

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
{% github https://github.com/HollowMan6/GitHub-Issues-to-Wechat %}

[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)


### Submission Category: 
Maintainer Must-Haves

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code
https://github.com/HollowMan6/GitHub-Issues-to-Wechat/blob/main/.github/workflows/message.yml

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info
#### The Blog Post About the Project
https://dev.to/hollowman6/a-workflow-for-sending-github-issues-prs-or-discussions-updates-to-wechat-1b7d
#### Source Code for WeChat Message pushing
https://github.com/HollowMan6/GitHub-Issues-to-Wechat/blob/main/GitHub-Issues-to-Wechat.py
#### Docker File
https://github.com/HollowMan6/GitHub-Issues-to-Wechat/blob/main/Dockerfile
#### Docker File
https://github.com/HollowMan6/GitHub-Issues-to-Wechat/blob/main/Dockerfile
#### View on GitHub Marketplace
https://github.com/marketplace/actions/github-issues-to-wechat

[Note]: # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )
TypeScript: Any vs Unknown
Tags: javascript, typescript, webdev, braziliandevs
Published: 2021-11-30 17:08:00

Se você acabou de chegar no mundão do **TypeScript**, aqui está um conteúdo essencial, onde diferencia a ideia de 2 tipos primitivos. E também o porquê de que se você sair usando arbitrariamente **_any_** você não está _realmente_ usando o **TypeScript** e deveria fazer apenas fazer em **JavaScript**...

## Vamos pegar um exemplo bem simples e a partir dele debater a ideia. 

```typescript
let fulano: any = "João";
let ciclado: unknown = "Augusto"
```
Ao tipar a variável "Fulano" com any, nós literalmentes dizemos para o Transpilador/Compilador do Typescript que ela é literalmente: Qualquer coisa. 

Por exemplo, para ele, o seguinte código seria **totalmente válido.**

```typescript
fulano.funcao(); 
```

Todavia, não existe essa função em fulano. Logo, em tempo de execução, isto é: em runtime, nos retornaria um erro (ou seja, ia dar merda). 
(ノಠ益ಠ)ノ彡┻━┻

Já com o "Unknown" o negócio é diferente, a gente usa o propósito mor do TypeScript: Type Safety (Segurança de Tipos ante execução).

```typescript 
ciclado.funcao();
```

![Typescript error because of a calling on a unkown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lg593zeiqkk0odo3aanj.png)

Ou seja, o Transpilador/Compilador do Typescript não vai deixar esse código realmente deixar ser executado, porque, o sistemas de tipo não é capaz de garantir que realmente haja essa função dentro de ciclano.


### Simples né? ¯\_(ツ)_/¯

Vem pro meu twitter & muito mais: https://allmylinks.com/luisvonmuller

Aqui tem mais conteúdo sobre TypeScript em PT-BR: https://luisvonmuller.gitbook.io/typescript-para-brasileiros/

<small> Beijão (っ˘з(˘⌣˘ ) </small>
Python Program to check Prime Number
Published: 2022-02-19 14:43:33

---
title: Python Program to check Prime Number
published: true
date: 2021-11-30 16:52:36 UTC
tags: 
canonical_url: https://codecaliper.me/python-program-to-check-prime-number
---

The program we will be creating will determine whether a number is a prime number or not. In this case, we will ask the user for a number he wishes to check for prime number.

# Explanation

We'll loop and divide the number with all the numbers less than that number except 1. If any number divides it completely without leaving a remainder, then it is not a prime number, and if it cannot be divided, then it is a prime number.

## Source Code

```
n= int(input("Enter a number "))
for x in range(2,n):
    if n%x==0:
        break
if x+1==n:
    print (n,"is a prime number")
else:
    print (n,"is not a prime number")

```

## Output

```
Enter a number 1523
1523 is a prime number

```
Triggers en Oracle (campos autoincrementables)
Tags: oracle, programming, productivity, tutorial
Published: 2021-11-30 16:51:02

- **Creación de una tabla**
Primero, debemos tener la tabla con los campos para poder crear su trigger más adelante. Para crear la tabla, lo hacemos desde la interfaz o bien, de la siguiente manera con comandos:
```CREATE TABLE Animales
(id_animal number primary key,
nombre VARCHAR2(25) NOT NULL,
color VARCHAR2(25) NOT NULL);```


- **Creación de una secuencia** 
Una vez la tabla esté lista, le indicamos con una secuencia, que inicie en 1 y se incremente en 1 cada vez que se vaya a insertar un dato:
```CREATE SEQUENCE canimales
START WITH 1
INCREMENT BY 1; ```
 

- **Creación del trigger** 
Para que el campo 'id_animal' se autoincremente de una manera elegante, utilizaremos el trigger para que se encargue de obtener e insertar el valor de la secuencia automáticamente. La manera correcta de crear uno, es la siguiente:
```CREATE TRIGGER TRIG_ANIMALES
BEFORE INSERT ON Animales
FOR EACH ROW
BEGIN
SELECT canimales.NEXTVAL INTO :NEW.id_animal FROM DUAL;
END; ```
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvmysh6kv615ezmsaol4.png)

Este trigger lo podemos encontrar en la carpeta 'Disparadores' de las propiedades de la tabla:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tsox5h73gljgscveocw.jpg)

- **Inserción de datos** 
Listo, ahora podemos insertar datos y cada uno tendrá un id único gracias al trigger:
```INSERT INTO Animales (nombre, color)
VALUES ('Caballo', 'Blanco');```

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m61gdudg5j57jmx2cs86.png)
React Developers Visualize Audio Files With ✨ Tarang
Tags: react, beginners, programming, webdev
Published: 2021-11-30 16:37:44


Hi Folks,


Have you ever wondered, how to visualize an 🎧 audio 🎧 in your react app ? or how to snow an animated, beat synced UI for currently playing music ?

Will explore it in this article 

## 🎇 Tarang 🎇

Tarang is a NPM package, which enables the visualization of audio files. It uses D3 based chart and line animations in order to create svg-based visualization.

By using Tarang, any one can visualize audio files with ease. By enabling beat catch-up and some smooth, glorifying animations Tarang allows us to create superbb... USER experience.

by using cool animation it does fantastic animation's without adding much overhead in front end apps.

There are several options currently exposed by Tarang enlisted as  :

1. Separate Thumbnail image 
2. Height and width of Thumbnail image 
3. Control based of representation of audio
4. Mute or unmute audio
5. Play on focus and stop on unfocus

### Usage 

### 1. 📊 Bar Visualizations 

Bar visualization enables bar-chart like animations. Which can be used as 

```js

import React, { Component } from 'react'

import Tarang from 'tarang'
import 'tarang/dist/index.css'

class Example extends Component {
  render() {
    return <Tarang.Bar
        width={500}
        height={200}
        scale={1}
        controls={true}
        muted={false}
        volume={0.8}
        audioUrl={"url-of-mp3-file"}
        coverArtUrl={"url-of-cover-art-image-file"}
      />
  }
}

```

### 2. 📈 Line Graph :

Line visualization enables typical graph-line like animations. Which are created as follows 

```js

import React, { Component } from 'react'

import Tarang from 'tarang'
import 'tarang/dist/index.css'

class Example extends Component {
  render() {
    return <Tarang.Line
        width={500}
        height={200}
        scale={1}
        controls={true}
        muted={false}
        volume={0.8}
        audioUrl={"url-of-mp3-file"}
        coverArtUrl={"url-of-cover-art-image-file"}
      />
  }
}

```

In Tarang, we can directly use the S3 file urls or any other subsequent urls of asset (i.e. both for music files and thumbnails). 

It is easy to use and compatible with many frontend frameworks like 

Next.js, Gatsby etc.


Currently, it is still in development, but we can some more interesting stuff in upcoming duration 


Github Link : 

https://github.com/kamalyesh/tarang


😇 Thanks for reading...
1 line of code: How to sort an array by descending order
Tags: javascript, webdev, performance, codequality
Published: 2021-11-30 16:30:05

```javascript
const sortDesc = arr =>  [...arr].sort((a, b) => a - b).reverse();
```
Returns a new array sorted by ascending (Numbers). 
Beware of JavaScript's Automatic Type Conversion if your `Array` contains something else than `Numbers`.
 
---

## Optimised Code
```javascript
const sortDesc = arr =>  [...arr].sort((a, b) => b - a);
```
 
---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---
Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---