teleren/devto huggingface dataset:
Sorting an Array of Number Strings in JavaScript
Published: 2020-05-04 04:47:31

Okey dokey, the binary tree hiatus continues, because my node deletion post got out of hand and I need to get a post up in the next couple hours and I am *tired* y'all. 

So I'm gonna write a quick post about a function in JavaScript that I found really confusing for a long time - I guess no one satisfactorily explained to me what was going on, so it just looked like gibberish.

You ask the internet how to sort an array of numbers in JavaScript, and they'll tell you this:

```
arr.sort(function(a, b){return a-b});
```

Honestly my brain looked at that and went... *Huh?*
Ultimately it really is not very difficult, but no one had properly explained to me why each piece of this does what it does. So I'm gonna lay it out.

First, the basics of the JavaScript sort method. The language has a built in function ` sort() ` that can be applied to an array. Take for example, this array of integers:

```
let arr = [2, 6, 3, 8, 54, 846, 4]
arr.sort()
console.log(arr) // [2, 3, 4, 6, 8, 54, 846]
```

That did just what you expected, really. Now we'll apply it to an array of strings:

```
let arr = ['cat', 'monkey', 'apple', 'apples']
arr.sort()
console.log(arr) // ['apple', 'apples', 'cat', 'monkey']
```

You can even mix integers and string representations of numbers, like so:

```
let arr = [2, "6", 3, "8", 54, 846, 4]
arr.sort()
console.log(arr) // [2, 3, 4, "6", "8", 54, 846]
```

But there's a wrinkle. See what happens to the following array:

```
let arr = ["8", "4", "54"]
arr.sort()
console.log(arr) // ["4", "54", "8"]
```

Because it's comparing these elements as strings, not integers, "54" comes before "8" because it starts with "5". That's probably not what you were going for. Let's take another look at that fancy nonsense from above now:

```
arr.sort(function(a, b){return a-b});
```

The problem I had upon first seeing this was that I was trying to interpret this logically, reading the code on its face. I didn't realize this is a case of another built in method for JavaScript. The function is actually an optional parameter, called the compareFunction, that allows you to define an alternative sort order.

Per the [W3schools page](https://www.w3schools.com/jsref/jsref_sort.asp) on the subject, 

>When the sort() method compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.

The magic is that by performing an operation (subtraction) on the numbers in question, JavaScript converts them to integers. So it receives `"54"` and `4` and  returns 54 - 4. That's a positive number, so the sort method knows to put 4 first. If you wanted to sort in descending order, you could use this instead:

```
arr.sort(function(a, b){return b-a});
```

Personally I think this is some pretty clunky syntax to remember, but it's what we've got!
Migrate From Hadoop To Apache Spark
Tags: Hadoop, Apache, Spark, BigData
Published: 2020-05-04 04:08:58

Link: https://blog.joshsoftware.com/2020/04/29/migrate-from-hadoop-to-apache-spark/

A variety of data from different resources gets generated because we have a huge volume of data and this process remains in continuous flow which will create more data in future. This huge volume of data is called Big Data and storing this Big Data is a problem for us.

Hadoop became one of the most popular tool which uses a distributed system to store and process this data to solve the problem. But now we have a new tool Apache Spark which is a more efficient tool which is based on top of Hadoop distributed file system (HDFS).
Why did I decide to study Software Engineering?
Published: 2020-05-04 04:02:41

   It all started in my high school years when I held the first smartphone with colors. I was intrigued by the features that it had. It was the first laptop on your hand kind of technology that I fell in love with. Then within years past by, smartphones have always developed and I knew what I wanted to pursue and study in!
   After I graduated from high school I went on to graduate in Computer Science for I.T. and never went back. I had a job in Quality Control for software devices and I realize that I want to expand my passion to code and teach others how to code, so one day I can have my own business to help the community.
An overview of different types of personality
Tags: motivation, career, business
Published: 2020-05-04 04:01:55

Recently I've had a course on Carrer and Personality Profiles by Dr. Luiz Hanns. In that course, I was presented with a different view of personalities based on your way of thinking about a business in general.

Dr. Luiz summarize those personalities as follow: 
* Entrepreneur by nature: those who are more likely to get into self-business based on a biological or more often, environmental condition.

* Entrepreneur by needing: those who don't actually search for self-business their whole life, but instead saw a good opportunity to make a profitable business out of an idea.

There's yet another type that caught me the attention: the scientist. According to Dr. Hanns, this type is moved by a riddle, an idea per see. When they like their search field and what they do nothing can stop them and it's almost certain that they are going to be the best in their field.

I always considered myself a lover of basically everything related to the technology industry. After my technical course on mechatronics, I discovered a whole bunch of different areas that I could work with but still stick to the engineering field. That's why I choose to go to the Computer field of engineering. The feeling that the possibilities are endless was always what moved me in the first place. So based on Dr. Hans's talk, I definitely consider myself a scientist.

Hans also takes time to talk about 6 traits that are needed to get higher jobs positions, which I'll try to describe myself:
* Engagement in experiment and get new knowledge: I think that this is the trait that is more vivid on me. I'm always open to trying new things and see what we can get from it.

* Wish for independence: this is basically talking about being proactive. Every time that I see a problem that I got previously knowledge on it, I usually stand front it.

* Interpersonal skill/emotional intelligence: this is the most tricky of the 6 to me. I usually know how to deal well with critics and opinions from outside, but at the inside, I'm constantly charging myself, and sometimes I can get frustrated with when I can't get the job done. This usually means that I put some effort into the wrong way.

* Frustration: it's basically the same relation as stated above, I can adapt well to circumstances, but know that a whole project fails because of me always let me down.

* Relation with error: every time that I have the spaces and resources necessary to explore and go deeper into a problem, I run for it. It's a waste of time not to try something just because of the fear of committing a mistake.

* Planning: this is just the most important part of any project. If you don't have a plan, you'll not just be more error-prone (which again, can lead to unnecessary frustration) but also will have no counter answer for when things get of control.

## Conclusion

That study was a good experience of realization. Know a little more of yourself is the key to getting better not just in the professional approach, as well in the personal approach.
Day38:Use default value - 100DayOfRust
Tags: rust
Published: 2020-05-04 03:44:46

We can use `Default::default` to give variable a default value.

Example:
```rust
use std::fmt;

enum CrustType {
    Thin,
    Thick
}

impl Default for CrustType {
    fn default() -> CrustType {
       CrustType::Thin
    }
}

#[derive(Default)]
struct PizzaConfig {
    has_cheese: bool,
    num_of_olive: i32,
    special_msg: String,
    crust_type: CrustType
}

impl fmt::Display for PizzaConfig {
    fn fmt(&self, f:&mut fmt::Formatter) -> fmt::Result {
        let crust_type = match self.crust_type {
            CrustType::Thin => "Thin",
            CrustType::Thick => "Thick"
        };
        write!(f, "Pizza: [cheese: {}] [number of olive: {}] [msg: {}] [Crust: {}]", 
               self.has_cheese, self.num_of_olive, self.special_msg, crust_type)
    }
}

fn main() {
    let order: i32 = Default::default();
    println!("Order: {}", order);

    let pizza: PizzaConfig = Default::default();
    println!("{}", pizza);

    let cheese_pizza = PizzaConfig {
        has_cheese: true,
        num_of_olive: 10,
        ..Default::default()
    };
    println!("{}", cheese_pizza);

    let delux_pizza = PizzaConfig {
        has_cheese: true,
        num_of_olive: 10,
        special_msg: "Happy Birthday".to_string(),
        crust_type: CrustType::Thick,
    };
    println!("{}", delux_pizza);
}
```

Here we use default values for 4 cases:
1, Assign an i32 value a default value, which is 0
2, Implement the `default` method for self-defined enum type
3, Use `derive(Default)` to give our struct some default value (integer is 0, boolean is false, string is empty string, enum type will choose the what `default` method returned)
4, When define our struct instance, after specify some value for some fields, for the rest fields, we can use `..Default::default()` to give them default values.

Run:

```
Order: 0
Pizza: [cheese: false] [number of olive: 0] [msg: ] [Crust: Thin]
Pizza: [cheese: true] [number of olive: 10] [msg: ] [Crust: Thin]
Pizza: [cheese: true] [number of olive: 10] [msg: Happy Birthday] [Crust: Thick]
```
How to automate a Linux OS installation on Virtualbox
Tags: linux
Published: 2020-05-04 03:37:46

---
title: How to automate a Linux OS installation on Virtualbox
published: true
description: Automate installation of a Linux OS using Simple-CDD and Virtualbox. Running a script to install Linux on a Virtualbox VM then automate the installation of packages and configuration.
tags: linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ayjwu7kk9pfpnrlme846.jpg
---

{% youtube ypkItN4d4Y0 %}

Automate installation of a Linux OS using Simple-CDD and Virtualbox. Running a script to install Linux on a Virtualbox VM then automate the installation of packages and configuration.
How To use Google Maps in Nuxt.js Project without Any package or heavy library
Tags: nuxt, vue, javascript
Published: 2020-05-04 03:10:37

This approach was further Improved after doing further research and troubleshooting. 

https://dev.to/bawa93/troubleshooting-and-adding-google-maps-to-individual-nuxt-js-pages-1d34


Packages like vue2-google-maps and numerous others are available to use google maps in VueJs, But in my experience, those packages do not go well with Nuxtjs. and I am also of the thought that other packages or library should only be used when it's highly required.

These packages might help you in the short term but they are overkill in the long term as they have a lot of unnecessary abstraction.

What is a better approach?

I recommend using Google maps library directly and include that library only in those components where you will actually need it. There is a number of reasons for this approach.

- It will make sure heavy maps API code is loaded only where it is required.
- You have access to all the direct methods available on maps API
- You are keeping yours away from another open-source library. who know when the support for the open-source package you are using get ended :)


Here is how you can include Google maps Library in only those components where it is required.

pages/test.vue
```
<script>
const apiKey = process.env.GOOGLE_MAPS_API_KEY; // Package: @nuxtjs/dotenv
export default { 
  head() {
    return {
      script: [
        {src: `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`}
      ]
    };
  },
  methods: {

  },
  mounted() {
    var input = this.$refs.searchTextField; //.getElementById('searchTextField');
    new google.maps.places.Autocomplete(input);
  },
  data() {
    return {};
  }
};

</script>
<template>
  <div>
<input class="input" ref="searchTextField" type="text">
  </div>
</template>



```

That's all you have to do. If your app is heavily reliant on Google maps library you can edit the head section in nuxt.config.js.
Como instalar Terraform en Linux
Tags: terraform
Published: 2020-05-04 02:33:38

La Infraestructura como Código ha sido una revolución a lo que se refiere a la creación de infraestructura y automatización en general. Por ello, en este artículo te enseñaré a como instalar Terraform

Para que puedas instalar Terraform, antes necesitarás instalar *unzip*, ya que con ello podrás descomprimir el archivo. Si estás usando una distribución basada en Debian, puedes usar el comando:

`$ sudo apt-get install unzip`

Ahora tienes que verificar la versión actual de Terraform, para eso dirígete a su [página web](https://www.terraform.io/downloads.html) y mira la versión que se encuentra actualmente

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

Una vez que conoces la versión actual, puedes descargar Terraform, variando la sección "***/0.12.24/terraform_0.12.24***", por la versión correspondiente

`$ wget https://releases.hashicorp.com/terraform/0.12.24/terraform_0.12.24_linux_amd64.zip`

Después de que finalice la descarga, descomprime el zip.  

`$ unzip terraform_0.12.24_linux_amd64.zip`  

Ahora tienes que moverlo a la carpeta donde se encuentran los binarios  

`$ mv terraform ~/bin`

Y... ¡Listo! Ya tienes Terraform instalado, para comprobar si está funcionando puedes usar:

`$ terraform -v`


En caso de que seas como yo, y utilices una distribución basada en [Arch Linux](https://www.archlinux.org/), gracias al inmenso repositorio que tiene, simplemente puedes saltarte todos los pasos anteriores y usar  
`$ sudo pacman -S terraform`
You've got space for one more sticker. This one!
Tags: stickers, nonbinary, typeerror
Published: 2020-05-04 02:30:09

---
title: You've got space for one more sticker. This one!
published: true
description: 
tags: #stickers #nonbinary #typeerror
cover_image: https://images.unsplash.com/photo-1507331943611-54bff9e7cbbb 
---

It's a known fact that developers love stickers, I mean come on - it just makes sense. When it comes to conferences, you'd be lying if you said you didn't get excited at the thought of getting your hands on some cool little stickers. Yes, there are developers who prefer to have a laptop with a clean slate, but even if you're one of those people I'm sure you have a few (or more than a few!) laying around or stuck on other objects.

Stickers are more than just an added punch of color, they're a way of expressing yourself! They're like little badges of pride showcasing your accomplishments and what you've learned. They speak on your beliefs, on causes you support, on conferences you've been to.. on who YOU are as a person!

Yesterday on [Twitter](https://twitter.com/heysarahpaz/status/1256732232745725953) I shared a picture of a sticker a friend gave me and wow, was I surprised with how much love it got!

![TypeError Sticker](https://dev-to-uploads.s3.amazonaws.com/i/liq6u4g68y3xbamofg9n.jpg)

Over 780 retweets, 3.6k likes, and so many supportive messages from developers from all over wanting to add it to their collection. Not only that, they wanted to order multiple to share with friends and within their communities - I absolutely loved that! Sooo, we had to make it happen!

I spoke to my friend ([Danielle](https://twitter.com/thrivensunshine)) and she spoke to her friend (the designer of this incredible sticker! - [Graham](https://twitter.com/grahamaden)) to get the ball rolling. 

A couple hours later...

Baaam! :boom: They're available on [Redbubble](https://www.redbubble.com/shop/ap/47685989)! Not only that, all profits will be donated to [TransTech Social Enterprises](https://www.transtechsocial.org/)!

So like the title of this blog post says, you've got room for one more sticker. This one! Show your support, while supporting a great cause. 

If you do make a purchase, please be sure to share pics of your laptop (or wherever you choose to stick them!) with us! We'd love to see!

Thank you! :heart:

___
Photo by [imgix](https://unsplash.com/@imgix) on [Unsplash](https://unsplash.com)
Javascript Ternary Operators
Published: 2020-05-04 02:03:17

**If** statements are an essential building block to executing logic within Javascript.  Lets take a look at an example of a traditional **If/Else** statement:   ```
function checkNum(a) {
  if (a > 0) {
    return "positive";
  } else {
    return "negative";
  }
}
console.log(checkNum(23));
// expected output: "positive"
```

Ternary operators allow us to write concise **If/Else** statements, we can write the same function above with a ternary operator like this:
```
function checkNum(a) {
  return (a > 0 ? "positive" : "negative");
}
console.log(checkNum(-6));
// expected output: "negative"
```

In this function, the condition **a > 0** is followed by **?** and two expressions.  The first expression listed, in this case "positive", will return if the condition is true.  The second expression which is separated by **:** will return if the condition is NOT true. Like so: ```
condition ? expressionIfTrue : expressionIfFalse
```
Functions in Sass
Tags: sass, beginners, css, architecture
Published: 2020-05-04 01:04:00

---
title: Functions in Sass
published: true
description: Notes and reference on Sass
tags: sass, beginner, css, architecture
series: SASS basics
---
The final piece of the puzzle is functions.
Defining a function in Sass is similar to the syntax for a mixin: 
```sass
// a variable that holds a value for use later
$w: 2px;

// defining the function
@function double($x) {
  @return 2 * $x;
}

.thin-border {
  border-width: $w;  // results in a 2px border-width
}
.thick-border {
  border-width: double($w); // results in a 4px border-width
}
```
Using function and combining them with other features of Sass, such as conditionals, allows for great flexibility when coding your CSS. 

Hope you enjoyed this series! If you want more details and experience practicing the syntax with exercises, check out the course on which these notes are based [here](https://frontendmasters.com/courses/sass) at Frontend Masters, and big thanks to them and Mike North such great material!
BEM CSS Architecture and Sass
Tags: sass, beginners, css, architecture
Published: 2020-05-04 00:53:22

---
title: BEM CSS Architecture and Sass
published: true
description: Notes and reference on Sass
tags: sass, beginner, css, architecture
series: SASS basics
---
###BEM
BEM is a way of architecting your html in such a way that you can use a conventional set of classes in your CSS to style your pages using a system/convention. The way I think about it is that you group sections of the page together in a way that makes sense, and apply flags or toggles to the html in order to apply styles to it. 

BEM stands for Block Element Modifier:
- Block: a standalone entity, meaningful on its own (e.g. header, container, menu, checkbox, input, button).
- Element: a part of a block that has no standalone meaning and is semantically tied to its block (e.g. menu-item, list-item, header-title).
- Modifier: a flag on a block or element, used to change appearance and/or behavior (e.g. disabled, highlighted, checked, size-big, color-yellow).

There is a convention for BEM elements: double underscores after the block name indicates you're defining an element inside a block, and double dashes mean that you're defining a modifier. In the `label` element below is an example of an element inside a block (`textfield__label`).
```html 
<div class "textfield">
  <label for="first-name" class="textfield__label">
    First Name
  </label>
  <input name="first-name" type="text" class="textfield__input" />
```
The use of this convention prevents collision with other elements because it is unlikely that another element will have the same class. Sass makes building these easier because of the ability to use the parent selector. 
```sass
.textfield {
  &__input {}
  &__label {}
  &__validation-error {}
}
```
Continuing with the html example from above, the html would then look something like this:
```html
<div class "textfield textfield--state--validated">
  <label for="first-name" class="textfield__label">
    First Name
  </label>
  <input name="first-name" type="text" class="textfield__input" />
  <span class="texfield__validation-error">
    Must be two characters or longer
  </span>
</div>
```
Note that because the parent selector can only be used once, there is a specific way to write the rules for the block element itself, which is why the `textfield` appears after the parent selector in the modifiers below: 
```sass
.textfield {
  &.textfield--state-error {}
  &.textfield--state-validated {}
}
```
Sass Data Structures
Tags: sass, beginners, css, stylesheets
Published: 2020-05-04 00:46:08

---
title: Sass Data Structures
published: true
description: Notes and reference on Sass
tags: sass, beginner, css, stylesheets
series: SASS basics
---
#####Lists
A list is an ordered collection (aka an array) separated by either spaces or commas, but it's best to pick one stick to it. Mixing spaces and commas will end up creating lists within lists, which may not have been intentional. The syntax looks very similar to a property list, and is intended to mirror CSS, which, for example, will have a mix of space and comma separated values for multiple shadows, which can be read about [here](https://css-tricks.com/almanac/properties/b/box-shadow/#article-header-id-3).
**Lists are NOT zero indexed, they are one indexed.**

The `@each` loop is a handy way to iterate through lists because it is a bit more flexible than a for loop: it will run once for each item in the list, regardless of size. The syntax for lists below creates a new block comment for each item in the list inside the `foo` class: 
```sass
// lists
$myList: 0 0 2px #000;
// results in [0, 0, 2px, #000]

// if a comma was added, and more values with spaces:
$myList: 0 0 2px #000, 1 2 3;
// results in [0, 0, 2px, #000, [1, 2, 3]]

.foo {
  @each $i in $myList {
    /* #{$i} */
  }
}
```

#####nth
`nth` is another familiar term from programming, which is a method on a list that has two parameters: the list of values (array), and the item to pluck out (i.e. the nth index). Note that like lists, nth is NOT zero indexed, it is one indexed. Note that in some cases, the parentheses are optional, but for clarity and to avoid unexpected results, it may be best to default to using them:
```sass
$gradients:
(to left top, blue, red),
(to left top, blue, yellow);

.foo {
  // sets the linear gradient to the second item 
  background: linear-gradient(nth($gradients, 2));
}

// sets the background to the second item in the gradients list
```

#####Maps
Maps are `key: value` pairs, like objects in JS or hashmaps in many other languages. They resemble CSS property value combinations, which, after all, are key: value pairs themselves.
```sass
$myMap: (
  dark: #009; light: #66f;,
);

@mixin theme-button($t) {
  /* Theme: #{$t} */
  color: map-get($myMap, $t);
}

.btn-dark {
  @include theme-button("dark");
}

// CSS
.btn-dark {
  /* Theme: dark */
  color: #009;
}
```