teleren/devto huggingface dataset:
Looking for Great Headphones
Tags: hardware, discuss, headphones
Published: 2019-11-14 00:35:56

I've generally been working with cheap headphones. I currently have a pair of [MPow H7](https://www.amazon.com/Mpow-Headphones-Comfortable-Rechargeable-Microphone/dp/B07C48ZYXR) headphones. They're not bad for a non-audiophile, but I am not fooling myself into thinking these are premium noise-cancelling headphones.

I have never considered a high-end set of headphones because I've broken every pair I've ever owned at some point. I'd like to think I'm a little more careful these days with them though, so I think it's time to grab a solid upgrade.

I'm looking for Bluetooth, noise-cancelling, great sound and ideally a great built-in microphone. An optional wired option would be nice as well. Ideally, I would like to spend no more than 350$ USD. It's a chunk of change, but I'm in it for the long haul with whichever headphones I decide on.

I'm going to throw out a couple here that I might consider, but I'd love to hear peoples suggestions as I've only begun my research.

* [Bose QC-35 II](https://www.bose.ca/en_ca/products/headphones/over_ear_headphones/quietcomfort-35-wireless-ii.html)
* [Sony WH-1000XM3](https://www.amazon.ca/Sony-WH1000XM3-Canceling-Headphones-WH-1000XM3/dp/B07G4MNFS1)
* [Sennheiser PXC 550](https://www.amazon.ca/Sennheiser-PXC-550-Wireless-Cancelling/dp/B01E3XLNA0/)


![Yeah](https://media.giphy.com/media/zOdOzXm2UvdXW/giphy.gif)

Photo by [Frank Septillion](https://unsplash.com/@septillion?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/headphones?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
How to draw tech sketchnotes
Tags: devrel, showdev, beginners
Published: 2019-11-14 00:10:26

I attended Denise Yu's tech doodling and sketchnoting workshop in August and have wanted to make a video documenting my learning ever since. Finally got around to publishing the video this month. Here it is:

{% youtube dHyht32yysc %}

Key takeaways:
- 3 components of tech sketchnotes: People, emotions, and layouts and banners
- How to draw people: stick people, tooth people, star people.
- How to show emotions: Use the 3X3 matrix of eyebrows and smiles
- Layouts: Grid or path
- Use low-fi metaphors

Try out Denise's techniques and let me know if you enjoyed them as much as I do :)
What's the Difference between link preload, preconnect and prefetch
Tags: webdev, link, optimization, lighthouse
Published: 2019-11-15 05:20:22

---
title: What's the Difference between link preload, preconnect and prefetch
published: true
date: 2019-11-14 00:00:00 UTC
tags: webdev,link,optimization, lighthouse
canonical_url: https://george.mand.is/2019/11/whats-the-difference-between-link-preload-preconnect-and-prefetch/
---

Lately I've been running [Lighthouse](https://developers.google.com/web/fundamentals/performance/resource-prioritization) audits some of my client projects as well as my own. With my own projects I typically regard it as an opportunity to dive into some nitty-gritty optimizations that I might typically ignore for a client, only because the billable hours might be better spent elsewhere.

One of those areas of optimization is resource prioritization with links tags such as these:

```
<link rel="preload">
<link rel="preconnect">
<link rel="prefetch"> 

```

I was generally aware of these and had even used them, but I wasn't actually aware of the difference between most of these offhand. When the Lighthouse audit recent led me to the [Google Developer documentation about resource prioritization](https://developers.google.com/web/fundamentals/performance/resource-prioritization) I saw a chance to get better acquainted with the differences between them.

It'll probably _serve_ you best (Pun!) to remember them in this order:

- `preload`
- `preconnect`
- `prefetch`

Any time you use one of these `<link rel="pre*">` tags you're telling the browser about a resource that you think is more important than others on the page and should be prioritized over them, in some fashion. The order that they're presented in above is basically in order from the "most" important of the important things to the least.

How exactly are these things prioritized? Well, rather than completely plagiarize some excellent documentation (which I started to realize was going to happen as I kept writing this blog post) you can read more about the details of each of these here:

[https://developers.google.com/web/fundamentals/performance/resource-prioritization](https://developers.google.com/web/fundamentals/performance/resource-prioritization)

Here's my short summary of when you might use these:

- **`preload`** : Use for fonts and super-critical assets that you absolutely know you'll be using.
- **`preconnect`** : Use for CDNs or any resource you know you'll be loading from another domain.
- **`prefetch`** : Any content we _thnk_ we'll need soon after some kind of user interaction. An interesting example is to prefetch the HTML content for another page that we think the user will be navigating to.
developers without coding
Tags: career
Published: 2019-11-13 23:42:40


Hello,
my first job was IT operations then I got promoted to the development department because of my experience in the spring framework .but I was introduced to dead, old tools.
it was IBM WebSphere portal/server and it comes with IDE that has nothing close or related to programming. it was all about drag and drop items called builder, and each item has set of configuration. despite the lack of resources, I managed to learn it very well, and helped the team to reduce repetitive tasks.but, after one year I feel I'm wasting my time, and lost. because I did not gain new worthy experience, and I didn't improve my programming skills.
So, what would you do if you were in the situation? and is it common thing that corporations use such cursed products?
Day 33 : That Old Alarm
Tags: hiphop, code, coding, lifelongdev
Published: 2019-11-13 23:27:16

_liner notes_:

- Professional : Got up early for a couple of presentations. Oh man, that old alarm! haha While I was up, I checked to see if there was a reply for a possible solution for the community member that had a question. The way they had things set up really wouldn't do what they want to accomplish. I hopefully got that across in my reply. I included graphs and everything. haha. Rest of the day, I've been working on the set up for the application I'm making. I am working on a process to make it easy for other team members to spin up a copy of the application and get it running easily. Thinking I may need to set up a database to keep track of some things. Firebase?

- Personal : Last night I was able to get Markers placed on the map in my Sapper/Svelte app! It's not exactly the same way that the Svelte tutorial added a map and markers. I think I'm understanding it to the point where I can see how to get things to work when things are different. Next, I would like to create some controls that will go from one Marker on the map to another. I would like to also go through some tracks for this week's radio show.

![A green hill with a single tree in Munnar, India](https://thepracticaldev.s3.amazonaws.com/i/9cxbxzn6n83x9wzww5zl.jpg)

Tomorrow, I want to get the setup for the replication of the app coded so an admin account can be created. After work, there is a Orlando JavaScript meetup. Hoping to maybe showcase my Vote by Phone application that I made at the end. Going back to working on this map.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube jdJD78WBNYc %}
JAMstack Roundup for November 13th 2019
Tags: webdev, javascript, react, graphql
Published: 2019-11-13 23:13:14

###Here are some great articles, videos, and podcasts that educated us this week!

1. [Why and When to Use GraphQL](https://dzone.com/articles/why-and-when-to-use-graphql-1)

    To overcome the downsides of using the great REST API, Facebook developed GraphQL, an open-source data query and manipulation language for APIs. 📊

2. [How to create a simple Vue.js app in 5 minutes](https://dev.to/duomly/how-to-create-a-simple-vue-js-app-in-5-minutes-5fg3)

    Vue.js is getting more and more popular, becoming a meaningful competitor to frameworks like Angular or React.js. As a beginner-friendly front-end framework, it successfully conquers the hearts of junior front-end developers and people who just started to learn front-end programming. 🚀

3. [JAMstack & Serverless with Netlify](https://devmode.fm/episodes/jamstack-serverless-with-netlify)

    On this episode, we talk to Shawn ​“swyx” Wang from Netli­fy about the JAM­stack & Server­less rev­o­lu­tion in fron­tend development. ✊

4. [React Hooks vs. Svelte](https://dev.to/jesseskinner/react-hooks-vs-svelte-1i9m)

    I get asked a lot on my Twitch channel to show a comparison of React and Svelte. I thought I'd record a short video to show everyone how to take a basic React example and rewrite it using Svelte. 📹

5. [How the JAMstack inspired me to start blogging](https://ramigs.dev/blog/how-the-jamstack-inspired-me-to-start-blogging/)

    This is the story about how discovering and exploring the JAMstack has inspired me to finally kick off my blogging ventures. 📝
JavaScript Basic String Functions
Tags: javascript
Published: 2019-11-13 22:47:13

---
title: JavaScript Basic String Functions
published: true
description: 
tags: JavaScript
---


Here are some of the most fundamental JS string functions.

Assume the code below is declared at the top level in the following examples.

```javascript
var string = "string"
```

# Changing the case

## toLowerCase()

Converts a string to lowercase letters.

```javascript
let s6 = "STRING".toLowerCase();
console.log(s6); //=> "string"
```

## toUpperCase()

Converts a string to uppercase letters.

```javascript
let s7 = string.toUpperCase();
console.log(s7); //=> "STRING"
```

# Searching for a substring

## indexOf(subst, pos)

It looks for the substr in a string, starting from the given position pos.

```javascript
console.log(string.indexOf('i')) //=> 3

let string2 = 'string string'

console.log(string2.indexOf('string', 2)) //=> 7
```

## includes()

Checks whether a string contains the specified string/characters.

```javascript
console.log(string.includes("s")); //=> true
```

## match()

Searches a string for a match against a regular expression, and returns the matches.

```javascript
const regex = /\w/g;
let s4 = string.match(regex);
console.log(s4); //=> ["s", "t", "r", "i", "n", "g"]
```

# Getting a substring

## slice()

Extracts a part of a string and returns a new string.

```javascript
let s2 = string.slice(0, 3); ///=> str
console.log(s2);
```

## substring()
Extracts a part of a string and returns a new string.

```javascript
let s2 = string.substring(0, 3); ///=> str
console.log(s2);
```
# Transforming a string

## split()

Splits a string into an array of substrings.

```javascript
let s1 = string.split("");
console.log(s1); //=> ["s", "t", "r", "i", "n", "g"]
```

## concat()

Joins two or more strings, and returns a new joined strings.

```javascript
let s3 = string.concat("string");
console.log(s3); //=> stringstring
```

## replace()

Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced.

```javascript
let s5 = string.replace(/s/, "S");
console.log(s5); //=> String
```

## trim()

Removes whitespace from both ends of a string.

```javascript
let s8 = " strn g   ".trim();
console.log(s8); //=> strn g

let s9 = "  string  ".trimLeft();
console.log(s9); //=> "string  "

let s10 = "  string    ".trimRight();
console.log(s10); //=> "  string"
```

## References

- [w3schools.com](https://www.w3schools.com/jsref/jsref_obj_string.asp)
Day3:structs,enum - 100DayOfRust
Tags: rust
Published: 2019-11-13 22:44:18

## Struct

Use `struct` to build structure, and you can destructure the struct using a `let` binding:

```rust
struct Point(i32, i32);
    
struct Rect {
    top_left: Point,
    bottom_right: Point,
}

fn rect_area(rect: &Rect) -> i32 {
    // here we used a nested destructuring
    let Rect { top_left: Point(x1, y1),
               bottom_right: Point(x2, y2)} = rect;
    let width = x2 - x1;
    let height = y2 - y1;
    width * height
}

fn main() {
    let rect = Rect {top_left: Point(1, 2),
                     bottom_right: Point(3, 4)};
    let area = rect_area(&rect);
    println!("Area of rect is {}", area);
}
```

Result:
```
Area of rect is 4
```

## Enum

```rust
enum Operator {
    Add,
    Sub,
    Mul,
    Div,
}

#[allow(dead_code)]
type Op = Operator;


// we can implement methods for enum
impl Operator {
    fn run(&self, i: f32, j: f32) -> f32 {
        match self {
            Operator::Add => i + j,
            Operator::Sub => i - j,
            Operator::Mul => i * j,
            Operator::Div => i / j,   
        }
    }
}

fn main() {
    let adder = Operator::Add;
    let suber = Operator::Sub;
    let muler = Operator::Mul;
    let diver = Operator::Div;
    let num1 = 3 as f32;
    let num2 = 4 as f32;
    println!("{} + {} = {}", num1, num2, adder.run(num1, num2));
    println!("{} - {} = {}", num1, num2, suber.run(num1, num2));
    println!("{} * {} = {}", num1, num2, muler.run(num1, num2));
    println!("{} / {} = {}", num1, num2, diver.run(num1, num2));

}
```

Result:
```
3 + 4 = 7
3 - 4 = -1
3 * 4 = 12
3 / 4 = 0.75
```

#### Enum can be used as C-like enums

```rust
enum Color {
   Red = 0xff0000,
   Green = 0x00ff00,

}
```

#### Enum with different type

```rust
enum WebEvent {
    PageLoad,
    KeyPress(char),
    Click {x: i64, y: i64},
}
```
Problem Solving Process
Tags: productivity, problemsolving
Published: 2019-11-13 22:21:41

This is a short list I follow when I need some solution to solve problems.

#### 1. What's going on?
Identify the problem

#### 2. What do we know?
Collect data

#### 3. What are the root causes?
Analyze the data

#### 4. What could we do?
Brainstorm, generate solutions

#### 5. What's the best thing to do?
Select solution

#### 6. How do we go about it?
Planning

#### 7. Have we solved the problem?
Implement and test

#### 8. Can we improve on what we have done?
Continue to improve
UI Engineer - fully remote, open-source project
Tags: javascript, react, opensource, career
Published: 2019-11-13 21:33:06

Join us building a native toolkit of [React UI components](https://github.com/aragon/aragon-ui) for decentralized apps, based on the [Aragon Design System](https://ui.aragon.org/)

You:
- Previous experience working closely with product designers
- Previous experience working in UI components and animations

Us:
- Fully open-source project: check out our [Github](https://github.com/aragon/aragon-ui)
- Fully remote team
- Work for a cause. Read about our [Manifesto](https://blog.aragon.org/the-aragon-manifesto-4a21212eac03/)

Check out the [full listing to apply](https://aragon.one/#ui-engineer)
Ruby and Bang(s)
Tags: ruby, beginners
Published: 2019-11-13 20:48:21

Chances are during your course of learning ruby, you will come across some exclamation marks in your ruby code. Most people know this as a plain ol' "exclamation mark" (!). And they are happy with that. But not us Rubyists! we call these little guys bangs. If you are like me when you first saw this operator, you may have been a little intimidated by its implications and implementations. However, studying the documentation and practicing the functionality can help us understand the use of bangs. In this post I will discuss pairing bang methods with other built-in ruby methods and what that means for your code. 

**What is a bang?**
When paired with other built-in ruby methods, the bang operator will change the original object the method is called on in place of creating a new object. 
For example let's say we have an array of numbers and we only wanted to see the the unique numbers in that array. Luckily for us, ruby has a built in method called .uniq.
``` ruby
array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 9, 9, 9, 9]
array.uniq 
```
This would output 
``` ruby
=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```
When we then call the original array object, ruby will output just that. The original unaltered array. 
``` ruby
array
=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 9, 9, 9, 9]
```
When we pair the .uniq method with the bang operator, we seemingly accomplish the same thing.
```ruby
array.uniq!
=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```
However, when we call on the original array object, something different happens. We no longer have access to all of the original elements particularly those we excluded with the .uniq method. This is due to the functionality of the bang operator. Remember, the bang operator works with ruby's methods to alter the existing object- not create a new object.
```ruby
array 
=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

At first glance, this seems, great! We can clean up our code and cut out many lines of code without having to assign new variables to new objects created by our built in methods. If only that were the case. The bang operator has another functionality. When called, it coerces our data into boolean expressions and inverts the truth value of that data. 
For example...
```ruby 
!true
=> false
!false
=> true
```
Let's take another look at our array. It's not unlikely that at a later point we would want to call on our array object. However, if we were to forget that we had previously called the .uniq! method, and we used that method again... 
```ruby 
array.uniq!
=> nil
```
we would no longer get our array of unique elements. Instead we would receive a nil value. This is due to the bang operators boolean inversion functionality. 

**Conclusion**
The bang operator has its use in ruby and in a later article I will discuss more practical applications of the bang operator. like != or not equals to and the double bang (!!) operator. However, it is important to understand what a bang does and how it modifies methods first. Because the bang operator is destructive by nature, use caution when pairing it with other methods
How does your company choose between two possible solutions?
Tags: discuss, architecture, productivity
Published: 2019-11-13 21:15:32

Hi everyone 👋

I want to find out more about what strategies do other companies have when dealing with problems that have multiple, seemingly equally good solutions? Maybe when discussing the topic of integrating new technology, or when solving a difficult edge-case?

Is there a process behind it? Are you thinking more short-term or long-term? What happens if you made the wrong choice?

I'd love to hear about any and all of your experiences. Thanks!
gcloud SSLHandshakeError
Tags: googlecloudsdk, gcp, gcloud
Published: 2019-11-13 21:05:52

If you find yourself behind a corporate proxy and need to disable SSL validation for `google-cloud-sdk`, here's the setting for it

```sh
$ gcloud config set auth/disable_ssl_validation True
```


Ideally, you should set the path to custom trusted certs using this command:


```sh
$ gcloud config set core/custom_ca_certs_file /path/to/certs.pem
```
the new features of AutoMapper in .net
Tags: csharp, dotnet, automapper, showdev
Published: 2019-11-13 20:34:59


# Table Of Contents
        * [What is Automapper?](#Automapper)
        * [New features](#Features)
        * [Installation](#Installation)
        * [How to Use Automapper?](#AutomapperApplication) 

# What is Automapper? <a name="Automapper"></a>

AutoMapper is an object-object mapper. Object-object mapping works by transforming an input object of one type into an output object of a different type. What makes AutoMapper interesting is that it provides some interesting conventions to take the dirty work out of figuring out how to map type A to type B. As long as type B follows AutoMapper’s established convention, almost zero configuration is needed to map two types.

# New features <a name="Features"></a>
        * Remove static API
{% gist 
 https://gist.github.com/DiogenesPolanco/7246cf607b8e197c8fec343c76777b4d %}
the way to do it now is:
{% gist 
 https://gist.github.com/DiogenesPolanco/259c9c753a796da06dbe87ac77feee18 %}
        * Remove dynamic maps
{% gist 
 https://gist.github.com/DiogenesPolanco/721baf646f1014503af6ba43b5b40b50 %}
the way to do it now is:
{% gist https://gist.github.com/DiogenesPolanco/02734cd5355d6dec07e54af5b31ae8b7 %}
        * Update Conditional Mapping  
{% gist https://gist.github.com/DiogenesPolanco/a94319036c87612094850ab41c168291 %}
        * Help the runtime find the AM assembly
{% gist https://gist.github.com/DiogenesPolanco/3be822c9bc0db6f7cfeb23e65bf09caf 
%}

        * Match destination enumerable types with it's enumerable for LINQ
{% gist 
 https://gist.github.com/DiogenesPolanco/a1449e8858b96954e1b7a019034aa777 %}

# Installation <a name="Installation"></a>
The first step is to install the corresponding NuGet package:
```
dotnet add package AutoMapper --version 9.0.0   
```

# Now, what is the way to Use Automapper? <a name="AutomapperApplication"></a>
{% gist https://gist.github.com/DiogenesPolanco/33393d0d4e6e2d2aa12ac6ece999d20d %}

 
# <a href="https://github.com/DiogenesPolanco/AutoMapperDemo.git">You can clone my code!</a>
How do you learn?
Tags: discuss
Published: 2019-11-13 19:57:29


First of all, thanks to everyone contribution. 
I also found @swyx's [Learn In Public (NYC)](https://www.swyx.io/writing/learn-in-public/) article and [Learn in Public - React Knowledgeable](https://www.youtube.com/watch?v=-f-rZepNKW0) video that offer additional and even broader cues.

A futher interesting reading is @oieeaaaa's [Why do you code?](https://dev.to/oieeaaaa/why-do-you-code-3i67) In fact, this would be my next question :D

---

I recently [commented](https://dev.to/maxdevjs/comment/hlg3) on [What are you learning?](https://dev.to/jasterix/what-are-you-learning-b4p), but I quickly realized (after the first five characters) that my comment is more about the `how` than the `what`. 

At times, to learn certain topics can feel as a pretty boring duty. Consequently I chose creative/generative coding (an activity that appeals to me) as booster. I currently adopted a somewhat `chaotic`, `eclectic` (broader?) routine.

As part of this routine, and when possible, I often take a working code in some other language to translate it, iteratively "improving" and when possible, learning how original features could be translated too, as Python `zip`, `range` functions to `ES` (vulgo `JavaScript`).

Not sure `how` it could work in a medium or long term, so far it is pretty funny and efficient for me.

So, I have to ask now: 

**How do you learn?**

Any suggestion, hint, tip (!) will be very welcome. And  good learning to everyone :D