teleren/devto huggingface dataset:
Appreciating Maps in Javascript
Tags: javascript, webdev, firstyearincode, algorithms
Published: 2021-01-14 23:57:46

I've been loving using Maps in JS lately for a variety of purposes. A simple one is to go through an iterable and count the occurrence of each of the items.

For example, I'll have a array of grocery items and a new instance of a Map to store those items and their respective number of occurrences:

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

Pretty cool! The loop iterates through the grocery list and checks if it already exists in the Map. If it doesn't, it'll create a new key-value pair with the item as key and 1 as its value. If it does, then it'll increment the existing value.

This was how I'd been going about it for a while, then I realized we can make this much more concise.
We'll remove any conditionals, and go straight to using the set method. The item will be set as a key from the get-go, and in the value parameter, we'll set up the get method to get the associated value. 

We've set a default value as 0 by utilizing the logical OR operator, so if that get value returns undefined (aka it doesn't exist), it'll have something to fall back on. Lastly, it'll increment by 1 to set the value as 1 if the item doesn't exist,  or it'll increment an existing value.

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

I do feel like the first approach is a bit more intuitive, however knowing how default values and logical operators, well, operate would be so 🔥 with the second approach.
Manual remove unsupported plugin from Android Studio
Tags: android, studio, ide, plugin
Published: 2021-01-14 23:28:30

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

If installed plugin (for example [Android WiFi ADB](https://plugins.jetbrains.com/plugin/7983-android-wifi-adb)) not supported you Android Studio version - you have warning message on always IDE startup.

In Plugin Manager you may can't find plugin in Installed list. Try install unsupported plugin again and remove from installed, but this not always work - remove plugin directory manually from %HOMEPATH%\AppData\Roaming\Google\AndroidStudio4.1\plugins (on Windows).

P.S. Install Android Studio, Android SDK, Unity without spaces in path folder name if you don't want problem with NDK installation.
Portfoliocon 2021 (Days 1 & 2 recap)
Tags: portfoliocon, beginners, career, jobs
Published: 2021-01-14 23:16:31

---
title: Portfoliocon 2021 (Days 1 & 2 recap)
published: true
description: Portfoliocon 2021 recap
tags: Portfoliocon, beginner, career, jobs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kju1e8yd7qc9co85h3xk.jpg
---

## **Wooooooooooo! Over the past few days we've managed to review 55 portfolios and give away some sweet prizes!**

Tomorrow is our third and last day of Portfoliocon 2021. We have about 15 more portfolios to review + big giveaways featuring [ZeroToMastery.io](https://wwwZeroToMastery.io) & [RealToughCandy.io](https://wwwZeroToMastery.io).

Thanks everyone for making this event fun, educational and awesome!

Here are days 1 & 2 (with timestamps) for those who missed it:

{% youtube gBWFziy-SlA %}

{% youtube EQsVjrEJgcY  %}

### **See you tomorrow at noon CST!**
Teaching React Lifecycle Methods?
Tags: help, react, beginners, javascript
Published: 2021-01-14 23:05:02

I'm a high school computer science teacher and while I've used React.js for a couple years now off and on, it's my first time teaching it and I'm definitely no expert. To teach the component lifecycle, I decided to start by introducing class components with `componentDidMount`, `componentWillUnmount`, `render`, etc. 

![Lifecycle Methods](https://dev-to-uploads.s3.amazonaws.com/i/44qvpds77jv8mc1mp04x.jpg)

But hooks are so much cleaner! 

At this point in their development, students understand basic vanilla JavaScript like DOM manipulation, objects, events, functions, async/await, fetch API; you know, the sort of typical prerequisites to learning a framework. When I was learning React a few years ago, hooks weren't a thing yet, but they were natural for me to pick up because I felt I understood the component lifecycle, `setState`, etc. clearly from seeing the methods in the class components.

I guess my question is, can a student jump straight in to using React hooks in functional components or should they learn class components first? I understand that hooks are often the recommended way to go in practice, but can introducing them too early be too confusing?
CORS Hides Real Bugs
Tags: security, kubernetes, todayilearned, bloggolf
Published: 2021-01-14 23:01:30

# Before You Scroll

If you're here because you have a CORS error and you think it's hiding your *real* problem, run this command: 

`/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=~/temp/chrome`

This will start up a Chrome instance with web security turned off, which gets CORS errors out of the way leaving you free to debug your response (assuming the CORS error itself isn't your problem).

For the bug in this blog, we spent about 4 hours debugging before we ran the above command, and then had the issue fixed an hour later. 

# The Background

Recently my pair and I implemented a feature to process some data with a long running GraphQL mutation (about 2 minutes to return a response on a production size data set). There are better ways to do this without such a long-running request, but this particular action happens rarely enough we just went with this approach and plan to revisit it later. 

# The Bug

On our development machines, everything would run just fine, but in our higher environments, we'd get this lovely error in the browser console: 

> Access to fetch at '[OUR API]' from origin '[OUR FRONTEND]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Some other interesting things we noticed: 

1. There were no errors in the server logs. 
2. The data processing was actually happening just fine, but the *response* was buggy. 
3. We'd get this message exactly 1 minute after we fired the request, every time.

# The Fix

Turns out, because of the long running request, we were bumping up against 2 different timeout limits in our stack, one at our ingress controller, and one at our DNS. It makes sense that we couldn't replicate this locally, since in our dev environments there is neither ingress nor DNS. Tweaking those limits was all we needed. Once we launched into a CORS free world using this command: 

`/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=~/temp/chrome`

Everything started falling into place!
🧩 Tips and Tricks for Solving Advent of Code's Puzzles
Tags: python, tips, tricks
Published: 2021-01-14 22:53:30

📕 Learn strategies for solving the popular holiday programming challenge 'Advent of Code'.
[Read more...](https://auth0.com/blog/advent-of-code-tips-tricks/?utm_source=content_synd&utm_medium=sc&utm_campaign=tips-tricks)
How To Display App Version in Angular
Tags: angular, javascript, webdev
Published: 2021-01-14 22:50:00

It’s common for applications to display what version of the application is currently being used. For example, in browsers, you can go to their About page and see what browser version you’re using. Let’s learn how to display your package.json version in your Angular application!

## resolveJsonModule

When working with Javascript modules, it’s common to import specific pieces you need using an import statement.

```javascript
import { Component } from '@angular/core';
```

We’d like to import the version value from the package.json file. However, that’s not possible at the moment. We need to tell Typescript to allow that to happen using the resolveJsonModule setting. In your **tsconfig.app.json** file, add the following under the **compilerOptions** property:

```javascript
compilerOptions: {
  ...
  "resolveJsonModule": true
  ...
}
```

## Import Version

In the component where you’d like to display the version number, now you can import it successfully.

```javascript
import { version } from 'path/to/package.json';
```

> Make sure to import the version only. It can be dangerous to expose other information about your package.json file.

Create a variable in your component and assign it the version value you just imported.

```javascript
export class AppComponent {
  version = version;
}
```

## Display Version

In your component’s html, place the variable where you want the version to appear.

```html
Version: {{ version }}
```

---
**Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!**
Welcoming Katie Davis and Suzanne Aitchison to the Forem Team!
Tags: meta
Published: 2021-01-14 22:47:27


We are very excited to start off 2021 with the addition of two new staff members who will focus on Forem's front end development. Please meet Katie Davis (Senior Software Engineer) and Suzanne Aitchison (Software Engineer).

Katie and Suzanne will work closely with Senior Software Engineer, @nickytonline and Head of Engineering, @molly to support the ongoing development and maintenance of dev.to, Forem, as well as other apps and projects. 

Our Forem rollout is off to a fast-moving start, and we are thrilled to have such highly-skilled additions to our tight-knit team. 

Please give a special welcome to Katie and Suzanne and check out their introductory posts.

{% link https://dev.to/katiedavis/hi-i-m-joining-the-forem-team-1ja6 %}

{% link https://dev.to/s_aitchison/i-joined-the-forem-team-1dh6 %}

![Alt text of image](https://media.giphy.com/media/l41lShcuautqDZc5i/giphy.gif)
Thinking of ending my love affair with vcpkg
Tags: cpp, vcpkg, conan, packagemanagement
Published: 2021-01-14 22:45:59

# What was the enticing thing about vcpkg
When vcpkg was incarnated, there were not good alternatives to `apt-get` which I knew of on Windows. I always liked visual studio and having a package manager from big company like Microsoft was really enticing. It wasn't the best in the sense that it won't give me binaries, but it would automate a lot of things for me and so it was welcome change. With lack of admin rights on hpc clusters, it was useful to get some libraries in Linux environments too.

# The rift
## The secrets
### *We the people by the people for the people* taken too far
Many open-source libraries will denote their competitors and denote their differences in readme, but vcpkg doesn't list and compare itself with competitors, there is hidden [FAQ](https://github.com/microsoft/vcpkg/blob/master/docs/about/faq.md) which sheds some light with comparisons with competitors. After hearing about conan, I decided to step back and try to understand vcpkg's philosophy. I came across with this line:
> C++ should be used in a C++ package manager for C++ programmers. You should not be required to learn another programming language just to understand your package manager.

I'll try to give some counter-arguments to this mission statement.
1. As I started in [earlier post](https://dev.to/vmiheer/human-perspective-in-language-design-42c9), polyglot development is key to productive development.
2. Contrary to vcpkg's mission statement, it has significant amount of cmake apart from c++. If the mission was to build everything in c++, I could envision "only" executing cmake binary as part of vcpkg.
3. There are instances where you would need to keep distinct copies of vcpkg sources, and having a tool built in it implies the tool needs to be built before it can be used. There are efforts to bring vcpkg binary distribution.
### The package manager which can't handle multiple library versions
You would assume you would have support for maintaining different version for same library but vcpkg can't do that. The only way until https://github.com/microsoft/vcpkg/pull/15565 is resolved is clone vcpkg in seperate folder and ***build vcpkg***, git checkout port related files to older version and built it.

# The conan way
Conan has binary package support; it's written in python which is not as terrible as cmake to work with and learn. It supports not only cmake, but any other generators you would like to use with your c++ project including raw gcc flags. I am looking forward to how it goes with conan.

# References:
1. https://github.com/52doho/vcpkg-vs-conan
100 days of learning machine learning: day 1
Tags: machinelearning, python, 100daysofcode
Published: 2021-01-14 22:43:16

So I'm trying something new. I'm going to try and spend 100 days learning machine learning. I've been using Python for about a year and also have some theoretical knowledge of machine learning after completing [this course](https://www.coursera.org/learn/machine-learning). I now need to learn how to actually *do* machine learning.

**Why am I doing this?** What else is there to do right now? I'm bored, stuck in the house. The main reason though is being able to do machine learning would help with my PhD research immensely!

**Why are you telling me all this?** I'm hoping by posting on DEV it'll help me to stay motivated and keep practising. I'm also hoping that maybe I can find other people who want to learn machine learning (or are super bored) and we could figure some of this stuff out together.

![Get on with it, from Monty Python and the Holy Grail](https://media.giphy.com/media/13YZ9H9oyZOjhm/giphy.gif)

Anyway...

##Day 1
So today is the first day. I'm starting using data camp to learn scikit-learn. I'm hoping if I can pick up some of the coding knowledge here. Then once I understand it a bit, move over to Kaggle and try it out on some real datasets. Today I spent about an hour working on a K-nearest neighbor model. I was hoping to start with linear regression, but this was actually quite simple to pick up (always nice). The examples showed how to use it with the iris dataset and then I got to work with a dataset from american politics.

**My favourite thing I learnt today** is how to use a for loop to change the number of neighbors to be used, and evaluate the score of the KNN each time. This is so simple but blew my mind at the same time. It's such a clever way to work out the best number of neighbors each time.
The JavaScript Developer Tools
Tags: tutorial, codenewbie, javascript, beginners
Published: 2021-01-14 22:30:49

{% youtube Ydg8aRuEHg8 %}

---
Errors in the browser are not visible to developers. But there's one specific tool that developers use to debug Javascript errors called the **console**.

### How to Open the Console

![developer-tool.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1610663746300/fJVVhZYJp.gif)

To open a ready-made developer environment or console, use either of the following keyboard shortcuts.

- `Ctrl` + `Shift` + `I` (Chrome and Firefox)
- `F12` (Chrome and Firefox)
- `Ctrl` + `Shift` + `J` (Chrome)
- `Cmd` + `Opt` + `J` for Mac (Chrome)
- `Ctrl` + `Shift` + `K` (Firefox)
- `Cmd` + `Opt` + `K` for Mac (Firefox)
- Preference - Advanced - click the check box at the bottom (Show Developer menu in menu bar) - `Cmd`+ `Opt`+ `C` for Mac (Safari)

> To insert multiple lines on the console, press `Shift` + `Enter`. And click `Enter` to execute the code.

Besides the tedious entering of the `Shift` + `Enter` keyboard shortcut to escape a new line, whenever a variable, function. was declared from a previous program, it gets cached in the browser console. This means anytime the same declared variable is used (even after clearing the console `Ctrl` + `L`), an error message is printed out in the console (except the browser is refreshed `Ctrl` + `R`). 

These issues are prevented by making use of a reliable text editor like [Visual Studio Code](https://code.visualstudio.com/download).

**Happy Coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>
💡 Tip Rapido: Fetch JSON data Desde un perfil publico simple sin Graph API
Tags: javascript, tutorial, firstpost, spanish
Published: 2021-01-14 22:28:36

Nunca quisieron obtener informacion de un perfil de instagram de una manera facil y sencilla? Bueno...

En una de esas navegaciones nocturnas de poco dormir, me encontre con esta solucion, que por lo que pude ver esta poco difundida.

```
https://www.instagram.com/{public_profile_name}/?__a=1
```

Resulta, que agregando el query ?__a=! al final de la direccion al perfil, podemos acceder a un JSON con toda la informacion publica del perfil.

por ejemplo:

```json
https://www.instagram.com/refactordevs/?__a=1
```

nos devuelve el siguiente JSON:

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

Como pueden ver el JSON es muy y tenemos toda la informacion de la cuenta, inclusive, con unas pocas lineas de codigo, (en este caso en javascript), podemos obtener el feed:

```json
async function getInstagramPictures (profileName) {
  const baseUrl = "https://www.instagram.com";
  const profileUrl = `${baseUrl}/${profileName}`;
  const jsonDataUrl = `${profileUrl}/?__a=1`;

  const response = await fetch(jsonDataUrl);
  const jsonData = await response.json();
  const pictures = jsonData.graphql.user.edge_owner_to_timeline_media.edges;

  if (response.ok) {
    return pictures;
  } else {
    throw new Error(pictures);
  }
}

```
```json
getInstagramPictures("refactordevs")
  .then(pictures => console.log("Pictures:", pictures))
  .catch(error => console.error("Error:", error));
```

Al realizar un bucle,se puede mostrar cada imagen o su miniatura.

Tambien podriamos traer las imagenes de perfil, o cualquier tipo de informacion.

solo basta con cambiar la siguiente linea:

```
const pictures = jsonData.graphql.user.edge_owner_to_timeline_media.edges;
```
Saludos! y espero que les sea util! 

Sources:
- https://stackoverflow.com/a/48674091
- https://codelike.pro/fetch-instagram-posts-from-profile-without-__a-parameter/
- https://dev.to/teroauralinna/how-to-fetch-your-public-photos-from-instagram-without-the-api-3m50
Showcase Projects vs Passion Projects
Tags: javascript, ruby, resume, career
Published: 2021-01-14 22:10:02

![Work desk](https://dev-to-uploads.s3.amazonaws.com/i/fr1sg1h92puti9kkpf60.jpg)

One of the most common pieces of advice you'll get as a newbie developer is to work on some projects to master your skills when looking for a job. The conventional wisdom is that 3 is a good number to show on your resume, which I generally agree with (we'll talk about which three the next time)

That said, people confuse 2 types of projects: **showcase projects** and **passion projects**. Let's see how they differ:

### Showcase projects

Showcase projects are projects that you want to show a recruiter or an engineering lead. These projects should be familiar products (a bug organizer, a blog, etc). Showcase projects should not be around an idea unfamiliar to the reviewer, so the conversation you have around it is about the code and your technical skills, not the merit of the idea. It's also ok to adopt the design from a well-known project out there instead of trying to come up with a design yourself, especially if you aren't a designer.

### Passion Projects

Passion projects are projects you are personally very excited about even though their implementation may not be very complicated or the user interaction may be very unusual. A simple listing of local keto restaurants may be a great passion project but doesn't highlight your technical skills. 

## Mixing it up

This division may feel a bit arbitrary, and if your passion project has technical merit, then definitely show it. But remember your primary goal in a technical interview is to discuss the technical underpinnings of your project. You will get more credit for a complex system implemented well than a novel idea with a simple execution 🙂 

  
  
  
   
  


============================
🙏 Thanks for reading this post. 

Btw, If you are interested in learning Javascript and are bored with books and long videos, try out my latest project:

[🤖 Jax: Your JavaScript chatbot coach](https://devbots.ai/jax.html)

[<img src="https://devbots.ai/img/Badge.png" width="400">](https://devbots.ai/jax.html)



=============================
Trump De-platformed, Parler Dropped, an ANTIFA Conspiracy, & more on DevNews!
Tags: news, podcast
Published: 2021-01-14 22:05:02

---
title: Trump De-platformed, Parler Dropped, an ANTIFA Conspiracy, & more on DevNews!
published: true
description: Listen to the season 3 premiere of the DevNews pod!
tags: news, podcast
series: DevNews Season 3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

### Let me tell you, **Tech. News. Doesn't. Stop.**

**— that's why @saronyitbarek and I are back with another season of DevNews!** 

{% podcast https://dev.to/devnews/s3-e1-trump-de-platformed-parler-dropped-an-antifa-conspiracy-and-virtual-ces %}

### **The season three premiere had us diving right back into the biggest stories that matter to developers (and any human being who is as glued to the news as I am):**
- The most infamous Twitter user ever getting suspended
- AWS and the Google and Apple app stores dropping Parler in the aftermath of the US Capitol siege


### **We were also joined by two guests who spoke with us about a few additional stories of interest:** 

- [Dave Gershgorn](https://twitter.com/davegershgorn), Senior Writer at OneZero at Medium, covering AI and its effects on society. We spoke about a conspiracy theory related to Antifa and the recent U.S. Capitol siege.


- [Monica Chin](https://twitter.com/mcsquared96), writer at the Verge. Monica filled Saron and me in on this year’s virtual CES (Consumer Electronics Show).

In the chaotic world we live in, I hope DevNews can play a small part in helping you sort through the noise to stay as informed as possible (mental health permitting!)

_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s3-e1-trump-platformed-parler-dropped-antifa-conspiracy/id1525581923)
- [Spotify](https://open.spotify.com/episode/13wmlcWjfshfoMI82e9Tav)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzE3?sa=X&ved=0CAQQkfYCahcKEwiw6JuPtpzuAhUAAAAAHQAAAAAQAw&hl=en)
- [Stitcher](https://www.stitcher.com/show/devnews)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews-dev-fH8hvsClkWp/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=160060841)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [PocketCasts](https://pca.st/jvlttouz)
- [Transcript](https://devpods.herokuapp.com/podcasts/devnews/episodes/77)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season three sponsors, [SendBird](https://sendbird.com/) and [Rudderstack](https://rudderstack.com/) ❤️ 

![News](https://media.giphy.com/media/5b9iSaucUKpukkTQpG/giphy.gif)