teleren/devto huggingface dataset:
JSON + Javascript Cheatsheet.
Tags: javascript, json, cheatsheet, webdev
Published: 2021-07-17 02:55:30

## Content 
* [Convert array to JSON](#1)
* [Parse JSON (convert from JSON to array)](#2)
* [Count JSON array length](#3)
* [Do loop with JSON array](#4)
* [Get data from JSON array](#5)
* [Add item to JSON array](#6)
* [Remove item from JSON array](#7)

## Convert array to JSON <a name="1"></a>
```javascript
var myArr = {
    key: value,
    key2: value2
};

var myJSON = JSON.stringify(myArr);
```

Result: 
```javascript
'{"key":"value","key2":"value2"}';
```

## Parse JSON (convert from JSON to array) <a name="2"></a>
```javascript
var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);
```

Result: 
```javascript
{
    key: value,
    key2: value2
};
```

## Count JSON array length <a name="3"></a>
```javascript
var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

var jsonLength = myArr.length;
```
Result:
```javascript
2
```

## Do loop with JSON array <a name="4"></a>
```javascript
var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

myArr.forEach(function(nowItem) {
    // Do things here
})
```

## Get data from JSON array <a name="5"></a>
```javascript
var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

console.log(myArr["key2"]);
```

Result:
```javascript
value2
```

## Add item to JSON array <a name="6"></a>
```javascript
var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

myArr["key3"] = "value3";
```

myArr result: 
```javascript
{
    key: "value", 
    key2: "value2", 
    key3: "value3"
}
```

## Remove item from JSON array <a name="7"></a>
```javascript
var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

delete myArr["key2"];
```

myArr result:
```javascript
{
   "key": "value"
}
```
Advice to my younger self in college
Tags: college, advice, personaldevelopment
Published: 2021-07-17 02:36:03

---
title: Advice to my younger self in college
published: true
description: 
tags: college, advice, personaldevelopment
//cover_image: https://direct_url_to_image.jpg
---
There comes a time after a student graduates where he reflects back upon his journey through the undergraduate days, usually right after his graduation. These are the four things that I wish I had known as an undergraduate student back in college.

## 1. Focus on personal development
![Invest in yourself](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4ufahix7ljf2b2gipqf.jpg)
First, I wish I hadn't gotten into the rat race to achieve stellar grades or bag prestigious internships at the top companies, just out of peer pressure. As the definition of success varies from individual to individual, it does not make too much sense to focus exclusively on these goals. I'd instead advise students to spend the extra time they get from attending classes to carry out personal development activities, especially those that they'd likely not get the time to work on once they start a full-time job.

## 2. Think long term
![Avoid short term thinking and embrace long term thinking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4up2blydqmii2qg4pjs.jpg)
It is important to develop hobbies outside of work that you can derive a sense of purpose from or find enjoyment in, so that you can keep yourself buoyed up when the going gets tough in your full-time job.

## 3. Connect with your professors
![Maintain a good relationship with your professors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm86ph50gzhvirjydosi.jpg)
Third, form meaningful relationships with your professors by connecting with them after classes. This will help you in the long run, as the professor is likely to refer you to opportunities that will benefit you from a career perspective or within the college to develop skills.

## 4. Take all advice with a pinch of salt
![Take all advice with a pinch of salt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzdfn5x5fhasxigglv2l.jpg)
 
Last, but not the least, all advice given to others is from that individual's perspective. People will always have some regrets when they reflect back upon their college days. So take this advice with a pinch of salt and enjoy the college journey while you can!
Nested pseudo-classes + the "&" operator in Sass
Tags: css
Published: 2021-07-17 01:59:40

basically, all of my css was written before i heard about this. so now im going back and nesting all my sub classes and pseudo selectors. it's going to reduce them so much! here's some benefits 
* it's a great way to organize elements of your page styles
* you can use pseudo selectors and subclasses in the definition of the parent element
	* helps keep all variations of a single element in a single block of code
	* improves legibility - esp. if you have the right theme going!!

here's some examples. starting with a simple one, this defines the size of a **tag element** [for the bottom of each page] and then also styles the text inside the tag: 

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5csl6ry2f8v7ssz14pd.png) 

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cruuz821kmkix2oxjil4.png)

this next one is a little more complex, describing the styling of link buttons for the page footer -> here's what we've got going: 
* the first properties all describe the container for the links
* the `img` pseudo selector styles the link images into circles
* the ` a:hover` pseudo selector styles mouseover behavior
* the `&.black` operator styles a subclass for some of the pages where the bg of the entire element wants to be black instead of white

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44xqpz2qz7webgvyae2h.png) 
![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz0w8new3j43ntbqn04n.png)


in both cases i'm showing the code as written in SASS and then what it compiles to in the CSS file. you wont really look at the main.css file often, as the reason [or my main reason, anyhow] to break it up into a bunch of smaller sass files is to deal with pages or complex elements individually. by using this nesting syntax, you get to further organize sub-pages or elements in a way that i find quite visually satisfying and better for my organization as well! 

**note** - the pseudo elements and subclasses in the Sass shown got highlighted like errors in `carbon` which is why they are pink like that  - but it improved the legibility in the examples so i left it. the theme i use in VSCode actually highlights them in a different color which i quite like. none of the available carbon themes actually do that so i kept the error highlighting in. 

incidentally the theme i use currently is called **Neon Glow** `nickscialli.neon-glow-theme` and i think it's pretty rad. it also works great for nested Sass styling:

![code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h7m39j5euc0e6r9666f.png)


* carbon code snippet beautifier here: https://carbon.now.sh/
What is the "units sold" metric for software teams?
Tags: productivity, metrics
Published: 2021-07-20 15:37:07

---
title: What is the "units sold" metric for software teams?
published: true
date: 2021-07-17 00:00:00 UTC
tags: productivity,metrics
canonical_url: https://jhall.io/archive/2021/07/17/what-is-the-units-sold-metric-for-software-teams/
---

Most businesses have a core metric they follow. “Units sold” is a great one for many types of businesses. For other businesses, it might be revenue. For a non-profit it might be whales saved.

What is the core metric for software, then?

Well, in some cases it can just as well be “units sold”. This usually applies to commercial software, though, such as games, iOS apps, or WordPress plugins. For a [SaaS](https://en.wikipedia.org/wiki/Software_as_a_service) business, it might be subscriptions sold, or revenue.

But what if you work on software that supports some other kind of business? Maybe your software handles payroll, logistics, data warehousing, or any other business support function, what’s your “units sold” metric?

Unfortunately, I think you probably don’t have one.

Most software serves a support role, and therefore is somewhat removed from the core business function. In fact, even in commercial software and SaaS businesses, most software in use at the company is in a support role.

There are some proxy metrics we often measure in such situations: Defect count, lead time, or even utterly terrible ones such as lines of code. But every one of these metrics can be misused, if it’s not the key business metric. Even the best metric can easily become a vanity metric.

For example: If we optimize lead time so much that we can get new features to customers in 15 seconds, but the features we’re pushing out don’t affect the number of units the main business sells, it’s a waste. So never let the key business metric too far out of sight.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Day 410 : Take It Easy
Tags: hiphop, code, coding, lifelongdev
Published: 2021-07-16 22:03:41

_liner notes_:
- Professional : Woke up feeling kind of sick. I don't know if it's because I woke up pretty early yesterday and had my 3 hour workshop. Decided to take it easy today. Worked a little on a demo project and helped answer a community question.

- Personal : Last night, I went through a bunch of tracks for the radio show and watched an episode of "Fire Force". Also did some research on topics for the radio show and show on Sunday. I was pretty wiped after the workshop and went to sleep.

![A mountain in Oahu, Hawaii with some trees on the ground in front of it.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tep5sqltlhkr9ruc3fm0.jpg)

Going to finish up putting together tracks for the radio show. Watch an episode of "Fire Force" while eating dinner. I also want to look into more topics for the Sunday show. Have a great weekend!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube lQJ5nIJIjz0 %}
The 3 most common DOM selectors
Tags: javascript, webdev, css, html
Published: 2021-07-16 23:46:59

Hello, on this amazing day, we'll discuss the 3 most common Javascript selectors.

## getElementById

**getElementById** is used to return an element using his id. If there is no element with the giving id, it returns null.

```html
<h1 id="logo">Aya Bouchiha</h1>
<script>
    const logo = document.getElememntById('logo');
    const img  = document.getElementById('img'); // null
</script>
```

## querySelector

**querySelector** is used to return the first element that matches the giving CSS selector.

```html
<input type="search" placeholder="search" />
<script>
const searchInput = document.querySelector("[type='search']");
</script>
```

## querySelectorAll
**querySelectorAll** is used to return all elements (*as a NodeList object*) that matche the giving css selector.

```html
<div>Hi</div>
<div>Bonjour</div>
<div>Salam</div>
<button onclick="changeColor()">To Blue</button>
<script>
const changeColor = () => {
  document.querySelectorAll("div").forEach(div => div.style.color="blue")
}
</script>

```
## Summary

+ **getElementById**: for selecting an element using his Id
+ **querySelector**: for getting the first element that matches the giving css selector
+ **querySelectorAll**: for returning as a NodeList object All elements that matche the giving css selector.


Happy codding!
Outcome-based Development w/ Bryan Finster
Tags: devops, agile, delivery, continuousdelivery
Published: 2021-07-16 23:21:03

Continuous Delivery isn’t about how fast you can deliver, it’s about the outcome your delivery achieves. 

In this week’s episode of the [Dev Interrupted podcast](https://devinterrupted.com/podcast/outcome-based-development/) we talk with Bryan Finster, author of [5-minute DevOps](https://bryanfinster.com/), about outcome-based development and why failing small is better than failing fast.

#**Listen to the full episode**
{% spotify spotify:episode:3A11veWuh6y4DWmhBQYFem %}

#**Episode Highlights include:**
* What is Outcome-based Development?
* What is the true goal of Continuous Delivery?
* Why failing small is better than failing fast.
* The most common pitfalls dev teams find when trying to optimize their delivery process.

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
Sparky's Tool Tips: Fancy Zones
Tags: tooling, windows, productivity
Published: 2021-07-16 23:13:05

> *Not strictly a developer tool, but devs usually have lots of app windows open at the same time, and I'm sure you'll find this useful.*

> *...and when I say "windows" I mean Windows windows. There's probably something similar in the macOS world, but the last Apple product I used was a ][+, so I can't give you any advice about that.*

Windows 10 has extremely basic support for window dragging and "snapping". If you drag a window off the side of the screen, you'll see a transparent overlay over that horizontal half of the screen and if you "drop" the window, it will snap/dock to fill half of the screen.

Fancy Zones, one of the [Microsoft PowerToys utilities](https://docs.microsoft.com/en-us/windows/powertoys/), lets you do something, well... fancier.

The Fancy Zones layout editor lets you define "drop zones". There are several default templates, but if you want to get "fancy", you create a custom layout:

![Fancy Zones editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh4ivab35y2mgyana720.png)

If you have multiple monitors, you can set up different layouts on each.

When you're dragging a windows and press the Shift key, the drop zones light up, and if you drop the window onto a zone, it will snap to fill the zone. Here it is in action on my machine:

![Fancy Zones drop zones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adylc5xx4wj4xwcf4qmo.jpg)

A developer can't be expected to work with a measly five screens😏, so I've got my wide monitors set up with side-by-side zones and my "portrait" left-side monitor set up with top and bottom zones so I can easily rock eight or nine docked windows at a time.

Fancy!

---

PowerToys also has a lot of other goodies:
- Color Picker
- File Explorer add-ons
- Image Resizer
- Keyboard Manager
- PowerRename
- PowerToys Run (a mini version of [Wox](http://www.wox.one/) - spoiler alert: Wox will be the subject of one of my future "favorite tools" posts.

---

P.S. I forgot to mention the price - There ain't one - It's free!
Right-to-Left in a web platform (1/6)
Tags: css, webdev, a11y, javascript
Published: 2021-07-16 22:33:13

## Introducing Right-to-Left

If you are trying to build an international web platform and you want it to be **accessible anywhere in the world**, then, RTL (right-to-left) compatibility is not a just a "luxury", it is a real necessity.

*This series are obviously being written by someone who is used to see and read things from a LTR (Left-to-Right) perspective his whole life, or else, this wouldn't even make sense, because RTL would just be the standard.*

### First Step

So let's say, you wanna introduce RTL in your web platform, and you have no idea where to start. And so, you start to look around the internet or even ask your colleagues, and you come up to read or hear something like this:

> *It's just needed to change the direction in the html tag and it will be ready…*

Well kinda, **but not really**.

Yes, it will solve more than 50% of your problems and it is a really good starting point, and in my opinion, the right start, but obviously, it isn't enough if you really wanna build something accessible and deliver a good UX to your users.

#### Problems solved by adding `dir="rtl"` to the html tag:

1. Every block element and table columns will now start on the right and flow from the right to left;
2. The text will also flow from right to left;


#### Why changing document's direction is not enough
![Image after changing document's direction](https://cdn-images-1.medium.com/max/1600/1*HBlMWA8PD9T0Eia3a6KtNA.png "After changing the document's direction")

**After changing the document's direction**, this section already looks quite different in both versions, but if you take a closer look, you will see that there are some differences in the visual effect of certain elements.

What I mean is, you should be able to know, that the text is related with the image, without really thinking about it. But in the RTL version, that was not achieved.

*And why was that not achieved?* - you may be wondering.

Well, that's just because that image was positioned using some sort of **physical CSS properties**. Which are pretty much all the css properties that include the keyword `left` or `right`.

`margin-left, margin-right, padding-left, padding-right, left, right...`

And these properties, don't really care about the document's direction, as `right` still means "right", doesn't matter from which to which place you are reading.

### Conclusion

1- Adding `dir="rtl"` in the html tag is the correct first step;
2- There will be still a lot of problems to solve after that;
3- Physical properties might be evil.

### Next Chapter

On the next chapter, we will be talking more in depth about physical properties and how we can leverage **logical properties** to make a RTL compatible web platform.
Using google sheets as a database
Published: 2021-07-16 22:11:23

---
title: Using google sheets as a database
published: true
description: Outlines a set of future articles relating to using google sheets as a database
tags: 
series: Google sheets from PHP
//cover_image: https://direct_url_to_image.jpg
---

I am planning to write a series of articles which will show how google sheets can be connected to an used as a database for an application. This article will outline the post plan and also provide an overview of how I am going to structure the application.

Now I am using google sheets as a good way to prototype an application and also a lot of my user base are comfortable using google sheets as a way of managing their data.

The application itself will be the my budget tool that I showed how to create in a previous set of articles. What I will be doing is enhancing that application so that it will connect to google sheets to save data there.

The application URL is here if you would like to play around with the current application:

https://my-easy-budget.herokuapp.com/index.php

I am planning to write the following set of articles outlining how I build this application to save data to google sheets.

1. Testing and planning REST calls using Postman
2. New pages to handle OAuth authentication
3. Obtaining an OAuth access token from google
4. Application design and flow
5. Future plans

Please let me know in the comments if there is anything else you would like to see me write about.
Pragmatic Incident Response: 3 Lessons Learned from Failures
Tags: incidentresponse
Published: 2021-07-16 21:54:04

In my past experience as an SRE I’ve learned some valuable lessons about how to respond and learn from incidents. 

1. ___Declare and run retros for the small incidents.___ It's less stressful, and action items become much more actionable. 

2. ___Decrease the time it takes to analyze an incident.___ You'll remember more, and will learn more from the incident. 

3. ___Alert on pain felt by people — not computers.___ The only reason we declare incidents at all is because of the people on the other side of them. 

Let’s dive into each of these lessons a little deeper, and how they can help you build a better system for pragmatic incident response.

[Read the full post here](https://firehydrant.io/blog/pragmatic-incident-response/?utm_source=devto&utm_medium=organic&utm_campaign=evergreen).

This post was originally published on the [FireHydrant Blog](https://firehydrant.io/blog/?utm_campaign=evergreen&utm_medium=referral&utm_source=devto) on July 15, 2021 by [Robert Ross](https://firehydrant.io/authors/robert-ross/).
Working Together (but Separately) with MirageJS
Tags: miragejs, api
Published: 2021-07-16 21:46:43

Front-end development and APIs — you’ll rarely see one without the other, but they don’t always get up and running at once. Maybe you’re developing a completely new feature that relies on a nonexistent endpoint, or perhaps the endpoint is just out of date, missing key chunks of data. Front-end and back-end are being built simultaneously, but one isn’t available to the other just yet.

[Read the full post here](https://firehydrant.io/blog/working-together-but-separately-with-miragejs?utm_source=devto&utm_medium=organic&utm_campaign=evergreen)

This post was originally published on the [FireHydrant Blog](https://firehydrant.io/blog/?utm_campaign=evergreen&utm_medium=referral&utm_source=devto) on June 17, 2021 by [Hilary Beck](https://firehydrant.io/authors/hilary-beck).
Quantum Computing Summer School has been great!
Tags: python, programming
Published: 2021-07-16 21:43:36

I've posted a little on Hashnode, but I want to crosspost between Dev.to and Hashnode. Thankfully, I found a wonderful tool from a Hashnode user to do just that. It's not currently working for me to crosspost from Hashnode to Dev.to, so I'm now trying the other way around!

I'm attending QubitxQubit's Quantum Computing Summer School held in partnership with IBM. I'm attending it through Bergen Community College, which paid the tuition! I'm a total beginner and the summer school has been structured in such a way that learning has been incredibly easy to do and hasn't been stressful.

This week, we learned about circuits and we did Python coding in the lab section. After four hours of the school today after having not slept last night, I'm in a superposition of being awake and being asleep!

The school will run until August 6th and at the end of it, I'll get a nice certificate from IBM to display on Credly. Next week, we'll get into the mathematics of it all!

I'm going to admit that all the people constantly typing into the chat is overwhelming for me. It's nothing that I can't handle, though.

Edit: I've deleted my crossposted post on Hashnode. Crossposting from Dev.to to Hashnode resulted in a post on Hashnode that didn't look too elegant. If I want to crosspost in the future, I believe that I'll use a paid solution.
Install composer on Amazon AMI running on EC2
Published: 2021-07-16 20:41:37

If you need install composer on Amazon AMI running on EC2 run this command.

```
cd ~
sudo curl -sS https://getcomposer.org/installer | sudo php
sudo mv composer.phar /usr/local/bin/composer
sudo ln -s /usr/local/bin/composer /usr/bin/composer
```

then you can run 
```
sudo composer install
```