teleren/devto huggingface dataset:
How to use Object.freeze() in Javascript
Tags: javascript, webdev, react, tutorial
Published: 2020-10-16 21:18:34

In Javascript, objects and arrays are mutable, primitive values are not. This means we can change an object (or array) anytime we want. But what if for some reason we want to stop this from happening and make the object immutable?

One way we we can achieve this is by using the `freeze()` method.

>*A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.*

Some code illustrating the usage of this method would look something like this:

```javascript
const objectExample = {
  prop1: 42,
  prop2: "Jack"
};

// by default, we can modify the object's properties as we want
objectExample.prop1 = 100;
console.log(objectExample.prop1) // prints 100

// now let's freeze the object
Object.freeze(objectExample);

objectExample.prop2 = "Alice" // will throw an error in strict mode but fail silently in non-strict mode

console.log(objectExample.prop2); // prints "Jack", since we couldn't change the value of the prop
```

Something to keep in mind is that if the `frozen` object has properties with objects as values, those objects can be changed unless we also froze them. This means we only achieved a `shallow freeze`. To make objects immutable by freezing all their properties, including the ones that store other objects as values, we must do a `deep freeze` - that is freezing the children objects before freezing the parent object, using `recursion`. 

The function below is just and example. You can name yours as you wish. Be careful when freezing objects as values of properties so you don't freeze something that shouldn't become immutable. 

```javascript
const theObject = {
  x: 1,
  z: 2,
  y: {
    a: "Hello",
    b: "World"
  }
}

const deepFreeze = (obj) => {

  const propNames = Object.getOwnPropertyNames(obj)

  for (const name of propNames) {
    const value = obj[name];

    if (value && typeof value === "object") { 
      deepFreeze(value);
    }
  }

  return Object.freeze(obj);
}

deepFreeze(theObject);
theObject.y.a = 456; // the value can't be changed
console.log(theObject.y.a ); // Hello
```

*Image source: Caspar Camille Rubin/ @casparrubin on Unsplash*
Open source contribution
Tags: hacktoberfest
Published: 2020-10-16 21:17:22

## That's my first time experience on Hacktoberfest

Really Amazing experience to contribute on someone project, the interesting part is just analyzing the project work and find any mistakes whether it was from Readme, code, document, anything else.
Obviously correct that mistakes if found anyone by sending the pull request, because it helps to somebody to know easily about them because they wanted to use this project.
My #100DOC - Day 51
Tags: 100daysofcode, challenge
Published: 2020-10-16 21:10:43

### Day 51: October 16, 2020

#### **Today's Progress**: 
1. **[Redesign of my portfolio](https://github.com/pablohs1986/pablohs1986.github.io)** (2h):<br>I ended with works section and implemented Typed.js on header and about section.
    
#### **What I learned**: 
* Implement and beautify Bootstrap modals.
* Review of setting up Typed.js. 

#### **Total time**:
2h.
Facebook feed has a buggy algorithm! 
Tags: android, devops, webdev, 100daysofcode
Published: 2020-10-16 21:09:25

Post #10

Talking about news feed algorithm of facebook. I'll start with a bug first and then the actual topic. 

The Bug: When you accidentally or deliberately click some feed which you really not looking for then FB's model takes this as a new parameter and starts rendering posts accordingly onwards and no doubt same model is being used by Instagram 
 
This actually not a bug because its after all a machine which listen to our written commands but accidents should not become a "feature" that's the goal 

Feed Logic: suppose you have thousand friends and they post 10 posts a day then it becomes 10k post a day for your visits right. 

Do you have enough time to see all those posts? Ofcourse not for me! 

They first measure every post and rank them based on content, category and instant reach and finally set them with a rank number(not primary key). it's a total independent batch job 

Once that step finished, it starts serving posts using "order by {rank} DESC" 

Now the interesting point: suppose one of my friend posted a technology post and it appears on top of my feed however theres 9999 already.

This is because of prediction algorithm they have been working for long. They use hundreds of parameters from our activities and form almost a virtual personality of ours. That virtual personality is nothing but a json object which represents us and tells Facebook database what I'm looking for and that's where accident becomes another feature to that virtual personality 

(Image attached has the chief architect of Facebook feed algorithm with the team at Menlo park)


Thanks for reading 😊
First Project
Published: 2020-10-16 21:02:00


	    
	    Holy cow, the amount I have learned in the last Five weeks
	is crazy. Six weeks ago i knew id be here, but just thnking 
	it, and actually being there is two completely different feelings.
	over the next few weeks I will know the basic skills of being a 
	full stack developer, and it is mind boggling. I am so beyond 
	excited, but the pure mental and physical tiredness is slightly 
	hiding that haha. I just keep picturing life in a year, and 
	where i'll be, shoot at this point in time, where the world 
	will be, but I know I will be in a place that I will be proud
	of all the work being put in now.
Neuralink: behind the scene 
Tags: webdev, python, opensource, discuss
Published: 2020-10-16 20:57:34

Post #9


Neuralink! Behind the scene! 
(🎭 //Personal Opinion// 🎭)


If Stephan Hawkins was right about AI then this chip could be considered as starter. What Elon musk claim is different thing because it's not a practical outcome yet. What I presume based on my study about neuralink is different:

1️⃣ neuralink project perhaps inspired by 2014's kingsman the secret service movie where Sam L. Jackson plays bad guy who control every brain using a cellphone chip 

2️⃣ recently trump helped musk to relocate Tesla workshop to Texas which triggers nothing but sense of collaboration(skip it)

3️⃣ neuralink chip both receives and transmits electronic signal and as we all know, nothing is hack proof if electron is the medium 

4️⃣ I dont think just a chip can fix alzheimers disease by passing electrical signal without operation. This phase is completely inspired by "the matrix" series where Keanu Reeves aka the neo gets his brain injected by cables 

5️⃣ scienc has been able to decode brain signal into computer command already. Now if this neuralink goes well all over in America, politicians will see only one thing : use this chip to get all votes and this is inevitable because the chip is inside your brain which is tempering with the neural signal you receive or release 


Thanks for reading. Please do share your thought 😊
How Hacktoberfest helped me in getting started with opensource!
Tags: hacktoberfest, codenewbie
Published: 2020-10-16 20:46:02

## What I Learned From Hacktoberfest
###
Hello Everyone, Before participating in this event, I used to have basic knowledge about GitHub. After participating in Hacktoberfest, I learned many things related to Git-hub and also contributed to some repositories. I'll be continuing my contribution to the Open-Source in the future too. It is a great opportunity where students can brush up their technical skills along with building their Team player capabilities. My interest in Open Source is growing day by day. And this is just beginning only.
<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
Debate: Symfony VS Laravel 
Tags: discuss, php, opensource, webdev
Published: 2020-10-16 20:44:56

I have used both framework and symfony looks robust and simple while laravel is like a big truck.

Laravel vs symfony is much like comparing python vs golang where python is adopted by big community and golang is not but when it comes to robustness and efficiency, golang beats python.

Let's debate on this🤝
AWS EC2 Explained in Comic Conversation Way
Tags: aws, tutorial
Published: 2020-10-16 20:34:58

Here I've explained AWS EC2 which is one the most important and fundamental service of AWS Cloud in a comic conversational way.

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

I hope you guys liked it and found it useful.

You can view other graphics in the series here - http://cloudforgeeks.com/why-ec2-comic-answer/
Mockups
Tags: mockup, smartphone, app
Published: 2020-10-16 20:27:21

Today I want to share three cool free mockup websites.

## 1. mockup.photos

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

On this Site you can simply create mockups for a lot of different cases. And you can't pay for mockups, you only have to create an account.
[Go to Website](https://mockup.photos)

---

## 2. smartmockups.com

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

Here you can create mockups easy as well, without creating an account. The common basic mockups are for free. But there are also premium (paid) mockups too.
[Go to Website](https://smartmockups.com)

---

## 3. mockuphone.com

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

For those how only want to create phone/device mockups with transparent background, this website is perfect for you.
[Go to Website](https://mockuphone.com)
JavaScript Mixins
Tags: javascript, oop, codenewbie, webdev
Published: 2020-10-16 20:23:41

My tumble down the rabbit hole continues. This week I have been focusing on object oriented programming concepts in JavaScript. Having learned Ruby as my first language, I found that I was able to pick up and understand the JavaScript approach to OOP without too much difficulty. One such concept that I found to be especially useful were mixins.

So what are mixins exactly? Well, in a nutshell, a mixin is a class containing methods that can be used by other classes without a need to inherit from it. For example, if you are working with unrelated objects inheritance is probably not the best solution. Let's say you have a cheetah object, and a trackStar object. They both can run, but they are not the same species. So if you wanted both of these objects to be able to use the same run function, a mixin would serve you well. The reason for this is because mixins allow unrelated objects to use the same collection of functions.
```
let runMixin = function(obj) {
  obj.run = function() {
    console.log("Running fast!");
  }
};
```
The runMixin takes in any object that you pass into it and gives it the run method.
```
let cheetah = {
  name: "Chester",
  topSpeed: "80 mph"
};

let trackStar = {
  name: "Steve Prefontaine",
  homeTown: "Coos Bay, OR"
};

runMixin(cheetah);
runMixin(trackStar);
```
We pass in the cheetah object and the trackStar object. They both get assigned the run function. We can now call the run function on either unrelated object resulting in both objects now being able to run fast.
```
cheetah.run(); // prints "Running fast!"
trackStar.run(); // prints "Running fast!"
```
So a mixin is basically a class that that contains methods for other classes to use.

I hope this post has shed some light on how to use mixins in JavaScript. OOP in JavaScript is a vast topic that I encourage you all to explore more deeply. The more I learn about JavaScript, the more I appreciate just how powerful it is.
Como Verificar Itens Duplicados no Array no MongoDB
Tags: tecnologia, database, mongodb
Published: 2022-03-31 20:57:04

---
title: Como Verificar Itens Duplicados no Array no MongoDB
published: true
date: 2020-10-16 20:19:41 UTC
tags: Tecnologia,database,mongo,mongodb
canonical_url: https://marquesfernandes.com/tecnologia/como-verificar-itens-duplicados-no-array-no-mongodb/
---

 ![](https://marquesfernandes.com/wp-content/uploads/2020/10/f0c6acff24bc794-150x150.png)

Se você tem uma collection grande e precisa descobrir se existem items com valores duplicados dentro de um array. Esse problema algum dia provavelmente irá acontecer com você, mas não se preocupe! Para verificar se há duplicatas em um array, usaremos o `.aggregate()` no MongoDB.

Vamos criar uma coleção com documentos de exemplo, primeiro inserimos um registro de teste:

```
db.demo.insertOne({"assunto":["MySQL","MongoDB","Node", "MySQL"]});
```

Depois vamos inserir mais um registro com um item duplicado dentro do nosso array de assunto:

```
db.demo.insertOne({"assunto":["Java","C+","Node", "C+"]});
```

E agora apenas para teste, vamos inserir um registro sem nenhum item duplicado:

```
db.demo.insertOne({"assunto":["JavaScript","C#","Python"]});
```

Agora exiba todos os documentos da nossa coleção com a ajuda do método `.find()`

```
db.demo.find();
```

Isso produzirá o seguinte resultado:

```
/\* 1 \*/ { "\_id" : ObjectId("5f89f5da526ef077555fe4aa"), "assunto" : ["MySQL", "MongoDB", "Node"] } /\* 2 \*/ { "\_id" : ObjectId("5f89f718526ef077555fe4ab"), "assunto" : ["Java", "C+", "Node"] } /\* 3 \*/ { "\_id" : ObjectId("5f89f71f526ef077555fe4ac"), "assunto" : ["JavaScript", "C#", "Python"] }
```

Usaremos o método `.aggregate` para consultar e verificar se há duplicatas em uma matriz nos documentos da nossa coleção:

```
db.demo.aggregate([{"$project": {"assunto":1}}, {"$unwind":"$assunto"}, {"$group": {"\_id":{"\_id":"$\_id", "Name":"$assunto"}, "count":{"$sum":1}}}, {"$match": {"count":{"$gt":1}}}, {"$group": {"\_id": "$\_id.\_id", "assunto":{"$addToSet":"$\_id.Name"}}}])
```

Você deve esperar o seguinte resultado:

```
/\* 1 \*/ { "\_id" : ObjectId("5f89ff1f526ef077555fe4b0"), "assunto" : ["MySQL"] } /\* 2 \*/ { "\_id" : ObjectId("5f89ff24526ef077555fe4b1"), "assunto" : ["C+"] }
```

O post [Como Verificar Itens Duplicados no Array no MongoDB](https://marquesfernandes.com/tecnologia/como-verificar-itens-duplicados-no-array-no-mongodb/) apareceu primeiro em [Henrique Marques Fernandes](https://marquesfernandes.com).
Generating Django QuerySet filters from oso policies
Tags: django, python, security, webdev
Published: 2020-10-16 20:05:17

We're building an open source policy engine for adding access control (permissions, roles, etc.) to apps, called oso. oso policies are declarative, and enable users to cleanly separate authorization logic from the rest of their application code.

In our latest release of django-oso, we added functionality to enforce authorization policies directly on Django QuerySets. The declarative policy is translated into filters that can be understood by the Django ORM, in a way that is fully abstracted from the library user. In the future, we'll be adding support for SQLAlchemy and other Python ORMs.

We wrote about it in this blog post: https://www.osohq.com/post/django-list-view 

Cleanly separating an authorization policy from other application code can be challenging, especially when authorizing a collection of objects, often necessary in list views. This feature makes it possible to enforce authorization as a filter when querying the application data store while still taking full advantage of the declarative policy provided by oso.

This functionality is in preview in the 0.3.0 release of django-oso: https://pypi.org/project/django-oso/

Install via pip: pip install django-oso

Let us know what you think in our Slack channel or on this thread! https://app.slack.com/client/T017ZS940LR
Feature: Vue 3 script setup
Tags: vue, javascript, typescript
Published: 2020-10-16 19:27:15

I have been doing a lot of Vue.js in the last 6 months and I need to say Vue is awesome.

I am coming from “React ❤️ world” but with the release of [Vue 3](https://v3.vuejs.org/) and composition API, writing code in Vue or writing code in React is pretty much the same.

What I want to share today is a RFC that will bring even more love for Vue from React world.

# Welcome `script setup`

What is `<script setup>` ? What are we talking about here ?

We talk about a compile step for `<script />` tag to improve the authoring experience when using the Composition API inside Single File Components.

Lot’s of words 😄, let me give you an example. Let’s say we have this component:

```vue
<template>
  <button @click="inc">{{ count }}</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inc = () => count.value++

    return {
      count,
      inc,
    }
  },
}
</script>
```

As you can see we have our `count` ref and we export it to the `<template />` by return it in the `setup()` method.

This is pretty clear when you have few exports or one function but when the component becomes bigger and you have 10 exports or more that return becomes **BIG** 🤯 pretty fast.

This is where `<script setup />` can help, you don’t need to return anything or use setup function. The code looks much cleaner and nice.

```vue
<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
  import { ref } from 'vue'

  export const count = ref(0)
  export const inc = () => count.value++
</script>
```

Isn’t that a piece of beauty ? ❤️ 🤩 🥳

Just export what you use in template using `export` keyword and you are done.

# With Typescript

But what convinced me to use this and made me love this even more is the integration with Typescript, look at next example and how you define your props:

```vue
<template>
  <button>{{ computedMsg }}</button>
</template>

<script setup="props" lang="ts">
import { computed } from 'vue'

declare const props: {
  msg: string
}

export const computedMsg = computed(() => props.msg + '!!!')
</script>
```
Look at those props 🤩 

If you want to lean more on what is supported and how to use this please check the [official page](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md) where you can find easy to read examples for all cases.

# Thank you so much for reading!

If there is anything I can do to help, please reach out. Check out my [blog](https://ghalex.com/) for more articles.

Have a nice day!
Hacktoberfest completed
Tags: hacktoberfest
Published: 2020-10-16 19:13:12

## What I Learned From Hacktoberfest
I am pleased to have finished Hacktoberfest 2020, at first I doubted myself, I had never made any contribution to open source before and fear stopped me. But with effort and dedication I was able to finish the 4 PR and a little more.

Things I learned throughout the hacktoberfest:
* Create Branch from a forked repository.
* Make a Pull Request to resolve any bug or any required improvement in a repository.
* Contribute to open source.
* Acquire more knowledge.

#### Enjoy the experience very much


<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
What is Developer Relations? An Interview with Twilio Developer Evangelist @LaylaCodesIt
Tags: career, learning, developer
Published: 2020-10-16 19:09:47

---
title: "What is Developer Relations? An Interview with Twilio Developer Evangelist @LaylaCodesIt"
published: true
description: "As I explore options for the next phase of my career, I've grown more and more curious about the emerging role of developer advocates in the software engineering world. In this interview, I discuss the role with Layla, a developer evangelist for Twilio."
tags: career,learning,developer
canonical_url: https://fct.dev/posts/what-is-developer-relations-an-interview-with-twilio-developer-evangelist-layla-codes-it
---
As I explore options for the next phase of my career, I've grown more and more curious about the emerging role of developer advocates in the software engineering world. 

In this interview, I discuss the role with Layla, a developer evangelist for Twilio. Layla has her own [livecoding stream on Twitch](https://www.twitch.tv/laylacodesit), is a Microsoft MVP, and was recently elected to the board of the .NET Foundation.

## Watch the Interview

{% youtube OyE5B4PbrOA %}

## What We Covered

- Layla's unique path into software development 
- What Developer Relations "is" and the two big roles: advocate and evangelist (and how they differ)
- How Twilio built an advocate-centric business around a large team of developer relations specialists
- Various approaches to developer advocacy content creation from documentation to live streaming on "official channels" vs person channels, etc.
- The role of developer AMBASSADORS - community members who are passionate about a product and are then supported by the company

And MUCH more.

## What are your thoughts or questions about DevRel?

This is an exciting niche within the software development world. I feel like I was built for it in a lot of ways, and I'm definitely curious to meet more developer advocates/evangelists and hear about their experiences!

I also really liked getting to have a conversation with a developer who's daily work life is so different from my own. May do more of these.

([Follow me on Twitch](https://twitch.tv/fitzycodesthings) to catch 'em live when I do. 😁)

Until next time! 
\- John
Shipped using Mailchimp’s free plan without writing any code
Tags: workstations
Published: 2020-10-16 19:02:42

So, a couple of weeks back, I shipped a product(https://www.setuphomeofficepro.com/workspace-setups) on Product Hunt made using MailChimp alone.

Right from the website hosting, landing page creation, collecting leads, and sending newsletters were taken care of by Mailchimp’s Free plan (less than 2000 subscribers). All it took was a couple of hours and a few cups of coffee.
Hactoberfest 2020 experience and review
Tags: hacktoberfest
Published: 2020-10-16 19:02:33

## What I Learned From Hacktoberfest

This is the first time I came to know about it and participated. I saw this as a two way opportunity, I can get go with quality pull requests and also I was super excited to win the goodies!! The journey and the wait period was super enthusiastic. Great place to be. Thanks Hactoberfest! Looking forward to the next year.
#I_SUPPORT_OPENSOURCE.
I open-sourced a portfolio template built with React and Tailwind!
Tags: javascript, opensource, react, css
Published: 2020-10-16 18:58:06

Hey there! 👋

After learning the fundamentals of TailwindCSS in just a couple of days, I **published and open-sourced** a simple portfolio template! 👇

![Screenshot of webpage](https://i.ibb.co/vxKrmwD/Frame-1.png)

🌐 Live demo: https://braydentw.github.io/react-tailwind-portfolio
🐱 Github Repository: https://github.com/BraydenTW/react-tailwind-portfolio

---

Best of all, **completely free to use** for any of your personal projects.

It is much appreciated 🤗 if you give this a ⭐ [on Github](https://github.com/BraydenTW/react-tailwind-portfolio).

Have a wonderful weekend!