teleren/devto huggingface dataset:
Intersection and Union of Array in JavaScript
Tags: javascript, interview
Published: 2021-09-20 07:01:51

![Array and Union](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5mofe6z2y9fftcusbkr.png)

# What is union of Arrays?
Union of arrays would represent a new array combining all elements of the input arrays, without repetition of elements.

```javascript
let arrOne = [10,15,22,80];
let arrTwo = [5,10,11,22,70,90];

// Union of Arrays
let arrUnion = [...new Set([...arrOne, ...arrTwo])];
console.log(arrUnion);
```


# What is intersection of Arrays?
The intersection of two arrays is a list of distinct numbers which are present in both the arrays. The numbers in the intersection can be in any order.

```javascript
let arrOne = [10,15,22,80];
let arrTwo = [5,10,11,22,70,90];

// Intersection of Arrays
let arrIntersection = arrOne.filter((v) =>{
	return arrTwo.includes(v);
});
console.log(arrIntersection);
```

## Demo -
{% jsfiddle https://jsfiddle.net/developerrky/bqpd6ave/18/ js,html,result %}
1-Hour Video Interview with Kyle Simpson - Help The Kickstarter! [You Don't Know JS Yet] 
Tags: javascript, codenewbie, webdev, books
Published: 2021-09-20 15:34:32

[Join Kyle Simpson's _You Don't Know JS Yet_ Kickstarter Campaign](https://bit.ly/3CkZO51) to help this great mentor succeed in his dream to bring a wealth of knowledge to all of us on our journey to become JS Masters. 

{% youtube _RR1ETGu8aE %}

There are 2 types of mentors that come to mind when I reflect on those who helped to mold and shape me into the excellent developer that I am today. I gained physical mentors that were in person with me and able to guide me on a daily basis. 

I rarely discuss the other type of mentor that greatly influenced my life, the mentor who was in the shadows, thousands of miles away, and still made a profound impact on my career. Kyle Simpson was one of those “mentors from afar” as I call it.

On my quest to sharpen my skills, way back in 2013, I happened to attend an Angular conference where Kyle Simpson was one of the headliners.

That 3-day training was so impactful that his book series became the air I breathed while I sharpened my skills over the following 8 years.

To this day I can recite helpful content from memory for all of my students.

One of the great things about Kyle is that he always operates in the mindset of keeping students and learners first. He wants to continue publishing his essential JS content so all of us will be able to crush their career goals.  

In addition to [pledging your support on Kickstarter](https://bit.ly/3CkZO51), you can also show your support and **get a serious discount** on the first 2 books in the _You Don't Know JS Yet_ series and his essential yet practical _Functional-Light JavaScript_ book via the following links: 

[You Don't Know JS Yet: Get Started](https://leanpub.com/ydkjsy-get-started/c/coding-career-fastlane)

[You Don't Know JS Yet: Scope & Closures](https://leanpub.com/ydkjsy-scope-closures/c/coding-career-fastlane)

[Functional-Light JavaScript](https://leanpub.com/fljs/c/coding-career-fastlane)
Typescript dev wanted!
Tags: hiring, react, typescript, javascript
Published: 2021-09-20 18:07:00

## About Us
**TL;DR: We are here to give ecommerce the data, the insights and the tools they need for running their business efficiently and sustainably** ✨

The modern world is driven by data, yet not everyone is able to leverage that new knowledge.

We've seen a company where the marketing team was hitting the targets and celebrating, while the warehouse was full of unsold goods. Unsurprisingly, the company bankrupted, people were laid off and the founders learned a hard lesson about running a sustainable business.

What happened was that the company operated in silos. Each team had their own piece of data, but they never put together the full picture. They trusted the algorithms of Facebook and Google to promote the best products, but had very little visibility or control of what's really happening.

Well, ROI Hunter is here to fix that 💪

We build a platform that services the full circle: 

- We plug in all the data sources and build smart product segments with actionable insights
- The company uses the insights to tweak the campaigns, the visuals, or the products they  offer
- Each such change produces new data and automatically refines the segments and insights

As a result, not only the company is doing better, but also its customers are no longer spammed with irrelevant ads 🙌


## About The Opportunity
Join us if:

💪 You want to build a great product
🚀 You want to have impact
🕵️ You are a thoughtful problem solver
🕊️ You are not ideological about technology
🤗 You care
🤝 You are a team player
📈 You want to work at a startup
🎓 You own your growth
🌍 You are based in Europe (Brno, CZ is ideal)

## Skill & Qualifications

We work mainly with Javascript, Typescript and React. 

## How To Apply

Read more on our CTO´s blog here https://bit.ly/3nDWaiE and find the link to application there in the open positions.


_Please feel free to leave questions in the comments section._
Side Project Hustle
Tags: webdev, javascript, beginners, podcast
Published: 2021-09-21 01:03:06


Original: https://codingcat.dev/podcast/1-32-side-project-hustle

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

## Questions

1. How did you get your start in Web Development?
2. Did building side projects help you get your job at Adobe?
3. What did you learn most from building side projects?
  1. Which side project did you learn the most from?
4. Can you talk a little about your Muphy app and how you built it?
5. You also maintain a npm-package called hue-sdk, what does that involve?
6. So, with all these side projects and a full time job, why did you want to start the Web Dev Weekly Podcast?
7. How has social media helped you along the way?
8. Aside: using GitHub Actions. How do you use GitHub actions to improve your workflow?
Kubernetes (CKAD) - Pod Design - Understand how to use Labels, Selectors, and Annotations
Tags: kubernetes, ckad
Published: 2021-09-21 06:38:54

## Topic: Pod Design

### Labels

Labels are `key:pair` values that can help you organize your resources. Any object in Kubernetes can have a label described.

You can also use labels to select a set of resources. For that you'll use a selector, which we'll see later on.

Example of a label:

```yml
apiVersion: v1
kind: Pod
metadata:
  name: onboarding-frontend
  namespace: my-application
  labels:
    service: onboarding
    tier: frontend
```
#### Listing labels

```bash
$ kubectl get pods --show-labels
```

#### Listing labels as columns

You can list labels as columns by using the -L (--label-columns) option of kubectl.

```bash
$ kubectl get pods -L service,tier
```

### Selectors

You can use selectors to filter a set of resources. For filtering based on labels, we can use the `-l` selector.

#### Select only the pods related to the `onboarding` service.

```bash
$ kubectl get pods -L service,tier -l 'service=onboarding'
```

#### Select only the pods *NOT* related to the `onboarding` service.

```bash
$ kubectl get pods -L service,tier -l 'service!=onboarding'
```
#### Select only the pods related to the `onboarding` service in the frontend tier

```bash
$ kubectl get pods -L service,tier -l 'service=onboarding,tier=frontend'
```

#### Select all pods that are related to `backend` and `frontend` tiers.

```bash
$ kubectl get pods -L service,tier -l 'tier in (backend,frontend)'
```

### Annotations

Annotations allows you to store additional data for the object you're creating. Also a `key:pair` value but with more capacity to store longer strings, including JSON.

An annotation looks like:

```yml
apiVersion: v1
kind: Pod
metadata:
  name: onboarding-frontend
  namespace: my-application
  labels:
    service: onboarding
    tier: frontend
  annotations:
    Description: The frontend component of the onboarding service for my-application.
```

#### List the annotations of a pod

```bash
$ kubectl describe pod onboarding-frontend | grep Annotations
```

Annotations can be edited/removed/added.

#### Remove an annotation

```bash
$ kubectl annotate pod onboarding-frontend Description-
```
The `-` after the annotation indicates that we want to removed it.

#### Add an annotation

```bash
$ kubectl annotate pod onboarding-frontend Description-
```
The `-` after the annotation indicates that we want to remove it.


Official docs for further reference: [Object Annotations](https://kubernetes.io/docs/concepts/overview/working-with-objects/annotations/)
How to use Components with generics types better
Tags: typescript, react, javascript
Published: 2021-09-21 22:54:41

This is going to be a short post, but I really wanted to share a better way to use Typescript Generics better.

But first, how do you use Generics in Components right now? Maybe you don't, maybe you do, but you loose in the middle valuable type information. Maybe you are like me, and you are too waiting for [TypeScript#22063](https://github.com/microsoft/TypeScript/issues/22063) to be merge. 

{% github https://github.com/microsoft/TypeScript/issues/22063 %}

What if I tell you there is a better way to type generic components without loosing either the generic nor the component information?

## Snipped

```ts
export type Component = (<Data>(props: ComponentProps<Data>) => ReturnType<FC>) & VFC<ComponentProps<{}>>;
```

This piece of code, is an overload. Just a plain old overload can do the job of having both, the generic, and the component properties. 

I really didn't think about this until I saw the last comment of the issue I mentioned earlier, and the answer to that comment.

You can use an `interface` if you like it

```ts
export interface Component extends VFC<ComponentProps<{}>> { <Data>(props: ComponentProps<Data>): ReturnType<FC> };
```

When consuming, you need to declare a component that fulfil both overloads, like so:

```ts
export const Component: Component = ({ data, keys }: ComponentProps<Record<any, any>>) => {
  ...
}
``` 

## Playground example

[TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDecBqAYgMLYCuAzkgMowoxLYlwC+cAZlBCHAORSoMvANwAocaOAA7BlHbokcYt0hSkMgApcwFADwAReijhIAHgykATCrhYA+XKLjO4lowC44hugG0AumIucADWSACeFJ4AFKFhEOxeRgCU-mIs4maQsHAwYWCKyuAQajJwALxwUQZGdlFg2pFKKsXqMFoQOtV0dknlDsgwZFBSACp5SLokPXAAZAQkuoWqre2dOPZ2YqKZ0PBoxRTwSy0ynscl8BVReG502LE2LGfNF6t6yPtQlrooUmHYvzCdmmZQcOCcLgEg2GcF0dhwtxQADoQCgwFFjKDYQALABMdhQugA9HieixiXZROlJDIkHIFHANHSKMVHEF2MAoIcAHIoEBITyHKDSADmgRcABsUDy+QK4ELReLnCgRXKpGQQAAjOlpDKmLJ7A7wDQquVEYjlSq9LHgoL7KSHOA+fJc4rYKhtZnFPyWyg0OgMXRM11Sfy1fxJLZBKFDKSw86tVxGMo4F0sqRsB4pny8DlcmC8-m8PxsImUlhAA)

## That's all folks! 

Did you know about this? Don't lie to me, I've been working with TS for 5 years and I never though about this, and let me tell you, this is not something just to show at a Playground, I have now a working Table component using this generic declaration, checking all the properties inside the data and the description around the table.

Let me know in the comments what other techniques do you use to deal with generics in React. 

Image by <a href="https://pixabay.com/users/nickype-10327513/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=6626780" class="keychainify-checked">NickyPe</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=6626780" class="keychainify-checked">Pixabay</a>
Android Wallet Cards Manager - Creating a sliding card wallet layout for Android
Tags: android, programming, ux, design
Published: 2021-09-21 08:01:31

Hi everyone, my new article on Medium is out!

{% medium https://medium.com/overapp-android/walletcardsmanager-687b079f94ff %}

{% youtube 7YJ2TgG96dY %}

You find the full code on Github {% github eliaspiga/WalletCardsManager no-readme %}

<br/>
######*Photo by [David Clode](https://unsplash.com/@davidclode?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/dragonfly?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes, watercooler
Published: 2021-09-21 12:00:03

---
title: "A Nice Developer Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes, #watercooler
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12596739999.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why couldn't the React component understand the joke?

___A:___ Because it didn't get the context.
 -->
Algorithm Diary
Tags: algorithms, javascript
Published: 2021-09-21 15:04:52

此處參照 [LeetCode with JavaScript](https://skyyen999.gitbooks.io/-leetcode-with-javascript/content/) 作為練習，慢慢累積演算法實力～

並採用[通過率排序](https://skyyen999.gitbooks.io/-leetcode-with-javascript/content/sortbyacceptance.html)(提交後的成功率)決定難易度，作為做題的順序

&nbsp;

## Diary
Sep. 21 - [LeetCode 344. Reverse String](https://dev.to/ben66yueh/leetcode-344-reverse-string-249o)

&nbsp;

## String (1)
LeetCode 344. Reverse String
How to use classes in Laravel
Tags: beginners, laravel, codenewbie, womenintech
Published: 2021-09-21 16:38:05

Hello friends!
In this blog post I am going to illustrate how and why we use classes in laravel.
 
__Why we use it?__
When the method is commonly used in one or more controller instead of writing the same code again and again we can create a class and reuse the code where we need it.
It helps us to remove the pain of writing the same code by easing common task.

__How to use it?__
* Create a class file in App folder or we can create a file in App\Providers folder (the App\Providers folder is provided by laravel to create external file).

* Now open the file and add namespace which is necessary.
```php
namespace App\Providers
```
if you do not see the Provider folder you can create one.

__Let see an example__

Create a PackageClass in App\Providers\PricePackage, open a file and add namespace in it.

```php
namespace App\Providers\PricePackage
```
now add below code in it
```php
class PackageClass {
   public function getPackage() {
       return [
          'bronze' => 5000,
          'silver' => 10,000,
          'gold' => 20,000,
       ];
    }
}
```
Now whenever we need the pricing we can call this class and use its methods, for that we need to instantiate the class object. 
Open a controller file where you need to use it.
I am using it in `PriceController` and add the below code.
```php
 public function index() {
   $objPricePackage = new PackageClass();
   $packages = $objPricePackage->getPackage();
   return view('packages.index', ['packages', $packages]);
 }
```
In this way we can use external classes in laravel.

Thank you for reading :lion: :unicorn:
Write a Python program to insert a new item before the second element in an existing array.
Tags: python
Published: 2021-09-21 18:16:22

```python
from array import *
array_num = array('i', [1, 3, 5, 7, 9])
print("Original array: "+str(array_num))
print("Insert new value 4 before 3:")
array_num.insert(1, 4)
print("New array: "+str(array_num))
```
How does the values in react template part are in sync with local storage?
Tags: react
Published: 2021-09-22 08:26:41

Hi Team,

I'm trying to use `localStorage` for state management. In the below code if I remove the `setState` call in the `handleChange` function, the template isn't in sync with the localstorage. However if I use the `setState` then the values in localStorage in reflecting the template. Any idea on how the presence of setState is allowing the synchronization.

Here is the code sandbox link: https://codesandbox.io/s/loving-taussig-p7phs?file=/src/App.js

```
import React, { useState, useEffect } from "react";

export default function App(props) {
  const [state, setState] = useState({ name: "", city: "" });

  const handleChange = (evt) => {
    setState(function (state) {
      return { ...state, [evt.target.name]: evt.target.value };
    });
    localStorage.setItem([evt.target.name], evt.target.value);
  };

  return (
    <div>
      <h2> Home</h2>
      <input
        placeholder="Name"
        name="name"
        value={localStorage.getItem("name")}
        onChange={handleChange}
      />
      <input
        name="city"
        placeholder="City"
        value={localStorage.getItem("city")}
        onChange={handleChange}
      />

      <h3> {localStorage.getItem("name")} </h3>
      <h3> {localStorage.getItem("city")} </h3>
    </div>
  );
}

```
Can you end code freezes?
Tags: tbd, codefreeze, trunkbaseddevelopmen
Published: 2021-09-26 08:47:33

---
title: Can you end code freezes?
published: true
date: 2021-09-22 00:00:00 UTC
tags: tbd,codefreeze,trunkbaseddevelopmen
canonical_url: https://jhall.io/archive/2021/09/22/can-you-end-code-freezes/
---

_ **A quick reminder:** Tomorrow at 17:00 CET (Europe) / 8:00 AM PT (USA), I’ll be doing a free, live video Q&A session answering your DevOps career questions. Space is limited! [Register up now](https://www.crowdcast.io/e/tiny-devops-qa-focus-on/register)!_

* * *
At the first company where I worked as a programmer, every few months we'd declare a "code freeze." During this time, we were preparing for a release, so no new changes were allowed into the code, except bug fixes found during testing of the release.

It took me a while to realize that for the kinds of software most companies produce, this is actually an anti-pattern. What’s the alternative? [Trunk-based development](https://trunkbaseddevelopment.com/). I’ve [talked about it before](https://jhall.io/archive/2021/03/10/a-case-for-trunk-based-development/), but a passage in [_Accelerate_](https://amzn.to/3klbvCq) drew my attention to this again:

> [High-performing teams] had fewer than three active branches at any time, their branches had very short lifetimes (less than a day) before being merged into trunk and never had “code freeze” or stabilization periods.

Does your team face code freezes? If so, what’s preventing you from using trunk-based development and [continuous integration](https://whatisci.com/) to thaw your code once and for all?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
HackOnLisk2
Tags: programming, javascript, challenge
Published: 2021-09-22 12:32:28

Build your own blockchain application with the Lisk SDK in JavaScript. Blockchain applications should be submitted to either the DeFi or GameFi category. 60,000 CHF in prizes.

Here's everything you need to know: https://hackonlisk2.devpost.com/ 👈

Join our community at Lisk.chat 💙
[DopeTales] GDB Hit Counter Script for nth time break on function
Tags: gdb
Published: 2021-09-22 17:47:45

---
title: [DopeTales] GDB Hit Counter Script for nth time break on function
published: true
description: Productive GDB Scripts
tags: gdb
//cover_image: https://direct_url_to_image.jpg
---
Some useful hack around gdb. While debugging we often want to wait until certain function hits nth time. Following script does that, in easy python way.

###### Code Explanation
We have HitMe class which inherits from gdb.BreakPoint which is classes defined in gdb python extension. It provides two methods __init__ will define breakpoint on function and handler on hitting breakpoint. Return value of Stop function tells gdb halt or not.
hitCount is just counter to keep track of number of function hits.
In code BREAK_FUNCTION hits 40 times before breakpoint halts gdb.


```python
# script.py
import traceback
import gdb
import subprocess
import re
import math
import json

hitCount  = 0
class HitMe(gdb.Breakpoint):
    def __init__(self):
        gdb.Breakpoint.__init__(self, "BREAK_FUNCTION")
      
    def stop(self):
        global hitCount
        hitCount = hitCount + 1
        print(hitCount)
        if hitCount > 40:
          return True;
        return False

print("Ran Counter For Function!")
hit = HitMe()
```

Running This script
```
gdb -xargs binary.o arg1
...
gdb> source script.py 
gdb> run
```

This will be quickest way to get there! Happy Hacking!!!
Prometheus and Grafana
Tags: monitoring, linux
Published: 2021-10-04 19:27:28

Monitoring services is a big part of Cloud Infrastructure Management.  Here we will go through one way to install Prometheus on Ubuntu and make pretty dashboards with Grafana on a separate machine.

Go grab this download and extract to start:
```
wget https://github.com/prometheus/prometheus/releases/download/v2.30.3/prometheus-2.30.3.linux-amd64.tar.gz

tar -xvzf prometheus-2.11.1.linux-amd64.tar.gz

cd prometheus/

./prometheus
```
Should be great success:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyg0gcyw80np2wbafu7s.png)

Open a web browser and head over to the http://{IP}:9090/graph
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf1gxpq8sist9us0p3nc.png)
So far, So Good
You can see the raw metrics by going to http://{IP}:9090/metrics
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73x83itpkwcdvivjjlit.png)
You can check what is up by going to /targets
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4ivc0cf1yi79cricj4e.png)
 
 Let's run it as a service, create this file:
```
/etc/systemd/system/prometheus.service
```
And give it this basic text settings:
```
[Unit]
Description=Prometheus Server
Documentation=https://prometheus.io/docs/introduction/overview/
After=network-online.target

[Service]
User=root
Restart=on-failure

#Change this line if you download the 
#Prometheus on different path user

ExecStart=~/prometheus/prometheus --storage.tsdb.path=/var/lib/prometheus/data/ --web.external-url=http://myurl.com:9090

[Install]
WantedBy=multi-user.target
```
Make sure to reload it and start it up:

```
sudo systemctl daemon-reload
sudo systemctl start prometheus
```
There are Exporters you can add to Prometheus to increase the utility.  Node Exporter is one.

```
wget https://github.com/prometheus/node_exporter/releases/download/v0.18.1/node_exporter-0.18.1.linux-amd64.tar.gz
tar -xvzf node_exporter-0.18.1.linux-amd64.tar.gz
mv node_exporter-0.18.1.linux-amd64 node_exporter
cd node_exporter
./node_exporter
```

You can open the service in a browser at http://{IP}:9100
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a77wggxmbhruu11dyk49.png)

You can add the node exporter to Prometheus in /etc/prometheus/prometheus.yml
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmxttpbe4r5h7moyqozj.png)

Let's make it into a service.  Create a file:
```
sudo vi /etc/systemd/system/node_exporter.service
```
```
[Unit]
Description=Node Exporter
After=network.target
[Service]
User={user}
Group={user}
Type=simple
ExecStart=/usr/local/bin/node_exporter
[Install]
WantedBy=multi-user.target
```

Let's go ahead and get this going:
```
sudo systemctl daemon-reload
sudo systemctl start node_exporter
sudo systemctl status node_exporter
```
You can see the two services on /targets
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgfg7ope658khvwn6ukz.png)
 
If all is running well, enable this service to start at boot.
```
sudo systemctl enable node_exporter
```
That's enough for today.  I will continue this in a second part for Grafana.