teleren/devto huggingface dataset:
'Pass' by Copy/Value vs 'Pass' by Reference
Tags: javascript, beginners
Published: 2020-02-23 23:34:30

The phrases mentioned in the title of this post get thrown around when discussing features of a language. Most languages are one or the other...but not so with JS.

Let's explore what these concepts mean and then see some code snippets to explore the implications.

This post assumes knowledge of `const` and `let` to _declare variables_ and basic knowledge of JS _Objects_ and `.` _notation._ 

I'll also assume that you understand how to `log` _values_ with `console.log()`.

## Pass by 'Copy'


_Primitive data types,_ such as _strings_ are **passed by copy.** This means that each _variable_ _references_ it's own 'copy' of any given **primitive** value.


```js
let myCar = 'Mazda';


/**
  * Let's get 'you' the 'same' car as me.
  * Since we are working with PRIMITIVES,
  * this means that 'your car' will be a separate 'copy' of mine.
  */
let yourCar = myCar; // 'you' have your own 'Mazda.'


// I am replacing my car.
myCar = 'Ford'

console.log(myCar); // 'Ford'

// Your car is the same
console.log(yourCar); // 'Mazda'

```

Since we worked with _primitives_ above, even though 'cars' 'looked the same,' for a time, we were _referencing_ **2 different copies.** 


## Pass by 'Reference'

JS Objects, however, are **pass by reference.** This means that they share the exact same 'spot' in memory, and _mutations_ (changes) will be reflected in both _variables._


```js
const myCar = { make: "Mazda" };

/**
  * Since we are working with OBJECTS,
  * this time you are 'sharing' my car - not getting your own 'copy.'
  * So it's now 'our' car...the same REFERENCE.
  */
const yourCar = myCar;

// I got a new car...so that means you did too - via the same REFERENCE.
myCar.make = "Mercedes";

console.log(myCar.make); // "Mercedes"
console.log(yourCar.make); // "Mercedes"

```

Understanding the concepts 'pass by copy' and 'pass by reference' will help you understand not just JS, but many other programming languages. Understanding this 'inconsistent' behavior within JS itself can help you squash 🐛s. 🤓
Eslint Fix An Existing JavaScript Project
Tags: javascript, node, eslint
Published: 2020-02-24 01:07:35

Need some syntax sanity after creating a mess or inheriting one? Quickly format an entire project (or select files) with eslint:

Add your preferred eslint config (mine is Airbnb's) as a development dependency:
```
npx install-peerdeps --dev eslint-config-airbnb
```

an `.eslintrc` file to your project root:
```
{
  "extends": "airbnb"
}
```

a couple commands to your project's `package.json`:
```
  "scripts": {
    ...
    "lint": "eslint . --ext .js",
    "lint-fix": "eslint . --ext .js --fix"
  },
```
**Note:** the above entries look at your *entire* project!

Run `npm run lint` for a report and `npm run lint-fix` to format all `.js` files.
Comparing React to Vue on a Laravel API
Tags: react, vue, laravel, javascript
Published: 2020-02-24 00:17:13

---
title: Comparing React to Vue on a Laravel API
published: true
description: I wanted to see for myself how React and Vue compared to one another.
tags: React, Vue, Laravel, Javascript
---

# Initial Review

Being familiar with React and Vue, I set out to resolve the rivalry. Not for anyone here, it was mainly for myself, but I figured I'd write and post a blog about it anyways. I also was going to strike a different style for each website.

**Vue Style**

For Vue I used the component template format. I also used two-way binding for the state.

**React Style**

For React I used the render function and of course I had to use one-way binding as React doesn't support two-way binding.

**Shared Style**

Both of these apps were built on identical Laravel backends with identical bootstrap themes. They both initiated with a render function. The entire app was rendered as one component. This component held most of the state.

# Comparison

The [react](https://react.jacobhenning.com) and [vue](https://vue.jacobhenning.com) sites both worked seamlessly. However, I did find that Vue was easier to design, and React was easier to program. This was likely due to a the template vs render function approach. I also noticed that the Vue site loaded slightly quicker. This was due to the size of each library. There wasn't a significant difference in the end.

# Who won?

Well, I'm not entirely sure which website I prefer. They both work fairly well. I could code both of them again. If anything, this experiment simply proved that react and vue are nearly identical on small scale SPAs. I suppose I'll have to build a second experiment to really get to the bottom of this. Feel free to check my progress on [my website](https://www.jacobhenning.com)
How to deploy a Create React App Website to GitHub Pages
Tags: webdev, beginners, react, tutorial
Published: 2020-02-24 00:08:47

In this video we'll create a website using Create React App and deploy it as a static site to GitHub Pages! Best of all, we'll do all this for free and in less than 10 minutes!  Once you deploy your site, post the link to it in the comments to share it with others!

{% youtube ctLFWAanxcI %}

Checkout our website at https://programmingliftoff.com for more awesome tutorials.

Thanks for watching,
- Andrew
Azure - Resource Graph Explorer, your next favorite tool
Tags: azure
Published: 2020-02-25 14:50:37

---
title: Azure - Resource Graph Explorer, your next favorite tool
published: true
date: 2020-02-24 00:00:00 UTC
tags: azure
canonical_url: 
---

When you have multiple subscriptions, it can be complex to list all your resources, or create some reports like

- How many Storage Account i have and group by SKU ?
- How many VM are in my AKS Node Pools ?

So now, try to respond to the first question :

The old ways, make a script in Powershell, and use Az module to list all of your storage accounts, like this :

```
$subscriptions = Get-AzSubscription -TenantId $tenantId

$storages = @()
foreach ($subscription in $subscriptions)
{
    Select-AzSubscription -Subscription $subscription
    $storages += Get-AzStorageAccount
}

$storages | Select-Object -Property StorageAccountName, @{label="Sku"; expression={$_.Sku.Name}} | Group-Object Sku | Select Name, Count | Format-Table

```

You have a result like this :

```
Name Count
---- -----
Standard_GRS 1
Standard_LRS 15

```

On my tests subscriptions, only 5 subscriptions on this tenant, this script take around 10 seconds.

So the new ways, i can use Azure Resource Graph Explorer to help me on this request, i can use Powershell or Az cli to run my query, but i go use Azure Portal to help me write my query.

![](https://woivre.com/images/2020/02/24/azure-resource-graph-explorer-your-next-favorite-tool-img0.png)

This interface seems familiar if you use Log Analytics or Application Insights queries, and good news, it’s the same language for queries.

So i can list all my Storage Account by type with this simple query

```
resources
| where type == "microsoft.storage/storageaccounts"
| extend sku = sku.name
| summarize count(name) by tostring(sku)

```

And we have the same results, but with a process time less than 1 second…

Resource Graph Explorer is clearly good to explore your subscriptions assets with a language query already know and that we use every days.
Responsive grid with images or cards
Tags: html, css
Published: 2020-04-24 04:54:06

---
title: Responsive grid with images or cards
published: true
date: 2020-02-24 00:00:00 UTC
tags: HTML,CSS
canonical_url: https://fredhawk.com//writing/2020/grid/
---

 ![CSS Grid Example](https://fredhawk.com/5b8c6e95234db694eaa1aecc5f6025ab/cssgrid_example.gif)

The magic to make it act that way is the two css lines below.

```
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
```

  

Put this on the parent container and this will give you a responsive grid that adapts the columns with the size of the container.

  
Here is the whole code example to check out.<iframe title="codePen-rNVradR" height="500" style="width:100%" scrolling="no" src="https://codepen.io/team/codepen/embed/rNVradR?height=265&amp;theme-id=default&amp;default-tab=result" frameborder="no" allowfullscreen=""></iframe>
How PlateText switched to Firebase to scale and survive against traffic.
Tags: showdev, reactnative, firebase, chat
Published: 2020-02-23 23:57:27

PlateText - Text other drivers through their License Plate! https://platetext.com

When we started our adventure, we were using a self-hosted MongoDB instance and our backend on Google Cloud.

It was cheap. At least in initial costs. However, the cost of maintaining, scaling, monitoring, was not so cheap. Especially when we were seeing sudden traffic spikes that our MongoDB instance couldn't serve well.

🔥Since our recent switch to Firebase, we were able to ingest sudden traffic spikes without any issue, ANY! 🔥

We migrated all our MongoDB to Firebase. What's better? We got rid of our backend and use only the Firestore SDK along with the Firestore rules 🎉

Now that we have a solid use base, we are looking for ways to monetize our app, https://platetext.com, so we can continue to maintain, update and improve it.

Any suggestions are welcome!
What is DevOps?
Tags: devops
Published: 2020-02-24 04:10:03

---
title: What is DevOps?
published: true
date: 2020-02-23 23:41:35 UTC
tags: DevOps
canonical_url: https://chrislayers.com/2020/02/23/what-is-devops/
---

## DevOps

### What _Isn’t_ DevOps?

Before I define DevOps, let’s get started with what DevOps isn’t. DevOps isn’t just a title, or a guy, or a department. DevOps isn’t automating everying, and isn’t logging everything. DevOps isn’t dozens of alerts every day, and isn’t an on-call rotation. DevOps isn’t agile or small releases.

### What _Is_ DevOps?

The best definition I’ve seen is from [Donovan Brown](http://donovanbrown.com/post/what-is-devops), "DevOps is the union of **People** , **Processes** , and **Products** to _continuously deliver **value** _ to our end users". Donovan breaks down his word choice and what it means to him. To me, DevOps is a mindset that should be adopted company wide. Because of delivering value to our end users, you need a Production-First mindset. It’s not about delivering story points, delivering user stories, or deploying to qa.

### Half Measures

Have you ever been at a company that "Bought the Agile"? Doing Standups and Sprints but not understanding the why behind it. Agile is a promise of more work from fewer people, right? Have you ever heard,"Why are we doing retrospectives, that’s not a feature".

DevOps can be the same way. Perform a number of _actions_ and _activities_ but not adopt the _mindset_. **Why** are we automating things? **Why** and **what** should we log or alert on? **How** do we use this data or improve our processes and products?
Day36:Calculate sha1 with crypto and sha1 crate - 100DayOfRust
Tags: rust
Published: 2020-02-23 23:38:37

There are 2 crates you can use to calculate the sha1 value: `crypto` and `sha1`:

Cargo.toml:
```
[dependencies]
rust-crypto = "0.2.36"
sha1 = "0.6.0"
```

Example code:
```rust
use crypto;
use crypto::digest::Digest;
use sha1; 


fn main() {
    // use crypto crate to get sha1 hexdigest
    let s = "hello world";
    let mut hasher1 = crypto::sha1::Sha1::new();
    hasher1.input_str(s);
    let hex1 = hasher1.result_str();
    println!("digest: {}", hex1);

    // use sha1 crate to get sha1 hexdigest, simpler
    let hex2 = sha1::Sha1::from(s).digest();
    println!("digest: {}", hex2);
}
```

Cargo run:
```
digest: 2aae6c35c94fcfb415dbe95f408b9ce91ee846ed
digest: 2aae6c35c94fcfb415dbe95f408b9ce91ee846ed
```

To calculate other digest like md5, sha256 or hmac, you can check my [previous post here](https://dev.to/0xbf/day21-computer-md5-sha256-and-hmac-100dayofrust-nna).

### Reference:
* https://docs.rs/rust-crypto/0.2.36/crypto/sha1/index.html
* https://docs.rs/sha1/0.6.0/sha1/
How to monetize a free mobile app?
Tags: mobile, app, monetization, sideprojects
Published: 2020-02-23 23:10:06

Let’s say you have an idea about a mobile app which hasn’t been created yet, a kind of social network where people can help each other in a specific matter and everyone can be brought to use it maybe few times at least in a while, but the app should be free because is kind of human service.

How can someone monetize such app? Ads won’t bring a lot of income and are not welcomed by users, the only way I see is building a large user base and then you can sell the app to some big firm. Am I right or wrong in my thinking? Since this is the first time I’m building a project like this.
Alexa reads Reddit via Python
Tags: coding, pythonpractice
Published: 2020-02-23 22:27:33

Today I decided to branch out on my python studies by looking at an Alexa skill via python tutorial.

The tutorial shows how to get the top 10 headlines from a subreddit on reddit.com via a voice command. 

The most challenging part of it all was figuring out what dependencies were missing from my pc to run it. 

Cue lots of googling error messages and trying things until eventually the python module ran locally. So thankful for StackOverflow!

Then when it came to setting up the skill on developer.amazon.com 
I had to work around the difference between an old tutorial and an updated UI and differing Json models. 

It was a long slog but I'm proud of myself for seeing it through to the end! 

Pic below of successful test 😁

![Craic is 90!](https://dev-to-uploads.s3.amazonaws.com/i/g79xkizu3t0favjg8tmv.png)

I've added the code used to my github

https://github.com/ciara1234/CasualIrelandReader
👋 Hi, there fellow dev! Are you using Home Automation?
Tags: homeassistant, iot, smarthome
Published: 2020-02-23 22:24:20

👋 Hello, fellow dev! Don't mind me, I'm just new here saying; Hi! 👋


I was just wondering if you guys do something with home automation in general? 🏡


I could not find that much in here about the subject. IMHO, a bit of a shame, since well, I think it is a really nice hobby for a dev (after work hours).


Although considering my job, that doesn't really apply to me 😂. Nevertheless, I am using [Home Assistant](https://www.home-assistant.io) to power my home.


So, do you do any home automation?
Is there a good tutorial leading old-school devs through the new ecosystem?
Tags: javascript
Published: 2020-02-23 22:04:19

---
title: Is there a good tutorial leading old-school devs through the new ecosystem?
published: true
description: I'm old-school. I put <script> elements into pages, edited the JS and hit F5. Can someone lead me through how it works nowadays?
tags: JavaScript 
---
I'm old-school. I learned web dev when it meant putting &lt;script> elements into pages, editing the JS and hitting F5. Maybe shift-F5 on a bad day. 

If I needed another JavaScript library/plugin, I incorporated that into the page and hit F5 again.

I'm very much aware of two things in 2020:

1. Nowadays there are many more steps involved, there are build scripts and package managers and dependency managers and at least two versions of every project, the dev version you work on in the latest browser and the public build you serve up on the real-life website. There's something called gulp.
2. A lot of devs, even newly-trained devs, find it hard to keep up with all these new elements of the 'ecosystem' and there are frequently-changing trends in exactly how it's done and which tools are the best.

Is there a good tutorial which takes as it's first assumption that you don't know how this new mode of development is done? And also, of course, outlines why it's better?

If not can someone please write one?
Free and Fake APIs You Can Use to Practice Front End Development
Tags: career, productivity, codenewbie, beginners
Published: 2020-02-23 21:56:10

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

To practice front end development, we often need to practice making HTTP requests to APIs. To do this easily, we can use APIs that are already built so we can focus on front-end development instead of writing our own APIs to practice with.

We'll look at some free APIs you can use to practice.

# [Dog API](https://dog.ceo/dog-api/)

The Dog API is free and it provides us with endpoints for dog pictures and text data. It supports CORS so that we can use it directly from our front end apps.

# [Petfinder](https://www.petfinder.com/developers/v2/docs/)

This API provides us with pet adoption data. It requires OAuth for authentication in order to access the data. This API also supports CORS so we can use it from the front end.

# [shibe.online](https://shibe.online/)

shibe.online gives us URLs for cute dog pictures as data. It takes query strings that's used to query the API for data.

# [Anime News Network API](https://www.animenewsnetwork.com/encyclopedia/api.php)

If you like Anime, then this API is for you. It returns data in various formats like HTML or XML. Therefore, you'll have to convert to JSON from XML if you need to manipulate and display the data.

# [Jikan](https://jikan.moe/)

This is another anime data API. It's the unofficial API for MyAnimeList. There's a REST API that supports CORS in addition to libraries made for various platforms like Python, Ruby, and JavaScript.

# [JSONPlaceholder](https://jsonplaceholder.typicode.com/)

This provides an API with GET, POST, PUT, and DELETE requests and it supports CORS. The endpoints that it provides has preloaded data that we can use to display and also to update them.

# [REQ | RES](https://reqres.in/)

Like JSONPlaceholder, this provides a real API for you to build front-ends on. It has endpoints for all HTTP actions which are used for getting and manipulating fake user data. There's already data prepopulated so that you don't have to add them yourself.

# Conclusion

To focus on front end development practice, you can use these APIs to develop your practice front end app. Now you can worry about back end development later.
Bin2Dec converter
Tags: showdev, react, tutorial, javascript
Published: 2020-02-23 21:45:29

Today I present my simple project called Bin2Dec. The idea came from Florin Pop app ideas repository, which can be found there [florinpop17/app-ideas](https://github.com/florinpop17/app-ideas).

How it works you can see in the animation below. Check the live version too on [bin2dec.now.sh](https://bin2dec.now.sh)

![bin2dec converter landing page animation](https://bin2dec.now.sh/bin2dec.gif)

I implemented it with the Create React App boilerplate. The full source code can be found on my repository [epranka/bin2dec](https://github.com/epranka/bin2dec).

The following function converts the binary string to a decimal number.

```jsx
  const calculateDecimal = binaryString => {
    let decimalResult = 0;
    for (
      let i = 0, j = binaryString.length - 1;
      i < binaryString.length;
      i++, j--
    ) {
      const digit = parseInt(binaryString[i]);
      decimalResult += digit * Math.pow(2, j);
    }
    return decimalResult;
  };
```

Maybe you have the ideas on how to improve it?

**Bonus**

I created the inverted version of this converter too. It converts the decimal to binary. Check the source code on [epranka/dec2bin](https://github.com/epranka/dec2bin) and live version [dec2bin.now.sh](https://dec2bin.now.sh)

Thanks for reading this. I hope it was interesting to you. Feedback and questions are appreciated.

Follow on [Twitter](https://twitter.com/epranka), [GitHub](https://github.com/epranka), and let’s connect on [LinkedIn](https://linkedin.com/in/epranka)
Variáveis do tipo number, null, undefined e boolean
Tags: javascript
Published: 2020-02-23 21:32:24

Continuando com os artigos sobre os tipos de variáveis do javaScript, nesse iremos falar sobre os tipos numéricos, null, undefined e boolean.

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

**Number**
O primeiro passo é declarar uma variável numérica. Para uma variável ser tipada como number, o conteúdo da mesma não deve estar entre ''(aspas simples). 

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

As variáveis númericas também tem propriedades que permitem que sejam manipuladas conforme a necessidade do código.

A primeira propriedade que iremos aplicar é a toString(). O toString tem o poder de transformar uma variável numérica em string :

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

O atributo typeof utilizado, trata-se de um operador unário usado antes da variavel que determina o tipo da mesma.

É possível determinar o número de casas decimais com o propriedade toFixed, chamando a variável e passando por parâmetro na propriedade a quantidade de casas que queremos:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ut8ccqk7ril48m0aqu6.jpg)

Podemos pegar a uma variável que é string e transformá-la em float com a propriedade parseFloat:

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

Podemos pegar uma variável float e transformar em Int também com o parseInt:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4zbbp4j5ljmrt3zsgn6b.jpg)

__Null e Undefined__

Uma variável declarada usando a declaração var ou let sem especificar o valor inicial tem o valor  undefined:

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

Variáveis do tipo Null é como se fossem inicilizadas com '0'ou nulas:

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

__Boolean__

Variáveis que tem o tipo booleano determinam valores como 'true' ou 'false'.
Normalmente usadas em condições, vamos usar um exemplo um pouco mais avançado, no qual declaramos uma variável e checamos se a mesma é verdadeira ou falsa atrávés do 'IF' e 'Else':

*Condição Verdadeira:*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3z0e77xd12d4iusnogpq.jpg)                                                         

*Condição Falsa:*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ouxxpfvmdgeyfdkur6zg.PNG)

Por hoje encerramos aqui, espero que estejam gostando dos artigos. 
Lembrando que, se encontrou algum erro, tem algo para acrescentar, não esqueça de deixar seu feedBack. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9y7agh723yx0btvoat3y.jpg)
Web Development + Design Journey
Tags: codenewbie, 100daysofcode, webdev
Published: 2020-02-23 20:52:47

Hi guys! I’m new to the Dev community, self teaching myself web development + design. Recently, I obtained my Computer Technician Certification👩🏾‍💻 I plan on committing to the 100 Days Of Code, sharing my journey and connecting with others😊
Solving Project Euler Problem Everyday - Day 01
Tags: kotlin, eulerproblems, coding, challenge
Published: 2020-02-23 20:47:26

Find the sum of all the multiples of 3 or 5 below 1000.

I have used kotlin for this problem.

{% replit @Dvlprsanju/No1-Sum-of-all-3-or-5-divisible-number-less-1000 %}
Why did I start programming?
Tags: codenewbie
Published: 2020-02-23 20:13:10

My life as a programmer started about six months ago. Initially, my reason for starting was a mixture of boredom and curiosity. As someone who spends a lot of time on their computer, I’ve used hundreds, if not thousands of programs. The thought of “How the hell did someone make this?” has crossed my mind multiple times. Only half a year ago, that thought turned into “How can I make something like this?”. I then started to watch free coding course videos on YouTube, and that led to downloading my first text editor and using python. At this point, coding was just for fun. I was making primitive programs that weren’t even useful to myself, and having a great time with it. I hadn’t considered the possibility that my newfound hobby could turn into something more. That changed when I saw a YouTube ad for a school called Flatiron (shoutout to google for stalking my search history). I started the pre-work for the software engineering class, and found that being spoon-fed information was more efficient than attempting to teach myself. The thought of “How can I make something like this?” has now turned into “What will I make?”.