teleren/devto huggingface dataset:
Introducing Percy's 2020 State of Visual Testing
Tags: testing, frontend
Published: 2020-01-29 18:24:01

---
title: Introducing Percy's 2020 State of Visual Testing
published: true
description: Get Percy's 2020 visual testing benchmarks and best practices in this stat-packed report
tags: Testing, Frontend
canonical_url: https://blog.percy.io/state-of-visual-testing-2020-4b87ae3bce34
cover_image: https://miro.medium.com/max/4096/1*IiS-4B2vlsBZOTt1DfrRcA.png
---

### We at [Percy](https://percy.io) are thrilled to be sharing the first-ever State of Visual Testing!

We decided to create [this report](https://go.percy.io/state-of-visual-testing-report-2020) to share our experience and insights from being on the front lines of visual testing. Although thousands of developers are already utilizing visual testing, we noticed that there just wasn’t much data available to those looking for it.

To shed light on how teams are leveraging visual testing, we decided to take a look at our data and share the results. In addition to looking at our own visual testing data, we wanted to learn more about how developers approach frontend testing in general.

By combining data from our platform and data from our recent frontend testing survey, we were able to create a resource packed with guidance, benchmarks, and best practices, as well as:
- An educational overview of visual testing and how it works
- How visual testing fits into the software testing ecosystem
- The benefits of visual testing
- Best practices for implementing and running visual testing
- And lots more!


### [See highlights from Percy’s State of Visual Testing or download the full report here](https://go.percy.io/state-of-visual-testing-report-2020)

In 2020 and beyond, we hope this serves as an informative resource for developers learning more about visual testing and would love to hear from you! You can reach us at [hello@percy.io](mailto:hello@percy.io).
isomorphic-querystring
Tags: querystring, isomorphic, node, javascript
Published: 2020-01-29 18:08:26


Hi guys,

I'd like to share with you a NPM package called `isomorphic-querystring`.

it matches the same API as the `querystring` module in node's standard library. but if you're in the browser it uses 2 small functions to match the exact same API.

if you use SSR in JavaScript this package might be helpful to you.

please take a look, and star it if you don't mind :)

https://github.com/lifeiscontent/isomorphic-querystring
Welcome Thread - v58
Tags: welcome
Published: 2020-01-29 17:54:33

---
title: Welcome Thread - v58
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![join us](https://media.giphy.com/media/kHs1lBhZWaK5rj7lt3/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
BaseCS: Intro to Binary
Tags: computerscience, basecs
Published: 2020-01-29 17:49:42

---
title: BaseCS: Intro to Binary
published: true
description: Binary is a number system where the digits that we can use are either 0 or 1. In this episode, we learn about why we're limited to just these two numbers, and how they're related to the on/off switches inside of our machines.
tags: computerscience, basecs
series: BaseCS Season 2
---

Welcome to BaseCS Season 2!

Today's episode of BaseCS focuses on the core concept of what makes computers work: binary! 

Binary is a number system where the digits that we can use are either 0 or 1. In this episode, we learn about why we're limited to just these two numbers, and how they're related to the on/off switches inside of our machines. We also learn how these binary is used to measure memory and data, and what a bit and a byte are.

Learn more about the concepts covered in this post here:

{% link https://dev.to/vaidehijoshi/bits-bytes-building-with-binary %}

This whole series is sponsored by Heroku. A special thank you to Heroku for their ongoing support!

{% organization heroku %}
Angular 8/9 MEAN Stack CRUD with Angular Material 8 
Tags: angular89, meanstack, meanstackcrud, angularmaterial8
Published: 2020-01-29 17:39:26

---
title:Angular 8/9 MEAN Stack CRUD with Angular Material 8 
published: true
description: Today I am going to share with you an Angular 8/9 MEAN Stack tutorial.
tags: Angular 8/9, MEAN Stack, MEAN Stack CRUD, Angular Material 8 
---

In this MEAN stack tutorial, you’ll learn to set up a MEAN stack project from scratch. I’ll be creating back-end and front-end for a real-world CRUD web application from scratch.

For the demo purpose, I’ll create a students record management CRUD (create, read, update & delete) web application. In this CRUD app user will be able to perform the following tasks:

Add student ID
Add student name
Add student email
Add section Angular Material dropdown
Add multiple subjects using Angular material input chips
Add student’s gender using Angular material radio buttons
Add student date of birth using Angular material datepicker
Following topics will be covered in this tutorial:

[click here to read more](https://www.positronx.io/angular-8-mean-stack-tutorial-build-crud-angular-material/)
Xamarin.Forms - How to Use PancakeView
Tags: xamarin, beginners, pancakeview
Published: 2020-01-29 17:39:25

`An extended ContentView for Xamarin.Forms with rounded corners, borders, shadows and more!`

![PancakeVIew](https://github.com/sthewissen/Xamarin.Forms.PancakeView/raw/master/images/pancake.gif)

Source: https://github.com/sthewissen/Xamarin.Forms.PancakeView

Let's try to add it to our Xamarin.Forms application. An example is created using `Blank Template`, but it can be used in an application created with any other template as well.

## Add NuGet Package

To use this `PancakeView` you need to add a reference to NuGet package called 
[Xamarin.Forms.PancakeView](https://www.nuget.org/packages/Xamarin.Forms.PancakeView).

There are multiple ways on how to install some NuGet package, here is one way how to do it:

1. Right-click on the solution name in `Solution Explorer` to open the context menu and then press `Manage NuGet Packages for Solution...`
2. Select the `Browse` tab and search for `Xamarin.Forms.PancakeView` by Steven Thewissen.
3. Select all projects (right side) and press `Install`.
4. If the installation is successful, you should see something like `Successfully installed 'Xamarin.Forms.PancakeView'` in `Output` window.

## Add Namespace in XAML

Once you reference `PancakeView` reference in your projects, you have to add a namespace in your XAML file.
Open XAML where you would like to use it and add 

```xml
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
```

## Use it in XAML

Here is example how it can be used:

```xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="PancakeView.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
    mc:Ignorable="d">
    <StackLayout>
        <yummy:PancakeView
            Margin="16"
            BackgroundGradientAngle="45"
            BackgroundGradientEndColor="Azure"
            BackgroundGradientStartColor="LightSkyBlue"
            CornerRadius="32,0,0,32"
            HasShadow="True"
            HeightRequest="100"
            VerticalOptions="CenterAndExpand">
            <Label
                Margin="16,0"
                FontSize="50"
                Text="PancakeView"
                VerticalOptions="Center" />
        </yummy:PancakeView>
    </StackLayout>
</ContentPage>
```

The result looks like this:

![PancakeView](https://dev-to-uploads.s3.amazonaws.com/i/0sormu5k4hq4s5m2tz6b.png)
Free Apple Watch Mockup [PSD, Sketch]
Tags: design
Published: 2020-01-29 17:31:49

Selection of Apple Watch device mockups in Photoshop PSD and Sketch format for designers and marketers.

Apple continues updating its flagship wearable device Apple Watch every year. It is getting more capabilities and slowly switching from an extension of an iPhone to a completely standalone device with GPS, SIM card and some great features that <a href="https://www.hackread.com/7-times-apple-watch-saved-lives/" rel="nofollow">save lives</a>. We worked hard to 3d model, render and draw from scratch some beautiful Apple Watch mockups. We hope you will find them useful for your next project.

<h2><a href="https://store.ramotion.com/product/apple-watch-mockup-clay">Apple Watch Mockup</a> (5th generation)</h2>
Material: Clay
Format: PSD + Sketch

<img src="https://store.ramotion.com/blog/content/images/2019/10/apple-watch-4-clay-chameleon-psd@2x.jpg">
<img src="https://store.ramotion.com/blog/content/images/2019/10/apple-watch-4-clay-all-angles-psd@2x.jpg">
<img src="https://store.ramotion.com/blog/content/images/2019/10/apple-watch-4-clay-all-psd@2x.jpg">
<img src="https://store.ramotion.com/blog/content/images/2019/10/apple-watch-4-clay-all-frontal-psd@2x.jpg">

<a href="https://store.ramotion.com/product/apple-watch-mockup-clay#demo">Get your FREE Apple Watch Mockup</a> (5th generation)

---

<h2><a href="https://store.ramotion.com/product/apple-watch-mockups">Apple Watch Mockup</a></h2>
Material: Realistic
Format: PSD

<img src="https://store.ramotion.com/blog/content/images/2019/10/all-apple-watch-mockup-templates-view-psd@2x.jpg">
<img src="https://store.ramotion.com/blog/content/images/2019/10/apple-watch-mockup-template-view-sport-gold-black-sport-band-psd@2x.jpg">
<img src="https://store.ramotion.com/blog/content/images/2019/10/apple-watch-mockup-template-perspective-view-space-gray-aluminium-black-sport-band-psd-free@2x.jpg">

<a href="https://store.ramotion.com/product/apple-watch-mockups#demo">Get your FREE Apple Watch Mockup</a>

---

We hope you will find these apple watch mockups useful for your next project.

---

<b>Read also:</b>

<a href="https://store.ramotion.com/blog/free-iphone-11-pro-mockup-psd-sketch/">iPhone 11 mockup</a> | <a href="https://store.ramotion.com/blog/free-ipad-mockup/">iPad mockup</a> | <a href="https://store.ramotion.com/blog/free-imac-mockup/">iMac mockup</a> | <a href="https://store.ramotion.com/blog/free-macbook-mockup/">MacBook mockup</a> | <a href="https://store.ramotion.com/blog/app-store-screenshot-mockup-template/">App Store screenshots mockup</a> | <a href="https://store.ramotion.com/blog/free-android-mockup/">Android mockup</a>
[question/help] How can one use docker-compose to install packages from a requirements file when one is behind a private repo?
Tags: docker, git, python, django
Published: 2020-01-29 17:24:23

Hi all, I have never asked a question before on DEV.to, but it's about time. I just joined a new project and while trying to get set up, docker-compose up hangs.

Upon inspection of the code, I realised the problem is simply that the package repo we're trying to clone inside the image is a private one.

Without using personal access tokens or whatnot, how would one go about it? The things I'd love to avoid, if possible, are:

- user input neede (eg: "export your ssh key before setting all of this up")
- intermediate throwaway image with the ssh details in it

The private repo is on bitbucket, that allows to have a Server SSH key in read-only mode to authorise other apps, but that still means (I think?) I'd have to use and share that key somehow.

The app that is trying to pull that package is private as well, so I suspect that shouldn't be an issue, but does not seem solid enough to me.
Thoughts?
Create a basic CRUD api and fill it with dummy data in SECONDS
Tags: webdev, tutorial, productivity
Published: 2020-01-29 17:23:34

A few months ago, I released a free service to help with the need for dummy data and a CRUD api during frontend development -- and I'd like to share it with you today!😄

<h2>Who is this for?</h2>
This is for YOU when you're focused on the frontend, and don't want to hardcode dummy data to use in your app; you want to make an api call, you want lots of data, you want to be able to modify the shape of the data as you go along and find more requirements, and you might want to to make CRUD actions on the data.

<h2>Start your timer...</h2>
There's not much to it, so let's just jump straight in!

<h3>Step 1: Navigate to the website</h3>
Head on over to <a href="https://crudpi.io">Crudpi.io</a> and you'll be greeted by this screen.

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

<h3>Step 2: Create your first CRUD API</h3>
No time to waste! Just type in an appropriate name, and hit CREATE!

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

<h3>And you're done!</h3>
You can now go right ahead and start using the provided links to GET, POST, UPDATE, and DELETE your data.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yo2fq9k9kyohq0tr4wul.jpg)

<h1>But wait! There's more!</h1>

We need dummy data! Lots of it!

<h3>Step 3: Fill your api with dummy data</h3>

When you click JSON Inserter, you'll get access to a code editor where you can define a JSON object that you want inserted into your API. The cool part is that the editor has a built-in <a href="https://www.npmjs.com/package/faker">faker</a> dummy data generator, and intelliSense to suggest dummy data, so you don't need to hard-code the values. Couple this with the ability to choose how many copies of the object you want inserted into your API, and you can quickly have 100 custom defined dummy data objects at your disposal in no time!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1a6x15v3i2uesblq14pz.jpg)

I've defined the object I want above. As you can see, "name", "address", and "logo", will be replaced with generated fake values, while "planet" is hardcoded as "Earth". I want 50 of these in my API.

<h3> And just like that...</h3>

My frontend now has access to exactly the data I need! I can also add more API's on the same page, and quickly delete/replace the saved data.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g7o1e2hlxtq0z5g1kcdi.jpg)

<h1>Thanks for reading! 😀😀 </h1>
CSS Sonar Wave Effect in Circle
Tags: css, todayilearned, todayisearched, challenge
Published: 2020-01-29 16:31:05

We love to make something new and attractive user-interface using HTML and CSS. So here we designed Sonar Wave Effect in Circle using CSS some properties and CSS keyframes animation properties with rules.

The animation is used to make your website more beautiful. But, you have to know how to make new types of creative using CSS animations. So CSS3 has so many new properties to make your elements awsome.  In these elements, we used keyframes properties and transform properties with display flex properties to make our elements in the proper middle on the web page.  Also, we used opacity in keyframes and also used pointer-events in wave class. This is responsive elements in all views.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Get Source Code:-

https://w3hubs.com/css-sonar-wave-effect-in-circle/
Selenium vs The World Faster Clicker
Tags: selenium, testing
Published: 2020-01-29 16:29:53

Today I discovered that a guy named **Jordan Hum** is the world record holder for more clicks in 5 seconds, with an amazing score of **14 CPS** which means 70 clicks in 5 seconds.

So I went to [Click Speed Test](https://clickspeedtest.com/5-seconds.html) and tried my self.

*You’re a Rabbit! Well.. You Clicked with the speed of 9.6 CPS (Clicks per seconds). You made 48 Clicks in 5 Seconds*.


## Automating the clicks
I wondered how fast can selenium click? I am pretty sure that a selenium script can beat this guy, but let's make sure finding some results.

This is the script:

```python
driver = webdriver.Chrome(DRIVER_LOCATION) #driver
driver.get("https://clickspeedtest.com/5-seconds.html")
print('Start clicking')
id = driver.find_element_by_id('clicker')
while True: # click for ever
  try:
    id.click() 
  except Exception as ex: # until it breaks
    print('Time is over')
    break

time.sleep(1) # results are slow
result = driver.find_element_by_css_selector('.times')
print(f'Result: {result.text}\n') 
driver.close()
```

I executed it several times to find an average value, but basically this was the result:

```bash
Start clicking
Time is over
Result: 190 Clicks in 5 Seconds
```

## Let's learn something
I wanted to have a lesson learned out of this post, so I tried and tested  a couple of myths:

1) The original script finds the element once and then uses that instance to execute the clicks. But what if we try to find the element inside the loop and click it right away `driver.find_element_by_id('clicker').click()`.

The outcome is way slower clicking as expected: 
```bash
Result: 137 Clicks in 5 Seconds
```

2) We can try to use a javascript executor to performs the clicks instead of the click method:

```python
javaScript = "document.getElementById('clicker').click();"
driver.execute_script(javaScript);
```

My lesson learned for this case is that using javascript not always trigger the click event.

3) What if I use a headless browser? Does it makes any difference:

The result is (surprisingly for me) an average faster clicking:
```bash
Result: 216 Clicks in 5 Seconds
```
*I executed this a lot of times and in some cases it went down to ~170, but average was mostly faster.*


## Final thoughts
Maybe clicking this fast is not a normal use case for selenium, but knowing how to improve tests speed and performance can save some minutes of execution on large amounts of tests.

Suggestions on what else we can test?

cheers :) and remember to keep clicking
[https://pjcalvo.github.com](https://pjcalvo.github.com)

if you liked the post:

<a href="https://www.buymeacoffee.com/YZqiD0Q" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 25px !important;width: 150px !important;" ></a>
Top websites to find a remote programming job
Tags: remote, developer, programmer, wfh
Published: 2020-01-29 16:12:47

One of the first challenges to find a remote job is to discover where are the opportunities. Look at the websites below to find a remote job as Software Developer.

Stackoverflow
https://stackoverflow.com/jobs/remote-developer-jobs

We work remotely
https://weworkremotely.com/categories/remote-programming-jobs

RemoteOK
https://remoteok.io/remote-dev-jobs

Remotive
https://remotive.io/remote-jobs/software-dev

Jobspresso
https://jobspresso.co/remote-software-jobs/

Working Nomads
https://www.workingnomads.co/jobs?category=development

BairesDev
https://www.bairesdev.com/careers/

Toptal
https://www.toptal.com/developers/join

Glassdoor
https://www.glassdoor.com/blog/work-from-home-jobs-now/
https://www.glassdoor.com/blog/companies-that-let-you-work-remotely/

Findwork
https://findwork.dev/

Employ Remotely
https://www.employremotely.com/

Vanhack
https://vanhack.com/

Which of those do you think are the best ones?
Please, add to the discussion. :)
22 Phrases to Successfully Negotiate Salary After Receiving a Job Offer (video)
Tags: career, advice, tips, salary
Published: 2020-01-29 16:11:26

What do you say if a job offer is surprisingly high? Or disappointingly low? Use these phrases to ask for more without seeming like a jerk or giving in too easily and missing out.

This video is the capstone to the "How to Negotiate a Job Offer" video series. Check out the full series to learn exactly what to say each step of the way from applying to a job, to negotiating your salary after receiving an offer.

If you're wondering how to come up with your own salary expectations, check out the "Two Numbers You Need to Know Before Negotiating" video
{% youtube vHklSyK4LyM %}
Brought to you by Adam Dangoor and Lusen Mendel, the team behind candidates who kick butt.

CANDIDATE PLANET:
Advice for candidates applying to tech companies. We answer questions from engineers, developer advocates, designers, marketers, all kinds of managers and many more.

Email ask@CandidatePlanet.com with questions. Adam and I will email you personal advice, and anonymize your question for the show so that other candidates can benefit, too.

SUBSCRIBE:
☆ Youtube ☆ https://www.youtube.com/channel/UCdvny6qs8e4VUJIG01puw2Q
☆ Newsletter ☆ https://www.dangoormendel.com/blog

MORE ABOUT US:
☆ Website ☆ https://www.dangoormendel.com
☆ Speaking Inquiries ☆ lusen@candidateplanet.com
☆ Potential Clients ☆ hello@dangoormendel.com
☆ LinkedIn Lusen ☆ https://www.linkedin.com/in/lus
☆ LinkedIn Adam ☆ https://www.linkedin.com/in/adamdangoor
☆ Twitter Lusen ☆ https://twitter.com/staycalmcomic
☆ Twitter Adam ☆ https://twitter.com/AdamDangoor
{% youtube FiDcUaoODJE %}
Extend Express's Request Object with Typescript Declaration Merging.
Tags: node, express, intermediate, productivity
Published: 2020-01-29 16:02:05

[Express](https://expressjs.com) has been my go to server side node web framework for the past few years. Its fast, unopinionated and so easy to get up and running. I really love using it along with Typescript too, I should say. It enhances code quality and understand-ability.  Refactoring your code in Typescript is also much more easier and faster. Plus, you get the added advantage of code completion and IntelliSense when using modern text editors like Visual Studio Code. 😋

One of the concepts of Typescript which I've recently began using is `Declaration Merging`.
Declaration Merging allows you to merge two or more distinct declaration or types declared with the same name into a single definition. This concept allows you to attach your own custom property onto another Typescript interface type. Lets take a look at a typical Express middleware.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/894ifx3we7tp3a1fbgiq.png)

The above code is an Express middleware that is used to ensure that a user is authenticated when he or she tries to access a protected resource. It decodes the user's token from the authorization property of the request headers and attaches the user to the Request object. But see that red squiggly line?
Thats because the property `currentUser` does not exist on Express's Request interface type. Let's fix that. 😃

The first thing we need to do is to create a new declaration file `@types > express > index.d.ts` in the root of our project. 

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

You would notice this is the exact same file name and path in our `node_modules/@types` folder. For Typescript declaration merging to work, the file name and its path must match the original declaration file and path.

Next we need to make some few changes in the project's `tsconfig.json` file. Let's update the `typeRoots` value to the following:

```typescript
...
"typeRoots": [
      "@types",
      "./node_modules/@types",
    ]                    
...
```

By default, the Typescript compiler looks for type definitions in the `node_modules/@types` folder. The above code instructs the compiler to look for type definitions in this folder as well as our custom `@types` folder in our project root.

It's now time to add our custom `currentUser` property to Express's Request interface type by modifying the `index.d.ts` file we created earlier:

```typescript

import { UserModel } from "../../src/user/user.model";

declare global{
    namespace Express {
        interface Request {
            currentUser: UserModel
        }
    }
}

```

Lets take a look again at our middleware file and we immediately notice that the red squiggly line is gone! This is because the Typescript compiler now recognizes the `currentUser` property as a valid property on the Request type interface.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ff5b7nlqfw1fxahwgt3g.png)

Happy Coding, everyone!