teleren/devto huggingface dataset:
Classes in JavaScript
Tags: javascript, class, oopsconcepts, es6
Published: 2020-08-25 09:13:21

---
title: Classes in JavaScript
published: true
date: 2020-06-01 09:59:47 UTC
tags: javascript,class,oopsconcepts,es6
canonical_url: https://medium.com/@amanagrawal.am/classes-in-javascript-87a76bb40cac
---

![](https://cdn-images-1.medium.com/max/1024/1*Gp4wMLdcZ3h2sRMIpx9E8A.png)

Introduced in ES6, classes are simply the syntactical sugar over function prototyping.

A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.

### Class Basic syntax

Use the keyword class to create a class, and always add the constructor() method. The constructor method is called each time the class object is initialized. After adding a constructor method we can add other methods.

```
class ClassName {
  // class methods
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}
```

### Example

A simple class definition for a class named “Product”:

```
Class Vehicle{
 constructor(brand) {
   this.carname = brand;
 }
}
```

Now you can create objects using the `Vehicle ` class:

### Example

```
class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }
}
mycar = new Vehicle("Toyota");
```

### Methods

A class in ES6 contains methods for functioning, out of which the constructor method is special, where you initialize properties and called automatically when a class is initiated, **and it has to have the exact name “constructor”** , in fact, if you do not have a constructor method, JavaScript will add an _invisible and empty_ constructor method.

However we are also free to make our own methods, the syntax should be as below:

```
class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }
  print() {
    return "I have a vehicle of the brand" + this.brand;
  }
}

mycar = new Vehicle("Toyota");
document.getElementById("demo").innerHTML = mycar.print();
```

### Inheritance

To create a class inheritance, use the extends keyword.

A class created with a class inheritance inherits all the methods from another class:

```
class Car {
  constructor(brand) {
    this.brand = brand;
  }
  print() {
    return "I have a vehicle of the brand" + this.brand;
  }
}

class Car extends Vehicle {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.print() + ', it is a ' + this.model;
  }
}

mycar = new Car("Hyundai", "Verna");
document.getElementById("demo").innerHTML = mycar.show();
```

**Important Note** :

> A common pitfall for novice developers is to put a comma between class methods, which would result in a syntax error.

> The notation here is not to be confused with object literals. Within the class, no commas are required.
How to deploy tvOS app to your Apple TV
Tags: tvos, swift, xcode
Published: 2020-06-01 09:41:53

So just a few days ago I wanted to test my first ever tvOS app on real device and it was really hard experience. Mainly because I think I expected it to "just work" and also tvOS not being that popular I could not find many posts online about it.

I am writing this guide for myself and for other developers exploring tvOS in hope of saving them a lot of frustration.

## Connect your Mac and Apple TV in the same way

This means you either need both devices connected with ethernet cable or on the same Wi-Fi network. Either is fine. I am not totally sure this is really necessary but I think it beats wondering why your Mac cannot see the Apple TV.

_There is one annoyance with the Wi-Fi on Apple TV if you are setting it up for the first time. You need to disconnect the ethernet cable first and then you need to use Siri remote to type your Wi-Fi password because your iPhone or iPad will not connect.._

## Add your Apple TV to Xcode to register it

With both devices connected in the same way, it is time to register the Apple TV to your development profile.

Now comes the **crucial part** that took me so so long. You need to open Settings on your Apple TV and navigate into section "Remotes and Devices".

Without this my Xcode did not see my Apple TV at all.

Once your Apple TV is "ready".

You can open Xcode and then open "Devices and Simulators" from the "Window" menu.

![Xcode - Devices and Simulators](https://nemecek.be/media/images/xcode-devices.png)

You should see your Apple TV available. It will take some time for Xcode to download necessary development files but after that you should be ready to go.

Also make you sure you have version of Xcode that supports your version of tvOS on the Apple TV.
JS:DS - Stack Data Structure in JavaScript
Tags: javascript, datastructure, jsds
Published: 2020-06-01 09:30:24

In this write-up, we are going to see how the stack data structure can be implemented in Javascript.

##What is a Stack?

The stack is a data structure to store the data in the order of insertion where the item gets inserted at the last into the stack will be the first one to be removed.

In shorter terms Last In First Out(LIFO).

##How are we going to implement it?

The following are the methods that we are going to implement in Stack DS.

> **initialize** — Initialize the storage and stack size
> **push** — push data to the stack
> **pop** — Remove the last pushed item from the stack
> **getStackSize** — Get the current stack size


###initialize
```
class Stack {  
 /* Initialization */  
 constructor() {    
   this.storage = {};    
   this.stackLength = 0;  
 }
}
```

###push
```
class Stack {
  /* Initialization */
  constructor() {
    this.storage = {};
    this.stackLength = 0;
  }
  
  /* Add item to the stack */
  push(item) {
    this.storage[this.stackLength] = item;
    this.stackLength++;
  }
}
```

###pop```
class Stack {
  /* Initialization */
  constructor() {
    this.storage = {};
    this.stackLength = 0;
  }
  
  /* Remove Item from the stack with below conditions
   1. Get the last index
   2. check the stack is non-empty
   3. remove the item from the storage
  */
  pop() {
    let endIndex = this.stackLength - 1;
    if (endIndex >= 0) {
      delete this.storage[endIndex]
      this.stackLength--;
    } else {
      throw "Stack is Empty, cannot pop!"
    }
  }
}
```

###getStackSize
```
class Stack {
  /* Initialization */
  constructor() {
    this.storage = {};
    this.stackLength = 0;
  }
  
  /* To get the stack size */
  getStackSize() {
    return this.stackLength;
  }
}
```

###Complete Code
[Please find the complete gits code here](https://gist.github.com/saravanakumarputta/deb51dc418ab9c7aff47498f2c5941e0)
What are MySQL Operators
Tags: database, kubernetes, mysql
Published: 2020-06-01 09:02:08

The MySQL operator is a tool that was created to help in the automatization process for the developers who are eager to run their databases on MySQL and Kubernetes in a smoother and more efficient way.
 
 
First of all, what is Kubernetes?
 
Kubernetes is a distributed platform that can be used to run a wide variety of programs in the Cloud. Based on the Google internal platform known as Borg, it has gained popularity among all Cloud providers. Amazon, Microsoft, Google and Alibaba provide, in addition to their own platforms, deployment models based on Kubernetes. Moreover, companies like Redhat, now part of IBM, Mirantis or Rancher provide easy to install Kubernetes distributions. Those distributions enable organizations that prefer to rely on their own data centers to run Kubernetes internally. Because of its popularity, Kubernetes might very well become a defacto standard to deploy applications anywhere…

So now, what exactly does MySQL Operator do?
 
The MySQL Operator is a Kubernetes Operator that helps operational teams to manage their MySQL databases on any Cloud provider as well as on premises. It provides automations to install new databases, upgrade databases, scale databases up and down with almost no downtime, backup or restore databases and monitor databases. The MySQL Operator is a key component for teams who run critical MySQL databases.
Web Project Ideas
Tags: beginners
Published: 2020-06-01 08:57:54

So you have decided to build your own product and upskill but what are you actually gonna build? Well, that's really not a problem. You are not supposed to come up with some revolutionary idea. You just need to develop something that adds value. It could be anything. A tinder for books, an app for foodies, etc.

Some things to keep in mind before picking something to work on.
1. Try to build something with context to the current time or situation. As of this articles, corona virus is spreading all around. If your product is anyway can help spread awareness about it or give some solution, it would be the amazing.
2. Don't reject some idea if the problem it solves is a small or very very small one. You need not build the next big social platform. You have to do something which add value, that's it.

Below are the 21 ideas for your next project!

#Video Chat
Use WebRTC to build a video chat application. Many people are starting to do video conferences, they won't mind using your app.

#Blogging Website
Build a CMS for anonymous people to write their secret stories. Shh! Keep their identity secret.

#Tic Tac Toe
A tic-tac-toe which let's people invite their friends using email. Everyone is quarantined, people will love it.

#Chat Room
Chat rooms for small teams to discuss and share files. Introduce it to conventional/government departments. Use web sockets for it.

#Run-On-The-Spot
A mobile app which let's people mark any destination around their house and let them run on the spot itself to simulate their walk. Friends can mark their locations and run at their houses to simulate meeting.

#Dank Memes
A simple dynamic website which gets fresh dank memes every new day. People are gonna go crazy about it, honestly.

#Garden IOT
An IOT dashboard for maintaining garden. Relatives can take care of each other's gardens.

#Online Javascript IDE
A code editor made using Ace Editor JS. Add the functionality of saving code on cloud and sharing it.

Thanks for reading! 
I strongly hope you build something awesome.
Share with me on,
Instagram @digvijaysrathore
- https://instagram.com/digvijaysrathore
Twitter @novadigvijay
- https://twitter.com/novadigvijay
New IDE and JS framework. Demo time!
Tags: javascript, showdev, webdev, news
Published: 2020-06-01 08:53:15

For those who missed the [introduction](https://dev.to/przemek/new-ide-compatible-with-new-js-framework-gimme-feedback-d-2ech).

Hi guys. Today I would like to show you why we are so excited about GC IDE. We decide to make every day small showcases of functionalities on live [demo](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide-conditionalNCommandAssistant.html?appId=1&edit=page&id=index&fbclid=IwAR1YLR4vijCAuToWJMf8SkIfLgikBHufUohm3t7LuukkNofuW8m8QlqOFU0). Just follow code comments to discover what we prepared. 

So here it is - the "Implementation Assistant". Just add an attribute directive to HTML element or reference "actions" variable to see how IDE will auto-generate all necessary glue code and help you to keep track on changes that needs to be made.

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

Let me know if this form of small "tutorials" is interesting for you to discover more about the IDE, or can you think of something else?

Chekout today's [demo](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide-conditionalNCommandAssistant.html?appId=1&edit=page&id=index&fbclid=IwAR1YLR4vijCAuToWJMf8SkIfLgikBHufUohm3t7LuukkNofuW8m8QlqOFU0)

and our [Github](https://github.com/gluecodes/gluecodes-framework)
Tweets That Boasts Productivity - Part 2
Tags: todayilearned, productivity, codenewbie, javascript
Published: 2020-06-01 08:31:57

Welcome to the second part of this series. Like I promised in the [first part](https://dev.to/ebereplenty/tweets-that-boasts-productivity-part-1-451b), I might be making this a weekly post to encourage newbies and other developers. So check out some outstanding tweets I came across last week:

{% twitter 1266765685151141889 %}

{% twitter 1266608010413043713 %}

{% twitter 1266710883541155841 %}

{% twitter 1266149438554169344 %}

{% twitter 1267000692998311940 %}

{% twitter 1266569274883289095 %}

{% twitter 1266735289533370369 %}

{% twitter 1266648793664991233 %}

{% twitter 1266241033945243648 %}

{% twitter 1266385646605815809 %}

{% twitter 1266322607873257472 %}

{% twitter 1266091288484548608 %}

{% twitter 1266255119785455617 %}

{% twitter 1266130754985222144 %}

{% twitter 1266233355424718848 %}

{% twitter 1266287412390400001 %}

{% twitter 1266294576282648578 %}

{% twitter 1265988187308150785 %}

{% twitter 1265913603791753216 %}

{% twitter 1266096085468155904 %}

{% twitter 1266058026601066498 %}

{% twitter 1265963440545415170 %}

{% twitter 1265602318801739777 %}

{% twitter 1265594425163624450 %}

{% twitter 1265899217287024640 %}

{% twitter 1265684911190683648 %}

{% twitter 1265691487171469315 %}

{% twitter 1265531778871316482 %}

{% twitter 1265897024999895041 %}

{% twitter 1265505186048626691 %}

{% twitter 1264894470660775937 %}

{% twitter 1265395538566004741 %}

{% twitter 1265345703762554880 %}

{% twitter 1265318896938221575 %}

{% twitter 1265051549543419905 %}

{% twitter 1264988132677738498 %}

{% twitter 1265184815055339521 %}

{% twitter 1265183315784540160 %}

{% twitter 1265240298373951488 %}

{% twitter 1265291480400310274 %}

{% twitter 1265278895701426176 %}

{% twitter 1265298565305438209 %}

{% twitter 1264902261584662528 %}

{% twitter 1264263818982469632 %}

{% twitter 1265143203474309120 %}

{% twitter 1265295196062916609 %}

{% twitter 1265220420665475072 %}

{% twitter 1265197884284248070 %}

{% twitter 1265026645435404288 %}

### Conclusion
I hope you enjoyed the tweets and you are encouraged to do more. See you soon. 

If you have questions, comments or suggestions, please drop them in the comment section.

You can also follow and message me on social media platforms. 

**[Twitter](https://twitter.com/eberetwit) | [LinkedIn](https://www.linkedin.com/in/samson-ebere-njoku-profile/) | [Github](https://github.com/EBEREGIT)**

Thank You For Your Time.
Truly Responsive Grid with CSS Grid
Tags: css, cssgrid
Published: 2020-06-01 08:17:15

---
description: Create a responsive grid in one line with CSS Grid and the new min() CSS function
---

This article describes really well how to make a responsive grid with CSS Grid:
{% link https://dev.to/scrimba/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-29h %}

But we can add one final ingredient to make that CSS line even better.

In the article, the minimum width of the grid items is set to `100px`. This means that if the availabe size of the grid container is narrower than `100px`, the grid items will overflow. This is quite unlikely to happen with a minimum width of only `100px`. But the higher that number, the more likely the columns is to overflow on small viewports.

### Cutting edge CSS to the rescue!

Instead of having to resort to a media query, we can use: the CSS function `min()`, [which is now widely supported](https://caniuse.com/#feat=css-math-functions).

```css
.container {  
    display: grid;  
    gap: 1rem;  
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
```

`min()` accepts one or more values and returns the smallest value. As soon as the full width of the columns is narrower than `300px`, the columns will observe the `100%` CSS declaration and shrink below `300px`.

For a better understanding of the issue and of its solution with the `min()` function, I highly recommend reading this article:
https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
Win VmWare Shared Folders with Symlinks
Tags: react, vmware, linux
Published: 2020-06-01 07:58:56

Hi,
After spending a whole day trying to figure it out what I can't create a react App with "create-react-app app_name" I realised that it is because I am on Windows 7, using VmWare 14, sharing a folder to a Linux Ubuntu 18.04 guest OS and I can't have symlinks in those folders.
Does anyone know how can this be overcomed?

Thank you
Understanding Kubernetes: part 28 – Debugging/Troubleshooting Kubernetes
Tags: kubernetes, devops, docker, beginners
Published: 2020-06-01 07:55:08

---
title: Understanding Kubernetes: part 28 – Debugging/Troubleshooting Kubernetes 
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dicjw9ygs9l2ykx84cz2.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Kubernetes Sketchnotes with a focus on how to debugging and troubleshooting Kubernetes. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dicjw9ygs9l2ykx84cz2.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ow9h1bq8ad7zhi89x5d4.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o9y5xav6wusdeapx058o.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j6eeolxfuprry6j1ss7l.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sg2o58rksk2evvigrtg9.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ywfndsw06kqe3o5ggz2l.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fq70ifyp0b45oir4vb6p.jpg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Docker vs Serverless, and does it have to be on the same domain as frontend? 
Tags: security, docker, serverless, help
Published: 2020-06-01 07:37:41

In short, is it the best to use Netlify Lambda if I use Netlify?

Downsides 

- What OS is it really? Can build steps be guaranteed to succeed?
- Having to webpack is a pain in itself.
- Cannot make use of lambda during SSG building.
Peer-To-Peer file transfer using WebRTC
Tags: webdev, webrtc, javascript, socketio
Published: 2020-06-01 07:24:45

Checkout project 'Payload' Peer-To-Peer file transfer(lickety-split) without storing elsewhere.

Future scope for News-Agencies to prevent government surveillance and of course the giants.

(https://bit.ly/jswalker-payload)
Really? Preselected checkbox not working, common AEM?
Tags: aem, adobeexperiencemanager
Published: 2020-07-03 17:17:25

---
title: Really? Preselected checkbox not working, common AEM?
published: true
date: 2020-06-01 07:00:00 UTC
tags: aem, adobeexperiencemanager
cover_image: https://cdn.sanity.io/images/0a8atbln/production/d14cc6dc3890883c65ea0cbb61f62b17ff5f1628-3353x2514.jpg?rect=0,313,3353,1886&w=1200&h=675&fit=crop&auto=format
canonical_url: https://devz.life/blog/preselected-checkbox-not-working-common-aem/
---

## Why one simple preselected checkbox doesn't work in page properties?

Today I needed to add one, simple checbox in page properties and it should be preselected by default. Sounds simple, 5 min task, yea sure....

Since I'm not doing this stuff so often I needed to check [granite documentation](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/checkbox/index.html) to see how to achive it. Looks simple, I found properties what I need ( **value** , **uncheckedValue** , **checked** ).

```
<showSomething
	jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
	cq:showOnCreate="{Boolean}true"
	text="Please be preselected by default"
	name="./showSomething"
	checked="{Boolean}true" // tried also with string "true"
	value="{Boolean}true" // "true"
	uncheckedValue="{Boolean}false" /> //"false"
```

And of course it doesn't work in page properties just in component dialog...

Since I'm tired of doing some hacks or writing Javascript to get this stuff working, I just switched dialog to **hideSomething** so that not preselected checkbox have sense.

I don't understand how that kind of simple things doesn't work as expected OOTB.

Share your ridiculous cases which doesn't work? :D
Background Patterns, Simplified by Conic Gradients
Published: 2020-06-01 06:57:04

For those who have missed the big news, Firefox now supports conic gradients!

Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true (it’s false by default and all it takes to switch is double-clicking it).

With that enabled, now we can test our CSS including conic gradients in Firefox as well.
While some of the demos in this article work just fine when using a polyfill, some use CSS variables inside the conic gradient and therefore require native support for this feature.

One thing I particularly like about conic gradients is just how much they can simplify background patterns. So let’s take a few linear-gradient() patterns from the gallery created by Lea Verou about a decade ago and see how we can now simplify them with conic-gradient!

That’s quite a bit of CSS and perhaps even a bit intimidating. It’s not easy to just look at this and understand how it all adds up to give us the pyramid pattern. I certainly couldn’t do it. The Redmi K30 Pro was revealed in the last month as <a href="https://www.croatiarh.com/xiaomi-redmi-note-9-pro-the-new-price-performance-cracker-from-xiaomi-is-here/">Xiaomi</a>’s sub-brand cost-effective flagship. It took me a while to get it, even though gradients are one of the CSS features I’m most comfortable with. So don’t worry if you don’t understand how those gradients manage to create the pyramid pattern because, one, it is complicated and, two, you don’t even need to understand that!

Using conic-gradient(), we can now get the same result in a much simpler manner, with a single background layer instead of four!

What I like to do when coding repeating patterns is draw equidistant vertical and horizontal lines delimiting the rectangular boxes defined by the background-size. In this case, it’s pretty obvious we have square boxes and where their limits are, but it’s a really useful technique for more complex patterns.

By default, conic gradients start from 12 o’clock and go clockwise. However, in our case, we want to offset the start of the gradient by 45° in the clockwise direction and afterwards make every one of the four shades occupy a quarter (25%) of the available space around the midpoint of our square box.

Well, that’s it! I hope you’ve enjoyed this article and that it gives you some ideas about how conic gradients can make your life easier.