teleren/devto huggingface dataset:
JavaScript Interview Question #47: How Object.setPrototypeOf works in JS
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-06-14 14:01:31

![javascript interview question #47](https://learn.coderslang.com/js-test-47.png)

What is `Object.setPrototypeOf` in JavaScript? How does it work? What’s the output?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

## Theory

The function `Object.setPrototypeOf` sets the new prototype for any JavaScript object. The object itself doesn’t change, but it "inherits" the behavior of the object used in `setPrototype`.

You can check it by accessing the `__proto__` property before modifying the prototype and after it.

For example, let’s create an object with a single field `name` and and an array with 3 elements.

```javascript
const user = { name: 'John' };
const arr = [ 1, 2, 3 ];

console.log('Original state');
console.log(user);            // { name: 'John' }
console.log(user[1]);         // undefined
console.log(user.__proto__);  // {}
console.log(user.length);     // undefined

Object.setPrototypeOf(user, arr); // добавляем прототип arr к user

console.log('Modified state');
console.log(user);            // Array { name: 'John' }
console.log(user[1]);         // 2
console.log(user.__proto__);  // [ 1, 2, 3 ]
console.log(user.length);     // 3
```

After modifying the prototype of the `user`, we got access to the "parent" field `length` and "inherited" the elements of the array `arr`. Now we can access them by index.

## Practice

In our original code snippet happens the same. The `user` object gets access to the field `name` from the object of a type `Human`, but it won’t get any new fields.

The function `Object.keys` returns an array formed by all the fields that the object has. But not the "inherited" ones. As the `user` object doesn’t have any "own" properties, the length of this array is 0.

---

**ANSWER**: The first `console.log` prints an empty array to the screen, and the second one prints the string `John`.

[Learn Full-Stack JavaScript](https://js.coderslang.com)
😍 Web App Project Worth Waiting For
Tags: react
Published: 2021-06-14 13:55:32

Hello Developers 👋,

I’m just a developer like you, and I'm building something that will help you create beautiful interfaces for your web apps, SaaS, or admin dashboards quickly just by copy-paste.

It’s for React and non-react developers, and for freelancers, hackers, and entrepreneurs.

* If you are interested to take a look, Please follow this link: https://frontendor.com/webappui
Quick access to my last searches on Codever
Tags: productivity, angular, html
Published: 2021-06-14 13:23:56

When looking for bookmarks or code snippets I recently used, I often find myself use the autocompletion capability of the search box to retrieve them. So over the weekend, I figured out since I do that, why not make it easier. So I did - I added sort of quick access to my last searches directly in the side menu on the landing page. See it in action below:

![Access my last searches demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7gbc7mjdg4sx56v78nu.gif)

One tricky part was how to show the whole content of the **search query** when its length passes a certain limit. That meant when hovering over it, dynamically change the content of the html anchor `a` element. On top of that the list is dynamically generated out of the last searches. I like challenges and I described in [How to change the content of an html element on hover in Angular](https://www.codepedia.org/ama/how-to-change-the-content-of-html-element-on-hover-in-angular) how I implemented this.

Another interesting aspect of the implementation was how to dynamically set the background color of the displayed search queries - this is described with the snippets and post at [Set css class dynamically in Angular from expression](https://www.codepedia.org/snippets/60c5de1876edda2bb1381cba/set-css-class-dynamically-in-angular-from-expression)

> 👉 [Codever](https://www.codever.dev) is a bookmarks and snippets manager for developers & co. Give it a try and [start saving time and nerves](https://dev.to/ama/how-i-manage-my-dev-bookmarks-and-save-time-and-nerves-56ae) right away.
Dropdown Menu with effect of replacing system cursor through hover
Tags: codepen, html, css, showdev
Published: 2021-06-14 13:20:36

**<p>Dropdown Menu with effect of replacing system cursor through hover</p>**

This CodePen was created by @amaralflavio, it shows a dropdown with a different take on the hover effect. When hovering on each item, the icon of each social network appears, replacing the system cursor. 

The code and demo https://codepen.io/flavio_amaral/pen/xxqQLoa

{% codepen https://codepen.io/flavio_amaral/pen/xxqQLoa %}
Setting Up Gulp On Node.js
Tags: javascript, node, codenewbie, tutorial
Published: 2021-06-14 12:54:32

Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. At a high level, gulp reads files as streams and pipes the streams to different tasks. The set tasks are code-based and use plugins.
The tasks modify the files, building source files into production files.
Gulp provides a tool for build task execution in Node.js environments that’s comparable to Gradle in Java environments.
The Node.js API makes it easy to write Gulp pipelines that generate proxy modules.
In this article, I’ll be writing on setting and creating a gulp file on js.

## Getting started

If you’ve previously installed gulp globally, run `npm rm --global gulp` before following these instructions. For more information, read [this](https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467)

### Check for node

To verify that you have node.js installed, run

```bash
node --version
```

If it's not, follow the instructions [here](https://nodejs.org/en/)

### Install the gulp command-line utility

You can choose to install gulp globally on your PC by running:

```bash
npm install --global gulp-cli
```
The above command will install gulp-cli globally and you will be able to run the `gulp` command anywhere, directly from your CLI/terminal.

_____

To install gulp as a one-time dev-dependency in your project:

### Create a project directory and navigate into it.

Let's go ahead and create a new project. The `mkdir` command creates a new folder: *my-project*, and the `cd` command navigates to this directory.

```bash
mkdir my-project
cd my-project
```

### Create a package.json

To get started, we will need to generate a new `package.json` which will contain basic information about our project, to do this run:

```bash
npm init
```

This will guide you through giving your project a name, version, description, etc.

## Install the gulp package in your devDependencies

```bash
npm install --save-dev gulp
```

### Verify your gulp versions

```bash
gulp --version
```

### Create a gulp file

Using your text editor, create a file named gulpfile.js in your project root with these contents.

```javascript
function defaultTask(cb){
// place code for default task here
 cb();
}
exports.default= defaultTask
```

### Test it

From your project directory, run the following command:

```bash
gulp
```

This command will automatically locate your `gulpfile.js` file and execcute it as a gulp task.

You can also run multiple task with gulp simultaneously by running:

```bash
gulp <path/to/task1> <path/to/task2>
```

### Conclusion

In this article, we've been able to cover the basics of gulp and how to install it both globally, and also as a one-time devDependency.

___

Kindly share if you found this helpful.
Mesa redonda: LGTBIQ+ en el mundo tech
Tags: lgbtq, techtalks, inclusion
Published: 2021-06-14 12:43:23

En el contexto de las celebraciones del Orgullo 2021 🏳️‍🌈, en Adevinta Spain organizamos esta mesa redonda para debatir sobre ser LGTBIQ+ en el mundo tech desde una perspectiva local a partir de las experiencias de nuestros 4 participantes: Anna Mora, Verónica Escobar, Miguel Ángel Rodríguez y Diego Calvo.

Hablamos de cómo fue su salida del armario, percepción del entorno laboral, temas de actualidad, WITECH, comunicación en redes sociales y cómo les gustaría que las cosas cambiaran en el futuro, entre otros...

{% youtube f0wxqlhAtjQ %}
Which software is best for C# programming?
Published: 2021-06-14 12:41:35

I tried Visual Code but the overall experience was not good for me, what else I can download for Free on my PC, and it will work fine without any lags.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z45j0r3agco1gb0yrqtq.jpg)
Top 10 Benefits Of Taking Azure DevOps Certification
Tags: azure, devops
Published: 2021-06-14 12:36:12

DevOps is the combination of two terms -Development and Operations. This is the prime requirement of the developers today due to its features comprising both the benefits. 

Microsoft Azure is a cloud based platform that provides testing, deploying, building and managing applications and services.

Azure DevOps is the platform that is Software as a Service(SaaS) platform that offers end-to-end DevOps toolchain in order to develop and deploy software. By using right mix of DevOps technologies, culture and process to get continuous software delivery and hence customer satisfaction. 

Microsoft's [Azure DevOps course](https://intellipaat.com/azure-devops-training/) is available for professionals who are willing to learn and grow in their career in DevOps expertise. There are many benefits of doing this certification course in Azure DevOps. 


## Azure DevOps offers following services to its users:

1. Azure pipelines- To implement CI/CD continuously build, test 
   and deploy 
2. Azure artifacts
3. Azure boards- For Planning ,tracking and discussing among team
4. Azure repos
5. Azure test plans


## Following are the benefits to look out for:


1.You will learn basics of Azure DevOps.

2.Lern virtual networking skills and implementation through Azure 
  DevOps

3.You will get acceleration in your career. There opens many 
  doors for various roles in this field with certification in 
  your hand.

4.Career flexibility: Its very important for a person working in 
  cloud computing to be Microsoft Azure certified, as it will 
  give flexibility in their career.


5.Better security : As the demand for cloud computing and Azure 
  experts is increasing, a certification could land you good job 
  with security. This trend is not going to end anytime soon as 
  it is still in developing phase.


6.High salary and great perks: As per the reports a Azure 
  developer earns average salary $131,838 per year. Being 
  certified in Azure gives an edge and recognition too along with 
  great salary.


7.Expert in DevOps skills : Along with Azure ,Candidate also get 
  to learn tools like Github, Hadoop, eclipse ,etc. too easily.


8. Better integration with .NET platform: As .NET platform is 
   widely used by the programmers and also opensource, integrates 
   easily with Azure, so developers need not go for any other 
   cloud service provider to offer cloud integration for their 
   coding platform.



Getting certified in Microsoft Azure DevOps platform will get you innumerable benefits as above and also it is a futuristic investment in your career. It is not going to diminish anytime soon as it is rapidly growing.
Lisk SDK Javascript - Online Hackathon, $33k💰
Tags: hackathon, blockchain, sdk, javascript
Published: 2021-06-14 12:32:35

---
title: Lisk SDK Javascript - Online Hackathon, $33k💰
published: true
description: Build your own blockchain application with the Lisk SDK in JavaScript.
tags: Hackathon, Blockchain, SDK, Javascript
---

:mag_right: Looking for resources? 

Go over to http://bit.ly/ResourcesHackOnLisk to find the following: 

:page_facing_up: Documentation;
:blue_book: Tutorials;
:computer: Example Blockchain Applications;
:toolbox: Custom Plugins and Modules;
:speaking_head: Developer Support;
:bulb:  Other Relevant Links.

Submissions are open :green_circle:
Web application features
Tags: html, javascript, css, webdev
Published: 2021-06-09 16:38:34

This post is meant for beginners, who are building their career in Web (UI/Front-end) development. 

As developers, we not only think about implementing the functional flows but also the unsaid/unasked features that are expected from a web application. These features are listed below as:

###Web accessibility
Always build an application with the motto of **serve to all**. That means your application should not just perfectly work on desktops, phones, tablets but also on devices like **screen readers** etc.

###Good User experience
User experience or UX covers multiple aspects such as 
1. **Easy to use** flows.
2. Color theme that is soothing to eyes.
3. Error messages that are meaningful and that suggests alternative routes instead of blocking the users.
4. Rule based Typography that highlights headings etc.

###Security
Security is a critical feature and to be concerned about. Few of the security measures to be followed are:
1. Cookies must be `secure` and `httponly`.
2. Sanitization of HTML to prevent XSS/CSS attacks.
3. Add content security policies (CSP) to prevent XSS/CSS and other attacks.
4. Pass unique token/guid in request headers to make every request unique in order to avoid CSRF/XSRF attacks.
5. Use SSL certificates to host app over https and avoid using http for securing your network requests.
6. Avoid passing confidential data over query params. 

###Performance
1. Minify/Obfuscate your Javascript/CSS Bundles using bundlers like webpack, rollup etc. I prefer Webpack.
2. Use file compressors like gzip, brotli etc.
3. Use CDN based libraries instead of packing these libraries with your bundle.
4. Avoid using Loops as much as possible where time complexity is not optimal.
5. Make code reusable wherever applicable.

###Responsiveness
This is expected since the applications are mostly used in small to medium screen range devices. Use `display: flex` (easy & effective) and media queries (`@media`).

###Progressive Web App
A good and in-demand feature these days. This feature allows the web app to give a native-app experience to the user.
Happy one year anniversary of my Dev profile
Tags: offtopic, anniversary
Published: 2021-06-14 12:22:12

## So...

I’ve been gone for a little bit and only just realized I got my one year anniversary badge a couple of days ago. Can’t believe I’ve been here for a year.

## What’s happening with Corruption

It’s a dead game now. I’ve decided to work on something I’m more passionate for, that being racing games and car simulators. But I do appreciate what little viewerships/support I did have on the game. This newer game I’m working on will be sort of a car crash tycoon. It will release for PC and possibly Android, Mac and Linux.
Limitations on config updates
Tags: kubernetes, devops, codenewbie, tutorial
Published: 2021-06-14 12:13:25

## Sample Scenario

Is it possible to make any change to the config file which is having a `kind: Pod` and use kubectl to that file, well lets see what happens if we try to change the container port.

We are having a config file named `client-pod.yml` file.

```yaml
apiVersion: v1
kind: Pod
metadata:
  name: client-pod
  labels:
    component: web
spec:
  containers:
    - name: client
      image: some image name
      ports:
        - containerPort: 3000
```

Now I update the `containerPort` field to 9999

```yaml
apiVersion: v1
kind: Pod
metadata:
  name: client-pod
  labels:
    component: web
spec:
  containers:
    - name: client
      image: some image name
      ports:
        - containerPort: 9999
```

After changing the port and if we feed this config into kubectl, `kubectl apply -f client-pod.yml`, the output will be as follows :

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygr4ujjukl8jz788z99f.png)

Yes we will be getting an error saying we can't change the fields other than the fields mentioned in the terminal, so in our case we cannot change the container port.

## Conclusion

<table style="width:100%; align-content: center;">
	<tr>
		<th>Limitations on Updating Config file</th>
	</tr>
	<tr>
		<td>Can only change spec.containers[*].image</td>
	</tr>
	<tr>
		<td>Can only change spec.initContainers[*].image</td>
	</tr>
	<tr>
		<td>Can only change spec.activeDeadlineSeconds</td>
	</tr>
	<tr>
		<td>Can only change spec.tolerations</td>
	</tr>
</table>
Day 26/30 : CSS Button Hover Effect using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-14 12:07:43

Welcome to Day 26 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![CSS Button Hover Effect using HTML and CSS](https://1.bp.blogspot.com/-YdibwFnnbX8/YKojZweJiUI/AAAAAAAAAIQ/XgwkfSeXwTUrw7iWUed1L_oDnK8ny7QPwCLcBGAsYHQ/s600/p26.gif)

**➜ Video Tutorial :**

{% youtube VZcZYlcFvCA %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/button-hover-effect-using-html-and-css.html


**➜ Instagram Post and Reel for Day 26 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

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

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
cv2.rectangle() function error
Tags: deeplearning, opencv, python
Published: 2021-06-14 11:48:55

I am writing a deep learning code that needs to detect very tiny faces. I found an implementation of tiny face detects paper in Github using TensorFlow. The code have to draw rectangles around faces in the image but the open cv cv2.rectangle() function giving **TypeError**. But I couldn't figure out exactly what is this error, searched the whole net found one or two issues talking about the argument being float is the problem.

**This is my code to draw a rectangle in the given image:** 

        def overlay_bounding_boxes(raw_img, refined_bboxes, lw):
    
        """Overlay bounding boxes of face on images.
        Args:
          raw_img:
            A target image.
          refined_bboxes:
            Bounding boxes of detected faces.
          lw: 
            The line width of bounding boxes. If zero specified,
            this is determined based on the confidence of each detection.
        Returns:
          None.
      """
        # Overlay bounding boxes on an image with the color based on the confidence.
        for r in refined_bboxes:
            _score = expit(r[4])
            cm_idx = int(np.ceil(_score * 255))
            rect_color = [int(np.ceil(x * 255)) for x in util.cm_data[cm_idx]]  # parula
            _lw = lw
            if lw == 0:  # line width of each bounding box is adaptively determined.
                bw, bh = r[2] - r[0] + 1, r[3] - r[0] + 1
                _lw = 1 if min(bw, bh) <= 20 else max(2, min(3, min(bh / 20, bw / 20)))
                _lw = int(np.ceil(_lw * _score))
    
            _r = [int(x) for x in r[:4]]
    
            cv2.rectangle(raw_img, (_r[0], _r[1]), _r[2], _r[3]), rect_color, int(_lw))

**The error it's giving is:**

    Traceback (most recent call last):
  

    File "D:/PYTHON PROJECTS/Digital Attendance System (knn)/Tiny_Faces_in_Tensorflow-master/tiny_face_eval.py", line 242, in <module>
        main()
      File "D:/PYTHON PROJECTS/Digital Attendance System (knn)/Tiny_Faces_in_Tensorflow-master/tiny_face_eval.py", line 235, in main
        evaluate(
      File "D:/PYTHON PROJECTS/Digital Attendance System (knn)/Tiny_Faces_in_Tensorflow-master/tiny_face_eval.py", line 200, in evaluate
        overlay_bounding_boxes(raw_img, refined_bboxes, lw)
      File "D:/PYTHON PROJECTS/Digital Attendance System (knn)/Tiny_Faces_in_Tensorflow-master/tiny_face_eval.py", line 62, in overlay_bounding_boxes
        cv2.rectangle(raw_img, (_r[0], _r[1]), (_r[2],_r[3]), rect_color, _lw)
    TypeError: function takes exactly 4 arguments (2 given)

I checked every argument data type which is integer obviously as the solutions I've found issued by others that one of the arguments being float is the problem.

What is the actual problem here? Thanks in advance!
Weekly Challenge 117
Tags: perl, perlweeklychallenge
Published: 2021-06-14 11:46:03

[Challenge](https://perlweeklychallenge.org/blog/perl-weekly-challenge-117/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-117/sgreen)

## TASK #1 › Missing Row

### Task

You are given text file with rows numbered 1-15 in random order but there is a catch one row in missing in the file.

### My solution

This is relatively straight forward, and can be broken down to two sub-tasks. The first is to read the file, and put any line numbers found in the `%lines` hash. I then have a counter that finds the first key in the hash that does not exist.

### Example

```
$ ./ch-1.pl input.txt 
12
```

## TASK #2 › Find Possible Paths

### Task

You are given size of a triangle.

Write a script to find all possible paths from top to the bottom right corner.

In each step, we can either move horizontally to the right (H), or move downwards to the left (L) or right (R).

BONUS: Try if it can handle triangle of size 10 or 20.

### My solution

For this task I used a recursive subroutine `_make_move` to walk the path of all possible solutions. The inputs to the subroutine are the target size, the current x and y position, and a string representing the current path to get to that point.

The rules are pretty simple:

1. If `$y` is less than `$size`, then we can move both diagonally left and right.
2. if `$x` is less than `$y`, we can also walk horizontally to the right.

As we output as we go, this allows us to go big without using too much memory. Right now my screen is spewing out all the solutions when the size is 20 rows.

This sequence is documented in [OEIS A006318](https://oeis.org/A006318/list), also known as [Schröder number](https://en.wikipedia.org/wiki/Schröder_number). With 20 rows there are  17,518,619,320,890 possible solutions. Even at 1000 results per second, it would take over 200 days to print the list. My solution will print out all the solutions, just don't expect the list by the time you read this :)

### Examples

Because I do the walking in a different order (left, right and then sidewides), the solutions differ from the examples. It still results in the same solution.

```
$ ./ch-2.pl 1
Output: LH, R
A total of 2 paths found

$ ./ch-2.pl 2
Output: LLHH, LRH, LHLH, LHR, RLH, RR
A total of 6 paths found

$ ./ch-2.pl 10
... about 19 MB of text skipped ...
A total of 1037718 paths found
```
Build an Airfare Calendar Using Blazor Scheduler
Tags: blazor, scheduler, eventcalendar, webdev
Published: 2021-06-14 11:34:58


Learn how easily you can design an airfare calendar using the [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) of Syncfusion. In this video, you will learn how to add the Syncfusion Blazor Scheduler to a Blazor Web Assembly project. You will also see the steps to design an airfare calendar, by customizing the look and appearance of the Blazor Scheduler using its built-in properties and template options.
{% youtube bRS2h0psGrA %}