teleren/devto huggingface dataset:
GETTING STARTED WITH PYTHON (BEGGINNER)
Tags: python, webdev, datascience
Published: 2022-02-15 13:30:27

Python is an easy to learn and use programming language developed on 20th February,1991 by Guido van Rossum. 

Ease to learn and use python is made possible by the fact that;

- Python is a high-level programming language. It uses an English-like syntax to write short likes of code that make coding easier and faster.
- With python, as we will learn later, a programmer does not need to declare a variable with its data type. Python automatically assigns a data type depending on the value assigned to a variable.
- Python is free and open-source. 
- You can download the source code, modify it and distribute your own version of python.
- Being an interpreted language, python directly executes code line by line.
- With the stated features, programmers get ample time to increase their productivity rather than spending time on understanding the language.

The drive to get to learn a new language is at its peak when you as a starting programmer has a long-term goal. This will act as great motivation to dig deeper into your preferred language. 

Mastery of Python programming language opens doors to many professional fields and applications. 
If you are interested in venturing in **web development, game development, machine learning, data science and GUI development** then python programming is one of the best options for you.

Now we have our goals set, let's dive into some of the basic concepts. 

**PYTHON** 
The language’s name isn’t about snakes, but about the popular British comedy troupe Monty Python. Guido, the founder of the language himself is a big fan of Monty Python’s Flying Circus.

** Variables and data types in Python**.

Variables are containers for storing data values.
In Python, variables are created the moment you first assign a value to it and are declared without a data type e.g.
x = 5

**Types of variables**.
**local variables** - variables used inside a function.
**Global variables** - variables declared outside a function and can be used by a number of functions.


**Data types** 
- **Integer** - these are values that return an integer value. type int.
- **float** - these are values with a decimal part e.g. 15.15
- **String** - Strings are a combination of characters in double or single quotes.

- **Boolean** - are instances that return true or false/ yes or no.

**Operators**

- **Arithmetic operators** – these operators are used to perform basic mathematical operations such as - +,-,*, /, %.
- **Comparison operators** – operators used on two values returning a Boolean value. They are - ==, <, >, >=, <=, !=.
- **Logical operators** – operators used to combine values that result in Boolean values. They include: - AND, OR, NOT
- **Assignment operators** – these are operators used to assign values to a variable. They are: - ==, -=, +=, =, ++, --.

With that as a beginner, you can create programs and grow step by step to pro level. 

                             **ALL THE BEST**
Integrate Firebase web notification in the laravel application
Tags: laravel, firebase, notification, vue
Published: 2022-02-15 13:29:19

Web notifications are messages sent to a visitor's device from a website. It allows you to engage and retain website visitors. Push notification can boost app engagement by 88%, with 66% of app users on average returning to that app when push enabled.

In this article, we are using Firebase and Laravel & VueJs technology. We will consider setting up push notifications in the SPA application. We will learn step by step the integration of FCM in Laravel.

Step 1-
We are preparing a project on the firebase console. Click here to https://console.firebase.google.com/. I am enabling google analytic for a report.
It will take less than 1 minute to create a project for you.

[Read More](https://www.devrohit.com/firebase-web-notification-in-laravel/)
⚙️ ❮ ZZComplete ❯
Tags: zsh, opensource, tooling, shell
Published: 2022-02-15 12:53:10

<div align="center">
  <a href="https://github.com/z-shell/zi">
  <img src="https://raw.githubusercontent.com/z-shell/zi/main/docs/images/logo.png" alt="Logo" width="60" height="60"><img/></a>

[https://z.digitalclouds.dev](https://z.digitalclouds.dev) | [GitHub](https://github.com/z-shell) | [Twitter](https://twitter.com/zshell_zi) | [Join the team](https://github.com/z-shell/community/issues/new?assignees=&labels=%F0%9F%91%A5+member&template=membership.yml&title=team%3A+)

- Please see related [**post**](https://dev.to/sso/zui-tool-of-cmd-line-ninjas-2083) as **this is additional tool for** [⬢ ZUI](https://dev.to/sso/zui-tool-of-cmd-line-ninjas-2083).
</div>

---

## Asciinema preview

You can resize the video like a normal web page, i.e.: with `Ctrl`/`Cmd`+`plus` and `Ctrl`/`Cmd`+`minus`.

[![asciicast](https://asciinema.org/a/293365.svg)](https://asciinema.org/a/293365)

## Motivation

Complete options from manual pages – press <kbd>Ctrl-F</kbd> to start the completer.

The completion of options has drawbacks:

1. The user has to remember a part of the option he wants to complete.
2. OR he is forced to read through all the options (listed after <kbd>TAB</kbd>).

With ZZ Complete, the user can:

1. Search in the manual for arbitrary text related to the option.

2. Then select the option that's located nearby the found text.

3. Also, the user can read about the possible values of the options and select them too.


## Installation


### Dependencies

The plugin needs also [ZUI](https://github.com/z-shell/zui) plugin and a Zsh that is built with the `zsh/curses` module.

### Manual

Clone the Repository.

```shell
git clone https://github.com/z-shell/zzcomplete ~/path/to/zzcomplete
```

And add the following to your `zshrc` file.

```shell
source ~/path/to/zzcomplete/zzcomplete.plugin.zsh
```

### ZI

Add the following to your `zshrc` file.

```shell
zi light z-shell/zzcomplete
```

### Antigen

Add the following to your `zshrc` file.

```shell
antigen bundle z-shell/zzcomplete
```

### Zgen

Add the following to your `.zshrc` file in the same place you're doing your other `zgen load` calls in.

```shell
zgen load z-shell/zzcomplete
```

### Oh-My-Zsh

Clone the Repository.

```shell
git clone https://github.com/z-shell/zzcomplete.git \
  ~ZSH_CUSTOM/plugins/zzcomplete
```

And add `zzcomplete` to your plugin list.
Basic-Fruit-Ninja
Tags: android, java, libgdx
Published: 2022-02-15 12:53:01


Basic-Fruit-Ninja this game is made using the libGDX library.

[🌐](https://mertkadirarslan.com.tr)
![Cut to Play](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2x0szexz7l1qdeoy1nz.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1cbuukp19ab18isv9z5.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fh4ectyr0k5oeowa0433.png)
7 VS Code Extensions that JS dev Should Use
Tags: vscode, javascript, programming, productivity
Published: 2022-02-15 12:46:20

Hi, Folks I know we do not want to read long blog posts like me. So I plan to make this post short. 

### In this I share 7 most useful Extensions while Coding with JS


## [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) 
Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design.


![Thunder Client is a lightweight Rest API Client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu8pg8p5acpsgo2fao17.gif)

## [Snipped](https://marketplace.visualstudio.com/items?itemName=JeffersonLicet.snipped&ssr=false#overview) 

Create fancy screenshots of your code without leaving the editor.
![Create fancy screenshots of your code without leaving the editor.](https://i.imgur.com/NSCltwI.png)

## [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) 

This extension make debugging much easier by automating the operation of writing meaningful log message.

![This extension make debugging much easier by automating the operation of writing meaningful log message.](https://image.ibb.co/dysw7p/insert_log_message.gif)
![This extension make debugging much easier by automating the operation of writing meaningful log message.](https://i.ibb.co/Jk2pmRG/tcl-multiple-selections.gif)

## [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex) 

Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.

![Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.](https://github.com/chrmarti/vscode-regex/raw/main/images/in_action.gif)

## [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 

Display import/require package size in the editor

![Display import/require package size in the editor](https://file-wkbcnlcvbn.now.sh/import-cost.gif)

## [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

![Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.](https://quokkajs.com/assets/img/main-video.gif)

## [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) 

JavaScript is everywhere, and ES7, React, Redux & GraphQL Snippets cover almost everything you need to get started with modern app development efficiently. This plugin extension makes a great alternative to any other JavaScript-based code snippets that you might already be using.

### Let me know if you  know some more awesome extensions in comments :)
How to use named parameters in JPA queries
Tags: java, jpa, codever, snippets
Published: 2022-02-15 12:43:14

Define a named parameter (`:status`) in a [named query](https://www.codever.land/snippets/620b6123e102f148ceb9f5e6/details):

```java
import javax.persistence.*;

@Entity
@Access(AccessType.FIELD)
@Table(name = PartnerInitialLoad.TABLE_NAME)
@NamedQueries({
  @NamedQuery(
      name = FIND_PARTNER_BY_STATUS ,
      query =
          "select p from PartnerInitialLoad p where p.status = :status order by p.partnernummer asc")
})
public class PartnerInitialLoad {
  public static final String TABLE_NAME = "T_PARTNER_INITIAL_LOAD";

  public static final String FIND_MAX_PARTNERNUMMER = "findMaxPartnernummer";
  public static final String FIND_PARTNER_BY_STATUS = "findPartnerByStatus";

  public static final String PARAM_STATUS = "status"; //the value here has to match the one in jpql, here "status"

 // further entity details emitted for brevity
}
```

Then, set the named parameter in the created `TypedQuery` (`em.createNamedQuery`) with the `setParameter` method, which expects the name of the parameter (should match the one defined in the `@NamedQuery`) and its value:

```java
@Stateless
public class PartnerInitialLoadRepository {

  @Inject private EntityManager em;

  public List<PartnerInitialLoad> getPartnersByStatus(Integer chunkSize, String status) {
    var query =
        em.createNamedQuery(PartnerInitialLoad.FIND_UNPROCESSED_PARTNER, PartnerInitialLoad.class);
    query.setParameter(PartnerInitialLoad.PARAM_STATUS, status);
    query.setMaxResults(chunkSize);

    return query.getResultList();
  }
}
```

Same principle applies, if we create a **collection-valued named parameters**, to generate for example a `SELECT IN` clause sql as in the following snippet:

```java
  public List<PartnerInitialLoad> getPartnersWithStatusInList(Integer chunkSize, List<String> statusList) {
   String sql="select p from PartnerInitialLoad p where p.status IN (:statusList) order by p.partnernummer asc"
    var query =
        em.createQuery(sql, PartnerInitialLoad.class);
    query.setParameter("statusList", status);
    query.setMaxResults(chunkSize);

    return query.getResultList();
  }
```

<hr/>

> Shared with :heart: from [Codever](https://www.codever.dev/snippets/620b73afe102f148ceb9f6ea/details). Use :point_right: [**copy to mine**](https://www.codever.dev/snippets/620b73afe102f148ceb9f6ea/details) functionality to add it to your personal snippets collection.
Introduction to OOPS in Javascript (this keyword)
Tags: javascript, webdev, beginners, programming
Published: 2022-02-15 12:31:09

this behaves in two different modes i.e Strict and Non -Strict.
(Strict is basically used in react)

_this1 and this2 are in node environment _
**this1.js**
console.log(this);

// 👉ans ->(returns window object (just like global object))
// Window
// index.html:42 Live reload enabled.

function f(){
    console.log(this);
}

// 👉ans ->{}

// let obj1={
//     name :'Pushan',
//     f:function f(){
//         console.log(this);
//     }
// } 
// obj1.f();

// 👉ans ->{name: 'Pushan', f: ƒ}


let obj2={
    name:'Pushan',
    f:function f(){
        function g(){
            console.log(this);
        }
        g()
    }
}

obj2.f();

// ans -> window object 

**this2.js**
'use strict'

console.log(this);

//👉 ans ->{}

function f(){
    console.log(this)
}

f();

//👉 ans -> undefined

let obj={
    name:"Pushan",
    f:function(){
        console.log(this)
    }
}

obj.f();

// ans -> { name: 'Pushan', f: [Function: f] }

let obj2={
    name:"Pushan",
    f:function f(){
        function g(){
            console.log(this);
        }
        g()
    }
}

obj2.f()

//👉 ans ->undefined

_this3 and this4 are in Browser Environment _


**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="this3.js">
        
    </script>
</head>
<body>
    
</body>
</html>

**this3.js**

console.log(this);

// 👉ans ->(returns window object (just like global object))
// Window
// index.html:42 Live reload enabled.

function f(){
    console.log(this);
}

// 👉ans ->{}

let obj1={
    name :'Pushan',
    f:function f(){
        console.log(this);
    }
} 
obj1.f();

// 👉ans ->{name: 'Pushan', f: ƒ}


let obj2={
    name:'Pushan',
    f:function f(){
        function g(){
            console.log(this);
        }
        g()
    }
}

obj2.f();

// ans -> window object


**this4.js**

**index1.html**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="this4.js">

    </script>
</head>
<body>
    
</body>
</html>


**this4.js**


'use strict';


console.log(this);

// 👉ans ->(returns window object (just like global object))
// Window
// index.html:42 Live reload enabled.

function f(){
    console.log(this);
}

// 👉ans ->undefined

// let obj1={
//     name :'Pushan',
//     f:function f(){
//         console.log(this);
//     }
// } 
// obj1.f();

// 👉ans ->{name: 'Pushan', f: ƒ}


let obj2={
    name:'Pushan',
    f:function f(){
        function g(){
            console.log(this);
        }
        g()
    }
}

obj2.f();

// ans -> window object 



Link for handwritten notes:
https://github.com/pushanverma/notes/blob/main/webd/OOPs%20in%20Js%20.pdf
인스타그램 스크래핑 (python)
Published: 2022-02-15 12:18:31


## 개요
서비스를 개발하며 인스타그램의 유저, 포스트, 스토리 등 다양한 데이터가 필요한 순간이 있다. 이 글은 python의 [instaloader](https://instaloader.github.io/) 패키지를 중심으로, 인스타그램 스크래핑에 대한 기본적인 내용을 다룬다.


## 준비
1. instaloader 패키지 설치
`pip install instaloader`


2. 인스타그램 계정 생성
이미 계정이 있다고 하더라도 **스크래핑용 계정을 별도로 생성**하길 추천한다. 인스타그램에 지속적인 request를 보낼 경우 계정이 제재당할 수도 있기 때문이다.


## 사용
스크래핑 대상 유저명으로 프로필을 불러오고, 해당 프로필의 포스트들을 불러온 후, 각 포스트의 날짜를 출력하고 있다. 포스트의 타입은 [Post](https://instaloader.github.io/module/structures.html?highlight=post#instaloader.Post)이다. 확인 후 필요한 필드와 메소드를 사용하면 된다.
```python
from instaloader import Instaloader, Profile

L = Instaloader()
L.login(YOUR_USERNAME, YOUR_PASSWORD)

profile = Profile.from_username(L.context, TARGET_USERNAME)

posts = profile.get_posts()

for post in posts:
    print(post.date)
```

```zsh
# 출력 예시
2022-01-14 09:00:53
2022-01-13 09:01:19
2022-01-13 09:01:15
```

만약 포스트의 컨텐츠(글, 사진, 동영상, 메타데이터)를 파일의 형태로 다운로드 받고싶다면 다음과 같이 작업하면 된다.

```python
from instaloader import Instaloader, Profile

L = Instaloader()
L.login(YOUR_USERNAME, YOUR_PASSWORD)

posts = Profile.from_username(L.context, TARGET_USERNAME).get_posts()

for post in posts:
    L.download_post(post, TARGET_USERNAME)
```

```zsh
# TARGET_USERNAME 라는 이름의 폴더에 컨텐츠들이 다운로드된다.

TARGET_USERNAME/2022-01-03_04-38-55_UTC_1.jpg
TARGET_USERNAME/2022-01-03_04-38-55_UTC.json.xz
TARGET_USERNAME/2022-01-03_04-38-55_UTC.txt
```


심화적으로, 여러 타겟 계정들이 2022년에 작성한 모든 컨텐츠를 다운로드하는 스크래퍼를 만들어본다. time 모듈의 sleep 메서드 등을 적절히 사용해서 과도한 request로 인한 **계정 제재를 방지**하자.
```python
from datetime import datetime
from itertools import dropwhile, takewhile
from random import randint
from instaloader import Instaloader, Profile
from time import sleep

L = Instaloader()
L.login(YOUR_USERNAME, YOUR_PASSWORD)

TARGETS = [
    TARGET_USERNAME_1,
    TARGET_USERNAME_2,
    TARGET_USERNAME_3,
    TARGET_USERNAME_4,
    TARGET_USERNAME_5
]

FROM = datetime(2022, 1, 1)
TO = datetime(2022, 12, 31)

for target in TARGETS:
    posts = Profile.from_username(L.context,target).get_posts()
    
    for post in takewhile(lambda p: p.date > FROM, dropwhile(lambda p: p.date > TO, posts)):
        sleep(randint(3, 20))
        L.download_post(post, target)
```

## 결론
python의 instaloader 패키지를 이용해 아주 간단하게 스크래핑을 수행할 수 있다. request 요청 정도에 따라 계정 제재뿐 아니라 ip밴도 당할 수 있다고 본 것 같은데, 이메일 생성 봇과, vpn을 함께 사용하면 초강력 스크래퍼를 만들 수 있을 것 같다.

이 글에서는 최소한의 사용 방법을 살펴보았는데, 이 패키지에는 해시태그나 인기도를 기반으로 포스트를 스크래핑하는 등 다양하고 유용한 기능이 많이 있다. 또한 [module](https://instaloader.github.io/as-module.html) 중심으로 살펴보았지만, [cli](https://instaloader.github.io/cli-options.html)도 잘 갖춰져 있으니 필요시 잘 활용하길 바란다.
Classes are still useful even in largely functional style code
Tags: javascript, programming, functional, react
Published: 2022-02-15 12:14:36

---
title: Classes are still useful even in largely functional style code
published: true
description: 
tags: javascript, programming, functional, react
//cover_image: https://direct_url_to_image.jpg
---

It’s became a fashion to rid code of classes even when it doesn’t help produce better code. The popular web UI framework React is likely a culprit — so many developers are familiar with React and so any trends started by React developers inevitably spread even if outside React same concepts don’t work at all.

While classes are mostly associated with object oriented programming they can also be just as useful tool in functional programming as they are in OOP. Functional programming while containing useful ideas and goals badly lacks down to earth vocabulary.

The use case that classes solve is same that of “Higher-order functions”. This functional term is a bit broad — it’s good to describe a general approach but not good to name the individual bits in code. It’s not immediately clear if higher-order function refers to function that returns a function, or a function that takes a function as a parameter or a function that has been returned by a function and in this sentence the word function was used so many times that it should be pretty clear that we need better vocabulary.

Classes provide more structure and very useful vocabulary:
- Class
- Constructor
- Instance
- Property
- Method

Now it’s easy to identify what is what — instead of “function that returns a function” — we got a “class" and "constructor”. Instead of “function that has been created inside a function” — we have a method. And it has became explicit that methods don’t exist without instances, just like returned functions don’t exist without hidden closures attached to them.

What also very helpful is that it's more natural to name classes using nouns. This makes code look more like a human language - we typically don't use verbs to describe gifts that we get on birthdays. Meanwhile typically verbs are frequently used to name functions/methods thus it often becomes awkward to give a name to variables that hold on to a function that's bound to closure. On one hand it makes sense that function is verb on other hand when function is passed around like a gift it's awkward if it's name is a verb.

What classes help to achieve — a code written in such a manner that all functions are always verbs, and all things that can be passed around are always nouns. It helps to achieve consistency. It helps to talk about code. And yes it’s sometimes takes more time to give meaningful naming — but this is a good problem to have — after it’s solved it creates a code that is more easy to understand and has more clearly defined structural shape.

It doesn’t matter if you’re fan of functional programming or not — if your programming language has classes — use them instead of just plain functions — it’s good for your code.
JS Errors: Resolving HTTP Headers sent error in Node.JS
Tags: javascript, webdev, node
Published: 2022-02-15 12:13:49

When using express and Node.JS, we will sometimes get this error:

```javascript
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:277:15)
    at ServerResponse.setHeader (node:_http_outgoing:563:11)
    at ServerResponse.header (/node_modules/express/lib/response.js:771:10)
    at file:///link/to/file/app.js:309:13 {
    code: 'ERR_HTTP_HEADERS_SENT'
}
```
This is quite a confusing error if you aren't familiar with HTTP headers. This error arises when you send more than 1 responses to the user or client. That means the receiver is getting two responses, when it should only be getting one. To solve this, make sure you are only sending one response.

## How to solve the ERR_HTTP_HEADERS_SENT error
This can often be caused when you send a response to the client, and an asychronous piece of code then sends a second response after the first. Look in your code, you may be accidentally using res.send twice. For example, the below will cause the error:

```javascript
app.get('/app', async function(req, res) {
    /* Don't do this! Remove one of the res.send functions to remove the error */
    await User.find({username: req.headers.username}, function(err, items) {
        res.send('User');
    })
    res.send('Hello');
})
```
Note: other res functions, such as res.redirect will cause the same issue, i.e. the below code is also wrong:

```javascript
app.get('/app', function(req, res) {
    /* Don't do this! Remove one of these functions to remove the error */    
    await User.find({username: req.headers.username}, function(err, items) {
        res.redirect('/app/login');    
    })
    res.send('Hello');
})
```
Your code should instead look like this, with only one res function:

```javascript
app.get('/app', function(req, res) {
    res.redirect('/app/login');
})
```