teleren/devto huggingface dataset:
Attach Screenshots on Test Failure - WebdriverIO
Tags: testing, javascript, tutorial, webdev
Published: 2020-08-01 13:55:56

Wouldn't it be nice to know the exact state of the application you are testing whenever a test failed to help debug your tests? 
Well, with WebdriverIO, you can easily take screenshots of the application on test failure and can attach it with your reporter. 

Let's take a look at how we can do that with Allure reporter - 

### Prerequisite
Need to have Allure reporting setup already with your tests. You can [watch this video](https://youtu.be/eIVud4f0fac) to see how to do that.

### Setup 
You'll need to edit the `afterTest` hook in the `wdio.conf.js` file 
```javascript
afterTest: function (
    test,
    context,
    { error, result, duration, passed, retries }
  ) {
    // take a screenshot anytime a test fails and throws an error
    if (error) {
      browser.takeScreenshot(); 
    }
  },
```

Now just run your tests normally and when a test will fail you'll see an attachment in your Allure report 🙌 - 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/39mh7h01tt092t4lsqve.PNG)

***
#### Check out this video to see a detailed explanation on how to attach screenshots on test failure:

{% youtube BzIIUV9Z0cQ %}

***

#### To learn more about WebdriverIO, check out my free tutorial series here - 
https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.

***

I hope this post helped you out, let me know in the comments below! 

Happy testing! 😄 

...

Follow [sdetunicorns](https://twitter.com/sdetunicorns) on Twitter
Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel

---

#### Enjoyed this read? Discover more insightful articles on software testing and development on my [blog](https://sdetunicorns.com/blog). 🌐
Preloading Strategies in Angular
Tags: angular, typescript
Published: 2020-08-01 13:53:29

### Let's learn about different preloading strategies in Angular.

In Angular whenever we click on any route the angular router first checks that particular module bundle is available or not in the browser's cache, if not it will go and get it. To make things faster here, angular provides a technic or strategy to pre-fetch or pre-load the modules. We can do this in 3 ways

1.**NoPreloading**: This is the default behavior and does not preloads any module except the main app module.

```typescript
RouterModule.forRoot(appRoutes, { preloadingStrategy: NoPreloading }),
```

2.**PreloadAllModules**: Will load all the modules.

```typescript
RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules }),
```

3.**Custom**: Here we can do the custom preloading based on the application modules. (ex: we can load the module on menu mouseover)

In this article lets learn about opting for a particular module to preload by using the custom property in the data property of route class.

> **OptInPreloading**: Here we will be using a custom data attribute called preload to check any lazy-loaded module has this then will preload those modules.

opt-in-preload-strategy.service.ts

```typescript
import { Injectable } from "@angular/core";
import { PreloadingStrategy, Route } from "@angular/router";
import { Observable, EMPTY } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class OptInPreloadStrategyService implements PreloadingStrategy {
  constructor() {}
  preload(
    route: Route,
    load: () => import("rxjs").Observable<any>
  ): Observable<any> {
    return route.data.preload ? load() : EMPTY;
  }
}
```

> app-routing.module.ts

```typescript
import { Routes, RouterModule } from "@angular/router";
import { OptInPreloadStrategyService } from "./stategies/opt-in-preload-strategy.service";
const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>
      import("./dashboard/dashboard.module").then((m) => m.DashboardModule),
  },
  {
    path: "employee",
    loadChildren: () =>
      import("./employee/employee.module").then((m) => m.EmployeeModule),
    data: { preload: true },
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: OptInPreloadStrategyService,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}
```

In the above code snippet, we see the second parameter for the RouterModule to use the preloading strategy to use the custom preload strategy service.
Recap/ Summary Week #31
Tags: devjournal, azure, opensource, showdev
Published: 2020-08-01 13:56:45

---
title: Recap/ Summary Week #31
published: true
date: 2020-08-01 13:46:00 UTC
tags: devjournal,azure,opensource,showdev
canonical_url: http://www.frankysnotes.com/2020/08/recap-summary-week-31.html
---

Every beginning of weekend, I will share a recap of the week and at the same time a summary of my streams. Those videos are at least two hour longs, so I thought a short summary to know if topic interest you could be useful. Watch only the summary or relax and enjoy the longer version that up to you!

{% youtube ebMDQMgWGFU %}

- Let's get Started with Containers on Azure (Erik St. Martin) - [c5m.ca/aaa-ep18](https://c5m.ca/aaa-ep18)
- Let's build a website with Node.js on Azure (Tiemey Cyren) - [c5m.ca/aaa-ep19](https://c5m.ca/aaa-ep19)
- Adding all functionalities from previous version into TinyBlazorAdmin website - [c5m.ca/stream-ep115](https://c5m.ca/stream-ep115)
- DevOps Lab: Demystifying ARM Templates: Variables (Abel Wang) - [c5m.ca/learn-arm-ep5](https://c5m.ca/learn-arm-ep5)
- Monitoring the new followers, displaying the highest scores in order - [c5m.ca/stream-ep116](https://c5m.ca/stream-ep116)
Announcing the Official Release of Appwrite Deno SDK
Tags: deno, node, architecture, javascript
Published: 2020-08-01 13:31:52

We are extremely excited to announce the official release of the [Appwrite Deno SDK](https://deno.land/x/appwrite) beta version. The new SDK joins our Node, PHP, Ruby, and Pythons server-side SDKs that allow you to extend your Appwrite functionality from your backend.

## What is Deno?

If you're new to Deno, you should know that Deno is a new runtime for JavaScript and TypeScript based on the V8 JavaScript engine and the Rust programming language. It was created by Ryan Dahl (the original creator of Node), and its main focus is on productivity. Unlike most coding languages, Deno explicitly takes on the role of both runtime and package manager within a single executable. When using Deno, you don't have to install packages or dependencies. You have to declare them in your script, and Deno will resolve them in your script runtime.

## What is Appwrite?

[Appwrite](https://appwrite.io) is a 100% [open-source](https://github.com/appwrite/appwrite) `backend as a service` packaged as a set of scalable and easy to deploy Docker containers. Appwrite provides you with a set of easy to use, must-have API, and tools to allow you to build your new projects a lot faster. We have lots of pre-built security features like file-encryption, auto-generated SSL, rate-limiting, and many more.

## Get Started

The new Appwrite Deno SDK is written in Typescript and allows you to directly integrate with your Appwrite services and APIs from your Deno backend.
Getting started with the new SDK is extremely easy; all you need to do is import the latest SDK version from your code, set your Appwrite credentials, and start making API calls. Below is a simple example:
```typescript
import * as sdk from "https://deno.land/x/appwrite/mod.ts";

let client = new sdk.Client();
let users = new sdk.Users(client);

client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
    .setKey('919c2d18fb5d4...a2ae413da83346ad2') // Your secret API key
;

let promise = users.create('email@example.com', 'password');

promise.then(function (response) {
    console.log(response);
}, function (error) {
    console.log(error);
});
```

## Docs and Examples

To learn more about how to use the new Deno SDK, you can visit the official [Appwrite documentation](https://appwrite.io/docs). We have also released a new dedicated [Deno Playground repository](https://github.com/appwrite/playground-for-deno) with useful code examples that can help you get a good look and feel for how you can use the new SDK for Appwrite.

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

## Credits

This is an excellent opportunity to thank Appwrite community members, [Ali Almoullim](https://github.com/Almoullim) and [Punit Diwan](https://github.com/punitdiwan), for helping to build and test the new Deno SDK for Appwrite. Without their fantastic support, this release was not possible.
InteractiveShell.com - A Simple, Accessible Shell for Learning Linux and PowerShell
Tags: interactiveshell, linux, webdev, scientificprogramming
Published: 2020-08-01 13:27:21

Introducing the **Interactive Shell** (https://interactiveshell.com). A simple, accessible shell for learning Linux and PowerShell powered by the Scientific Programming School.

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

It features easy access to four different shells:

- Ubuntu
- RHEL - Redhat
- SusE - OpenSuSE
- PowerShell

Just click on the terminal window and get a console! Presented by the **Scientific Programming School** (https://scientificprogramming.io/) the next generation educational platform for creating and delivering interactive and adaptive courses on advanced computing topics.

Video demo: https://www.youtube.com/watch?v=NDPGJaDIoyk

It is built upon a C++ modified version of the TTYD, Docker and Websockets and hosted by the Developer's cloud Digital Ocean. For security reasons Ping and all outgoing traffics are  barred.
Looking for contributors for a new open source coding education platform
Published: 2020-08-01 12:57:41

I'm in the process of developing a free open source online platform/course for complete beginners to teach themselves coding in Python. See https://github.com/alexmojaki/futurecoder for more information or try out the demo at https://futurecoder.herokuapp.com/. It's completely interactive and has several awesome features, including three dedicated debuggers, gradual hinting and solution revelation, enhanced tracebacks, and spotting common mistakes automatically.

It's looking great so far, and when it's ready I'm confident that it can be extremely helpful to anyone learning how to code. However, it's a big project and I'd be foolish to try and do the whole thing on my own. "If you want to go fast, go alone. If you want to go far, go together." So I'm looking for people who might be interested in contributing, either in coding the platform or in writing course content.

Volunteers on communities like this one put a huge amount of time and energy into helping beginners with the basics, one at a time. I'm hoping to redirect just some of that energy into building the best possible learning resource and lay a solid foundation. The site could also offer guidance and tools for asking good questions, such as automatically putting together reproducible code and expected and actual output.
JavaScript Interview Questions
Tags: javascript
Published: 2020-08-01 12:43:06

If you are going to attend a JavaScript interview, then it is must for you to get a complete knowledge of JavaScript and what type of question will be asked commonly in the JavaScript interview. In this blog, I have come up with the most frequently asked JavaScript interview questions and answers. Refer to these questions and answers to crack an interview in the very first 
attempt.

Basic JavaScript Interview Questions

Q1) What is JavaScript?

Ans. JavaScript is a scripting language used for programming web pages as well as server systems. It is an object-oriented, interpreted, lightweight and powerful programming language, made up of first-class functions. The JavaScript can update the content dynamically for web pages.

Q2) What are the differences between JavaScript and Java?

Ans. Java is an object-oriented and structured programming language, which help to run web pages on different platforms. The java code should be compiled on the compiler. JavaScript is an object-oriented scripting language. In which, the scripts are optimized for both server and client side. Javascript is introduced to perform HTML pages.

Q3) Name the different types of JavaScript data?

Ans. JavaScript data are of the following types - 

String  
Function  
Boolean  
Object  
Number 
Null

Q4) What is the definition of global variables? In what way, these variables are declared? 
 
Ans. A global variable is a special kind of variable in JavaScript. This variable is easy to use and also available across the entire length of the JavaScript code. Mainly, the var keyword is used whether to declare a global or local variable.

Q5) What is the definition of the prompt box?  

Ans. The Input provided by any user in the JavaScript is entered with the help of a prompt box. While putting forward the data or the input, the prompt box allows the user to do this with the help of a text box. To include the number, label box is also used.

If you want read more click here: https://bit.ly/3gK29eR
Why learn Node.js and where NPM lies in all this
Tags: node, npm, javascript, webdev
Published: 2020-08-01 12:42:27

### Node
Node.js, as the official site says is a JavaScript runtime built on Chrome's V8 JavaScript Engine. That means JavaScript as a language is not just limited to frontend web development but you can stretch it to write code on the server-side. 😃😄

To be a _web developer_ 💻, it is a recommended path to learn HTML, CSS, and JavaScript. As soon as one learns the frontend web by making a project on a framework like React or Angular, to make a full project one used to learn backend technologies like Java, Python, or Ruby. That means learning another language for the other half which can be troublesome being a newbie. Node gives frontend developers to see the other side, the backend development and you don't have to learn new language and rules in the process. 👨‍💻👩‍💻

If you are **not** a web developer 🤦‍♂️🤦‍♀️ also and getting your hands dirty for learning frontend skills, you are anyway learning JavaScript. Node.js is a popular runtime for JavaScript lets you widen your backend and JavaScript knowledge. 😝😜

But `it doesn't matter in the long run` if you started with Node, Python, or Java. What matters is the principles and the rules that need to be taken care of. The technology aims to solve real-life problems and every technology has its advantages and disadvantages based on the business problem that is solving. 🏡

Let's discuss how we can use Node on the terminal.

1. We can directly interact with the node console. First, install Node. Then type, "node" and enter. It will let you execute javascript.

```
C:\Users\user_name>node
Welcome to Node.js v14.6.0.
Type ".help" for more information.
> 2+3
5
> "hello "+ "world"
'hello world'
>
```

2. Or, run a file having JavaScript's line of code. this is an effective way of executing JavaScript as all the code can be written in a file and can be executed by passing "node <filename>". 

```
C:\Users\user_name>node app.js
```

### NPM

According to [stackshare.io](https://stackshare.io/nodejs), NPM is the number 1️⃣ reason why developers like node.js. NPM stands for Node Package Manager, which contains libraries created by other developers on Node and can be used by us. A framework for backend is available Express is an example of how it can be helpful. Like express, mongoose, faker there are more than 350k freely available packages and we can use that for building cool stuff. 😍😍😍

The use of these packages is to eliminate the pains of a developer by using code that has been written by someone else on Node. The command npm install is used to install any package. After installing a package we can include that in our application by using require()

```
//Add a package to the existing project

C:\Users\user_name\DemoProject>npm install express

//Using express into our code

var express = require("express");  //including express to our app
var app = express();     //assigning it to a variable as express contains lot of functions.
```
Come identificare i visitatori anonimi
Tags: italy
Published: 2020-08-01 12:34:12

Sei il proprietario di un negozio.

Con gli ultimi avvenimenti ti sei reso conto dell’importanza di avere anche una presenza online.

Magari ti servi già di Google Analytics, e quindi vedi il numero di visitatori per ogni pagina e per ogni articolo.

I numeri ti impressionano, nel tuo negozio fisico non erano mai entrate 100 persone al giorno!

Un attimo però, chi ha guardato le scarpe col tacco e chi le pantofole?

Ti rendi conto di non riuscire a conoscere i tuoi nuovi clienti, che restano anonimi e non trovano nessuno che li possa consigliare.

Vorresti trovare un modo per poter capire quali prodotti cercano, se leggono le descrizioni o vanno subito al prezzo, se sono interessati a degli sconti.

Nulla può sostituire il rapporto umano, ma quello commerciale forse sì.

Ho inventato uno strumento che ti permette di seguire le azioni dei tuoi utenti, ad uno ad uno, come in negozio, ma senza farli sentire osservati.

Così potrai comunicare con ognuno in modo diverso, in base alle sue esigenze.

Questo è www.pulsing.io
LeetCode: Serialize and Deserialize N-ary Tree
Tags: leetcode, algorithms
Published: 2020-09-30 02:47:21

---
title: LeetCode: Serialize and Deserialize N-ary Tree
published: true
date: 2020-08-01 12:33:00 UTC
tags: LeetCode,Algorithms
canonical_url: https://coderscat.com/leetcode-serialize-and-deserialize-n-ary-tree
---

![CAPTURE-2020_08_01_leetcode-serialize-and-deserialize-n-ary-tree.org_20200801_202436.png](https://coderscat.com/wp-content/uploads/CAPTURE-2020_08_01_leetcode-serialize-and-deserialize-n-ary-tree.org_20200801_202436.png)

We use format: “val child\_size children …”. And in `deserialize` procedure, we use a `depth first search` to recursive construct a new tree.

Note: store the current position, just as a file stream.

## Solution

```cpp
class Codec {
public:

  // Encodes a tree to a single string.
  string serialize(Node* root) {
    string s;
    if (!root) return "#";
    s = to_string(root->val) + " " + to_string(root->children.size());
    for (int i = 0; i< root->children.size(); i++)
      s = s + " " + serialize(root->children[i]);
    return s;
  }

  // Decodes your encoded data to tree.
  Node* deserialize(string data) {
    cur = 0;
    return dfs(data);
  }

  int try_get_val(string& str, int& pos) {
    int val = 0;
    while(pos < str.size()) {
      char c = str[pos];
      if(c >= '0' && c <= '9') {
        val = val * 10 + (c - '0');
        pos++;
      } else break;
    }
    pos++; // skip next ' '
    return val;
  }

  Node* dfs(string& str) {
    if (str[cur] == '#') return NULL;
    int val = try_get_val(str, cur);
    int size = try_get_val(str, cur);
    Node *node = new Node(val);
    for (int i = 0; i < size; ++i)
      node->children.push_back(dfs(str));
    return node;
  }

  int cur;
};

```

The post [LeetCode: Serialize and Deserialize N-ary Tree](https://coderscat.com/leetcode-serialize-and-deserialize-n-ary-tree) appeared first on [Coder's Cat](https://coderscat.com).
Daily Developer Jokes - Saturday, Aug 1, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-08-01 12:00:17

---
title: "Daily Developer Jokes - Saturday, Aug 1, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Aug%201%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12592f4bd15.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why do Java developers wear glasses?

___A:___ Because they don't C#!
 -->
Help on Creating Modal using Angular
Tags: angular, help, modal
Published: 2020-08-01 11:41:05

I am trying to create a Basic Modal for my construction cost calculation project using Angular by manipulating the DOM elements using plain JavaScript and CSS.  
Here I am using two components for my construction application one is Parent component Innerwalls and other Modal component. My modal opens successfully but **unable to close the Modal from the Modal component**.

I am passing data from the Parent to the Child modal component using the *Input* Directive.

Below are the Snippets from each component’s HTML and Typescript file.
**Innerwall.component.html (parent) Component**:
Below is the snippet from the parent component HTML where i am calling the Modal component. Here I am binding the *close* (which is used passed to the child component as Input) with the *closeModal* function as template expression. 

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

 
**Innerwall.component.ts** :
 Below are the functions for the Opening and closing the modal which add and removes the Display CSS property using the Hidden and Show classes to the Modal component view.

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


 **Modal.component.ts** :
Here I am using the  *close*  as an Input Property to modal component as *modal_1*  element ID is present in the Parent component.

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

**Modal.component.html** :
Here am binding *click* event to the passed *close* Input property.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ikgcy5c9vtbvgpk5hskr.png)
 
**Current Output:**
Click event on Close Button does not close the Modal.

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


**Expected:**
Modal closes when close button is clicked.

**Findings**:
1> From the element console i see that the *closeModal* is been binded successfully as below image:
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/26dao3ucbgkwraczk19p.PNG)

2>If i add Paranthesis over the *closeModal* template expression then do not see the *ng-reflect close*  in the element console. So i am wondering why would paranthesis in template expression does nt binds the function.

[close] = "closeModal()"

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

3> Thought of checking by making the *closeModal* function return something. Hence checked by returning a simple console log by the *closeModal* function. But clicking on close button did not show anything on the console as was expected from the return statement.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cd8wtgc6romzc93uvxr8.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k14y4yv4uh1tiga38xb0.PNG)

All the above steps did not solve the issue.


Need all your advice or suggestions to complete this modal.  Any clarification needed please let me know. This is my first help posted in Angular and am very new to this framework.  Please help. Thanks.