teleren/devto huggingface dataset:
State VS props 🤔
Tags: javascript, programming, react, webdev
Published: 2022-05-20 19:24:20

Primero que nada, debemos saber que <u>props</u> es la abreviatura de _"properties"_. Esto nos hace hace ver todo más simple, desde mi opinión. 

Ahora bien, ¿cuál es la diferencia entre <u>state</u> y <u>props</u>?

Se podría decir que _props + state _son los datos de entrada para la render() función de un componente.

Sin embargo, props se pasa **_al componente_** (similar a los parámetros de una función) mientras que state se administra **_dentro del componente_ ** (similar a las variables declaradas dentro de una función).

**Las props** son la configuración de un Componente. Se reciben desde arriba y son inmutables en lo que respecta al Componente que los recibe.

Ejemplo (código de React Guide ):

```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);
```

**El estado** comienza con un valor predeterminado cuando se monta un Componente y luego sufre mutaciones en el tiempo (principalmente generadas por eventos de usuario). 

Ejemplo (código de React Guide ):

```
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);
```

Si bien props y state ambos contienen información relacionada con el componente, se usan de manera diferente y deben mantenerse separados.

Fuentes de información:

[]()https://es.reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props
[]()https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
[]()https://lucybain.com/blog/2016/react-state-vs-pros/
Appwrite Community Report #7
Published: 2022-05-20 19:10:26

Greetings from the Appwrite team! 👋

We are back with our weekly updates. This week we have some amazing announcements, more details unfold inside. 👀

Before we dive right into the report, we extend our gratitude to the community and 22k star-gazers on GitHub! 🙏🏽


**TLDR; Appwrite 0.14** is the new talk of the open-source town, as we introduced some cloud functions, some new features and more. We also have Appwrite on YouTube, more learning resources and more goodness. Stay tuned till the end! 😉

---

### 📢  What’s new 

- Appwrite 0.14 with 11 Cloud Function Runtimes 🤩
https://github.com/appwrite/appwrite/discussions/3240
- 3 weeks into the OSS fund, and we have already received some amazing responses. 🤩
If you would love some support, Appwrite is here to help! Submit your application to - {% embed https://appwrite.io/oss-fund %}

---

## ✅ Issues solved

With the 0.14 release we have integrated some feature requests from the community, worked to remove existing bugs and introduced new features: 

- Fixed scheduled Cloud Functions execution with CRON job
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3245)

- Fixed missing runtime icons
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3234)
- Fixed Google OAuth
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3236)
- Fixed certificate generation when hostname was set to 'localhost'
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3237)
- Fixed installation overriding default environment variables
🔗 [Link to PR](https://github.com/appwrite/appwrite/pull/3241)

More details can be found [here](https://github.com/appwrite/appwrite/blob/master/CHANGES.md).

---

## ⚒️ What we’re currently working on

- Appwrite is working towards v.10 and the cloud launch, which is why we are launching the [State of the Appwrite Community](https://7nxwryuitoy.typeform.com/soac-survey?utm_campaign=The+Appwrite+Monthly&utm_medium=email&utm_source=Revue+newsletter&typeform-source=digests.appwrite.io) survey to gather inputs and feedback.

**P.S** - 5 random survey submissions will be selected for a $100 Amazon Gift Card or equivalent Appwrite swag credits. 

- Fixing a failing Zoom OAuth
- Adding Rust platform support in Appwrite 

---

## 🗣 Discussions

- Creating a Helm chart for Appwrite, what do you think about it?

🔗 [Join discussion here](https://github.com/appwrite/appwrite/issues/24)


---

## 📘 Resources

- Building a blogging site with Hugo and Appwrite - {% embed https://dev.to/appwrite/building-an-open-source-blogging-platform-with-appwrite-and-hugo-2hf7 %}
- Built some cool solutions with Appwrite? Be sure to drop them [here].(https://github.com/appwrite/awesome-appwrite)
- Appwrite is on YouTube, did you check our installation video yet?
{% embed https://youtu.be/aO4mw8smXkI %}
- 30 days of Appwrite is now updated, [have you checked them out already](https://30days.appwrite.io/)?

---

## 🙌 Credits
- Community member @devenrathod made a [GitHub stargazer app for us](https://appwrite-stars.vercel.app/).
Let's get one thing straight: Code is read by humans, interpreted by machines
Tags: beginners, tutorial, programming, productivity
Published: 2022-05-20 18:51:05

It doesn't matter how eloquent your code is or how you turned a bunch of code into a one-liner. If you are the only one who can read the code, have someone else go find a manager or executive...because it's their problem now.

Spell. Out. Your. Code.

Make it readable. Add comments, abstract it out into functions that read like a sentence.

Because at the end of the day, humans have to maintain it. Machines interpret it. So as long as the logic is sound, make it easy and pleasant to read.
Multi Stage Docker builds with Angular and Nginx
Tags: angular, docker, nginx, javascript
Published: 2022-05-20 18:44:03

This blog post shows multi stage Dockerfile that builds and deploys Angular app in Nginx container
{% gist https://gist.github.com/pavankjadda/a100287638518145ae932fac36f92add %}
The above Dockerfile has 2 stages

- Stage 1 - Install NPM dependencies and builds Angular project

- Stage 2 - Builds docker image from dist directory generated by previous stage

# Stage 1: Install dependencies and Build Angular project

- We use Node 16 alpine image to build the project and it accepts CONFIGURATION build argument. You can override this during build based on your environment
```
docker build --build-arg CONFIGURATION=dev .
```
and you can also define as many arguments as you like
- Then make `/app` as working directory. All of the source code and files will be copies to /app directory inside Node container
```
WORKDIR /app
```
- Copy the **package.json** file to **/app** directory. This will enable Docker to cache the node_modules rather than building from scratch and sub sequent builds use these when package.json file is unchanged.
```
COPY package.json .
```
- Install dependencies using npm install command and specify flag `—-legacy-peer-deps` to prevent build errors in NPM 7+
```
RUN npm install --legacy-peer-deps
```
- Then copy the source code and build the project using npm run build
```
COPY . .
RUN npm run build --  --output-path=dist --configuration=$CONFIGURATION --output-hashing=all
```
- The built code will be present in `/app/dist` directory in Node container

# Stage 2: Build Docker image

- We use NgInx alpine stable image to serve Angular application in production

- Remove existing HTML content using the command
```
RUN rm -rf /usr/share/nginx/html/*
```
- Copy the Nginx config file from source to `/etc/nginx/nginx.conf` directory. If you don’t have one, you can use the below one
{% gist https://gist.github.com/pavankjadda/fb3caddfbb6f43a37c7e02fffc05e07a %}
- Then Copy dist folder from build stage to nginx public folder
```
COPY — from=builder /app/dist /usr/share/nginx/html
```
- At the end specify the NgInx start command. That’s it.

---
You can also split Stage 1 into two separate stages. One to install dependencies and the second one to build the Angular app :)
Recursion - Own Power function
Tags: python, recursion, beginners
Published: 2022-05-20 18:14:06

In this post I'm going to write my own power function in python which will perform like pow(x,n) in Py3 

```
# Power function using recursion -> 

def power(num,exp):
    if exp==1: 
        return num 
    return num*power(num,exp-1)
 
print(f"The value is {power(5,3)})

``` 
`output - 
The value is 125`
Do you want to work with Microsoft and students?
Tags: azure, webdev, career, datascience
Published: 2022-05-20 17:57:46

---
title: Do you want to work with Microsoft and students?
published: true
description: check out these interesting roles on Data and App dev
tags: azure, webdev, career, datascience
cover_image: https://docs.microsoft.com/en-us/learn/media/student-hub/overview.png
---

Hey friends. My team is hiring, West Coast and East coast US.

> If helping users, sharing what you know, is what you love doing, then this could be a great next step in your career.

## Cloud Advocate App dev - US West Coast, 

Visual Studio Code, GitHub, Azure APIs Containers, Notebooks and more.

> https://aka.ms/nextgen-west

### What's in it for you:

It's Microsoft, you get to work advocating on behalf of the user on a number of great products like Visual Studio Code, GitHub, Azure APIs Containers, Notebooks.


## Cloud Advocate Data and Data science - East Coast 

SQL, No SQL, ETL, Data pipelines and general use, Azure SDKs, APIs

> https://aka.ms/nextgen-east

### What's in it for you:

You get to improve the experiences for Data and Data science professionals across our products and work with SQL, No SQL, ETL, Data pipelines and general use, Azure SDKs, APIs.

## Our audience

> Our audience are students and Faculty and we're looking for ways to make them feel welcome, guide them, and make sure they succeed using all our tech.

Also, you get to work with Lee Stott and Anthony Bartolo trust me, that's a bonus in itself :)
Python Multiple Inheritance – Python MRO (Method Resolution Order) in 1 minute
Tags: python, beginners
Published: 2022-05-20 17:56:42

Python is a highly Oriented-Object Language. It means that everything in Python is an object, making it relatively easy to build OOP logic with Python. 

If you are doing Multiple Inheritance, you should know of **Python Method Resolution Order**. 
Before diving into the concept, let's quickly remind you how to write a class with multiple parent classes. 

To make a class inherit from multiple python classes, we write the names of these classes inside the parentheses to the derived class while defining it.

We separate these names with commas.

```python
class Animal:
    pass

class Bird:
    pass

class Duck(Animal, Bird):
    pass
```

Let's explain Python MRO now.

## Python MRO (Method Resolution Order)

An order is followed when looking for an attribute in a class involved in multiple inheritances.

Firstly, the search starts with the current class. The search moves to parent classes from left to right if not found.

Let's retake the example and add some attributes. 

```python
class Animal:
    pass

class Bird:
    bird_type = "wings"

class Duck(Animal, Bird):
    pass

duck = Duck()
```
`duck.bird_type` will look first in `Duck`, then `Animal`, and finally `Bird`. 

**Duck => Animal => Bird**

To get the MRO of a class, you can use either the __mro__ attribute or the mro() method.

```python
Duck.mro()
[<class '__main__.Duck'>, <class '__main__.Animal'>, <class '__main__.Bird'>, <class 'object'>]
```

If you have some questions regarding the concept, feel free to add comments.😁
Quick Javascript tip
Published: 2022-05-20 17:54:37

While developing a Textarea component in React with React-hook-form,
I needed to add two refs to the textarea field but it was a bit uggly so I tried to make that prettier:

Before:
```
<textarea
  ref={e => {
    textareaRef.current = e;
    registerRef(e);  
  }}
  ...  
/>
```

After:
```
<textarea
  ref={e => ((textareaRef.current = e), registerRef(e))}
  ...  
/>
```
Coffee Machine | Pure CSS
Published: 2022-05-20 17:50:26

In today’s tutorial, we create a coffee machine art with CSS that pours coffee when hovered over. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials. You can check them out [here](https://codepen.io/collection/RzpOqj). 

For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/mdXPpLX %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Analyzers in ElasticSearch
Tags: elasticsearch, database, beginners, computerscience
Published: 2022-05-20 17:44:28

It is important to understand how analyzers in ElasticSearch work to have an appropriate indexing strategy for your use-case. If you don’t choose a suitable indexing strategy, it would become complex to write queries for your use-case and the queries could end up being slow.

## What is an analyzer?

We can think of it as a pipeline. When a document is indexed in ElasticSearch, the string data of the document is given input to the pipeline and an output of terms is generated. These terms are then reverse indexed (as discussed in the previous blog).
![Analyzer pipeline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxp4z2qgmz6uzsidjwks.png)

## What is this pipeline made of?

This algorithmic pipeline contains 3 components.

1. Character filter
2. Tokenizer
3. Token filter

Each component does some specific operation on the string data and outputs it to the next component. Let’s discuss in brief what these components individually do:

### Character filter

This component can add, remove or modify the characters present in the string.

Let’s understand this through an example below.

HTML strip character filter:

Think of a use-case where you are storing html file contents as string data in ElasticSearch. This filter can remove all the HTML tags like `<b>`, `<h1>`, `<p>` from the input string data.
Example:
`<p>Ironman is flying<p>` would be modified to `Ironman is flying`
![Character filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pemm228egxvplckoyydv.png)

The modified string is then passed as input to the tokenizer.
 

### Tokenizer

A tokenizer takes a string and breaks it into multiple tokens. The logic based on which the string is broken down into tokens depends on the type of tokenizer you are using.

![Tokenizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rco2xgdt2e8lrvsd7ovm.png)
For example, a Whitespace Tokenizer would split the string whenever it encounters a whitespace in the string. `Ironman is flying` would result in tokens: [`Ironman`, `is`, `flying`]

The output list of tokens are then passed to the token filter.
 

### Token filter

This component adds, modifies or filters out the individual tokens generated in the previous step.

Let’s consider Edge-ngram token filter. This token filter takes each token and produces all the possible prefix substrings of the token.

![Token filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erfdgqfgrfmxcqui3dll.png)
[`Ironman`, `is`, `flying`] would generate following tokens:

[ `I`, `Ir`, `Iro`, `Iron`, `Ironm`, `Ironma`, `Ironman`, `i`, `is`, `f`, `fl`, `fly`, `flyi`, `flyin`, `flying`]


 

Note: The example presented here is very specific. There are many types of Tokenizers, Token filters and Character filters to use. You can construct a custom analyzer specific to your use-case.
Python - Leetcode : Day 1
Tags: leetcode, python
Published: 2022-05-20 17:43:28

leetcode -> 344 -reverse string 

## 344 - Reverse string - 

Write a function that reverses a string. The input string is given as an array of characters s.

You must do this by modifying the input array in-place with O(1) extra memory

sol 1 - Pattern 'Stack' - Using a stack DS , but it uses O(N) extra memory. 

sol 2 - 2 Pointer Approach - Using Two Pointers there is no need of Extra Memory 
time complexity -O(N)
space complexity -O(1)

## Code - 
 

```
class Solution:   
    def reverseString(self, s: List[str]) -> None:
        """
        Do not return anything, modify s in-place instead.
        """
        i,j =0,len(s)-1
        while i<j : 
            s[i],s[j]=s[j],s[i]
            i+=1 
            j-=1
        return s 
```
Marvel's Avengers Logo B&W | Pure CSS
Tags: codepen, css, showdev, 100daysofcode
Published: 2022-05-20 17:40:38

In this tutorial I'll be showing how to design the logo of Marvel's Avengers using "Pure CSS & HTML".

Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials that are are Marvel inspired. You can check them out [here](https://codepen.io/collection/Yyeoqb).

{% codepen https://codepen.io/rembertdesigns/pen/eYyqewK %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
How to increase Amazon ECS service quota for container instances per cluster
Tags: aws, cloud, kubernetes, docker
Published: 2022-05-20 17:17:54

Amazon ECS has integrated with Service Quotas, an AWS service that enables you to view and manage your quotas from a central location.

Service quotas in AWS services that you can use with Amazon ECS, such as Elastic Load Balancing and Auto Scaling.
 
**Amazon ECS service quotas**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9p5fnc8kclulq3nrwdk.png)

---

**AWS Fargate service quotas**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk3q82evbukut8amc60p.png)
 

---


**To view Amazon ECS and Fargate service quotas using the AWS Management Console**
1.	Open the Service Quotas console at https://console.aws.amazon.com/servicequotas/
2.	In the navigation pane, choose AWS services.
3.	From the AWS services list, search for and select Amazon Elastic Container Service (Amazon ECS) or AWS Fargate.
In the Service quotas list, you can see the service quota name, applied value (if it is available), AWS default quota, and whether the quota value is adjustable.
4.	To view additional information about a service quota, such as the description, choose the quota name.
5.	(Optional) To request a quota increase, select the quota that you want to increase, select Request quota increase, enter or select the required information, and select Request.
To work more with service quotas using the AWS Management Console see the [Service Quotas User Guide](https://docs.aws.amazon.com/servicequotas/latest/userguide/intro.html). To request a quota increase, see [Requesting a quota increase](https://docs.aws.amazon.com/servicequotas/latest/userguide/request-quota-increase.html) in the Service Quotas User Guide.
JavaScript Array Methods : Filter()
Tags: javascript, beginners, programming, array
Published: 2022-05-20 16:47:44

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

**Example:**

```
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
//Output: Array ["exuberant", "destruction", "present"]
```


![Filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1ncrxvyugf2av1xmebe.png)
Share your desk setup here! 🖥️👨‍💻
Tags: productivity, webdev, help
Published: 2022-05-20 16:41:21

Hello, community!

I'm gonna change my desk setup and planning to get an extra monitor to increase productivity. Could you share with me your desk setup and how you use yours daily in programming stuff? (ex why you prefer two horizontal monitors other than one vertical and one horizontal .. etc).

I use mine for programming web & mobile applications and design as well.

Your help would be appreciated so much.
HTML DOM Manipulation in JavaScript
Tags: javascript, dom
Published: 2022-05-20 16:39:15

We can use setInterval() method of JavaScript to monitor changes in the DOM after regular intervals. For example, we have to add event listener to add-to-cart button for tracking purposes but there are few products that load after an ajax call. How can you differentiate between the newly loaded add-to-cart buttons and the ones you have already added the event listeners? 

We can use setAttribute() method to add our custom attribute to distinguish between them. We will use querySelector() method to select only those buttons who do not have our custom attribute set on it. Add the event listener and then set our custom attribute to them. 

Here is the code sample
```
setInterval(() => {
    try {
      document.querySelectorAll('.add-to-cart:not([custom-attrib])').forEach((selector) => {
        selector.addEventListener('click', () => {
          // your code for execution
        });

        selector.setAttribute('custom-attrib', true);
      });
      }
    } catch (err) {
      // continue
    }
  }, 750);
```
Temperature Converter
Tags: codepen, javascript, css, tutorial
Published: 2022-05-20 16:32:04

Today I will share with you a beginner-friendly project that you can build with Vanilla JavaScript. Although there are many good JavaScript frameworks available, understanding the fundamentals of a language is important.

As a beginner in JavaScript myself, I was searching for some fun practice projects that I can build to sharpen my JavaScript basics. This is one of the projects that I built. This article will show you the step-by-step process of building it.

{% codepen https://codepen.io/rembertdesigns/pen/JjMQBRa %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
To-Do List
Tags: codepen, javascript, css, tutorial
Published: 2022-05-20 16:27:45

Some people claim building a todo list app is a boring activity since so many exist already but I think it remains a great exercise for learning useful concepts that are widely applicable in many programming contexts.

This tutorial assumes that you have a basic knowledge of JavaScript. Essentially, you need to know what variables, arrays, functions and objects are, but you do not need to have prior experience with building JavaScript applications.

{% codepen https://codepen.io/rembertdesigns/pen/YzYbPZx %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)