teleren/devto huggingface dataset:
How to identify an element by its text with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-13 22:48:35

## In today's “Pinches of Cypress”, learn how to identify elements by their text

When creating **automated test scripts**, we cannot always identify elements by a unique CSS selector.

But what if we could identify them by their text?

I will show you three examples.

In the first example, it doesn't matter what kind of element it is, as long as it has the text that identifies it.

> Such an approach is helpful in cases where we know that only one element on the screen will have the text we expect. Otherwise, we run the risk of identifying the wrong element.

The implementation is quite simple.

```js
cy.contains('Any text')
```

And if we wanted, we could even check that the element is visible, for example.

```js
cy.contains('Any text').should('be.visible')
```

In the second example, we know that the text will be present in a specific HTML element.

Let's say the element is as follows.

```html
<a href="https://udemy.com/user/walmyr/">Courses</a>
```

In this case, we want to identify that an [**anchor**](https://www.w3schools.com/tags/tag_a.asp) element contains the text 'Courses', and that it is visible.

The implementation would be as follows:

```js
cy.get('a:contains(Courses)').should('be.visible')
```

Unlike the first example, in this case, we use [`cy.get()`](https://docs.cypress.io/api/commands/get). However, instead of passing just a CSS selector, we give a selector together with [jQuery's `:contains` functionality](https://www.w3schools.com/jquery/sel_contains.asp).

And if there is an element of type anchor (`<a>`) with the text 'Courses', the verification that the element is visible must pass.

In the last example, we'll go back to using [`cy.contains()`](https://docs.cypress.io/api/commands/contains), where we'll identify the same element from the previous example and verify that this element is visible.

```js
cy.contains('a', 'Courses').should('be.visible')
```

As you can see, with `cy.contains`, we can pass a selector as the first argument and text as the second argument, thus ensuring that the element has the correct text and that the text is contained in the proper element.

That's it!
___

Did you like it?

I'm looking forward to hearing your feedback!

___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/02/13/como-identificar-um-elemento-por-seu-texto-com-cypress/) blog.
___

Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr).
I was trying to build this docker image based on the following Dockerfile until this happened !!
Tags: docker, node, react
Published: 2021-02-13 22:36:47


> COMMAND that triggered this error:
```docker build -t developerfolio:latest .```

> DockerFile:
```
# This file is the main docker file configurations

# Official Node JS runtime as a parent image
FROM node:10.16.0-alpine

# Set the working directory to ./app
WORKDIR ./app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

# Install any needed packages
RUN npm install

# Audit fix npm packages
RUN npm audit fix

# Bundle app source
COPY . /app

# Make port 3000 available to the world outside this container
EXPOSE 3000

# Run app.js when the container launches
CMD ["npm", "start"]
```
Guess What? Here’s How AI Is Generating Love Letters… chuckle
Tags: python, ai
Published: 2021-02-13 22:17:43

Love letters are written to express affection or friendship towards someone else.

Personalized love letters with no plagiarism sound like a fantasy or an unrealistic expectation but that is exactly what we are about to deliver. The idea is to let a computer generate these love letters for us using artificial intelligence (AI) technology. AI has a lot of potential applications and I think this is one that many people can easily appreciate and benefit from. Including you, if your current romantic status is single. lol, Valentine is coming

So, we are excited to announce [RoseloveAI](rosalove.xyz), an AI that generates unique, personalized and beautiful love letters for your partner with no plagiarism.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7egz5t2babybuzwg5l7z.png)
Accessibility Audits
Tags: a11y, audit, developer, wave
Published: 2021-02-13 22:05:56

When designing websites, developers have to take accessibility into account.  They are held responsible so that anyone is able to access the site they are creating.  It is important to understand every aspect of accessibility so that people all over the globe have easy access.  

Today, I took a look at the 100 Thieves website to see how well their company website does.

#Results
I ran an audit using Lighthouse, Wave, and web.dev.  Below are the results I found:
Performance: 55
Accessibility: 97
Best Practices: 79
SEO: 75

Fortunately for the company, their accessibility was almost perfect.  This is what company's need to aim for.  After analyzing some of the information, here is what I found to be the biggest problem for the website.
* They need to eliminate render-blocking resources
* They have to minify JavaScript
* They have to remove unused JavaScript
* The time to interact with the site is 8.4 seconds

These issues were found in the performance, accessibility, and best practices stat columns.

These issues are the reason why the time to interact is so high.  The developers need to take notice of these problems and fix them.  To eliminate render-blocking resources, one must move all of the script and link tags to the bottom of the page.  The other problems are self explanatory.  This will improve all categories if done so properly. 

#What Now?
After taking a look and analyzing what was wrong with the site using Lighthouse and web.dev, I decided to try out wave on the site.  

This audit goes into more detail on the site.  Surprisingly, there were only 7 accessibility errors on the front end of development.  All of these errors were empty button and empty link errors.  This means that there needs to be words instead of just pictures.  There were also only 10 contrast errors.  This means that the text colors are not the proper color in contrast to the background.  These are also easy fixes that can improve accessibility tremendously.

If you want to learn more about these incredible tools, check out the link below!

[Accessibility Video](https://www.youtube.com/watch?v=qNpgmifstd8)

If you want to watch more videos that I've posted, click this link!

[My channel](https://www.youtube.com/channel/UCHTG-beR7gAzIzg4brepNtQ)
Data-Oriented programming: Liberate yourself from objects
Tags: data, java, javascript, python
Published: 2021-02-13 21:39:08

---
title: Data-Oriented programming: Liberate yourself from objects
published: true
description: Data-Oriented programming: the secret sauce for simplicity.
tags: data, java, javascript, python
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h3vjfy12btybpsfvlngc.jpg
---


The main lesson that Clojure teaches its developers is to embrace **simplicity**.

The secret sauce used by Clojure to embrace **simplicity** is that it treats data as a first-class citizen that is manipulated with generic functions.

In the Clojure community, we call this secret sauce: **Data-Oriented programming**.

The good news is that this paradigm is in fact **language agnostic**, meaning that it is applicable in other programming languages, both OOP and FP, both statically and dynamically typed.

In Data-Oriented programming, we follow 3 principles:

1. We **separate** our code from our data
1. We represent data with **generic** data structures
1. We never **mutate** our data

What does it mean in practice for you to adhere to Data-Oriented programming?

1. You write your code in **stateless** functions (or static methods)
1. You represent your data with **hash maps** and **vectors**
1. You use a library that implement efficient **immutable** data structures


What do you get from that?

In one word: SIMPLICITY!

In a few sentences:

1. No more complex UML diagrams!
1. You benefit from **dozens** of **generic** data manipulation functions
1. You can **visualize** any part of your system, as it is just data
1. You liberate your mind from **concurrency-related** issues.


Curious to see how it looks like in a real production system?

Start reading my book [Data-Oriented programming](https://www.manning.com/books/data-oriented-programming?utm_source=viebel&utm_medium=affiliate&utm_campaign=book_sharvit2_data_1_29_21&a_aid=viebel&a_bid=d5b546b7).


Here is a 50% off discount code for you: `mlsharvit2`. Valid until March 15.

The principles of Data-Oriented programming are explored in greater detail [here](https://blog.klipse.tech/databook/2020/09/29/do-principles.html).

Enjoy!
Run your GitHub Actions like a makefile
Tags: github, devops, githubactions
Published: 2021-02-13 21:32:19

When developing GitHub Action workflows, you might find yourself pushing arbitrary commits to trigger the logs. 

Don't do that!

Instead, use the tools available to you to debug locally, like [act](https://github.com/nektos/act).

{% github https://github.com/nektos/act %}

When you run act it reads in your GitHub Actions from `.github/workflows/` and determines the set of actions that need to be run. It uses the Docker API to either pull or build the necessary images, as defined in your workflow files and finally determine the execution path based on the defined dependencies. Once it has the execution path, it then uses the Docker API to run containers for each action based on the images prepared previously. The environment variables and filesystem are all configured to match what GitHub provides.

_Check out the creator's [GitHub Actions Hero story]( https://github.blog/2020-07-03-github-action-hero-casey-lee/)._

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev._

{% link https://dev.to/github/debug-your-github-actions-via-ssh-by-using-tmate-1hd6 %}
Useful Linux Commands — Files and Packages
Tags: webdev, tooling, programming, productivity
Published: 2021-02-13 21:26:15

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Linux is an operating system that many developers will use.

Therefore, it’s a good idea to learn some Linux commands.

In this article, we’ll look at some useful Linux commands we should know.

### `head`

The `head` command outputs the first few lines of a file.

The `-n` flag specifies how many lines to shows.

The default number of lines to show is 10.

### tail

`tail` outputs the last few lines of a file.

We can also use the `-n` flag to specify how many lines to show.

Also, we can get the end of the file beginning with the `N` -th line with:

```
tail -n +N
```

### cat

`cat` concatenates list of files and send them to the standard output stream.

### `less`

`less` is a quick tool to let us view a file.

It opens up the file content with a read-only window.

### `nano`

`nano` is a small text editor.

It’s easy to use for beginners since we don’t have to learn lots of shortcuts.

### `nedit`

`nedit` is a small graphical rextr editor.

And it lets us edit text with point and click, drag and drop, and syntax highlighting.

### `touch`

`touch` lets us modify the timestamp of an existing file and quickly create a new file.

### `logout`

`logout` lets us exit the shell we’re logged into.

### `ncdu`

`ncdu` lets us display file space usage.

It opens a window that shows the disk usage of each file.

### `top`

`top` displays all currently running processes and their owners, memory usage, and more.

### `htop`

`htop` is an interactive version of `top` .

We can pass `-u username` to display processes that are owned by user `username` .

### `whereis`

`whereis` lets is search for files related to a particular command.

For instance, we run:

```
whereis ls
```

to find the path to the `ls` command and the associated manpage.

### `whatis`

`whatis` prints the description of the command from its man page.

### `locate`

The `locate` command finds a file anywhere in the system by searching a cached list of files.

### find

`find` iterates through the file system to find the file we’re looking for.

It looks at files that currently exist in the system.

`find` lets us search by file age, size, ownership, type, timestamp, permissions, depth within the file system, regex, and more.

### `wget`

`wget` lets us download a file from the Internet

### `curl`

`curl` can be used like `wget` , but we need the `--output` flag.

`curl` supports many moe protocols and it’s more widely available that `wget` .

`wget` can only receive data, but `curl` can also send data.

`wget` can download files recursively, but `curl` can’t.

### `apt`

The `apt` command is available in Debian based distros.

It can be used to install, upgrade, or delete software on our machine.

We can run `apt search` to search for packages. `apt install` lets us install packages.

### Conclusion

Linux distros comes with many commands that we can use to manage files and download files.
Useful Linux Commands — File Operations and Multiple Commands
Tags: productivity, programming, linux, webdev
Published: 2021-02-13 21:25:48

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Linux is an operating system that many developers will use.

Therefore, it’s a good idea to learn some Linux commands.

In this article, we’ll look at some useful Linux commands we should know.

### less

The `less` command lets us show the content of a file.

The general syntax is:

```
less <filename>
```

We can navigate with arrow keys.

Spacebar and `b` navigates page by page.

`/` lets us search for content.

`?` search backward.

`F` enters follow mode. When the file is changed, the changes are displayed live.

ctrl+c quits follow mode.

### cp

`cp` lets us move files and folders.

For instance, we run:

```
cp foo bar
```

to copy `foo` to `bar` .

We can also use it to copy folders with the `-r` switch:

```
cp -r fruits cars
```

We move the `fruits` folder contents to `cars` .

### mv

The `mv` command lets us move files and folders.

For instance, we run:

```
mv foo bar
```

to move `foo` to `bar` .

We can move files into a folder with:

```
mv grape banana fruits
```

We move the `grape` and `banana` files to the `fruits` folder.

### ls

The `ls` command lets us list files and folders.

We can list the content of a given folder with:

```
ls /bin
```

We can add the `a` switch to show hidden files.

`l` shows files permissions, file and folder sizes, and modified date time.

We run `ls -al` to show all that info.

### rmdir

The `rmdir` command lets us remove a folder.

We run:

```
rmdir fruits
```

to remove the `fruits` folder.

We can use it to remove multiple folders:

```
rmdir fruits cars
```

We remove the `fruits` and `cars` folders.

The folders we delete must be empty.

To delete non-empty folders, we run:

```
rm -rf fruits cars
```

`-r` means recursive and `f` means force.

### pwd

`pwd` shows the current working directory.

### cd

`cd` lets us change the current working directory.

For instance, we run:

```
cd fruits
```

to go to the `fruits` folder.

`cd ..` to move to the home folder.

`cd ../cars` moves to the parent folder of `cars` .

We can use absolute paths with `cd` , so we run `cd /etc` to go to the `/etc` folder.

### mkdir

`mkdir` lets us create a folder.

For instance, we run:

```
mkdir cars
```

to create a `cars` folder in the current working directory.

And we run:

```
mkdir dogs cars
```

to create the `dogs` and `cars` folders.

We can create multiple nested folders with the `-p` switch:

```
mkdir -p fruits/apples
```

### !!

`!!` lets us run the last command.

### `; / && / &`

`;` lets us run one command after the other like:

```
ls; pwd
```

`&&` runs multiple commands but the ones on the right won’t run if the left one fails.

`&` lets us run multiple commands in parallel instead of waiting for the current one to finish before running the next one.

### Conclusion

We can run commands to show file content and run multiple commands with some operators with Linux.
Speeding up NVM for zsh
Tags: nvm, node, zsh, performance
Published: 2021-02-13 21:23:44

Just replace your default loader with this snippet in your `.zshrc`.

Idea is to postpone initialisation until you enter a directory that contains .nvmrc file.

```zsh
# NVM
export NVM_DIR="$HOME/.nvm"

# Add any Node version for powerlevel10k to be less noisy
# export PATH="$HOME/.nvm/versions/node/v14.15.5/bin:$PATH"
#[ -s "$(brew --prefix nvm)/nvm.sh" ] && . "$(brew --prefix nvm)/nvm.sh"  # This loads nvm

# Based on official autoload for ZSH https://github.com/nvm-sh/nvm#zsh
autoload -U add-zsh-hook
load-nvmrc() {
  if [ -f ".nvmrc" ]; then
    if ! typeset -f nvm_find_nvmrc > /dev/null; then 
      [ -s "$(brew --prefix nvm)/nvm.sh" ] && . "$(brew --prefix nvm)/nvm.sh" --no-use 
    fi
    
    local node_version="$(nvm version)"
    local nvmrc_path="$(nvm_find_nvmrc)"

    if [ -n "$nvmrc_path" ]; then
      local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

      if [ "$nvmrc_node_version" = "N/A" ]; then
        nvm install
      elif [ "$nvmrc_node_version" != "$node_version" ]; then
        nvm use
      fi
    elif [ "$node_version" != "$(nvm version default)" ]; then
      echo "Reverting to nvm default version"
      nvm use default
    fi
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc
```
Useful Linux Commands — Text and Arguments
Tags: webdev, programming, productivity, linux
Published: 2021-02-13 21:23:08

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Linux is an operating system that many developers will use.

Therefore, it’s a good idea to learn some Linux commands.

In this article, we’ll look at some useful Linux commands we should know.

### xargs

The `xargs` command lets us pass output of a command and use it as an argument to another command.

The general syntax is:

```
command1 | xargs command2
```

For instance, we can write:

```
cat deleteall.txt | xargs rm
```

to the file paths in `deleteall.txt` to the `rm` command to delete all the files listed in `deleteall.txt` .

With the `-p` switch, we see a confirmation prompt before the command is run:

```
cat deleteall.txt | xargs -p rm
```

We can run multiple commands with the `-I` switch:

```
command1 | xargs -I % /bin/bash -c 'command2 %; command3 %'
```

The commands are the ones after the `%` .

### df

The `df` command lets us get disk usage information.

We can use the `-h` switch to get the values in a human-readable format.

### nohup

The `nohup` command lets us run a command that doesn’t end when the terminal is killed.

We just put the command after `nohup` to run it.

### diff

`diff` lets us compare the content of 2 text files.

For example, we run:

```
diff dogs.txt dogs2.txt
```

to compare the content of `dogs.txt` and `dogs2.txt` .

The `-y` switch will make `diff` compare the 2 files line by line.

We can also use it to compare directories with the `-r` switch:

```
diff -r dir1 dir2
```

We can compare which files differ with the `r` and `q` switches together:

```
diff -rq dir1 dir2
```

### uniq

The `uniq` command lets us get unique lines of text from a file.

For instance, we run:”

```
uniq dogs.txt
```

to get the unique lines of text from the `dogs.txt` file.

We can also use it to get unique lines of output from a command with the `|` operator:

```
ls | uniq
```

We can sort the lines before getting the unique lines with the `sort` command:

```
sort dogs.txt | uniq
```

We can display only the duplicate lines with the `-d` switch:

```
sort dogs.txt | uniq -d
```

The `-u` switch makes it only display the unique lines:

```
sort dogs.txt | uniq -u
```

The `-c` switch lets us count the occurrences of each line:

```
sort dogs.txt | uniq -c
```

### sort

The `sort` command lets us sort lines of text or text command outputs.

For example, we run:

```
sort dogs.txt
```

to sort the lines in `dogs.txt` .

We can use the `-r` switch to sort the items in reverse order:

```
sort -r dogs.txt
```

And we can use the `-u` switch to return only the unique lines:

```
sort -u dogs.txt
```

We can also use `sort` to sort command outputs. 

For instance, we can sort the output from the `ls` command with:

```
ls | sort
```

### Conclusion

We can pass arguments to commands, and diff and manipulate text outputs with various Linux commands.
3D image with one element
Tags: webdev, css, html, tutorial
Published: 2021-02-13 21:21:03

<sup>**Find out more CSS tricks at [css-tip.com](https://css-tip.com)**</sup>

A quick trick to create a 3D illustration using only an `<img>` tag. No pseudo elements, no extra tag, no SVG, Nothing! Only one tag and few lines of CSS.

## Here you go

{% codepen https://codepen.io/t_afif/pen/NWbdYJE %}

Let's dig into the code

```css
img {
  --x:10px;
  --y:20px;
  clip-path:polygon( /* 4 */
       var(--y)              var(--y),  /* a */
       calc(100% - var(--y)) var(--y),  /* b */
       calc(100% - var(--y)) calc(100% - var(--y)), /* c */
       var(--y)              calc(100% - var(--y)), /* d */
       0 calc(100% - var(--x) - var(--y)), /* x */
       0 calc(var(--x) + var(--y))); /* y */
  transform:perspective(1000px) rotateY(40deg); /* 5 */
  outline: var(--y) solid rgba(0,0,0,0.4); /* 1 */
  outline-offset: calc(-1*var(--y)); /* 2 */
  padding:var(--y) var(--y) var(--y) 0; /* 3 */
}
img:hover { /* 6 */
  transform:perspective(1000px) rotateY(0deg);
  clip-path:polygon(
       var(--y)              var(--y), /* a */
       calc(100% - var(--y)) var(--y), /* b */
       calc(100% - var(--y)) calc(100% - var(--y)), /* c */
       var(--y)              calc(100% - var(--y)), /* d */
       var(--y)  calc(100% - var(--x) - var(--y)), /* x' */
       var(--y)  calc(var(--x) + var(--y))); /* y' */
}
```
Here is a step by step illustration to understand each line of code

![3D illustration](https://dev-to-uploads.s3.amazonaws.com/i/cdzkklv19wylbzs5euqg.png)

I have nothing more to add than: Enjoy!

---

We can easily adjust the above to consider any direction. Here is for the bottom one:

[3D bottom persepective](https://dev-to-uploads.s3.amazonaws.com/i/07g7o2s1ksio71vzljoe.png)

{% codepen https://codepen.io/t_afif/pen/wveBagj %}


I won't do the other directions, I will let you do it alone 😉