teleren/devto huggingface dataset:
Diving into Object Oriented Programming
Published: 2020-07-10 06:04:56

Just like the title,Object Oriented Programming is all about objects.Objects have properties and these are what makes an object.One thing to note is that objects can share properties but have different values for those properties.

Properties in an object can be accessed in 2 ways:

-using dot notation

for example

let duck = {
  name: "Aflac",
  numLegs: 2
};
console.log(duck.name);


-using bracket notation

for example

let duck = {
  name: "Aflac",
  numLegs: 2
};
console.log(duck[name]);


Objects have constructors.Constructors are functions that create new objects.They use this keyword to set properties of the object they will create.They are defined with a capitalized name to distinguish them from other functions that are not constructors.Objects properties created with constructors are separated with a semicolon unlike other object properties which are separated with a comma.new operator is used when calling a constructor.

for example:

function Bird() {
  this.name = "Albert";
  this.color  = "blue";
  this.numLegs = 2;
  // "this" inside the constructor always refers to the object being created
}

let blueBird = new Bird();
When a constructor function creates a new object,it is an instance of its constructor.instance of allows you to compare an object to a constructor.It returns true if the constructor created the object and false if the constructor did not create the object.

for example:

let Bird = function(name, color) {
  this.name = name;
  this.color = color;
  this.numLegs = 2;
}

let crow = new Bird("Alexis", "black");

crow instanceof Bird; // => true
prototype properties reduce code duplication.They are shared among all instances of an object.

for example:

Bird.prototype.numLegs = 2;
console.log(duck.numLegs);  // prints 2
console.log(canary.numLegs);  // prints 2
Using Bird.prototype ensures that you do not have to define numLegs is not defined in both duck and canary.

Objects have methods.One of these methods is Object.create().

for example:

let animal = Object.create(Animal.prototype);
Sobre microservicios y autenticación JWT
Published: 2020-07-10 05:59:52

La arquitectura de microservicios tiene como objetivo aislar los distintos componentes de una aplicación, con el fin de que cada uno sea una aplicación por sí misma. Nace como una respuesta contra las arquitecturas monolíticas que consideran una aplicación como una unidad indivisible, lo que impacta negativamente su escalabilidad pues la limitan en complejidad, carga soportada y desarrolladores, pues será necesario entender todo el sistema para realizar un cambio o un despliegue.

Al aplicar esta nueva arquitectura nos veríamos ante la necesidad de implementar autenticación para el acceso a los servicios, entre las soluciones utilizando JWT están:
- Crear un servicio para generar y autenticar tokens, para que cada vez que un servicio reciba un token de un cliente realicé una llamada a este servicio y lo verifique. *Pero esto traería como consecuencia el generar un bottleneck en este servicio.*
- Se podría configurar la llave secreta en cada servicio que reciba un token del cliente, así verifica el token sin necesidad de llamar a otro servicio, *pero no es una práctica recomendada tener en múltiples ubicaciones la llave secreta* pues aumenta el riesgo de comprometerla y por ende al sistema entero.

En base a estas soluciones, se puede optar por utilizar un llave pública bajo el algoritmo RS256 que nos permita únicamente tener la llave privada en el servicio de autenticación (para generar los tokens) mientras los otros servicios pueden verificar utilizando esta llave pública.
AR FURNITURE RETAIL PLATFORM
Tags: augmentedreality, arfurniture, tryon, arretail
Published: 2020-07-10 05:53:01

Easily convert your furniture eCommerce mobile app into a wonderland. With this, your customer has to just scan, select & place to try and buy. No more disappointing purchases or incorrect sizes. Pure comfort and pleasure… Simply… magic!

With the adoption of AR technology in apps, manufacturers and retailers of furniture are now offering their customers the trendy experience of virtual shopping, all from the comfort of their homes.

AR shopping apps help buyers view a piece of furniture they are interested in, such as a couch, a table or a bookshelf, in 3D, place it in the space they want to check size and functionality. With this problem faced by customers of incorrect sizes is minimized.
Build a Tinder Clone with Flutter, Firebase and Bloc part 3/40 Flutter Bloc Tutorial and Setup 
Tags: flutter, tutorial, dart, career
Published: 2020-07-10 05:36:55

---
title: Build a Tinder Clone with Flutter, Firebase and Bloc part 3/40 Flutter Bloc Tutorial and Setup 
published: true
description: Tutorial on building a Tinder clone with Flutter, Firebase and Bloc
tags: #Flutter #Tutorial #dart #career
//cover_image: https://direct_url_to_image.jpg
---

Hi good people. 

In this series of **videos** we are going to build a Tinder clone build Flutter, Firebase as a backend and Bloc as our state management solution.

In this video we have a short tutorial on Flutter and Bloc and set up our folder structure.

Protip: Watch video at **1.25** speed. 


{% youtube kMKJuKpLlXs %}
How you can Boost your Productivity and Code Quality in 5 days ... (PROVEN TECHNIQUE)

Tags: git, tutorial
Published: 2020-07-10 05:29:57

There are more than 35 [git best practices](https://acompiler.com/git-best-practices/) that are available on the web.


The web is full of Information... It's HUGE.


BUT the truth is different


It's not easy to achieve code quality by using all these git best practices and with [many advance git commands](https://acompiler.com/git-commands/).

Why?

It's hard to remember everything.

And second, it's not easy to implement, especially if you are a part of a big team.

Solution?

[The AFTER technique](https://acompiler.com/after-technique/)


# The AFTER technique



Before you jump in detail...

I have something to share


___

I used this technique and notice the boost in productivity and overall code quality improves within 5 days.

Find full case study here


> ### "[How I Boost My Productivity With AFTER Technique in 5 Days](https://acompiler.com/after-technique/)"

___


So let's dive into the more details of this technique

## A — Atomic Commits
One of the important and without a doubt, best practices in any version control is to keep your commits atomic.

In simple words...

Atomic commit = one commit for one change.

example

git commit -m "Add JS validation to the user signup form"

## F — Frequent Commits
The second rule of AFTER technique is F — Frequent commits.

Anytime I complete a part of code that compiles and runs, I prefer to commit.

## T — Test Before You Push 
I have never met any programmer who can write perfect code. To err is human.

It's important to test code before you commit and especially push to the remote repository.

## E — Enforce standards
Adopting standards are essential.

They accelerate overall quality, and there is no doubt that full compliance always minimizes errors and delays.

These standards depending on the team and other factors.

You are read more about these standards here on Git Commands

## R — Refactoring Is Not a Feature
Code refactoring is a normal thing in developers.

But the worse thing is refactoring and adding a new feature in the same commit.

You should not treat refactoring as a new feature and never mix these two things.

Code refactoring is not adding any value to the business.

That's it.

## Bonus Section

Here is the bonus section for you.

You can download from here - [Git Best Practices and AFTER techniques](https://acompiler.com/git-best-practices/).


Leave a comment and let me know your thoughts.
Avirion Chronicles: Genealogy of the Great Crusaders devlog, July 10th '20
Tags: srpgstudio, alphadioproduction, avirionchronicles, game
Published: 2020-07-10 05:08:29

More devlogs from me :D and these guys are just nice to have in my game. Remember that they're available in my Patreon! https://www.patreon.com/alphadioproduction
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6fyd5hxg9mba1ytwixpn.gif)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yhf6ah2bzq6zmddn8q1h.gif)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kc16lo911kgwe25g5oai.gif)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f5mmiz5c4hlj5pvjh8o2.gif)
Can I Use? Twitter Bot
Tags: showdev, webdev
Published: 2020-07-10 04:57:01

Hello! I made a tweetbot (Twitter bot?) that can query the Can I Use? database in your threads.

It is simple to use. All you have to do is Tweet this: `@caniusebot !![query]`, where `[query]` is your query. Here's a sample:
{% twitter 1281446330842279937 %}

You'll get a response within 20 seconds like this:
{% twitter 1281446355622178816 %}

If you aren't satisfied with the response, there is also a link to your query on caniuse.com.

Did I mention that it is open source, too? It’s on my GitHub. {% github juniorRubyist/caniuse-bot %}

If you have any issues (like it isn't responding), please tag me on Twitter (not the bot), quoting your querying tweet.

Also, please let me know what you think!!
Event-driven approach in React hooks?
Tags: help, discuss, react, eventdriven
Published: 2020-07-10 04:54:45

---
title: Event-driven approach in React hooks?
published: true
description: How to implement event-driven approach in React hooks?
tags: #help #discuss #react #eventdriven
canonical_url: https://stackoverflow.com/questions/62827419/event-driven-approach-in-react
---

I'd like to "fire an event" in one component, and let other components "subscribe" to that event and do some work in React.

For example, here is a typical React project.

I have a model, fetch data from server and several components are rendered with that data.

```javascript
interface Model {
   id: number;
   value: number;
}

const [data, setData] = useState<Model[]>([]);
useEffect(() => {
   fetchDataFromServer().then((resp) => setData(resp.data));
}, []);

<Root>
   <TopTab>
     <Text>Model with large value count:  {data.filter(m => m.value > 5).length}</Text>
   </TobTab>
   <Content>
      <View>
         {data.map(itemData: model, index: number) => (
            <Item key={itemData.id} itemData={itemData} />
         )}
      </View>
   </Content>
   <BottomTab data={data} />
</Root>
```

In one child component, a model can be edited and saved.

```javascript
const [editItem, setEditItem] = useState<Model|null>(null);
<Root>
   <TopTab>
     <Text>Model with large value count:  {data.filter(m => m.value > 5).length}</Text>
   </TobTab>
   <ListScreen>
      {data.map(itemData: model, index: number) => (
          <Item 
             key={itemData.id} 
             itemData={itemData} 
             onClick={() => setEditItem(itemData)}
          />
      )}
   </ListScreen>
   {!!editItem && (
       <EditScreen itemData={editItem} />
   )}
   <BottomTab data={data} />
</Root>
```

Let's assume it's EditScreen:

```javascript
const [model, setModel] = useState(props.itemData);

<Input 
   value={model.value}
   onChange={(value) => setModel({...model, Number(value)})}
/>
<Button 
   onClick={() => {
       callSaveApi(model).then((resp) => {
           setModel(resp.data);
           // let other components know that this model is updated
       })
   }}
/>
```

How can I let `TopTab`, `BottomTab` and `ListScreen` component to update data 
  - **without** calling API from server again and
  - not passing `updateData` function as props

I'd like to fire an event (e.g. "model-update") with an argument (changed model) and let other components subscribe to that event and change their data.

Is it possible using React hooks?

**How to implement event-driven approach in React hooks?**

Please let me know your opinions. Leave comments here or help me in [Stack Overflow](https://stackoverflow.com/q/62827419/11792577)!

{% stackoverflow 62827419 %}
YouTube Video | Create a twitch clone using React -3
Tags: react, webdev, showdev, youtube
Published: 2020-07-10 04:33:34

This video is from my YouTube channel — **The Web Dev**. 

Here, we will create a clone of the popular streaming service [https://www.twitch.tv/](https://www.twitch.tv/) using ReactJS.

In this part , we will first add **Redux Devtools Extension** and then **Redux Form**.

{% youtube l49YJ32KJ38 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Javascript 30
Tags: javascript, challenge, wesbos
Published: 2020-07-10 04:24:24

Me he propuesto terminar el reto de Javascript 30, una serie de ejercicios realizados por Wes Bos.
Este Reto puedes encontrarlo tanto en la [página oficial](https://javascript30.com/) como en su canal de youtube en la siguiente [lista de reproducción](https://www.youtube.com/playlist?list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH).

Estos retos son realizados solo ocupando HTML, JS y CSS.

La idea es que realice una publicación explicando sobre los temas que cada reto abarca, dando recursos para que profundices y donde yo me fui documentando. También les compartiré la liga del repositorio donde resolví cada ejercicio, espero su feedback!!!

Anímense a tomar el reto.

Cambio y fuera.
July 10th, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-07-10 04:00:35

It's that time of the week again.

So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Harleyquinn reading a book and drinking tea](https://media.giphy.com/media/Wp0ZtQjgViqR2/giphy.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-39dp %}

<center>

![Kid riding flying animal in the Neverending Story movie](https://media.giphy.com/media/cOB8cDnKM6eyY/giphy-downsized-large.gif)

</center>
Organising Cat Videos using Python
Published: 2020-07-10 03:41:23

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

After learning Python yesterday, I thought that It would be best to solidify my learning by building something useful. One issue I had over the week involved compiling around 500+ videos for my kittens birthday celebration. After organising the first 10 videos by month, I was already fed up.

![Alt Text](https://miro.medium.com/max/1400/1*1SCpkxYqDFXDGwkBm1_oiw.png)

To my attention, I realised that I could actually make a script in python to go through these videos much faster. Using the *GetFileInfo -d yourfile.mov*, I realised that I could actually get the unique month and year that the file was created in.

![Alt Text](https://miro.medium.com/max/836/1*tB9gbBmOfANSoE0rt6ZBqw.png)

Now, comes the part where I have to use Python

```

import os, shutil 
from datetime import datetime

filepath = "/Users/alfietorres/Downloads/"      #base file path 
for filename in os.listdir(filepath):           #iterate through each file in the directory

    r = os.stat(filepath+filename)              #look for the file path and the file name
    d = r.st_birthtime                          #look for the time created 
    date=datetime.fromtimestamp(d)              #assign the details to a date variable

    month_directory = filepath+str(date.month)+"-"+str(date.year)      #use the date variable to create a UNIQUE new directory 
    file_being_moved = filepath+filename        #file the path of the file being moved    

    if os.path.isdir(month_directory) :         #check if the directory is created
        print("directory found ... ")
        shutil.move(file_being_moved,month_directory)   #move the file we are iterating on to the directory
    else: 
        print("creating directory ... ")        
        os.mkdir(month_directory)                       #create new directory 
        shutil.move(file_being_moved,month_directory)   #move items in new directory

```

Essentially, we have a for each loop going through each file in the downloads directory.

Afterwards, we find the month-year of that file and check if has already been created.

If the new directory has already been created, then all we have to do is move the file.

If it has not been created then we will create a new directory and move the file into that directory.

After running the file, we get the following output (voila). Now you have an organised list of new directories. You can even add new videos in the Downloads directory and run the script again to reorganise the files.


![Alt Text](https://miro.medium.com/max/1400/1*9A7p5-yINf2SLB_7t0ggNQ.png)
IoT and the Power Platform 
Tags: ama, powerfuldevs, powerplatform, iot
Published: 2020-07-10 02:13:55

--- 
title: IoT and the Power Platform 
published: true
description: In this session, Samuel Adranyi will be showing how to control, monitor and automate IoT devices, events, and services using the Microsoft Power Platform.  
tags: ama, powerfuldevs, powerplatform, IoT 
Additional Resources: IOT session
DevTo: https://aka.ms/PowerIOT

--- 
<hr /> 
  
#### #PowerfulDevs Conference 
  
`RSVP HERE BY JULY 15:` 
[https://aka.ms/powerfuldevsconf](https://aka.ms/powerfuldevsconf) 
  
The [Powerful DEVs Conference](https://aka.ms/powerfuldevsconf) is the first virtual conference of its kind. We will showcase how developers can leverage the Power Platform to build applications faster and with far less effort. Connect with industry-recognized ProDev influencers, Microsoft Cloud Advocates, trusted and diverse community leaders, and members of the Power Platform Team. 
  
`BOOKMARK THIS FOR RESOURCES AND DISCUSSION WITH SPEAKERS`  
{% link https://dev.to/azure/powerfuldevs-office-hours-56in-temp-slug-6485049?preview=cc69e2f8c41d424af2297070e6c440e5cf2fe24334a957a51ecf89c60cd7e730b61913de9fb2d3478de917ed81906e4388db9ef9dafd63a52f359337 %} 
  
Revisit this page during the event to engage in live (and post-event) discussions on those topics with both speakers and community. The speakers will be here for a live Q&A for at least 30 minutes immediately after their session concludes. After the event, come back to find additional slides, videos, and resources for this session. 
  
<hr/> 
  
## About This Session: 
  
`July 15, 2020: 10:30 PDT – 10:55 PDT` 
  
In this trilling session, I will be showing you how to control, monitor and automate IoT devices, events and services using the Microsoft Power Platform. 

## About the Speakers: 
  
Samuel Adranyi is a Microsoft MVP, MCT Software Engineer, Technology Advocate and community leader. Follow [@sadranyi](https://twitter.com/sadranyi) on Twitter.
Simon
Tags: codepen, javascript, html, css
Published: 2020-07-10 01:57:24

Online remake of memory testing gaming device known as Simon. Built entirely using vanilla HTML, CSS and JavaScript.

Play this same game online at [https://cymon.netlify.com](https://cymon.netlify.com)

{% codepen https://codepen.io/mehtapratik/pen/OJMZjvp %}
Manage Dependencies With Go Modules
Tags: go, tutorial, video
Published: 2020-07-10 01:45:53

{% youtube 9cV1KESTJRc %}

Managing dependencies in go used to be a mess. There were about 3-4 widely used packages to manage dependencies, which sometimes made it weird to work on another code base that used a different dependency management tool.

Finally in 1.11, go included its own dependency management tool called go modules. Go modules is now the standard way of handling your go project's dependencies.

In this video, I go a brief run down of how to add dependencies to your project, get a better understand of why certain packages are being included, and how to trim old dependencies out of your project.

Check it out and let me know what ya'll think. Any feedback is greatly appreciated.

If you liked it and want to know when I post more, be sure to [subscribe] (https://www.youtube.com/channel/UCTHij3Ac5GizLsn5yB4IX_Q?sub_confirmation=1) and thank ya'll again for your time!
slow mongo queries
Tags: mongodb, mongod
Published: 2020-07-10 00:43:06

---
title: slow mongo queries
published: true
description: how to deal with mongo high cpu and long running queries
tags: mongodb, mongod
//cover_image: https://direct_url_to_image.jpg
---

You can find long running mongo queries with this
```
db.currentOp({"secs_running": {$gte: 20}}) 
```
That will list current operations that have been running at least 20 seconds and longer.

Look at that list that returns and find opid out of each element. Also read each element some of the queries there could be system processes (or at least it looked like it for me).

Then for each opid you want to kill run this
```
db.killOp(<OPIDHERE>);
```
The opid in my case was an int (a big one) so an example of what it looked like was this:
```
db.killOp(231321);
```
That should save you some reboots or service restarts!
A Nifty Way to do Basic Argument Validation
Tags: javascript
Published: 2020-07-10 00:42:04

Here's a clean way to validate function parameters:

```js
 // Define an exception fn
function throwRequiredErr() {
  throw new Error('Argument required!');
}

// Custom function with exception fn as default param
function greet(person = throwRequiredErr()) {
  console.log(`Hello ${person}!`);
}

// Calling greet w/out arg will throw the exception
greet(); // throwRequiredErr is called and execution pauses

greet('Oliver'); // Logs 'Oliver'

// Note some edge cases:
greet(undefined); // Throws error
greet(false); // No error
greet(null);// No error
```

Essentially, we can create an exception function that we set as a default parameter to our custom function. If a person argument is supplied to our function then it will proceed as normal. However, if person is undefined, the exception fun will execute, throw the error, and pause execution.

Now no one can screw up their greeting! 👋

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!