teleren/devto huggingface dataset:
Finding Occurences of element in array in js
Tags: javascript, tutorial, beginners, productivity
Published: 2022-07-23 14:57:00

Hello guys today i want to show you how to find number of occurence of element in an array in javascript and also their index.

Lets get started...

## Code - 
```js
let array = [6,1,4,4,2,8,3,4,4,4,5,10,5,9,11,
6,1,4,4,2,8,3,4,4,4,5,10,5,9,11,6,1,4,4,2,8,3,4,4,4,5,10,5,9,11];
let target = 4

const occurences = (array,target) => {
  let result = 0
  let index = []
  for (let i = 1; i <= array.length + 1; i++) {
    if(array[i] === target){
     result++
     index.push(i)
    }
    else{
      continue
    }
  }
  return `${target} occured ${result.length} times at indexes - ${index}`
}

console.log(occurences(array,target))
```

## Output - 
```
4 occured 15 times at indexes - 2,3,7,8,9,17,18,22,23,24,32,33,37,38,39
```

* So first we have created an arrow function with two parameter namely array and target.Array will be the one which we are going to perform our searching for occurences and target is the element we want to find how many times it occured in the array and which index.
* We created two variable result and index.Result will hold the target occurence number and index will hold the indexes of that occurence in the array.
* We created a for loop which will iterate through the array to last element.
* Then we have created a condition with "if" as if the element at current index element is equal to the target element then increase the result with 1 and push the index of that element to the index array and if the element at current index is not equal to the target element then continue the iteration to the next element using "continue" keyword.
* In the end we have return the statement using string interpolation with number of occurences and their indexes.

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION FOR IMPROVEMENT, PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl
”MediBang Paint” is a handwriting raster image editing application
Tags: image, design
Published: 2022-07-23 14:54:04

Introducing MediBang Paint, a raster image editing application specialized for hand-drawn illustrations such as manga. It is free.

![MediBang Paint(https://medibangpaint.com/)](https://ayaco.gitlab.io/zerogravity/en/docs/tool/medibangpaint/feature.png)

## Operating environment

Works on various platforms. For details, see "System Requirements" for various platforms in [Download - MediBang Paint](https://medibangpaint.com/app-download/).

| Windows | Mac | iPad | iPhone | Android |
| --- | --- | --- | --- | --- |
| ○ | ○ | ○ | ○ | ○ |

## Functionality and operability

It has a rich set of brushes whose thickness and density can be controlled by brush pressure, functions that add smoothness and expression to lines such as shake correction and rulers, drawing modes/clips in layers equivalent to Photoshop, and functions that enhance the texture of the paint such as the abundant screen tones that are added every day.

![Example of MediBang Paint editing screen](https://ayaco.gitlab.io/zerogravity/en/docs/image/medibangpaint/sample1.png)

Interesting features are the screen tones and script brushes. Using screen tones to turn clothes into polka dots, or using star-shaped radial brushes to draw colorful backgrounds, these features are unique to manga production apps and can be used to create a comical look.

![Example of MediBang Paint editing screen : Cloud brush/tone](https://ayaco.gitlab.io/zerogravity/en/docs/image/medibangpaint/sample2.png)

## Competitive comparison

### ibisPaint

A free manga creation application that is twinned with MediBang Paint is ibisPaint.

However, I do not use ibisPaint because it displays what I write as blurry[^blur] and I cannot properly judge the quality of my work.

![Example of MediBang Paint editing screen : Comparison of display with ibisPaint](https://ayaco.gitlab.io/zerogravity/en/docs/image/medibangpaint/sample3.png)

## Difference in functionality between free and paid versions

A paid version is also available, but it is equivalent to the free version in terms of editing functions. For more information, see [MediBang Premium - MediBang Paint](https://medibang.com/medibangPremium/).

![MediBang Premium - MediBang Paint(https://medibang.com/medibangPremium/)](https://ayaco.gitlab.io/zerogravity/en/docs/image/medibangpaint/premium.png)

## Official site

| Site | URL |
| --- | --- |
| Home | https://medibangpaint.com/ |
| Documentation | https://medibangpaint.com/use/ |
| Tutorial | https://medibangpaint.com/tutorial/ |



[^blur]: I have not checked if it is blurry on other than Android.
”Photopea” is a raster image editing application
Tags: image, design
Published: 2022-07-23 14:49:33

Introducing Photopea, an online raster image editing application that can be used in a Photoshop-like fashion. It is free.

![Photopea(https://www.photopea.com/)](https://ayaco.gitlab.io/zerogravity/en/docs/tool/photopea/feature.png)

## Operating environment

It works with browsers of various platforms. This is just a guess since I can't find any description of the supported environment, but it is expected to work with Chrome/Firefox/Safari on the following platforms.

| Windows | Mac | iPad | iPhone | Android |
| --- | --- | --- | --- | --- |
| ○ | ○?[^q] | ○ | ○?[^q] | ○ |

## Functionality and operability

Although it is inferior to the industry standard Photoshop in terms of number of functions, it has a sufficient feature set for blog illustrations and photos, including cutting and pasting photos and screenshots, color adjustments, advanced correction tools, paint brushes/buckets/text and vector creation, drop shadows and other effects, halftones/sketch-like filters, etc.

The usability is comparable to Photoshop. Menus, toolbars, layers, and swatches are all the same, so Photoshop users should have no stress. For those who don't know Photoshop, you won't be confused as to where to find the features you want to use, but you may be overwhelmed by the many features/options.

![Example of Photopea editing screen](https://ayaco.gitlab.io/zerogravity/en/docs/image/photopea/sample.jpg)

Below is an example of photo brightness correction. When brightening a dark original image, if the entire image is brightened, the colors in the originally bright areas will be blown out or glare, but by selectively brightening only the neutral colors, the result will look natural. This is the same as in Photoshop, and I appreciate it.

![Example of Photopea editing screen : Adjusting the brightness of a photo](https://ayaco.gitlab.io/zerogravity/en/docs/image/photopea/tonecurve.jpg)

## Competitive comparison

### GIMP

The free alternative to Photoshop is GIMP. In terms of number of functions and users, GIMP > Photopea, and there is a lot of documentation.

However, GIMP's operations are unique and I could not master them. For example, a simple operation such as "select a part of an image as a range and move it" was not clear to me just by looking at the GUI, and I had to Google it.

## Difference in functionality between free and paid versions

There is no paid version. All features are free.

## Official site

| Site | URL |
| ---| --- |
| Home | https://www.photopea.com/ |
| Documentation | https://www.photopea.com/learn/ |
| Tutorial | https://www.photopea.com/tuts/ |



[^q]: "?" are those I have not actually confirmed to work.
Nucleoid IDE
Published: 2022-07-23 14:20:31

Nucleoid IDE helps to build up your APIs with the user interface. It is especially designed for OpenAPI integration and also has a connection to CodeSandbox so that you can easily run your projects on the sandbox or `npx`.

<img src="https://cdn.nucleoid.com/media/screenshot-1.png" alt="Screenshot 1" width="800" height="480" />

<img src="https://cdn.nucleoid.com/media/screenshot-2.png" alt="Screenshot 2" width="800" height="480" />

---

Thanks to declarative programming, we have a brand-new approach to data and logic. As we are still discovering what we can do with this powerful programming model, please join us with any types of contribution!

<center>
  Learn more at <a href="https://github.com/NucleoidJS/Nucleoid">https://github.com/NucleoidJS/Nucleoid</a>
</center>

[![Nucleoid Logo](https://cdn.nucleoid.com/media/icon.png)](https://nucleoid.com)
”Docsy” is a formal theme for technical documentation
Tags: hugo, jamstack, tutorial
Published: 2022-07-23 14:18:00

The following are the features of Hugo’s “Docsy” theme.

## Feature

Docsy is a theme for technical documentation sites. It can provide comprehensive information on a single technical theme by classifying and presenting it in a multifaceted manner using a table of contents, tags/categories, etc., or by providing direct access through keyword searches, thereby quickly providing necessary information to visitors who want to solve problems.

![Example of Docsy screen(official)](https://ayaco.gitlab.io/zerogravity/en/docs/theme/docsy/feature.png)

This site is also Docsy-based. I was originally a fan of Beautiful Hugo, but as the amount of technical information increased, I wanted to use a table of contents to organize and present the information, so I switched.

Although it is designed for technical documentation, it can also have a blog section, so it was perfect for me as I want to write mainly about technology, but also about gadgets and daily life. Also, the front page can be graphically finished, whereas the formal-looking documentation section is more formal, so it can be enjoyed in a variety of ways.

## Official site

| Site | URL |
| --- | --- |
| Hugo theme introduction | https://themes.gohugo.io/themes/docsy/ |
| Sample/Demo  | https://example.docsy.dev/ |
| Documentation | https://www.docsy.dev/ |
| Repository  | https://github.com/google/docsy |
OpenAPI Integration
Published: 2022-07-23 14:18:00

Similar to building on Express.js, you can also build the same APIs with OpenAPI. There is only one additional field `x-nuc-action` that is triggered when the API has been called, which run the action function inside the Nucleoid runtime.

`POST https://localhost:8448/openapi`

```json
{
  "api": {
    "/": {
      "get": {
        "summary": "Hello World",
        "description": "Hello World",
        "params": [
          {
            "name": "example",
            "in": "query",
            "type": "string",
            "required": false,
            "description": "example"
          }
        ],
        "request": {
          "type": "object",
          "properties": {}
        },
        "response": {
          "type": "object",
          "properties": {
            "name": {
              "type": "string"
            }
          }
        },
        "x-nuc-action": "function action(req) { return { message: 'Hello World' }; }"
      }
    }
  }
}
```
Storing Classes and Objects
Published: 2022-07-23 14:16:00

## Class

First thing first, classes require to be registered before used in Nucleoid:

```javascript
class Order {
  constructor(item, qty) {
    this.item = item;
    this.qty = qty;
  }
}

nucleoid.register(Order);
```

## Objects

The same thing for objects, once initiated and assigned to the `var` variable as well as it stored.

```javascript
app.post("/orders", () => {
  var order = new Order("ITEM-123", 3);
  return order;
});
```

and it can retrieve by its `var` variable as mentioned earlier.

```javascript
app.get("/orders", () => {
  return order;
});
```

```json
{
  "id": "order0",
  "item": "ITEM-123",
  "qty": 1
}
```

if object initiated without assigning `var` variable, the runtime automatically assign `var` variable along with `id`

```javascript
app.post("/test", () => new Order("ITEM-123", 3));
```

```json
{
  "id": "order0",
  "item": "ITEM-123",
  "qty": 1
}
```

> :bulb: `id` of object is always the same to its global `var` so that either can be used to retrieve the object like
> `Order["order0"]` and `order0`.

if object assigned to either `let` or `const`, the runtime will create `var` variable the same as its `id`

```javascript
app.post("/orders", () => {
  const order = new Order("ITEM-123", 3);
  return order;
});
```

```json
{
  "id": "order1",
  "item": "ITEM-123",
  "qty": 1
}
```

Now, it can use its `id` as `var` in order to retrieve the object

```javascript
app.get("/test", () => order1);
```
Variables and Control Flow
Published: 2022-07-23 14:15:00

As defined in JavaScript, variables of `var`, `let` and `const` can be used, but only difference is `var` is stored automatically, in meanwhile, `let` and `const` are temporary to its block

```javascript
app.post("/test", () => {
  var a = 1;
  return a;
});

app.get("/test", () => {
  return a;
});
```

> :bulb: Variable definitions without identifier like `a = 1` are upsert operation, also automatically stored.

## Control Flow

```javascript
nucleoid.run(() => {
  var a = 1;
  var b = a + 2;
  var c = b + 3;
});
```

Once a variable is defined like ` var a = 1` (this doesn't apply to `let` or `const`), the runtime does 3 major things. First, it places the `var a` in the graph and makes the connection between dependent variables.

![Variable Graph](https://cdn.nucleoid.com/media/variable-graph.drawio.png)

Second, updates state with new values in order get affect

|         | State |
| ------- | ----- |
| `var a` | 1     |
| `var b` | 3     |
| `var c` | 6     |

However, actual execution is different since variables are tracked in the graph.

```javascript
state.a = 1;
state.b = state.a + 2;
state.c = state.b + 3;
```

and finally stores statements in the runtime-managed `fs`
"Beautiful Hugo" is a simple and clean theme for miscellaneous blogs
Tags: hugo, jamstack, tutorial
Published: 2022-07-23 14:00:00

The following are the features of Hugo’s “Beautiful Hugo” theme.

## Feature

Beautiful Hugo is a beautiful theme with a simple typography-driven screen structure. The balance between the placement and size of images and text is superb, making it easy for anyone to create a sophisticated website.

![Example of Beautiful Hugo screen (official)](https://ayaco.gitlab.io/zerogravity/en/docs/theme/beautifulhugo/feature.png)

The official images don't do justice to Beautiful Hugo's capabilities, so I'll use my past blog as an example. Both the front page and the post pages effectively use eye-catching images to enjoy a very blog-like atmosphere.
I have tweaked the parts a bit, such as making the post images photo-like and numbering the headlines, but the placement/size/colors remain the same as the originals.

![Example of Beautiful Hugo screen (my old blog)](https://ayaco.gitlab.io/zerogravity/en/docs/theme/beautifulhugo/mysample.webp)

## Official site

| Site | URL |
| --- | --- |
| Hugo theme introduction | https://themes.gohugo.io/themes/beautifulhugo/ |
| Sample/Demo  | https://pages.gitlab.io/hugo/ |
| Documentation | https://github.com/halogenica/beautifulhugo/blob/master/README.md |
| Repository  | https://github.com/halogenica/beautifulhugo |
Linux - workaround for pinentry [ERR 83918950 Inappropriate ioctl for device]
Tags: gpg, pinentry, tutorial, linux
Published: 2022-07-23 13:54:00

My workaround will results in a terminal command that will ask for your GPG password, it'll not be a working popup from pinentry.

I did this because I was having this error with pinentry:
```bash
# I'm running Manjaro KDE 21.3.5
$ echo GETPIN | pinentry
OK Pleased to meet you
S ERROR curses.isatty 83918950
ERR 83918950 Inappropriate ioctl for device <Pinentry>
```

I'll assume that if you got to this point, you've already created your GPG key and know something about the gnupg and git config files.

Here's what I've in my configs:
```bash
# .zshrc, .bashrc...
export GPG_TTY=$(tty)
```
```bash
# gpg-agent.conf
pinentry-program /usr/bin/pinentry-curses
max-cache-ttl 60480000
default-cache-ttl 60480000
```
```bash
# gpg.conf
use-agent
pinentry-mode loopback

default-key  XXXXXXXXXXXXXXXX
```
```yml
# .gitconfig
[user]
	name = xxx
	email = xxx
	signingkey = XXXXXXXXXXXXXXXX
[gpg]
	program = gpg2
[commit]
	gpgsign = true
```

### Solution
We are going to create a script to be call by an alias:
```bash
# .zshrc, .bashrc...
alias unlock_gpg="~/.unlock_gpg.sh"
```
```bash
# ~/.unlock_gpg.sh  <- create this file and add the script below
current_dir=$(pwd)
cd ~/.unlock_gpg
git add .
git commit -m "abc"
git reset --soft HEAD~1
cd $current_dir
```
```bash
# Run this command:
$ chmod +x ~/.unlock_gpg.sh
```

Now create a folder with a git repo following the steps below:
```bash
$ mkdir ~/.unlock_gpg/
$ cd ~/.unlock_gpg/
$ git init
$ touch file.txt
$ git add .
$ git commit -m "first commit"
# if gpg ask for your password, provide it
$ echo 'hi' > file.txt

# This will reset your gpg agent, so you can test it below.
$ gpgconf --reload gpg-agent
```

Now try it out:
```bash
$ unlock_gpg
# Now you should see a password prompt like this:
Enter passphrase:
# Just enter your password and sign your commits as you wish
```

If you have a better/definitive solution please comment.
5 ways to give people a moment to remember
Tags: presentation, audience
Published: 2022-07-23 13:52:03

---
title: 5 ways to give people a moment to remember
published: true
description: Great communicators intentionally design memorable moments by using some of the following tactics.
tags: presentation, audience
cover_image: https://img-cdn.inc.com/image/upload/w_1920,h_1080,c_fill/images/panoramic/getty_2847785_200013222000928072_dengwc.jpg
# Use a ratio of 100:42 for best results.
---

The key is to give them something to remember. Whether you're delivering a presentation virtually or in person, your listeners will not recall every word you say. They'll remember moments.

Great communicators intentionally design memorable moments by using some of the following tactics.

## 🎯 Tell stories
Share personal stories that are relevant to the theme of your presentation.

## 🎯 Offer surprising statistics
Find one number that grabs your audience's attention.

## 🎯 Create analogies
A well-chosen analogy speaks volumes.

## Plan surprise reveals
Your message doesn't have to change; just change the way you express it. 

## 🎯 Show Photos, images and videos
Picture superiority effect.

**Above all, people do not pay attention to boring things. Give your audience something to remember, like a story or a surprise they didn't expect.**

*Read the original article [here](https://www.inc.com/carmine-gallo/a-steve-jobs-presentation-hack-to-mesmerize-your-audience.html?cid=sf01002)*
Build a Messenger Clone with MERN Stack (MongoDB, Express, React, Node JS) + Socket.io (Day 10)
Tags: react, javascript, webdev, tutorial
Published: 2022-07-23 13:42:53

In this Facebook Messenger   Clone  Tutorial series, we will learn to build an Awesome Full Stack  Facebook Messenger Project with realtime messaging functionality with socket.io . We have one on one chat as well as group chatting functionality in this app.

In this video,we will learn how to create Facebook LogIn Page in react


{% youtube 8B6XWy6PzCU %}
Conda tip from a `requirements.txt` type of person
Tags: conda, environment, venv, python
Published: 2022-07-23 13:39:32

I am a `requirements.txt` (`venv`/`pipenv`) type of person. I have my reasons for that, but I won't mention these reasons here (well, technically, problems such as the one described in this post is one of these reasons).

At some point, I finally need to get familiar with `conda`. The first surprise: installing `conda` on linux is not as simple as `sudo apt-get install ...` or `sudo pip install ...`. You need to download a bash installer and run it. But I was cool with that. After choosing some installation options, and adding `conda` to the `PATH` (it was also not mentioned explicitly in the installation guides that you have to do it [[1]](https://docs.conda.io/projects/conda/en/latest/user-guide/install/linux.html)[[2]](https://docs.conda.io/projects/conda/en/latest/user-guide/install/index.html)) I was ready to go.

In the repository of a project I wanted to start working on, I had an `environment.yml` file (which is an equivalent of a `requirements.py`). Now comes the most tricky part:

The official documentation says:

 > Create the environment from the environment.yml file:

```
conda env create -f environment.yml
```

Ok, so I did run this command, but I got the following error:

```
CondaValueError: prefix already exists: /home/user/anaconda3
```

That is unfortunate. Anyways, I googled the error, and here's what I found:

[Conda bug: CondaValueError: prefix already exists: /home/user/anaconda2](https://github.com/conda/conda/issues/6973)

Long story short, if your `.yml` file have an empty name field, you have to explicitly specify environment name when creating the environment with `conda` command, like that:

```
conda env create -f environment.yml -n environmentName
```

I followed this advice and my environment has been successfully created.

---

To sum up, my tip, as a `requiements.txt` type of person, is that `conda` is less "user friendly" in the sense that you have to be more aware what is going on, in terms of command execution and naming of the environments. To compare this to the `pipenv`'s behavior: by default `pipenv` creates a directory with your virtual environment in the `~/local/share/virtualenvs/` which comprises of the name of the directory where you invoke `pipenv` command, and a hash. So, the entry level is lower, you just run the command and it works, but then you have to know where the environment is located (you get that information also in the `pipenv`'s output log). Conda, on the other hand, is harder to use because of the more enigmatic error information, and the conventions you have to be aware of, before even running the command.