teleren/devto huggingface dataset:
HTML <article> Tag
Published: 2022-06-30 04:38:15

Three articles with independent, self-contained content:

`<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>`

More "Try it Yourself" examples below.

**Definition and Usage
**

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

Forum post
Blog post
News story
Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element (see example below).


**Global Attributes**

The <article> tag also supports the Global Attributes in HTML.

Event Attributes
The <article> tag also supports the Event Attributes in HTML.

**More Examples
**

`<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>`

**Default CSS Settings
**

Most browsers will display the <article> element with the following default values:

`article {
  display: block;
}`
fallback() | Ethernaut #01:
Tags: web3, blockchain, ethereum, evm
Published: 2022-06-30 13:30:29

What happens when you call the function that does not exist, or send ether to a contract via `send()` or `transfer()` ?

---

![execution diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5fxvbdpiek20rd5em9v.png)

---


## `fallback() external [payable] {...}`

executes when:
- function does not exist in contract
- ether transfer with non-empty call data
- ether transfer when there is no `receive()` function


## `receive() external payable {...}`

executes when:
- ether transfer with empty calldata

---

## Code example
```solidity
contract TestPayable {
    uint x;
    uint y;
    
    fallback() external payable { x = 1; y = msg.value; }

    receive() external payable { x = 2; y = msg.value; }
}
```
`address(contract).transfer(AMOUNT)` => x=2
`address(contract).call{value:1}(abi.encodePacked("SOME"))` => x=1

---
## Real-world usage: Proxy
Let's look at the code of [Proxy.sol](## Real-world usage: Diamond Pattern)

![Proxy code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hqkc7d7w8k8bggvwfm1.png)
 
1. `proxy.foo(...)`
2. `foo(...)` does not exist in proxy's source code
3. fallback is triggered
4. make `delegatecall(...)` on implementation
5. return result

Thanks to fallback function arbitrary function can be called on a proxy. Without it we would have to create more complicated mechanism.
 
---
## Why `receive()` was introduced?
- To make explicit check if `msg.data` is empty. Without it, it was up to the programmer to check whether calldata is empty. 
- Better UX for plain ETH transfers, so the user who didn't put calldata could be handled independetly. `receive()` function enforced on programmers thinking about such cases.

---
## Ethernaut 01: Fallback

There was a fallback method which granted you ownership if you contributed before and supplied some ether. This way your contribution could be less than owner but still you can gain ownership.

1. Interact with contract using [web3.js](https://web3js.readthedocs.io/en/v1.2.11/index.html)

2. Send ether when interacting with an ABI
 - `contract.contribute({value: AMOUNT_IN_WEI})`

3. Send ether outside of the ABI [docs](https://web3js.readthedocs.io/en/v1.2.11/web3-eth.html?highlight=sendTransaction#sendtransaction)
 - `contract.sendTransaction({value: AMOUNT_IN_WEI})`


[Level](https://ethernaut.openzeppelin.com/level/0x9CB391dbcD447E645D6Cb55dE6ca23164130D008) completed at [tx](https://rinkeby.etherscan.io/tx/0xf5988d426eb0aab8e8cd9544e135e3b7a13a454db2ad5fc533afbd5a170900c6)


---

sources:
[forum answer](https://studygroup.moralis.io/t/fallback-function/45026/3)

[medium blog post](https://medium.com/coinmonks/solidity-fundamentals-functions-a7e3d38c1fe5)

[solidity docs](https://docs.soliditylang.org/en/v0.8.15/contracts.html?highlight=fallback#receive-ether-function)

[stackexchange](https://ethereum.stackexchange.com/questions/81994/what-is-the-receive-keyword-in-solidity)
How long is too long to stay at a company?
Tags: anonymous, discuss, career
Published: 2022-06-30 13:27:03

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._ 

***


I've been a junior dev at my current company (my first job!) for a little over a year. Seeing the turnover that happens with my coworkers on a decently regular rate, and none of those resignations being due to some larger company politics, I'm starting to really wonder what the appropriate length is for a developer to stick it out at a company. If anyone could help me with this, I'd appreciate it!
📇How To Make Circular Progress Bar | HTML CSS JavaScript
Tags: html, css, beginners, javascript
Published: 2022-06-30 13:21:10

Lets Create a Circular Progress Bar using just HTML CSS JavaScript, step-by-step in a very easy to follow along tutorial.

***
{% youtube H2HYccAGR00 %}
***

###Source Code:

**Markup:**
```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>Circular Progress Bar</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="app.js"></script>
</head>

<body>

  <div class="skill">
    <div class="outer">
      <div class="inner">
        <div id="number">

        </div>
      </div>
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
      <defs>
        <linearGradient id="GradientColor">
          <stop offset="0%" stop-color="#DA22FF" />
          <stop offset="100%" stop-color="#9733EE" />
        </linearGradient>
      </defs>
      <circle cx="80" cy="80" r="70" stroke-linecap="round" />
    </svg>

  </div>

</body>

</html>
```

**CSS:**
```css
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	background-color: #e3edf7;
	height: 100vh;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}

.skill {
	width: 160px;
	height: 160px;
	/*    background-color: cornflowerblue;*/
	position: relative;
}

.outer {
	height: 160px;
	width: 160px;
	border-radius: 50%;
	/*  border: 2px solid orangered;*/	
	padding: 20px;
	box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.inner {
	height: 120px;
	width: 120px;
	border-radius: 50%;	
	display: flex;
	align-items: center;
	justify-content: center;
	/*  border: 2px solid orangered*/
	box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), 
                   inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
		 -0.5px -0.5px 0px rgba(255, 255, 255, 1), 
                  0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
                  0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}

#number {
	font-weight: 600;
	color: #555;
}

circle {
	fill: none;
	stroke: url(#GradientColor);
	stroke-width: 20px;
	stroke-dasharray: 450;
	stroke-dashoffset: 450;
	animation: anim 2s linear forwards;
}

@keyframes anim {
	100% {
		stroke-dashoffset: 157.5;
	}
}

/*Put it on the top of our circle*/
svg {
	position: absolute;
	top: 0;
	left: 0;
}
```
***
🛴 Follow me on:
Facebook: https://bit.ly/3cp2S5W
YouTube: https://bit.ly/3oBQbc0
Instagram{New}: https://bit.ly/3Ihh2EB
Here's my Baby
Tags: rails, seo, webdev, ruby
Published: 2022-06-30 13:10:36

Hi everyone,

Here's my baby: [https://keytunity.com](https://keytunity.com)

I started Keytunity as a project to help me rank my own websites and realized what a great opportunity it was.

Keytunity mines Google Search Console for cool, personalized recommendations for new articles and content add-ons.

It's something I built for myself and now I'm sharing with the world!

I'd love any feedback you have. The feedback I've received so far has been amazing and really helped me improve Keytunity.
My first step into marketing
Tags: beginners
Published: 2022-06-30 13:10:20

Programming has always been an interesting thing to do for me. It happened a lot that I find myself wondering in Stackoverflow for hours. But at some point I thought: This won't give me the money I deserve. So I started to write about the problems I can solve and I published my first article about [Instagram automated following](https://virgool.io/@tryhardblogger/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%DA%A9%D8%A7%D9%85%D9%84-%D8%A7%D9%81%D8%B2%D8%A7%DB%8C%D8%B4-%D9%81%D8%A7%D9%84%D9%88%D9%88%D8%B1-%D8%A8%D8%A7-%D9%81%D8%A7%D9%84%D9%88-%D8%A2%D9%86%D9%81%D8%A7%D9%84%D9%88-%D8%A7%D8%B5%D9%88%D9%84%DB%8C-k39dv7uemrt0).
Canvay | Made with Nuxt JS
Published: 2022-06-30 13:03:09

![Canvay | Made with Javascript | Nuxt JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1655989989/large_canvay_made_with_nuxt_js_17b6a9128d.png "Canvay | Made with Javascript | Nuxt JS")


### The reliable platform for your site

> Run wild with any project you have in mind. Our intuitive and reliable hosting platform allows even the non techie to host their site with ease.
> 
> ### The reliable platform for your site
> Run wild with any project you have in mind. Our intuitive and reliable hosting platform allows even the non techie to host their site with ease.
> 
> ### Your favorite applications, clicks away
> Our app installer simplifies the installation process for popular applications, making them easier to install and more enjoyable.
> 
> ### Easy to understand, even for the non-technical.
> Our panel was built from scratch to create a fluid and user-friendly experience. Create and manage your sites with ease and simplicity from any device
> 
> #### Everything in one place
> Manage all your sites from one simple panel
> 
> #### User friendly
> Designed with a focus on the user experience
> 
> #### Feature rich
> Includes all the features you need
> 
> #### Efficient
> Deploy new sites in a matter of seconds
> 
> #### Seamless scaling
> Upgrade your plan with a few clicks
> 
> #### Got stuck?
> We're always here to help

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Canvay on Twitter](https://twitter.com/withjavascript/status/1542492954539040768?s=20&t=ljPFq_ScZJBTuGaRMYOcFQ)
 |
| Medium | [Canvay on Medium](https://medium.com/@madewithjavascript/canvay-made-with-nuxt-js-395b51c79a03)
 |
| Facebook | [Canvay on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid032hhLWsnAwFnqsFgBNyuvs5LSoD1o6RGTmkEt42A4z3bYUgHoEDakbbLe6kAEYB1Ql)
 |
| Tumblr | [Canvay on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/688488735662292992?source=share)
 |
| LinkedIn | [Canvay on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6948258737405014018)
 |
| Pinterest | [Canvay on Pinterest](https://pin.it/1SCoy9g)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Nuxt JS](https://madewithjavascript.club/categories/nuxt-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
JavaScript concepts you must know
Tags: javascript, webdev, beginners, tutorial
Published: 2022-06-30 12:57:31

JavaScript one of the popular language on internet now a days, millions of webpages around world is using JavaScript.

Let's discuss some basic concepts of JavaScript, which can be useful in your project.

## Scope
Scope determines the accessibility of variables, objects and functions. In other words, the current context of execution. The context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use. In JS we have 3 types of scope:
- Block scope
- Function scope
- Global scope

## Closures
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state. In other words, Closure means that an inner function always has access to the variable of its outer function, even after the outer function has returned.

```js
function init() {
var name = 'Dev'; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();
```

## Callbacks
A callback function can be defined as a function passed into another function as a parameter.
```js
// function
function greet(name, callback) {
  console.log('Hi' + ' ' + name)
  callback();
}

// callback function
function callMe() {
  console.log('I am a callback function');
}

// passing function as an argument
greet('Peter', callMe);
```

## Promises
Promises is a good way to handle asynchronous operations. In other words, a Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.

This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

A Promise is in one of these states:

- pending: initial state, neither fulfilled nor rejected.
- fulfilled: meaning that the operation was completed successfully.
- rejected: meaning that the operation failed.

```js
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

myPromise
  .then(value => { return value + ' and bar'; })
  .then(value => { return value + ' and bar again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { console.log(value) })
  .catch(err => { console.log(err) });
```

##  Async and Await

The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

```js
const showPost = async() => {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
}

showPost();
```

Hope you find this post useful. Do share this post and follow me for more such informative posts.
Now UI Dashboard | Made with Angular JS
Published: 2022-06-30 12:55:30

![Now UI Dashboard | Made with Javascript | Angular JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1655864458/large_now_ui_dashboard_angular_template_free_642ed31339.jpg "Now UI Dashboard | Made with Javascript | Angular JS")


###  FREE BOOTSTRAP 4 ADMIN ANGULAR 13 TEMPLATE

> Now UI Dashboard Angular is a free Bootstrap 4 admin Angular 13 template provided for free by Invision and Creative Tim. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics. Now UI Dashboard Angular comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful.
> 
> 
> Now UI Dashboard Angular has the same design characteristics as Now UI Kit Angular, so it is quite convenient to use them together. Or you can choose between them depending on the project at hand. If you love Now UI Kit Angular, you'll love Now UI Dashboard Angular.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Now UI Dashboard on Twitter](https://twitter.com/withjavascript/status/1542490937028448257?s=20&t=mYVvma_HJpR5xk8OB-I4HA)
 |
| Medium | [Now UI Dashboard on Medium](https://medium.com/@madewithjavascript/now-ui-dashboard-made-with-angular-js-3b29ea9f2483)
 |
| Facebook | [Now UI Dashboard on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02Zt7AQqhHQFg4bMDt3jmNWmPhXbbk4qHZxuKsWoLq69rAMdMgU1mwc1nRashmLmV9l)
 |
| Tumblr | [Now UI Dashboard on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/688488378369458176?source=share)
 |
| LinkedIn | [Now UI Dashboard on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6948256767076171776)
 |
| Pinterest | [Now UI Dashboard on Pinterest](https://pin.it/5Sphd8e)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Angular JS](https://madewithjavascript.club/categories/angular-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Everything You Need To Know About UAT
Published: 2022-06-30 12:53:22

User Acceptance Testing, or as many of the developers call it UAT, is a process with the help of which you can reach the end results and give a perfect ending to your product. The analysis is done in such a way that all the loopholes are detected, and it helps the developers understand where they are going wrong. This makes them rectify the mistakes and generate amazing results. User acceptability testing is one of the most critical components of software development and change implementation. It should be done after successful unit and QA testing, whether automated, manual, or both, to ensure that your development team’s code is working as planned.

Then, just before going into production, you offer some of the people who will be using the software the opportunity to try it out. Their practical understanding of how the software operates in real-world situations may help them spot defects and ensure that the final product meets your company’s requirements. They are the last authority on the topic.

- The process of ensuring that your solution works for you and your organization is known as [user acceptance testing tool](https://www.opkey.com/blog/streamline-and-accelerate-user-acceptance-testing-uat-with-automation/).
- You won’t be able to discover the ins and outs of your integration until you complete UAT.
- UAT will also disclose whether your integration satisfies your expectations and is in line with your business procedures.

The people who will be utilizing it on a regular basis have validated and tested it. In other words, you and your software testing and quality assurance team will get a better piece of software. Manual testing is crucial because it demonstrates that critical business processes are working in a way that is appropriate for real-world scenarios and utilization.

The final phase in the software testing process is [Enterprise Test Automation](https://www.opkey.com/). This stage, which is often overlooked because of its time commitment, aids in improving software quality and the overall acceptance rate of new software.

**Conclusion**
Of course, functional professionals in charge of the technical side of software development are critical in organizing UAT cycles and interpreting the results. Business users, on the other hand, are the true stars of a successful UAT test. They’re the only ones who know how the software upgrade or bundled product should operate in practice. Get in touch with Opkey today to get the right results for your testing tools and product analysis.

Originally published at https://edutechbuddy.com on May 6, 2022.
Montserrat font
Published: 2022-06-30 12:49:32

If you find yourself interested in the [Montserrat font](https://codeprozone.com/code/css/38296/montserrat-font-google-fonts.html), then you should definitely go with the Google Fonts service. It's free and it will be fully accessible on your Android app. As for the downloading process, it's pretty simple:
LeadMonk | Made with React JS
Published: 2022-06-30 12:48:48

![LeadMonk | Made with Javascript | React JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1655743923/large_lead_monk_made_with_react_js_e5147c0750.png "LeadMonk | Made with Javascript | React JS")


### Appointment Scheduling Software

> LeadMonk is a smart and versatile appointment scheduling software for you and your business. Using LeadMonk, schedule appointments with your customers the way you want. LeadMonk is perfect for any person or business no matter if you are starting off or have been around for a while.
> 
> First online appointment booking software in the market which lets your customers book time with you using their mobile number or email address without the back-and-forth emails or messages.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [LeadMonk on Twitter](https://twitter.com/withjavascript/status/1542489227669098497?s=20&t=jcSz7rBJQZUUbeYJjmzU-Q)
 |
| Dev.to | [LeadMonk on Dev.to](https://medium.com/@madewithjavascript/leadmonk-made-with-react-js-7fa8ae2da008)
 |
| Facebook | [LeadMonk on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02ZqAAWbxUB5jFeG22Q4MZnSMc1mL7vg3xs8m4DukCVPMFh1XGCJ2itNHdCXz6JkD6l)
 |
| Tumblr | [LeadMonk on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/688487902625333248?source=share)
 |
| LinkedIn | [LeadMonk on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6948255030483320832)
 |
| Pinterest | [LeadMonk on Pinterest](https://pin.it/4239Pz7)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with React JS](https://madewithjavascript.club/categories/react-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!