teleren/devto huggingface dataset:
How to run tests in headless mode with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-16 15:10:19

## Today in "Pinches of Cypress", learn how to run tests in headless mode

After installing [**Cypress**](https://cypress.io), you can run `cypress open` to execute interactive mode tests. You can watch tests run in such a mode, besides having time-travel and automatic-reload features at your disposal.

However, after the tests are ready, we want to automatically execute them for each code change in the application under test, such as when creating and updating pull requests, merging to the main branch, or even after deployments in production.

> The good news is that in addition to being powerful, Cypress is a simple tool.

To run the tests in headless mode, use the `cypress run` command.

And, if you want to run only one specific `spec` file, you can pass it as an argument to the `cypress run` command (see below).

```sh
cypress run --spec cypress/integration/example.spec.js
```

**Note:** It is necessary to prefix the above commands with `npx` when executing them locally if they are not npm scripts.

**Note 2:** It's recommended to create npm scripts in the `package.json` file with shortcuts to execute such commands. See an example below.

```json
{
  "name": "sample-project",
  "version": "1.0.0",
  "description": "Sample project for the Pinches of Cypress series",
  "main": "index.js",
  "scripts": {
    "test": "cypress run"
  },
  "keywords": ['cypress.io', 'testing', 'cypress'],
  "author": "Walmyr Filho <wlsf82@gmail.com> (https://walmyr.dev)",
  "license": "MIT",
  "devDependencies": {
    "cypress": "^6.4.0"
  }
}
```

With the `test` script above, instead of running `npx cypress run` on the terminal, you can simply run `npm test`, or `npm t`, for short.

And you can have as many scripts as you want. For example:

```json
"scripts": {
  "cypress:open": "cypress open",
  "cypress:ci": "cypress run",
  "cypress:smoke-test": "cypress run --spec cypress/integration/smoke-test.spec.js"
},
```

And to run the scripts above, just run `npm run cypress:open`, `npm run cypress:ci`, or `npm run cypress:smoke-test`.
___

Are you enjoying the "**Pinches of Cypress**" series?

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/14/como-rodar-testes-em-modo-headless-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).
Debouncing in Javascript.
Tags: beginners, javascript, tutorial, webdev
Published: 2021-02-16 15:05:49

Debouncing is a pattern that allows _**delaying execution of some piece of code**_ until a specified time to **avoid unnecessary CPU cycles, API calls and improve performance.**

## Why debouncing?

One word "**Performance**".

Suppose, you are building an e-commerce application. There you have to implement a search bar for searching products And when the user types in a character, an API call is made.

Look at the example below.

{% codepen https://codepen.io/abhishekjain35/pen/WNopLYV %}


In the above example, we're having a simple searchBar and a count of API calls made. As we type in the searchBar, the count of API called increases with each character. But that's not what we want to happen. What we want is to wait for the user to stop typing. As soon as the user stops typing then we want to make the API call.

so, how can we fix this? - here comes debouncing into play.

Final version with debouncing.
{% codepen https://codepen.io/abhishekjain35/pen/QWGpoeZ %}

Pretty cool huh?

### The debouncing function

Take a look at this debounce function we implemented above.

```javascript

function debounce(fn, delay) {
  let timer;

  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => fn(), delay);
  };
}

```

What we are doing here is, initialize a timer then return a `function`. As soon as the user starts typing the `function` executes -:

1. First it clears the timer if it's initialized.

2. then it assigns the timer setTimeout function, which will run after 1 second if it is not cleared.

3. if the user types any character within 1 second the `function` will be called again. But in the above step, we already assigned the setTimeout function to the timer variable. So the clearTimeout will clear the function from the timer variable and also assign a new setTimeout function to the timer variable.

4. if the user didn't type and 1 second has passed, the function in setTimeout will execute and make the API call.

That's it.

The full version of the debounce function with `this` and argument binding is -:

```javascript
function debounce(fn, delay) {
  let timer;

  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(context, args), delay);
  };
}

```

Well, this is it from my side. See you soon 😁

![](https://media.giphy.com/media/hrRJ41JB2zlgZiYcCw/giphy.gif)
Scala 3 (aka Dotty) Context functions
Tags: scala, dotty, functional
Published: 2021-02-16 14:48:41

---
title: Scala 3 (aka Dotty) Context functions
published: true
tags: scala, dotty, functional
canonical_url: https://climbingdev.com/posts/scala-context-functions
cover_image: https://climbingdev.com/assets/images/2021-02-16-scala-context-functions.png
---

Recently I've watched an interesting presentation from [Martin Odersky on Plain Functional Programming](https://www.youtube.com/watch?v=YXDm3WHZT5g).

In his talk Martin introduced Context functions which let him achieve 2 things.

1. Pass context to functions without explicitly passing it through function's arguments
2. Make function signatures more descriptive - by introducing Possibly he gave the function ability to throw an error

I highly recommend the talk if you want to get familiar with the full reasoning behind Context functions. [Also here's the link to docs about Context functions](https://dotty.epfl.ch/docs/reference/contextual/context-functions.html).

You can check out the sample code for Martin's presentation [here](https://github.com/mmodzelewski/scala-examples/blob/master/context-functions/src/main/scala/Main.scala).
I have updated the code to the current Scala syntax.

Happy coding 🙂
Need help in Ddropdown box in react.js
Tags: react
Published: 2021-02-16 14:47:55

I'm having a simple dropdown box and I'm fetching the options from a JSON file. Can I have an add and remove button so that whenever I click an Add button a new dropdown box should appear and the remove button should remove the dropdown box. Also If I select an option in a dropdown the selected option should not be available in the newly created dropdown unless I'm changing the selecting option. Thanks in Advance.
Why we made a Django release notes comparison tool
Tags: django, python, webdev, productivity
Published: 2021-02-16 14:45:27

Django release notes are great. Very detailed. However, when updating across multiple releases such as 3.1.3 to 3.1.6 one would need to open the release notes for all 3 releases to get an idea of the changes:

- https://django.readthedocs.io/en/3.1.x/releases/3.1.6.html
- https://django.readthedocs.io/en/3.1.x/releases/3.1.5.html
- https://django.readthedocs.io/en/3.1.x/releases/3.1.4.html

That's why we made the Django release notes comparison productivity tool:

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slmvs5is3cscfp54zler.png)
 
At a glance we can see the total changes.

## Parsed to JSON

To achieve this we parsed Django's release notes to JSON.

An advantage of this functionality is the data is nice and machine readable. During the parsing we pull out metadata such as _how many Django bugs are there in a particular Django Release_:


![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ske7sr1n9dolap2ainxz.png)
  
This gives some context when we see a new Django version is available: do we need to upgrade now or can it wait.

Have a look: https://django.doctor/compare-django-release-notes/3.0.0/3.1.6
Slowing Down (to go faster)
Tags: productivity, webdev, watercooler, javascript
Published: 2021-02-16 14:34:30

I love to build things, fast. My individual creative process revolves around getting pixels on the screen right away, and iterating from there. While at the project/team level I am a good planner and coordinator, for my personal work, I like to “mess around”. 

But I’ve had problems with this strategy. I often sink days into problems that could have been avoided by reading the documentation or understanding the issue more deeply. This often happens on infrastructure and build system problems, where I skip over the details to get more quickly to “the good stuff” of building and testing complex and fun user interfaces. 

Worse, I haven't always left code “better than I found it”, something I almost always regret and probably makes me less effective as a team programmer.

This year I want to "level up" my engineering skills, and I think "slow down (to go faster)" is a good framing for me. I specifically want to spend time understanding things that enable myself and my team to build unobstructed. Things like:

---



### Webpack configuration
 what are the best practices for using webpack to build sub-dependencies, how do the different plugins I use actually work

---

### Babel transpiler settings
 how does "preset-env" work, where should settings go (babelrc vs package.json vs. webpack options)

---

### Localization workflows
 The projects I work on are translated in >40 languages, and I want to know how our localization works well enough to inform other choices we might need to make, like adopting a Content Management System.

---

### Deployment process
 We deploy on a rigid schedule that makes things difficult in many ways. I want to understand how other teams adopt continuous integration when thinking about QA. 

---

### NPM packaging best-practices
 I often deal with an ecosystem of related JS modules published to NPM, some React, some non-React. How do others publish code that needs transpiling like JSX? What about packages with lots of image/style assets?

---

One common element in these types of issues is that I'm being asked to use a tool I do not fully understand that has been built up over years. I never get to the "messing around" part, where I think [so much learning happens](https://itp.nyu.edu/classes/cow-fall2015/wp-content/uploads/sites/61/2014/09/Messing-about-in-Science.pdf) because I haven't stripped things down to their basics. So instead of trying to understand a complex system as-is, I'll harness my love of "messing about" and build lots of little dummy projects to see how each individual part works. Hopefully I'll have some follow up posts in the next few days about how this works. 

<small>Photo by <a href="https://unsplash.com/@bmatangelo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Brian Matangelo</a> on <a href="https://unsplash.com/s/photos/diving-deep?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></small>

Are there things that you've "hand waved" (i.e. copy/pasted) your way through that came back to bite you?
Python PIP Tutorial - Basics for Beginners
Tags: python, bash, terminal
Published: 2021-02-16 14:32:16

In this Python tutorial you will learn the basics of PIP. You will learn how to stay up-to-date, install packages, uninstall packages, and more.

PIP which is known as PIP Installs Python or PIP Installs Packages. Whatever you want to call it... We just call it PIP.

Note - There are some bash commands in this tutorial that may not work for you if you use Windows.

Let's get started.

## Want to watch the video tutorial instead?

{% youtube eocEhJQRxYU %}

## Tutorial

**Check the version you are using.** *If they are the same you can use either pip or pip3 as you wish.*

```pip --version
pip3 --version```

**If PIP needs upgrading then you can use the following command.**

`python -m pip install --upgrade pip`

**For help you can use the following command.**

`pip help`

**For the manual you can use this command.**

`man pip`

**List out all installed packages.**

`pip list`

**Use some bash commands to filter through your list.**

`pip list | grep "packagename"`

**List out more details about a specific package.**

`pip show packagename`

**Display a list of all packages along with version.**

`pip freeze`

**Output the list into a .txt file.**

`pip freeze > pip.txt`

**Output our new file to the console.**

`cat pip.txt`

**Install a PIP package**

`pip install packagename`

**Install a specific version of a PIP package**

`pip install packagename==1.0.0`

**Install multiple PIP packages from a .txt file**

`pip install -r pip.txt`

**Uninstall a package**

`pip uninstall packagename`
Are React Hooks Actually Worth Using?
Tags: discuss
Published: 2021-02-16 14:20:56

---
title: Are React Hooks Actually Worth Using?
published: true
description: 
tags: #discussion
//cover_image: https://direct_url_to_image.jpg
---

Full disclosure, I am not fan of Hooks.  They seem to abstract away a part of Component Lifecycles that never needed to be abstracted.  Checkout out this article:  https://codewithghazi.com/componentwillunmount-with-react-hooks/

Instead of `componentDidMount` and `componentWillUnmount`, Hooks makes us use the cryptic `useEffect`:

```js
useEffect(() => { 
   document.addEventListener('click', handleClick);

   return function cleanup () {
     document.removeEventListener('click', handleClick);
   }
}, [])
```

I understand using Hooks for simple functional components that require some small uses of `state`.  But once we get into lifecycle methods and about half a dozen `state` fields, I find that hooks actually get in the way.

I really like code that explains what it does.  I prefer `setNameOnClick` as opposed to `handleClick` (unless I'm making a reusable Component).

I like `state` that is easily identifiable.  `this.state.userName` is clearer to me than `userName`.

Overall, Hooks to me seem like they make code more "code-y" and I know I want a coworker to be able to understand my work ASAP.

Thoughts?
Service worker and its self.skipWaiting() method
Tags: javascript, webdev
Published: 2021-02-16 14:14:32

The ServiceWorker.skipWaiting() method is a life saver. It ensures that any new versions of a service worker will take over the page and become activated immediately.

To understand why this is so important and useful, we need to revisit the service worker lifecycle. I have a more detailed article about each step of the lifecycle, but you just need to know that there are six states that a service worker can be in - parsed, installing, installed (waiting), activating, activated, and redundant.

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

When we first try to register a service worker via navigator.serviceWorker.register(), the file passed is parsed and, assuming there are no errors, the service worker is installed. For a page with no previous service worker files, the newly installed service worker becomes activated immediately.

If, however, the page already has an activated service worker file, things are more complicated.

<h2>Endless waiting</h2>
If the page already has an activated service worker and a new file is pushed, the new file will still be parsed and installed. Once installed, it will wait for an opportunity to become activated.

Without self.skipWaiting(), a waiting service worker will only become active itself once the currently active service worker is released and becomes redundant. This can only happen in two scenarios:

- If the user has navigated away from the page, thereby releasing the previous active worker.
- If a specified period of time has passed, thereby releasing the previous active worker.

So, unlike we are used to when pushing new versions of assets to our website, a new version of a service worker can be waiting for what seems like forever. Even if a user refreshes their page, they may not receive the updated version for a very long time.

<h2>self.skipWaiting() to the rescue!</h2>

The ServiceWorker.skipWaiting() method solves this problem by telling the newly installed service worker to skip the waiting state and move directly to activating.

![Alt Text](https://bitsofco.de/content/images/2019/01/Skip-Waiting.png)

The self.skipWaiting() method is typically used in the install event of the service worker. As long as the method is called before the waiting phase itself, the service worker will skip the waiting phase and become immediately activated.

```
self.addEventListener('install', function (event) {

    self.skipWaiting();

    event.waitUntil(
        // Do stuff
    );
})
```

If you or your company needs someone with experience in
- AWS, GCP
- Java, NodeJS
- Angular

Let's talk, I would like to meet your needs.
Regards
ScoutSuite: A Security Audit Tool for Azure
Tags: azure, audit, cloudsecurity, opensource
Published: 2021-02-16 12:56:16

---
title: ScoutSuite: A Security Audit Tool for Azure
published: true
description: Azure Security Audit Tool
tags: Azure , Audit , CloudSecurity, OpenSource
//cover_image: https://direct_url_to_image.jpg
---
# Introduction
Scout Suite is an open source security audit tool for cloud cluster environment, mainly for the security status of cloud environment. By using the API exposed by the cloud service provider, Scout Suite can collect configuration data from high security risk areas for manual audit by researchers. It is worth mentioning that Scout Suite can automatically present a clear and detailed attack surface overview to researchers after completing a security audit, without the need for researchers to browse the complicated Web console information.

# Steps
1. Install Python
2. Install Azure CLI
3. Clone the ScoutSuite github repository
```
$ git clone https://github.com/nccgroup/ScoutSuite
$ cd ScoutSuite
$ virtualenv -p python3 venv
$ source venv/bin/activate
$ pip install -r requirements.txt
$ python scout.py --help
```
4.Running ```pip install azure-cli``` command in Power Shell
5.Running ```az login``` command and the system prompt to authenticate your Azure Subscription
6.Navigate to the ScoutSuite folder ```cd .\ScoutSuite```
7.Running ```python scout.py azure --cli``` command
8.The Report will generated in the web page.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m28clsfsfu6rjg2rf6w.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chjphxk1essvletbhisx.png)

# Reference:
https://github.com/nccgroup/ScoutSuite
Best printscreen tool
Tags: printscreen, flameshot
Published: 2021-02-16 14:10:37

---
title: Best printscreen tool
published: true
description: The best printscreen tool is the https://github.com/flameshot-org/flameshot. It works in almost every OS, and is really simple to use!
tags: printscreen, flameshot
---

The best printscreen tool is the https://github.com/flameshot-org/flameshot. 
It works in almost every OS, and is really simple to use!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li2sxw28wooo5yusq2k6.png)
Cooking safety nests
Tags: management, productivity, teamplay, leadership
Published: 2021-02-16 14:09:43

Something still occurs too often: 
Developers trying to conceal their mistakes 💣.

Most of the time it creates no particular issue. But sometimes it can lead to incident and even service outage.

This is a fact: developers often make mistakes. This is normal since nowadays technologies are highly complex.

> 
> In order to promote Teamplay we should embrace developer’s mistakes.
> 

Because it is clearly unavoidable and this is the best way to learn.

Our responsibility however is **to reduce any negative outcome**. And to detect them ASAP when they are **costless**.

Nearly all mistakes will be noticed one way or another.
When they are noticed:

## :tada: Ask for a homemade cookie !

Homemade 🍪 are a humorous way to de-escalate the way mistakes are perceived. Since developers no more fear being caught doing a mistake. It leads them to be way more transparent. Therefore it produces trust.

As soon as developers embrace mistakes. And as long as you provide them the tools/methodologies to reduce any negative outcome. You will create a safety nest. When your team members no more feel in danger, this reduces their cognitive load.

Another positive outcome is that developers will then openly share their mistakes. Allowing to transfer experience to other teammates. Hence mistakes won’t be done twice.

The last positive outcome is that now your developers will dare to take more initiatives. They will be less stunned by fear.

🍪 will ultimately increase your team productivity.

-------------------

Working remotely ? Ask them to share the picture of their work. Or find a cheap alternative.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsdannuokpkzs6eqjvvs.jpg)
Unsplash Integration with the Apostrophe Media Source Module
Tags: webdev, news
Published: 2021-02-16 14:03:12

With a continued effort to offer content editors a seamless editing experience, today we're announcing our Apostrophe Media Source module, featuring a Media Library integration with Unsplash.

The Apostrophe Media Sources integration unlocks a media library of over 2 million high-resolution, filterable, searchable images stemming from the talents of the [Unsplash] (http://unsplash.com/) community of photographers.

Because of Unsplash's reputation as a great resource for free-to-use imagery, we were excited to add this to the Apostrophe ecosystem of integrations. We took advantage of the [Unsplash API] (https://unsplash.com/developers) and resulted in some great features to offer to users.

##New Features
* As part of this work, we also made an update to the Apostrophe Media Library. You can now filter all Apostrophe Media Library images (not just Unsplash) by orientation, file extensions (jpg, png, etc), and source.
* Adds Unplash as a media source in the Media Library.
* Filter Unsplash images by color and orientation.
* Import Unsplash images and metadata to your Apostrophe Media Library to be used easily in your projects.
* This is the first release among a larger focus on Digital Asset Management and the Media Library.

##Unsplash In Action
The enhancement to the Media Library allows Apostrophe users to search and import images directly from Unsplash into their library without ever leaving the editor experience.


{% vimeo 511227229 %} 

Searching, filtering and sorting through inspiring photos from Unsplash is made simple within your Media Library.

{% vimeo 511226448 %}
 

Knowing the origin of the photo is easy with simple tagging options within your own Media Library.
![Image Origin-high](https://dev-to-uploads.s3.amazonaws.com/i/avc30mhsgdamt4xrns2r.gif)
 

Beyond Unsplash, the updates to the Apostrophe Media Library are the foundation for integrating with other external media sources such as [Wedia] (https://www.wedia-group.com/), a leading Digital Asset Management Software, selected by Apostrophe users in France.

##Install
You can grab the module on [Github] (https://github.com/apostrophecms/apostrophe-media-sources#apostrophe-media-sources) and npm and install it on any 2.x compatible Apostrophe site. The Unsplash integration is now available free to install on any existing Apostrophe 2.x site (with plans to include in A3 as well) through our open source repo. Check out the README directly in the project to explain how to install this module, how to configure it, and how to integrate new media sources.

Already up and running with this latest update? [Share your feedback] (http://chat.apostrophecms.org/) with our team and [contribute your ideas] (https://portal.productboard.com/apostrophecms/1-product-roadmap/tabs/1-under-consideration) to future Media Library upgrades.


This post was written by Apostrophe's Marketing Director, a lover of to-do lists, whiteboard sessions, and lifting up others. We also call her [Ashleigh] (www.linkedin.com/in/ashleigh-mason).