teleren/devto huggingface dataset:
***New Alert: Uses Icons in React Project!
Published: 2022-02-27 15:59:58

After writing the post on how to implement using f[ontaweme icons (free version) in a react project](https://dev.to/mrpaulishaili/simplified-implementing-fontawesome-free-version-into-a-react-project-4d33), I have been using only this icon source in many of my react project, which at times is limited.

Today, I found a new, easier and more efficient way of actually using more icon sources in a react project.

> Install **react-icons** package
```
npm install react-icons --save
```

> Search here for icons to use:
https://react-icons.github.io/react-icons/search?

.

> 
Import found icon for use:
```
import { BiArrowBack } from 'react-icons/bi';
```
`In this instance, BiArrowBack is being imported, where 'bi' is the icon source.`

> Call imported icon component for use:
```
<BiArrowBack />
```

Voila we've successfully used the react-icons package in our project.

The great thing about this method has compared to the [previous one](https://dev.to/mrpaulishaili/simplified-implementing-fontawesome-free-version-into-a-react-project-4d33url) is that different icons can be imported from different sources, as far as their sources are recognized when importing, as in this article case, 'bi' is the source of our imported icon `import { BiArrowBack } from 'react-icons/bi';
`


## ** Bonus tip - 1

svg icons can also be used in a React project without installing any react-icons or other icon packages. This is achieved by having the svg icons saved in a location of your src folder on your local machine and importing them as individual ReactComponent. 

## ** Bonus tip - 2

If using created / customized icons from figma board, it's important that this icons are exported as svgs so that their states and charateristics can be manipulated, folowing tip - 1.

Do let's know if more light shoud be shed on this.


**Stay Blessed,✌ until next time.**
`Mr Paul Ishaili C.`
Day 1 - Advent of Code 2021 ด้วย Clojure
Tags: clojure
Published: 2022-02-27 15:50:52

---
title: Day 1 - Advent of Code 2021 ด้วย Clojure
published: true
description: ใช้ Clojure แก้โจทย์ Advent of Code 2021 Day 1
tags: clojure
//cover_image: https://direct_url_to_image.jpg
---

## ในโพสต์นี้จะลองใช้ Clojure แก้โจทย์ของ [Advent of Code ปี 2021 Day 1](https://adventofcode.com/2021/day/1)

### โจทย์ (part 1)
โจทย์ต้องการทราบว่าจำนวนครั้งที่ค่าเพิ่มขึ้น มีกี่ครั้ง โดยจะมี input มาให้ (ตั้งชื่อไว้ว่า input.txt) จากตัวอย่างในรูปคือ เพิ่มขึ้น `7` ครั้ง
![ตัวอย่างคำตอบคือ 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3pa99vi16fe2usocx8e.png)

1. อันดับแรก อ่าน input และแปลงให้เป็นตัวเลข, เพราะอ่านมาจาก text ไฟล์
```clojure
(def input-part-1
  (map #(Integer/parseInt %) 
    (clojure.string/split-lines 
      (slurp "input.txt")))) 
```

2. เทียบค่าในแต่ละคู่ว่าเพิ่มขึ้นหรือลดลง ซึ่งจากในตัวอย่างในรูป จะเทียบไปทีละค่า, เราสามารถใช้ [`partition`](https://clojuredocs.org/clojure.core/partition) จับคู่ในแบบที่เราต้องการได้
```clojure
(partition 2 1 (range 10))
; ((0 1) (1 2) (2 3) (3 4) (4 5) (5 6) (6 7) (7 8) (8 9))
```
เพราะฉะนั้น โค้ดในส่วนนี้คือ
```clojure
(partition 2 1 input-part-1)
```
ทำการเปรียบเทียบค่า โดยใช้ `<` เพื่อเทียบว่าค่าของตัวแรกน้อยกว่าตัวที่สองในคู่หรือไม่ โดยใช้ร่วมกับ `map` และ `apply`
```clojure
(map #(apply < %)
  (partition 2 1 input-part-1))
; ผลลัพธ์จะได้ (true false true false ....)
```

3. จากนั้น นับจำนวนของค่า `true` ก็จะได้คำตอบของ part 1
```clojure
(count
  (filter identity (map #(apply < %)
    (partition 2 1 input-part-1))))
```
เสร็จแล้วสำหรับ part 1


### โจทย์ (part 2)
โจทย์ต้องการทราบจำนวนครั้งที่ค่าเพิ่มขึ้นเหมือนเดิม แต่ที่ต่างออกไปคือมี sliding window, โจทย์กำหนดมาคือ sliding window เท่ากับ 3 แปลว่า ต้องคำนวนค่าตัวเลขสามตัว แล้วนำมารวมกัน ทำแบบนี้ไปจนครบ แล้วจึงนำมาเปรียบเทียบกัน ดังในตัวอย่าง

![แสดงค่า sliding window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzskclf7mgx9b40hwpr6.png)

ค่าของ A ได้มาจากค่าที่ 1-3, B ได้มาจาก 2-4 ,C ... ไปจนครบ input
![ตัวอย่างคำตอบคือ 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao8dtdtkm4530dt830k5.png)

1. เราสามารถใช้ [`partition`](https://clojuredocs.org/clojure.core/partition) ได้เช่นเดิม ต่างกันที่จำนวนในแต่ละกลุ่ม (กลุ่มละ 3 ค่า) เช่น
```clojure
(partition 3 1 [199 200 208 210 200 207 240 269 260 263])
; ((199 200 208) (200 208 210) (208 210 200) (210 200 207) (200 207 240) (207 240 269) (240 269 260) (269 260 263))

```

2. เมื่อได้กลุ่มของค่ามาแล้ว ในแต่ละกลุ่มก็เอาค่าเหล่านั้นมาบวกกัน

```clojure
(map #(reduce + %)
  (partition 3 1 [199 200 208 210 200 207 240 269 260 263]))
; (607 618 618 617 647 716 769 792)
```

3. จากตรงนี้เราก็สามารถใช้วิธีของ part 1 ในการหาคำตอบได้แล้ว
```clojure
(count
  (filter identity (map #(apply < %)
    (partition 2 1 
      (map #(reduce + %)
        (partition 3 1 [199 200 208 210 200 207 240 269 260 263]))))))
; 5
```
ไม่รู้ว่าจะมี Day 2 รึเปล่านะ เพราะตอนนี้ทำได้แค่ Day 1 น่ะ :P
Learn coding for free!
Tags: codenewbie, programming, beginners, career
Published: 2022-02-27 15:44:44

_Ohhh.. there are a lot of articles showing the best free coding courses online.. and see - here's another one_ oof.

I'll make sure that this is not boring for you. It is based on my experience :)

## 1. [Khan Academy](https://www.khanacademy.org/computing/computer-programming)
So, here is from where I started learning how to code.
It has very nice introductory courses but not a very good place to go if you are familiar with the basics.

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

## 2. [Scrimba](https://scrimba.com/) 
This website doesn't offer all courses free but there are a lot of well-made courses that can be accessed freely. Good to make a start as well as enhancement.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98840rjshwsbju3w0n58.png)

## 3. [freeCodeCamp](https://freecodecamp.com/)
Hmm.. must have heard in many articles plus it already has free in its name. Actually, it is pretty pretty good to learn coding. Pretty good to enhance or to make a start.

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

## 4. [MIT OpenCourseWare courses](https://ocw.mit.edu/courses/intro-programming/)
Who'd not like to learn from the lectures given at the world's one of the best universities - MIT? Yes, you are right - at MIT OCW you can find introductory and even follow-ups courses for programming.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qv3xz8794id674qxvb2.png)

Hopefully this helps!
Thank You :)
Short Unique IDs for dynamoDB?
Tags: aws, dynamodb, discuss
Published: 2022-02-27 15:07:13

Hey, so I'm working on a backend where we are using dynamoDB to store tasks, appointments, etc. Currently I'm using UUIDs as the primary key but we also want to display the task or orders IDs to the users on frontend and having a 32-length ID is not really desirable, it's just too big. I wanted to know what all alternative efficient methods are there to generate short random non-clashing or maybe incrementing (like in SQL) IDs. And we're using golang on backend, if that helps.
This week in Flutter #43
Tags: flutter, dart, news
Published: 2022-02-27 14:24:25

The [results](https://medium.com/@jayoung.lee/q4-2021-user-survey-results-about-null-safety-ecosystem-text-editing-and-mobile-development-5d33341954e9) from the latest **quarterly Flutter survey** are out. They focused on:

- Null safety, which is, as predicted, makes the majority of developers happy;
- Ecosystem, which satisfactory rate is increasing;
- Text editing, a subject the Flutter team is planning to improve, both in code and with examples;
- Mobile development.

I am not surprised to see that Xcode (for iOS dev) and Gradle (for Android dev) are problematic to deal with.
That is also what I experienced while working with Flutter.

What is stopping you from using Flutter more effectively?
Let me know in the [comment](https://ishouldgotosleep.com/news/this-week-in-flutter-43/#comments) section.

<small>- Michele Volpato</small>

## Development 🧑‍💻

### 🔗 [Cleaner Flutter Vol. 9: Injecting dependencies](https://marcossevilla.dev/cleaner-flutter-vol-9)

A nice explanation of **dependency injection** in Flutter by [Marcos Sevilla](https://twitter.com/MarcosJSevilla),
with some code examples, and more detailed information about when using `flutter_bloc` and Riverpod. Followed
by [Cleaner Flutter Vol. 10: State and UI](https://marcossevilla.dev/cleaner-flutter-vol-10) which is a very
nice reading about state management. I suggest you have a look at the entire "Cleaner Flutter" series.

## Tools 🛠

### 🔗 [How to distribute Flutter Desktop app binaries using GitHub Actions](https://angeloavv.medium.com/how-to-distribute-flutter-desktop-app-binaries-using-github-actions-f8d0f9be4d6b)

In this article, [Angelo Cassano](https://angelocassano.it/) describes the steps he took to create
**executables** for macOS, Windows, and Linux using GitHub Actions for
his [MacRecoveryX](https://github.com/AngeloAvv/MacRecoveryX) Flutter app.

### 🔗 [VSCode Shortcuts, Extensions & Settings for Flutter Development](https://codewithandrea.com/articles/vscode-shortcuts-extensions-settings-flutter-development/)

[...]

Read the rest on [my website](https://ishouldgotosleep.com/news/this-week-in-flutter-43/).

[Join the Flutter and Dart newsletter](https://ishouldgotosleep.com/subscribe-to-the-newsletter-devto/) and receive it weekly in your inbox.
Blockchain Game Finance and DeFi with NFT
Tags: nft, defi, gamefi, polygon
Published: 2022-02-27 14:43:30

The blockchain community and especially DeFi space have gained tremendous momentum since last year. At the same time, online NFT marketplaces are experiencing enormous traffic as many NFT fans are finding creative ways to convert physical and tangible assets into Non-fungible ones, as seen in the huge success of the Metaverse project. As such, the market cap of promising NFT projects are on the rise.

##Market Cap

As a whole, the current two major trends in the IT industry consist of gaming and crypto where their online revenue and market cap are increasing on a daily basis.

##Online Game Market

The revenue from virtual games and online entertainment will grow from $180B in 2020 to $400B in 2025 (majority of growth goes to in-game spending)

##Crypto and NFT Market

In Q3 2021 alone the total crypto fundraising was $8.2B, out of which $1.2B went to Web3 and NFT. Also, fundraising in NFT games overshadows others in Q3 2021 by $1B.

#NFT- New Promise of Game Finance

While current trends show a magnificent success of NFTs, many analysts believe that NFT has not yet fully tapped its potential. Indeed, we are at a very early stage of seeing how NFT is going to impact DeFi and more specifically game finance. Motivated by untapped market opportunity, RealBig is to harness the real power of NFT in game finance where NFT assets are used as an instrument for financial investment similar to traditional stock or bonds. In its business model, not only NFT owners can sell their assets to the secondary market, but also they can collect dividends on a monthly basis. As a matter of fact, with finite supply of NFT in its system and increasing value of NFT as result of platform activities will return an exponential increase in the value of NFT in such a way that an NFT asset can be treated as an independent financial instrument.

##How RealBig NFT Works

[RealBig](https://www.realbig.world/) is a platform that offers a variety of lottery prize games. In addition to prize games, it offers NFT game finance via a virtual league. Its virtual league consists of 5 clubs (each has 4 teams of different player sizes). In total, there will be 70 players where each player is represented as an NFT asset. The system runs competitions among teams within a club and across different clubs and anytime a player wins, its owner receives 20% of prize value as its dividend. Read our White Paper to learn more. Watch below video to learn more:
https://youtu.be/je0fXjIZniY
Million website links
Published: 2022-02-27 14:43:06

I created this small script to collect one million website URLs.

Code is available on [Github](https://github.com/anuragrana/Python-Scripts) too.

**Script:**

Install the dependencies.
`pip install requests, BeautifulSoup`

Activate the virtual environment and run the code.
`python one_million_websites.py`

**Complete Code:**

> `import requests
> from bs4 import BeautifulSoup
> import sys
> import time
> headers = {
>     "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
>     "Accept-Language": "en-GB,en-US;q=0.9,en;q=0.8",
>     "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/64.0.3282.167 Chrome/64.0.3282.167 Safari/537.36"
> }
> site_link_count = 0
> for i in range(1, 201):
>     url = "http://websitelists.in/website-list-" + str(i) + ".html"
>     response = requests.get(url, headers = headers)
>     if response.status_code != 200:
>         print(url + str(response.status_code))
>         continue
>     soup = BeautifulSoup(response.text, 'lxml')
>     sites = soup.find_all("td",{"class": "web_width"})
>     links = ""
>     for site in sites:
>         site = site.find("a")["href"]
>         links += site + "\n"
>         site_link_count += 1
>     with open("one_million_websites.txt", "a") as f:
>         f.write(links)
>     print(str(site_link_count) + " links found")
>     time.sleep(1)

scraping links https://bestbluegreenalgae.com/. If you inspect the webpage, you can see anchor tag inside td tag with class web_width.
`
Flipping Card in CSS
Tags: css, webdev, beginners, tutorial
Published: 2022-02-27 14:22:32

### Hello Folks 👋
What's up friends, this is **SnowBit** here. I am a young passionate and self-taught frontend web developer and have an intention to become a successful developer.

Today, I am here with a cool CSS tutorial and you'll love it. Let's get started 🚀

---
{% embed https://codepen.io/codewithsnowbit/pen/BamqBLL %}

- **Create a card**
```html
<div class="card">
  <div class="card-side front">
    <div>Front Side</div>
  </div>
  <div class="card-side back">
    <div>Back Side</div>
  </div>
</div>
```

- It's time to style them

```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,400&display=swap');
body{
  font-family: "Poppins", sans-serif;
}
.card {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;
}

.card-side {
  height: 35rem;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  padding:2rem;
  color: white
}

.card-side.back {
  transform: rotateY(-180deg);
  background-color: #4158D0;
  background-image: linear-gradient(to right, rgb(236, 72, 153), rgb(239, 68, 68), rgb(234, 179, 8))
}

.card-side.front {
  background-color: #0093E9;
  background-image: linear-gradient(to right, rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234))
}

.card:hover .card-side.front {
  transform: rotateY(180deg);
}

.card:hover .card-side.back {
  transform: rotateY(0deg);
}
```
---
You made it 🌟

Check out the pen - https://codepen.io/codewithsnowbit/pen/BamqBLL

So, this was it for this article. I hope you learnt something new and enjoy reading. Stay tuned for the next article. 

Let's connect on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)

### 🌏 Let's connect
- [GitHub](https://github.com/codewithsnowbit)
- [Twitter](https://twitter.com/codewithsnowbit)
- [YouTube](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber)

[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7242fho13cwcxlh8jutn.png)](https://www.buymeacoffee.com/codewithsnowbit)
Understanding SSH and why you should use it
Tags: ssh, linux, github
Published: 2022-02-27 13:54:12

## What is SSH

Computers communicating over a network like and intranet or internet use TCP (transmission control protocol), think of this like the post-office which is the standard way to mail from point a to point b. So each computer on a network has an IP address and can send message to each messages to each other using URIs.

URIs follow the following pattern (in the same way our personal home addresses do)

```
protocol://username:password@host:port/path
```

like an internet url

```
https:///www.somewebsite.com/somefile.html
```

or a database uri string

```
postgresql://user:password@127.0.0.1:5432/database_name
```

Although sometimes you are connecting to another computer to give it demands directly instead of through intermediary server like a web server or database server. So the computer will need higher security before allowing any external computer to send it commands to run, and this is where SSH comes in.

SSH (Secure Shell) allows you to connect to a shell session on a remote computer securely using an encrypted key. This is also often used for logging into thing like github.

## How it Works

On the client computer you need to create an SSH key, this is usually done in a hidden .ssh directory.

```bash
# Change to .ssh directory
cd ~/.ssh
# Create an ssh key
ssh-keygen
```

You can just accept all the default options and it should create two files. (default name id_rsa)

```
id_rsa id_rsa.pub
```

the .pub file is the public key, this needs to be shared with the server you are going to connect to, we can get its contents with the following command.

```
cat id_rsa.pub
```

Then you can copy and paste the output to wherever you need (like github.com or onto a virtual server you get from AWS). The other file has your secret key. Now when you try to connect to the server it will see if your computer has the secret key to match on of the public keys that has been shared with it, if so, your in! This can be convenient and secure since there is no need for username or a password (unless you included a passcode on your key) but also makes sure only computers that have the secret key can login (which is why you should never share your private key).
STUPID ERROR: Why I can't see query results, pgAdmin4, postgreSQL
Published: 2022-02-27 13:45:55


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

I was trying to select all records from the table 'customer'.

I thought I can use the CTRL+ENTER key to execute the query, which effectly equals the B icon in the picture(I thought so).
Didn't work.

I quickly concluded that B icon wasn't relevant, then I assume the A icon could execute the query. I clicked it but no result was returned(I hadn't hover enough time over the icon so I fail to notice the icon means 'query tool') 
Didn't work

Somehow, I tried to be patient and hover very long enough over each possible icon one by one, and I found that the B icon is query execution button, and it's shortcut is F5
Worked


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

Another stupid error, stupid day.
Exciting XRPL Metaverse project seeking Developers
Published: 2022-02-27 13:44:56

Hi guys!

XRMOON is seeking team members to join the project. An exciting moon metaverse developed on XRPL with unlimited potential. 

Phase 1 
Nft minting/marketplace site

Phase 2 
Full metaverse game for the crypto & gaming community 

Please get intouch if you are interested
I made a portfolio website using only HTML without any Styles. This is what I learned
Published: 2022-02-27 13:22:18

I made a portfolio website using only HTML without any styles. The intention was to push the limits of pure HTML and see its capabilities, and it was worth it. These are some of the things I’ve learned during the process.   

![the html portfolio](https://miro.medium.com/max/542/1*6MnrGagtCj1Bb6_xG-2Z0Q.png)   

## 1.`<body>` tag has some styling properties

The body tag has some styling properties, but most of them are depreciated. There are attributes to change background color, text color, background image, hyperlink colors, and margin. But it is advisable to use CSS properties to achieve that as these are depreciated.

## 2.`<details>` can be used as a drop down element.

the `<details>` element is a widget that has an ‘open’ state which can be used to store information. Label can be provided inside the `<summary>` tag.
When the user clicks on the widget or focuses it then presses the space bar, it opens, revealing its contents.   
By default when closed, the widget only displays the disclosure triangle and summary. When open, it expands to display the details contained within.

```html
<details>
    <summary>Data</summary>
    <p>the data to display</p>
</details>
```

## 3.`target=’_blank’` and `target=’blank’`

The `<a>` has a href property which can be used to create hyperlinks. It also has a target property that decides where the linked URL has to be displayed. The keywords are :
 - `_self`: the current browsing context. (Default)
 - `_blank`: usually a new tab, but users can configure browsers to open a new window instead.
 - `_parent`: the parent browsing context of the current one. If no parent, behaves as `_self`.
 - `_top`: the topmost browsing context (the "highest" context that's an ancestor of the current one).  
 

Another keyword is `blank` where the URL will be displayed in a new tab, but on clicking again it will be reloaded in the same tab unlike _blank where new tabs are opened every time.

______

The website is hosted over [here](http://htmlportfolio.abhinavvp.com/)
Paracetamol.js💊| #66: Explica este código JavaScript
Tags: beginners, webdev, spanish
Published: 2022-02-27 13:21:29

## **Explica este código JavaScript**

```js
const getName = (obj) => {
  obj.name ??= "Sin Nombre";
  return obj;
}
console.log(getName({}))
```

- A. `undefined`
- B. `{}`
- C. `{ name:"Sin Nombre" }`
- D. Ninguno de los anteriores

Respuesta en el primer comentario.

---