teleren/devto huggingface dataset:
Do You Know How Array.fill() Works with Reference Variables?
Tags: javascript, react, webdev
Published: 2020-03-25 13:00:23

---
title: Do You Know How Array.fill() Works with Reference Variables?
published: true
description: Learn how we utilized the fill array method to create test data, and avoid an easy gotcha along the way!
tags: javascript, react, webdev
---

# Fill Overview

The [fill function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill), such a simple, and useful utility to use when creating sample test data. When called on an array, it fills the array with the value specified - additionally taking a second parameter to let JS know where to start filling that object in from.

## Filling With Primitives Vars

```
let test = [0,0,0]
test.fill(3);
console.log(test) // [3, 3, 3]

let test = [0,0,0]
test.fill(Infinity, 3);
console.log(test); // [0, 3, 3]
```

Since we are using the primitive value of 3, each index of the array is pointing to its own 3 value.

## Filling with Reference Vars

Now let's say you want to create an array full of empty objects to test an object manipulation function in your codebase.

## Our Intuition Example

```
// we should avoid using new Array outside of test cases imho
let test = new Array(5);
test.fill({});
console.log(test); // [{}, {}, {}, {}, {}]
```

Looks good right? What happens if we change one of the objects?

```
let test = new Array(2)
test.fill({});
console.log(test); // [{}, {}]
test[0].name = "Will Smith";
console.log(test); // [{name: "Will Smith"}, {name: "Will Smith"}]
```

Wait what?!?!

### Gotcha alert

Since we passed in one object literal, which is a by reference, the fill method does indeed fill the array, but to the same object reference. This means a change to one index actually changes all, because they all point to the same object.

***note: the same would happen with an array***

## Utilizing Map - the Right Way

Since we want to create an array of objects with a defined length, here's how you could do it.

```
let test = new Array(2);
// you can disregard the null here, but I feel that it
// makes the code more intentional, as you're filling with null instead of undefined
test.fill(null).map(index => {return {}});
console.log(test); // [{}, {}]
test[0].name = "Will Smith";
console.log(test); // [{name: "Will Smith"}, {}]
```

***Note: if a live example works better for you, here's a [Codepen](https://codepen.io/avatar-kaleb/pen/PoqyoJX)

# Concluding Thoughts

The reference variable gotcha when using Array.fill() can be a headache if not caught, especially when creating tests to make sure your app works.

I hope this small example and small post helps you avoid it in the future!

Have a question? Leave a comment!
Daily Developer Jokes - Wednesday, Mar 25, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-03-25 13:00:11

---
title: "Daily Developer Jokes - Wednesday, Mar 25, 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=Wednesday%2C%20Mar%2025%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/5e125969479bf.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:___ What did XHR say to AJAX when it thought it was being a Mean Girl?

___A:___ Stop trying to make fetch happen!
 -->
How margin: 0 auto; centers the element?
Tags: css, html
Published: 2020-03-25 12:42:26

Hi Everyone,


This is my first post in **dev.to** ​​ 😀
Here, we are going to talk about how **margin: 0 auto;** works

let's consider the div(_.inner-div_) element inside another div(_.outer-div_) element

**HTML:**
 <**div** class="outer-div">
    <**div** class="inner-div"><**/div**>
  <**/div**>

**CSS:**
  **.outer-div** {
      width: 100px;
      height: 100px;
      background-color: red;
    }

   **.inner-div** {
       width: 50px;
       height: 100px;
       background-color: blue;
       margin: 0 auto;
     }
    
  **Output:**
   ![Div-images](https://i.imgur.com/N9vPMTs.png)

   Actually the inner-div has an auto value for both margin-left and margin-right properties.

These auto values align the inner-div in the center position of outer-div.
Because the inner-div exactly has a 25px on margin-left and 25px on margin-right.

  ![inner-div-box](https://i.imgur.com/x4YTXET.png)

**Why 25px?** 🤔
   The outer div has a 100px width. The Inner-div has a 50px width;
 Remaining width(total margin values of left and right) = 100 - 50 = 50px;                                          
 marginLeft = marginRight = 50/2 = 25px;
   So, We conclude the *formula* as 😜
      
    Total margin values of left and right = parent element width - child 
                                            element width
      marinLeft = marginRight = Total margin values of left and right/2
Therefore, **.inner-div** is centered.

**Note:**  margin: 10px auto: also centers the element, but it will take 10px on top as well as the bottom. So, the **left and right auto** values will 
make the center position.
Les joies des conversions d’entiers en C et C++
Tags: c, cpp
Published: 2020-03-25 12:42:01

NOTE: *L'article a été originellement publié sur [mon blog perso](https://gradot.wordpress.com/2019/01/29/les-joies-des-conversions-dentiers-en-c-et-c/), l'année dernière, pour fêter 7 ans de blogging ! Il m'a semble être un bon candidat pour tester [dev.to](https://dev.to/) : )*

J'avais choisi un sujet sur lequel j'avais beaucoup écrit aux début de mon blog : le C et ses écueils. Allez, c'est parti ! Parlons d'un résultat inattendu d'une division entre entiers en C (par extension, le C++ est concerné), et allons faire un tour de la norme pour tirer les choses au clair !]

Question à 1 dollar : que retourne le code suivant ?

```c
int main() {
    int a = -6;
    unsigned int b = 3;
    int c = a / b;
    return c;
}
```

Puisque je pose la question, vous vous doutez bien que ça ne retourne pas -2. Non, sur Windows 10 avec mingw64, ça retourne 1431655763.

Mais alors pourquoi ? Lors de la division, `a` est promu en `unsigned int`. Le calcul est donc fait entre deux entiers non signés puis remis dans un signé. Voilà, c'est aussi simple que ça.

Vous n'êtes pas contents ? Vous pensiez que les options `-Wall -Wextra` verraient ce genre de problèmes ? Je l'ai dit et je le répète encore : ces options sont le minimum vital mais il y en a bien d'autres à activer pour se protéger. Et surtout, c'est un comportement parfaitement normé du langage. Il suffit de se rendre à la section _6.3.1.8 Usual arithmetic conversions_ de [n1256, la norme C99](http://www.open-std.org/jtc1/sc22/wg14/www/docs/n1256.pdf) pour y lire :

> if the operand that has unsigned integer type has rank greater or equal to the rank of the type of the other operand, then the operand with signed integer type is converted to the type of the operand with unsigned integer type

En fait, il y a moyen d'avoir un avertissement du compilateur. Il suffit de rajouter l'option `-Wsign-conversion` pour obtenir deux warnings sur la même ligne :

```
warning: conversion to 'unsigned int' from 'int' may change the sign of the result [-Wsign-conversion]
warning: conversion to 'int' from 'unsigned int' may change the sign of the result [-Wsign-conversion]
```

Le premier correspond à la conversion de `b` en `unsigned int` ; le second à la conversion du résultat en `int` pour l'affecter à `c`.

cppcheck dit aussi de faire attention :

```
cppcheck: (warning) Suspicious code: sign conversion of a in calculation,
 even though a can have a negative value
```

Notez au passage que a + b, a -b et a * c produisent les bons résultats (au moins sur mon PC, avec ma version de compilateur). Les 4 opérations génèrent des warnings avec GCC mais seules la multiplication et la division génèrent un warning de cppcheck.

PS : merci à [Pulkomandy](https://pulkomandy.tk/) pour m'avoir posé cette colle :p
Using Rack::Proxy to serve multiple React Apps on the same domain.
Published: 2020-03-25 12:30:45

Link: https://blog.joshsoftware.com/2019/09/03/using-rackproxy-to-serve-multiple-react-apps-on-the-same-domain/

We had 4 React apps running on the local server. All apps were running on different ports because we can not start multiple React Apps on the same port. We had to build a single sign-on server. Out of 4 react apps one will be responsible for managing authentication and based on roles or department redirecting to other apps. The Auth app will get token from Auth API and will store it to local storage, and other apps will be using this token for authentication while calling APIs.
Turn your drawn images into HTML code by Sketch2code. A great tool for front-end developers
Tags: sketch2code, development, ai, technology
Published: 2020-03-25 12:21:06

Artificial intelligence; a well-known game changer in the area of technology, has never failed to amaze us through its enormous potential. AI is making computers smarter than ever, and here we will discuss a new tool that is likely going to make web development an enjoyable experience. 
The Microsoft AI lab has recently rolled out a website “builder”, knows as Microsoft Sketch2Code, a web-based solution that transforms a user interface design from an image into a markup code (HTML format). Let’s take a look at what it does:
•	Takes input of image through the website.
•	A custom vision model scans what type of HTML elements can be fetched from the image.
•	A handwritten text recognition service scans the text inside the scanned elements.
•	The platform’s engine gathers the pieces of information, complies it and provides output.

The web-based app is helpful to have a working experience of simple wireframes, or to build something simple, instantly. We discussed about the functionalities, let's dive deeper into its efficiency and limitations. 

•	Super easy for front-end web developers to generate a working markup code through uploading sketch/image on the site. It’s innovative, quick, productive and less resource consuming. All you need is a good connection and you’re good to go.
•	You can extract the code in HTML but it's independent of HTML; you can extract the code in other formats, such as XAML or universal apps like universal windows platforms.
•	Huge following over GitHub for help and support. An attractive platform for beginners to learn the basics of web development.

Limitations:
•	It’s not a replacement to professional web-developing software and tools, lacks features and accessibility provided by modern-day react, angular, and other programs.
•	It generates markup code, yet lacks the ability to provide back-end functionality to the code.

It’s definitely an impressive feat for Microsoft to build such an AI-based web app. It has its limitations but might get better in the long run.
💥What is loop?
Tags: programming, javascript, discuss, beginners
Published: 2020-03-25 12:00:30

---
title: 💥What is loop?
published: true
description: Understanding for loop in programming languages.
tags: programming, javascript, discuss, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wkk155qvnqbf4t56ec4g.gif
---

#Do you really understand loop?

We all use for, do while, while and other forms of loop, but do we really understand them?

#What is loop?

Loop is a structure, series, or process, the end of which is connected to the beginning.

This means that when a loop comes to an end, it goes back to the beginning. In short, it repeats a process over and over again based on given conditions.

#Examples of loop in the real world. 

1. Day and Night
2. Living 
3. Sleeping and Waking 
4. Eating 
5. Sex 

#Major forms of loop

A loop can be finite if it ends without external interruption, that is, it is self-terminable or has known end.

E.g Living as a human being. 

A loop can be infinite if it ends only with external interruption. It is not self-terminable. 

E.g Human Existence.

Things that use loop are all around. We all loop things everyday. As you put spoon in your mouth repetitively, you make use of loop.

What are the things that use loop around you?

follow me on twitter: [codingnninja](www.twitter.com/codingnninja);
Does Vue slotted content not inherite the transition of the parent?
Tags: discuss, help, vue
Published: 2020-03-25 11:48:07

Hi everyone,

So working on one of my projects, I created a menu animation with some default content and a named slot.

The slot, when used in another component, works but doesn't keep the animation of the menu parent, it becomes static.

This is how I expect this animation to work, this example doesn't use the slotted content [menu-h animation link](https://codesandbox.io/s/twilight-moon-rp67u)
The link is a live version.

My question is:

**Does the VUE slotted content, not keep the parent's transition?** 

Thanks in advance for any resource or explanation regarding this matter.

I followed this guide [vue slot guide](https://vuejs.org/v2/guide/components-slots.html)
how to connect to a renderer process created by another renderer process in electron js
Published: 2020-03-25 11:46:38

// in the first renderer process use this code
const { remote } = require('electron');
remote.ipcMain.on('customChannel', (event, message) => {console.log(merssage)} )

// in the renderer process created by the first one
const { ipcRenderer } = const('electron');
ipcRenderer.send('customChannel', 'message');
The #7Days7Websites Coding Challenge
Tags: challenge, webdev, beginners, tutorial
Published: 2020-03-25 11:44:58

---
title: The #7Days7Websites Coding Challenge
published: true
description: Improve your coding skills by attempting a fun Coding Challenge
tags: challenge, webdev, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/snhxa9f9j728wlzb1cn8.png
---

I believe that one of the best ways to improve your coding skills is to... CODE MORE!

For that I have the perfect challenge for you! 🤩

It's called: **#7Days7Websites**

The main rule is simple: build one website, every day, for a week.

Here is a short video I made to explain everything in more details:

{% youtube CBs47S91ofM %}

You can find the official website [here](https://7days7websites.glitch.me/).

## Rules
- Create a website every day for a week.
- You can use any programming language and/or any framework you want.
- The website can be on any topic.
- Submit your entries on the [submit](https://7days7websites.glitch.me/submit) page.
- Share your progress on Social Media using the **#7Days7Websites** hashtag.

## Live Streams
I'm also going to attempt this challenge in a series of Live Streams on my [YouTube Channel](https://youtube.com/florinpop). Subscribe if you want to get notified when I go live.

## Suggestions
Anyone is free to build anything they want, but if you don't have an idea or you want some inspirations, here are some of the websites that could help:

- [Frontend Mentor](https://frontendmentor.io/?ref=florinpop)
- [FreeCodeCamp](https://freecodecamp.com)
- [App Ideas Repository](https://github.com/florinpop17/app-ideas)

## Showcase
At the end of these 7 days I'm going to make a **Special** Live Stream where I'm going to showcase the best submissions.

## Conclusion
I hope this challenge will get the best out of you and it will help you improve your coding skills! 😃

Happy Coding! 😇
Reverse a Linked List
Tags: javascript, algorithms
Published: 2020-03-25 11:38:57

"So you designed an algorithm that can sort integers in O(1) time? cool! But can you reverse a singly linked list?"  - your interviewer

Reversing a linked list is one of those questions woes solution stares you on the face but it's a bit complex to code it.

Question: Given a single linked list, reverse it.

Let's go step by step on how one will solve it on paper physically.

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

Since if we reverse a linked list, the head will point towards end ie null. 
1>Let's call that node prev.
2>Let's call the node we're currently on as curr for current
3>Since if we will point node's next towards a new node, we will lose its original next, let's call a node's original next as next.
Based on above our linked list looks like this : 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/83okf5c8zjmgcyoauj15.png)

Now point the curr's next to prev :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fz8yk4ddj0h1u37u1siy.png)

Now move prev to curr since for the next node the curr node will become prev:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3wmielbc2vz477lk5xw1.png)

And the next node becomes curr node, similar to initial condition:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qfcm1ch7dwwi52c9izqj.png)

Let's repeat the same process for all nodes. 

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

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

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

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

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

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

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

At the end we return the prev pointer as the new head.

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

Now let's code it down as it is, step by step.

```javascript
function reverseList(head) {
    var prev = null;                      // set prev to null
    while (head) {
        var next = head.next;             // set next as head's next 
        head.next = prev;                 // set pointer to prev
        prev = head;                      // move prev
        head = next;                      // move head
    }
    return prev;
}
```

And that's it! As a challenge implement the same recursively! 

github : https://github.com/AKHILP96/Data-Structures-and-Algorithms/blob/master/problems/reverseLinkedList.js
List of security testing companies in 2020
Tags: securitytestingcompanies
Published: 2020-03-25 11:27:14

Looking for application <a href="https://www.testingxperts.com/services/security-testing/">security testing companies</a>? Here is a rundown of firms for application security testing administrations. These organizations are sufficiently talented to shield your application from security infringement or unintended infiltration. They are among the top organizations for application security testing that have skills in evaluating a full scope of utilizations for security dangers and guarantee that your application is tried for every conceivable risk and vulnerabilities. With significant involvement with serving customers crosswise over various industry verticals and association sizes, we handpicked these organizations, deciding between them under specific significant parameters to display you listed below:

1. Testingxperts
TestingXperts is a NextGen Specialist QA & Software Testing, and an Independent Software Testing division of Damco Company, which is a demanding IT Solutions and Services company working with Fortune Enterprises globally. Through innovative techniques, They are pushing the conventional norms of Quality Assurance and blending technology to yield remarkable deliverables. 
2. Hidden Brains Infotech
Hidden Brains Infotech is the best and Award Winning  Software & IT Consulting Company committed to providing end-to-end IT services in Web, Mobile & Cloud platforms. 
3. A1QA
a1qa is an Independent Quality Assurance and Software Testing company. Headquartered in Lakewood, Colorado, a1qa has its locations across the globe.
4. ScienceSoft USA Corporation
ScienceSoft is a US-based IT consulting and software development company that offers all-encompassing software testing and QA services.
5. KiwiQA 
KiwiQA Services is an Australia based knowledge-centric & quality-focused firm. KiwiQA Services provides a wide range of testing services and solutions across company domains, with a primary focus on implementable solutions and risk management.
6. Nexsoftsys
Nex is a Technological Partner for Global Enterprises and Startups with a mission to empower businesses to excellence through seamless IT solutions.
7. MeU-Solutions
At MeU-Solutions, It believes that a solution could bring the most success to a company. We offer cost-effective and high-quality service which employs the right people to create the right answers in the proper context. 
8. TrendLine Global
TrendLine Global is a software development company. It provides you with outstanding and outsourcing: remote developers, web and mobile app development, blockchain technologies, and other IT solutions.
PWA FOR INDIAN COVID19 HELP AND STATS
Tags: webdev, showdev, datascience, pwa
Published: 2020-03-25 11:22:25

As the series goes on I've created a dedicated PWA for Indian stats, checkup centers and other stuff.

Link:
https://covid19-indian-stats.netlify.com/

# SPLASH
![Splash](https://dev-to-uploads.s3.amazonaws.com/i/13px2btvv4kzzqswsg5k.jpg)
# HOME
![Home](https://dev-to-uploads.s3.amazonaws.com/i/qj1otp04vuyvajyvqwk2.jpg)
# CHECKUP CENTERS
![CHECKUP CENTERS](https://dev-to-uploads.s3.amazonaws.com/i/1nqbqsoiabp820dg9w1c.jpg)
# STATE STATS
![STATE STATS](https://dev-to-uploads.s3.amazonaws.com/i/im1omdzm6ay9yjyyfu4r.jpg)
Private Object & Class Properties
Tags: javascript, snippets
Published: 2020-03-25 10:31:07


Easy and clean way of creating private object methods and properties, making use of [Symbols](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol)

```js
// Object with private field
function privateProps() {
    const priv = Symbol('private prop');

    return {
        [priv]: {
            id: '1111-2222-3333-4444'
        },
        getSomething() {
            return fetch(`http://.../users/${this[priv].id}`);
        }
    }
}

const obj = privateProps();
obj.getSomething(); // Accesible
obj[priv]           // 'undefined' as we don't have access to priv, 
                    //  we can't re-create the symbol from outside as it is unique.
```

**Using in a class?**
> I don't like this pattern that much, but it can be useful in some cases.
> There are other ways of accomplishing this, this is just one example.

```js
const MyClass = (() => {
  const priv = Symbol('private');

  return class {
    constructor(name) {
      this[priv] = name;
    }

    getName(){
      return this[priv];
    }
  }
})();

let instance = new MyClass('test');
instance.private;   // undefined
instance.priv;      // undefined
instance.getName(); // 'test'
```
> Currently there is a proposal for adding private fields to classes, check it out [here](https://github.com/tc39/proposal-class-fields#private-fields)
GoConfessions
Published: 2020-03-25 09:51:22

GoConfessions “2020” is the GoConfessions par excellence, allowing you to enter completely secret stories, stories, cries or confessions, anonymously. The user can still register but the secret will remain anonymous. Many sections, such as the most voted, the most popular or the least voted.

The user can monitor his profile, manage his information or check his posts. Users can post comments.

GoConfessions that allows your users to enter their secrets, stories about bad figures, stories of ex-boyfriends, stories at school and many other issues. 

GoConfessions : http://goconfessions.com/

 #goconfessions #php #javascript #anonymously #secrets #stories #issues #discuss #node #mysql #python #reactjs