teleren/devto huggingface dataset:
Important JavaScript Array method
Tags: javascript, webdev, programming, beginners
Published: 2022-10-11 17:28:05

Hello Developers,

While coding you definitely need arrays somewhere in your code. and if you have used arrays, you must know how to work loop over arrays.
So, basically in this blog, we are going to learn about the most used javascript array method. Yes, you have guessed it correctly, it's the `map()` method.

## map()

{% youtube ldQ4wHy0I_8&t=13s %}

Remember all the points written below, so you will never confuse about when and where to use the `map()` method.

1. It is used to iterate over an array, it's just like forEach() and for of loop.
2. It does not mutate the original array.
3. It returns a new array.

## Syntax
```javascript
const array = [2, 4, 5, 6]

// it takes a callback function
// array.map(callbackFn())

// parameters of callback function
// 1. callbackFn(element)
// 2. callbackFn(element, index)
// 3. callbackFn(element, index, arrary)    the 3rd one is the original array where we are using map()

```

We are going to learn javascript `map()` with 3 questions.

### Question 1
```javascript
// Create a new array based on the given array with twice every element.
// double [2, 6, 4, 16, 18, 10, 2, 14]

const myArray = [1, 3, 2, 8, 9, 5, 1, 7]

const doubledArray = myArray.map((el) => el * 2)

```

### Question 2
```javascript
// Create a new array based on the given array with the sum of index + element at that index.
// double [1, 4, 4, 11, 18, 10, 2, 14]

const myArray = [1, 3, 2, 8, 9, 5, 1, 7]
```

### Question 3
```javascript
// create a new array based on the given array object, the new array should contain 

const items = [
	{
		id: 1,
		fName: 'John',
		lName: 'Doe',
	},
	{
		id: 2,
		fName: 'Julia',
		lName: 'Green',
	},
	{
		id: 3,
		fName: 'Thomas',
		lName: 'Freguson',
	},
	{
		id: 4,
		fName: 'Jane',
		lName: 'Smith',
	},
	{
		id: 5,
		fName: 'Maria',
		lName: 'Reese',
	},
]

const newItems = items.map((el) => `${el.fName} ${el.lName}`)
// ['John Doe', 'Julia Green', 'Thomas Freguson', 'Jane Smith', 'Maria Reese']
```

Hope you have understood when to use the `map()` method in javascript

If you have any queries you can post in the comment.

You can also connect with me on [LinkedIn](https://www.linkedin.com/in/shubhamku044) and [Twitter](https://twitter.com/shubhamku044)
Git Internals: Rewriting History and Overcoming Gitsasters
Tags: git, programming, tutorial, codenewbie
Published: 2022-10-11 17:23:52

{% embed https://youtu.be/tc4LnmhZusc %}
## Brief, or what I do for fun
When I'm not wearing my CTO hat at [Swimm](https://swimm.io/product?utm_source=dev-to&utm_medium=publisher&utm_campaign=brief-git-int-oct11) (we're building a documentation platform for devs), I create videos for my YouTube channel, Brief. Brief is my way of sharing knowledge and creating tutorials about Programming, Git, Computer Networks, Computer Science and more. 

## About the tutorial 
Understanding the concepts of git can help us in many cases. Sometimes, it can help us when things go wrong - for example when we did something we did not want to do, and we would like to go back in time. We will call these cases - `gitsasters`, that is, disasters when working with git.

This video, as well as the next one, will provide you with some superpowers. After these two videos, you will feel confident when things go wrong in git. When someone commits to the wrong branch, they will call you, and you will be able to help out. When a team member loses important changes they have made, you will be the person to consult with.

In these two videos we will deepen our understanding of git while acquiring new tools, especially for rewriting history. We will also apply these tools to real-life scenarios.

I also wrote [an article on this topic](https://swimm.io/blog/rewriting-history-and-overcoming-git-disasters-gitsasters-part-1-git-reset/?utm_source=dev-to&utm_medium=publisher&utm_campaign=brief-git-int-oct11). 

Let me know if you found this tutorial useful! And if you have an idea for a future tutorial, I'm all ears.
Building an Event Ticketing App with Quarkus & ButterCMS
Tags: java, webdev, beginners, quarkus
Published: 2022-10-11 17:00:37

In this [tutorial](https://buttercms.com/blog/quarkus-tutorial-event-app/), you'll learn how you can develop a functional event ticketing app built with Quarkus and ButterCMS. You'll be able to book tickets, receive a confirmation message, and more.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19i53u6tkvswsgjeko9b.png)
Part1- Context Api in React Class Based Component
Tags: javascript, react, beginners, coding
Published: 2022-10-11 16:34:03

=> **Here Folder Structure image here**:

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


**I<u>ndex.js Code:-</u>_**

```
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
)
```

**_<u>App.js Code:-</u>_**

```
import React, { Component } from 'react'
import User from './User'
export const myContext = React.createContext();

export default class App extends Component {
    state = {
        name: 'Rahul',
        value: 10
    }

    handleClickContext = () => {
        this.setState({
            value: this.state.value + 1
        })
    }

    render() {
        const contextValue = {
            data: this.state,
            handleClick: this.handleClickContext
        }

        return (
            // <myContext.Provider value={this.state.name}>
            <myContext.Provider value={contextValue}>
                <User />
            </myContext.Provider>
        )
    }
}

```

**_<u>User.js Code:</u>_**

```
import React, { Component } from 'react'
import Guest from './Guest'

export default class User extends Component {
  render() {
    return (
      <div>
        <h3>User component</h3>
        <Guest />
      </div>
    )
  }
}

```

**<u>_Guest.js Code:_</u>**

```
import React, { Component } from 'react'
import { myContext } from './App'

export default class Guest extends Component {
    render() {
        return (
            <div>
                <h3>Guest Component</h3>
                <myContext.Consumer>
                    {({ data, handleClick }) =>
                        <>

                            <h4>{data.name}</h4>
                            <h4>{data.value}</h4>

                            <button onClick={handleClick}>Change Value</button>
                        </>
                    }
                </myContext.Consumer>
            </div>
        )
    }
}

```

**_<u>Output:-</u>_**

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



Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)
My first post and thoughts on my journey to being a Software Engineer.
Tags: beginners, codenewbie, devjournal
Published: 2022-10-11 16:12:56

I started the Software Engineering course on September 17th 2022. I recently finished a Data Analytics bootcamp the week prior with UCI. Doing the prework for the bootcamp was not as difficult as I thought due to my experience with Javascript, HTML, CSS and GitHub with the Data Analytics bootcamp. I learned enough basics to get me this far. As I am going through the first phase of the program, it is getting to be a bit difficult. Writing functions for Javascript is not an easy task. I do however have a B.S. of Science in Mathematics, so when I write functions I can understand the structure and logic behind it but writing the function is the toughest part. If I get stuck I rely on resources provided by lessons or get a tutor to help me out. Being an educator myself has made me realize to take advantage of every resource provided and that everyone needs help at some point. I am excited to see what is coming in the future and hope to hone my skills so I can land a job in June 2023. I find this very interesting and are excited to do the work since the structure of the course is very concise and easy to understand. Thank you for reading this long blog and have a good day!!

-Hernandez
Hacktoberfest 2022 🎉
Tags: hacktoberfest, contribute, beginners, programming
Published: 2022-10-11 16:09:14

**Hacktoberfest encourages participation in the open source community, which grows bigger every year. Complete the 2022 challenge and earn a limited edition T-shirt.**

_[Register](https://hacktoberfest.com/) for Hacktoberfest and make four pull requests (PRs) between October 1st-31st to grab free T-shirt and more._

## You can easily contribute to my GitHub [repository](https://github.com/Lancelot03/Hacktoberfest-2022).

You can upload your file of any programming language or if folder is not present then create folder. Some more repos for contribution.

## Rules

- _Don't use filthy words and be welcome for beginners and other people in this community._

- _And enjoyed the open source participation._😄

## GitHub Contribution Rules

- _This year, only the first 40,000 participants can earn a T-
shirt. So, Hurry up_😁

- _To get a shirt, you must make four approved pull requests (PRs) on opted-in projects between October 1-31 in any time zone._

- _Pull requests can be submitted to any opted-in repository on GitHub or GitLab._

- _The pull request must contain commits you made yourself._

- _If a maintainer reports your pull request as spam, it will not be counted toward your participation in Hacktoberfest._

- _If a maintainer reports behavior that’s not in line with the project’s code of conduct, you will be ineligible to participate._

## Getting Started 😁😎

- Fork this [repo](https://github.com/Lancelot03/Code-The-Problem) (button on top)or Clone on your local machine.
```
gh repo clone Lancelot03/Code-The-Problem
```

- Create a new Branch

```
git checkout -b my-new-branch
```

- Add your contribution

```
git add .
```

- Commit your changes.

```
git commit -m "Relevant message"
```

- Then push

```
git push origin my-new-branch
```

- And don't forget to create pull request from your forked repository 

- And if you are not comfortable using Git you can use directly the GitHub

<u>_And please feel free to reach me if you face any issues._</u>
The API Economy
Published: 2022-10-11 15:55:57

---
title: The API Economy
published: true
description: 
tags: 
image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4xm63hnzl89mco6rl9m.png
canonical_url: 'https://kevwe.com/weekly/202241'
# Use a ratio of 100:42 for best results.
---
The focus on new languages and new technologies sometimes has left behind the need for data interchange and durability.

Do not keep reinventing new ways to do do the same things if fewer application are then able to speak to each other:

the net result is a loss.

Favor technologies that are contract-based: be explicit about the spec, and loose about the implementation details.

We want to build APIs that last longer than the languages they're implemented with.

We want our applications to be an investment, not just a temporary luxury: something that lasts.

Below The links of the week:

https://kevwe.com/weekly/202241
When will I actually use a hashmap?
Tags: react, sinatra, api, ruby
Published: 2022-10-11 15:55:30

<h1>Concept</h1>

"Hashmap" is a fun buzz word.

I ran into a problem where the API I was using supplied comments with a user_id instead of a username. This was an API I made and the right way to fix it might have been to adjust what the main API fetch gave back but I was in a time crunch and was able to create a quick solution using a hashmap


![Improperly Formatted Comment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eekl2hee0wz1w8bidsn7.png)
<center><em>"from user 151"</em></center>

What I did was at the App level of the React app I did one extra fetch to all Users and created a hashmap to pass down and replace a user ID with a username.

<h2>What is a hashmap?</h2>
A hashmap is often like a mini dictionary. We can use it to store the outputs of some computationally heavy functions in an object so that the functions don't need to be run multiple times once we know what the outputs are.

In this case we want to create a "dictionary" that relates user_id to username. So it will look something like this.

```js
hashmap = {
    id1: "user 1"
    id2: "user 2"
}
```

Now wherever we have a user_id in our code we can replace that with

```js
hashmap[user_id]
```

and get the username itself.

<h1>Code</h1>

Here's how I implemented it in a React app with a Sinatra & Ruby backend.

<h2>Add state for storing hash</h2>

```javascript
const [ userHash, setUserHash ] = useState();
```

<h2>Add a new fetch...</h2>

```javascript
useEffect(() => {
  fetch("http://localhost:9292/userhash")
  .then(resp => resp.json())
  .then(data => {setUserHash(data)});
 }, []);
```

<h2>In Application Controller</h2>
```ruby
get "/userhash" do
  userhash = {}
  User.all.map{|u| userhash[u.id] = u.username }
  userhash.to_json
end
```

Now our fetch gives us back...

```JSON
// 20221011094622
// http://localhost:9292/userhash

{
  "50": "DaddyCham",
  "51": "Mullet",
  "52": "Cass",
  "53": "bigsis"
}
```

<h2>🚨 PASS USERHASH TO COMPONENTS IT'LL BE USED 🚨</h2>

Now where we had for example...

```jsx
{comment.user_id}:}
```

we can replace that with...

```jsx
{userHash[comment.user_id]}:
```

And we get our correctly attributed comment:


![Fixed Comment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x8xg6zw7y9mukfcnk0v.png)

<em>Hope this helps someone out!</em>
-Elliot/Big Sis
📦 I wrote my first NPM package
Tags: javascript, npm, typescript, react
Published: 2022-10-11 15:50:28

## Introduction

Hello guys & girls, Matheus Mello here 👋.

I've been trying to create components and helpers that can be easily installed and used in my different projects.

To achieve that I created my first NPM package: **[react-mobile-animated-banner](https://github.com/matsmello/react-mobile-animated-banner)**

I would like to invite you to use it if you needs it.

## Reason why I created this NPM package

The main of it this library is showing the `mobile banner` on your website, so imagine that you want to convert users from your website to the mobile app, this is where the package comes in.

**Preview:**

![NPM package on the iPhone  XR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm5v7oi2cac92rwidw2g.png)

_NPM package on the iPhone  XR_

There are a few things that I am still implementing like:

- [ ]  Adding props to accept custom numbers of stars.
- [ ]  Adding props to accept custom styles on all different components.
- [ ]  Adding animation to fade in and out, slide in up/right/left/down.
- [ ]  Retrieving app information from the app stores instead of being only hardcoded.
- [ ]  Adding tests.

## Learnings

These are the learning that I got from doing this, it was really hard to understand how you can test or on library while you are developing, also I found tutorials but a few of them were deprecated and after releasing the library it took me some time to understand how I could write the `[README.MD](http://README.MD)` in a way to help the consumers of the library. I am still looking for a way to improve the documentation and the size of the library itself.

![react-mobile-animated-banner on the NPM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hels6iwj424r77hl84f.png)

_react-mobile-animated-banner on the NPM_

🕺 Feel free to help me improving this library and adding more cool features. I would like to know if you are interesting on how I achieved this, using **Typescript, Jest, React, Yarn, NPM** and **GitHub** if you want to know more about this process and how you also can do it, let me know.

👋Help me achieving 500 followers on [LinkedIn](https://www.linkedin.com/in/matheus-da-silveira-mello/) where I share some of my thoughts.

💰 These are my 2 cents for today.

👇 Let me know what you think about this topic in the comments section.

👉 Follow me to know more about it.

✅ This is my [medium](https://melloo.medium.com/) where I write all startups, tech and entrepreneurship of topics.
🤩Crash Course: Create CRUD Website(Single Page Application) Using Expressjs+MongoDb+Axios
Tags: javascript, mongodb, bootstrap, axios
Published: 2022-10-11 15:48:53

In this video I explained about overall Introduction of Single Page Website and I also explained that how to create CRUD Website from Scratch  through Express js and Axios which is a single page Application means whatever action we performed in this website, the website won't refresh. And with the help of Express js we create Api and with the help of Axios we can send request to this api. And Our website is working smoothly and fast.  I hope you like this 😊 .


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


In this Channel i also uploaded Html, Css and JavaScript, Python, Django, Backend Projects , github, Pythonanywhere.com hosting and related this all are Videos and also related to website Projects videos. 😊 😊

Thank You.
You can follow us on:
[Instagram for full stack web Development](https://www.instagram.com/full_stack_web_developer1/)
Merge two sorted Array
Published: 2022-10-11 15:42:43

You are given two integer arrays nums1 and nums2, sorted in non-decreasing order, and two integers m and n, representing the number of elements in nums1 and nums2 respectively.

Merge nums1 and nums2 into a single array sorted in non-decreasing order.

The final sorted array should not be returned by the function, but instead be stored inside the array nums1. To accommodate this, nums1 has a length of m + n, where the first m elements denote the elements that should be merged, and the last n elements are set to 0 and should be ignored. nums2 has a length of n.

Example 1:

Input: nums1 = [1,2,3,0,0,0], m = 3, nums2 = [2,5,6], n = 3
Output: [1,2,2,3,5,6]
Explanation: The arrays we are merging are [1,2,3] and [2,5,6].
The result of the merge is [1,2,2,3,5,6] with the underlined elements coming from nums1.

```js
/**
 * @param {number[]} nums1
 * @param {number} m
 * @param {number[]} nums2
 * @param {number} n
 * @return {void} Do not return anything, modify nums1 in-place instead.
 */
var merge = function (nums1, m, nums2, n) {
  if (m != 0) {
    nums1.splice(m, nums1.length - m);
  }

  if (n != 0) {
    nums2.splice(n, nums2.length - n);
  }

  m == 0 && nums1.length >= 1 ? (nums1.length = 0) : null;
  n == 0 && nums2.length >= 1 ? (nums2.length = 0) : null;

  nums2.forEach((num) => nums1.push(num));
  nums1.sort((a, b) => a - b);
};

```
Database version control systems, why do we need them?
Published: 2022-10-11 15:41:19

Hello everyone, I'm a full stack web developer and i'm used to working with Git as my main version control system for my projects, It's very useful and you can always go back at a point of time when you mess something up, Yesterday i was searching on google and found an article about database version control systems! I never knew that databases can use version control tools too, I mean i know that every database must have a backup which holds the previous that that's been backed up -1 days or something else, but a version control system for databases that's new! I don't even see a use for it and it has a lot of down sides, I mean reverting back to a point of time in a database it means loosing all your knew data! It's really playing with my head, anybody with a practical experience on this can explain how this is working and what are the usecases for it! thanks.
How to use emotion css prop in vite.
Tags: emotion, vite, react
Published: 2022-10-11 15:41:12

The primary way to style elements with emotion is the css prop.
```javascript
const Component = () => {
  return (
    <div
      css={{
        backgroundColor: "hotpink",
        "&:hover": {
          color: "lightgreen",
        },
      }}
    >
      This has a hotpink background.
    </div>
  );
};

```
## 1. Install Dependencies
For using css prop in vite project first install [@emotion/babel-plugin](https://www.npmjs.com/package/@emotion/babel-plugin):
```
yarn add -D @emotion/babel-plugin
```
## 2. Update vite.config.js
Here, we add the `@emotion/babel-plugin` to [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react) babel option. Also for using css prop we have to tell vite to use Emotion's `jsx` function by setting `jsxImportSource` to `@emotion/react`.
```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
  ],
});

```
Now you can use css prop in your react app.

## TypeScript
If you are using TypeScript in your project first add `"jsxImportSource": "@emotion/react"` to your `tsconfig.json` file.
```json
{
  "compilerOptions": {
    // ...
    "jsxImportSource": "@emotion/react"
  }
}
```

Then for using typed css prop update your `vite-env.d.ts`.
```
/// <reference types="vite/client" />
/// <reference types="@emotion/react/types/css-prop" />
```
【Unity】Can you explain whether Awake or Start is called when a Gameobject is activated?
Tags: unity3d
Published: 2022-10-11 15:40:44

Four years have passed since I started to use Unity, but I have misunderstood about the title.

Basically, Awake and Start are UnityEvent Function called when a Gameobject is activated.

But, how about are the below situations?

## A Gameobject is active, a component is disable.
In this case, only Awake is called.

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

## A Gameobject is inactive, a component is enable.
In this case, nothing is called.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bj91aid40bbr74havy7.png)

## Switch a Gameobject in the order of active, inactive, and active.

In this case, Awake and Start are called only once.

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

If you want to call something when a Gameobject's active changes, you can use OnEnable which is UnityEvent Function.

## Other Resources
[Order of execution for event functions](https://docs.unity3d.com/Manual/ExecutionOrder.html)
How to find good projects for Hacktober Fest 2022 (for beginners)
Tags: github, opensource, beginners, hacktoberfest
Published: 2022-10-11 15:36:29

## 📍 Want to contribute to open source ?

The finest program for newcomers to open source contributions is Hacktober Fest 2022. All you need is a foundational understanding of the many branches of computer science. The @digitalocean staff's attempt to support and encourage others to start learning about open source and become proficient with Git-Hub is a fantastic one. 

### 📍 You might be asking yourself, "How can I contribute to projects if I'm so new to coding?"

Absolutely, you may participate to the copy editing, technical documentation, translating, testing, graphic design, user experience, etc. at Hacktober Fest.

## 📍 Where and how can I find beginner-friendly projects?

Visit the Discord channel for Hacktober Fest at https://discord.com/invite/hacktoberfest.

⭐️ Try looking for worthwhile projects that complement your tech stack, or try adding to or changing the CONTRIBUTING.md or Readme files.


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

- Here is an illustration of how to browse:

1. Join their channel on Discord.
2. visit the channel for project sharing.
3. People continue to share projects, most of which are accessible to beginners.
4. Start contributing; the github repository link is present in each project.

**The following blog will discuss how to create your first pull request.👋**