teleren/devto huggingface dataset:
Entendiendo Destructuring (Objetos y parametros)
Tags: javascript, beginners
Published: 2021-09-12 22:06:53

Desestructurar un objeto o un array es una práctica habitual traída por ECMAScript. Es posible que lo hayas visto en tu trabajo, en tutoriales o en código open source, pero, ¿te paraste a entender qué resuelve y cómo aprovechar esta funcionalidad?

Desestructurar un objeto o un array significa elegir un pedacito del mismo y asignarlo a una variable

Empecemos con un objeto que describe a una de mis perras:

```javascript
const mascotaDeCuarte = {
 nombre: "Gina",
 edad: 3,
 raza: "Schnauzer",
 pelaje: "Sal y pimienta"
 hermanos: ["Maggie", "Ragnar", "Mara", "Clarita", "Milo", "Tinta"]
};
```

El problema es que en la veterinaria me pidieron nombre y raza, para eso vamos a escribir una función que lo escriba por nosotros

```javascript
function nombreYRaza(mascota) {
  return mascota.nombre + ', ' + mascota.raza;
}

nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer
```

En programación, tenemos un principio llamado "Don't Repeat Yourself (No te repitas)", y en este caso estamos repitiendo la palabra "mascota" tres veces de una forma totalmente innecesaria.

Ahora es donde podemos empezar a aplicar destructuring. Sabemos que "mascotaDeCuarte" cuenta con dos propiedades: "nombre" y "raza". Desestructurar nos permite tomar estos valores y asignarlos a variables de igual nombre:

```javascript
function nombreYRaza(mascota) {
  const {nombre, raza} = mascota
  return nombre + ', ' + raza;
}

nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer
```

Ya aprendimos a desestructurar un objeto, pero hay algo más que te quiero contar: podemos desestructurar tambien el parametro de la función.

Como sabemos, el parametro "mascota" es un objeto. Le podemos indicar a la función que el objeto que llega en el parámetro tendrá dos propiedades de nuestro interés: "nombre" y raza".

```javascript
function nombreYRaza({nombre, raza}) {
  return nombre + ', ' + raza;
}

nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer
```

Desestructurar nuestra función y sus parametros nos permitió tener una función mucho más limpia y más facil de leer.

Hoy hablamos sobre cómo desestructurar un objeto y el parametro de una función, pero todavía nos quedan temas por ver como Arrays y Desestructuración de valores anidados. Si queres seguir investigando por tu cuenta, podes visitar [la MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

Gracias por leer, hasta la próxima!
Comparing Web Component Frameworks
Published: 2021-09-12 21:53:58

In this post, I will be comparing the commonalities between boilerplates for React, Angular, VueJS, and StencilJS. Additionally, I will be providing my opinion as to which is the easiest developer experience when starting out and which I would prefer to use.

##Similarities##
A similarity of the VueJS, Angular, React, and StencilJS boilerplates is that they all contain a src or app directory. These directories hold the components needed to give the app functionality. Additionally, they all contain the JavaScript, CSS, and HTML files to create the necessary components. For these boilerplates, Angular and StencilJS both use typescript while VueJS and React do not.

##Easiest Developer Experience##
Of these four frameworks, VueJS appears to be the easiest developer experience to get going. It only requires a few steps to create a basic functional app with VueJS. In Vue you can have the Javascript and HTML written within the same file. This helps with easier organization and navigation around the codebase.

##Which One I'd Choose##
If I were to start building an "app" tomorrow, I'd use React. I am new to all of these web component frameworks, so there are a few key aspects I look at in deciding. React is commonly used by a large number of companies in a variety of different ways. As a result of this, there is a wide array of information and tutorials that can be found online to support the use of React at all skill levels.

For the Angular boilerplate I followed, click [here](https://www.angularjswiki.com/angular/angular-2-hello-world-example/).
To view my group's organization page, click [here](https://github.com/table-in-the-corner).
Web Component Framework Breakdown
Published: 2021-09-12 21:52:19


This week in my Web Components class, we looked into 4 popular Web Component Frameworks: Angular, React, StencilJS, and VueJS.  Each group member took one framework and followed the boilerplate/"Hello World" example to understand how projects in these frameworks are structured.  Below I will show the results of our research and testing as well as providing my personal opinions on a framework I would use.
 
Across all four frameworks, there were some similarities to the way they worked.  All four use JavaScript to create/define their components as well as the interactions with them.  Stencil JS does use TypeScript files however TypeScript is then translated to JavaScript.  The frameworks also have a similar file structure in a sense that each component is given it's own directory to be defined within the project.  What is in these directories varies by project.  Most use a JavaScript function and returns that return HTML but VueJS uses.Vue Files instead.  Lastly, all of these frameworks have a base index.html file which is where all the custom components are added to/called.
 
Based on looking at these frameworks, I think VueJS has the easiest development experience because it has the fewest amount of files out of all four frameworks.  I found when looking at the boilerplates for these frameworks, I easily understood where everything was in the VueJS directory.  I did not need to dig very far to find where the custom component was defined and what files interacted with it.  Since I have not used it to build anything, I don't know if can efficiently handle interactions like in other frameworks.  I have heard of React and Angular from my previous internships, but I have not heard of VueJS before.  This leads me to wonder how vast the development community is.
 
With a few finds from our research, I would probably work with React to build an application.  I know from personal experience that the react community is vast.  The JavaScript files declaring components looks like HTML and is easy to understand what the code does.  I also can easily follow the file structure of this project, there are more files than VueJS, but it is still easy to follow along.
 
To view the boilerplates my group generated, please visit our GitHub Repo here: https://github.com/3B4B/boilerplates
What is useParams()?
Published: 2021-09-12 21:37:36

useParams() is part of a set of hooks that ships with react-router-dom along with useHistory, useLocation, and useRouteMatch. It is defined as: 

useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.

But what does it mean and how do you implement useParams() into your React project.

Because useParams ships with react-router-dom, it works directly with your route paths. With useParams, your params have to match the path set in your route:

```
<Route path=’/users/:username’>
```

With this route, you are able to access the :username param from the URL. To use this param, you must first import the useParams() hook into your app and create a variable within your component.

```
Import { useParams } from “react-router-dom”

const App = () => {
    let { username } = useParams();
    return <div>My name is {username}</div>
}
```

Now you can dynamically change the component based on any URL passed that matches the declared route. This can also be used for API calls. If you have a list of users, you can click one user’s name and fetch all of their information with their name as the search term that is added to the end of the fetch URL.
My Last 5 Year Struggle, Side Hustle and Community Contributions 🚀
Tags: journey, tech, community, work
Published: 2021-09-12 21:09:11

🚀 My Last 5 Year Struggle, Side Hustle and Community Contribution Since October 2016 to August 2021!

I started, by taking participation as a GRAPHIC DESGNER, in IEEE GCU BRANCH LAHORE right after my Bachelor's degree started. 👾

2. My First Internship was in UI/UX back 2018.

⏱️ At that time, I got the Internship in CureMD for three months but at that time I don't have an IDEA that CUREMD is one of the Great environment for someone work in. I rather JOIN a Game Studio which were closed right after my internship.

💡 I learned a lesson never go what seems right and good. Take RISK and give yourself a second chance. Than I Joined a Local Startup called HERSTELLAR as content strategist, which is KIND of internship where I get a chance to work in startup culture and to get to know what is happening in startup world.

3. First time, then I represented Government College University (GCU), Lahore at International Level and Selected as a CAMPUS AMBASSADOR Hultprize from GCU, LAHORE 🎌

4. After spending first & second year of my University after developing my communication & networking skills I have secured first Internship as WEB Engineer at VU Solutions Pvt. Ltd 😃

5. After brushing my Dev skills in 6 Months I got my first paid Internship as Web Engineer during my 6 semester of my degree. 💪

6. In all of this, I have worked along with @hultprize @herstellar @IEEEGCU @dotlinks @techtology1 @DSCGCULAHORE @plan9incubator as a volunteer & representative.⭐

7. Few Organizations, I feel proud and much grateful to be the part of are @TheNestiO @airschoolonline @StacksPakistan @MLSALahore @dotnetfdn @TedxGCULahore @Plan9incubator @arfakarimfndn & one and only Microsoft Learn Student Ambassador Community. 🔥

8. These organizations made me who I am today. Co- Leading a community of 3000+ students, professionals and tech enthusiastic. Also Leading my own communities where I market, scale and build the local talent of PAKISTAN 🎖️

9. Also our communities partnered with @COLABSPK @deveningsGlobal @StacksPakistan & @devsinc, in this whole process of redefining the meaning of community work we have done in last few years!

10. The whole journey of 5 years is worth to experience for. I am super excited of what lies ahead - The most Important part is the Supportive Community we got for this! 🎉

11. I graduated in Oct 2020, Now I am working as Software Engineer @Enghouse Interactive in their R&D Department.

🥳 Much thankful to all of you! I am always there to help, open to relevant opportunities.
Securing a Good IT Job
Tags: jobs, it, tech, engineering
Published: 2021-09-12 21:04:59

Few things I want to update a quick post for freshers & juniors to build a strong application for securing a good reputed job in IT sector - 🕵️

💻 Make your CV or Resume of one Page only.
🚀 Build your profiles on open source platforms like Github.
🙌 Make a Dev portfolio on any free hosting providing platforms like github pages, netlify & surge.
🎯 Mention every single project you have worked or contribute previously.
🕵️Try to contribute & start taking part in International Student communities like MLSA from Microsoft, DSC from Google & AWS from Amazon.
😊 Show your empathy & patience while securing your dream job because great things take time.
💪 Lastly, don't give up to your goal & dream in joining your dream company or destination instead of increase your effort.

Do checkout mobile friendly portfolio stories: https://lnkd.in/dh4Gn66U

Keep Moving forward with baby steps, you're just about there to achieve - 🔥
If you find anything missing do comment below - 👋
Web Component Frameworks
Published: 2021-09-12 21:03:28

**What commonalities/overlaps are there between the boilerplate code?**
Some similarities between VueJS, Angular, React and StencilJS boilerplates is that they all use Javascript,CSS, and HTML. All four boilerplates contain a /src and /app directory.

**Which do you think is the easiest DX (Developer eXperience) to get going?**
Since I am not familiar with these frameworks, I did some research and decided which one would be easiest to learn and build from. According to https://www.codeinwp.com/blog/angular-vs-vue-vs-react/ VueJS is the best framework to start off with. VueJS has high customizability and overlaps with Angular and React so it would be best to learn VueJS first and then transition to React and Angular.

**If starting to build an "app" tomorrow, which would you prefer and why?**
After reading more about the frameworks, I believe Angular would be a better choice compared to Vue and React. Vue is limited by its simplicity and allows poor code that is hard to debug/test. React is not considered a complete framework and requires third-party library use for advanced features. Although Angular has the steepest learning curve, it has the most capability compared to the others.

Here is the link I followed to get the Angular boilerplate: https://github.com/juanmesa2097/angular-boilerplate

Here is my group's organization:
https://github.com/ist402groupj/boilerplates
Personal Branding
Published: 2021-09-12 21:02:49

🤔 Personal Branding is often misunderstood in today's digital world the question is here - What actually Personal Branding is in real?

🚀 Your personal branding is how you promote yourself. It is the unique combination of skills, experience, and personality that you want the world to see and get them inspired to put their value in it in form of suggestions, constructive criticism & many people out there start doing similar or relevant same as what you are doing to promote positive & better image of relevant domain. It is about telling your story, and how it reflects your conduct, behavior, spoken and unspoken words, and attitudes.

🙌 Do you consider "Personal Branding" is must to consider in every respective professional domain for students, job professionals, and industry experts?

👋 If yes, share your constructive thoughts on it in the comment section below:

#personalbranding #experience #leadership #communication #storytelling #branding #creativity #linkedin #content #digitalcommunication
MLSA Lahore Happenings
Tags: community, techtalks, microsoft, empowerment
Published: 2021-09-12 20:53:58

Microsoft Learn — Lahore community is going to expand it’s circle to teach the latest technology trends of Microsoft Technologies. The Microsoft Learn Student Ambassador Program is a worldwide educational program to sponsor students majoring in disciplines related to technology. The Microsoft Learn student program attempts to enhance students’ employability by offering training in skills not usually taught in academia, including knowledge of Microsoft technologies. I am co-leading this community with my University, Batch fellow Saad Aslam who is good friend of mine, we are trying our best to build this community to promote the latest Microsoft technologies in local community for specially students, professionals and mentors. We do have active accounts on social handles you can check out our work we are doing by visiting the link below:

Facebook: https://www.facebook.com/MLSA.Lahore
Twitter: https://twitter.com/MLSALahore
YouTube: https://www.youtube.com/channel/UCgW1CbHHjlz3z58isv19eqQ

Recently, we have collaborated with COLABS, Deveining’s, Stacks Pakistan and Devsinc. Collaborated with Stacks Pakistan for their Hackathon!

Collaborated with @Devsinc for their virtual Hackathon:

Collaborated with COLABS for the next year as a Tech Community Partner.

Our last event was MeetCon 0.1 which was held at COLABS where we entertain the student ambassadors from different institutes from Lahore having technical session, gold ambassadors and all the tech professionals and students who want career guidance, program help and outreach in conducting the local events in their respective institutes. I was moderating the Fireside Chat with fellow ambassadors.

The Happy face with few fellow ambassadors from Lahore and tech professionals:

We had also collaborate with tech various communities, community spaces and tech companies to provide and give access to latest tech trends, opportunities and facilities to our community members which they can avail and excel it in their professional lifes. Our communities are purely inclusive for all over the Pakistan.

We have also recently launched our website also to make this community more vibrant and to inspire more student ambassador fellows to learn and avail from this program to maximum.
Website Link: https://mlsalahore.com/
Days of Code [3]
Tags: beginners, csharp, algorithms, challenge
Published: 2021-09-12 19:36:41

Hi everyone,

Now I have this one:

"You are given a large integer represented as an integer array digits, where each digits[i] is the ith digit of the integer. The digits are ordered from most significant to least significant in left-to-right order. The large integer does not contain any leading 0's.
"

###1 Example 
 * Input: digits = [1, 2, 3]
 * Output: digits = [1, 2, 4]
 * Explanation: The array represents the integer 123.
 * Incrementing by one gives 123 + 1 = 124.
 * Thus, the result should be [1,2,4].

###2 Example 
 * Input: digits = [4,3,2,1]
 * Output: [4,3,2,2]
 * Explanation: The array represents the integer 4321.
 * Incrementing by one gives 4321 + 1 = 4322.
 * Thus, the result should be [4,3,2,2].

###3 Example 
 * Input: digits = [9,9,9]
 * Output: [1,0,0,0]
 * Explanation: The array represents the integer 99.
 * Incrementing by one gives 999 + 1 = 1000.
 * Thus, the result should be [1,0,0,0].

### Constraints:
 * 1 <= digits.length <= 100
 * 0 <= digits[i] <= 9
 * digits does not contain any leading 0's. 

### Observations
 Need to figure out how to solve this one without converting to int or long, since the array can pass the MaxValue, for example:
 
 The int.Maxvalue = 2147483647;
 
 We can have this input:
 * Input: digits = [9,8,7,6,5,4,3,2,1,0]

 So if you think to solve:
 * Join the array and get a string "9876543210"
 * When parse it to int we get this, cause we pass the MaxValue:
  * System.OverflowException: 'Value was either too large or too small for an Int32.'

Here is my solution:

```csharp
    public static class PlusOneArray
    {
        public static int[] PlusOne(int[] digits)
        {
            var numOfNine = GetNines(digits);
            if (numOfNine > 0)
            {
                
                if (digits.Length != numOfNine)
                {
                    digits[digits.Length - numOfNine - 1] += 1;
                }
                else
                {
                    digits[digits.Length - numOfNine] = 1;
                    var newDigits = new int[digits.Length + 1];
                    digits.CopyTo(newDigits, 0);
                    digits = newDigits;
                }

                int i = digits.Length - numOfNine;
                for (; i < digits.Length; i++)
                {
                    digits[i] = 0;
                }
            }
            else
            {
                digits[digits.Length - 1] = digits[digits.Length - 1] + 1;
            }

            return digits;
        }

        private static int GetNines(int[] digits)
        {
            int n = 0;
            for (int i = digits.Length - 1; i >= 0; i--)
            {
                if (digits[i] == 9)
                    n++;
                else
                    break;
            }
            return n;
        }
    }


```

Also this is at my github:

[Peres Github - Plus one](https://github.com/ronaldoperes/Challenges/blob/master/LC/PlusOne.cs)


Happy coding!!
Reuse tfvars in Powershell
Published: 2021-09-12 19:01:50

<sub>Photo by <a href="https://unsplash.com/@thoughtcatalog">Thought Catalog</a> on <a href="https://unsplash.com/s/photos/read">Unsplash</a></sub>

To reuse data in Powershell set in tfvars, we just have to use the [ConvertFrom-StringData](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/convertfrom-stringdata?view=powershell-7.1) cmdlet.

In order to remove some character (such as { or } ), we can use -replace .

That will give us

```Powershell
$file = Get-Content .\varfile.tfvars
$file = $file -replace "}", ""
$file = $file -replace "{", ""
$convert = $file | ConvertFrom-StringData
```

Hope this help !
"This Page Can't Load Google Maps Correctly"
Published: 2021-09-12 18:24:00

<p>You may be browsing a website - your own or somebody else's - and see this error:</p>

<blockquote class="wp-block-quote"><p>"This page can't load Google Maps correctly. Do you own this website?"</p></blockquote>

<p>It also has "For development purposes only" as a watermark repeating over the whole map.</p>

<p>This error has become pretty common in the past few years. It comes out of a change in Google policies. Previously, you could use the Google Maps API to put a map on your website with no extra charge. You did not need to have a credit card on the Google account. That has changed. There's no notification, so you won't notice this unless you happen to visit the map on your website again, which most people rarely do after it's been designed.</p>

<p>You now need to meet two requirements:</p>

<ol><li>An API key on the site connecting to a project associated with your Google account*. If you're building a Google Map into a CMS website (Drupal, WordPress, etc.) then it probably includes some instructions on how to do this connection.</li><li>A valid payment method on the Google account. You can do this from pay.google.com. The billing account of the Map API project has to be connected to that payment method.</li></ol>

<p>*As with most other scenarios like this, you should have a generic Google account that can be shared by at least a couple of staff members. Do not use an individual user's Google account - personal or business - as that will cause complications if you ever need to make changes and that person isn't available.</p>

<p>Importantly, you get a certain amount of API credit for free before you have to start paying. Most small to medium websites will likely end up not paying any extra fee. That's at least true of Google's rules today; they could easily change someday. You do need to be aware of that slight possibility.</p>
RxJS - Promise vs Observable
Tags: rxjs, javascript, observable, promise
Published: 2021-09-12 14:29:48

One basic question which first comes to mind when we have been using Promises and then, trying to move to Observables... is why to use Observable instead of Promise.

Since Angular started utilizing RxJS everywhere, Observables became more and more popular. But, confusion comes when we are just making an api call using HttpClient and this returns Observable. We wonder, I can do the same in promise. 

I am trying to answer that with an example. 

Let's first try to create a Promise and an Observable which just finishes with one value.

```javascript

const s = new Observable(observer => {
   setTimeout(() => {
     observer.next('hi');
   }, 100);
});

s.subscribe(value => {
   console.log(value);
});

const p = new Promise((resolve, reject) => {

setTimeout(() => {
  resolve('hi');
}, 100);

});

p.then((value) => {
  console.log(value);
});
```

In this scenario, there is not much difference between Observable and Promise except that, we are using <b>.subscribe</b> instead of <b>.then</b>.

But, what if there are two values. Let's see the code for that.

```javascript
const s = new Observable(observer => {
  setTimeout(() => {
    observer.next('hi');
  }, 100);
  setTimeout(() => {
    observer.next('hello');
  }, 200);
});

s.subscribe(value => {
  console.log('observable:', value);
});

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hi');
  }, 100);

  setTimeout(() => {
    resolve('hello');
  }, 200);
});

p.then(value => {
  console.log('promise: ', value);
});
```

{% stackblitz rxjs-9ybo2g devtoolsheight=33 file=index.ts %}

In this scenario, there are two values being emitted, and you can see that, promise is not considering the second value which is resolved. For a promise, it is one asynchronous operation, and that is completed at the first resolve execution itself.

But, in case of Observable, subscriber keeps listening for the new data, until the observer says completed.

Hope the difference is clear now.