teleren/devto huggingface dataset:
The Basics of Object-Oriented Programming (OOP) - Part 1 
Tags: javascript, oop, python
Published: 2019-11-24 23:51:25

If you look at the Wikipedia definition of OOP, it says 

Object-oriented programming is a programming paradigm based on the concept of "objects," which can contain data, in the form of fields, and code, in the form of procedures.

This is a really confusing definition for something that can be explained in simple terms. It did get one thing right. OOP is a programming paradigm, arguably one of the most well-known programming paradigms. There are other paradigms such as Procedural and Functional Programming, but that's a story for another day. 

In my own words, OOP is a way of writing programs by using the idea of “objects” which have associated data and method within them that essentially describe and explain the behavior of those “objects”. We use a class as a blueprint to create objects. 

A lot of programming languages support OOP, such as JavaScript, Python, and Ruby, behind the scenes of each language, the functionality might vary but fundamentally, when dealing with OOP, we use the same 4 "pillars" which are core to the concept. These pillars are Abstraction, Encapsulation, Inheritance, and Polymorphism.

For this article, I am going to use JavaScript to explain the concept of OOP. Let's say we wanted to represent a Person in terms of code. I have the option and luxury of creating multiple person objects which have their own individual name, job, height and weight properties. But that all becomes repetitive. I want a way to quickly and efficiently create or instantiate a Person object without hardcoding everything. This is where the keyword class comes into play. 

You can think of a class as a sort of a "blueprint" to create an actual person object. This is how it would look like in code. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qt4xu4xxw2jk5ah3l4zy.png)

In the above example, I have instantiated a new Person object called alex, where I gave that person properties within the constructor function, such as name, job, weight, and height. Two crucial aspects at this point are the constructor() function and the this keyword. 

I am not sure about other languages but in JavaScript, the constructor() function holds all the properties within the Person class. So when we create a new Person, the constructor function is called, which actually creates the new Person object. Another important thing is the this keyword. It gets a bit complicated, but ultimately, it makes sure that whatever values you pass in to create a new Person, it makes sure that it is associated to that Person only.
Streaming Video Textures and Webcam Feed with A-Frame - WebVR
Tags: webvr, webdev, aframe, sideprojects
Published: 2019-11-24 23:44:46

{% youtube ylX8RCR-ALQ %}

A fun experiment with A-Frame / WebVR to use videos as textures and to stream webcam video to create a trippy room using the users webcam and videos as textures.

Live version:
https://zonescanner.com/fractalfaces/

Sourcecode: 
https://github.com/drnoir/Streaming-Video-textures-and-Webcam-Feed-with-A-Frame
YPSKA #13 Rollup
Tags: buildtool, javascript, rollup
Published: 2019-11-24 22:57:54

I usually use Webpack when it comes to bundling etc for my Javascript project. But recently I've found an interest in [Rollup](https://rollupjs.org/guide/en/). It could be a future competitor of Webpack, as it's getting a bit of traction right now. So you might want to check it out. 

Even more time pressure today, therefore a very short text. See you tomorrow!
Fibonacci sequence
Tags: beginners, python
Published: 2019-11-24 21:53:09

Hello guys,
i know most of you have heard of the famous Fibonacci sequence in most dev practices and probably dev job interview. Am gonna show you how to write out the the sequence for any number of inputs desired. I am using python for this implementation.

### Method 1: using resursion
This is usually the easiest way to do it because it has lines of code but can mean to be difficult to understand if you dont know the recursion principle itself. So if you dont know what recursion mean i suggest you pause a lil while and hit google or you can check out the next method and research later.

```
# function to define the logic using the recursion method
def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n - 1) + fibonacci(n - 2)


nterms = int(input())
# check if the number of terms is valid
if nterms <= 0:
    print("Plese enter a positive integer")
else:
    print("Fibonacci sequence:")
    for i in range(nterms):
        print(
            f"{fibonacci(i)} ", end=""
        )  # this is prints out the sequence on a single line. 

```

### Method 2: using Loops
This method seems more familiar with everyone who knows basic programming principles like loops and conditionals. It has relatively more lines of code than the recursion method but its worth knowing too.

```
#Function for nth Fibonacci number

nterms = int(input("How many terms? "))
# first two terms
n1, n2 = 0, 1
count = 0
# check if the number of terms is valid
if nterms <= 0:
    print("Please enter a positive integer")
elif nterms == 1:
    print("Fibonacci sequence upto", nterms, ":")
    print(n1)
else:
    print("Fibonacci sequence:")
    while count < nterms:
        print(n1)
        nth = n1 + n2
        # update values
        n1 = n2
        n2 = nth
        count += 1
```

Thank you for reading and dont forget to follow for more cool stuff like this from me... Blessings.
Build Ionic 4 Cordova and Angular 9|8 CRUD Mobile App
Tags: angular, angular98, buildionic4cordovaandangular, crudmobileapp
Published: 2020-02-07 08:46:54

---
title: Build Ionic 4 Cordova and Angular 9|8 CRUD Mobile App
published: true
date: 2019-11-24 21:38:23 UTC
tags: Angular , Angular 9|8 , Build Ionic 4 Cordova and Angular , CRUD Mobile App
canonical_url: https://www.positronx.io/build-ionic-cordova-angular-crud-mobile-app/
---

The post [Build Ionic 4 Cordova and Angular 8 CRUD Mobile App](https://www.positronx.io/build-ionic-cordova-angular-crud-mobile-app/) appeared first on [positronX.io](https://www.positronx.io).

**A step by step Ionic 4 Cordova tutorial, In this tutorial, we will learn how to create a CRUD (Create, Read, Update, Delete) Mobile app (Android/iOS) with Ionic 4 and Angular 8**

[click here to read more](https://www.positronx.io/build-ionic-cordova-angular-crud-mobile-app/)
Talent Call: All Developers! :)
Published: 2019-11-24 20:55:32

Hey Community!

Chime In (chiming-in.com/) is a team of frustrated freelancers who are attempting to develop a new and improved platform based around community and collaboration.

We are looking for an initial set of members so we can test our MVP as we move on to our beta. 

Simply subscribe on our site and we will reach out to you!

Thanks,

The Chime In Team :)
Vueconf.US March 2-4, 2020 in Austin TX Full Program Announced
Published: 2019-11-24 20:53:08

We are excited that the full program of workshops, speakers and sessions for Vueconf.US, the official US #vue #conference, March 2 - 4, 2020 at the Austin Convention Center, Austin Texas, is available for you to view on the website. 

We have an incredible line up for you that will be kicked of by Vue.js creator Evan You's keynote, an update of all things Vue 3.0 and beyond.

Nine full-day Workshops will be followed by two days of awesome sessions and community Lightning Talks on all things in the Vueniverse.

We will have community events, socials, a VueVixens Skulk, and lightning talks to give you a chance to be truly immersed in this awesome inclusive community.

Check it out at https://vueconf.us
See a video from the 2019 conference https://cevents.io/Vue2019
Pros and Cons of Serverless apps?
Tags: serverless, beginners, webdev
Published: 2019-11-24 20:19:01

Serverless is a term that becomes popular. So what is serverless? It means to host your website or app on the server which does not belong to you. In other words, you will pay only what you use. **You can host your app on Google, Amazon AWS, Azure cloud server and will not pay for server but pay for the user or usage of the server.**

Here is the most common serverless platform you can use.

Serverless has these characteristics:

- does not store any file system.
- pay only for what you use.

Serverless is great but required a learning curve to get started with it. Not everything fits into the serverless world. For example, Wordpress has been the most popular platform for making a website. Fitting WordPress into a serverless world is not such a great idea. Wordpress uses SQL to store databases. SQL does not fit into a serverless world because it requires to store and create data in the database. Plug-ins, uploading files and updates of WordPress also not fits inside serverless. So you need to fit into the world outside of serverless and then connect those with serverless.

These are some of the platforms that offer to host the serverless apps.
- Google Functions
- Google Cloud Run
- AWS Serverless (AWS Amplify)
- Azure serverless (Azure Functions)
- Netlify

##Pros of using serverless.

- Pay only for what you use
- No infrastructure and No maintenance to manage, Infrastructure is managed by Cloud vendors
- Scale automatically as the user base grows or usage increases.
- Most of the Serverless platform Security and SSL to secure data encryption. 


##Cons of using serverless.

- Backend is not the option in serverless. A database like SQL requires API to connect with serverless apps.
- Requires learning curves to get started with serverless and bit more expansive if managed correctly.
Visualizing the Breaking Bad Timeline  – Using React (Hooks) with D3
Tags: react, tutorial, dthree, svg
Published: 2019-11-24 20:09:27

{% youtube c849NW2qnS8 %}

Hi, this is part 8 of "Using React (Hooks) with D3, and in this one, we visualize the Breaking Bad timeline, by working with time scales.

Code:
https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/08-breaking-bad

Timeline component:
```javascript
import React, { useRef, useEffect } from "react";
import { select, min, max, scaleTime, scaleLinear, axisBottom } from "d3";
import useResizeObserver from "./useResizeObserver";

// helper to transform date strings to date objects
const getDate = dateString => {
  const date = dateString.split("-");
  return new Date(date[2], date[0] - 1, date[1]);
};

function BBTimeline({ data, highlight }) {
  const svgRef = useRef();
  const wrapperRef = useRef();
  const dimensions = useResizeObserver(wrapperRef);

  // will be called initially and on every data change
  useEffect(() => {
    const svg = select(svgRef.current);
    if (!dimensions) return;

    const minDate = min(data, episode => getDate(episode.air_date));
    const maxDate = max(data, episode => getDate(episode.air_date));

    // maps dates to x-values
    const xScale = scaleTime()
      .domain([minDate, maxDate])
      .range([0, dimensions.width]);

    // maps numbers (character count) to y-values
    const yScale = scaleLinear()
      .domain([max(data, episode => episode.characters.length), 0])
      .range([0, dimensions.height]);
    
    // renders line for each episode
    svg
      .selectAll(".episode")
      .data(data)
      .join("line")
      .attr("class", "episode")
      .attr("stroke", episode =>
        episode.characters.includes(highlight) ? "blue" : "black"
      )
      .attr("x1", episode => xScale(getDate(episode.air_date)))
      .attr("y1", dimensions.height)
      .attr("x2", episode => xScale(getDate(episode.air_date)))
      .attr("y2", episode => yScale(episode.characters.length));
    
    // x-axis
    const xAxis = axisBottom(xScale);
    svg
      .select(".x-axis")
      .style("transform", `translateY(${dimensions.height}px)`)
      .call(xAxis);

    // draw the gauge
  }, [data, dimensions, highlight]);

  return (
    <div ref={wrapperRef} style={{ marginBottom: "2rem" }}>
      <svg ref={svgRef}>
        <g className="x-axis" />
      </svg>
    </div>
  );
}

export default BBTimeline;

```

Hope you like it!
How to overcome boredom
Tags: discuss, watercooler
Published: 2019-11-24 20:01:26

I'm just wondering: what do you do when you are bored?
Could be a few moments, could be days or weeks, maybe you don't even identify yourself with the product you're building.

How do you keep yourself motivated? 
Are there any "special activities" you do to distract yourself?
Or are you one of the few that are never bored :-) ?
Misunderstanding of  const keyword in JS
Tags: javascript, node
Published: 2019-11-24 19:43:46

When you read forums or ask to JS friends developers about what's const keyword, sometimes they use this kind of answer:

> variable const cannot be changed" or "const cannot be updated"

I think they really understand the difference between const let and var, but this sentences can be wrongly interpreted.

> We should use the word "reassigned" instead of "change/update"

## 🚫 Reassignment


```javascript

const color = 'red';
color = 'blue';
// TypeError: Assignment to constant variable.
color = { 'hex': '#FF0000' };
// TypeError: Assignment to constant variable.

const profile = { 'firstname': '', 'lastname': '' };
profile = 'Name';
// TypeError: Assignment to constant variable.

```

We can't reassign, set a new value to color variable.

## ✅  Change/Update value

```javascript
const profile = { 'firstname': '', 'lastname': '' };
profile.firstname = 'Naruto';
profile.lastname = 'Uzumaki';
profile.rank = 'Hokage';

// output 
{ firstname: 'Naruto', lastname: 'Uzumaki', rank: 'Hokage' };
```

So, we were able to add a new property rank and change profile's property values, that means, we have changed the value of profile object.

## 😖 Confusion

```javascript 
const color = 'red';
color = 'blue';
// TypeError: Assignment to constant variable.
```


Here if you are thinking you are changing the value 'red' to 'blue'. You can be confused and might be wondering "Why i've got the TypeError if i'm changing the string value"

'r' letter doesn't change to 'b', 'e' to 'l' and so on ... actually 'blue' is considered as a "NEW" string so in other words it's a reassignment. That's a property of primitive values, when you think these kind of values have changed actually they are new values.

String, numbers and booleans are part of primitive values, this kind of values are immutable, their value can't be changed.

I hope this explanation will help someone. Let me know your feelings 

ps: my english is not perfect, so give me some feedbacks if you want
Podman/Buildah toolchain in Ubuntu
Tags: containers, oci, docker
Published: 2019-11-24 19:36:12

---
title: Podman/Buildah toolchain in Ubuntu
published: true
description: How to get to build and run your first container using Buildah/Podman
tags: containers, oci, Docker
cover_image: https://thepracticaldev.s3.amazonaws.com/i/odub1g59ia8snnxcugq2.jpg
---
Fortunately, and thanks to the [Open Containers Initiative](https://www.opencontainers.org/), there's now an alternative to [Docker](https://www.docker.com/) [created by RedHat](https://developers.redhat.com/blog/2019/02/21/podman-and-buildah-for-docker-users/): [Buildah](https://buildah.io) is a tool for creating containers, while [Podman](https://podman.io) runs the containers. All of them, in userspace.

That's the catch, however. It needs some other tools to build and run stuff. Let's use them, for instance, to build and run this minimal [Alpine dockerfile](https://github.com/JJ/docker-examples)
But you can install all of them in easy steps in Ubuntu:

1. [Install Buildah](https://github.com/containers/buildah/blob/master/install.md). Just add the corresponding repo and download it:

```
sudo apt-get update -qq
sudo apt-get install -qq -y software-properties-common
sudo add-apt-repository -y ppa:projectatomic/ppa
sudo apt-get update -qq
sudo apt-get -qq -y install buildah
```

2. You need to install [`runc`](https://github.com/opencontainers/runc) to actually use the command `RUN` inside the Dockerfile. That pretty straighforward: `sudo apt-get install runc`. The catch with this is that it uninstalls `docker-ce`, so you're left without your good old docker. If you are not comfortable with this, just skip the installation of Buildah or use it only for images that don't need to use `RUN`

3. You're good to go now building the container. `bud` is the equivalent here of `build` in good old docker CLI:

```
buildah bud -f alpine/Dockerfile -t your-name-here/alpine-hola-mundo
```

> You can use any container, that's the command if you downloaded the repo above

4. Let's go and run it. We need to install [`slirp4netns`](https://github.com/rootless-containers/slirp4netns), a tool for user-mode networking. Next step will work without this, but you'll get a nasty error (and might fail when actual networking is used):

```
sudo apt install slirp4netns
```

5. Installing podman is a breeze, with all the repos added and everything

```
sudo apt install podman
```

6. Ready to run!

```
podman run -t your-name-here/alpine-hola-mundo
```

It's a nice alternative just because it's an alternative, and then because you don't actually need to run a daemon to run containers, so your sysop might be better sold with this.

*Update*: I tried it on another machine, and it just didn't work, even with the same operating system. Might be this toolchain still has some issues. I posted them where they correspond, I'll update when they are solved.
Firebase Summit 2019 - What’s New for Firebase Web?
Published: 2020-02-11 16:29:32

---
title: Firebase Summit 2019 - What’s New for Firebase Web?
published: true
date: 2019-11-24 19:33:00 UTC
tags: 
canonical_url: https://www.gilcreque.blog/2019/11/24/firebase-summit-whats.html
---

![](https://www.gilcreque.blog/uploads/2020/5e5d5d026b.png)

I gave a lightning talk yesterday at [an event I helped organize for GDG Space Coast](https://www.meetup.com/GDGSpaceCoast/events/266211096/) covering what was new in Firebase for Web Applications from the [Firebase Summit](https://firebase.google.com/summit) back in September.

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSSVzn8BgudASs-YjpmyLvgKL9ndLu3g8-05aTm16iEqsz8mzz810sCS2zLYA_8WxdLG7uwkZNCrdvT/embed?start=false&amp;loop=false&amp;delayms=30000" frameborder="0" width="740" height="445" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
* * *

## Adventures in Making Slides

I originally did my slides in Keynote to tryout the transitions that it provides. I ran into an error when my iCloud save presentation didn't sync properly so I was stuck having to redo my slides just before and during the beginning of the event. I went to share them in this blog post and I realized with the videos I included I would need to remake my slides once again. First I had to export the slides as PowerPoint from Keynote as Google Slides doesn't support importing Keynote slides. After I imported I decided to take a look at the branding guidelines Google Developers recently pushed out to organizers of Google Developer Groups. I copied over some of the slides for my intro and thank you slide. I'll have to remember to use the provided templates as a basis for future slides.
Does an object passed from a function is by reference or by value in JavaScript?
Tags: javascript
Published: 2019-11-24 19:32:24

Lying on my bed, I started pondering one question in my mind. Whether the object passed by a function call is passed by reference or passed by value in the context of the function body?

### How to evaluate this?

It was confusing at first that how should I test this? Because of once a function returns something, its body is done executing, so there wasn't any mechanism to check what happens to the object if we change it outside of the function body; whether will it be changed into the function as well?



### Enters Generators

A generator function is a kind of function whose execution of the body can pause and can resume from the same spot from which It was paused before. So I created one simple generator function which I'll be using as the base to evaluate my theory.


```js
function* generator() {
  const me = {name: 'Aziz', age: 23};
  rv = yield me;
  console.log(me, rv);
}
```

Can you see the difference? It's the `*` over there ☝️. Now let's run this function.

```js
let gen = generator();
```

Calling the above function doesn't mean that the body will start executing from the same. When we run a generator function, it returns a generator object which has a property called `next`, when we call this method, that is when the body of the generator function starts executing.

```js
let myself = gen.next();
```

The result of calling `next` property is an object that is returned which has this type.
```ts
{value: any, done: boolean}
```

### Changing object's value

Now, I've got the passed object `me` to the variable `myself`. Let's try to change its value.

```js
myself.value.name = "Mohammad Aziz";
```

One fascinating thing about the generators is that you can also pass value from outside to the stopped position of the generator. This is done by calling the same `next` method and by passing the parameter you want to transfer to the generator body.

```js
gen.next(myself.value);

// logs -> {name: "Mohammad Aziz", age: 23} {name: "Mohammad Aziz", age: 23}
```

### Conclusion

This concludes that when we pass any object from a function, then it is passed by reference.
A powerful toolkit to make your virtual teams work like a charm
Tags: virtualteam
Published: 2019-11-24 19:15:56

---
title: A powerful toolkit to make your virtual teams work like a charm
published: true
description: Here are the key ingredients that will help your virtual teams become 50% more productive and overcome hidden dangers of remote working.
tags: virtual team
cover_image: https://www.mindk.com/blog/wp-content/uploads/2019/11/featured-image-1920x1080.jpg
canonical_url: https://www.mindk.com/blog/toolkit-for-virtual-teams/
---
The virtual work method provides companies with an opportunity to build a dream team without borders. Employees, in turn, get a chance not to be tied to the office location and acquire a sound work-life balance.

A virtual group of employees is a great option when organized and managed properly. MindK knows about the challenges related to remote work firsthand.

Sure, like most other IT companies, we have a cozy office where we love to work every day. One fine day we decided to enlarge the team and explore the benefits of a virtual workforce. Now we have several offices located in different cities and a powerful 5-piece toolkit to make virtual teams work for you!

[Continue reading...](https://www.mindk.com/blog/toolkit-for-virtual-teams/)