teleren/devto huggingface dataset:
#Day1 - Nonlocal and Global Keywords in Python
Tags: python, programming, 100daysofcode, tutorial
Published: 2021-03-21 17:12:23

<!-- wp:paragraph -->
<p>Two keywords used to change the scope of a variable.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>Nonlocal</strong></h2>
<!-- /wp:heading -->

<!-- wp:image {"id":570,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.realpythonproject.com/wp-content/uploads/2021/03/image-13.png" alt="" class="wp-image-570"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Consider the above case where we have an inner function. We are trying to print a variable that was declared in the outer function, this will compile, and "Hello World" will be displayed. However, if we try to modify the variable<strong> str</strong>, we will get an error <strong>"Variable str references before assignment".</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To avoid the error, we use the <strong>nonlocal </strong>keyword. The <strong>nonlocal</strong> keyword is used when we want to modify variables declared in the outer function.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":571,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.realpythonproject.com/wp-content/uploads/2021/03/image-14-1024x584.png" alt="" class="wp-image-571"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The above code snippet would execute without any errors</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Global</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <strong>global</strong> keyword is used when we want to modify a variable which was created outside the function.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":572,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.realpythonproject.com/wp-content/uploads/2021/03/image-15-1024x521.png" alt="" class="wp-image-572"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In the above case, we are trying to modify the variable <strong>global_str</strong> which was created outside the function <strong>func</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Example</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":573,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.realpythonproject.com/wp-content/uploads/2021/03/image-16-1024x717.png" alt="" class="wp-image-573"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>We use the<strong> nonlocal</strong> keyword to modify the variable <strong>str</strong> inside <strong>func2</strong></li><li>We use the <strong>global</strong> keyword to modify the variable <strong>global_str </strong>inside <strong>func2</strong></li></ul>
<!-- /wp:list -->
My first library😁
Tags: javascript, css, html
Published: 2021-03-21 17:03:10


Hi! I'm Gohomewho, a front-end beginner. There are so many cool things to learn in this field and I'm excited to be here. Recently, I've made my first library, it is a tooltip library. Now let me introduce it to you, and see how it works. 

---

I like to customize stuff, so I add many customizable features. sometimes it may seem to be unnecessary, but it is nice to have if you need it.



# Features:
1. Supports 8 directions and can be configured in a specific order.
2. Automatically switch to other positions if it doesn't have enough breathing space.
3. Configurable background color and text color, and the text itself of course!
4. It has a nice animation pointer. The pointer is simply an HTML entity, which means it is also configurable. if you don't like it you could exclude it!
5. Add extra space to the distance between the tooltip and element if you like.
6. You could also specify the font size and arrow size without writing CSS.


##[DEMO](https://gogotooltip.netlify.app/)

- Press ↑↓←→ to move the element. 
- To change the pointer, you can get HTML code from [here](https://www.toptal.com/designers/htmlarrows/arrows/), you have to specify the **direction** where the arrow points toward _(up/right/down/left)_. 

---

# How to use

{% github ga676005/Tooltip-Library no-readme %}

1. Download tooltip.js and tooltip.css in src folder.
2. Add them to your project.
    1. Import tooltip.js to your main.js.
    2. Add type="module" to script tag in HTML if you are not using bundler.
    3. Integrate tooltip.css to your CSS file.
3. Create an element with data-tooltip="some text". Done!

```JavaScript
Import './tooltip.js'
``` 
```HTML
<script type="module" src="main.js"></script>
```

---

I was following the markdown course on scrimba and then wrote my first article. Thanks for reading!😊
Golang Context Cancelled On Goroutine
Tags: notes, go, context, goroutine
Published: 2021-03-26 20:13:06

---
title: Golang Context Cancelled On Goroutine
published: true
date: 2021-03-21 17:00:00 UTC
tags: Notes,golang,context,goroutine
canonical_url: https://clavinjune.dev/en/blogs/golang-context-cancelled-on-goroutine/
---

Golang’s request context is automatically be done when passed on goroutine, and its parents goroutine is already done.

```go
package main

import (
	"context"
	"log"
	"net/http"
	"time"
)

func foo(ctx context.Context) {
	ctx, cancel := context.WithTimeout(ctx, 60*time.Second)
	defer cancel()

	req, _ := http.NewRequestWithContext(ctx,
		http.MethodGet, "https://google.com", nil)

	_, err := http.DefaultClient.Do(req)

	log.Println(err) // Get "https://google.com": context canceled
}

func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		go foo(r.Context())
	}) // context will be done when it reaches here

	http.ListenAndServe(":8888", nil)
}

```
All You Need to Get Started With Flask API
Tags: python, webdev, api, tutorial
Published: 2021-03-21 16:58:20

{% medium https://towardsdatascience.com/the-right-way-to-build-an-api-with-python-cd08ab285f8f %}

[Friend link (free access)](https://towardsdatascience.com/the-right-way-to-build-an-api-with-python-cd08ab285f8f?sk=6e2dda4c8b6012767114e12ff34b1464)

How can we set up a way to communicate from one software instance to another? It sounds simple, and — to be completely honest — it is.

All we need is an API.

An API (Application Programming Interface) is a simple interface that defines the types of requests (demands/questions, etc.) that can be made, how they are made, and how they are processed.

In our case, we will be building an API that allows us to send a range of GET/POST/PUT/PATCH/DELETE requests (more on this later), to different endpoints, and return or modify data connected to our API.

We will be using the Flask framework to create our API and Postman to test it. In short, we will cover:

* Setup
  * Our Toy Data
  * Initialize a Flask API
  * Endpoints
  * Running a Local Server
* Writing Our API
  * GET
  * POST
  * 401 Unauthorized
  * PUT
  * DELETE
  * Users Class (summary)
* That's It!
Build a YouTube Clone with just HTML & CSS + Responsive - For  Beginners
Tags: webdev, beginners, tutorial, html
Published: 2021-03-21 16:54:26

**Part 1: Building YouTube Clone**

{% youtube pOAwQ0FkVz8 %}

**Part 2: Adding Responsiveness to the Build**

{% youtube dioXwoNkOzg %}

**CodePen:**

{% codepen https://codepen.io/somanath-goudar/pen/eYgJQgQ default-tab=html,result %}


Do you want to improve your HTML & CSS skills? Then Watch this video and follow along with me where we build YouTube Clone using just HTML & CSS. We will be using flexbox and Google font Icons in this project.

Hope You Guys Enjoyed the Video. Like Share Comment and Subscribe to my channel for more videos like these.

**Code :** https://github.com/somanath-goudar/html-css-projects

**You may also like my other posts:**

{% link https://dev.to/somanathgoudar/facebook-clone-using-just-html-css-beginners-tutorial-2fe5 %}

{% link https://dev.to/somanathgoudar/build-a-password-generator-with-react-js-react-toastify-beginners-tutorial-4a9n %}
Create your own mkdocs with Github pages
Tags: github, python
Published: 2021-03-21 16:40:58

Here is the beginning of a series of posts that will explain how to create your own documentation project with mkdocs. For those who doesnt know what is mkdocs. Mkdocs is a static site generator (SSG) developed in Python that allows anyone to create websites fast; source files are written in Markdown and the configuration is managed by YAML files. 

First of all we need to start our mkdocs project is [install Python](https://www.python.org) and [configure Pip](https://pip.pypa.io).

Install mkdocs with Pip:
```sh
python -m pip install mkdocs --user
```

Check that mkdocs was correctly installed:
```sh
$ mkdocs --version

mkdocs, version 1.1.2 from /home/cosckoya/.local/lib/python3.8/site-packages/mkdocs (Python 3.8)
```

It's party time! By now mkdocs is already installed and we can create a new project with the following command:
```sh
mkdocs new my-mkdocs-project
cd my-mkdocs-project
```

By now you can build and check a base template project, to do that just run:
```sh
mkdocs build --clean
mkdocs serve
```
This commands would show the following message:
```
Serving on http://127.0.0.1:8000
```

And opening that URL will see your mkdocs project running :)

But, what happens if you want to create an online mkdocs project? You could use a lot of different static website providers like AWS S3, Google Firebase, Azure Static Website ... lot of options, the fast one for me is to publish it on a Github pages site.

To do that, we must create a new github repository like mine: https://github.com/cosckoya/wiki. In the "main" branch we will maintain the mkdocs project and in the "gh-pages" branch will be the static content of the mkdocs, this will be generated with the "mkdocs build" command.

We must initialize a repository with the base project folder:

Here is the thing. We can develop our mkdocs project: add some templates, web content, addons or images. After check that the site has everything and after some "build & serve"; we could deploy the site running:

```bash
mkdocs gh-deploy
```

Then navigate to your github pages site. Mine is this: 

· https://cosckoya.github.io/wiki

And that's it. Enjoy!

Reference:
· https://www.mkdocs.org
· https://pages.github.com
Ruby on Rails React developer | Introduction
Tags: react, redux, ruby, rails
Published: 2021-03-21 16:14:28

Hire me at https://www.fiverr.com/willingnguyen
{% youtube 7ravzrOm02A %}
Hi, My name is Nhut Nguyen.

I develop a website with ruby on rails from scratch.

+ Why you choose me
7 years of experience in my startup social eCommerce
Worked remote for The United States USA clients since 2011
Bachelor's degree from Vietnam national university, fluent in English
Front end back end microservices architectures
Full stack developer leader 14 +years experience in website development
Full lifecycle development
Write clean secure efficient maintainable code
Worked for Japan Singapore companies in Vietnam
Confidentiality trust

+ How it works
High quality, write all test scripts, use Front end Back end and Microservices Architectures
Update last versions
Full time 40+ hours per week

+ Frontend
ReactJS React.js 2+ years
Redux 2+ years
HTML
JavaScript
TypeScript
CSS
Bootstrap
Material UI

+ Backend
Ruby 7+ years
Rails API Ruby on Rails RoR 7+ years
Rest API
JRuby
Elixir
Phoenix
Ejabberd

+ Test
RSpec
Jest
Enzyme
Test Driven Development TDD
Behavior Driven Development BDD

+ Database
SQL
MongoDB NoSQL
PostgreSQL
MySQL
Elasticsearch

+ Operating System
Ubuntu Linux

+ Tool
Github
AWS
Heroku

+ Agile
Scrum

+ Services
Live chat streaming message eCommerce social networks e-learning healthcare game
Sticky Footer Using Flexbox With Just 4 CSS Declarations
Tags: css, flexbox
Published: 2021-03-21 16:10:53

---
title: Sticky Footer Using Flexbox With Just 4 CSS Declarations
published: true
date: 2021-03-21 16:06:00 UTC
tags: [css, flexbox]
canonical_url: https://codelab.farai.xyz/snippets/sticky-flex-footer/
---

_[Sticky Footer Using Flexbox With Just 4 CSS Declarations](https://codelab.farai.xyz/snippets/sticky-flex-footer/) was first published on [Farai's Codelab](https://codelab.farai.xyz/)._
* * *

In short, you want to make `<body>` a flex container with `min-height: 100vh;`, in the column direction and give the `<main>` element `flex-grow: 1;`. This will give the `<main>` element any remaining space, pushing the footer to the bottom.

Assuming this structure:

```html
<body>
    <header><!-- ... --></header>
    <main>
    <!--
        Whatever you main element has.
    -->
    </main>
    <footer><!-- ... --></footer>
</body>

```

You can then tac on these 4 declarations.

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

main {
    flex-grow: 1;
}

```

Here's an example:

{% codepen https://codepen.io/faraixyz/pen/wvoVZqr default-tab=result %}

There’s the issue of 100vh being strange on iOS’s WebKit. There’s a [fix for the 100vh bug](https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/), but the last time I tried it, it broke in Chrome instead.

CSS Tricks has an article which goes over various other ways to [make a sticky footer](https://css-tricks.com/couple-takes-sticky-footer/) if flexbox won’t work in your situation.

Flexbox is neat, isn’t it?

* * *

Thanks for reading! If you liked this post, consider [supporting my work](https://codelab.farai.xyz/support/) by:

- sharing my work,
- refering me for a job (or hire me for freelance work),
- sponsoring me on [Patreon](https://patreon.com/faraixyz),
- [buying Me A Coffee](https://www.buymeacoffee.com/faraixyz),
- [buying Me A Ko-Fi](https://ko-fi.com/faraixyz),
- [sending me a tip on Paypal](https://paypal.me/fgandiya),
- ~~[buy something on Amazon with my affiliate link](https://amazon.com/?tag=faraixyz03-20) (I’ll earn a commision on this as an amazon affiliate)~~,
- or [buy a domain on Namecheap with my affiliate link](https://shareasale.com/r.cfm?b=467188&u=2110247&m=46483&urllink=www%2Enamecheap%2Ecom%2F&afftrack=).
Ruby on Rails React Developer for Hire
Tags: ruby, rails, react, redux
Published: 2021-03-21 16:04:09

Hi, My name is Nhut Nguyen.

I develop a website with ruby on rails from scratch.

+ Why you choose me
7 years of experience in my startup social eCommerce
Worked remote for The United States USA clients since 2011
Bachelor's degree from Vietnam national university, fluent in English
Front end back end microservices architectures
Full stack developer leader 14 +years experience in website development
Full lifecycle development
Write clean secure efficient maintainable code
Worked for Japan Singapore companies in Vietnam
Confidentiality trust

+ How it works
High quality, write all test scripts, use Front end Back end and Microservices Architectures
Update last versions
Full time 40+ hours per week

+ Frontend
ReactJS React.js 2+ years
Redux 2+ years
HTML
JavaScript
TypeScript
CSS
Bootstrap
Material UI

+ Backend
Ruby 7+ years
Rails API Ruby on Rails RoR 7+ years
Rest API
JRuby
Elixir
Phoenix
Ejabberd

+ Test
RSpec
Jest
Enzyme
Test Driven Development TDD
Behavior Driven Development BDD

+ Database
SQL
MongoDB NoSQL
PostgreSQL
MySQL
Elasticsearch

+ Operating System
Ubuntu Linux

+ Tool
Github
AWS
Heroku

+ Agile
Scrum

+ Services
Live chat streaming message eCommerce social networks e-learning healthcare game

Hire me at https://www.fiverr.com/willingnguyen
{% youtube 7ravzrOm02A %}
Day 82 Of 100DaysOfCode: Data Manipulation With Pandas
Tags: 100daysofcode, codenewbie, womenintech, beginners
Published: 2021-03-21 16:03:32

Today is my 82nd day of the #100Daysofcode and #python learning journey. Today I gave more time to my project. I was able to build my final CSV file. As being a newbie I am going to doing my first project its all credit goes to DataCamp and Coursera. If I couldn't learn there now I can't do anything. I will try to complete my project this week.

I gave some time of the day learn from DataCamp. Did some assignments. I keep daily practicing from DataCamp. DataCamp helping me build up my coding skill.
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 82 Day of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>Data Manipulation With Pandas From [DataCamp](<a href="https://t.co/fMYHhdrr9n">https://t.co/fMYHhdrr9n</a>)<br>Gave some hours of day for project.<a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/LOqTf3sxCC">pic.twitter.com/LOqTf3sxCC</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1373662939358498819?ref_src=twsrc%5Etfw">March 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Confirm AWS Cognito signups automatically
Tags: webdev, tutorial, aws, programming
Published: 2021-03-21 15:55:58

Hey Devs

How has been your week? In today's tutorial, I will share how to automatically confirm users in your application without sending the confirmation code. 

When users signup in for your application normally you will send a confirmation code in their email or phone to confirm their account.

This tutorial will be helpful if you are using AWS Cognito. Assuming you want to auto-confirm your user's email and phone numbers. This can be done using a Lambda function.


# STEPS

- Create a Lambda function name it **confirmSignUp**. For this tutorial, I will use node runtime.

- Copy the following and paste it in the index.js file.

```javascript
exports.handler = (event, context, callback) => {

    // Confirm the user
        event.response.autoConfirmUser = true;

    // Set the email as verified if it is in the request
    if (event.request.userAttributes.hasOwnProperty("email")) {
        event.response.autoVerifyEmail = true;
    }

    // Set the phone number as verified if it is in the request
    if (event.request.userAttributes.hasOwnProperty("phone_number")) {
        event.response.autoVerifyPhone = true;
    }

    // Return to Amazon Cognito
    callback(null, event);
};

```

- Save the Lambda function and go back to AWS Cognito dashboard. **select triggers**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqrxivoqhlf1mag782j3.png)

- Finally in the **Pre sign-up** select your Lambda function and save.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n10v4d0m9ruzaretsq6m.png)


Funny thing that is all you have to do to auto-confirm user emails and passwords when they signup to your application.


Thank you.
The difference between Tiers and Layers in Software Architecture
Tags: software, architecture, development, application
Published: 2021-03-21 15:44:15

In this article, we want to talk about **layers** and **tiers** in software architecture and talk about the difference between them, and after that, in the next articles, we can talk about layers and tiers in detail. 
This article is the first of a series about Web Applications Architect.
##what are Layers in Software Architecture?
Nowadays we use multi-layer architecture in a wide range of web applications and we make microservices or other architectures for multi-layer applications.
If we want to talk about layers, we can say, each layer in an application, is a software separate part of our app that each layer has a separate duty.
For example, we can create 3 layer app with a separate controller REST API, service, and data access layer.
You can create a new layer for each logic in your app and create distinct departments to manage that part.
##so what are Tiers in Software Architecture?
Tiers are separate parts like layers but these parts are in deferent physical machines. What's mean?
For example, if you run all 3 parts in the top example (in layer part) in one machine, you have a one-tier application.
Come with me with some examples for understanding better.
Imagine we have a to-do list application. This app has a mobile app, website, restful API, and a database.

This image is our architect for this application:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1vllmatwhn987ydg8fm.jpg)

In this application, we have an app with 5 layers and 3 tiers.
Why?
In the image, I specified each tier with purple color.
The first tire is the client's phone. Because that is hardware and we run our application in that. so we have a tier for running our application. 
The second tier is our hardware to execute back-end codes (but we have 3 different sections that we talk about in layers).
And the third tier is database hardware to save our data in the database.

know I think you understand why we have 5 layers. because we have one layer on the client-side (our mobile app), one layer for our database, and in the second tier we have 3 layers! we separate our back-end logic into 3 parts.
first, we have Rest API for communicating with the mobile app, second is a back-end server for handle our logic on data and create data models, and finally, we have a Data Access layer to access our Database layer.

I hope my explanation was clear.
If you have any questions, please contact me in the comments section.
In the next sections, I will talk about layer and tier architecture in deep.
aks storage - persistent volumes, persistent volume claims and storage classes explained in plain english in less than 5 minutes
Tags: kubernetes, persistentvolume, storageclass
Published: 2021-03-21 15:21:18

---
title: "aks storage - persistent volumes, persistent volume claims and storage classes explained in plain english in less than 5 minutes"
published: true
description: "aks storage - persistent volumes, persistent volume claims and storage classes explained in plain english in less than 5 minutes"
tags: kubernetes, persistentvolume, storageclass
cover_image: https://www.azuremonk.com/assets/blogposts/video/sc.gif
---

{% youtube ggIEe8wPGJM  %}


This is the simplified visual animated explanation of Persistent Volumes, Persistent Volume Claims and Storage Classes in Azure Kubernetes Services (AKS) with the help of a real world example

In this part we will discuss : 

	1. What a persistent volume is and why it's important ?
	2. What is a persistent volume claim and how to leverage it ? 
	3. What is a storage class and how it helps in provisioning persistent volumes dynamically.
	

If you haven't seen part 1 of the video, please do check it out here --> https://www.youtube.com/watch?v=o7UTiRTfk-M where we cover : Volumes and Volume Mounts Different Kinds of Volumes - Azure Files, Azure Disks, EmptyDir, Secrets and ConfigMaps. 

https://www.azuremonk.com/video #aks #azure #azurein5minutes #aksstorage #azuredisks #azurefiles #k8s #aksvolumes #volumetypes #emptydir #secrets #configmaps #persistentvolumes #persistentvolumeclaims #pvc #persistentvolumes #pv #storageclasses https://www.azuremonk.com


https://www.azuremonk.com

AKS (azure kubernetes services) in plain english 

#aks​ #azure​ #azurein5minutes​ #aksstorage​ #azuredisks​ #azurefiles​ #k8s​ #aksvolumes​ #volumetypes​ #emptydir​ #secrets​ #configmaps​ #persistentvolumes​ #persistentvolumeclaims​  #pvc​ #persistentvolumes​ #pv​ #storageclasses