teleren/devto huggingface dataset:
HTML CSS Image split 3d hover effect
Tags: html, css, 3d
Published: 2021-05-04 09:40:58

---
title: HTML CSS Image split 3d hover effect
published: true
description: HTML and CSS Image split when hover, image will split in 4 items.
tags: html,css, 3d
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t243cdhzlf3yqpzi5942.png
---

##HTML CSS Image split 3d hover effect
{% youtube HcCtBpznneE %}

CSS is making images split into 4 items with background size and position.
**HTML**
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="image_3d">
        <span></span><span></span><span></span><span></span>
    </div>
</body>
</html>
```

and 

**CSS**

```
*{
    box-sizing: border-box;
}
body{
    margin: 0;
    display: grid;
    place-items: center;
    height: 100vh;
}
.image_3d{
    perspective: 1000px;
    width: 960px;
    height: 640px;
    box-shadow: 3px 5px 25px 8px rgba(0, 0, 0, 0.2);
}
.image_3d span{
    display: block;
    height: 160px;
    transition: 1s;
    transform: rotateY(0deg);
}
.image_3d:hover span{
    transform: rotateY(360deg);

}
.image_3d span:nth-child(1){
    background: url('./child-5582985_960_720.png') 0px 0px/cover no-repeat;
    transition-delay: 0s;
}
.image_3d span:nth-child(2){
    background: url('./child-5582985_960_720.png') 0px -160px/cover no-repeat;
    transition-delay: .1s;

}
.image_3d span:nth-child(3){
    background: url('./child-5582985_960_720.png') 0px calc(-160px * 2)/cover no-repeat;
    transition-delay: .2s;

}
.image_3d span:nth-child(4){
    background: url('./child-5582985_960_720.png') 0px calc(-160px * 3)/cover no-repeat;
    transition-delay: .3s;

}
```

this is actually tricky to make image splitting.
You can see image properties size it has `width: 960px;
    height: 640px;`
so here is the trick.
Just making span tags we can split by doing their background-position and background-size.
If you like this tutorial, don't forget to share your thoughts.
Bye.
VSCode tips: commit characters
Tags: vscode, productivity
Published: 2021-05-04 09:36:41

VSCode is a really powerful editor, so powerful that there are a lot of features which we might never use. I want to highlight one of these tips here.

I'll show you this feature called commit characters. Commit characters are a set of characters, which are different for every language, which trigger autocomplete _and_ add the character to the end of the autocompleted value. 

In english: Commit characters are a bunch of characters which we use instead of <kbd>enter</kbd> when selecting an option from the autocomplete. What is special about these characters are that the commit character chosen will be added to the end of the autocompleted value.
 

If that doesn't make too much sense, don't worry, there's a gif coming up.

In Javascript, the commit characters are "`;`", "`.`", "`(`" etc.

Here's how commit characters work:

![vscode-commit-chars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb7n6ezs2l6x6e7hju21.gif)

It saves you that one extra keystroke which I think editors should autofill anyways.

Thanks for reading!
What makes it so hard to implement accessibility?
Tags: webaccessibility, a11y, codeiscolorful
Published: 2021-05-04 09:33:10

In our organization, we have small working groups for topics people are interested in - both inside their work projects and beyond. One of these groups focuses on (web) accessibility - and while everybody who joins strongly agrees that accessibility is an important topic we need to emphasize in our work, we kept coming back to this: **why is this so hard to do this in our day to day projects?** 

We brainstormed a little to be able to tackle these challenges hands on. These are our (summarized) results:

- Accessibility still doesn't have the **priority** it needs to be considered on client’s projects and it remains difficult to get stakeholders to buy-in
- A general overhaul of the development process would be needed to **establish accessibility from the start**
- There seems to be a huge knowledge gap in terms of how disabled people experience digital product and therefor how to empower them and best prioritise accessibility fixes
- Difficulty in identifying the most suitable resources to **get started with accessibility** in the overwhelming amount of materials available
- **Testing process** is still not fully defined as we lack professional accessibility testers, training and devices - and, again, the knowledge on which tools are most commonly used and how. 

Now that we identified our core challenges, it’s all about getting our hands dirty and tackling them one by one. While of course there is still a lot to do, this is one step closer to making the products we deliver more accessible. Do you face similar issues in your work? How do you go about them?
4 Free AWS courses on PostgreSQL
Tags: database, postgres, beginners, sql
Published: 2021-05-04 09:28:42

In this post, I will list 4 AWS courses on Postgresql which are completely free. These are short duration courses and will help to get started with 

- Relational Databases in general.
- Familiarity with Postgresql concepts.

**1. PostgreSQL Fundamentals**

Link: https://www.aws.training/Details/eLearning?id=32439


This course offers a Foundational introduction to PostgreSQL, which is an open-source relational database management system. 

You will get an introduction to databases, and learn PostgreSQL fundamentals. 

**2. PostgreSQL Fundamentals: Architecture**

Link: https://www.aws.training/Details/eLearning?id=42102

In this course, you will learn how to:
- Understand the architecture of a PostgreSQL database
- Read, write, and edit data in a PostgreSQL database
- Store data in a PostgreSQL database

**3. PostgreSQL Fundamentals: SQL Command Line**

Link: https://www.aws.training/Details/eLearning?id=43293

In this course, you will learn how to Use 
- PSQL - The native, command-line client to PostgreSQL

**4. PostgreSQL Fundamentals: Explain**

Link: https://www.aws.training/Details/eLearning?id=43291

In this course, you will learn how to:
 - Use Explain in PostgreSQL Queries to understand the execution and detailed query plan of database queries.


<hr>

## Thank you for reading
Hope you find these resources useful. If you like what you read and want to see more about system design, microservices and other technology-related stuff... You can follow me on 
- [Twitter here](https://twitter.com/vishnuchi).
- Subscribe to my [Newsletter here](https://www.getrevue.co/profile/vishnuch).
Need testers and data donations for account analysis program (KYSA)
Tags: python, datascience, programming
Published: 2021-05-04 09:24:21

I've written a small python-based account analysis program. 
Basic features include:
- Machine learning algorithm for categorization as well es recognition of defined search strings
- Multiple diagram output to visualize the data content
- Excel export to further analyze the data manually
- Possibility to add a manually filled excel template file with cash payments

The program is called KYSA and currently it is able to import csv-files from around 13 german bank accounts automatically. The UI is GTK3+-based (Pygobject) and available in German and English. Unfortunately up to now I wasn't able to implement support for any non-german bank accounts (csv-files).
To change this, I need the help of everyone who is willing to support me and the development of KYSA with a free data donation.
Since each bank uses a slightly different csv format, I need to know the blank lines (before and after the data entries) as well as the column labels and date format for KYSA to work. No transaction information or other personal data is required. 

More info can be found at the codeberg repository: https://codeberg.org/codade/KYSA. There you'll find the info needed for the csv-import in the account_ident.py file. If you want to contribute in another way, let me know. I'm happy about every support.
Stable Windows and macOS executables at: https://digital-souveraenitaet.de/kysa-know-your-spendings-english/
Background Toggle with clip path only HTML and CSS
Tags: html, css, background, animation
Published: 2021-05-04 09:22:56

---
title: Background Toggle with clip path only HTML and CSS
published: true
description: 
tags: html,css, background, animation
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvbzq714fpjm6pjbi4qx.png
---

##Background Toggle with clip path only html css

{% youtube 8Mcbzz2lhxs %}

In this tutorial, I have used only HTML and CSS.
for background transition effect I have used <a href="https://bennettfeely.com/clippy/"> clip-path generator </a>

**HTML**
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="checkbox" name="" id="check">
    <label for="check">
        <i class="fas fa-sun"></i>
        <i class="fas fa-moon"></i>
    </label>
    <main></main>
</body>

</html>
```
for icon I have used font-awesome icons.
when toggling it will show sun and moon with black background.
**CSS**
```
*{
    box-sizing: border-box;
    margin: 0;
}
label{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 35px;
    background: #7d68ee;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    cursor: pointer;
}
label .fas{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    transition: .5s;
    color: white;
}
label .fa-moon{
    opacity: 0;
}
input:checked ~ label .fas{
    left: 70%;
}
input:checked ~ label .fa-sun{
    opacity: 0;
}
input:checked ~ label .fa-moon{
    opacity: 1;
}
input{
    display: none;
}
main{
    background: #000;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100vh;
    transition: 1s;
    clip-path: polygon(80% 0, 100% 0, 100% 12%, 100% 20%, 98% 3%, 82% 0, 65% 0);

}
input:checked ~ main{
    clip-path: polygon(0 0, 100% 0, 100% 12%, 100% 100%, 0 100%, 0 89%, 0 38%);
}
```
If you like my tutorial, don't forget to share your thought.
Thanks.
Setting private-friendly web analytics into your website
Tags: analytics, vue
Published: 2021-05-04 09:11:48

Knowing the analytics on your website is important. Know what pages people go, what pages people don't, etc, from where (in the case you work with an international website) makes you understand better your website and your customers for example.
Normally analytics come with privacy issues and cookies and pop-ups, so when I was developing my websites, even that I would like to have analytics on them I would not want to track people or wanted their data shared so I have been avoiding putting analytics till I found an easy solution.
That where [Plausible](https://plausible.io/) comes in. There are more solutions, some more expensive, others more cheap or free but Plausible at least till now offers a great solution for a great price.

It's based in Europe ( Estonia), doesn't track or use any cookies so you don't need to add any cookie statement to your website and you get a full report of your website. If that is not enough I also can say that Plausible is open source and easy to install and manage.

What follows is for websites made with Nuxt, but you can find in Plausible website info to install into other websites.

First I installed Plausible into my project:

```js
npm install vue-plausible
```

After installed open your `nuxt.config.js` and in the module section:

```js
modules: [
    [
    'vue-plausible',
  ]
```

Now that you set the module you need to put your domain set. Still in the `nuxt.config.js`, for example right after the modules put this:

```js
plausible: {
    domain: 'yourdomain',
  },
```

In there don't put the `https` just your domain. In my case is `ricardomoreira.io`.

And that's all you need to do. Of course that you also need to go to [Plausible ](https://plausible.io/)website, register your account and put your website there. 
In case you have more than one website, Plausible lets you add as many websites as you need at the same price.
You can try the trial version, just register and you are free to go.

I am happy with Plausible until the moment and gives exactly what I want, easy analytics with zero trackings.

If you like this post, feel free to follow me on [Twitter](https://twitter.com/mugas11/) and send me a message in case you have any doubt about this post 😊
TreeTraversalTechniques
Published: 2021-05-04 09:11:47

A binary tree is a finite set of nodes which is either empty or consists of a root and two disjoint binary trees called the left sub tree and the right sub tree. In a traversal of a binary tree, each element of the binary tree is visited exactly at once. During the visiting of an element, all actions like clone, display, evaluate the operator etc is taken with respect to the element. When traversing a binary tree, we need to follow line order i.e. L, D, R where L->Moving left D->printing the data R->moving right We have three traversal techniques on binary tree. They are:  In order, Post order and Pre order 

Algorithm pre order(x)
 Input: x is the root of a sub tree.
 1. If x ≠ NULL
 2. Then output key(x);
 3. Pre order (left(x));
 4. Pre order (right(x)); 

Algorithm post order(x)
 Input: x is the root of a subtree 
1. If x ≠ NULL 
2. Then post order(left(x));; 
3. Post order(right(x));
4. Output key(x);

Algorithm in order(x) 
Input: x is the root of a subtree 
1. If x≠ null
 2. Then in order(left(x)); 
3. Output key(x);
 4. In order(right(x)); 

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4dj14z9fw95okc5iwxa.png)
50 topics and questions for front-end developer (react) interview in 2021

Published: 2021-05-04 09:09:40

Hey guys,
Below is a list of questions & topics that any front-end developer should know in 2021 interviews.

1. Context api vs Redux
2. Explain how Redux works.
3. What is CORS?
4. Long polling vs Standard polling
5. Indexed db (storage)
6. Full duplex communication, Web sockets, Web socket handshake
7. Can I access state in redux action?
8. Class based vs functional components
9. What are the advantages of functional components?
10. Name a couple of hooks and what they are good for.
11. Explain useCallback
12. Lazy loading - explain and how to implement; name web pages as an example of lazy loading
13. What are the tools you use while developing web app.
14. Explain pagination, name web pages that uses pagination
15. package.log explain (.log vs package..)
16. Devdependencies vs dependencies
17. Minification uglification, mapping (source maps)
18. Monolith vs microservices
19. Advantage of micro services and microfrontends
20. Orchestration of micro services VS choreography of micro services
21. Oauth 2.0
22. Oauth (JSON webtoken)
23. Distributed tracing (time and correlationId)
24. How to customise 3rd party component?
25. How to implement component will unmount in a functional component?
26. What is an example for using component will unmount?
27. How to handle errors in React?
28. HOC (higher order component) - explain, how/why to use
29. React DOM - explain, how/why to use
30. Api interceptor/middleware - example
31. How to achieve responsiveness.
32. PWA - Progressive Web Application - explain
33. What is the library you use for unit testing?
34. How to troubleshoot web applications?
35. If the story is not clear how do you approach that?
36. How do you get familiar with a new code base?
37. What is SPA, and why is it important/good?
38. Difference between localstorage and cookie.
39. Can you create ErrorBoundary as functional component?
40. CSS variables
41. CSS display style
42. Responsive layout vs Adaptive layout (mobile)
43. What is PropTypes?
44. What is web pack?
45. What to test by unit tests on react component
46. What is render blocking code?
47. How to mock functions calls while testing with jest?
48. What is Prototype (in JS)?
49. Three different ways to check that the object is undefined.
50. How rest/spread operators works internally?


This list of questions was created with help of [global technology](https://www.globaltechnology.tech/)	platform.

Say in a comment what question should be added for .net developer interviews.
Distribute a Python App via Setup.py File
Tags: python, beginners, tutorial, devops
Published: 2021-05-04 09:08:58


Heya fellows,

The code of this post can be found on Github (see [here](https://github.com/NiklasTiede/tinyHTTPie/tree/5-Distributing-by-Setup-File)).

We have seen that it's tedious and unclear how to distribute a project with a bash script. So I'll show you in this post the way to go: using a `setup.py` file!

We have to create a `setup.py` file, put it into the root directory and then we can use `pip` to install our project locally. This installs the project into the active virtual environment. But how does a `setup.py` file looks like? Here's a template containing the most important key-value pairs:

```python
import setuptools

setuptools.setup(
    name="tihttp",
    version="0.1.0",

    package_dir={"": "src"},
    packages=setuptools.find_packages(where="src"),

    install_requires=[
        "requests>=2.21",
    ],

    entry_points={
        "console_scripts":
        ["tihttp=tihttp.main:run_main"]
        },
)
```

The `package_dir` and `packages` values are necessary when a source layout is used, so that `setup.py` knows where to look for the packages. We used here a source layout to show these key-values and how they affect the `entry_points` section. The `entry_points` section tells pip where the command line tool is invoked from. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32dxkwux1dltow47uwwn.png)

The command (in this case `tihttp`) is mapped to the starting point of the command line tool (here the `run_main()` function). Now `tihttp` can be installed and the command should return a proper help interface.

```
$ pip install .

$ tihttp --help
```

Another big advantage of this setup is that pip allows to install packages in editable mode:

```
$ pip install -e .
```

Your project is then installed into your currently activated virtual environment and every change to the code immediately affects this installed dependency. This allows to continue developing while testing the package comfortably. Furthermore, the `setup.py` file allows to download and install your project directly from github.

```
$ pip install https://github.com/NiklasTiede/tinyHTTPie/archive/5-Distributing-by-Setup-File.zip
```

Direct installations from github can take time especially for projects which are bigger (large git history) and use non-Python languages. Therefore PyPI and Anaconda are usually the preferred places to go for installing packages.

I want to note that many developers in the python community store project metadata and settings used for linting/testing within a `setup.cfg` file instead of a `setup.py` file but this is a topic for another post.
#21-23 of 100DaysOfCode
Tags: 100daysofcode, watercooler
Published: 2021-05-04 08:56:05

Another three days passed by, 
Well, I am here to tell you what did I learned and how it all went.

##The Highlights:

* I learned how to make a virtual environment of python using 
  + pipenv
  + venv
  + virtualenv

* What's the difference between them and how does it works.

But
* I'm back to javascript i.e. node
Till a couple of days back I was so determined to learn Django and then use React with it to create super optimized and secure web apps.
But then again I don't have much experience with React or node and I want to make a strong foundation, So I started learning more about server-side stuff.
How does the web work? 
Express.js 
You know the whole nine.

Those are just my first thoughts. Thanks for joining me.
Have a beautiful day.😀😀
Cypress e2e testing with Google Maps Autocomplete
Tags: javascript, googlecloud, programming, csharp
Published: 2021-05-04 08:48:04

During my working day I encountered a problem. 

I needed to be able to drive a Google Maps Autocomplete text input through Cypress Tests. 

https://docs.cypress.io

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete


![Gmaps Autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1hosm25begnyz1qkbcg.png)

As you can see above we get some suggestions as you type in the search box. 

Now this is extremely easy to test manually, just jab in a place and click on a suggestion. 

Cypress testing this not so much. 

I scratched my head for hours trying to figure out how I could target that little suggestions list served back from Google Maps. 

I went through the following google search results 

https://github.com/cypress-io/cypress/issues/14598

https://stackoverflow.com/questions/53039165/cypress-test-google-places-autocomplete-not-functioning

https://github.com/bahmutov/cypress-geolocation-example

https://glebbahmutov.com/blog/cypress-geolocation/ 

### The Solution 

The Solution for me was something like the following 

```javascript 

completeBranchPage: () => {
      cy.enterText(enterLocationInput, value.dumfries);
      cy.get('.pac-item', { timeout: 10000 }).should('be.visible');
      cy.enterText(enterLocationInput, '{downarrow}');
      cy.enterText(enterLocationInput, '{enter}');
      cy.get(latInput).should('have.value', value.dumfriesLat);
      cy.get(lngInput).should('have.value', value.dumfriesLong);
    }

```

The magic piece of the puzzle for me was making sure that the gmaps  suggestion items were actually there before I tried to choose one of them. 

I did this with the following line of code where `.pac-item` is the class of the Gmaps Autocomplete suggestions

```javascript
cy.get('.pac-item', { timeout: 10000 }).should('be.visible');
```

Huge shoutout to this stack overflow answer, https://stackoverflow.com/a/60065672/9057687


I now have a passing test, WOOHOO!!! 

![Passing cypress test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqjhzsxay4b8fk9gxx4x.png)

### Where's the code you jabroni? 

https://github.com/GrantHair5/cypress-google-maps-autocomplete

I have created a small example repo. 

You will need to add your own Google Maps API Key secret in the fashion of an environment variable or a .NET user secret. 

User secret would be like the following 

```
{
  "GmapsApiSecrets": {
    "ApiKey": "MY SUPER DOOPER SECRET KEY"
  }
}
```

Please feel free to fork or clone down that repo and have a play around with the code. 

For anyone who has not used cypress testing in the past I'd whole heartedly recommend it. Massive shout out to our Automation Tester https://github.com/karenpetrie for introducing us to the mysterious ways of automated testing. 

It is baller. 

Anyways, I'm out, hope this is of help to someone

Bye :wave:
Top 5 platforms for freelancers in 2021
Tags: dotnet, javascript, react
Published: 2021-05-04 08:43:14

I started my adventure as a freelancer about a year ago. Since then and until now I have made a list of sites to help you become a freelancer without too much effort.

Below you can find the list of the top 5 platforms I have worked with for long term jobs and with rates of at least 20 euro / h


* [We are hiring](https://www.wearehiring.top/)	
* [Toptal](https://www.toptal.com/)	
* [Upwork](https://www.upwork.com/)	
* [X-team](https://x-team.com/)
* [Nixa](https://www.nixa.io/)

When working as a freelancer, it is important to be as present online as possible, to have accounts on as many platforms as possible in order to have access to interesting projects.

What platforms do you use to find interesting projects?
How do you find your clients as freelancers?