teleren/devto huggingface dataset:
How to calculate the number of days between 2 dates in Python?
Tags: python
Published: 2021-04-21 17:55:00

---
title: How to calculate the number of days between 2 dates in Python?
published: true
date: 2021-02-05 11:00:00 UTC
tags: python
canonical_url: https://blog.murtajaziad.xyz/how-to-calculate-the-number-of-days-between-2-dates-in-python/
---

In this article, you will learn how to calculate the number of days between 2 dates in Python.

* * *

At the beginning, import `date` from `datetime`..

```py
from datetime import date
```

Then, define the first and second date

```py
first_date = date(2021, 1, 31)
second_date = date(2021, 2, 28)
```

Then, calculate `second_date` - `first_date`

```py
difference = second_date - first_date
```

At the end, print `difference.days`

```py
print(difference.days) # 28
```
Using husky's pre-commit hook with a GUI
Tags: osx, git, tower
Published: 2021-02-05 10:59:00

---
title: Using husky's pre-commit hook with a GUI
published: true
description: 
tags: Osx, Git, tower
//cover_image: https://direct_url_to_image.jpg
---

[Husky](https://github.com/typicode/husky) is a tool which enables you to create [git hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) easy. 

With a hook you could for example make [code linting](https://eslint.org/) and [code formatting](https://prettier.io/) mandatory on the developers machine instead of doing that on the [CI](https://www.atlassian.com/continuous-delivery/continuous-integration) service.

I found that setting up husky following [husky's documentation](https://typicode.github.io/husky/#/) does not work out of the box for Git Graphical User Interfaces (GUI).

---

# How to enable husky pre-commit hooks for Git GUI's

To enable this feature for a GUI such as [Tower](https://www.git-tower.com) or [sourcetree](https://www.sourcetreeapp.com/) follow these steps:

Create a `.huskyrc` file in your OSX home directory (`~/`). Open your terminal and run the following commands:

```bash
$ cd ~/
$ touch .huskyrc
$ vi huskyrc
```
Press `i` to enter vim's instert mode. Copy paste the following line: 

```bash
PATH="/usr/local/bin:$PATH"
```

Press `esc`. Then `:` and `wq`. Finally press `enter`.

Now doing a commit in a GUI should show you the issues with the code when doing a commit:

![git-commit-error](https://dev-to-uploads.s3.amazonaws.com/i/efespj9nj6wvlz4zsya3.png) 

[Download gist](https://gist.github.com/StudioSpindle/72d24ebdf13fa9befdb7a7d769aa8652)

# Troubleshooting

### How to solve dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.60.dylib

Adding the path to the husky file enables husky, but initially it gave the following error on my machine:

```bash
dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.64.dylib
  Referenced from: /usr/local/bin/node
  Reason: image not found
.git/hooks/husky.sh: line 15: 90006 Abort trap: 6           "$@" husky-run $hookName $gitParams
```
You can upgrade node to resolve this issue:

```bash
$ brew upgrade node
```

# Bonus

When using a node version package manager make sure to also include the following lines to .huskyrc:

```bash
# this loads nvm.sh and sets the correct PATH before running hook
. ~/.nvm/nvm.sh
```
Run Raspbian VM (ARM) in Docker container
Published: 2021-02-05 10:46:25

---
title: Run Raspbian VM (ARM) in Docker container
published: true
description: Run Raspbian via Docker Container and setup SSH connection
tags: 
cover_image: https://maker-tutorials.com/wp-content/uploads/2018/10/docker-raspberry-pi-installieren-debian-jessie-1-758x400.jpg
---

Quick tutorial how to run Raspbian in a Docker Container.
# Install Docker
## Arch
```
yay -S docker docker-compose
```

## Ubuntu
```
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
```

## Start & Enable Docker service
```
sudo systemctl start docker
sudo sysyemctl enable docker
```

# Docker Compose
`docker-compose.yml`
```
version: '3.7'
services:
   raspbian-vm:
       image: hannseman/raspbian
       container_name: raspbian-vm
       privileged: true
       ports:
         - "2222:2222"

```
## Run Docker-Compose
### Start Service
```
sudo docker-compose up -d
```
### Stop Service
```
sudo docker-compose down
```

# Alternativly run via Docker Command
```
sudo docker run -it -p 2222:2222 --privileged hannseman/raspbian
```

# Connect to Server via SSH
```
ssh pi@servername.de -p 2222
```
3 ways to convert HTML text to plain text

Tags: javascript, html, intermediate, webdev
Published: 2021-02-05 10:35:42

I was working with a rich text editor the other day and needed to strip the HTML tags from the string and store it in the database. And here are the few ways I learned that could come in handy to anyone who is trying to do the same.
What we are trying to do is remove the tags from the string and make the string printable as plain text. Let’s dive in and see how it works.

##1) Using .replace(/<[^>]*>/g, ‘’)
This method is a simple and efficient way to remove the tags from the text. This method uses the string method `.replace(old value,new value)` which replaces the HTML tag values with the empty string. The `/g` is used for it to happen globally (every value found in the string is replaced with the specified if the `/g` is used).
The drawback of this method is that we can’t remove some HTML entities. It still works well though.
```javascript
var myHTML= "<div><h1>Jimbo.</h1>\n<p>That's what she said</p></div>";

var strippedHtml = myHTML.replace(/<[^>]+>/g, '');

// Jimbo.
// That's what she said
console.log(stripedHtml);
```
##2) Create a temporary DOM element and retrieve the text
This is the most efficient way of doing the task. Create a dummy element and assign it to a variable. We can extract later using the element objects. Assign the HTML text to innerHTML of the dummy element and we will get the plain text from the text element objects.
```javascript
function convertToPlain(html){

    // Create a new div element
    var tempDivElement = document.createElement("div");
    
    // Set the HTML content with the given value
    tempDivElement.innerHTML = html;
    
    // Retrieve the text property of the element 
    return tempDivElement.textContent || tempDivElement.innerText || "";
}

var htmlString= "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>";


console.log(convertToPlain(htmlString));
// Expected Result:
// Bears Beets Battlestar Galactica 
// Quote by Dwight Schrute
```
##3) html-to-text npm package
This is the package I discovered recently. This is the converter that parses HTML and returns beautiful text. It comes with many options to convert it to plain text like `wordwrap`, `tags`, `whitespaceCharacters` , `formattersetc`.
Package.json is needed to use the package. We need to install the package first and then use it in our file.
You can find the official doc of the package [here](https://www.npmjs.com/package/html-to-text). 

####Installation
```javascript
npm install html-to-text
```
####Usage
```javascript
const { htmlToText } = require('html-to-text');

const text = htmlToText('<div>Nope Its not Ashton Kutcher. It is Kevin Malone. <p>Equally Smart and equally handsome</p></div>', {
    wordwrap: 130
});
console.log(text); // expected result: 
// Nope Its not Ashton Kutcher. It is Kevin Malone.

// Equally Smart and equally handsome

```
Find the example of the project [here](https://github.com/Sanchithasharma/htmlToText).

*And that sums it up. Thank you!!*
Generate meta tags in react js for sharing
Tags: react, metatags, webdev
Published: 2021-02-05 10:14:37

If you are building websites using react js with create-react-app it's great but we have a problem with meta tags.

Suppose you have a blog on your react js web application and you want to share your article to get more visibility, the problem is Facebook, LinkedIn and Twitter doesn't recognize your meta tags because of your index.html file from the build.

In order to have a great preview when you share an article, Facebook and LinkedIn need to have in the header of the page open graph meta tags:

```
<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:type" content="article" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
```
For Twitter we need to have another set of meta tags:

```
<meta property="twitter:title" content="" />
<meta property="twitter:description" content="" />
<meta property="twitter:image" content="" />
<meta property="twitter:card" content="" />
```
After the above meta tags are present in your article you can check how the preview share will look using the official debuggers: [Facebook debugger](https://developers.facebook.com/tools/debug/), [Linkedin debugger](https://www.linkedin.com/post-inspector/), and [Twitter debugger](https://developers.facebook.com/tools/debug/).

##How to fix meta tags in our react js app?

The only good solution would be to serve those meta tags server-side. As the official documentation suggests you can place some placeholders in the index.html file and every time you change the page the server would fill those placeholders with the right words, as an example, meta tags should look something like this:

```
<!DOCTYPE html>
<html lang="en">
<head>
 <meta property="og:title" content="__OG_TITLE__" />
 <meta property="og:description" content="__OG_DESCRIPTION__" />
 <meta property="og:url" content="__OG_URL__" />
 <meta property="og:image" content="__OG_IMAGE__" />
</head>
</html>
```
##Use an external library

There is a lot of discussions about using [react-helmet](https://github.com/nfl/react-helmet), yes is very easy to use and to update your meta tags from a component instead of changing from the index.html file.

Depends on the content of your website and what purpose should serve, in my case because I worked on a blog website the best solution was to serve those meta tags from the server.

Don't forget to use those official tools from Facebook, LinkedIn, and Twitter they help a lot.

If you like what I suggested here you can follow me on [Twitter](https://twitter.com/StefanCraciun5) or subscribe to my [newsletter](https://tinyletter.com/stefaniq1).

The original article can be found on my [blog](https://stefaniq.com/generate-meta-tags-in-react-js-for-sharing/)
Java HashMap
Tags: java, android
Published: 2021-02-05 10:13:11

In this tutorial, I will present you about the Java `HashMap` class and its various operations with the help of examples.

The `HashMap` class of the Java collections' framework provides the functionality of the hash table data structure.

It stores elements in `key/value` pairs. Here, `keys` are unique identifiers used to associate each `value` on a map.
The `HashMap` class implements the `Map` interface.


## How to Create a HashMap

In order to create a HashMap, we must import the `java.util.HashMap` package first. Once we import the package, here is how we can create `HashMaps` in Java.

// hashMap creation with 8 capacity and 0.6 load factor

```
HashMap<K, V> numbers = new HashMap<>();
```
In the above code, we have created a hashmap named `numbers`. Here, `K` represents the key type and `V` represents the type of values. For example:

```
HashMap<String, Integer> numbers = new HashMap<>();
```

Here, the type of keys is `String` and the type of values is `Integer.`


## Example 1: Create HashMap in Java

```
import java.util.HashMap;

class Main {
  public static void main(String[] args) {

    // create a hashmap
    HashMap<String, Integer> languages = new HashMap<>();

    // add elements to hashmap
    languages.put("Java", 8);
    languages.put("JavaScript", 1);
    languages.put("Python", 3);
    System.out.println("HashMap: " + languages);
  }
}
```
## Output

```
HashMap: {Java=8, JavaScript=1, Python=3}
```
Create Sitemap Using Screaming Frog - eGoodMedia
Published: 2021-02-05 10:06:31

Screaming frog is one of the well-known tools that offer a wide range of SEO tools. Using Screaming frog you can create a sitemap for your website but its free version has the limitation of 500 pages. If your website is having more than 500 pages then you can upgrade the tool to the pro version.  

The fun part is thet you don’t need to have the website access to create the sitemap. Scream frog allows you to change the code but it offers a user-friendly interface that comes with normal English where you can make the changes in the code. 
 
<a href="https://www.egoodmedia.com/how-to-create-xml-sitemap-for-your-website-to-boost-your-ranking-in-2020/">Read more</a>

Read more Articles:-
<a href="https://www.egoodmedia.com/drive-organic-traffic-without-ranking-on-google-6-ways-to-follow-in-2020/">Drive Organic Traffic Without Ranking On Google</a>
<a href="https://www.egoodmedia.com/search-rankings-dropped-heres-how-to-recover-back/">Search Rankings Dropped? Here’s How to Recover Back In 2021</a>

Contact Details:-
1-6046704333
422 Richards St Unit 170, Vancouver, BC V6B 2Z4, Canada

<a href="https://www.egoodmedia.com/">Seattle Website Design Company</a>

Visit Reference Profile Websites:-

http://bit.ly/3q47HpX
https://bit.ly/3joJ1pl
http://bit.ly/3pSysNV
http://bit.ly/39QboK5
http://bit.ly/3cMMLzJ
http://bit.ly/2YPon8m
http://bit.ly/3cH8ZDl
https://bit.ly/39Q6FrV
http://bit.ly/3cD4ytc
http://bit.ly/3pQ9puU
http://bit.ly/3jrOxaY
http://bit.ly/39CvnM2
https://bit.ly/3cvaDrp
http://bit.ly/2MrtyJ1
http://bit.ly/3jb0ba8
https://bit.ly/36y7dAA
http://bit.ly/31QBBnu
http://bit.ly/2MtMW8e
Basic Unit Test- Starting with testing with jest, Explained.
Published: 2021-02-05 10:02:37

##Testing using jest

####Unit Test

>Unit test refers to testing a unit of code any function or class 
>**without external influence**, just the functionality of single >piece of code.

__Prereq -> make a npm project by creating a folder(testing) and in cmd write npm init --yes__

Let's assume a simple js function absolute for testing purpose.

absolute.js
```
function absolute(number){      
       if(number > 0){
            return number;
       }else if(number < 0) {
            return -number;
       }else{ 
            return 0;
       }

}

module.exports.abs = absolute;

```

Its a simple function which returns absolute of any given number.

_Okay now lets install jest_

`  npm i jest --save-dev`

*Yup! Install it as dev dependencies*

_now go into package.json file of your project_

```
//You will see these lines

...//Above Code

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

...//Below Code

Change it to

 "scripts": {
    "test": "jest"
  },
```

*Concept*

>Before writing test we need to ask a crucial question
>   **How many test I should write to properly test my code ?**
>
>And the answer is
>   **Depends on code(function) execution paths**
>
>For example in our absolute function we have three execution >paths
> Execution Path -> In how many ways a function exits i.e return >statements
>To properly test it we have to write three tests !
>
> One to check the positive number case
> Second to check the negative number case.
> Third to check the zero case.






_*by default jest looks for a test or tests folder in the project directory or files ending with somename.spec.js or somename.test.js either inside the test folder or in the project directory._

> *Jest Concepts and functions*
>
>Functions
>
>*test*("First Parameter is the name of test", ()=>{//second is function where test logic is written.})
>*expect*(takes result of the function to be tested) 
>*toBe*(takes the expected output of the function)
>
>Describe is used to group the similar tests, 
>
>*describe*("First parameter is the name of test",()=>{//Series of test})
>
>*it*() is the function which we write instead of test in describe block.
>


*Lets make a folder and a file.*

_test/absolute.test.js_

*Now lets write some tests !*

```
const lib = require("../absolute");

describe("absolute", () => {
  it("will return positive number if input is positive", () => {
    const result = absolute(1);
    expect(result).toBe(1);
  });

  it("will return positive number if input is negative", () => {
    const result = absolute(-1);
    expect(result).toBe(1);
  });

  it("will return zero if input is zero", () => {
    const result = absolute(0);
    expect(result).toBe(0);
  });
});


```

> So we wrote test now lets run them 
> In the command prompt write npm test

![npm test](https://dev-to-uploads.s3.amazonaws.com/i/j1fzyr1eglouv52sc63s.PNG)


Thanks for reading till here :) 
Keep Coding.
What is Visual Studio Code 'New' Product Icon Theme??
Tags: vscode, webdev, news, update
Published: 2021-02-05 09:31:24

In Recent Update Visual Studio introduce a new theme option which will change the icons of whole vs code in general, previously you can change the icons of only file extensions but now you can change the icons of vs code side panel which include Files,Git Client, Extensions etc..

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6a3d2f2bqvpgr2cv3t5x.png)

Here How you can change the Icons, go to setting icons and select 'Product Icon Theme'.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vxvhh25rbwhpy22193p4.png)

Select the Theme and Icons will be changed.
How to Deploy your Website using GitHub Pages
Tags: github, githubpages, webdev, hosting
Published: 2021-02-05 09:11:03

Do you have an HTML website that you want to host and share with your friends?

Well, you are at the right place

## Let's Get Started!


I am going to teach you how to deploy your website using our All-time favorite software - GitHub!

#### First Off, Create a New Repo:
![Screen Shot 2021-02-05 at 2.25.39 PM](https://dev-to-uploads.s3.amazonaws.com/i/e5mjlxhabkyqfg506l5u.png)
#### Then, Add the Repo Details:
![Screen Shot 2021-02-05 at 2.29.14 PM](https://dev-to-uploads.s3.amazonaws.com/i/mn9h4phly1alrxt0i7i5.png)
#### Then, click on Upload files
![Screen Shot 2021-02-05 at 2.31.18 PM](https://dev-to-uploads.s3.amazonaws.com/i/u3ye92odpzlg6o9if7vj.png)
#### Then, upload the files and commit changes
![Screen Shot 2021-02-05 at 2.33.11 PM](https://dev-to-uploads.s3.amazonaws.com/i/5bl3kdgd85kjt7xgxwrs.png)
#### Then, Jump to Settings![Screen Shot 2021-02-05 at 2.34.22 PM](https://dev-to-uploads.s3.amazonaws.com/i/bbl62qjkzwo5h0lfed7r.png)
#### Then, scroll down to GitHub Pages and select the same options as me and click save:
![Screen Shot 2021-02-05 at 2.35.34 PM](https://dev-to-uploads.s3.amazonaws.com/i/iuo6ytywoal12h9tiiwn.png)
#### Then, wait for a while
![Screen Shot 2021-02-05 at 2.36.09 PM](https://dev-to-uploads.s3.amazonaws.com/i/cg2vcuiz3wxvsgyjjrj4.png)
#### After 2-3 minutes, you will see something like this:
![Screen Shot 2021-02-05 at 2.37.12 PM](https://dev-to-uploads.s3.amazonaws.com/i/ipaxxaguhlhjajpep3pa.png)
### Now, click on the link and VOILA! You will be able to view your website
![Screen Shot 2021-02-05 at 2.38.22 PM](https://dev-to-uploads.s3.amazonaws.com/i/qk9k3wb3afrfwb3sddys.png)

Hope you loved this Blog. Make sure to comment and like this Blog Post.

If you need any help with this, please do reach out to me in the Comments

Check out this blog on Medium: https://code2rithik.medium.com/how-to-deploy-your-website-using-github-pages-e63284724ac0

## Keep Coding Y'all 👨🏻‍💻
Azure Function - HTTPS Only
Tags: azurefunctions, azure, https, cloud
Published: 2021-02-05 09:04:59


🔒 Azure Function - HTTPS Only

❓  Vi siete mai chiesti come abilitare esclusivamente HTTPS  ...

Abilitare esclusivamente il protocollo HTTPS e' importante anche quando siamo nel contesto legato al mondo delle  Azure Functions.

5️⃣ Servono solamente CINQUE step per rendere operativa questa configurazione e sono veramente semplici e rapidi da fare!

❓ Dimmi, cosa aspetti? 

[🔗Link Articolo Completo](https://blog.devandreacarratta.it/azure-function-https-only/?utm_source=devto&utm_medium=cloud-development&utm_campaign=azure-function&utm_content=azure-function-https-only)

Per questa settimana smetto di postare a tema  Azure Function.
The Great Suspender Fork with no Tracks (removed from Chrome Store because of malware suspicion)
Tags: webdev, productivity, news, chrome
Published: 2021-02-05 09:02:12

## Notes

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2qbip6oanqdotpckwgco.png)

"The Great Suspender" is a free and open-source Google Chrome extension for people who find that chrome is consuming too much system resource or suffer from frequent chrome crashing. Once installed and enabled, this extension will automatically suspend tabs that have not been used for a while, freeing up memory and cpu that the tab was consuming.

But The Great Suspender is not to be trusted any longer—so much so, that Google removed it from the Chrome Web Store  in February 2021 for being “malware.”


## Extension without analytics tracks 

* [https://github.com/aciidic/thegreatsuspender-notrack](https://github.com/aciidic/thegreatsuspender-notrack)

* [https://github.com/aciidic/thegreatsuspender-notrack/releases](https://github.com/aciidic/thegreatsuspender-notrack/releases)

## Links

* [https://lifehacker.com/ditch-the-great-suspender-before-it-becomes-a-security-1845989664](https://lifehacker.com/ditch-the-great-suspender-before-it-becomes-a-security-1845989664)
Lockdown Fun: Pascal's Triangle
Tags: html, css, javascript, codepen
Published: 2021-02-05 08:40:34

About 7 or 8 years ago, there was a teachers-strike in Denmark, and I had to teach my daughter's class in Math. I made a lot of small "apps" and tasks, which I just uncovered from an old folder.

Here's an updated version of one: "Pascal's Triangle" — for kids of all ages in Lockdown. 

Click on all numbers divisible by 5 to see the hidden pattern!

When viewed on larger screens, you can toggle on/off the row explanations and colors. You'll also see the sum of each row at the left side of the screen. This should be a recognizable pattern to developers — tell your kids about [the power of two](https://en.wikipedia.org/wiki/Power_of_two)!

{% codepen https://codepen.io/stoumann/pen/dyOozQV %}

If you have kids that are *really* bored — set the "rows" in the JavaScript-section of the Pen to more than 50 (requires a very large screen!), and have them click on *all* numbers divisible by 5!

Have a great weekend!
Spread operator vs Rest Operator (Parameters)
Tags: react, javascript, node, redux
Published: 2021-02-05 08:30:51

**Remember:** Spread Operator and Rest operator are the same when you look, just three dots `...` But use differently. 

#Spread Operator:
Three dots `...` Used to spread up array elements OR object properties.

#### For Example
We have an old array and we want to add all the elements from that old array to a new array three dots simply pull outs all the elements and add them to the new array which we created with square brackets and of course then we can add more elements to it.
```javascript
const old_array = [1,2,3,4];
console.log([...old_array, 5]);
```
######output: 
```javascript
[1,2,3,4,5]
```
 
Spread operator used same it for the object we create a new object with curly braces with the age property but then we also have `dot dot dot old_object means to pull out all the properties of the old object and their values` and add them as a key value.
```javascript
const old_object = {
  name: 'sheraz',
}
console.log({...old_object, age: 21});
```

######output
```javascript
{name: 'sheraz', age: 21}
```



#Rest parameter:
Rest operator or Parameter is the same operator as a spread operator but used differently, `Used of merge a list of function arguments into the array`.
args received an unlimited amount of arguments, so 1 args,2,3, or whatever, we received more than one and they will merge all be merged together into an array. So we can apply the array method to our argument list or do whatever we want.
```javascript
const args = [1,2,3];
const filter = (...args) => {
   return args.filter((el) => el === 1);
};
console.log(filter(...args));
```
#####output:
```javascript
[1]
```