teleren/devto huggingface dataset:
搭建vite+reat+ts+eslint+prettier+husky+lint-staged脚手架
Published: 2021-10-10 09:37:47

## 初始化项目

### 使用vite初始化项目:

`npm init vite@latest react-starter`
   
vite会让你选择是react还是vue，是否使用typescript。

### 配置eslint

1. `npm i -D eslint`
2. `npx eslint --init`

效果如下
![Screenshot from 2021-10-10 18-10-56](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1u5u11khhlgmiw1cpzn.png)
可以看到默认的eslint模板不是很全，react-hooks的lint也没有，需要手动在模板的基础上补齐。

#### 补齐typescript相关的lint

`npm i -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser`

.eslintrc.js增加`airbnb-typescript`：

```javascript
extends: ["plugin:react/recommended", "airbnb", "airbnb-typescript"],
parserOptions: {
  ...,
  project: "./tsconfig.json",
},
```

#### 补齐react-hooks相关的lint

使用react官方给出了hooks的lint插件

`npm i -D eslint-plugin-react-hooks`
 
配置.eslintrc.js
```javascript
extends: [
  ...,
  'plugin:react-hooks/recommended'
]
```

#### React17之后使用JSX不需要在引入React，关闭规则

```json
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
```

#### 配置sort import

`npm install --save-dev eslint-plugin-simple-import-sort`

### 配置prettier

* `npm i -D prettier eslint-config-prettier `

### 配置style lint

* `npm i -D stylelint stylelint-config-prettier stylelint-config-standard stylelint-config-recess-order`

### 配置husky + lint-staged

* `npx husky-init && npm install`
* `npm i -D lint-staged`
Decentralized Nextjs Frontend with Skynet Checklist
Tags: skynet, frontend, nextjs, checklist
Published: 2021-10-10 09:33:29

## Automate Deployments to Skynet with Github Action

- Clone Nextjs + Chakra-UI template from [https://github.com/sozonome/nextchakra-starter](https://github.com/sozonome/nextchakra-starter)
- Add image loader in next.config.js

```bash
images: {
    loader: "imgix",
    path: "",
  },
```

- Add next export in package.json build command

```bash
"build": "next build && next export",
```

- Copy the template to Github Actions [https://docs.siasky.net/developer-guides/deploy-github-actions](https://docs.siasky.net/developer-guides/deploy-github-actions)
- Change to static file directory from build to out in the yml file

```bash
upload-dir: out
```

- Create a seed in settings and add a secret with SKYNET_REGISTRY_SEED

---

## Add a Home screen Button

- Copy the code from [https://docs.siasky.net/integrations/homescreen/adding-homescreen-support-to-an-app](https://docs.siasky.net/integrations/homescreen/adding-homescreen-support-to-an-app)
- Paste the code in README
- Go to Actions, click on last run>build. Inside Deploy to Skynet copy the Token in  the line Resolver Skylink: without sia//
- Change [skylink] to the token.
- Commit the changes, Click the button, Login with your phrase and add the app to the homepage

---

## Setup HNS name

- Full Tutorial [https://docs.siasky.net/developer-guides/setting-up-a-handshake-name](https://docs.siasky.net/developer-guides/setting-up-a-handshake-name)
- Acquire an HNS name [https://www.namebase.io/](https://www.namebase.io/)
- In [https://www.namebase.io/domain-manager/](https://www.namebase.io/domain-manager/)[Domain Name] Add new record TXT with Resolver Skylink
- After finished syncing. Open [Domain name].hns.siasky.net/
Bus Pariwisata Medan
Tags: buspariwisatamedan, sewabusmedan, sewabuspariwisatamedan, sewabusmediummedan
Published: 2021-10-10 09:30:46

Bus Wisata menjadi salah satu elemen penting dalam pariwisata. Layanan <a href="https://aurorawisata.com/products/detail/12/sewa_bus_pariwisata_medan_2020/">sewa buspariwisata medan</a> adalah sejoli dengan paket wisata danau toba dan program tour lainnya di mana keduanya saling membutuhkan untuk kelancaran programnya. Baik bus pariwisata maupun program tour adalah dua bagian terpisah yang menjadi satu.
 
Selain bus besar, kami juga menyediakan layanan bus sedang atau dikenal sebagai bus ukuran medium. Layanan <a href="https://aurorawisata.com/products/detail/12/sewa_bus_pariwisata_medan_2020/">sewa bus medium medan</a> ini memiliki keunggulan dibandingkan bus besar. Bodynya lebih mungil sehingga lebih lincah dalam menapaki jalan berliku di kawasan destinasi wisata di Sumatera Utara.
                                                     
Sewa bus medan juga meliputi penyewaan armada kecil dan sedang. Wisatawan dalam kota biasanya menyewa sehari saja. Selain bus pariwisata berukuran besar dan bus medium, ada juga jenis micro bus yaitu <a href="https://aurorawisata.com/products/detail/12/sewa_bus_pariwisata_medan_2020/">sewa bus medan</a> seperti Hiace dan elf long yang kami operasikan bagi mereka wisatawan yang hanya berjumlah kecil.
How to manage your Node.js version on Replit
Tags: replit, node, nvm
Published: 2021-10-10 09:23:18

# How to manage your Node.js version on Replit
1. First, go to [Replit](https://replit.com) and create a REPL. ***Select BASH and NOT Node.js*** (We'll install it later). Funnily enough, at the time of writing, if you ran `node -v`, you would see `v14.17.1` (which is an LTS version, and also considering we didn't install Node).
2. Select `Shell` (which is just beside `Console`)
3. Copy and paste the following code below into `Shell`. On Windows, it's `Ctrl`+`Shift`+`V`. You can change the `16` below to any version you desire.
  ```sh
  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
  export NVM_DIR="/config/nvm"
  [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
  [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
  nvm install 16 
  nvm use 16
  ```
4. Wait for a while. You may choose to go to the toilet or grab a few bites in the meantime.
5. After the code below has finished running and installing Node.js, run `node -v && npm -v`. You should see an updated Node.js (`v16.x.x`) and NPM (`v8.x.x` at time of writing) version. 
6. Run the following to test:
 ```sh
 echo console.log(`Node version: ${process.versions.node}`) > test.js
 node test.js
 ```
 You should now see an updated/different Node version, depending on which version you installed and used earlier on.

That's it! You can now install and use any Node.js version you wish!

*Post was last updated on 10/10/2021*
Share a lexical analyzer implemented in JavaScript
Tags: javascript, github, webdev
Published: 2021-10-10 09:00:14

It is a lexical analyzer based on DFA that made by JS and supports multi-language extension.

Project: https://github.com/WGrape/lexer
Demo: https://wgrape.github.io/lexer

Welcome~

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ec2a07zufcmtdq01x7r3.gif)
Golang 101: Range
Tags: go, functions
Published: 2021-10-10 08:57:58

Dizi, Kesit ve Harita verilerinden `indis`, `anahtar` ve `değer` çekmek için `for`  döngüsü ile birlikte `range` kullanılır.

```golang
package main

import "fmt"

func main() {

	// Kesitteki Sayıları Toplama
	kesit := []int{1, 2, 3, 4}
	toplam := 0
	for _, sayi := range kesit {
		toplam += sayi
	}
	fmt.Println("Toplam:", toplam)

	// Değerin Indis'ini Bulmak
	for indis, deger := range kesit {
		if deger == 3 {
			fmt.Println("Indis:", indis)
		}
	}

	// Harita'dan Anahtar/Değer Alma
	iller := map[string]string{"m": "mersin", "a": "antalya"}
	for k, v := range iller {
		fmt.Printf("%s -> %s\n", k, v)
	}

	// Sadece Anahtar Verisin Almak
	for k := range iller {
		fmt.Println("Anahtar:", k)
	}
}
```
```
Toplam: 10
Indis: 2
m -> mersin
a -> antalya
Anahtar: m
Anahtar: a
```
[çalıştır!](https://go.dev/play/p/bSXlCCrnK82)

## Kesitteki Sayıları Toplama
```golang
	kesit := []int{1, 2, 3, 4}
	toplam := 0
	for _, sayi := range kesit {
		toplam += sayi
	}
	fmt.Println("Toplam:", toplam)
```
Kesitteki sayıları `range` ile her döngü de sırayla indis (`_`) ve deger (sayi) atamalarını yaparak toplamını buluyoruz. Indis numarasına ihtiyacımız olmadığı için `_` boş tanımlayıcı (*blank identifier*) kullandık.

## Değerin Indis'ini Bulmak
```golang
	for indis, deger := range kesit {
		if deger == 3 {
			fmt.Println("Indis:", indis)
		}
	}
```
Değeri `3` olan değişkenin `indis` değerini bulup yazdırıyoruz.

## Harita'dan Anahtar/Değer Alma
```golang
	iller := map[string]string{"m": "mersin", "a": "antalya"}
	for k, v := range iller {
		fmt.Printf("%s -> %s\n", k, v)
	}
```
Harita dizisinden anahtar ve değeri ekrana yazdırıyoruz.

## Anahtar Verisi Almak
```golang
	for k := range iller {
		fmt.Println("Anahtar:", k)
	}
```
`Range` ile tek değişken verildiğinde map'tan anahtar verisi dönmektedir.
How to Create MySQL Table in PhpMyAdmin | PHP Connect to Database XAMPP
Tags: php, mysql, database, webdev
Published: 2021-10-10 08:23:48

In this post, we will cover how to create a MySQL table in PhpMyAdmin, and then connect to the database using PHP on your localhost. This is a beginner-level tutorial that can be used as an introduction to learning how to work with databases or as a refresher if you already know some of these concepts.

In this tutorial, I will teach you how to create a MySQL table in PhpMyAdmin. This is for beginners! 
The easiest way to do this is by connecting PHP to your database from the XAMPP Control Panel. If you don't have a copy of XAMPP installed on your computer, go ahead and click here: https://www.apachefriends.org/index.html 

**Watch Full Video**
{% youtube -o4sSGZrxvU %}
Day 2 of 100 Days of Code and Scrum: Launching the Apollo Client
Tags: graphql, beginners, 100daysofcode, webdev
Published: 2021-10-10 07:40:43

[Original Challenge Post](https://dev.to/rammina/100-days-of-code-and-scrum-a-new-challenge-24lp)
[Previous Post](https://dev.to/rammina/day-1-of-100-days-of-code-and-scrum-how-to-graphql-1o78)

## Yesterday

I learned the basic structure of GraphQL types, fields, payload, and so on.

## Today

Nothing too crazy because it is a break day. I studied a little bit and planned out what my goals are for this week.

## Weekly Sprint Goals

- prepare for and go through 5 phone screening/interviews at different companies
- learn to use GraphQL and ApolloClient
  - would be happy if I learned how to query data to the client side
  - mutate data
  - learning more is always okay
- get through the howtographql tutorials
- study GraphQL documentation along the way

I mostly focused on learning about GraphQL and ApolloClient imports/initialization.

Here are some of the things I've learned:

### GraphQL

- concept of a GraphQL client, which abstracts away the details of writing infrastructure code and caching from developers
- ApolloClient, Relay, and urql are GraphQL clients
- ApolloProvider, ApolloClient, createHttpLink, InMemoryCache typically are imported when using @apollo/client
- I am still not really sure what they do but I'm going to look them up tomorrow

### Scrum

- Scrum Master role typically has no management power
- Scrum Masters facilitate the Scrum team so that they follow Scrum principles
- They have to do this without any authority
- I guess if I want to be Scrum Master, I'd have to learn how to influence others without using authority/power
- Daily Scrum lasts 15 minutes regardless of the team size

I'm still having a difficulty with getting used to working with the new syntax for GraphQL/ApolloClient.

How is everyone doing in their learning journey? Feel free to chat with me in the comments and/via DM!

### DISCLAIMER

This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
Introduction to 6502 Assembly Language - SPO600
Published: 2021-10-10 06:56:56


6502 is an inexpensive microprocessor that was commonly used in 8 bit hardware back in the 80s. Examples include Atari 2600 and NES. It can display up to 256 colors or 2^(8) at a time. 
```
lda #$00	; set a pointer at $40 to point to $0200
sta $40
lda #$02
sta $41

lda #$05	; set colour to green

ldy #$00	; set index to 0

greenloop:
	sta ($40),y	; set pixel at the address ($40)+Y
	iny		; increment index
	cpy #$20
bne greenloop	; continue until the line is filled

lda #$00	; set a pointer at $40 to point to $0500
sta $42
lda #$05
sta $43

lda #$06	; load blue

ldy #$ff	; set index to ff

blueloop:
	sta ($42),y	; set pixel at address ($42)+Y
	dey		; decrement index
	cpy #$df
bne blueloop	; continue until the line is filled


clc		; clear carry
lda #$07	; load yellow
tax		; put colour in X
ldy #$00	; set counter to 0

yellowloop:
	txa		; put colour in A
	sta ($40),y	; set pixel at the address ($40)+Y

	tya		; add 20 to Y
	adc #$20
	tay
	cpy #$00	; compare Y to 0
	clc		; clear carry
bne yellowloop		; loop until done the page
	inc $41		; increment the page
	lda $41		; get the page
	cmp #$06
bne yellowloop		; loop until done all pages

lda #$1f	; set a pointer at $44 to point to $021f
sta $44
lda #$02
sta $45

clc		; clear carry
lda #$04	; load purple
tax		; put colour in X
ldy #$00	; set counter to 0

purpleloop:
	txa		; put color in A
	sta ($44),y	; set pixel at the address ($44)+Y

	tya		; add 20 to Y
	adc #$20
	tay
	cpy #$00	; compare Y to 0
	clc		; clear carry
bne purpleloop		; loop until done the page
	inc $45		; increment the page
	lda $45		; get the page
	cmp #$06
bne purpleloop		; loop until done all pages
```
To make a green line at the top, I set the stack pointer $40 to the color green. I set the index to 0 and start incrementing the pointer $40 till y is equal to $20(or 32th pixel). 

The blue line at the bottom is similarly programmed as the green line at the top, except the index is initially set at the 255th pixel and decrement index till it reaches $df(or 223th pixel).

For the yellow vertical line on the left, I have to clear the carry flag. TAX transfers the color value of A register to X. Display yellow for every 32 pixels. 

For the purple vertical line on the right, I set a pointer $44 at $1f or the 31st pixel, which is located at the top right corner. Then similar to the yellow line, I display purple for every 32 pixels or $20 added to Y.

Using the Opcode reference to determine the number of machine cycles this program requires, I calculated that it takes around 750 machine cycles, which is 750 microseconds.

I learned how to use the opcodes for this particular assembly language. it was difficult trying to visualize what a horizontal line looks like in this language, but then you realize that each line is 32 pixels and can just display the color for every 32 pixels.
3 Ways to Add CSS to HTML
Tags: html, css, webdev, beginners
Published: 2021-10-10 06:53:36

## 1. Internal
The 1st one is by placing the **`<style>`** tag in the `<head>` or in the `<body>`.
> if you placed in the body make sure it's after the opening **`<body>`** tag, so your styles will run for all the elements in the body.

![Internal Css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suus7whvuoedqbt8q8jd.png)
 
>> This way is not for daily use or for big projects, because the html file will be complicated more and more.

## 2. External
The 2nd is by creating a **CSS** file and link it inside your **HTML** .

In this example we created a CSS file named `style.css` and linked it using the `link` tag. put the path to your css file in the `href`.

![External Css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mq5ul60e7r0q09qdami.png)
 


## 3. Inline
The last way is the inline way. by adding the `style` property inside any HTML tag you want to style.

![Inline Css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9i80lmwz5qulba9q91k.png)
 


> The common used way for daily programming is the **External way**
Divtober Day 10: Organized
Tags: codepen, divtober, css, showdev
Published: 2021-10-10 06:27:30

---
title: Divtober Day 10: Organized
description: A cartoon with the silhouette of a man wearing old-fashioned suit and hat, and holding a gun.
published: true
tags: codepen,divtober,css,showdev
series: divtober
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovnp3xh18gpkdokfvg5g.jpg
---

This has been the most challenging drawing so far. Mainly, because I had a tough time deciding what to draw; and once I picked something, it was not the best choice: loosely related to the topic, too time consuming (especially compared to the other drawings), and it could be created with SVG in a much simpler way... Although I like the result, it is not really worth it on CSS.

Anyway, the drawing is a 1920s-looking gangster (a member of the mafia or **organized** crime):

{% codepen https://codepen.io/alvaromontoro/pen/RwZwZZQ %}

It is [based on this picture from iStockPhoto](https://www.istockphoto.com/vector/gangster-gm679886394-124653611), and it is "responsive" (to the viewport.)
Docker Cheat Sheet - Container Images
Tags: docker, containers, images, bash
Published: 2021-10-10 05:10:04

## Image

An **image** contains the application binaries, application dependencies, metadata about the image and how to run the image.

### Images on Docker Hub

Official images on Docker Hub just have an `<image-name>` unlike others which follow the format `<author-name>/<image-name>`.

### Pull an image:

```bash
# Pulls the latest version
docker pull <image-name>
```

### Pull a specific version of the image:

```bash
docker pull <image-name>:<image-version>
```

### Pull a specific version and distribution of the image:

```bash
docker pull <image-name>:<image-version>-<dist>
```

### Push image changes

To upload changed layers to an image registry:

```bash
docker image push <image-name>
```

**NOTE**: To perform push, we need to login with `docker login`.

### List all images:

```bash
docker image ls
```

## Image layer

Image layers present a series of file system changes as an actual file system.

### View image history

```bash
docker history <image-name>:image-version>
```

Each layer in the image has a unique SHA, so that, if another image has a same version of a layer and the layer exists in the cache, that layer will be re-used, i.e., the rest of the layers in the image are run on top of the cached layer.

> Same layers are not stored more than once on the host system.

## Container layer

Container layer is a read and write layer created on top of the image layer.

When a file on the image is changed as part of the container, the difference in the file is copied over to the container (**copy on write**) without making any changes in the history of the container.

### Inspect image

```bash
# Get JSON metadata about the image
docker inspect <image-name>:<image-version>
```

## Image tags

### Tagging an image

```bash
docker image tag <source-image>:<source-tag> <target-image>:<target-tag>
```

Tags will default to `latest` unless specified.

> `latest` is just a default tag that should be assigned to the newest stable version.

## Build an image

```bash
docker image build -t <image-name> .
```

The `.` will search for the default **Dockerfile**.

> `-t` is a shorthand for `tag`.


<!-- Things that change the least should be at the top and things that change the most should be at the bottom of the Dockerfile -->

<!-- The `-f` command is used to specify a dockerfile, with an alias of `--file` -->

<!-- **WORKDIR** - to change the current working directory in Dockerfiles -->

## Prune commands

Clean up all dangling images:
```bash
docker image prune
```

Clean up everything:
```bash
docker system prune
```

Remove all unused images:
```bash
docker image prune -a
```

View space usage:
```bash
docker system df
```
To Open Device Specific Map in PHP | Laravel
Tags: javascript, php, laravel
Published: 2021-10-10 04:43:59

```
function($row){
 $data = '<a href="https://www.google.com/maps/place/'.$row->address.'" target="_blank">
<a href="https://maps.apple.com/maps?q='.$row->address.'"  target="_blank" > 
'.$row->name.'
</a></a>'; 
return $data;                 
 }
```
What is Serializer and deserializer?
Tags: django
Published: 2021-10-10 04:23:13

Serializing: When we need serializing is when we pass our native data type(python, javascript) into some other format like JSON we need serializng, serializing is process of converting a native data type into JSON type.
WHERE WE USE: In web development we all know that we have two ends backend and frontend . consider, we use Django for backend which the framework is written in Python language and react Js for frontend which the framework written in Javascript language.
we need to pass our data from backend to frontend , in which the backend is python language oriented frontend is javascript language oriented, javascript can't understand python(native data type I mentioned above), so we need to change the data into a format which JS can understand, JS can understand JSON(Javascript Object Notatiom) format. this process is termed as Serializing.

Deserializing is the reverse process of serializing
Cara Menghapus dan Menonaktifkan Akun Instagram
Tags: instagram, socialmedia
Published: 2021-10-10 04:00:04

Asosiasi media sosial tidak semudah mengasah jati diri kita di dunia nyata. Faktanya, menurut survei JAMA Pediatrics, media sosial menemukan bahwa 580.000 anak muda melakukan bunuh diri pada 2007, meningkat menjadi 1,12 juta delapan tahun kemudian.

Karena itulah tim Dewaweb ingin membantu Anda mencari jalan keluar dari media sosial, khususnya Instagram. Artikel ini akan menunjukkan cara menghapus akun Instagram Anda. Bukan hanya satu cara, tapi beberapa cara menghapus akun IG permanen atau menonaktifkan IG sementara.

https://haidiraly.com
https://haidiraly.com/cara-mendapatkan-centang-biru-instagram/
CLI to get your current IP address
Published: 2021-10-10 03:44:02

``` bash
curl ifconfig.co
curl ifconfig.co/json
curl ifconfig.me
curl ifconfig.io
curl wtfismyip.com/text
curl wtfismyip.com/json
curl icanhazip.com
curl icanhazip.com
curl ipinfo.io
curl ipinfo.io/ip
curl checkip.amazonaws.com
curl api.ipify.org
curl ipecho.net/plain
curl whatismyip.akamai.com
curl ident.me

dig +short myip.opendns.com @resolver1.opendns.com
```

REF: <https://www.reddit.com/r/devops/comments/blh7kv/url_to_get_just_an_ip_with_no_garbage/>