teleren/devto huggingface dataset:
Self-Taught Developer Journal, Day 42: TOP DOM Manipulations and Events Practice cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-18 03:43:50

Today...

## Practice #2:
2. **Watch the [Event Capture, Propagation and Bubbling video](https://www.youtube.com/watch?v=F1anRyL37lE&ab_channel=WesBos) from Wes Bos’s JavaScript30 program. If you want to code along with the video, you can use the contents of folder #25 from the repo you cloned above.**

I found this video to be very interesting because Event Propagation is definitely something I've never encountered before or wouldn't have know about firsthand. 

As much as I liked Wes's explanation of Event Bubbling in the video, I was still unsure of what was happening. I went ahead and Googled for more information about it. I think the GeeksOnGeeks definition captures it really well:

*"Event bubbling is a method of event propagation in the HTML DOM API when an event is in an element inside another element, and both elements have registered a handle to that event. It is a process that starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy. In event bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements".*

Event Bubbling triggers a selection of all associated elements, a rippling effect. **However, not all events bubble**.

An image from [javascript.info](https://javascript.info/bubbling-and-capturing) was a good visual example of the effect.

![Event Bubbling example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f47jnuol70p9kz0koz4x.png)

Event Bubbling can be stopped using the **stopPropagation()** on the event.

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

BUT DON'T STOP BUBBLING UNLESS NEEDED!

Next, the video went over Event Capturing which is another phase of Event Propagation (*"Event propagation is a way to describe the “stack” of events that are fired in a web browser.**)

Unlike Event Bubbling, Event Capturing starts from the top-down to the element. Event Propagation has three phases:

1. Capture Phase
2. Target Phase
3. Bubbling Phase

![Event Propagation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5wjw7v9g845x04aa074.png)

The capture phase is rarely used and is implemented by setting the handler "capture" option to true.

![Capture Option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc44jtbznve6zyxrrq7v.png)
 
## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
https://javascript.info/bubbling-and-capturing
https://www.geeksforgeeks.org/event-bubbling-in-javascript/
https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/
Easiest way to handle multiple styles in Reactjs
Tags: javascript, react, typescript
Published: 2022-01-18 03:33:34

## Reactjs 
Reactjs is a frontend UI library for developing sophisticated web/native applications using Typescript/Javascript. The library is backed by Facebook and opensource community. For me it is like having a swiss knife in my tool kit.

## Multiple Styles
For beginners handling styles in React components could difficult. When it came to styles with hyphen (back-style) we have to rely on array syntax.

 
`<div className={styles['back-style']}>`

So what about multiple styles ? We can use the array syntax or use the classNames package (multiple use of className property is not allowed in Reactjs as Vue 3 )

Let’s use the package

`yarn add classnames`

In the template / HTML use the classNames function to include multiple style classes.
 
`import classNames from 'classNames'
<div className={classNames('font-style','back-style','container')}`

That’s all you need to know.

[Read more guides on reactjs](https://devmnj.wordpress.com/tag/reactjs/)
Day-to-day GIT Guide
Tags: git, javascript, tutorial
Published: 2022-01-18 03:15:53

**Situation 1:**

You forgot to add some infomation on the last commit and don't want to create another new commit.

**Solution:**

`git add .`
`git commit --amend --no-edit`

This will add and commit your changes to the last commit, without asking you to create a new one.
How to fix the HDHomeRun app getting stuck on the Recorded screen or being unable to find any tuners
Tags: hdhomerun, silicondust, tv, networking
Published: 2022-01-18 02:43:41

If you find the above is happening, do this:

1. If not already installed, install the [HDHomeRun Software](https://www.silicondust.com/support/downloads/) for your desktop OS. Please note that this is not the same as the *app*
2. Run the `HDHomeRun Setup` app on your desktop. If a firmware update is available, it will execute and reboot the network tuner automatically. Once this happens, check your client apps again; they should be working now. If no firmware update occurs, then continue
3. Download the latest beta HDHomeRun Software from [here](https://forum.silicondust.com/forum/viewforum.php?f=126)
4. Repeat Step 2. All your client apps should work now
자바스크립트 중괄호의 노래
Tags: javascript, tutorial, korean
Published: 2022-01-18 02:36:33

나 노래 못한다.

## 원시 객체

```js
const json = {
  a: 'a',
  b: 'b'
}
```

다들 JSON으로 알고 있고, 많이 쓰잖아. Java나 여타 언어의 `Map` 역할을 보통 하지만 이제 자스에서도 `Map` 이 생겼다.

## 분해 구조 할당

```js
const { a, b } = {
  a: 'a',
  b: 'b'
}
```

요츰 이게 있어서 요소 딱 잡아서 변수나 상수(?) 잡는거 편하지? 배열도 분해 구조 할당도 되고 말이야.

## 스코프

자, 이 글의 주인공이다.

### 함수

함수는 2가지 문법이 생겼어.
하나는 일반적인 함수 문법으로, 컨텍스트 독립이 보장되지.

```js
function func() {
  console.log('function call!')
}
```

그리고 또 하나는 화살표 함수라 하여 람다 문법이라고도 하고, 이녀석은 컨텍스트를 유지할 수가 있어.

```js
const func = () => {
  console.log('function call!')
}
```

### 반복문

```js
for ( ... ) {
  ...
}
while ( ... ) {
  ...
}
do {
  ...
} while ( ... )
```

### 조건문

```js
if ( ... ) {
  ...
}
else if ( ... ) {
  ...
}
else {
  ...
}
```

### 레이블

```js
label: {
  for ( i ...) {
    for ( j ... ) {
      if ( ... )
        break label;
      ...
    }
  }
}

label2: {
  if ( ... ) {
    break label2;
  }
  ...
}
```

주로 이렇게들 쓸 거야. 난 `label2` 같은 구문도 좀 쓴다. 좀... 쓰지.

### 플레인

내가 좀 변태일 수도 있어. 아예 중괄호로만으로도 식을 쓸 수도 있지.

```js
let a = 'a'
{
  let a = 'b'
  // ...
}
console.log(a)
```

마치 맛대가리 없는 플레인 요구르트 먹듯이 말이야.
일종의 프로시저라 보면 되는 거지.

비동기 안 될 것 같다고? 아니

```js
(async (log) => {
  log('wait a second...')
  let a = await new Promise(r => setTimeout(() => r('1 second'), 1000))
  {
    let a = await new Promise(r => setTimeout(() => r('2 seconds'), 2000))
    log('2 seconds', a)
  }
  log('1 second', a)
})(console.log)
```

자네도 중괄호 세계에 빠져보지 않겠나?
초창기 자바에서 가져온 거 아니랄까봐 스코프 문법은 지 양아비 쏙 닮았지?
그래도 **정의를 정확하게 아는 것이 중요하지.**

끗.
👋🏽 Hello there!
Tags: introduction
Published: 2022-01-18 01:59:57

🕯 You and I live in a world of over 7.8 billion people... that’s a lot of persons who share, in the same instance of time, our reality. This impactful statement opens a lot of existential questions. But, the one that inspired me to open this blog was: ***Will someone remember or find useful the memories I am creating, and how?*** Hello, everyone! 👋🏽 My name’s Paco. I’ve been an active user of this platform since the start of the pandemic (hey something good happened thanks to it 😅) and I wanted to begin this journey with those words to not only inspire myself, but you. 

Nowadays, thanks to technology, any common person as you and me has the power to have a voice and be listened by the entire globe. Yet, few are those who want or have enough courage to be heard in the hazardous infinity of the web. And it is understandable, opening ourselves by sharing our intimate longings to collective critiques is not a desirable affliction. 

Nonetheless, and as I mentioned before, there’s people who continuously portray their visions despite the frustrations that can be found along the way. Why? Because it is through the manifestation of ourselves within a community, regardless of the competition, what creates and inspires change to happen.  

As this text comes to its end, I want to thank all those helpful and encouraging profiles within this marvelous community that have not only assisted me develop my different scholar assignments, but inspired me to share with others my passion towards technology. Furthermore, and with the purpose to mark a conclusion, in the following entries, I’ll do my best to aid you with my continuously expanding set of abilities, in addition to invite you to awake your creativity. 

_Fear yourself, because none other than you will stop or limit the potential of the talent you have to improve the world._
A Good Dev Makes Post Right?
Tags: beginners, javascript, programming
Published: 2022-01-18 01:51:50

Never done a devlog before but its time to start now. I've been coding for about 4 months now and learning for about 5. 

I'm a fairly new and only focusing on creating my first project in Javascript with Frontend and Node. 

Everyday is a step forward as long as I am learning and that's enough for me.
Port Forwarding On Carrier-Grade Networks?
Tags: beginners, networking, p2p
Published: 2022-01-18 00:57:37

I've been learning about [UPnP/IGDP](https://en.m.wikipedia.org/wiki/Internet_Gateway_Device_Protocol), [PCP](https://en.m.wikipedia.org/wiki/Port_Control_Protocol), [ICE](https://en.m.wikipedia.org/wiki/Interactive_Connectivity_Establishment), [port prediction](https://en.m.wikipedia.org/wiki/TCP_hole_punching#Methods_of_Port_Prediction_(with_predictable_NATs)
) and [others](https://en.m.wikipedia.org/wiki/NAT_traversal#Techniques) to accomplish punch through for a peer-to-peer app I'm building. Do any of these tend to work on ISPs and mobile phone networks? What's the usual way(s) peer-to-peer communication is established on a carrier-grade network? 

PCP seems great, but [this old memo](https://datatracker.ietf.org/doc/html/draft-chen-pcp-mobile-deployment-02) makes me wonder if it has been widely adopted.

ICE seems to be widely used, but [RFC3424](https://datatracker.ietf.org/doc/html/rfc3424) suggests that UNilateral Self-Address Fixing, like ICE, are just "workarounds," and we should prefer architectural solutions like IGDP or PCP. 

What should I spend my effort on?
How to make a union type from another object type in TypeScript?
Tags: typescript
Published: 2022-01-18 00:00:00

---
  title: How to make a union type from another object type in TypeScript?
  published: true
  tags: TypeScript
  date: Tue Jan 18 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-union-type-from-another-object-type-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-7c26a0baaf19c20b2cd64907b7125cfc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-union-type-from-another-object-type-typescript)
  
To make a `union type` from another object's type, we can use the `keyof` operator followed by the object's type name in Typescript.

### TL;DR

```ts
// Person type alias
type Person = {
  name: string;
  age: string;
  salary: string;
  userType: string;
};

// make union type from
// `Person` type alias
// using the `keyof` operator
type PersonKeys = keyof Person; // "name" | "age" | "salary" | "userType"

// make a variable and use the `PersonKeys` as its type
let john: PersonKeys = "age"; // ✅ Valid.
john = "hello"; // ❌ Invalid.
```

For example, let's say we have a type alias called `Person` with 4 properties called `name`, `age`, `salary`, and `userType` all having the type of `string` like this,

```ts
// Person type alias
type Person = {
  name: string;
  age: string;
  salary: string;
  userType: string;
};
```

Now to make a `union type` using the object's type `Person`, first let's make a `type alias` called `PersonKeys` and then use the `keyof` operator followed by the type alias name, in our case, it is the `Person`.

It can be done like this,

```ts
// Person type alias
type Person = {
  name: string;
  age: string;
  salary: string;
  userType: string;
};

// make union type from
// `Person` type alias
// using the `keyof` operator
type PersonKeys = keyof Person; // "name" | "age" | "salary" | "userType"
```

Now to prove that our `PersonKeys` union type is working let's use the `PersonKeys` as a type for a variable called `john` like this,

```ts
// Person type alias
type Person = {
  name: string;
  age: string;
  salary: string;
  userType: string;
};

// make union type from
// `Person` type alias
// using the `keyof` operator
type PersonKeys = keyof Person; // "name" | "age" | "salary" | "userType"

// make a variable and use the `PersonKeys` as its type
let john: PersonKeys = "age"; // ✅ Valid.
john = "hello"; // ❌ Invalid.
```

As you can see from the above code that assigning a value of `age` is valid because it is one of the union types from the `PersonKeys` union type and assigning the value of `hello` is invalid since it doesn't satisfy the `PersonKeys` union type.

Yay, we have successfully made a union type from another object's type. 🥳

See the above code live in [codesandbox](https://codesandbox.io/s/make-union-type-from-another-object-type-typescript-tj1qel?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
290. Word Pattern
Tags: java, algorithms, programming, 100daysofcode
Published: 2022-01-17 09:30:04

# Description

Given a `pattern` and a string `s`, find if `s` follows the same pattern.

Here **follow** means a full match, such that there is a bijection between a letter in `pattern` and a **non-empty** word in `s`.

## Example 1:

```
Input: pattern = "abba", s = "dog cat cat dog"
Output: true
```

## Example 2:

```
Input: pattern = "abba", s = "dog cat cat fish"
Output: false
```

## Example 3:

```
Input: pattern = "aaaa", s = "dog cat cat dog"
Output: false
```

## Constraints:

- `1 <= pattern.length <= 300`
- `pattern` contains only lower-case English letters.
- `1 <= s.length <= 3000`
- `s` contains only lowercase English letters and spaces `' '`.
- `s` **does not contain** any leading or trailing spaces.
- All the words in `s` are separated by a **single space**.

---

# Solutions

## Solution 1

### Intuition

1. compare lengths
2. build relations(map): c → w
    1. map(c) ≠ w
    2. w was already existed 

### Code

```java
public boolean wordPattern(String pattern, String s) {
    String[] words = s.split(" ");
    if (words.length != pattern.length()) {
        return false;
    }
    HashMap<Character, String> map = new HashMap<>();

    for (int i = 0; i < words.length; i++) {
        char c = pattern.charAt(i);
        String w = words[i];
        if (map.containsKey(c)) {
            if (!map.get(c).equals(w)) {
                return false;
            }
        } else {
            if (map.containsValue(w)) {
                return false;
            }
            map.put(c, w);
        }
    }

    return true;
}
```

### Complexity

- Time: O(n)
- Space: O(n)

---
A Compact Python Library for Creating Massive Augmented Datasets. 
Tags: datascience, machinelearning, deeplearning, python
Published: 2022-01-17 23:49:41

In most data science applications, collecting and labeling data is a costly and time-consuming process. 

Yet, machine learning models do not generalize the problem well without enough data. It leads us to the situation called overfitting. 

Data augmentation is a popular technique to overcome this situation. We can create copies of existing data points with slight variations. The algorithm sees them as new data. 

To create image augmentation, we can use any image processing tool. But, there are dedicated libraries to do this task more efficiently. 

The tool we discuss in this article is a feature-rich Python library for data augmentation. With it, we can build an augmentation pipeline to feed our ML model. 

It means we don't have to transform and save copies of images from training data. The pipeline handles it every time we use an image for training. 

[This Little Python Package Creates Huge Augmented Datasets](https://towardsdatascience.com/image-data-augmentation-pipeline-9841bc7bb56d?sk=0361229b5af0670d02b78d4a3e828aa7)

If you find this post interesting, please leave some claps on Medium as well because it __helps this article reach more people.__
Some more steps to become a Full-Stack Developer
Tags: webdev, beginners, career
Published: 2022-01-17 23:00:02

About two years ago, I decided to study again in order to get an official degree as a web developer.

Nowadays, I've almost finished a Higher Level Education Certificate on Web Application Development. I only need to finish an internship and a final project. But recently, after checking job offers and their requirements, I've decided to enroll in a bootcamp in order to improve my knowledge.

I'm very grateful for what I've learnt during that degree. I've studied online and I've taken in person exams, but I need to reinforce and expand some concepts and develop a personal portfolio. Another reason is that I've felt in tutorial hell in the last past months (yes, it exists), and I've decided to rely on in-person education to kickstart my new career as a developer.

In the last 15 years, I've been working as a helpdesk, supervisor and similar job titles and now it's time to enjoy learning a new profession as thrilling as web development. What I like the most, is that you never stop learning new skills and there are endless new levels of knowledge awaiting for you.

I'll be learning the following technologies in the next months:

- **Front**: HTML, CSS, Bootstrap, JS, REACT, REDUX

- **Back**: Node, Express, MongoDB, SQL, PHP, Laravel, Agile Software

I'm honoured to participate in this community and I'm sure that I'll learn a lot. I hope to share my learning process as best as I can.
100 días de código: 54, continuando con la creación de mi sitio web.
Tags: spanish, 100daysofcode, webdev
Published: 2022-01-17 22:47:35

¡Hey hey hey!

Hola a todos, hoy he decidido avanzar con mi pagina personal, realmente me entusiasma pero hoy no he podido avanzar mucho por temas familiares. 

La sección principal ha tomado algo de forma ya que le he agregado estilos y he practicado algo de typescript aunque no he conseguido resultados mas altos en mi velocidad que los de la semana pasada. He estado realizando los test y aprendiendo en [esta pagina](https://www.typingstudy.com/).

He estado pensando que podría retomar mi estudio de typescript y aprender algún framework de css pero aun no he decidido realmente y estoy enfocado en avanzar con mi pagina.

Espero que tengas mucho éxito con tus proyectos y animo con todo. ¡Tu puedes!

Adiós mundo.

Foto de [Andy Holmes](https://unsplash.com/@andyjh07?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/100-days?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
First DEV post! Pumped!!
Tags: beginners, html, css, programming
Published: 2022-01-17 22:40:57

I cannot believe I am typing this...

Here goes...

I was introduced to programming by a friend, November 2021. I had no prior knowledge about it so I was scared. Did i have the brain capacity to understand any of the languages? I didn't think so

Fast forward to today, I am currently waiting on a Programming scholarship worth $2,000 (hopefully i get it) and I am taking an HTML and CSS course on Scrimba and it has been such an exciting journey.

Here I am today, typing this and I am super excited to join this amazing community. I hope to learn from you one way or another.

Signing out,
the-pineapple
Quick and easy local web server
Tags: python, server
Published: 2024-06-01 14:27:03

---
title: Quick and easy local web server
published: true
date: 2022-01-17 22:26:11 UTC
tags: Python,Server
canonical_url: https://blog.snowfrog.dev/quick-and-easy-local-web-server/
---

 ![Quick and easy local web server](https://blog.snowfrog.dev/content/images/2022/01/carbon--1-.png)

I was working on the documentation for some of my open source libraries this week ([@snowfrog/option](https://snowfrogdev.github.io/snowfrogdev/option/) and [@snowfrog/result](https://snowfrogdev.github.io/snowfrogdev/result/), check them out) and found myself wanting to quickly serve the documentation websites locally.  
  
I'm using TypeDoc, which parses your TypeScript code and generates an entire API documentation website pretty much automatically. But seeing as it's an actual website and not just a simple static html file, you can't just open index.html in your browser and have the whole thing work. You need to actually serve the site with a web server.  
  
Now I know there are different options out there for doing that, some are even integrated with your favourite IDEs and code editors. But this week I have found a way to do this that is amazingly simple and works from the command line; so it works no matter what you're doing and which software you are using in the moment.  
  
All you need is to have Python 3 installed on your machine - you probably have it, if not here's a download link. Then, simply run the following command from the folder where your index.html is located:

<!--kg-card-begin: markdown-->
```
python -m http.server 4200

```
<!--kg-card-end: markdown-->

The `4200` here is the port number, you can make that whatever you want. For more information, here is a link the [documentation for this Python http server module](https://docs.python.org/3/library/http.server.html#module-http.server).
[week2] Days 1 - JS data structure
Published: 2022-01-17 21:59:09

#Back for 100 days of code 
After 1 week without the ability to post because I got electrical trouble in my house, I follow my ways through JS learning course on freeCodeCamp.

## Basic Data Structure 

Data structures, at a high level, are techniques for storing and organizing data that make it easier to modify, navigate, and access. Data structures determine how data is collected, the functions we can use to access it, and the relationships between data.

The most basic of all data structures, an array, stores data in memory for later use. Each array has a fixed number of cells decided on its creation

![array explaining image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7cq7g1u4sbz93c3rtgk.png)

## How to manipulate 
 
### Use an Array to Store a Collection of Data

You can use `let` to make an array which store data, 
example on a one dimensional array : 


```javascript
let simpleArray = ['one', 2, 'three', true, false, undefined, null];
```
array can store complex object with multidimensional array 

### Access an Array's Contents Using Bracket Notation

You can access your data in your array.
In an array, each array item has an index. This index doubles as the position of that item in the array, and how you reference it
int's important to not forget that JavaScript is a zero-indexed, meaning that the first element of an array is actually at the zeroth position this is how to retrieve data : 

```Javascript
let ourVariable = ourArray[0];
how to add a variable iin the array 
ourArray[1] = "not b anymore";
```


### Add Items to an Array with push() and unshift()

`Array.push()` to add an element to the end of an array 
`Array.unshift()` to add the element to the beginning 
you can pass a variable with these two methods, but not array 

## Remove Items from an Array with pop() and shift()

`pop()` removes an element from the end of an array,
`shift()` removes an element from the beginning.

You cannot parameter with this two method and u can change only array 

### Remove Items Using splice()
`splice()` allows us to remove any number of consecutive elements from anywhere in an array.

````JavaScript
let array = ['today', 'was', 'not', 'so', 'great'];

array.splice(2, 2); //['today', 'was', 'great']
```

### Add Items Using splice()
`splice()` can take up to three parameters, and you can use the third parameter, comprised of one or more element(s), to add to an array.

```JavaScript
const numbers = [10, 11, 12, 12, 15];
const startIndex = 3;
const amountToDelete = 1;

numbers.splice(startIndex, amountToDelete, 13, 14);
console.log(numbers);//[ 10, 11, 12, 13, 14, 15 ]
```

### Copy Array Items Using slice()

```JavaScript

let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];

let todaysWeather = weatherConditions.slice(1, 3);//['snow', 'sleet']
```