teleren/devto huggingface dataset:
Sorting Test
Published: 2021-12-14 04:58:53

**Overview**
For my group's final project we made a sorting test. This presented the user with a question and a number of options that they could sort into the correct order by either dragging or using the up and down arrow buttons.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0zmbmz673u3flymcvhv.png)
 
 
The user was then able to check their answers and reset as necessary. 

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

Here is some of the code that we use to check that the users answers are right.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/borqov0x9zv74yrg811q.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euco3w9058mwn76938bt.png)

One of our tough challenges was getting the up arrow to disable on the top option and the down arrow to disable on the bottom option, then having them enable and disable accordingly when they are moved. We ended up making a separate check function for this and calling it every time an up or down arrow was pressed or an option was dragged.  Here is the code we implemented. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xkt32tz36xs31uerzmk.png)
 
  

**Next steps**
Our group is working on the bonus to have the user be able to switch to and from another language. We are also working on the HAX aspect on the project.
NFTを作ってみた
Tags: solidity, ethereum, hardhat, nft
Published: 2021-12-14 04:50:59

[Solidity](https://docs.soliditylang.org/en/v0.8.10/)とTypeScriptと[Hardhat](https://hardhat.org/)と[nft.storage](https://nft.storage/)と[OpenZeppelin](https://openzeppelin.com/contracts/)を使って、NFTを作成して、[OpenSea](https://opensea.io/)で確認してみました。

---

### ソースコード
https://github.com/web3ten0/hardhat1

---

## .envの作成
`.env` をこのリポジトリのルートに作成して、下記を入力します。

```.env
NFT_STORAGE_API_KEY = *****
METADATA_URI = https://ipfs.io/ipfs/*****/metadata.json
MATIC_TEST_URL=https://rpc-mumbai.maticvigil.com
PRIVATE_KEY_MATIC_TEST=*****
MINT_ADDRESS = 0x*****
```

---

## 画像とmetadata.jsonの作成・アップロード

- hoge.jpgを作成して、このリポジトリのルートに置いておきます。
- [nft.storage](https://nft.storage/)にアカウントを作成して、API KEYを、`.env` の `NFT_STORAGE_API_KEY` に書きます。
- net.storageのgithubにnode.js用の[サンプル](https://github.com/nftstorage/nft.storage/tree/main/packages/client/examples/node.js)がありますので、これを参考に、hoge.jpgをIPFSにアップして、metadata.jsonを作成し、URIを取得します。
- このリポジトリの `scripts/storage.ts` は、上記を参考にしたコードです。下記を実行することで、`storage.ts` が実行されます。

```shell
> npx hardhat run scripts/storage.ts
```

- 実行後に、`https://ipfs.io/ipfs/****/metadata.json` というURLが表示されますので、`.env` の `METADATA_URI` にそのURLをコピペします。

---

## NFTコントラクトの作成
- コントラクトは、[ここ](https://docs.openzeppelin.com/contracts/4.x/erc721)にあるコードをほぼコピペしました。
- `ERC721URIStorage` だと、mint時にtokenURIを個別に指定できますので、ちょうどよいかなと思いました。
- このリポジトリの `contracts/NftStorage.sol` になります。

---

## networkの設定
- 今回は、Polygonのテストネット（mumbai）にデプロイしてみました。
- `hardhat.config.ts`でnetworkの設定ができます。Polygonの設定は[ここ](https://docs.polygon.technology/docs/develop/hardhat/)が参考になります。
- URLとprivate keyが必要なので、`.env`に書いておきます。
  - URLは、下記のように `MATIC_TEST_URL` に書きます。
  - プライベートキーはMetaMaskから取得したりして、下記のように、 `PRIVATE_KEY_MATIC_TEST` に書きます。
  - また、アカウントにはmumbaiのmaticが必要です。ない場合は、[ここ](https://faucet.polygon.technology/)から貰えます。

```.env
MATIC_TEST_URL=https://rpc-mumbai.maticvigil.com
PRIVATE_KEY_MATIC_TEST=*****
```

---

## コントラクトのデプロイとmint

- mint時にNFTを送信するアドレスを、`.env`の`MINT_ADDRESS`に書きます。
- 今回は、`test/deploy-nft-and-mint-test.ts`でデプロイとmintを一緒に実行してみました。
- 下記コマンドを実行すると、Polygonのmumbaiにコントラクトがデプロイされて、その後mintされます。

```shell
> npx hardhat test --network mumbai
```

- [OpenSeaのテストネット](https://testnets.opensea.io/)でNFTを送信したアカウントでログインすると、NFTが表示されました。
How to remove underline in <a href=""> tag. 
Tags: basics, html, css, frontenddeveloper
Published: 2021-12-14 04:41:47

```
<p>Hello</p>
```

Previous Chapter [Chapter 2](https://inform-our-world.github.io/Saqha/CH%202)

Inform Our World [Link here](https://inform-our-world.github.io/)

`<a>` tag, an essential tag for web development. This is the only way (as I thought) to add hyperlinks to website. This tag plays a main role to make a NavBar and that in turn plays an important role in web-development. Many of my website or all of my website have a navbar in turn have a `<a>` tag. 

But there is a problem in `<a>` tag. When you implement it such as 

```
<a href="#">Hello</a>
```


![Underlined hyperlink](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhnpw10wt8vrmtmyu55d.jpg)

Then the output text would have an underline. It is useful because we can distinguish between a hyperlink and a text. But when you want to create your own method of distinguishing, it is very much terrible to look with undrline text.

So, to prevent underline hyperlink, implement the following...

```
<style>
a {
color: /* Choose any */;
text-decoration: none;
}
</style>

<body>
<a href="#">Some Text...</a>
</body>
```


![No Underline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gc2vcu8ix4q08ldc9rj.jpg)

After implementing, the hyperlink will have no underline.

Thanks for Reading 😇
How to install DBD::mysql on CentOS 7?
Tags: perl, mariadb, centos
Published: 2021-12-14 04:41:28

How to install DBD::mysql on <a href="https://en.centos.perlzemi.com/">CentOS</a> 7? DBD::mysql is a <a href="https://en.perlzemi.com/">Perl</a> module to access MySQL or <a href="https://en.mariadb.perlzemi.com/">MariaDB</a>.

<pre>
cpanm DBD::mysql
</pre>

This fails if some MariaDB packages exist. 

You need the following packages.

<pre>
yum install -y MariaDB-devel MariaDB-shared
</pre>
If I could build anything.
Tags: design, blockchain
Published: 2021-12-14 04:36:43

#What would I build?

As I have grown as a designer and developer throughout my academic years, I have had a multitude of ideas for apps and devices that pop into my head, but recently I have been focused on building apps with blockchain technology.

Cryptocurrency was something I became interested in back in 2018, and I have continued to learn more about it as it has grown. What I didn't realize until recently was the potential to create applications that can run on blockchain technology. I am not very educated on the subject currently, but from what I understand, there is a goal to create a decentralized P2P network that would end up turning into the Web 3.0. There is a protocol out there right now that allows for developers to code in commonly used languages that could then be converted to blockchain, but I am not sure how it works. I don't have an exact idea for an application at the moment, but I think at the current stage of blockchain that anything can be developed. I would maybe focus on building a fitness related application that is very social media focused so that the growing fitness industry could have its own social space, and connect people with similar interests.

#With no concerns, what would I focus on in my future?

If I had absolutely no concerns related to time or money, I would focus all of my time into building alternate and virtual reality applications and devices. I think that VR/AR can be strongly focused around creating more immersive education for students, but could also be targeted to other niches such as the fitness industry. I am really passionate about fitness (CrossFit especially), and I think AR devices have the potential to enhance fitness in real time. For example, if the user could see data such as burned calories, heart rate, and maybe even time intervals while they are completing their workout that is visualized on a glasses lens or in a type of hologram, it could be really beneficial. Professional athletes could use this type of technology in game to view play calls in the case of football, or keep track of the score without having to look up at the scoreboard. 

I think there is so much potential with AR/VR technology, and the only real place I see it being used regularly is in video games. I don't think that full immersion is required for any other use than gaming, but even education could be made much more interactive if students are able to experience historical events like the world wars, elections, and the world millions of years ago in an VR space. There is so much potential with AR/VR products that I don't have a set idea of which route I would take, but I know there are plenty of potential ideas to approach if I ever enter this technology space.
The technology I'd like to build
Published: 2021-12-14 04:28:03

If I could build technology of any kind, I would like to build an accessible sort of AI technology that would collect data about a person for the entirety of their lifetime, store their memories, and possibly be able to simulate them for friends or family after that being has passed. This technology would basically immortalize a person. Although the concept immortalizing a person might be problematic as it may inhibit people from being able to properly grieve, it would preserve data, like memories, for families of the passed individual. This technology would also allow families to have as much data and information about their family tree as possible. This technology would also raise many privacy concerns, but I'm going to pretend that those don't exist for the purposes of this assignment.

I, personally, would've used this technology to learn about experiences that my grandparents went through during the 1900's, as they were alive during many historical events. Since they are no longer living, I find that receiving anecdotes of their experiences from my parents doesn't feel as complete. If there was some sort of database I could use to access their specific experiences with as much detail as possible, I'd have much more clarity in my family's history. As someone who was adopted as a baby, I would also use this kind of technology to learn more about my biological family. Being able to access this type of data would keep me informed about important things like my genetic medical history.

For others, this technology could also potentially be used to store memories of individuals suffering from Alzheimer's or Dementia. That way their memories can be passed down to future generations. 

This invention would mainly consist of data collection. The simulation aspect of the technology would be heavily based off of current strides being taken in the development of AI. 

If money and time were no concern, I would like to take the skills I've assembled over the course of my lifetime and dedicate them to helping those who are less fortunate, less educated, and in conditions of inferior health. I value humanitarian efforts and would try to do anything in my bandwidth to assist others and try to give them a more comfortable life like what I am fortunate enough to have. I am still trying to find a way I can use my background in tech and apply it to this goal of mine. The field of HCDD would be the closest potential avenue for me to reach this goal, as I could support the efforts to make technology easier to use for those who are disabled. I am continuing to explore my options.

Week 11 blog post 9
Finale: Blog 10
Published: 2021-12-14 04:22:19


The last project in our IST 402 class was a coding assignment that allowed us to explore HAX the Web by choosing an open ended issue. My class partner and I chose to create a fully functional trading card that uses HAX to edit values. Below is an image of the card we are recreating. 


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

At this point of our project, this is how our cards look. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyp8tbunfrep68nxddua.png)
 
We have an alignment issue with the Agile stat row and the stats do not appear. 

What I am most proud of is seeing all the files working together. We used map array functions and slot elements in order to create the data and it was nice figuring out how we were able to see all of it coming together. 

The main difficulty this entire semester was figuring out how to work github commands. Our NPM did not always run smoothly and my partner and I were not used to pushing changes so during this project, we made the mistake of making too many changes (300+) on one compute and the changes would not push onto Github. We still have to figure out how to upload all the changes or upload a new repository for it. This is the current problem we are facing.

To access our project on Github: https://github.com/IST402/pj3
Github Pro and Repit Hacker for FREE
Tags: github, replit, git, student
Published: 2021-12-14 03:53:28

Yes You Heard right "Github Pro and Repit Hacker for FREE"
----
Before reading the POST read this :- This Offer is Only for students, If you are not student now , you can stop reading this post now.
----
**GITHUB PRO BENEFITS**

In addition to the features available with GitHub Free for user accounts, GitHub Pro includes:

- GitHub Support via email
- 3,000 GitHub Actions minutes
- 2GB GitHub Packages storage
- Advanced tools and insights in private repositories:
- - Required pull request reviewers
- - Multiple pull request reviewers
- - Auto-linked references
- - GitHub Pages
- - Wikis
- - Protected branches
- - Code owners
- - Repository insights graphs: Pulse, contributors, traffic, commits, code frequency, network, and forks

**GITHUB STUDENT DEVELOPER PACK**
- [GitHub Pro](https://docs.github.com/en/github/getting-started-with-github/githubs-products#github-pro) while you are a student
- Valuable [GitHub Student Developer Pack](https://education.github.com/pack) partner offers (this is what we need for REPLIT HACKER )
- [GitHub Campus Expert training](https://education.github.com/students/experts) for qualified applicants

Go To Github EDU site :- [here](https://education.github.com/benefits)
and follow steps:- 

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

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

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

Fill all the Required fields and Wait for sometime, you will get a Email from Github about Approval or Decline
If it was Rejected, you can try to fill it again as many times as you want.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24knmuj6n2a20ds1x1qu.png) 
----
To Get **REPLIT HACKER RANK FOR FREE** Just Login it with your github account
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlioxzpj8u0m149m7873.png)
and that's it
Thanks For reading ...
Slot Composition
Published: 2021-12-14 03:51:50

We used slots when creating our learning cards for project 2. One example of slotting we used is the content for the card getting passed through our frame and into our scaffold of our final card. Here is a code snippet of the slots we used for our card:

```
render() {
    return html`
      <card-frame>
        <card-header slot="banner" type="${this.type}">
          <h1
            slot="header"
            aria-label="Main header"
            style="font-family: 'Open Sans', sans-serif; font-weight: 300;"
          >
            <slot name="header">${this.heading}</slot>
          </h1>
          <h2
            slot="subheader"
            aria-label="Sub Header"
            style='font-family: "Open Sans", sans-serif; font-weight: 500;'
          >
            <slot name="subheader">${this.subheading}</slot>
          </h2>
        </card-header>
        <toggle-content
          style="margin-right: 5em; min-height: 40px; display: flex;"
          slot="content"
        >
          <slot></slot>
        </toggle-content>
      </card-frame>
    `;
  }
```

As you can see, there are slots allocated for the header, sub-header, as well as content. Each slot contains the font, font weight, and text size depending on the specific portion of the card frame. We used slotting to pass the header, icon, and frame with content to the final card.

Here is a link to our repo for LearningCard: https://github.com/pvd5206/penstat-project2

Week 9 blog post 8
npm start Fatal Error Workaround
Tags: react, beginners, tutorial
Published: 2021-12-14 03:43:57

I was trying out [Udacity's React Nanodegree](https://www.udacity.com/course/react-nanodegree--nd019) and found out (the hard way) that there are some things that Apple M1 users may run into.

In short, there is this error you'll keep running into when you try to run `npm start`:

`FATAL ERROR: wasm code commit Allocation failed - process out of memory`

First thing: make sure Node is updated on your machine. You can check that by simply running `node` in Terminal. Make sure it's higher than version 12.

Next, `cd` into your project folder, and then run 

```nvm install node``` 

This will ensure you have the latest version of Node specifically for your project, especially if you git clone'd the project straight from the linked Udacity repo.

If all goes to plan, `npm start` should compile successfully!

---

Let me know in the comments if this worked (or not) for you!
Comparing different Boilerplates
Published: 2021-12-14 03:34:46

Across all boilerplates, there will be the same code structure of having README, package.json, node_modules, src, etc. These boilerplates are also all component-based. Differences between boilerplates range from what kind of DOM is being used, whether JavaScript is used as the programming language or something else, and the scalability.

For the duration of the course, I used the React boilerplate, which I found very easy to install and use. It was a beginner-friendly boiler plate, and I was able to understand how to make components pretty quickly. The React boiler plate has less of a steep learning curve than some of the other boilerplates I looked into. For these reasons, I would suggest the react boilerplate to someone wanting to start building an app. 

I pulled my boilerplate from here: https://github.com/react-boilerplate/react-boilerplate
Here is my organization's repo: https://github.com/PenStat/PenStat-CTA

Week 3 blog post 4
Get form data and POST with JavaScript(jQuery)
Tags: javascript, jquery, tutorial, productivity
Published: 2021-12-14 03:30:35

### Intro
This article is a **note** of what I found and applied to fetch data on a form and send it in jquery with the POST method.

### Try
get form data

```
var fd = new FormData(document.getElementById('filter-data'))
// if you want to add data use append
fd.append('limit',limit);
fd.append('start',start);
```

POST data with jquery

```
$.ajax({
	url: "your_url",
	method: "POST",
	data: fd,
	cache: false,
	contentType: false,
	processData: false,
	success: function(data){
		// action success
	}
})
```
**like if you find this useful**
ParseJS now has a ReadMe with helpful info about the library.
Tags: github, readme, javascript
Published: 2021-12-14 03:24:31

[ParseJS](https://github.com/CalinZBaenen/ParseJS/tree/main) now has a ReadMe in the branch [in the latest commit](https://github.com/CalinZBaenen/ParseJS/commit/8c840dd57c7fd846622dacd64a9cb3175885e393).

NOTE: This does **NOT** apply to ParseTS (the TypeScript counterpart to ParseJS, the JavaScript library for tokenization), as there isn't much difference to note between the two versions of the library.
How to solve captcha with selenium webdriver using python
Tags: python, automation, programming, tutorial
Published: 2021-12-14 03:19:03

Well that quite easy, let's learn to solve captcha with selenium webdriver using python.

here's how you can automate captcha with selenium python:

#### How to solve captcha with selenium python

1. Create your bot,
2. Come into the captcha solving section
3. Register or sign in at [2captcha.com](http://2captcha.com/?from=12058574 "solve selenium bots")
4. Get some credits
5. Install TwoCpatcha: **`pip install TwoCaptcha`**
6. Try below codes

Try this code in your web document:

```
textarea = driver.find_element_by_id('g-recaptcha-response')
solution = solve()
code = solution['code']
driver.execute_script(f"var ele=arguments[0]; ele.innerHTML = '{code}';", textarea)
time.sleep(1) # waiting is mandatory
textarea = driver.find_element_by_xpath('//*[@id="login-btn"]/button').click()
```

Here's the `solve()` function:

```
def solve():
    import sys
    from twocaptcha import TwoCaptcha
    result = None
    
    sitekey = '<your_site_key_from_two_captcha>'
    api_key = '<your_api_key_from_two_captcha>'
    solver = TwoCaptcha(api_key)
    try:
        result = solver.recaptcha(
            sitekey=sitekey,
            url='https://www.deezer.com/en/login'
        )

    except Exception as e:
        sys.exit(e)

    return result
```
And for the site key, here's how you can [get the sitekey to solve the captcha](https://webmatrices.com/d/513-how-to-handle-captcha-in-selenium-webdriver-using-python/9).

Or [Hire Me](https://fvrr.co/3IUQwQy) to do it.

Have a good day, Pythoning!
Animate a point along a route
Tags: codepen
Published: 2021-12-14 03:08:02

<p>Use <a href="http://turfjs.org/">Turf</a> to smoothly animate a point along the distance of a line.</p>

<p>See the example: <a href="https://docs.mapbox.com//mapbox-gl-js/example/animate-point-along-route/">https://docs.mapbox.com//mapbox-gl-js/example/animate-point-along-route/</a></p>

{% codepen https://codepen.io/IrisS17/pen/RwaavxV %}
Antalya Köpek Eğitimi Merkezi Fiyatları
Tags: beginners, html, tutorial, webdev
Published: 2021-12-14 03:02:23

Antalya köpek eğitimi konusunda son yıllarda gerçekten de çok gelişmiş bir il haline gelmiştir. [Antalya köpek eğitim merkezi](https://www.antalyadogclub.com/) olarak en çok tercih edilen firmalar mevcut. Önemli olan köpeğinizi nasıl eğitebileceğinizi öğrenmeniz ve ona davranışlarınızın gerçekten önemli olduğunu anımsamanız. Antalya köpek eğitimi merkezi olarak en iyi [köpek eğitmeni](https://muratgungork9.com/) olan Murat GÜNGÖR ile online köpek eğitimi desteği alıp bilgi alabilirsiniz. Antalya köpek eğitmeni olarak uzaktan destek sağlayıp köpek eğitim merkezi gibi tesislere bile gitmenize gerek kalmamaktadır.
Kedi ve Köpek Kuaförü İstanbul
Tags: productivity, webdev, programming, javascript
Published: 2021-12-14 02:57:04

[Kedi kuaförü](https://petkoleji.com/pet-kuafor/) olarak hizmet veren bir çok pet kuaför mevcut ancak anestezisiz kedi traşı hizmeti sunan çok az işletme mevcut. Kedi traş etmek oldukça ustalık ve profesyonellik isteyen bir iştir. Sebebi ise hayvan strese sokulur ise travma yaratabilir. O yüzden de işi uzmanlara bırakmak her zaman en doğru olanıdır. Kedi traşı fiyatları ise cinse göre değişkenlik göstermez. Standart fiyatlandırmalar alabilirsiniz. Kedi traşı fiyatı ortalama 200 TL'den başlamaktadır.
[Köpek kuaförü](https://petkoleji.com/pet-kuafor/) seçerken ise kesinlikle dikkat etmeniz gerekmektedir. Sebebi ise işinde uzman ve canlıdan anlayan pet kuaför ekipleri ile traş esnasında kuracağı iletişim gerçekten çok önemlidir. Köpeklere kötü davranan bir köpek kuaförü meslek sahibinin köpeğinize travma oluşturacağına emin olabilirsiniz. Köpek kuaförü fiyatları ebatlarına ve cinslerine göre değişkenlik göstermektedir. Sebebi ise tüy yapılarına ve işlemin uzun ya da kısa sürmesine bağlı olarak değişkenlik gösterebilir. Ancak ortalama köpek traşı fiyatı 200 TL ve 400 TL arasında bir ücret ıskalası arasında belirlenmektedir.
How To Fix The Archive Is Either In Unknown Format Or Damaged
Published: 2021-12-14 02:32:31

How To Fix The Archive Is Either In Unknown Format Or Damaged – WinRAR is the best decompression software in the world. It also helps you compress files to reduce a load of space, saving more storage space.

However, compressed files after a period of inactivity can cause errors, most commonly “Winrar error the archive is either in unknown format or damaged“. So in the following article, Ticswipe.com will guide you in detail on how to fix it.

Learn more: https://ticswipe.com/fix-the-archive-is-either-in-unknown-format-or-damaged