teleren/devto huggingface dataset:
You won't forget how to use variables in js after reading this!
Tags: javascript, beginners, tutorial
Published: 2022-03-11 17:24:10

Are you a newbie to javascript? Do you find it difficult to remember concepts of javascript? well, let me share how I remember concepts and differences between elements that look and sound similar 🤯.  

## Difference between Var, Let & Const.

I am going to use the link or story method which connected the differences using an awesome story. Let me know in the comments if you find it easier to understand that usual approach. Let the fun begins!

### Linking technical terms to story elements

Have a look at how I have mapped the javascript scopes according to different areas.

🌍 Think of global scope as a map of the world or any country.

🌆 Think of function scope as cities.

🏠 Think of block scope as a home.

see how one area is larger in comparison to others. It helps to memorize it. 
  

![Linking Scopes to the Story](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csdnao9fxbtmme981l9i.png)

---

Now let's move on to the main characters of this story. 

> 🥁 Introducing to you the variable siblings!

![Main Characters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shw0t9i32ij6up3ya5ub.gif)


---

## How to remember each scope 🤔

In JavaScript, users can declare a variable using 3 keywords that are var, let, and const.

`Once upon a time, there was a family which had 3 siblings named `var`, `let`, and `const`.  Although they had some similarities(used for declaring variables) they were different from each other(different scope)`


The scope of the var keyword is the global or function scope.
It means variables defined outside the function can be accessed globally, and variables defined inside a particular function can be accessed within the function.


`Var was a traveler, he had access to so many countries and cities(global and function cope) that he has almost covered the whole world.  He also had homes in many cities he would visit(if defined in function can be accessed in function).`


- Let and Const keywords are block-scoped. 
- Block is {} and code in between. 
- Variables defined with both can not be re-declared. 
- Variables defined with Let can be reassigned.
- Variables defined with Const can't be reassigned.

`Let was an introvert like her twin sister Const. They would stay at home and when Var comes home they would not let him be in charge of anything because it's their space(block scope). They were the queens of the house, they always thought of themselves as irreplaceable(can not be re-declared).`

`If Let doesn't like someone she would give them as many chances as they'd ask(Let can be reassigned), whereas const Const believes in only one chance(Const can't be reassigned).`

---

That's it this is how I used to remember all the things in javascript. You can also try the same and let me know if it helps you in any way. Waiting for your comments!  

Thanks for reading, I am not a good writer but I at least tried🙂, Should I do similar stories for other topics?
Material Design Date/Time picker Mark Options
Tags: codepen
Published: 2022-03-11 17:20:26

<p>An implementation of <a href="http://www.google.com/design/spec/components/pickers.html" target="_blank">http://www.google.com/design/spec/components/pickers.html</a> in AngularJS with material-design.</p>

<p>Work in progress.</p>

{% codepen https://codepen.io/harunpehlivan/pen/vYpBaKg %}
How to use Repositories in Laravel Framework, so as not to repeat code
Tags: laravel, programming, tutorial, php
Published: 2022-03-11 17:19:35

One of the big problems in software development is code repetition, which adds a lot of difficulties when it comes to project maintenance.

There is a concept in software development called **DRY** (The Don't Repeat Yourself), this concept proposes that you do not repeat your code, if you need to do the same action, in more than one place in your project, you must create an abstraction for that.

To apply the DRY concept in the Laravel framework, there are some architectures developed by the community, today we are just going to talk about Repositories.

Imagine the following scenario, you have a system where the user can register alone to have access to a logged-in area, but someone who is already registered in the system can also invite that same user through an invitation.

It's not hard to see that you'll need two codes to register a user, one outside the application and one inside.

Well, to solve this kind of situation, we will use a Repository called "UserRepository.php"

![UserRepository - Laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfbn2njmhbedds4lxo8a.png)

UserRepository.php is an abstraction that we can call wherever we like.

In our example, we will have two controllers, RegisterController.php (for external registers) and UsersControllers.php (for internal registers).

As you can see, I can call UserRepository.php from both controllers and I'm not repeating myself.

![RegisterController - Laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg1qu6qqnv8cmdhy41ds.png)

I can also make the same call from the UsersController.php controller

![UsersControler - Laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du7ur61t387zlkylktgo.png)

This way, you can make your software maintenance much simpler and more efficient.

Because when you need to fix a bug or implement a new feature, you know you only need to edit UserRepository.php

Repositories also serve to facilitate cache reprocessing, imagine that you redo the user cache using several different methods of your application, with repositories that you will always call from the same method.
Add Google Map in Angular Application
Tags: angular, googlemap, googlecloud, angularmap
Published: 2022-03-11 17:15:39

Google Map is a google service which helps us to locate shops, events, addresses, places, route path etc. Sometimes, In our angular application we wants to add google map. So, here we will see a angular module which helps us to add google map in angular application. The [Angular Google Maps (AGM)](https://angular-maps.com/guides/getting-started/) package details is given here.

## Create an Angular project
First if you haven’t installed Angular CLI yet, please run the following command first:

```ssh
npm install -g @angular/cli
```
**Now, Run the following commands to create a new Angular project with Angular CLI:**

```ssh
ng new google-map-project
cd google-map-project
```

## Install Angular Google Maps Module

```ssh
npm install @agm/core
```

## Import AGM Module
Open src/app/app.module.ts and import the AgmCoreModule. Here you need to provide a Google Maps API key. You can get an [API key here](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key).

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: ''
    })
  ],
  providers: [],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}
```

## Include Google Map in Angular Template
Open the file src/app/app.component.html and paste the following content:
```html
<agm-map [latitude]="lat" [longitude]="lng" >
  <agm-marker [latitude]="lat" [longitude]="lng">
    <agm-info-window>RMC</agm-info-window>
  </agm-marker>
</agm-map>
```
Open the file src/app/app.component.ts and define the variables.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  lat = 52.668418;
  lng = 48.829007;
}
```

## Styling the Google Map in Angular
Open the file src/app/app.component.css and give height to map:
```css
agm-map {
  height: 300px;
}
```

## Testing:
Run the following command in the project root folder
```ssh
ng serve
```
Open the following URL in your browser: **//localhost:4200/**

Now, you can add google map in angular application and apply designs as you want.

---

Please like share and give positive feedback to motivate me to write more.

For more tutorials [visit my website](https://www.w3courses.org/tutorials/)

Thanks:)
Happy Coding:)
[한글] 파이썬 lazy evaluation
Tags: python
Published: 2022-03-11 16:51:49

# Lazy Evaluation과 Generator

## Generator
파이썬에서 사용되는 Generator를 이해하기 위해서는 우선 iterator에 대한 지식이 필요하다.
다음에 iterator에 대해서도 글을 쓰겠지만, 형태적인 차원에서 설명하자면 `__iter__`와 `__next__` 를 메소드로 가지고 있으면서, 호출된 후의 상태(state)를 저장하고 있다가 더 이상 내보낼 값이 없을 때 `StopIteration` 예외를 일으키는 클래스를 iterator라고 부른다.

듣기 만해도 복잡해 보인다. ㅡㅡ;

이렇듯 복잡한 iterator를 보다 쉽게 생성해주는 것이 바로 __Generator__ 이다. 제네레이터를 통해 앞에서 언급한 기능과 메소드를 자동적으로 구현할 수 있는 것이다.

### Generator를 생성하는 방법
제네레이터를 생성하는 방법은 매우 간단하다. 그냥 함수에서 `return` 대신에 `yield`를 써주면 된다.

:::tip
함수에 yield statement가 한 개 이상 있으면 Generator라고 부른다. 
:::

이 부분 때문에 Generator는 yield가 들어 있는 함수라고 이해하고 있는 사람들도 있다. 틀린말은 아니지만 정확히는 yield 는 iterator가 갖고 있는 여러 기능들을 보다 쉽게 구현해주록 파이썬에 내장된 statement이고 이를 통해서 간단하게 제네레이터를 만들 수 있다는 표현이 맞겠다(~~그리고 그렇게 간단하게 생성된 제네레이터를 통해서 iterator를 만들 수 있는 것, 그게 그말인가??~~)

```python
def num_generator(n):
    while n>0:
        yield n
        n -= 1
    return 'Error Message goes here'
a = num_generator(3)
```

결과
```
>>> a.__next__()
>>> 3
>>> a.__next__()
>>> 2
>>> a.__next__()
>>> 1
>>> a.__next__()
>>> StopIteration: Error Message goes here
```

그래서 최종적으로 정리하자면 제네레이터는 다음과 같은 특징을 가지고 있다.
* 한 개 이상의 yield statement를 갖는다.
* 호출 되었을 때 iterator를 반환한다.
* `__iter__()` `__next__()` 같은 함수들이 자동적으로 적용되어, `<generator>.__next__()` 와 같이 사용가능하다.
* 제네레이터가 yield를 실행한 후에는 control을 caller에게 넘긴다. 즉 실행을 잠시 멈춘다.
* 이 때 제네레이터 내부의 지역변수(local variable)들과 그 값들이 다시 호출 되기 전까지 기억되어 있다. -> 이게 어떻게 가능한 건지는 좀더 전체적인 아키텍쳐를 알게 되었을 때 설명할 수 있을 듯하다.
* 그리고 함수가 실행을 마치면 `StopIteration` 예외가 발생한다.

## Lazy-evaluation(느긋한 계산법)
자 이제 제네레이터에 대해 어느정도 알아 보았으니, 제네레이터와 관련하여 알아두어야할 개념인 __Lazy-evaluation__ 에 대해 알아보자. __Lazy-evaluation__ 은 제네레이터의 특징 중 4번째 특징과 관련된다.

왜 Lazy 하다고 하느냐? yield를 하기 전에 계산을 완료해 놓지 않기 때문이다. 가령 위의 예시 코드에서 for 문은 한 번에 다 돌지 않고 `a.__next__()` 가 호출될 때만 돌게 된다. 만약에 일반적인 함수였다면 for 문은 한번에 다 돌았을 것이다. 

이 차이는 `[i for i in range(i)]` 와 `(i for i in range(i))`의 차이를 통해 확인할 수 있다. 
전자는 한번에 생성되는 리스트지만 후자는 호출될 때마다 for 문이 한 단계씩 진행되면서 i를 반환하는 제네레이터이다.

::: warning 
그래서 어떤 함수의 실행 시간을 측정할 때 만약에 그 함수가 제네레이터라면 측정된 결과가 그 함수에 적용된 알고리즘 고유의 수행시간(시간복잡도)가 아닐 수 있다. Lazy-Evaluation이 적용되기 때문이다.
:::

## 추가 질문
제네레이터와 이터레이터, 그리고 코루틴 모두 실행 중에 호출자에게 control을 넘기는 특징을 가지고 있다. 이때 피호출자의 지역변수와 그 값들이 남아 있는데 이게 어떻게 가능한 것인지 궁금하다. 아마 파이썬이라는 언어의 전체적인 아키텍쳐를 이해할 수 있을 때 설명할 수 있을 것 같다.
CSS Binary Counter
Tags: codepen
Published: 2022-03-11 16:43:04

<p>Auto-incrementing binary counter with decimal output, made with CSS animations and no JavaScript.</p>

<p>Read more: <a href="https://codepen.io/harunpehlivan/full/OJzLEMy">The Surprising Things That CSS Can Animate</a></p>

{% codepen https://codepen.io/harunpehlivan/pen/vYpBrEq %}
JS functions that I learned this week
Tags: javascript, beginners, learning, weeklyretro
Published: 2022-03-11 16:40:50

Today is friday and it’s the end of the week. Here are the top 5 javascript functions that I learned this week.

- reduce() - Reduce function applied to arrays in Javascript. it takes the values in an array, from the first till the last element, and applies functionality such that it changes the array into one singular value. Hence, it reduces the array. 

- for…of iterator - the for-of iterator is similar to for loop. The for...of statement loops/iterates through the collection, and provides you the ability to modify specific items.

- Nullish Operator - If the left hand side value is null or undefined this operator returns the right-hand side value otherwise left hand side value.for example: const value= null ?? “Hello”;

- Spread Operator  - Spread operator helps to expand the array into individual elements. So, it can be used to expand the array in a place where zero or more elements are expected.

- Object.entries() - The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs. This is the same as iterating with a for...in loop, except that a for...in loop enumerates properties in the prototype chain as well.

Please share what you learned this week in the comments. Let's learn together :)
`#happyCoding #javascript #beginners`
TIL - Bash: filter a specific text inside files with command find
Tags: bash, todayilearned
Published: 2022-03-11 16:28:06

Today, I learned how to filter a specific string inside files with command `find`.

```bash
find ./ -type f | xargs grep -Hn "abc"
```

Example notes:
`abc`: string that I want to find
`./`: path where to search
TIL - Git: fetch changes from a remote branch to a different local branch
Tags: git, todayilearned
Published: 2022-03-11 16:20:34

Today I learned that if I want to fetch changes from a remote branch to a different local branch, all I have to do is:

```bash
git checkout <local-branch>
git pull origin <remote-branch>
```

For example, if I would like to fetch changes from `master` to a `test` branch:

```bash
git checkout test // we move to test branch
git pull origin master // we pull data from master to test
```
Make Kedro Runs Beautiful
Tags: python, kedro, cli
Published: 2022-03-11 16:19:13

---
canonical_url: https://waylonwalker.com/til/kedro-rich/
cover_image: https://images.waylonwalker.com/til/kedro-rich.png
published: true
tags:
- python
- kedro
- cli
title: Make Kedro Runs Beautiful
---

Kedro rich is a very new and unstable (it's good, just not ready) plugin for kedro to make the command line prettier.

## Install kedro rich

There is no pypi package yet, but it's on github.  You can pip install it with the git url.

``` bash
pip install git+https://github.com/datajoely/kedro-rich
```

## Kedro run

You can run your pipeline just as you normally would, except you get progress bars and pretty prints.

```
kedro run
```

![kedro rich pretty run](https://images.waylonwalker.com/kedro-rich-run.png)


## Kedro catalog

Listing out catalog entries from the command line now print out a nice pretty table.

``` bash
kedro catalog list
```

![kedro rich catalog list table output](https://images.waylonwalker.com/kedro-rich-catalog-list.png)

## Give it a star

Go to the [GitHub repo](https://github.com/datajoely/kedro-rich) and give it a star, Joel deserves it.
"Everything is fine", which kills teams
Tags: teamwork, collaboration, pairprogramming, extremeownership
Published: 2022-03-11 16:00:51

> Lingchi (simplified Chinese: 凌迟; traditional Chinese: 凌遲), translated variously as the slow process, the lingering death, or slow slicing, and also known as death by a thousand cuts. (https://en.wikipedia.org/w/index.php?title=Lingchi&oldid=1073688689)

凌迟
I keep encountering “Death by a Thousand Cuts” (DTC) in  IT over and over again. What is it? Something which is hard to note and easy to put aside. Something “small”, which surely does not have an impact on your work. It may be a broken headset, which we do not need right now. It may be a Windows update we keep delaying. It may be not doing a tiny Proof Of Concept project before starting something big & important. It may be continuously refusing to learn up the “pair programming done right”. It may even be a coffee machine which is running out of Java beans anytime soon. 

It is very easy and very tempting to keep ignoring small things. These almost do not have any impact on us, right? 

WRONG.

Unsolved problems, however small, have a tendency to sum up. One day a combination of these will happen at the same time. Your headset is broken - so you cannot efficiently speak with other colleagues. Your Windows update starts while you are investigating a critical Live issue. You are lacking knowledge which you knew you might need, but you kept ignoring the need to read up on the topic and do a POC. Your team cannot really help you, because your knowledge is not shared with the team as you never started doing the pair programming in the right way. Oh, by the way, the coffee machine has just run out of coffee beans, so you will spend a long time solving this issue with NO COFFEE.

Well, that was a small exaggeration. However I keep noticing developers trying just to “wait and hope” that “minor problems” get resolved. Once I could spend 1-2 hours daily to do same manual tasks again and again, as the my “managed PC” has been accumulating more and more issues.

How to resolve the issue?
The practice of finding manual workarounds (aka “silent suffering” / “heroism”) around small issues has to stop. We work as a team. We share our problems. We raise them with parties concerned. We keep tracing the tickets we have raised for broken stuff, making sure it doesn’t get silently dismissed. 

We work in teams. Treating “small issues” seriously is a part of our jobs.

Be The Team. Own it.
Connect WooCommerce to FraudLabs Pro without code
Tags: nocode, woocommerce
Published: 2022-03-11 15:59:52

---
title: Connect WooCommerce to FraudLabs Pro without code
published: true
description: Automate your customer phone number verification with FraudLabs Pros Pipedream integration - no code required.
tags: nocode, woocommerce
cover_image: https://pipedream.com/blog/content/images/size/w2000/2022/03/Blog-Card.png
---

⚡️ Welcome to the 2nd installment of the  Pipedream Speed Run! ⚡️

In this series, we'll create a Workflow from start to finish in 5 minutes or less.

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

This week we're featuring a brand new integration that was just included in our component repository by the folks over at FraudLabs Pro.

FraudLabs Pro specializes in preventing fraud with machine learning tools, and customer verification tools like SMS verification.

In this episode we're going to connect a WooCommerce store to FraudLabs Pro's SMS verification. That way every new order placed on our WooCommerce store will automatically be sent a verification code via text message.


Want to see a specific workflow tutorial? We're taking submissions!

https://form.jotform.com/220694247042049
THE KILL PROCESS IN ESPECIFIC PORT
Tags: linux, node, react, typescript
Published: 2022-03-11 15:58:35

1. Open a terminal of linux and write the next command.

   `sudo netstat -tupln`
2. Then, Choose the procces to kill and PID. Finally write the
 next command:
  

   ```
   sudo kill -9 PID 
   #example: sudo kill -9 19993 
   ```
If you are Javascript developer you must know this VS Code extension
Tags: javascript, programming, productivity, node
Published: 2022-03-11 15:57:47

I fell in love with this vsCode extension and in this post I'll show you why.
The extension is [Node.js Notebooks (REPL)](https://marketplace.visualstudio.com/items?itemName=donjayamanne.typescript-notebook).

If you want to:

- Test the output of your javascript code.
- Know the compilation runtime (ms)
- Preview the libraries
- Execute part of the code
- See the performance of your code

This crazy vscode extension is for you!.

![Node.js Notebooks](https://raw.githubusercontent.com/DonJayamanne/typescript-notebook/main/images/REPL.gif)
 

![Node.js Notebooks](https://raw.githubusercontent.com/DonJayamanne/typescript-notebook/main/images/demo.gif)


Thank you for reading my article, I have written other articles and you can see them on the right bar .
How to rsync docker images path to some-path
Tags: linux, docker, rsync, beginners
Published: 2022-03-11 15:45:25

#Halo sobat,

Now i want to tell you something about symlink on linux when your docker path storage have full capacity. Here script for execute this
* Stop docker service
```
systemctl stop docker
```
* Symlink your docker path to some-path 
```
sudo rsync  -aP /var/lib/docker /new/path/folder
```
* Update your file daemon.json
```
vi /etc/docker/daemon.json

#add this line on daemon.json
{
  "data-root": "/new/path/folder"
}
```

* Start all docker image
```
docker start $(docker ps -a -q)
```

* Start docker service
```
systemctl start docker
```
Chuyển nhà trọn gói thành hưng tphcm
Tags: chuyennhatrongoithanhhung, beginners, webdev
Published: 2022-03-11 15:40:30

[Chuyển nhà trọn gói](https://chuyennhathanhhung.vn/chuyen-nha-tron-goi/) hiểu nôm na chính là hình thức chuyển nhà theo yêu cầu của khách hàng. Theo đó, bên phía dịch vụ Thành Hưng sẽ chịu tất cả trách nhiệm trong quá trình di chuyển đồ sang mới như : đóng gói đồ đạc, bao bọc cẩn thận những đồ dễ vỡ, tháo(lắp) những vật dụng lớn, cồng kềnh, khó di chuyển. Sắp xếp vị trí đồ đạc theo yêu cầu của khách hàng khi về nhà mới. Khách hàng sẽ không phải làm bất cứ việc gì trong quá trình chuyển nhà. Vì đã có công ty chúng tôi làm cho bạn.

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

Gói dịch vụ tiện ích này ra đời, vì thấu hiểu những gia đình chỉ có mẹ già, con nhỏ. Những gia đình không có người đàn ông trong nhà hoặc đồ đạc lớn, nặng cần rất nhiều người khiêng vác nhưng lại không có. Từ nay, việc chuyển nhà của bạn sẽ trở nên thật sự dễ dàng khi có chúng tôi đồng hành.

Khách hàng có nhu cầu chuyển nhà trọn gói thành hưng, dịch vụ chuyển nhà ở uy tín, chuyên nghiệp, giá rẻ tại khu vực TPHCM, Hà Nội. 

**Có 3 hình thức tư vấn chuyển nhà trọn gói cho khách hàng : **

HÌnh thức 1 : Tư vấn trực tiếp kết nối với bộ phận báo giá qua số điện thoại chuyển nhà trọn gói 0962490249 hoặc 0862470247.

Hình thức 2 : Nhắn tin trực tiếp đến Fanpage chuyển nhà thành hưng của chúng tôi theo link sau: https://facebook.com/chuyennhathanhhung.vn/

Hình thức 3 : Tư vấn qua Zalo. Khách hàng thực hiện add số điện thoại zalo của công ty chuyển nhà thành hưng 0962490249

Chuyển Nhà Thành Hưng tự hào là đơn vị chuyển nhà trọn gói uy tín tại TPHCM. Khách hàng có nhu cầu sử dụng dịch vụ chuyển trọn gói tphcm, dịch vụ dọn nhà, dịch vụ chuyển văn phòng trọn gói, chuyển phòng trọ trọn gói, thuê xe tải chuyển nhà, nhắc máy lên gọi cho chúng tôi để được mức giá chuyển nhà giá rẻ, giá chuyển nhà trọn gói tốt nhất tại khu vực TPHCM, Hà Nội.
#66 Days of Data
Tags: datascience, python, 100daysofcode, ankitgupta
Published: 2022-03-11 15:36:47

## **Learning Python**  👨‍💻

D 27 of #66daysofdata 📈

Today I have learnt - Fundamentals of Python - Tokens, Keywords, Literals, Operators, Identifiers & Comments ✌️

Checkout 👉 [My #66 Days of Data timeline on Github](https://github.com/mrankitgupta/66DaysOfData)

Say me Hi! 
I'll be glad to connect on 
👇

**Twitter** @ [Mr_AnkitGupta01](https://twitter.com/Mr_AnkitGupta01)

**Github** @ [MrAnkitGupta](https://github.com/mrankitgupta)
React Hook update inconsistencies
Tags: react
Published: 2022-03-11 15:34:05

I have a component that unexpectedly prints the result after executing the click event
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8iarlnkfbaywzgsgl35q.png)
The print result of the first two clicks is expected, but the print result of the third click is unexpected. May I ask why?