teleren/devto huggingface dataset:
Não desanime ao chegar no .JS!
Published: 2022-11-03 15:19:13

Sabemos que **Javascript **hoje é uma das linguagens mais complexas e mastigadas do meio **DEV**, mas também a mais importante de todas! Não desanime quando chegar em **.JS**, embora seja cansativo, pare, descanse, mas não desista, é a linguagem mais promissora do futuro!
I need a solution in creating a card stack view in android with native approach.
Tags: android, kotlin, programming, challenge
Published: 2022-11-03 15:14:52


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

I want to create something this, with android stackview approach, anyone can help me!!

I have also posted question over stackoverflow you can answer there also
[https://stackoverflow.com/questions/74305196/how-can-we-create-a-card-stackview-in-android-using-android-native-stackview](https://stackoverflow.com/questions/74305196/how-can-we-create-a-card-stackview-in-android-using-android-native-stackview)
Help needed to write javascript in react app
Tags: javascript, beginners, programming, react
Published: 2022-11-03 15:02:32

Hi Team, I have this javascript code which is used in my html file to rotate a carousel.
Javacsript.js

```
var angle = 0;
function galleryspin(sign) {
  spinner = document.querySelector("#spinner");
  if (!sign) {
    angle = angle + 45;
  } else {
    angle = angle - 45;
  }
  spinner.setAttribute(
    "style",
    "-webkit-transform: rotateY(" +
      angle +
      "deg); -moz-transform: rotateY(" +
      angle +
      "deg); transform: rotateY(" +
      angle +
      "deg);"
  );
}
```

The html line which calls this function looks like this.
    

```
<div> 
        <p class="Carousel-header">Text
        </p>   
      <base href="1.jpg" />  
        <div id="carousel3D">
          <figure id="spinner">
            <img src="images/1.jpg" alt />
            <img src="images/2.jpg" alt />
            <img src="images/3.jpg" alt />
            <img src="images/4.jpg" alt />
            <img src="images/5.jpg" alt />
            <img src="images/6.jpg" alt />
            <img src="images/7.jpg" alt />
            <img src="images/8.jpg" alt />
            <img src="images/9.jpg" alt />

          </figure>
        </div>
        <div class="carousel-nav">
<span  class="ss-icon  left" onclick="galleryspin('-')"
              >&lt;</span
            >
            <span class="ss-icon  right"onclick="galleryspin('')"
              >&gt;</span
            >
        </div>
    </div>
```

I want to implement this in react js. I have created the rfce for the <div> but the code is not working when I click on the < and > buttons to rotate. Looks like the onclick is not calling the galleryspin function. How do I get this to work in react app?
Solve one problem a day
Tags: beginners, programming, tutorial, 100daysofcode
Published: 2022-11-03 15:02:22

## 3 November 2022
### Installing `nvm`
**Why:** Have been using `n`, which is much easier to install and to use. However, since it is a `npm package` which may cause a circular dependency-like problem, I guess there is no harm to install nvm too. [See more](https://www.sobyte.net/post/2022-04/node-mvn-n/)

**Problem:** Using `brew` as always, followed the instruction popped up.

**Solution:** Thanks to [this](https://stackoverflow.com/questions/63757008/terminal-not-recognizing-nvm-after-installed-with-home-brew),
1. Add `source $(brew --prefix nvm)/nvm.sh` to `~/.zshrc`
2. Restart the terminal or `source ~/.zshrc`

## 4 November 2022
### Reverting back to `n`
**Why:** Can't believe I am reverting back to `n` in only 1 day... [CRANQ](https://cranq.io/) seems to be only working with `n`, seemingly because `n` always stores node in `/usr/local/bin` when `nvm` stores it in a user specific path (and with redirection), while CRANQ only recognizes `/usr/local/bin`

### Lack of ETH
**Why:** Goerli is the only official testnet now after ETH Merge, as Rinkeby is depreciated.

**Problem:** Due to the above reason, Goerli gas fee 10x in 2 months causing contract deployment to be very "expensive". Talked to some devs, 2 months ago the average gas is 6Gwei * 6m for 1 contract. Now it is 60Gwei.

**Solution:**
- https://goerli-faucet.pk910.de/
- https://faucets.chain.link/

### useDApp setup
**Problem:** I run into `opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]`

**Solution:**
1. Downgrade your node to 16 or 
2. use `NODE_OPTIONS=--openssl-legacy-provider npm run react-app:start`.
3. If the above is troublesome, put `export NODE_OPTIONS=--openssl-legacy-provider` in `~/.zshrc` first then `npm run react-app:start`. If `export...` doesn't work, do `unset NODE_OPTIONS` first. 

## 9 November 2022
### Regex
**Replace all HTML tags:**`replaceAll("\\<[^>]*>","")`
**Split by punctuation:**`.split("[\\p{Punct}\\s]+")`
Nextjs 13. Is it ready ?
Tags: nextjs, webdev, discuss
Published: 2022-11-03 14:55:08

It's been few weeks since nextjs 13 launch. 
I can't figure out is it ready, worth switching or it's still too early and risky ?
Those new features are very tempting, but the the same time alpha and beta releases for sounds very appealing for big projects.

Anyone has any thoughts on this ?
Heroku
Published: 2022-11-03 14:47:31

Hola a todos. Tengo mi primera aplicación en Spring Boot en Netbeans(aquí tengo el back) y en Angular con java tenfo el front.
Usé Heroku para el deploy del back y no da error. El error H10 aparece cuan ejecuto heroku logs --tail. Probé todo lo que comentaron en otras publicaciones y no me funcionó. No lo pude arreglar. Dejo capturas de pantalla para ver si alguno tiene una mejor idea.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvrpb0euhrek7winc9m1.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7pjrknf3fcnyriyatgd.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu77hl74gnlpgchxmkl5.png)
Next 13 Basics in 10 minutes
Tags: webdev, javascript, programming, nextjs
Published: 2022-11-03 14:44:11

{% embed https://www.youtube.com/watch?v=NYMbugWuXRk %}

Last week, Next 13 has been released.

I've made a previous video to talk about changes.

Today, I take a concrete example to teach you the basics of Next 13.

Would you put components folder outside or inside App as I did in my tutorial?

See you soon,

Guillaume
Easy Way to Dark Mode
Tags: javascript, vue, tutorial, webdev
Published: 2022-11-03 14:42:09

## We will use the VueUse 
you can Read the Docs here [VueUse ](https://vueuse.org/guide/)
## What's the  VueUse ?
VueUse is a collection of hundreds of essential Vue Composition Utilities for interacting with various browser, sensor, animation, and state apis, plus more!

In this Topic, we’ll sample some hand picked functions from each category to give you an idea of what’s possible with VueUse and hopefully wet your appetite to utilize VueUse in your own projects.

#let Start install the VueUse

```
npm i @vueuse/core
```
then will use one of the Utilities named **useDark**

we will import the Utilities into our component

```
import { useDark, useToggle } from '@vueuse/core'
```
And will Define them as Variables

```
const isDark = useDark() // True of False
const toggleDark = useToggle(isDark)
```

the isDark  will give us the Boolean result True or False but by defualt will be False

```
<template>
  <div>{{isDark}}</div>
</template>
```
we will see the output

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

Then we will use the toggleDark  Button to switch between true or false 

```
  <button @click="toggleDark()">
    Is Dark: {{ isDark }}
  </button>
```

##### when we toggle between the Dark mode the useDark add variable in LocalStorage named `vueuse-color-scheme` the value by default (false) is `Auto` and when toggle (true) will be  `dark`

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

## also useDark add class to HTML tag  

```
<html lang="en" class="dark">
```

## Now we can add Style for Dark Mode 

```
.dark {
  background: #252525;
  color: #fff;
}
```

you can see how the Dark mode is applied 

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

🤩 🥳 WOW now you have an Easy Dark Mode Applied in less Than one Minute💪

- You can Find the Repo [Here](https://github.com/abanoub2017/vueUse)

- Or you can see the live code [Here](https://stackblitz.com/edit/vitejs-vite-uu1der?file=src%2FApp.vue,src%2Fmain.js&terminal=dev)

- Read More about UseDark [Here](https://vueuse.org/core/usedark/)

Follow Me in [Linkedin](https://www.linkedin.com/in/abanoub-george-9235b1160/) ☺️ 😊 😇

Thanks For Reading My Topic waiting for More topic in VueUse☺️ 😊 😇
Monthly Amazon Location Service Updates - 2022.10
Tags: amazonlocationservice, amplifygeo, amplify, amazonlocationserviceupdates
Published: 2022-11-03 14:35:03

![img](https://day-journal.com/memo/images/logo/aws/location-service.png)

### Monthly Amazon Location Service Updates - 2022.10

<br>

This is a summary of the October updates for Amazon Location Service.

<br>

## 2022.10 Updates

[Announcing two new HERE map styles for Amazon Location Service](https://aws.amazon.com/about-aws/whats-new/2022/10/two-new-here-map-styles-amazon-location-service/)
Two map styles are available: "HERE Imagery" for satellite imagery covering the entire world and "HERE Hybrid," which displays road networks, street names, and city labels on satellite imagery.

[AWS IoT Core announces Location Action to route location data from IoT devices to Amazon Location Service](https://aws.amazon.com/about-aws/whats-new/2022/10/aws-iot-core-location-action-route-location-data-iot-devices-amazon-location-service/)
Location Action, a feature that routes data from IoT devices to the Amazon Location Service, has been announced.

[Amplify Geo - Add PlaceId support for Geo Autocomplete feature](https://github.com/aws-amplify/amplify-js/pull/10383)
PlaceID is now available in the autocomplete function.

[Maplibre GL JS Amplify - autosuggest place id support](https://github.com/aws-amplify/maplibre-gl-js-amplify/pull/173)
PlaceID is now available in the autocomplete function.

[Amazon Location Service Samples - Leaflet Amplify](https://github.com/aws-samples/amazon-location-samples/tree/main/leaflet-amplify)
Leaflet samples have been added.

<br>

## Other Info

[Amazon Location Service Developer Guide](https://docs.aws.amazon.com/location/latest/developerguide)
Official Amazon Location Service Documentation.

[Amplify Geo Docs](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js)
Official Amplify Geo Docs.

[Amazon Location Service Samples](https://github.com/aws-samples/amazon-location-samples)
Official Amazon Location Service samples.

[amazon-location-service-starter](https://github.com/dayjournal/amazon-location-service-starter)
Build environment to get started with Amazon Location Service.

[A Summary of How to Build Amplify Geo and Amazon Location Service](https://dev.to/aws-builders/a-summary-of-how-to-build-amplify-geo-and-amazon-location-service-5hal)
Summary of Amazon Location Service and Amplify Geo. (as of December 2021)  

[dev.to](https://dev.to/dayjournal)
Articles on Amazon Location Service.

[tags - Amazon Location Service](https://day-journal.com/memo/tags/Amazon-Location-Service)
[tags - Try](https://day-journal.com/memo/tags/Try)
Notes on Amazon Location Service. (Japanese)

<br>

## Related Articles

{% link https://dev.to/aws-heroes/monthly-amazon-location-service-updates-202209-l0p %}
Create Strings using Template Literals
Tags: javascript, codenewbie
Published: 2022-11-03 14:26:38

## Create Strings using Template Literals
Apparently a special type of string exists, a Template Literal, a feature of ES6. “Template literals allow you to create multi-line strings and to use string interpolation features to create strings.” I’m not sure wtf this means.
Interpolation
_Definition:_
1. the act or process of interpolating or the state of being interpolated.
2. something interpolated, as a passage introduced into a text.

### Prompt
I don’t know who wrote this, but holy shit.
“Use template literal syntax with backticks to create an array of list element (`li`) strings. Each list element's text should be one of the array elements from the `failure` property on the `result` object and have a `class` attribute with the value `text-warning`. The `makeList` function should return the array of list item strings.

Use an iterator method (any kind of loop) to get the desired output (shown below).”
```js
[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]
```

```js
const result = {

  success: ["max-length", "no-amd", "prefer-arrow-functions"],

  failure: ["no-var", "var-on-top", "linebreak"],

  skipped: ["no-extra-semi", "no-dup-keys"]

};

function makeList(arr) {

  // Only change code below this line

  const failureItems = [];

  for (let i=0; i < arr.length; i++) {

    failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
  } 
  // Only change code above this line

  return failureItems;

}
const failuresList = makeList(result.failure);
```

- Iiterate as long as i = 0 is less than the length of the array
- Any failed items with the List element with the "text-warning" class will be pushed into the currently empty array, failureItems.
- Instead of using concatenation, we're using the Template Literal ${variable} within the failureItems.push(argument) in conjunction with the list class element in order to accept any array found within any list elements with a class of 'text-warning'.
- When _failuresList_ executes, it prompts the function _makeList_ to propogate the failure results which are produced from the function makeList(arr). 
- makeList(arr) uses the const _failureItems_ which is an empty array until the for loop is executed, which is nearly at the same time(thanks computers).

Error: 
> "_failuresList_ should be equal to the specified output. Template strings and expression interpolation should be used."

The problem was me using quotes instead of backticks. FFS.
Singleton in Unreal Engine
Tags: gamedev, ue4, unrealengine, design
Published: 2022-11-03 13:13:43

[Singleton pattern](https://en.wikipedia.org/wiki/Singleton_pattern) is a very important pattern for storing states in a game and keep them persistent between levels. Also, to share data between at some point. 
**Problem: ** In a game I am currently working on, there are some _actors_ called trash. After a certain amount delay if these items aren't pick up, they destroy and increase pollution factor in the world. Now the pollution factor has to be accessed by every trash to send the event if they are destroyed. Also, if scene changes, the pollution factor won't change. 

**Solution: **Make a singleton class where all the variables which have to be persistent between levels or scenes.

**Challange: **In unity I used a lot of DontdestroyOnLoad to make a lot of persistent object which is recommended. I could keep multiple singleton classes for different mechanism or work. In unreal however you can work with only one singleton class which is called "Game Instance" here. 

**My Approach: **Firstly created a Game Instance from blueprint menu. It's like any other blueprint.

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

In the project settings I changed the default instance with the new one I created.

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

In the Game Instance blueprint I created a custom event which will count pollution factor within. For that I also added a variable to store the pollution factor. And also, why not the life span of the trashes. That way I can change the life span for every trash at once. Also, how much trash to spawn at each time.

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

In the trash I call the event and update the trash count. For that we _Get the game instance_ and cast it to the newly made game instance. 

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

This is how I am implementing singleton for now. This does solve all the singleton related problem for me. But the bad habit of having multiple singleton classes in Unity does irritate me xD.
7 tricks that.. never mind.
Published: 2022-11-03 14:10:00

I couldn't help but notice what's trending today on Dev is more javascript and react- but why the magic number 7? Is 10 no longer valid? Of course, I'm not one to talk because I posted a video last year about 7 cool things about open hardware. :-)

https://www.youtube.com/watch?v=YGNDSr6w_5Y

Anyways, I assume there are always some new trick people have discovered. But still kind of disheartening if those are the top posts.
Get your ranking among all Stackoverflow users for your favourite technology
Tags: javascript, webdev, opensource, node
Published: 2022-11-03 14:04:33

**TLDR**: Visit the [Tags League](https://stackoverflow-readme-profile.vercel.app/tags-league) page, select the technology and enter your Stackoverflow ID 😉 

----

At the end of March, Stack Overflow [discontinued](https://meta.stackoverflow.com/questions/415293/sunsetting-jobs-developer-story/) an important feature for me: the Developer Story. This page allowed me to indicate during interviews my rank among all SO users for **a specific technology**.


![So old developer story page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2l0krh47hyx50ebahrn.png)

So I decided to create a Tags League system as part of my open-source project [stackoverflow-readme-profile](https://dev.to/johannchopin/easily-share-your-stackoverflows-profile-on-your-readme-h9i) which would allow each SO user to know his rank among all users in a specific technology ([tags](https://stackoverflow.com/tags)).

Thus it is possible for a user to display his rank in the form of a dynamic image called *ranking badge*:

[![user:8583669's ranking for javascript](https://stackoverflow-readme-profile.johannchopin.fr/tags-league-ranking/javascript/8583669?theme=default)](https://stackoverflow-readme-profile.vercel.app/tags-league/javascript/users/8583669)

[![user:8583669's ranking for typescript](https://stackoverflow-readme-profile.johannchopin.fr/tags-league-ranking/typescript/8583669?theme=monokai)](https://stackoverflow-readme-profile.vercel.app/tags-league/typescript/users/8583669)

[![user:8583669's ranking for css](https://stackoverflow-readme-profile.johannchopin.fr/tags-league-ranking/css/8583669?theme=cobalt)](https://stackoverflow-readme-profile.vercel.app/tags-league/css/users/8583669)

In addition to the badges, a more "official page" summarises and explains a user's score with more information. In this way it is possible to simply add the link of the page to the badge in order to redirect a reader who is intrigued by this score:

![preview of the official page of an user ranking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf17d7ecg5o6sfu3e4yk.png)

➡️ You can generate these badges and view your score page from https://stackoverflow-readme-profile.vercel.app/tags-league.

Don't hesitate to post your rank in your favourite technology in comments 😉

----

Thanks again for reading. If you are willing to see this project growing don't hesitate to leave a ⭐ to the repo and push your ideas of improvement.

Let me also know if you want me to detail more about how the league calculation works in a future article.

{% github johannchopin/stackoverflow-readme-profile %}
What is ref in mongoose.js
Tags: javascript, webdev, programming, beginners
Published: 2022-11-03 14:03:53

When writing a `Node.js` application with persistent storage such as `MongoDB`, we would need to populate (fill) our database with information to store.

If you are a familiar with `NOSQL` types of databases, you would know that we store informations in **documents** and **collections**.

When trying to populate your database, we create **schemas**. A schema dictates how the documents (objects) in our collection should look like. 


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

## Scenario

Let us say you are creating a To-do application and you want the goals (to-dos) to be associated with a particular user. You would create a schema for Users and a schema for goals. **The question is,** How do you attach the goals to a user.


## Ref option
Now, you can reference documents in other collections. You can replace a specified path in a document with document(s) from other collection(s), this process is known as **population**

The `ref` option is what tells `mongoose.js` which model to use during `population`.

## Example

`userModel.js`

```javascript
const userSchema = schema({

 user: {
    type: String
    required: [true, "add a name"]
},

})

```


`goalModel.js`

```javascript

const goalSchema = schema({

 user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
    required: true
},
 
text: {
   type: String
}

})
```

## Explaination

In our `goalModel`, it contains a user field which is set to type `ObjetId`, and with the `ref` option, we have told `mongoose` to use the id from our `userModel` to fill the user field in `goalModel` during population.

This means all `_id` we store in the `user` field of `goalModel` must be document `_id` from the User Model.



<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

**Thank you, please follow me**

[![HTML](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/ifeanyi-thankgod-chima)&nbsp;[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/masterifeanyi)