teleren/devto huggingface dataset:
Button Hover Effect in HTML and CSS (CSS Animation)
Tags: css, html, animation, webdev
Published: 2021-08-29 15:35:57

Simple Button hover Effect using HTML and CSS
### HTML Code:
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="main-content">
        <div class="button-main">
            <button class="button"> Hover me</button>
        </div>
    </div>
</body>
</html>
```
### CSS
```
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body{
    background-image: url('bg.jpg');
}
.main-content{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.button-main{
    position: relative;
}
.button{
    padding: 20px 70px;
    background-color: #e15f41;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.button:focus{
    outline: none;
}
.button:hover{
    background-color: #000;
}
.button:before, .button:after{
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    border-style: solid;
    border-width: 0;
    content: "";
    height: 24px;
    position: absolute;
    width: 24px;
    border-color: #000;
}
.button:before{
    border-left-width: 2px;
    border-top-width: 2px;
    left: -5px;
    top: -6px;
}
.button:after{
    border-bottom-width: 2px;
    border-right-width: 2px;
    bottom: -5px;
    right: -6px;
}
.button:hover:before, .button:hover:after{
    height: 100%;
    width: 100%;
}
```
Output:
![Button Hover Effect Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8ua5u37x8d1rmwxjws0.gif)Preview: https://button-hover-effects.vercel.app/
My Blog:- https://beginners-developer.blogspot.com/
✨♻️ Rust Visualized: Pointers as References
Tags: rust, beginners, programming, computerscience
Published: 2021-08-29 15:35:06

How do we visualize __pointers__?


A __pointer__ points ➡️ to a location in memory. This location in memory contains information that is of interest to us. 

## 📕 References

You can think of the table of contents in a book containing pointers to the chapters in that book.


![pointer1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ke3wsrg9r0h7g1lboa4i.jpeg)

The table of contents in a book points you to where the chapters in the book are. The pointers don't actually contain the data they are pointing to.

In Rust, this type of pointer is a __reference__ to some other data.


![pointer2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og7zqayitdvji0vvgeb0.jpeg)

A book that has six chapters gets edited and the sixth chapter is removed. Now, if the table of contents points to Chapter 6 but the book only has 5 chapters, the table of contents is wrong. 

A reference to a location in memory that has been cleaned up is an invalid reference.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j9jhj1y3rujvg0swiaz.gif)


Rust has mutable and immutable references. Mutable references allow you to change the value they point to, but immutable references just let you see the value they point to.

Using `&` or `&mut` points to memory owned by some other value.

If you try to make immutable and mutable references to the same value at the same time, your code will not compile.

At any given time, you can have one mutable reference to a value or an infinite amount of immutable references to a value.
![ahh](https://i.ibb.co/hKPkk41/6-F52-B720-B919-473-B-B197-0089-AA6-EFA4-E.gif)

Where does the idea of _borrowing_ come from? You can reference values and make use of those references, but your use of these references is temporary.

When you have a reference to another value as the parameter of a function in Rust, you do not own that value, you're just borrowing it. When you borrow something, you have to give it back.

If you're borrowing a value at the start of a function, you have to give it back at the end of the function.

![borrow_example](https://i.ibb.co/Wf1y9WH/F56332-E6-36-B7-4-FA0-84-B9-0421-C6-F02-D96.gif)

In `calculate_length(s: &String)`, the function's parameter `s` is a reference to a string. At the end of `calculate_length(s: &String)`, the memory allocated to `s` gets cleaned up. Because `s` is just a reference to `String`, nothing happens.



## 🍕 Slices

What if you need to reference part of something instead of the entire thing? This is where the slice type becomes useful. In Rust, you create string slices by writing  `&word[starting_index...last_index_plus_one]`.

![carbon](https://i.ibb.co/rMsn5ZG/slice-png-001.png)
Golden Source of Data
Tags: database
Published: 2021-08-29 15:15:37


This article aims to illustrate and help you understand how the whole request response flow is like , with the addition of understanding how remote and local state ties into this process.

![Screenshot 2021-08-29 at 9.35.19 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uca4d9ecjwlkndlaqv50.png)

Our Remote source also known as the database is our Golden Source of Data. One thing to note is that our local state , be it redux or context etc , will always be chasing to be up to date with our remote source. In the diagram above we will see what it actually means.

In the example of a toggle button , on the UI , the user clicks on the toggle button , intending to change the "No" to a "Yes". With that click, an API request is sent to the server and a check is done if everything is in order in the request (e.g are the right parameters provided).

If its a success , the server then proceeds to update the database with the value , changing that specific column from a "No" to a "Yes". It's important to note that at this point our Remote State and local state are not in sync.

With the success and change in the remote state value , our API replies with a success response, it replies with the value that has been changed , a "Yes". This value is then passed down to update our local state.

On changing our local state, the page reading the data from the local state will now see the changes and reflect the changes accordingly in the UI , in this case changing the toggle button from a "No" to a "Yes".

But in the event that the request fails, the API will reply with an error response, usually accompanied by the error message. And it is up to us how we will use that error message returned to handle the error. In this case the local state is not updated as there is no change in the remote state. Ultimately no change in the UI as well , except for a error message displayed.

As much as this maybe a generally easy concept to some and also only taking a split second in the UI to happen , so much goes on in that split second. And it is important that we are keeping track of the process each step of the way.

For a TLDR:
Remote source is always the golden source of information , your local state should always be trying to catch up with the remote state. And any changes made should always be reflected on the remote state first , followed up a success response to update the local state , and with the update in the local state it will update the UI.

Hope this article proves to be of help to anyone reading this. Please do drop me your feedback on my writing or even drop a message to connect!
"ModuleNotFoundError: No module named 'website'. 
Tags: python, macbook, flask
Published: 2021-08-29 15:03:30

Hello guys I need your help Im using python language on my MacBook trying to create a website with it. But when I inserted the word website in visual code and tried to run it, it pops up the error. I need your help guys. What do I need to do to get my MacBook working with python, or what kind of python interpreter best work with MacBook. Or do I need an extension, is there other words that works besides using the word website.
JavaScript basics arithmetic operators
Tags: javascript, beginners
Published: 2021-08-29 14:56:15

Doing math in JavaScript is a prevalent task. We often want to perform some sort of calculation on one or two numbers.

This is where arithmetic operators come in!
Let's see which ones we can use in JavaScript:

| Operator | Description    |
| -------- | -------------- |
| `+`      | Addition       |
| `++`     | Increment      |
| `-`      | Subtraction    |
| `--`     | Decrement      |
| `*`      | Multiplication |
| `**`     | Exponentiation |
| `/`      | Division       |
| `%`      | Modulus        |

Let's have a more detailed view of each of these arithmetic operators in JavaScript.

## JavaScript Addition (+)

This can be used to add two numbers, an example:

```js
const a = 5 + 2; // 7
const b = a + 3; // 10
```

However, be aware the plus sign is also used to combine strings, so doing something like this might surprise you:

```js
const a = '3' + 3; // 33
```

This happens because it will take the first three as a string and place the number behind it.

## JavaScript Increment (++)

This is a super handy operator to quickly increment a number, be aware it has two implementations that can return different results.

In the most basic form it's used like so:

```js
let a = 1;
a++; // 1
console.log(a); // 2
```

Not that the actual operator does not yet return the new value directly.
We can change that behavior by putting the `++` before it.

```js
let a = 1;
++a; // 2
console.log(a); // 2
```

However, you rarely want to use the value directly.

## JavaScript Subtraction (-)

As we can do addition, we can also subtract two numbers:

```js
const a = 4 - 2; // 2
```

Weird enough, this will subtract from a string!

```js
const a = '5' - 2; // 3
```

## JavaScript Decrement (--)

Or we can decrement a value.

```js
let a = 5;
a--; // 5
console.log(a); // 4
```

## JavaScript Multiplication (\*)

This is used to multiply two numbers.

```js
const a = 2 * 5; // 10
```

## JavaScript Exponentiation (\*\*)

This is a short-hand way to use the `Math.pow()` function.

It will raise the first number to the power of the second.

```js
const a = 5 ** 3; // 125
```

Which is the exact same as:

```js
const a = Math.pow(5, 3); // 125
```

## JavaScript Division (%)

The division is used to divide two numbers.

```js
const a = 10 / 2; // 5
```

## JavaScript Modulus (%)

The modulus operator is also known to get the remainder of a division operation.

```js
const a = 10 % 2; // 0
const b = 10 % 3; // 1
```

Meaning with the first division, we don't have any number left. For the second one, we will keep the number 1 as a left-over.

And with that, we reached the end of the article. I hope you have a solid understanding of JavaScript arithmetic operators.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Environment Variables in SvelteKit and Vercel
Tags: sveltekit, vercel, webdev
Published: 2021-08-29 14:56:05

This post is from [my blog](https://blog.hdks.org/Environment-Variables-in-SvelteKit-and-Vercel/).

---

When using environment variables in web apps, we use it as `process.env.YOUR_ENV` in most cases.

I wrote about **deploying SvelteKit app with Vercel** in the [previous post](https://blog.hdks.org/Deploy-SvelteKit-App-with-Vercel).
In this post, I tell you about using environment variables in SvelteKit and using them in Vercel as `process.env`. 

### 1. Create a `.env` file

At first, create a `.env` file in your project root and then add some variables. For example: 

```javascript
// .env
VITE_MY_API_KEY="<MY_API_KEY>"
VITE_MY_URL="<MY_URL>"
```
Note that you should add prefix **VITE_** to your variables. This is because **SvelteKit** uses [Vite](https://vitejs.dev/) under the hood.

I recommend you add `.env` to `.gitignore` by the way.

### 2. Using environment variables in SvelteKit

Convert variables so that it can be used in your project.
For example, create `Env.js` in `lib` directory and declare them.
Note that the file name(here `Env.js`) is arbitrary, but not a `.svelte` file. 

``` javascript
// src/lib/Env.js
export const MY_API_KEY = import.meta.env.VITE_MY_API_KEY;
export const MY_URL = import.meta.env.VITE_MY_URL;
```

`import.meta.env` is the object in **Vite**. 

You can now use them in your project.  

``` javascript
// sample.svelte
import { MY_API_KEY } from '$lib/Env';

console.log(MY_API_KEY);
```

### 3. Using them as `process.env` in Vercel app

To use your environement variables as `process.env` in **Vercel**, you should add the setting in `svelte.config.js`.

``` javascript
// svelte.config.js

const config = {
    kit: {
        // ...
        vite: {
            define: {
                'process.env': process.env,
            },
        },
    }
};

export default config;
```

Check the following settings `compilerOptions.paths` of `jsconfig.json`. If not, add it. 

``` javascript
// jsconfig.json
{
    // ...
    "compilerOptions": {
        "baseUrls": ".",
        "paths": {
            "$lib": ["src/lib"],
            "$lib/*": ["src/lib/*"]
        }
    },
    // ...
}
```

Finally, although I don’t know this is the best practice, use them as follow for instance: 

``` javascript
// sample.svelte
import { MY_API_KEY } from '$lib/Env';

let myApiKey;

if (process.env.NODE_ENV === 'production') {
    // For production
    myApiKey = process.env.MY_API_KEY;
} else {
    // For development
    myApiKey = MY_API_KEY;
}
```

### 4. Configuration in Vercel

*See this [article](https://blog.hdks.org/Deploy-SvelteKit-App-with-Vercel) for how to deploy your app in Vercel.

Add your environment variables in the Vercel Settings.  

![screenshot](https://blog.hdks.org/images/Environment-Variables-in-SvelteKit-and-Vercel/screenshot_1.png)

### 5. Done

You can now use `process.env` in SvelteKit app hosted with Vercel.
IST 402: Web Components Development Intro
Published: 2021-08-29 14:56:02

Hello everyone! My name is Bailey Pardee and I am from Pittsburgh, PA.  I am currently a senior studying Human-Centered Design and Development with a focus in Security and Risk Analysis at Penn State University. This semester, I am taking a Web Components Development course to further my understanding of web development. Over the summer, I interned with FedEx on a sort systems team where I had the opportunity to work on actual stories and defects from my team's backlog that are used in production today. Following the completion of my internship, I was lucky enough to be offered a full-time position at FedEx as a Full Stack Developer upon graduation. On the first day of this course, my professor referred to Full Stack Developers as unicorns and I still haven't decided if that's a good thing or a bad thing but I guess I'll find it out! My time at FedEx allowed me to further my Java skills and experience a variety of new technologies that I look forward to working with in the future and hope to be able to expand on with this course.
Top 5 JavaScript animation libraries 2021
Tags: javascript, codepen, gsap
Published: 2021-08-29 14:47:38

Animations are the **game changer** when it comes to quality user experience. **Everyone wants to use it** but in a way that website visitors don't want to quit. So I've gathered here best five JavaScript animation libraries. **Let's start:**

### 1. Anime.js
[Anime.js](https://animejs.com/) is a **lightweight JavaScript animation library** with a simple, yet powerful API. It works with **CSS properties, SVG, DOM attributes and JavaScript Objects.**

*Well just look at this example:*

{% codepen https://codepen.io/ainalem/pen/jBZxYe %}

### 2. Vivus
[Vivus](http://maxwellito.github.io/vivus/) is a lightweight JavaScript library *(with no dependencies)* that allows you to animate **SVGs,** giving them the appearence of being drawn.

*Just interact with the example below by clicking and holding:*

{% codepen https://codepen.io/mattrothenberg/pen/Ramwvw %}

### 3. GSAP
[GSAP](https://greensock.com/) is a JavaScript library that is turning **developers into animation superheroes.** It is one of the most popular javascript libraries out there. You can animate **almost anything** with the help of this library.

*Just use this library to create awesome animation like one given below:*

{% codepen https://codepen.io/GreenSock/pen/yhEmn %}

### 4. Typeit.js
 [Typeit.js](https://typeitjs.com/) allows creating **awesome typing animation** in your website. If you want to add typing animation on your website then go for it.

*Just look at this cool story of a programmer*

{% codepen https://codepen.io/alexmacarthur/pen/MOPQvp %}

### 5. ScrollOut
[ScrollOut.js](https://scroll-out.github.io/) is a javascript library that **detects changes in scroll for reveal, parallax, and CSS Variable effects.**

*Just scroll down this codepen*

{% codepen https://codepen.io/notoriousb1t/pen/zLbVEW %}

May be I've missed some other cool libraries, *just let me know in the comment section down below.* And I can't forget Threejs also.
How to Flash ESP-01 with esptool
Tags: flash, hardware, iot, esp01
Published: 2021-08-29 14:46:55

Hello.,

I am just learning how to flash firmware in ESP-01. So, i just wanna share what i learned.

Let's get started.

First. you need some hardware to flash ESP-01. the hardware is:
1. Arduino Uno R3
2. ESP-01 (Of Course)
3. Jumper Cable
4. Bread board

And you need software also:

1. Esptool (Python, Pip)
2. Arduino IDE
3. Firmware

## Installation Software
In case, i assume you already install Arduino IDE and because i am a linux user, python was already installed in my system. So, i just explain how to install esptool and pip.

First, open your terminal and install pip with this command:

> `$sudo apt install pip`

And then, install esptool with pip.

> `$sudo pip install esptool`

After esptool installed, we ready to flash our ESP-01. before we flash it, don't forget to download the firmware. here i use firmware from ai-thinker. you can download it in [Link](https://raw.githubusercontent.com/sleemanj/ESP8266_Simple/master/firmware/ai-thinker-v1.1.1-115200.bin). you can also use another firmware like Micropython.

## Wiring
We wire up the circuit to make Arduino Uno into USB-to-Serial Converter. then, we can flash ESP-01 through Arduino Uno. you can follow this scheme:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3pwkqtegk1hkmis6n9v.png)

Be careful, and double-check your wiring before your connect the Arduino to your computer. otherwise, your circuit will be short.

##Erase & flash Firmware in ESP-01
Previously, we were already install esptool. we can use esptool to 
erase and flash firmware in ESP-01. 
###Erase Firmware
You can follow this command to erase firmware:
> `$sudo python3 esptool.py --port /dev/ttyUSB0 erase_flash`

If you found errors, remove the usb and plug it in again. and repeat the command after 5s.

###Flashing Firmware.
You can follow this command to flash firmware:
> `sudo python3 esptool.py -p /dev/ttyUSB1 -b 115000 write_flash 0x000000 ai-thinker-v1.1.1-115200.bin`

If you not found any errors, you already succeed to flash firmware in ESP-01.
Deploy SvelteKit App with Vercel
Tags: svelte, sveltekit, vercel, webdev
Published: 2021-08-29 14:41:32

I've been fond of [Svelte](https://svelte.dev/) since last year, and just the other day I made a new [web app](https://storenft.hdks.org/) with [SvelteKit](https://kit.svelte.dev/).  
It is deployed with [Vercel](https://vercel.com/), but I struggled a little when deploying it so I write how to deploy with Vercel.

### 1. Create a SvelteKit app

```bash
npm init svelte@next my-app
cd my-app
npm install
npm run dev
```

### 2. Add an adapter in a configuration file

At first, install the depencency.

``` bash
npm i -D @sveltejs/adapter-vercel@next
```

Don't forget to add a suffix (**`@next`**) to the package name at this point.  


And then,  add a value into `adapter` in a `svelte.config.js`.

``` javascript
import vercel from '@sveltejs/adapter-vercel';

const config = {
    kit: {
        // ...
        adapter: vercel(),
        // ...
    }
}
```

This will output `.vercel_build_output/` directory for hosting by Vercel.


### 3. Push it on GitHub

``` bash
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/<YOUR-USER-NAME>/<YOUR-REPOSITORY-NAME>
git push -u origin main
```

Please see [the guides](https://github.com/git-guides/) for details.


### 4. Go to Vercel. It's done.

Ok, Vercel should now build correctly and display your web app.  
Go to Vercel and import your git repository.
Restaurant Website
Tags: codepen, css, html, webdev
Published: 2021-08-29 14:14:10

Restaurant Website design using html and css. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqog29rgsb8wz7walg7g.png)

Codepen link:
https://codepen.io/sanketbodke/pen/bGRVKYr

Also follow me on Github:
https://github.com/sanketbodke
[Discussion]Open Source Contribution (Devto Android app)
Tags: dev, community, android, opensource
Published: 2021-08-29 14:10:52

Hello everyone,
Myself Atharva and I m Open Source enthusiast and I want to know how can I start contributing to Devto Android app.
I'm familiar with open source contribution using GitHub but I want to become familiar with Devto Android app codebase.
If you have ever contributed to Devto Android app.
Please guide me
Make your Own Portfolio Website Through: CSS3 & HTML5
Tags: html, css3, webapp
Published: 2021-08-29 14:10:12

By only two things you can make your own portfolio website which is HTML5 & CSS3. Through this portfolio you can showcase your till date projects to the people. You can also add different type of features according to your wish, for reference like adding your blogs, your accomplishments, a short biography, your skills and many more things.
Here I'm going to tell you how to structure your portfolio using HTML5  and make it beautiful through the help of CSS3.
<br>

###To begin with first let's understand what is HTML5 and CSS3?

######Html5: It is a *Hyper Text markup language* used in presenting and structuring your content in World Wide Web. It has been developed by *WHATWG AND W3C group*.
######CSS3: It is a latest version of *Cascading Style Sheet* language  which introduced with brand new features like shadow effect, tables, rounded corners, etc. CSS was 1st introduced by Hakon Wium Lie in 1994.
<br/>
###HTML5 structure
 First and foremost thing you will need to make a navigation bar which will direct the person using it to the different pages mentioned in it. The active page of your portfolio will be Home where you will add your skills, link to your project page and blog page. Afterwards you will create different section with the help of unordered or ordered list and add the things you want show for example your skills, project and blog and you can also add a button for project and blog section with anchor tag and href attribute to it to direct the user to that page directly. At the bottom you will make a Footer where you can add your social media link with anchor tag and href attribute. And you are done with html part. 
Now lets move to the css directly. 
<br>

###CSS3 Structure 
Through CSS3 you can do vast type of things like you can different type of colors, background-color, images, background-images, font-style, etc. 
For the portfolio first of all you will select the color theme for it. Afterwards you can add your favorite font style through google fonts or any other website by adding the link in the sheet. Last but not least you can add any images to make it more beautiful and relevant. The exciting part of CSS is that you can control every aspect of your website like width, height, size, color, shadows, and end number of things.
What is a void operator in Javascript?

Tags: javascript, react
Published: 2021-08-29 14:07:08

The void operator returns an undefined value from an evaluated expression.

![void operator in javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0z5lemli5sxqgq2z4e35.png)


Thank you for your time. Share your opinion about it in the comments 👇