teleren/devto huggingface dataset:
How to Make Footer Stick to the Bottom of the Page
Tags: css, tutorial, todayilearned, html
Published: 2020-12-21 10:50:24

The easiest way you can make your websites `footer` stick to the bottom of the page no matter what the height of your webpage is to use CSS `flexbox`.

This is our example `HTML` webpage's code:

```html
<header>
    <h1>HEADER TITLE</h1>
    <h2>Subtitle</h2>
</header>

<div class="content">
   <h1>Content Title</h1>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
        incidunt explicabo error, maxime reiciendis consectetur sapiente velit
        perspiciatis, quibusdam enim facere praesentium vitae alias dignissimos
        debitis impedit sequi, assumenda ipsa.
   </p>
</div>

<footer>
      <h3>Created By Shafi</h3>
      <p>&copy; 2020</p>
</footer>
```

We've connected our stylesheet with this page and stripped down the default styling by using this CSS Snippet

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
}
```

At this moment our webpage looks like this:

![](https://i.imgur.com/uCyd0CU.png?)

To take our `footer` element to the bottom of the page, we're going to use our `body` element as a **flex container**. All the children of body will thus turn into individual flex items.

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

Here, using the `display: flex` turned our `body` element into a flex container.

> The flex-direction property specifies the direction of the flexible items.
We set `flex-direction`s property as `column`. Thus all the children of body will flow from top to bottom.

And we set a `min-height` property on our page so that no matter what the contents length is, the body height will at least equals to the screen size.

Well, the CSS didn't do much to our webpage, did it?

Worry not! We'd only need one more line of code to set our footer to the bottom of the screen.

```css
.content {
  flex: 1;
}
```

> The `flex` property is a shorthand property for:
* `flex-grow`
* `flex-shrink`
* `flex-basis`

> The `flex` property sets the flexible length on flexible items.

This tells our `content div` to take all the available unused space.

Our webpage now looks like this!

![](https://i.imgur.com/EFqQDOT.png?1)

Cheers 🎉

Now if we want to center all the contents inside of our `content div`, we can just turn it into a **flex container** like this

```css

.content {
  flex: 1;
  /* CENTER EVERYTHING VERTICALLY */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

```

And now the end result looks like this

![](https://i.imgur.com/sxnIYKb.png)


---

[Create an Array of Months with JavaScript](https://dev.to/shafiemoji/create-an-array-of-months-with-javascript-2cpj)
(Video Series)⚡️Docker Practical Guide⚡️: Use NGINX as a Reverse Proxy in 2021
Tags: docker, node, javascript, nginx
Published: 2020-12-21 10:46:50

It's a Series on DOCKER- ⚡️DOCKER Practical Guide⚡️
I have used NodeJS, But all the  Docker stuff in this series can be applied in any technologies like - Java, .Net, Python, Go, you name it.

In today's video, we will see how we can use Nginx docker image configure that as a Reverse Proxy in front of a NodeJS Application.

Enjoy 🌸

{% youtube HuHdViRQG_o %}

In this Series, I will post the following topics and more 🙌
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2vpj4sgpf059uvh253g.png)

As I will show some fun Docker stuff we might need in our day-to-day work, That's why the name of the series is - ⚡️DOCKER Practical Guide⚡️

SUBSCRIBE to YouTube Channel - https://www.youtube.com/c/TheDestroDevShow?sub_confirmation=1
LIKE FB Page - https://www.facebook.com/the.destro.dev.show/
Follow on Twitter - https://twitter.com/destro_mas
Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋

<hr />
As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸

<a href="https://www.buymeacoffee.com/destrodevshow" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 117px !important;" ></a>
how to create a word cloud in python?
Tags: python, wordcloud
Published: 2020-12-21 10:33:43

if you don't have python.
download on below link:
python(https://www.python.org/downloads/)

and if you have then ![image of clapping](https://dev-to-uploads.s3.amazonaws.com/i/pxpie12ndz2ljng97sui.jpg)

**start word cloud**
![image of wordcloud](https://dev-to-uploads.s3.amazonaws.com/i/pbll1iv8illry3sp3v8z.png)

**before starting the code, we have to install a module.**
pip install wordcloud
or 
conda install wordcloud

**we need some libraries-**
pip install matplotlib 
pip install numpy

## start creating wordcloud
![code](https://dev-to-uploads.s3.amazonaws.com/i/hr0qsbg55fi8qy95anv1.png)
so, we are imported modules and libraries...
and STOPWORDS is using to remove stopwords in the cloud, stop wards like is, are, HTTP etc.

![code](https://dev-to-uploads.s3.amazonaws.com/i/01j2y89oub4d5anb8k6o.png)
we have to open a txt file in reading mode and set STOPWORD by creating variables.
you can create txt file by own in notepad.

![code](https://dev-to-uploads.s3.amazonaws.com/i/hb154cb2e93rw8u7kbnt.png)
you can download spyider pic using this link:
(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kissclipart.com%2Fspider-black-and-white-widow-spider-arachnid-line-8wkqnf%2F&psig=AOvVaw21JbV148DVgwKPNtOBXZt5&ust=1608631393595000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCNCEn9bp3u0CFQAAAAAdAAAAABAO)

Using a mask you can generate wordclouds in arbitrary shapes.so we take custom mask.you change background and word size. and generate text.

![code](https://dev-to-uploads.s3.amazonaws.com/i/h7u2mx6ae1o4e9z7x0uh.png)
you must know about matplotlib library. if you don't know how it's work then click on this link :(https://matplotlib.org/3.3.3/contents.html#)
you can change figure size and if you have to save this wordcloud on your pc then save plt.savefig(text='MY wordcloud').you can use another name to save the image...


if you like this post like share and comment. Share your feedback, please 
thank you
Is there any way to mark a post has been read?
Tags: help
Published: 2020-12-21 10:29:27

---
title: Is there any way to mark a post has been read?
published: true
tags: help
---

Do not use the three buttons of heart, unicorn, and saved. 

I want to know if this article has been read before.

Even a more radical solution is to not display articles that have been read in the article list, just like RSS.
Email Subscription Box using only HTML & CSS
Tags: subscriptionform, emaisubscription, newslettersubscription
Published: 2020-12-21 10:27:47

In simple language, an email subscription form means a form where users need to enter his/her email address to subscribe to a particular website for getting notification of the latest updates from the particular website. Nowadays we can found this type of programming [Email Subscription] on various website. It is literally an important and system for the viewers to give the newest updates information to the users by messaging his email account with the help of this type of subscription.

As you can see on the given image on the webpage about this program [Newsletter Subscription Form], on the top there is one logo of email, downward of the logo there are some text and one input field for entering user email id and one button named as "Subscribe". Actually, in this programming [Email Subscription Form ], I have added some effect in the input field which appears when we click on the input field, and also I have to give hover animation on the button.

You can download all source code files from the given link. <a href="https://www.codinglabweb.com/2020/12/email-subscription-box-using-only-html-css.html">Click Here to Download all Source Code Files.</a>
How to Become Full Stack QA/ Automation Testing Engineer (2021 Edition)
Tags: testing, selenium, qa, beginners
Published: 2020-12-21 10:26:28

Join QA Tribe - http://qatribe.co/

Learn How to Become Full Stack QA / Automation Tester in 2021.

1. Why Full Stack QA/ Automation Tester?
2. Full Stack QA/ Automation Tester PATH
3. Dangers of becoming a Full-stack Tester /QA

✅ Want to Switch from Manual to Automation Testing  - https://sdet.live/print
✅ Download the PDF Notes - https://sdet.live/fullstack

{% youtube H5RKGsU8g7w %}


✅ Resources for Selenium Training with Custom Framework.
🔥🔥https://sdet.live/30dayselenium
🔥🔥https://sdet.live/2WlO

✅ If you are new consider subscribing and follow day by day to become an Automation Testing expert in 30 days.
THE BEGINNER’S GUIDE: Fast , low HTTP router and URL matcher for building Deno servers 🦕
Tags: typescript, deno, showdev
Published: 2020-12-21 10:09:33

Xanny finally reached version 1.0 in Dec 2020. According to its [official repository](https://github.com/xanny-projects/xanny), Xanny is a simple, fast and low HTTP router and URL marcher for building Deno servers.
You can assume xanny as a layer built on the top of the Deno that helps manage a server and routes. It provides a robust set of features to develop web and mobile applications.

Let's see some of the core features of Xanny framework:

- Developer friendly, very expressive and help the developer in their daily use, without sacrificing performance and security.
- Lightweight and modular design allows for a flexible framework.
- Focus on high performance.
- Middleware support, incoming HTTP request can be handled by a chain of middlewares and the final action.
- Excellent and fluent documentation.

## Install Xanny

Assuming you’ve already installed Deno, create a directory and `.ts` file to hold your code, and make that your working directory.

```sh
$ mkdir xanny-app
$ cd xanny-app
$ touch xanny_example.ts
```
So to use version 1.0.0 of xanny, you would want to import
```ts
https://deno.land/x/xanny@v1.0.0/lib/mod.ts
```
Let's start registering a couple of URL paths and handlers:

```ts
import { Application, RequestMethod, HttpRequest, HttpResponse } from "https://deno.land/x/xanny@v1.0.0/lib/mod.ts";

const app = new Application();

const r = app.NewRoute({ maxRoutes:2 });

r.WithMethods(RequestMethod.GET)
    .Path("/")
    .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.WithBody("Hello Xanny").Return();
    })
    .Path("/demo")
    .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.WithBody("Hello Xanny Demo").Return();
    });

app.ListenAndServe({ port: 8080 });
```
Here we register two routes mapping URL path to handler. if an incoming request URL matches one of the paths, the corresponding handler is called passingWe believe development must be an enjoyable and creative experience to be truly fulfilling (`HttpRequest`, `HttpResponse`) as parameters.

> As you can see Xanny provides a very simple and expressive method of defining routes and behavior without complicated routing.

To see the results you need to start a web server on your development machine. You can do this by running the following command in the `xanny-app` directory:

```ts
deno run --allow-net xanny_example.ts
```
To see your application in action, open a browser window and navigate to http://localhost:8080. You should see the Xanny 
`Hello Xanny`.

We encourage you to contribute to Xanny! Please check out the guidelines about how to proceed.

Whether you’re helping us fix bugs, improve the docs, or spread the word, we’d love to have you as part of the Xanny community! 💪💜 See CONTRIBUTING.md for more information on what we’re looking for and how to get started.
[👉 Github Repository](https://github.com/xanny-projects/xanny)
A quick introduction to Velero
Tags: devops, opensource, kubernetes
Published: 2020-12-21 10:00:27

# Introduction

- Formerly known as "Heptio Ark"
- It provides tools to Backup and Restore K8s cluster
- It consists of the following components:
    - **Server:** Runs on K8s cluster
    - **CLI:** Runs locally
- Current release: v1.5.x
- GitHub stars: 4.6K+ 

Checkout [here](https://velero.io/) for more details

# Architecture

![Velero Architecture](https://velero.io/docs/v1.5/img/backup-process.png)

**Source:** [https://velero.io/docs/v1.5/img/backup-process.png](https://velero.io/docs/v1.5/img/backup-process.png)

Velero supports the following operations:
- On-demand backup
- Scheduled backup
- Restore

Each operation is a custom resource defined with the custom resource definition and stored in etcd. Velero has controllers that act on these resources.

## On-demand backup
Creates a copy of k8s objects in the form of tarball and uploads that tarball to cloud object storage

**Note:** Backup operation is not atomic.

## Scheduled backup
As the name suggests you can schedule the backup at a particular time. You can also schedule recurrent backups. Provide `Cron` expression to specify a schedule. For e.g. Use the `0 0 * * *` Cron expression to take backup once a day.

## Restore
Creates k8s objects from the definition stored in cloud object storage.

**Note:** As a good practice always set the mode of backup storage location to `Read-Only` during restore to avoid update or deletion of backup.

Velero uses cloud object storage as a source of truth. It synchronizes data between cloud object storage and the K8s cluster.

# Features
- Filtering k8s objects based on type, namespace & label during backup and restore
- TTL (Time to Live) for backups. Backup resources will be deleted after TTL is reached
- Different lifecycle hooks for both backup and restore operations
- Supports namespace remapping i.e. K8s object from namespace `A` can be restored to namespace `B`
Does calling super() affect instances of a subclass?
Tags: help, java, watercooler, gamedev
Published: 2020-12-21 09:26:45

(i.e. is calling `super()` the same as calling `this()`, but for calling the parent class?).

Does calling `super(...)` affect fields/methods of a subclass, like calling `this(...)` would?
E.g., for:
```java
class SuperClass {
    private boolean solid;
    public String name;
    public SuperClass(boolean solid, String name) {
        this.solid = solid;
        this.name = name;
    }
}

class SubClass {
    public SubClass(boolean solid, String name) {
        super(solid, name);
    }
    public SubClass(boolean solid) {
        super(solid, "");
    }
    public SubClass(String name) {
        super(false, name);
    }
}
```
and had `SubClass sc = new SubClass(true, "MyEntityPrototype");`, would the fields `solid` and `name` be changed for `sc`?

<div>
##<b><center><b>Thanks!<br/>Cheers!</b></center></b>
</div>
Add code snippets using Gridsome Prism.js plugin
Tags: webdev, beginners, prismjs, gridsome
Published: 2020-12-21 09:24:48

![Code snippet](https://dev-to-uploads.s3.amazonaws.com/i/bp87vwioifx2kjxyvb2y.png)

Code snippets are a key part of writing for any developer. In this post, I am going to walk you through a simple way to add code snippets to your posts.

<h3>Install plugin</h3>
<br>

install the prism.js plugin by running the command below in your terminal.

```html
npm i gridsome-plugin-remark-prismjs-all
```

<h3>Add plugin in gridsome.config.js</h3>
<br>

```js
// In your gridsome.config.js
transformers: {
    //Add markdown support to all file-system sources
    remark: { 
      externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
      anchorClassName: 'icon icon-link',
      plugins: [
        'gridsome-plugin-remark-prismjs-all',
      ]
    }
  }
```
You could set custom class names which you can use for styling as shown below

```js
// In your gridsome.config.js
transformers: {
        plugins: [
            [
                "gridsome-plugin-remark-prismjs-all",
                {
                showLineNumber: true,
                highlightClassName: "gridsome-highlight",
                codeTitleClassName: "gridsome-code-title",
                classPrefix: "language-",
                },
            ]
        ]
    }
```
<h3>Add a theme in your main.js</h3>

There are 3 different themes presently available, you can import anyone as shown below

```js
require("gridsome-plugin-remark-prismjs-all/themes/night-owl.css");
```

```js
require("gridsome-plugin-remark-prismjs-all/themes/solarized.css");
```

```js
require("gridsome-plugin-remark-prismjs-all/themes/tomorrow.css");
```


<h3>Add Code Snippet to file</h3>

Wrap your code in triple backquotes then specifying the code language. Check out some examples and their resulting renders below.

Example 1

<pre>
```js
  let number = 4;
  console.log(number);
``` 
</pre>

Render
```js
let number = 4;
console.log(number);
```

Example 2
<pre>
```css
  body {
    min-height: 100vh;
    background-color: transparent;
    line-height: 1.5;
  }
``` 
</pre>

Render
```css
body {
    min-height: 100vh;
    background-color: transparent;
    line-height: 1.5;
}
```
<a href="https://lindaojo.com/articles" target="_blank">Read other articles
</a>
How gamification helps us learning
Tags: leadership, todayilearned, todayisearched, app
Published: 2020-12-21 09:11:43

Even digital education may seem a boring and complicated process. People always added games and little entertainment to learning to make this process of getting knowledge funnier. Today we use the term “Gamification” when we talk about a new approach of implementing games in digital education. If you consider any advanced E-learning app or website, you’ll see there not only educational materials, but also some gamification features. 

How does gamification work for an education website or an app?
 
* It makes students feel more motivated to do each task and the whole course to the end. 
* Besides motivation, it improves their self-confidence.
* It boosts users not to be afraid to fail. 
* Games establish team-work skills.
* It also works as a reward system and helps see results right here and now. 
* Gamification features may guide a student through a course.

You can build a gamification feature in an education site or app using any strategy that you think will work for your audience. 
For example, content gamification where you write the story and embed it to the course, or structural gamification where you can use particular tasks such as quizzes.
 
We can’t imagine education without gamification. It encourages students as well as their teachers. Technology of today provides us a great opportunity to make a digital education more colorful and exciting.  
Would you like to know how gamification can upgrade your business? 
Read <a href="https://exceed-team.com/blog/gamification-examples-in-education-websites">the full article</a> or contact us.
Iconify the app icon creator for multiplatform
Tags: webdev, android, ios, flutter
Published: 2020-12-21 09:01:12

Hello guys, i made this app developing tool Iconify (https://www.iconify.pro/) with html, javascript and css. It solves some trouble when you are creating icons for your app.
Iconify is a handy and powerful application providing icons creating support for multiplatform(iOS, Android, Flutter, React Native, Cordova, Web APP, macOS, iWatch, Windows Phone, Quasar). It allows app developers to create a whole set of icons in various sizes with just one click, extremely time-saving and convenient.
Is it useful? I am working on the apps, i can really use some advice. Thanks
Nginx configures free SSL certificate in Windows environment (Let’s Encrypt)
Tags: nginx, encrypt, ssl
Published: 2020-12-21 09:00:17

Nowadays, Baidu, Google, Github and other websites have enabled https on the entire site. https is like a "lock" on the website. What HTTPS does is to encrypt the request to make it more secure for users. In addition to protecting the interests of users, it can also prevent the traffic that belongs to itself from being hijacked. Google has defined http as an insecure website. In my opinion, HTTPS is the future trend.


  > 1、The deployment environment is Winodws Nginx
    2、Let's Encrypt is a public free SSL project abroad, hosted by the Linux Foundation and initiated by organizations such as Mozilla, Cisco, Akamai, IdenTrust, and EFF!
    3、The certificate is valid for three months, and the visa certificate needs to be renewed every three months 
    4、Use win-acme tool to generate Let's Encrypt certificate

**start**

1.  Download the latest version of win-acme on github <a href="https://github.com/win-acme/win-acme/releases/"   target="_blank">download win-acme</a> [My version win-acme.v2.1.12.943.x86.pluggable]

2.  [download nginx。](http://nginx.org/en/download.html  "download ") 

3.  Unzip win-acme, open wacs.exe

4.  choose M [**Create certificate(full options)**]

5.  choose 2 [**Manual input**] ， then enter your domain ,
[such as : auto.example.com] , then press enter next.

6.  choose 6 . verify domain with dns

7.  choose 2. RSA

8.  choose 2. nginx container . then enter your Local storage file path . [such as : D:/ssl]

9.  Choose the last of the next two options - pass

10. Don’t rush to the next step at this time, look at the information given 
    > domain  : your domain
      record  : host record
      type    : record type 
      content : record value
now，Go to your domain name resolution backend and fill in the corresponding value ， then press enter 

11. If the verification is successful, go to your local directory to see if the encrypted file has been generated
   ![local file](https://github.com/nalani5210/love.github.io/blob/bolg/Windows%E7%8E%AF%E5%A2%83%E4%B8%8BNginx%E9%85%8D%E7%BD%AESSL%E5%85%8D%E8%B4%B9%E8%AF%81%E4%B9%A6(Let%E2%80%99s%20Encrypt)/%E6%9F%A5%E7%9C%8B%E6%9C%AC%E5%9C%B0%E6%96%87%E4%BB%B6-en.png?raw=true "local file")

12. Configure nginx, open /conf/nginx.conf then start nginx

```
	server {
		listen       443 ssl;
		server_name  your domain;
		ssl_certificate      D:/nginx-1.15.6/ssl/xxxxx-chain.pem;  
		ssl_certificate_key  D:/nginx-1.15.6/ssl/xxxxxx-key.pem;  
		ssl_session_timeout 5m;
		charset utf-8;

        location / {
            root  D:/index/;
	        index index.html;
        }
	}
```

My small website has been configured with https . https://www.jsonformatting.com/

tips 
> The validity period of the certificate is 90 days
> [application restrictions](https://letsencrypt.org/docs/rate-limits/  "application restrictions")
Use Multi-select Autocomplete JQuery With Example.
Tags: javascript, php
Published: 2020-12-21 08:58:55

You will use a lot of time autocomplete for a single option using the jquery UI plugin. But you can learn multi-select autocomplete using jquery UI use this tutorial. In the below preview you can see the output of your multi-select autocomplete dropdown because it's like choose js or something like the plugin. In this example,

**[Use Multi-select Autocomplete JQuery With Example.](https://www.phpcodingstuff.com/blog/use-multi-select-autocomplete-jquery-with-example.html)**