teleren/devto huggingface dataset:
JS&Friends Conf: Querying NoSQL with SQL - Matthew Groves
Tags: javascript, conference, nosql, couchbase
Published: 2019-08-18 01:58:10

---
title: JS&Friends Conf: Querying NoSQL with SQL - Matthew Groves
published: true
description: Summary of the talk by Matthew Groves at JS&Friends
tags: javascript, conference, nosql, couchbase
series: jsandfriends2019
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pz1avso4lhunp9wa58qw.jpg
---

## Querying NoSQL with SQL - [Matthew Groves](https://twitter.com/mgroves)

![Matthew Groves](https://thepracticaldev.s3.amazonaws.com/i/xm0xgbfksx3mi5a6mibw.jpg)

I had always wanted to read up more on NoSQL databases and how they differ from relational databases. I have worked with SQL for 14 years so the relational design & structure is strong in how I think of table schema.

Matthew explained the benefits of using NoSQL over SQL: scalability (spin up more servers or cluster them if needed), flexiblity (no strict schema needed), and performance. He noted that we don't have to totally abandon relational databases - they can coexist.

While relational databases link separate tables by foreign keys, the JSON document model (the format NoSQL uses) can place related data in the same document as the main record. These extra pieces might be array objects if it contains more than one instance of child data. Other documents for seperate concepts can be created and referenced by a key.

Once he explained the concepts behind NoSQL, he showed us that queries (very similar to SQL's) can be created to find data. This is called N1QL (pronounced _nickel_) which is a Couchbase-centric query language. Azure Cosmos has something similar as well. Other NoSQL platforms would need to use aggregate functions which, to me, don't look very readable at first glance.

```sql
SELECT field
FROM `bucket` /* buckets contain logical groups of data-items */
WHERE otherfield = somevalue
/* JOINs are possible too! */
JOIN `otherbucket` ON (bucket.id = META(otherbucket).id)
LIMIT number;
```

N1QL queries return JSON objects that we can parse in our native coding language.

If there's anything to take away from this talk, Matthew says it's these 3 things:

- Pick the right application. Whether it's NoSQL or SQL, use what makes sense.
- JSON data is modeled differently. The structure of a document may be very different than a table.
- Query NoSQL data with SQL. So much easier to write.

[← Back to main JS&Friends article](https://dev.to/aromig/my-first-dev-conference-javascript-friends-fh7)
JS&Friends Conf: Test Them JavaScripts - Rob Tarr
Tags: javascript, conference, testing, mocha
Published: 2019-08-18 01:57:39

---
title: JS&Friends Conf: Test Them JavaScripts - Rob Tarr
published: true
description: Summary of the talk by Rob Tarr at JS&Friends
tags: javascript, conference, testing, mocha
series: jsandfriends2019
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pz1avso4lhunp9wa58qw.jpg
---

## Test Them JavaScripts - [Rob Tarr](https://twitter.com/robtarr)

![Rob Tarr](https://thepracticaldev.s3.amazonaws.com/i/a1dvuimw28113ggzbazh.jpg)

Rob of [Sparkbox](https://seesparkbox.com) started his discussion on testing with a few questions for us:

- What does testing mean to your team?
- How do you test?
- How often do you test?

Some answers:

- Piece of mind, consistency
- Manually in browser, while developing (TDD), with testing libraries
- Rarely, all the time, during CI, before pushing to repository

He continued with why we test our code. It does give us piece of mind & consistency as well as giving confidence in the code and ourselves & designing better software because of it. But where do we start - especially when web development has had a culture _not testing_ for so long? For whatever reasons, it's hard, there's no time or it's just an afterthought.

Rob listed out a few testing frameworks: Mocha, Ava, Jest, & Jasmine; though he was going to concentrate on Mocha (with the Chai add-on) for this short session. He mentioned different _runners_ to use to initiate the tests: Grunt, Gulp, Karma, Make, npm.

Establishing boundaries of what to test is a very important point so that time is not wasted testing things that were (probably) already tested. He called it the concept of mowing your own yard. Don't test libraries and APIs. Just test _your_ code.

I believe there was supposed to be more to the talk and possibly examples of how to start writing the tests - where do I begin? But with only 50 minutes available, it may have been cut short of that. I am aware of my knowledge gap in automated testing and I will definitely educate myself more on it.

[← Back to main JS&Friends article](https://dev.to/aromig/my-first-dev-conference-javascript-friends-fh7)
JS&Friends Conf: Mastering Shadow DOM - Martine Dowden
Tags: javascript, conference, shadowdom, webcomponents
Published: 2019-08-18 01:57:18

---
title: JS&Friends Conf: Mastering Shadow DOM - Martine Dowden
published: true
description: Summary of the talk by Martine Dowden at JS&Friends
tags: javascript, conference, shadow-dom, web-components
series: jsandfriends2019
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pz1avso4lhunp9wa58qw.jpg
---

## Mastering Shadow DOM - [Martine Dowden](https://twitter.com/martine_dowden)

![Martine Dowden](https://thepracticaldev.s3.amazonaws.com/i/25bm2tjoelbz6ine2yun.jpg)

Martine showed us how to create web components using just HTML and vanilla JavaScript - that's right, no framework!

We learned what Web Components and Custom Elements are as well as how the Shadow DOM works to give us the ability for encapsulated reusable components. After reviewing basic DOM manipulation with JavaScript, she showed us how to create a web component using those techniques by bringing back the `<blink>` tag!

**Defining our tag**

JavaScript

```javascript
// blink.js
const Blink = (function() {
  "use strict";

  class Component extends HTMLElement {
    constructor() {
      super();
      // Create shadow root
      const shadow = this.attachShadow({
        mode: "open"
      });

      // Wrap text content with a span tag
      const wrapper = document.createElement("span");

      // Make a slot for text
      const slot = document.createElement("slot");
      slot.setAttribute("name", "content");
      wrapper.appendChild(slot);

      // CSS animation styles
      const style = document.createElement("style");
      style.textContent = `
        @keyframes blink {
          0%   { visibility: hidden; }
          50%  { visibility: hidden; }
          100% { visibility: visible; }
        }
        /* :host selects shadow root host */
        :host { animation: 1s linear infinite blink; }
      `;

      // Append
      shadow.appendChild(wrapper);
      wrapper.appendChild(style);
    }
  }
  customElements.define("wc-blink", Component); // can't use <blink> - it's still reserved
})();

export { Blink };
```

**Putting it to use**

HTML

```html
<script>
  import { Blink } from "./blink.js";
</script>

<!-- prettier-ignore -->
<wc-blink>
  <h1 slot="content">
    Look Ma, I'm blinking!
  </h1>
</wc-blink>
```

I learned a bunch in this session on how the Shadow DOM is used to make custom elements and the benefits & limitations of such. I walked away with an understanding that it is possible to create a component-based site/application without a framework if need be. Though certainly the additional features of a framework may outweigh the freedom of independence, it is good to know there are options.

[← Back to main JS&Friends article](https://dev.to/aromig/my-first-dev-conference-javascript-friends-fh7)
ISP Throttles When Not Using Their Router
Tags: router
Published: 2019-08-18 01:46:59

I have Cincinnati Bell 50mbps service. Fiber to Ethernet converter outside, with an Ethernet receptacle inside. I have an Archer C8 WiFi router. When I plug the Archer directly into the ISP Ethernet I only get 10mbps download (https://192-168-1-1ip.biz/). I have to connect the ISP Zyxel modem/router first, then my Archer to get my full 50mbps. I have WiFi disabled on the Zyxel https://www.19216811.biz/. What gives? Any ideas how to get my full 50mbps without the stupid Zyxel? https://19216811-login.info/
Announcing Bootstrapr
Tags: bootstrap, frontend
Published: 2019-08-18 01:09:34

Need a free and open source tool for creating quick and easy Bootstrap 3 components? So...I made that. 

https://randal-sean-harrison.github.io/bootstrapr/

Bootstrapr is designed for...

- *Coders*: You already write HTML and perhaps use the Bootstrap 3 libraries, and - want to rapidly build and customize Bootstrap components for full-featured, Bootstrap-enabled mobile-friendly websites.

- *The code-friendly*: You’re at least rooouughly familiar with the basics of HTML, perhaps less familiar if at all with Bootstrap. Still, you’d love to to add powerful, easily-customizable Bootstrap components to any of the many 3rd-party applications built on Bootstrap, such as Canvas, Moodle, Sakai, LibGuides, etc. — especially if you didn’t have to write any code?

### Components include

Accordions, Alerts, Blockquotes, Buttons, Carousels, Clickable Checklists, Code Wells, Columns, Font Awesome Icons, Glyphicons Icons, Images, Image Grids, Jumbotrons, Labels, Lists, Media Lists, Modals, Panels, Popovers, Symbols, Tables, Tabs and Pills, Video, Whole Pages

Best part is it’s free and open source (MIT). Use the tool on the gh-pages frontend (bit.ly/bootstrapr) or download it and adapt it to your purposes.
Default values while Destructuring in JavaScript
Tags: javascript, showdev, webdev
Published: 2019-09-04 08:31:43

---
title: Default values while Destructuring in JavaScript
published: true
tags: ['javascript', 'showdev', 'webdev']
canonical_url: https://learnwithparam.com/blog/default-values-while-destructuring-in-javascript/
---

Just before showing the example, we will see how to do destructuring in basic examples

#### Destructuring Objects

```js
// for simple object
const obj = {
  name: 'Param',
  city: 'Tallinn',
  age: 20,
  company: 'Learn with Param OU',
};

const { name, age, ...rest } = obj;

console.log(name); // Param
console.log(age); // 20
console.log(rest); // { city: 'Tallinn', company: 'Learn with Param OU', }
```

#### Destructuring Arrays

```js
const personArr = [
  {
    name: 'Param',
  },
  {
    name: 'Ahmed',
  },
  {
    name: 'Jesus',
  },
];

const [first, ...restOfArr] = personArr;

console.log(first); // { name: 'Param' }
console.log(restOfArr); // [{ name: 'Ahmed' }, { name: 'Jesus' }]
```

### Destructuring not defined variable

What will happen if we destructure an undefined key in the object. Example,

```js
const firstObj = {
  name: 'Param',
  city: 'Tallinn',
  age: 20,
  company: 'Learn with Param OU',
};

const { firstName, city } = firstObj;

console.log(firstName); // undefined
console.log(city); // Tallinn
```

### Default value while destructuring

Now we can pass in default value while destructuring, it will take the default if it is undefined. Example,

```js
const secondObj = {
  firstName: 'Param',
  country: 'Estonia',
};

const { lastName = 'Harrison', country } = secondObj;

console.log(lastName); // Harrison
console.log(country); // Estonia
```

Here in this example, even though `lastName` is not defined in object, it takes the default value we assigned while destructuring.

This will be very useful when you want to have default values set in your application even if there is no value in the object.

#### Edge case while setting default value in destructuring

This has an edge case though, destructuring will work well with default value if the value is undefined. It won’t work for other non true values, for example `null`, `0`, ‘false’.

Let see it in example,

```js
const edgeCase = {
  why: undefined,
  what: null,
  how: 0,
  where: false,
};

const {
  why = 'why',
  what = 'what',
  where = 'where',
  how = 'how',
  notFound = 'Not Found',
} = edgeCase;

console.log(why); // why
console.log(what); // null
console.log(how); // 0
console.log(where); // false
console.log(notFound); // Not Found
```

Hope you enjoyed and learnt some tricks about destructuring in javascript 😎

Checkout the whole example here,

{% replit @ParamHarrison/destructuring-with-default-values %}
Objects for mapping
Tags: showdev, javascript, webdev, beginners
Published: 2019-08-18 10:18:40

---
title: Objects for mapping
published: true
tags: showdev, JavaScript, webdev, beginners
canonical_url: https://atila.fassina.eu/map-set/
---

Mapping `key` to `value` attributes has been done the same way in JavaScript for basically its entire existence. Chances are you either wrote or read it more times that you can count:

```js
let dictionary = {
  id: 'foo',
  url: 'bar',
  last_update: new Date()
}
```

## Caveats of Objects

Also, chances are more than once you had to transform that into an `array` to get around. You see, objects aren't really great for mapping variables because (1) they aren't iterables. Besides the obvious difficulty of iterating through an object (`Object.entries()`, `Object.keys()`, `Object.values()`), there is also an aggregated side effect of they not being iterable, you cannot check the **size** or **length** of an object.

Another important point in some use-cases is that the developer is not able to trust the **order** in which the `object` will store its keys (at least for numeric keys, where behavior can change depending on engine).

## Interlude: Weakmap

A Weakmap holds a key/value reference, but holds a weak reference between them. The point of this, is to allow it to be more easily garbage collected, so if there's no other reference to the `key`, it can be collected. This means that there's no method to retrieve size nor iterate through a **Weakmap**.

Also, it carries interesting requirements: the key cannot be of a primitive type, as a matter of fact, it **needs** to be an `object`. Though it holds a possible advantage against using an Object as a map: it holds the order of its keys.

⚠️ if you plan on using a `Weakmap`, be aware that the value of `length` will always be `0`.

[Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap#Browser_compatibility)

## Map

Differently from `object`, a **map object** preserves the insertion order of its keys. And as a counter from both `Weakmap` which only accepts `object` as `key`, and `object` which only accepts `string` or `number`, any primitive type can be a `key` in a **map**.

**Maps** are not only iterables, but **enumerables**.

```js
let myMap = new Map([['foo', 'bar'], [0, 22]])

let iterator = myMap.entries()

console.log(iterator.next().value) // ['foo', 'bar']
console.log(iterator.next().value) // [0, 22]

console.log(myMap.size()) // 2
```

[Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get#Browser_compatibility)

## Reference

- [WeakMap on MDN](https://mdn.io/weakmap)
- [Map on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
Calculating the Possible Rubik's Cube Combos
Tags: javascript, node
Published: 2019-08-17 23:38:03

## Hello everyone!
Today I will show you how you can calculate how many Rubik's cube combinations there are.

(This works on both web and Node!)

> The correct output is at the end of the post :)

We'll start by making a function in our Javascript file, let's call it `calc`.
```javascript
function calc() {
}
```
Make sure to give it two arguments, `x` and `y`, just like so:
```javascript
function calc(x, y) {
}
```
Now, inside of this function, define a variable called `j`.
```javascript
function calc(x, y) {
  var j = 0;
}
```
We'll use this variable as the output from the function, so `calc(1, 1)` would output `y`, which would be equal to `1`.

Make your `for` loop.  It will help us calculate the value.
```javascript
function calc(x, y) {
  var j = 0;
  for(var i = 0; i < y; i++) {
  }
}
```
In our `for`loop, it does 3 things (in order):
- defines the initial `i` variable.
- makes sure `i` is less than `y`.
- adds one to `i`.

That's great, now add an `if-else` statement that checks if `j` is equal to `0`.
```javascript
function calc(x, y) {
  var j = 0;
  for(var i = 0; i < y; i++) {
    if(j == 0) {
    } else {
    }
  }
}
```

### Why are we doing this?
The formula is that `j` is set to `j * x` for `y` times.  It will always be `0` if we don't set that initial value.

Let's finish up our function!
```javascript
function calc(x, y) {
  var j = 0;
  for(var i = 0; i < y; i++) {
    if(j == 0) {
      j = x;
    } else {
      j = j * x;
    }
  }
}
```

Absolutely DON'T forget to return the value of `j` after that `for` loop!

```javascript
function calc(x, y) {
  var j = 0;
  for(var i = 0; i < y; i++) {
    if(j == 0) {
      j = x;
    } else {
      j = j * x;
    }
  }
  return j;
}
```

### Okay, what now!?
So how do I sum up the number of possible combinations of Rubik's cube with this function?

There are 6 sides to a Rubik's cube; each with a different color.  Each side has 9 tiles, with 6 possible colors.

We'd work it out like this:
```javascript
calc(calc(6, 9), 6);
```

Just print it out to the console with `console.log`, your code should look like this:
```javascript
function calc(x, y) {
  var j = 0;
  for(var i = 0; i < y; i++) {
    if(j == 0) {
      j = x;
    } else {
      j = j * x;
    }
  }
  return j;
}


console.log(calc(calc(6, 9), 6));
```

It will output this:
```javascript
> 1.0475325355943345e+42
```
That is our answer, 1.0475325355943345e+42.

Thanks for reading everyone! <3
Best way to serve a private API Key from a CMS
Tags: angular, api, privatekey
Published: 2019-08-17 23:16:42

Just a quick question. 

I have an angular web app which uses OneSignal to post notifications to a mobile app. Works great, but there is a one issue...

I have a private api key for authorisation from OneSignal in the headers of a service for onesignal and this is really bad, i know...

I can store the private key on the cms I have and this api endpoint is private to the public. You can only access it after login. 

Could anyone recommend a good way of bringing a value into a service say from a component or another service, so I have set the httpOptions to something like? 

const httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json; charset=utf-8",
    "Authorization": value.from_other_component_or_service //this is the value from the endpoint on the server.
  })
}

Sorry if this is the wrong place to put these types of questions. This is my first post, so direct me to the right place if I've put this in the wrong feed. 

Cheers.
Mac OS X brew install varnish specific version
Tags: webdev, devops
Published: 2019-08-17 22:33:46

In Mac OS X High Sierra or later version, let's say you upgraded Varnish HTTP Accelerator from 4.x.x/5.x.x to any latest versions 6.x.x using *brew*. And now for any reasons you want to go back to previous version i.e. 5.2.0 altogether? Good news folks! 
You can do that by copying over the actual brew formulae on your local and defining the version you want in the *rb* file. 
*In the following example, I want to revert to version 5.2.0 from 6.2.0.*

Let's copy over the file from [https://github.com/Homebrew/homebrew-core/blob/master/Formula/varnish.rb](https://github.com/Homebrew/homebrew-core/blob/master/Formula/varnish.rb)  to your local. Then edit the *varnish.rb* file, remove/comment out the following lines:

    sha256 "c37af353aca25a83d22f9c5ce0ae800fe433e4d02e1457e02886a5849f988e53"
    
    bottle do
    
	    sha256 "7101ff2895f77803ea1e1ca6c8ebc1feef2c07b77fbf612f6dcf6983bf4ffc27" => :mojave
    
	    sha256 "d1fd8751be2ddccb463b385377b88cc440632eb1a07c0175fab9ee77c57f986d" => :high_sierra
    
	    sha256 "e124ad1c5638c7304743b5f3dbec996afa33c972dbe991ec35280c4d7787b3a4" => :sierra
    
    end

Replace this line: 

    url "https://varnish-cache.org/_downloads/varnish-6.2.0.tgz"

with 

    url "https://varnish-cache.org/_downloads/varnish-5.2.0.tgz"

You can get all available versions in [https://varnish-cache.org/releases/](https://varnish-cache.org/releases/). All you need to do is to tap on the intended version and paste the download url.

Now, save this *varnish.rb* file and run:

    chmod 775 varnish.rb
    brew install ./varnish.rb

brew will execute this and install varnish 5.2.0 as expected.

That's all!
NEW NODE PACKAGE
Tags: webdev, javascript, node, html
Published: 2019-08-17 20:31:58

## Hello, all!
My name is Zack, I am a developer that has been working on this package since it started.  (I created it!)

It's a source for a whole bunch of code "snippets" that are free to use anywhere, anytime.  `Snippet` is supposed to be as crowd-sourced as possible, so contribute your code snippets at our Github:
[Github Link](https://github.com/opensource-matrix/snippet)

It has an easy to use API that allows instant access to any snippet.

## Usage
There is a few functions that package up some helpful methods for use with Snippet.

```javascript
/* Load up the Node module */
const snippet = require('@matrixoc/snippet');
```

### Get All Snippets
```javascript
snippet.getSnippets();
```

### Get All Snippets for a Certain Language
```javascript
snippet.getSnippetsByLanguage('javascript');
```

### Get a Snippet By Name
```javascript
snippet.getSnippetByName('hello_world_js');
```

### Check If a Snippet Exists
```javascript
snippet.checkName('hello_world_js');
```

### Check If a Language Has Any Snippets
```javascript
snippet.checkLanguage('javascript');
```

## Installation
You can download from NPM, Yarn or RubyGems.

```
npm i @matrixoc/snippet
yarn add @matrixoc/snippet
gem install snippetpkg
```
Starting Over: And That's Ok
Tags: jellyfin, javascript, opensource
Published: 2019-08-17 19:26:10

# tl;dr

I decided to start over with Jelly Fin.

# Context

I feel like every time I start writing, I'm compelled to say "it's been a while" usually because it has.  At my last job, I barely had any energy or time left over to write.  I love expressing myself and sharing what I know with others; however, when that work/life balance is all work and little life, it's hard to feel motivated to write casually.

Losing your job is a humbling experience.  I was working at a start-up and while #startuplife is exciting when you have a rag-tag group of mercenary DEVs marching to the beat of the same drum, it's all fun and games until they aren't able to pay you anymore.

People _listen_ to you.  Switching gears is effortless, challenging, exciting.  Will this work? Who knows?  Will we go under tomorrow? Who cares.  Let's get this done today and hope for the best.

# Why'd you start over?

I felt it was necessary.  I have a specific idea with JellyFin and recently went through a plethora of technical interviews, but finally got an offer, accepted it, and I'm eager to get back to work.

One of the jobs I applied for had a technical challenge to create an app that connected to the Giphy API and you needed to be able to search for any gif, save it to your profile, and be able to categorize it.  For this challenge, I chose Firebase and React.  I took my time with it because I wanted it to be good, but I spent probably more time on it than I needed to (considering I didn't get the role).  Either way, I gained knowledge from it.

Well, what I'd learned from interacting with Firebase and using authentication using Google, I'm applying that to JellyFin.  I'll be chipping away at it over the next few months.  If you see something out of place or a better way to do something, feel free to send me a PR.

{% github jelly-fin/jelly-fin %}