teleren/devto huggingface dataset:
All about Blockchain!!
Tags: blockchain
Published: 2021-04-01 06:08:33

###How exactly any given blockchain works depends on who makes it.
For example, what data is stored, who confirms it, how they are rewarded, how it is distributed, and who can see the blockchain defines its use.

In most cryptocurrencies, anyone running the right software can help create and confirm the blockchain, which is generated each time a block is confirmed.

Cryptocurrency isn't the only use case for blockchain technology, and theoretically, the data stored in a block could be just about anything. It all depends on who makes blockchain and what they want to do with it.

In case of Codex Protocol, the owner of an artwork contributes entries in the life of an artifact, such as ownership changes and payment amounts. These records make up the block. The owner is not directly "rewarded" by contributing to the blockchain provenance, but they want to sell the work, the verifiable, immutable blockchain provenance that they helped create contributes to the value of the piece.

###What are the Benefits of Blockchain Technology?
There are several benefits to implement blockchain technology. Few use cases actually capitalize on all of them.

Blockchain technology is a secure way for organizations to catalog, secure and authenticate their own data. IBM blockchain solutions largely promote technology as a form of supply chain management. By making blockchain publicly visible, organizations can also use the technology to make records and information transparent and trustworthy.

In addition to being powerful and potentially transparent, blockchain technology can help organizations decrease their computing costs and risks by crowdsourcing data storage, security, and verification. Blockchains that are part of a "distributed ledger" allow individual computers to upkeep data without worrying about centralized servers.

###Barriers to Implementing Blockchain Technology
1) Most of the downsides to blockchain technology come from perceptions about the technology rather than its actual implementation.

2) Many people hear "blockchain" and think "cryptocurrency", which is rather a shame considering the versatility of blockchain in other use cases. There is also a tendency to think of cryptocurrencies as a passing fad, leading many people to gloss over other use cases of blockchain.

3) Furthermore, as a new technology, blockchain carries an air of imperceptibility. Many people understand that it's complicated, so they don't try to understand it.

###Blockchain has many uses, Now and in the future
Blockchain technology is complicated for the computer, but as far as understanding how it works on a functional level, it's not so scary.

The blockchain is blocks of data chained together by individual identifiers. That's all the average person really needs to understand.
Day 18 of SwiftUI
Published: 2021-04-01 06:07:10

I just completed day 18 of 100 days of SwiftUi. I took the WeSplit app challenge. I added a section to display the total amount paid and also changed the select number of people picker to a text field.

Before the changes
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtekgh03z5dju9y0zh60.png)

After the changes
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aftrggzcx1gnaym1ygr9.png)

[Click here to see the code on Github](https://github.com/sanmiAde/check-sharing-app)

If you are interested in taking the challenge, you can find it at https://www.hackingwithswift.com/100/swiftui
See you tomorrow ;)
Why would you want to learn ReactJS now?
Tags: react, javascript, beginners
Published: 2021-04-01 06:06:38

---
title: Why would you want to learn ReactJS now?
published: true
description: What is ReactJS?
tags: react, javascript, beginner
cover_image: https://www.mindinventory.com/blog/wp-content/uploads/2017/08/reactjs-1024x512.jpg
---

Yesterday, I posted an article called [Why would you want to learn VueJS now?](https://dev.to/angelomiranda/why-would-you-want-to-learn-vuejs-now-57f5) and I appreciate all who share their thoughts and experiences with the framework.

Now, it is time to chat about ReactJS. According to many [Surveys](https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190), ReactJS is the most popular and loved front end library by engineers and I think these are the reasons why.

- Almost everything is implemented by JS. It is very easy to create small, reusable, and dynamic components that can be dropped anywhere in the applications. JSX is definitely super recommended to learn and use. I haven't seen engineers that are not using JSX. 😊

```js
// Class component
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

// Function component
function HelloMessage (props) {
  return (
      <div>
        Hello {props.name}
      </div>
  )
}
```

- Strong community. First built by Facebook and then have the support of the open-source community. Lots of smart people here that have big brains 🧠.

- Jobs 💰💼. Demand is real. It is the top skill that most companies are looking for. It is easier to find contractors that know who to use react than other JS lib/frameworks.

- Library is fast ⚡💨. One of the first innovators of the Virtual Dom or VDOM which is a copy of the real DOM. When data changes on the VDOM, ReactJS efficiently updates only the necessary parts of the DOM which is faster than updating everything in the DOM.

- I might offend someone by this entry, please don't be just my thought. Some engineers got frustrated with Angular rewrite and found a better alternative. Talking about perfect timing. I was a big fan of Angular especially the time I first saw the 2-way data binding, directives, and dep injection. I was shocked 😱. Couple of lines of code can achieve something like those. 

- Learn once then you open your door into building lots of things. You can use React to create a complex web app. Also, you can use NextJS to pre-render pages, not going to in-depth details, which is very advantageous and have its use cases. Lastly, is you can build a mobile app using React Native.

Is there anything else that you like that I missed?

Got 3 minutes? Below is a youtube video. Happy coding! {% youtube Ws7rEuexjxU %}

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)
Today I learned about buttons elements
Tags: html, css, webdev, laravel
Published: 2021-04-01 05:49:56

Here's My HTML code.
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="./normalize.css" />
  </head>
  <body>
    <button class="btn btn--primary btn--block">Buy Now</button>
    <button class="btn btn--secondary">Buy Now</button>
    <button class="btn btn--accennt">Buy Now</button>
    <a href="#" class="btn btn--secondary btn--block">Buy Now</a>
    <button class="btn btn--outline">Buy Now</button>
  </body>
</html>
```
Here's My CSS code.

```CSS
.btn {
  border-radius: 40px;
  border: 0;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1rem 0;
  padding: 2rem 3rem;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: #3a8ffd;
}

.btn--secondary {
  background: var(--color-secondary);
  color: #fff;
}

.btn--secondary:hover {
  background: #05cdf0;
}

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.btn--accent:hover {
  background: #ec3000;
}

.btn--outline {
  background: #fff;
  color: var(--color-headings);
  border: 2px solid var(--color-headings);
}

.btn--outline:hover {
  background-color: var(--color-headings);
  color: #fff;
}

.btn--block {
  width: 100%;
  display: inline-block;
}

@media screen and (min-width: 1024px) {
  .btn {
    font-size: 1.5rem;
  }
}
```

Here's the Output
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nest6wiiax04i8ew3tp.jpg)
How to Configure Google Chrome to Use a Proxy Server on a Mac
Published: 2021-04-01 05:37:12

Google Chrome on Mac used the Mac system settings to configure the proxy server. This is how you open it.

Click on the Chrome menu and then select Preferences.
Scroll down the Settings page till you see the Advanced button.

Click on it, and it will open the Advanced Settings Panel.
Now scroll down if necessary to the System area, and you will see the link to Open your computer's proxy settings.
This will open Mac's system proxy preferences page. Select Web Proxy (HTTP) or Web Proxy HTTPS or Both based on the type of proxy server you have available. Enter the IP and port of the proxy. Make sure you enter the username and password for the proxy if it needs it. Once you are done, press OK.
That saves the proxy settings, and you can now navigate Chrome to a service like HTTPBin http://httpbin.org/ip to see if Chrome is using the proxy you typed in or not.
Today l learned about Quotes elements
Tags: html, css, webdev, laravel
Published: 2021-04-01 05:32:27

Here's My HTML code.
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./normalize.css" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <blockquote class="quote">
      <p class="quote__text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis,
        aperiam! Dolorum nemo officia corporis quae modi expedita quod, esse
        iure?
      </p>
      <footer>
        <div class="media">
            <div class="media__image">
              <svg class="icon icon--primary quote__line">
                <use xlink:href="../images/sprite.svg#line"></use>
              </svg>
            </div>
            <div class="media__body">
              <h3 class="media__title quote__author">Ahtsham Hassan</h3>
              <p class="quote__organization">
                  Made By Ajus
              </p>
            </div>
             <div> 
      </footer>
    </blockquote>
  </body>
</html>
```
Here's My CSS code.
```Css
.quote {
  font-size: 3rem;
  color: var(--color-body-darker);
  font-style: italic;
  line-height: 1.3;
}
.quote__text::before {
  content: open-quote;
}
.quote__text::after {
  content: close-quote;
}

.quote__author {
  font-size: 3rem;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 0;
}
.quote__organization {
  color: var(--color-headings);
  opacity: 0.4;
  font-size: 2rem;
  font-style: normal;
}
.quote__line {
  position: relative;
  bottom: 10px;
}
@media screen and (min-width: 1024px) {
  .quote {
    font-size: 2rem;
  }
  .quote__author {
    font-size: 2.4rem;
  }
  .quote__organization {
    font-size: 1.6rem;
  }
}
```
Here's the output
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8axhu1tre1yr0xxzy9ur.jpg)
MY 100days of code update
Tags: html, css, javascript
Published: 2021-04-01 05:22:24

Hello devs so yesterday i started a #100days of code challege but one that lasts till the end of the year so more like 273/274 days i wan to get better at front-end development and extremely good in javascript cause it's the language i like the most cause of versatility.
Yesterday I started of with HTML and i was able to get to lists today i want to finish up till forms or even past there ill update you on my progress, PS any help would be appreciated & please follow me TY.
#day1 #100daysofcode #html #css
Personal blogs from awesome developers
Published: 2021-04-01 05:16:39

Dev community, I have been trying to collect some awesome personal blogs from amazing developers.

I have been trying to make my own and was looking for some inspiration. Care to share some amazing links if you have any.

1. [https://joshwcomeau.com](https://joshwcomeau.com) from [Josh Comeau](https://twitter.com/JoshWComeau)
 
2. [https://leerob.io](https://leerob.io) from [Lee Rob](https://twitter.com/leeerob)
 
3. [https://flaviocopes.com](https://flaviocopes.com) from [@flaviocopes](https://twitter.com/flaviocopes)
 
4. [https://arun.is](https://arun.is) from [@zhenpixels](https://twitter.com/zhenpixels)
DevDiscuss podcast production tools and process?
Tags: podcast, audio, discuss
Published: 2021-04-01 05:11:45

🔥 DevDiscuss podcast is sounding really good lately!

• What tools are you using? … mostly interested in the software. 

• How do you record remote guests?

• What is the production process for recording, editing, mixing down and publishing?

• File formats? … assuming 48khz 32bit mono wav track for each guest, then a stereo music track. What are you mixing down to? do you render out the mp3? what bitrate, etc?

• Microphone hardware? compression settings?

… Everything sounds great, really curious about the details and tools of your production process. 🙏🏼 

---

I listen on Google Podcasts: https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s
4 Best UI Framework For ReactJS
Tags: react, javascript, webdev, beginners
Published: 2021-04-01 05:05:04

# Introduction

Building any project from scratch is painful as it takes a lot of time, causes frustration and we spent a lot of time on positioning components than improving functionality. It is also a waste of time as we write code that is already written and available to you.

The solution to all such problems is a framework. 

> A framework, or software framework, is a platform for developing software applications. It provides a foundation on which software developers can build programs for a specific platform.
 -[TechTerms](https://techterms.com/)

There are frameworks for a lot of purposes. 

Today, we are going to look into the best UI framework for developing your next ReactJS project.

<hr/>

## [Material UI](https://material-ui.com/)

> React components for faster and easier web development.

![Material UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfnogxy861gsl6935kwv.jpg)
 
**Installation**

```bat
 $ npm install @material-ui/core
```

**Usage**

```react

 import React from 'react';
 import { Button } from '@material-ui/core';

 function App() {
   return <Button color="primary">Hello World</Button>;
}

```

<hr/>

## [React Bootstrap](https://react-bootstrap.github.io/)

> The most popular front-end framework. Rebuilt for React.

![1200x900-1-1200x900](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2fkf9h4u26dbopqh7n3.png)
 
 
**Installation**

```bat
 $ npm install react-bootstrap bootstrap
```

**Usage**

```react

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

 function App() {
   return <Button>Hello World</Button>;
}

```

<hr/>

## [Atomize](https://atomizecode.com/)

> Atomize Design System is the most advanced UI design framework that helps designers create beautiful and consistent user interfaces for the web.

![Atomize React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1bcer8p1w6mkap0008x.png)
 
 
**Installation**

```bat
 $ npm install atomize react-transition-group
```

**Usage**

```react

import { Button } from "atomize";

 function App() {
   return <Button>Hello World</Button>;
}

```

<hr/>

## [Ant Design](https://ant.design/)

> A design system for enterprise-level products. Create an efficient and enjoyable work experience.

![Ant Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6c3xpzfp40rayifebmt.png)
 
 
**Installation**

```bat
 $ npm install antd
```

**Usage**

```react

import { DatePicker } from 'antd';

ReactDOM.render(<DatePicker />, mountNode);

```

# Last Note

I hope this framework will help you in developing your next project that has some great UI. I would love to know "Which framework do you use?". 

Thank You for reading the blog post.
Why test first?
Tags: tdd, development, coding, test
Published: 2021-04-01 05:02:37

Ok. Let's settle this.

There are many reasons why writing test first is a **better** TDD. But none is strong enough to enforce test first.

For example some say "**because it gives us a better code structure**". My answer to that is, what if I already know the best code structure!? Can I write code first?

Think about it for a second ...

- Why **must** we write test first?
- What is that one goal that you cannot achieve unless you write test first?

The only thing that is not achievable unless we write test first is having a bug-free unit test.

Unit tests are code as well. Just like any other code they can have bugs. We don't write another unit test to test the test (complicated!?). Instead the only proof of a bug-free test is a test that fails and then passes after the implementation. 

In another word if you write code first and then write the test, you might end up with a unit test that will never fail because it simply has a bug :)
Learn about content editable CSS attribute and how it is used to make editors for blogging websites in this post.
Tags: 100daysofcode, css, webdev
Published: 2021-04-01 05:00:58

The contenteditable attribute specifies whether the content of an element is editable or not.
It is generally used to make rich text editors for blogging websites. 
You can check out detailed video explanation of this tutorial here:-
{% youtube qGYQdOSmiQk %}

Or follow along in this blog as well:-

We first add a contenteditable attribute to a div tag in HTML:-
```
<div class="editor-buttons">
  <a href="#" data-command="bold">
    <i class="fa fa-bold"></i>
  </a>
  <a href="#" data-command="italic">
    <i class="fa fa-italic"></i>
  </a>
</div>
<div contenteditable="true" class="editor">
  <p>Lorem ipsum dolor sit amet.</p>
</div>
```

On third last line in the code above we have added content editable attribute with value set to true to allow our div tag to be editable.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy18k3azx07v1qzgf95n.png)

Next we add support for fontawesome icons and add some css in our code:-
```
.editor {
  border: 1px solid lightgray;
  padding: 5px;
}

.editor-buttons {
  margin: 10px 0px;
}

a {
  color: black;
  border: 1px solid black;
  padding: 5px;
  margin: 0px 5px;
}
```

Finally we use execCommand in Javascript to allow our editor to make text bold or italic:-

```
const links = document.querySelectorAll('a');

console.log("links",links);

links.forEach((link)=>{
  link.addEventListener("click",function(){
  const command = this.getAttribute('data-command');
  console.log(command);
  document.execCommand(command);
});
})
```

You can learn more about execCommand here:- 
[W3Schools](https://www.w3schools.com/jsref/met_document_execcommand.asp)

Final codepen can be found here:-
https://codepen.io/codeclassifiers/pen/eYgBbeP

Content editable property is used widely in a lot of popular rich text editor libraries like Draft.js as well.
I hope this short explanation was useful for you all.

References:-
https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657
Barebone Next.js TypeScript Template
Tags: nextjs, typescript, prettier, eslint
Published: 2021-04-01 04:35:25


# Next.js TypeScript Template with Auto Code Formatting in VSCode

## Getting Started

```bash
git clone https://github.com/huydhoang/next-typescript-template.git
cd next-typescript-template
pnpm dev
```

[pnpm](https://pnpm.js.org/) is a cool alternative to `yarn` or `npm` as it is faster and can reuse downloaded packages to reduce the size of `node_modules`.

If you use `yarn`

```bash
yarn dev
```

or `npm`

```bash
npm run dev
```

## Auto Code Formatting

Auto Code Formatting for TypeScript was setup using ESLint and Prettier in VSCode.
Simply turn on `Editor: Format On Save` feature within VSCode and let the magic happen.

`File > Preferences > Search 'Format On Save'`

https://github.com/huydhoang/next-typescript-template

Feel free to share and comment! :)
A Localhost Tunneling - CLI
Tags: localhost, tunneling, cli
Published: 2021-04-01 04:03:07

---
title: A Localhost Tunneling - CLI
published: true
description: an adventure of searching for localhost fun
tags: localhost, tunneling, CLI,
---

I have spent the better part of the last 2 days trying, like a wild Google search-er, to get a development environment that pushes localhost to the network & internet. That will update and allow for rapid development.

Here's my findings!

To lay it simply - I went with Python.

===
1st Module - LiveReload
https://pypi.org/project/livereload/
This module allows for a localhost environment, one that refreshes after each Save.

This CLI is:
livereload -p 80

===
2nd Module - pyngrok 
https://alexdlaird.medium.com/pyngrok-a-python-wrapper-for-ngrok-ceb2f25229fd
This module is a ngrok wrapper. Allowing for quick pushing of a localhost session, mentioned above.

This CLI is:
ngrok http 80

===
Running
To get up and going, run the LiveReload command, then the pyngrok command. (Within the directory of your project)


That's pretty much it!

For a bonus tip:
I use 'Pushbullet' (a Chrome extension) - to send my unique URLs to my phone or tablet!
Learning DNS
Published: 2021-03-31 13:24:06

## DNS records
 [ What are PTR MX SRV SPF AAAA DNS Records](https://www.howtouselinux.com/post/linux-dns-ptr-mx-srv-spf-aaaa-dns-records)
 - NS record - The Name Server record simply specifies the other name
   servers for the domain, or maps a domain name to that of the primary
   server for the zone.
 - A record The Address record holds the IP address of the name.
 - CNAME record The Canonical Name record is an alias field allowing you
   to specify more than one name for each TCP/IP address.
 - MX record The Mail Exchange record specifies the name of the host   
   that processes mail for this domain.
 - HINFO record The Host record is the record that actually specifies   
   the TCP/IP address for a specified host. All hosts that have static  
   TCP/IP addresses should have an entry in this database.
 - PTR record Pointer records are used for reverse lookup entries. They 
   specify the IP address in reverse order and the corresponding host   
   name.

## how to use dig to query dns
[Using Linux Dig to Query DNS](https://www.howtouselinux.com/post/linux-command-use-dig-to-query-dns)
 - Simple lookup : dig hackersgarage.com
   
 - Lookup Name Servers: dig @8.8.8.8 hackersgarage.com NS
 - Lookup using external DNS Server: dig @8.8.8.8 hackersgarage.com
 - Lookup MX record: dig @8.8.8.8 hackersgarage.com MX
 - Lookup CNAME record: dig @8.8.8.8 hackersgarage.com CNAME
 - Look TXT record (e.g will it will return SPF records, google verification methods): dig @8.8.8.8 hackersgarage.com TXT