teleren/devto huggingface dataset:
JavaScript __proto__ and prototype
Tags: javascrip
Published: 2020-09-06 16:14:22

---
title: JavaScript __proto__ and prototype 
published: true
description: understand JavaScript __proto__ and prototype 
tags: javascrip
cover_image: http://img.youtube.com/vi/nEK71QuvJ1E/0.jpg
---

There are many explanation of __proto__ and prototype, Have a look on what i have covered

prototype is a property of a Function object. It is the prototype of objects constructed by that function.

__proto__ is internal property of an object, pointing to its prototype. Current standards provide an equivalent Object.getPrototypeOf(O) method, though de facto standard __proto__ is quicker.

You can find instanceof relationships by comparing a function's prototype to an object's __proto__ chain, and you can break these relationships by changing prototype.
```javascript
function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();

// the following are all true
myPoint.__proto__ == Point.prototype
myPoint.__proto__.__proto__ == Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;
```
Here Point is a constructor function, it builds an object (data structure) procedurally. myPoint is an object constructed by Point() so Point.prototype gets saved to myPoint.__proto__ at that time.


https://www.youtube.com/watch?v=EhOGAPjbKEg&list=PLIGDNOJWiL19go98IKaQ4sqThyi2V67JG

Part1- https://www.youtube.com/watch?v=coh7OhK3O90&list=PLIGDNOJWiL19go98IKaQ4sqThyi2V67JG&index=9

Part-2 https://www.youtube.com/watch?v=OBpTuRIBD9M&list=PLIGDNOJWiL19go98IKaQ4sqThyi2V67JG&index=10
Fix "Jest encountered an unexpected token" with "create-react-app"
Tags: jest, testing, react, javascript
Published: 2020-09-06 15:58:57

Here is one of the most popular question which is related to testing with `jest` for repo setup with `create-react-app` as I've seen in `stackoverflow` community. So I decided to come with a post on this with a hope to help more people via channel.

The problem is most likely as we install a 3rd party package which is untranspiled. By default Jest will skip to transform any packages in the `node_modules`.

Here are a few ways I have seen, assume the package is being used `@fullcalendar`:

- Use a customized package react app `customize-cra`:

```javascript
const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([
    path.resolve('src'), 
    path.resolve('node_modules/@fullcalendar')
  ]),
)
```
- Use the customized parameter passing to jest via react script

```sh
react-scripts test --transformIgnorePatterns \"node_modules/(?!@fullcalendar)/\"",
```

Of course most of above ways are to try to transform that package again but exclude the others in `node_modules` by setting `transformIgnorePatterns`. Unfortunately, the above 2 ways don't work as expected.


**What is the best approach to fix?**

The easiest way to fix this one is of course also using the same option `transformIgnorePatterns` but we just simply put in the `package.json` file under `jest` area since `create-react-app` still uses these options to override their default options:

```json
jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!@fullcalendar)"
  ]
},
```

Hopefully, it would help!
How to get along with coworkers
Tags: team, colleagues, relation, beginners
Published: 2020-09-03 10:59:53

Our productivity and enjoyment both increase if we have a good surrounding environment which includes cleanliness, a peaceful environment and friends. Many of us easily make friends and some of us want to but they are not confident enough to even throw a gentle smile. 

This article is about how to get along with your coworkers. It's fun having our own group where we can share ideas, happiness, sadness and gossips.

So here are some tips from me to easily make a good relation with coworkers.

**1. Throw a Smile**
Smile holds humongous power, Don't be shy. You can at least throw a smile to your coworkers, your lead, your juniors. It will also make them comfortable with you and it keeps your interaction positive.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q3fai8v6oppn8zdsm9bn.jpg)

**2. Greet them!**
The greeting is too formal! But yes it helps to start a good conversation. Like, you go to your office and your colleague is sitting next to you and you have anything to discuss but don't know how to start. Just say, Good morning {his/her name}, and when he/she greets back, say that have you heard of this news or whatever you want to discuss. Also, let him/her share anything and listen to it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/47300ysli884vthhi2g0.jpg)

**3. Respect**
How can you show some respect to someone? 
Well, just listen to your coworkers, what they are going through, which issues they are not able to resolve or what else. Discuss them when you next time you meet them.
Is that respect? => yes, it is.
We all feel good if there is someone who actually listens to us. And sometimes we also have a suggestion/solution which can help someone.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pgm4tl5188jtaw0q2cbi.jpg)

**4. Know about each other**
You will have a healthy discussion if you both are on the same page of something, so find out the same hobbies or interests and discuss them. Like if you both are interested in reading books, talk about it. Give and follow suggestions and you might end up knowing more about your interested area. It can be anything music, sports, computer-game etc.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wgy6zifde81s9yiohsac.jpg)


**5. Tea break**
This is very important, Ask your coworker/s to go with you on tea breaks and have a healthy discussion over the break.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/td6ps0922v12h147274l.jpg)
Enable Course Sidebar in open edX
Tags: openedx, python, django
Published: 2020-09-06 15:55:13

Till the Ficus version of the open edX, there was no dedicated page for the course outline (which is now in the later releases), instead of it we were having course outline on the left side of the courseware page.

This course outline on the left side was pretty much handy as the user do not have to open a separate page to hop on to any particular section/subsection/unit.

This left-side course outline has not been removed from the source code. So, it is there on your platform - it is a good thing, isn't it?

Now, one will question that if the source code is still there and in working condition then **How can I get it back?**

open edX has made it very simple to get it back, for that you need to do the following thing:
 - open your LMS admin panel and search for the `flag` table under the `waffle` app and add the entry like this:

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

Now, open your courseware page and the course outline on the left side is back in action!

Reference: https://discuss.openedx.org/t/the-navigation-pane-on-left/1266/2
April Favourites. The Tech edition. 2020
Tags: linearalgebra
Published: 2020-09-06 15:51:30

---
title: April Favourites. The Tech edition. 2020
published: true
description: 
tags: linearalgebra
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kbbiqi3g6wm4gh1cn6eo.jpg
---
<span>Photo by <a href="https://unsplash.com/@kylry?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Kyle  Ryan</a> on <a href="https://unsplash.com/collections/9771970/architecture?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

## Linear Algebra

This month has been very minimal. I mainly worked and studied a course on Linear Algebra remotely. I have to say, I have forgotten lots of the mathematics since high school.

It does feel very much like high school though: I use a paper notebook to make notes (possibly, not the best idea).
The course I am studying now is called Mathematics for Machine Learning: Linear Algebra by Imperial College London. You can find a link from [here] (https://www.coursera.org/learn/linear-algebra-machine-learning).

This course was a bit "out there", so I needed to complement it with some courses from [KhanAcademy](https://www.khanacademy.org/math/algebra-basics) and [Udemy](https://www.udemy.com/course/linear-algebra-course/).

I did it in the morning, since this was the most complicated thing I have been doing throughout the day, I felt quite accomplished. Let`s see how long I last.

This felt very empowering in a way: realising that something seemingly incredibly complex such as PCA (see [this](https://setosa.io/ev/principal-component-analysis/)) can be mastered with some perseverance and a very long road to understand vector base transformations.
I'm getting rid of Redux
Tags: react, redux, swr
Published: 2020-09-06 15:26:06

About ten months ago, I wrote an article about [handling asynchronous requests in ReactJS](https://dev.to/potouridisio/how-do-you-handle-asynchronous-requests-in-reactjs-hha).

That's a lot of boilerplate code (API functions, asynchronous actions, Thunk functions, reducers and the state selectors) just to render some asynchronous data, don't you think?

I accepted that **asynchronous data doesn't belong to state** and searched for other solutions.

The past month I'm experimenting with [swr](https://github.com/vercel/swr). I'm amazed on how much less effort is required for the same result. Even the UI feels better, faster and more responsive.

[swr](https://github.com/vercel/swr) caches the data, then it provides the stale data first and re-validates to update the stale data if necessary.

Here's a demo I prepared.

{% codesandbox quirky-forest-14wjf %}

I have included a one second delay for each request for you to notice that once a page is fetched, when you re-visit it you won't wait for that second because [swr](https://github.com/vercel/swr) will first retrieve that page's data (stale) from the cache.

Asynchronous data was my biggest part of Redux state, and once that's been replaced, there's little shareable UI state. That can easily be replaced with React's [Context API](https://reactjs.org/docs/context.html) or I could use the promising [Recoil](https://recoiljs.org/).

It's good to know Redux but it's better to know when to replace it.
Day 52: Commercial Break
Tags: 100daysofcode
Published: 2020-09-06 15:18:19

I implemented some part of the design today. I did not learn any new css or html tricks. Which means nothing exicting to explain today. We can call this a short commercial break to refuel.

I forgot to celebrate coming this far, thanks to typeORM. 🥳🥳 I super excited and happy i completed half of the challenge. The journey is awesome and a little exhausting at times, but I am still hanging in there.

I intend to learn more about PWA's , Vue.js and algorithms in this second half. 

🥂 To the small wins.
_Day 52_
Bypass suggest saved password of browser.
Published: 2020-09-06 15:16:01

---
title: Bypass suggest saved password of browser.
published: true
description: Convert native type password to text.
tags: 
//cover_image: https://direct_url_to_image.jpg
---
```html
<input oninput="onInput(this)" type="text" value=""/>

```

```javascript

var passwordReal = [];

function onInput(e) {
   var value = Array.from(e.value);

   // Allow copy
   if (value.indexOf('●') < 0) {
      this.passwordReal = value;
   }
   // If current array value is greater than temp array, get the last value just entered
   // Otherwise, calculate to make 2 arrays equal
  else if (value.length > this.passwordReal.length) {
      passwordReal.push(value.pop());
   } else {
      passwordReal.splice(value.length, (passwordReal.length - value.length));
   }
  
   e.value = passwordReal.map(c => c.replace(/./gi, '●')).join('');
   
   console.log(passwordReal.join(''));
}

```

Demo : https://jsfiddle.net/vwp8q720/9/
How to test JSX directly on browsers without any building steps
Tags: react, babel, javascript, jsx
Published: 2020-09-06 14:57:27

Is there anytime you wonder that we have a React component written in `ES6` style and you want to test it straight away on the browser without configuring `babel` to transform `JSX` and then configure `webpack` to bundle things?

If you have the same interest, here is the few steps helping you out.

First of all, we create the test website directory with the following structure:

```
website
- index.html
- index.js
- Foo.js
```

- with `Foo.js` is a simple component with following content:
```javascript

export default () => <div>Foo</div>;

```

- `index.js` is all about importing and rendering:

```javascript
import Foo from "./foo.js"; // can also use `foo`

ReactDOM.render(<Foo />, document.getElementById("root"));
```

- `index.html` this is the most important

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script
      src="https://unpkg.com/react@16/umd/react.production.min.js"
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./foo.js"
    ></script>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./index.js"
    ></script>
  </body>
</html>
```

There are couple of important things here:

We must include babel script for transpiling `JSX` and `React` + `ReactDOM` via CDN:

```
https://unpkg.com/babel-standalone@6/babel.min.js
https://unpkg.com/react@16/umd/react.production.min.js
https://unpkg.com/react-dom@16/umd/react-dom.production.min.js
```

Next, we register a module by wrapping in `<script type="text/babel" />`, plus in order to support `import` from another module we have to use plugin `transform-es2015-modules-umd` by adding more `data-plugins="transform-es2015-modules-umd"`. In this case we register 2 modules `foo` and `index` respectively so we can import `foo` module in `index` module.

That's it!
Jasmine makes easy unit test for you api
Published: 2020-09-06 14:56:57

var request = require('request');
beforeEach(() => {
  Bicicleta.allBicis = [];
  console.log("Ejecutando test...");
})

/* test nested for the api funcionality check */
describe("test API Bicicletas", () => {
  describe("Test GET", () => {
    it("code status and body", () => {
      request.get('http://localhost:3000/api/bicicletas', function (error, res, body) {
        expect(res.statusCode).toBe(200);
        expect(JSON.parse(body)['bicicletas'].length).toBe(0)
      });
    });
  });
});
VSCode with WSL2 - Solve the not connecting bug.
Published: 2020-09-06 14:50:31

##The Issue
I don't know if you ever had this issue, hopefully not but you're trying to connect to your WSl2 instance and it's saying it's not able to connect, etc. Some people on the internet will tell you to restart and that might work for sometime but then it will come back again the same issue and always restarting will not solve forever.

##WSL2 Cleanup
Cleanup all the current connections within WSL2.
1. Open you WSL2 distro you're trying to connect to and then go into the following folder: `cd ~/.vscode-server/bin/`
2. Remove all the folders there: `rm -rf ./*`

##Windows VSCode Cleanup
On the newest version of the VSCode it automatically does this cleanup by default but it's always good to double check just in case and see if there's any conflicting versions of "ms-vscode-remote.remote-wsl-*", if there's more then one version there please delete the other folders which are older versions or remove remote wsl and reinstall it from the extensions tab in VSCode.
1. Open CMD: `WIN + R`
2. Type in: `cmd`
3. Go into the vscode extensions dir: `cd %userprofile%\.vscode\extensions`
4. See the folders: `dir`

##Thanks
Thank you make sure to give your like on this article if it helped you or if it saved your day with VSCode and WSL2.
March Favourites. The Tech Edition. 2020
Tags: gettingreal, crdt, sicp, clustering
Published: 2020-09-06 14:42:06

---
title: March Favourites. The Tech Edition. 2020
published: true
description: March for me has been hectic, probably due to the COVID-19, so, this is something I have learned and developed during March 2020.
tags: GettingReal, CRDT, SICP, Clustering
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cn0jrc8n8zkkd6w3dr3l.jpg
---

<span>Photo by <a href="https://unsplash.com/@anniespratt?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Annie Spratt</a> on <a href="https://unsplash.com/collections/8556372/ally%27s-room?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

## Book I Revisited

This is very subjective, but what I have learned through my work as a consultant is that **projects are either done fast and well or slowly and badly**.

At the end of the day, SCRUM is one of the most popular approaches to organise software project and a book that describes this philosophy greatly is **"Getting Real: The Smarter, Faster, Easier Way to Build a Successful Web Application"** by 37signals.

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

*I truly believe this is the book every programmer should read to understand how projects are created.* The good news, it is free, you can grab [the PDF here](https://basecamp.com/gettingreal/getting-real.pdf).

## Book I started reading

Going down the rabbit hole of Lisp one of the books that is considered a classic is **"Structure and Interpretation of Computer Programs"** by Harold Abelson and Gerald Jay Sussman with Julie Sussman, also free, available at [this link](https://mitpress.mit.edu/sites/default/files/sicp/full-text/book/book-Z-H-1.html).

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

It is the most in-depth guide into how computer code is running.

## An Interesting technology: CRDT

CRDT stands for Conflict-free Replicated Data Type. 
Think about it this way: _imagine you have a product that has a web app, an iOS app, an Android app, all of them could be used offline or with bad internet connection. CRDT makes sure that content is "resolved" to the latest modified version "in order of the modifications"_.

A very [good intro by James Long](https://www.youtube.com/watch?v=DEcwa68f-jY):

![Screenshot 2020-09-06 at 17.31.17](https://dev-to-uploads.s3.amazonaws.com/i/kpllucohig2fbodyxg51.png)
 
Alternatively you can read this [one here](https://www.serverless.com/blog/crdt-explained-supercharge-serverless-at-edge). 

## Something new in the world of ReactJS

Clustering is a really cool map feature, Mapbox has it here: https://www.leighhalliday.com/mapbox-clustering

PS: as you probably noticed, the article came out in September. This is what happens when procrastination meets COVID-19 and stress. I figured I should do it anyways to track my progress.
Using Docker to Speed-up My GitHub Action
Tags: actionshackathon, docker, github
Published: 2020-09-06 14:02:21

I wrote my [GitHub Action](https://github.com/TypoCI/spellcheck-action) using Ruby, however out the box it requires a few libraries to run, which means every time it ran it took a moment to get setup.

At first, it was just a few seconds but as I started adding things on it suddenly was taking almost 60 seconds to get setup! 60 seconds felt like a lifetime when waiting for an Action to finish.

I jumped into investigating ways to make the setup a bit quicker. The trick I discovered was to use a prebuilt docker image for my GitHub Action with everything ready to go.

## Making the Switch to a Prebuilt Docker

### Connecting to DockerHub

![My DockerHub Repo connected to GitHub](https://dev-to-uploads.s3.amazonaws.com/i/ozyzvsdaiiwoh7hcaowv.png)

The first step I needed to make was to connect my [Repository to DockerHub](https://hub.docker.com/r/typoci/spellcheck-action) & have it build a new image each time I push to master.

This was actually super straightforward, I connected my GitHub account & pretty quickly I had it configured to perform a build every time master was updated.

### Updating my action.yml

The next thing I needed to do was to tell GitHub when someone runs my Action to download the Docker Image, this was a little tricky to debug but I found the following worked:

```yml
# action.yml

runs:
  using: 'docker'
  image: 'docker://typoci/spellcheck-action'
  # When I want to check changes to my Dockerfile, I uncomment the following line:
  # image: 'Dockerfile'
```

## The Results

Pulling down the image still took a moment, but the end result was my GitHub Action took ~15 seconds to setup. Awesome! I could probably get it down a bit more by optimising my Dockerfile a bit more, but for now I'm happy with it.

## GitHub Container Registry

GitHub did recently announce a the [GitHub Container Registry](https://github.blog/2020-09-01-introducing-github-container-registry/). I had a [little experiment](https://github.com/TypoCI/spellcheck-action/blob/master/.github/workflows/publish_to_github_container_registry.yml) with pulling my Docker Image from them, but I didn't notice a big speed difference.
Delete Azure SQL Database in SQL 
Published: 2020-09-06 13:59:11

<sub><span>Photo by <a href="https://unsplash.com/@juanencalada?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Juan Encalada</a> on <a href="https://unsplash.com/s/photos/lava?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></sub>

This is a simple but I hope helpful tip!

Recently, we had deployed an Azure SQL Database through Terraform.
Sadly an error occurred during the deployment, and the database was listed but inaccessible by the Azure portal or Azure CLI.

But, the database was accessible through SQL. Odd !

In order to delete the database, we just had to do it in SQL:

```SQL
DROP DATABASE [your_database_name]
```


Hope this helps !
Install macOS guest on Windows 10
Published: 2020-09-06 13:51:41

we all know that mac operating systems are only operatable on Mac machines. And non-mac devices do not support macOS. Is this true?
Well, to some extend, it is true. Officially you cannot install macOS on Windows PC. however, we must recognize that we are living in the 21st century. And technology has become advance to the level that it can make things possible. and similarly, the technology itself has brought a method to install mac operating systems on non-mac devices such as Windows, Kali Linux, or Ubuntu.

Now, you can install mac operating systems on these non-mac operating systems.

Secondly, you might think it as a malicious or harmful way to do it. What if I  say there is a 100%ligit way to do it.

Yes, there is some new software, that are used for this purpose. Those are called Virtual machine software. Software like Virtualbox or VMware workstations are such software.

These two software are globally recognized software for desktop virtualization. This software was primarily developed to run multiple Operating systems on only one device.

These two software are globally recognized software for desktop virtualization without any fraud and spam. 

Moreover, for your information, I would like to say that VirtualBox is the software by Oracle cooperation which is available free and open-source software for desktop virtualization. 

While VMware workstation is a paid tool by the VMware corporation for the same purpose. 
So, if you want to install macOS on Windows PC. Then these two software are the best options to do it.
So, for this purpose, you can get help from the following article.

https://techvatan.com/install-macos-mojave-on-virtualbox-on-windows/




Moreover, you can also read some more interesting topics from below.

https://techvatan.com/fix-macos-mojave-screen-resolution-on-vmware/