teleren/devto huggingface dataset:
Mint an NFT Easily without Paying Fee
Tags: nft, nextjs, api
Published: 2021-11-15 15:39:42

## What is an NFT?
>NFTs, or non-fungible tokens, are unique assets that can't be replaced with something else, and are verified and stored using blockchain technology. They can include everything from music to a website domain, but the current craze is really around digital artwork.

Probably if you want to create an NFT by yourself, you will need to learn frontend, solidity, etc. It will take some time then you may lose passion for creating an NFT.

However, there is a nice API, NFTPort that allows us to create an NFT easily. We can use it for free!!!

## What is NFTPort
The Stripe for NFTs: One-Stop & Simple NFT Infrastructure & APIs for Developers

https://www.nftport.xyz/

What we can do with NFTPort is to create an NFT by sending POST request with some parameters. After send the request, we can see an NFT on Opensea.


#### Easy minting w/file upload
https://docs.nftport.xyz/docs/nftport/b3A6MjE2NjM5MDQ-easy-minting-w-file-upload


I created a simple web application with next.js.

[requirements]
- metamask (https://metamask.io/)
- NFTPort API Key (https://www.nftport.xyz/sign-up) 


https://next-mint.vercel.app/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybiqxr8vfwptenk84pxa.png)


{% youtube u63v0JvtEuA %}


If you want to sell your NFT on Opensea, you will need to pay a small amount of money less $1 by Polygon-MATIC.

You can get Polygon on Coinbase then send it to your Metamask.
[Coinbase](https://www.coinbase.com/join/kanao_7?src=ios-link)

Before sending the Polygon, you need to add Polygon network to your Metamask. Chainlist allows you to do that with a couple of clicks.
https://chainlist.org/
ใช้ SSH config ช่วยจำ option เวลาจะ remote ด้วย SSH
Tags: linux, cmd, productivity
Published: 2021-11-15 15:16:30

SSH config ช่วยให้เรา config option ของแต่ละ host เอาไว้หลายๆอันได้ ทำให้ตอนเรียก ssh ใส่แค่ชื่อ hostname ใน config ก็พอแล้ว

เวลาใช้ ssh เพื่อ remote เครื่องอื่น ปกติแล้วจะสั่งประมาณนี้

```
ssh user@hostname
```

หรือถ้ามี port ที่ต่างจาก ssh ปกติ (22) ก็ใส่ option สำหรับ port เพิ่มคือ

```
ssh -p 2222 user@hostname
```

หรือถ้ามี IdentityFile ด้วย ก็ต้องเพิ่ม option ไปอีกแบบนี้

```
ssh -i identity.key -p 2222 user@hostname
```

ตัวอย่างเช่นผมจะ ssh เข้า Ubuntu ที่ลงไว้ใน Virtual Box โดยใช้ vagrant ปกติแล้วจะสั่ง vagrant ssh ก็ได้ แต่ถ้าจะสั่งด้วย ssh เองโดยตรงจะต้องสั่งประมาณนี้

```
ssh -i ~/vagrants/ubuntu/.vagrant/machines/default/virtualbox/private_key -p 2222 vagrant@127.0.0.1
```

ทีนี้ถ้าเราจะใช้ SSH config ช่วยเราก็สร้างไฟล์ config ที่ `$HOME/.ssh/config`

จากนั้นกำหนดค่าแบบนี้

```
Host ubuntu-vagrant
  HostName 127.0.0.1
  IdentityFile ~/vagrants/ubuntu/.vagrant/machines/default/virtualbox/private_key
  Port 2222
  User vagrant
```

ลักษณะ config file ของ SSH ก็มี key เช่น `Host`, `HostName`, `IdentityFile`, `Port` และ `User` แล้วเว้นวรรคด้วย 1 ช่องว่าง ตามด้วยค่าที่กำหนดให้ key นั้นๆ 

แล้วก็มีการใช้ indentation เพื่อบอกว่าค่านั้นเป็น key/value ย่อยๆของ key หลักอีกที

จากตัวอย่างผมกำหนด Host คือ `ubuntu-vagrant` แล้วก็กำหนดค่า HostName เป็น IP หรือ Domain name ของ Host ที่เราต้องการต่อ แล้วก็ค่า IdentityFile ไปที่ path ของ private key ของ vagrant ที่กำหนดให้กับ VM ที่ต้องการ remote ตามด้วยค่า Port 2222 แล้วก็​ User คือ username ในทีนี้คือ vagrant

เสร็จแล้วหลังจากนั้นเวลาเราต้องการ connect ไปที่ Ubuntu ใน VM ก็แค่สั่ง

```
ssh ubuntu-vagrant
```

เท่านี้ก็ได้แล้ว

![ssh config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m70t6iwshpj6klhyyrxk.png)
How to create a Phone Model Layout in HTML and CSS
Tags: html, webdev, css, tutorial
Published: 2021-11-15 15:03:15

Hello there, I am welcome back with a new article 🎉 on **Phone Model Layout**; This is will be the fun article.

So let's get started 🚀

### Quick look

![Quick look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx4d7m97amhm8xt1vwws.png)

- In `index.html`
```html
<div class="container">
        <div class="content">
            <iframe src="https://snowbit.vercel.app" style="width:100%;border:none;height:100%" />
        </div>
    </div>
```

- In `style.css`
```css
.container {
    position: relative;
    width: 360px;
    height: 640px;
    margin: auto;
    border: 16px rgb(75, 75, 75) solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
  }
  
  .container:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 10px;
  }
  
  .container:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
  }
  
  .container .content {
    width: 360px;
    height: 640px;
    background: white;
  }
```

This was it, so simple and easy 🙂

Live Demo - https://snowbit-coderboi.github.io/Phone-View-Layout/

Source Code - https://github.com/snowbit-coderboi/Phone-View-Layout

I hope you liked this post; And make sure to share the feedback 🙂 in comment sections
Tales From My Terminal: V0.2
Tags: devjournal
Published: 2021-11-15 14:57:28

Hello fellow coders,

It's been awhile since I've written anything. I've been busy with juggling learning software development as well as being a stay at home dad/husband. It's a new role for me considering that since I was 16 years old I had a job. I took this software development journey after getting closer to God. I took a leap of faith and left a job in a industry that I love. I'm switching from self dependence to God dependence and its different out here in the deep. I do know that I trust God and whatever He has for me will become a reality sooner rather than later.
F*!& Does That Mean?! -  Learning AWS (v0.1)
Published: 2021-11-15 14:39:21

Hello everyone!

Welcome to the first of many posts that will serve as a summary of my time spent learning AWS. I will use this a a way to hold myself accountable when studying for the AWS solutions architect exam. So let's get started...

What is AWS?

Amazon Web Services (AWS) is used to provide on-demand IT services to businesses with pay-as-you-go pricing. 


What does this even mean?!


Before AWS, you would have to spend a LOT of money to buy, setup and run servers in a data center. It would take months to get set up properly and who knows, you either:

A. may not even use all the servers you bought.

or 

B. you may not have bought or setup enough servers

Either way can be detrimental to your business and this is where AWS comes in. It allows you to set all this up in minutes. You can have as many or as little resources as you need within a few clicks. With the pay-as-you-go pricing, you no longer have to spend upfront for servers and a data center. Now with AWS you only pay for the services that you use. 

Back to learning...
Going Reactive with Kotlin and Coroutines
Tags: cloud, tutorial, kotlin, coroutines
Published: 2021-11-15 14:31:33

Already on the Cloud? What's next? Is reactive the next big thing? Let's discuss how to build reactive systems using Kotlin and Coroutines.

Topics covered in the video:

1. What is reactive and why go Reactive now (benefits with cloud)?

2. Overview of Kotlin and Coroutines

3. Building reactive microservice by declarative design using Spring Boot

4. Understanding reactive stack for Kotlin

5. Discuss advantages of this stack over Java

{% youtube MLly6sJ0x7s %}

If you enjoyed this talk, join our cloud collective group here ► https://www.meetup.com/cloud-collective/ and participate in our next meetup!
Liman Sunucu Sertifikası Ekleme
Published: 2021-11-15 14:02:01

Liman MYS üzerine Sunucu Sertifikaları eklemek için aşağıdaki adımları takip etmek gerekmektedir

- Yetkili bir hesap ile Liman MYS arayüzüne giriş yapılır 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5jkgis8awhq4arig4d8.png)
 
- Sistem Ayarları sayfasındaki `Sertifika Ekle` sekmesi açılır. Eklenmek istenen SSL sertifikasının bulunduğu sunucu Ip ve port bilgisi doldurularak `Al` butonuna basılır.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bek875gbz5enhl0be6w4.png)

- Sertifika bilgileri çekildikten sonra Sertifikayı Onayla butonuna basılır.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/722nv0t0ejn7pa36v8c6.png)
Crack CSS Interview
Tags: css, guide, programming, beginners
Published: 2021-11-15 14:01:38

CSS is one of the three mainstays of Front-End devices, and each web application and page utilizes it to shade and give a design to its skeleton HTML report. Each brilliant and very much planned page you see on the web is only a consequence of CSS code, eliminate CSS and you will get dark and unaligned text with white foundation.

![css iq](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00cone7brfblfvsxwoi7.png) 

The interviewer may also ask about your experience with any of the CSS frameworks, so there you need to share your experience of working with CSS and one of its frameworks such as Bootstrap. While sharing your experience do not mention those tools on which you have never worked before.

[CSS interview questions](https://www.techgeekbuzz.com/css-interview-questions/):

1. What is CSS?
2. Give some advantages of CSS.
3. What is the latest version of CSS?
4. What is the file extension of CSS files?
5. What are the different methods to integrate CSS on an HTML page?
6. Why do we use the external method more than any other method?
7. What is the Embedded style Sheet in CSS
8. Give some Advantages of Embedded style sheets in CSS.
9. What is the difference between an inline and an embedded style sheet?
10. Give some limitations of CSS.
11. Name Some frameworks of CSS
12. What is the framework?
13. What are the components we keep in mind when we use CSS to style HTML?
14. What is a selector in CSS?
15. What are the type and universal selectors?
16. What is the Descendant selector in CSS?
17. What are class selectors in CSS?
18. What is a property in CSS?
19. What is value in CSS?
20. What is opacity in CSS?
21. What % unit signifies in CSS value?
22. What does cm mean in CSS value?
23. Is CSS case sensitive?
24. Name the format in which we can specify the colour in CSS
25. What is a Declaration box in CSS?

## Conclusion

Generally, companies do not organize specific Jobs related to CSS or HTML, however, you can find jobs for JavaScript and its frameworks. CSS is a part of front-end development, and only in the front-end job interviews, you will find these questions.
Liman Sunucusu DNS Değiştirme
Published: 2021-11-15 13:55:40

Liman MYS Sunucusunun DNS'ini değiştirmek için aşağıdaki adımları takip etmek gerekmektedir.

- Yetkili bir hesap ile Liman MYS arayüzüne giriş yapılır 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9gryu36glvpme551jrn.png)
- Sistem Ayarları sayfasındaki `DNS Ayarları` sekmesi açılır. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufu8xk9juhwzul01nghf.png)
- Dns ayarları girilerek Kaydet butonuna basılır.
GET GEOLOCATION BY IP ADDRESS API
Tags: saas, startup, programming, database
Published: 2021-11-15 13:50:03

https://ipxapi.com/

The most complete IP to geolocation API

IpXapi, an API that allows you to locate and identify website visitors with an IP address. 

It provides all kinds of information, such as the customer's location, what connection they use, zip code, security and much more in real-time. 

Using ipXapi you can implement geo-restrictions on a website, optimize ad targeting and deliver specific experiences for customers based on their location. 

How often is IP data updated?

It is integrated with multiple channels delivering real-time IP data, which is why the database used by the ipXapi API is updated regularly, with up to 24 database updates per day.

How many API requests can ipXapi handle?

With 11 years of constant optimization, the infrastructure behind ipXapi and the ipXapi API has grown to become highly scalable and efficient, currently handling between 2 to 3 billion API requests per day.

How much of the global network supported?

Data coverage is growing by the day, with ipXapi currently supporting more than 2 million unique locations in over 200.000 cities across the globe.

Our documentation: https://ipxapi.com/ip#docs
Liman Eklentilerine Lisans Ekleme
Published: 2021-11-15 13:45:28

Liman MYS üzerine eklenmiş eklentilere lisans ekleme için aşağıdaki adımları takip etmek gerekmektedirç
- Yetkili bir hesap ile Liman MYS arayüzüne giriş yapılır
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3v40eft97hhj216brl6.png)
- Sistem Ayarları sayfasındaki Eklentiler sekmesi açılır.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vrhnigf6ribu2vu8mhv.png)
- Lisans eklenmek istenen eklentiye sağ tıklanarak `Lisans Ekle` seçeneği seçilir.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dq1brc1r3vpt11s0pzq.png)
- Kurum tarafından size iletilen lisans aşağıdaki şekilde açılan kutucuğa yazılır eklenir. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehvty3xyjbh5qjx4qw4o.png)
Crypto Jargons
Tags: blockchain, beginners, cryptocurrency, trading
Published: 2021-11-15 13:37:27

FOMO- Fear of Missing out.

Shill- Someone purposely promoting something for their own benefit.

FUD- Fear, Uncertainty and Doubt.

HODL- Hold on to your dear life (or "hold your coins").

REKT- To suffer losses from coins that have dropped in value.

Mooning- When a cryptocurrency is about to soar in both price and volume.

Whale- An investor who owns 5% or at ton of attention leads to a coin's price increase; dump happens when the coin's price crashes after an associated spread of negative emotions.

Bag holder- Some holding unto a coin that has plummeted in price.

Sats- Short for Satoshis, the smallest unit of Bitcoin.

When Lambo? means "When are we going to get reach?"

Floppening- This is the instance where Ethereum would overtake Bitcoin's market cap and become the number one cryptocurrency (in progress)

No Coiner- A reference to people who don't own any bitcoin.

Vapourware- Coins that never become a reality.

Cryptosis- A desire to engulf every bit of information about cryptocurrency.

NGMI- Not gonna make it.

WAGMI- We're all gonna make it.
Sticky Footers
Tags: webdev, beginners, html, css
Published: 2021-11-15 13:26:48

In most of my apps, I almost always want the footer at the bottom of the page.

This is really easy to accomplish: 

1. first, we make the actual page at least the height of the screen
2. then, we move the footer to the bottom of the page with auto margin if there isn't enough natural content

### With CSS

With a simple page like this,

```html
<body>
	<div id="app">
		... other content ...
	  <footer id="footer" />
	</div>
</body>
```

our CSS looks like this:

```css
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  margin-top: auto;
}
```

### With Tailwind

Tailwind makes it even easier.

```html
<body>
  <div class="min-h-screen flex flex-col">
    ... other content ...
    <footer class="mt-auto" />
  </div>
</body>
```
Functional Component vs Class Component - React JS - Which is better to use and where to use?
Tags: react, reactnative, javascript, programming
Published: 2021-11-15 13:16:23

![React Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg1vb7mj9yp5ghy0tluu.png)

During my react coding review or discussion with the developers, Many put their questions about Class component vs Functional component use with real-life projects. eg. Where will we have to use class/functional components and why? Which is better in terms of performance or management?

Here, I am writing my experience for the above questions.

In react, we are having two types of components - Functional and Class Components. Both are having different rules, ways, and strengths. Nowadays, the React hooks had given powerful methods to functional components.

Currently, React Hooks are very famous to handle various tasks and manage the state in an easy way (useState, etc) like accessing state values from the parent, sharing values to child/parent components (useRef, forwardRef, useContext, etc), memory management, etc.
Additionally, We can manage the life cycle of a component using a hook (useEffect).

**Class Component**

State Management: With Class components, we can easily manage the internal state values. 
For beginners, It may create complexity (a little bit tricky) with the integration of state management libraries like Redux.

Before hook introduction with React, there was only one way to maintain state with components, which was class-based components.

Life Cycle Management: Class components are very good with life cycle management (ComponentDidMount, ComponentWillMount, etc). It gives the power for managing life cycle stages. We can easily maintain our code with a life cycle function (attach or detach). 

**Functional Component**

Functional components are stateless (without hooks) and class components are having stateful component. 

Without hooks, a functional component is only a viewable component (JSX without any state or stateless component).

Sometimes, Developer face issue with state management with functional component. The main reason is - Hooks like (eg. useState) are having asynchronous behaviour and update state values asynchronously. It creates an issue with state handling/updating, failure state update on unmount of the component. To resolve these issues, we will have to handle state using useEffect or can use other proper way with the functional component side. 

Other hand with the class component, we manage these situations in a better way.

**Conclusion**:  With Latest React, We can use both class or functional components for our development. I love the use of functional components (Easy to handle state, values, memory, data handling using hooks).
For complex or large state management / the common components/libraries/package development, I use the class components.

*Which is your favourite?*
Develop Google scraper in Python with Scraper API
Tags: google, scraping, python
Published: 2023-03-30 07:51:22

---
title: Develop Google scraper in Python with Scraper API
published: true
date: 2021-11-15 07:42:23 UTC
tags: google,scraping,pythonprogramming
canonical_url: https://pknerd.medium.com/developer-google-scraper-in-python-with-scraper-api-da2d965d26ac
---

![](https://cdn-images-1.medium.com/max/1024/0*RRcM5pC_7RfMks0C.jpg)

This is another post in [ScrapeTheFamous](http://blog.adnansiddiqi.me/tag/scrapethefamous/), in which I will be parsing some famous websites and will discuss my development process. The posts will be using [Scraper API](http://blog.adnansiddiqi.me/create-your-first-web-scraper-with-scraper-api-and-python/) for parsing purposes which makes me free from all worries about blocking and rendering dynamic sites since [Scraper API](http://scraperapi.com/?via=adnan98) takes care of everything.

So this post is about scraping Google search results, the script will accept a keyword and would return results across multiple pages. The data will be stored in a text file in JSON format.

The code that is parsing the result is pretty straightforward and given below:

![](https://cdn-images-1.medium.com/max/1024/1*_9Zlxczs3PDcDe8bHfy1Pg.png)

It goes from one page to the next, keeping the search keyword intact. It then parses the H3 and a tag and stores in a JSON structure.

### Conclusion

In this post, you learned how you can create a Google Search parser in Python using [Scraper API](http://scraperapi.com/?via=adnan98). You do not have to worry about Proxy IPs either nor do you have to pay hundreds of dollars, especially when you are an individual or working in a startup. The company I worked with spends 100s of dollars on a monthly basis just for the proxy IPs.

Oh if you sign up [here](http://scraperapi.com/?via=adnan98) with my referral link or enter promo code **adnan10** , you will get a **10% discount** on it. In case you do not get the discount then just let me know via email on my site and I’d sure help you out.

The code is available on [Github](https://github.com/kadnan/Google-Scraper)

_Originally published at_ [_http://blog.adnansiddiqi.me_](http://blog.adnansiddiqi.me/developer-google-scraper-in-python-with-scraper-api/) _on November 15, 2021._
Week three experience in task force 4 at Awesomity and CodeofAfrica
Tags: awesomity, codeofafrica, taskforce
Published: 2021-11-15 13:08:20

Greeting again my good people✌🏿!

This has been my third week at #awesomity and #codeofafrica as part of task force 4. And the week was an interesting one, where we had a lot of things to do as I am going to describe below.

The week's activities were divided into two categories as always: soft skills and technical skills.

##Soft skills
In soft skills, we had two main sessions: team culture session and the communication session.

### Team culture.
During the team culture session we discussed what team culture is and the importance of having a common culture as a team, and ways to build a strong team culture. We ended the session with an interesting exercise where we were asked to find what is the team culture at #codeofafrica.

### Communication
During the communication session, we learned the importance of communication in a team, and what is the most efficient way to communicate in a team.

## Technical Skills
During the part, we focused on two main subjects: code review and Brainstorming on the show app.

### Code review
In this session, we focused on how to review codes on our team and how to give feedback on a code review we reviewed.

### Brainstorming
In this session, we had to brainstorm on how the show app will be working, where we took one use case and tried to come up with endpoints needed and the type of data we would need. And we ended the session by designing the ERD for the app.

The week ended with a group presentation of the ERD diagram we came up with as a team and received feedback.
Localize (i18n) your Svelte App with Tolgee. You will save a lot of time.
Tags: svelte, javascript, opensource, webdev
Published: 2021-11-15 13:04:22

Localization is tricky part of application development. Using Tolgee open-source tool you can save a lot of time.

## Tolgee Features
- All in One localization solution for your Svelte application 🙌
- Out of box in-context localization 🎉
- Automated screenshot generation 📷
- Translation management platform 🎈
- Open-source and self-hosted 🔥

## Svelte integration
We have just implemented and documented Svelte integration, so now you can translate your Svelte application in dead simple way.

### Get started on [Tolgee for Svelte](https://tolgee.io/integrations/svelte)! 🎉

### Or check out [Svelte + Tolgee Example app](https://github.com/tolgee/svelte-example)

**We will be happy for any feedback! 🙏**

Like it? 😊 Please star our projects on Github. It would help a lot 🙏 

- [Tolgee JS (integrations monorepo) GitHub ⭐](https://github.com/tolgee/tolgee-js)

- [Tolgee Server (the platform) GitHub ⭐](https://github.com/tolgee/server)

---
Disclaimer: I am founder of Tolgee.