teleren/devto huggingface dataset:
Help the Translator by Using Transloco: The internationalization (i18n) library for Angular
Tags: angular, internationalization, translate, translators
Published: 2019-09-15 10:48:29

Originally published at [shahar.kazaz](https://medium.com/@shahar.kazaz/help-the-translator-by-using-transloco-the-internationalization-i18n-library-for-angular-831c3c513ee4)

There are times where we need to help the translator with a description and meaning. To translate a text message accurately, the translator may need additional information or context.

Let's take for example the following translation key:

```json
{
  "book": "Book"
}
```

Is this a "book" or to "book" something? We need to communicate to our translators the translation context.

Let's learn how we can use Transloco the internationalization (i18n) library for Angular in order to provide the translators with these type of comments.

For each translation key that requires a description, we can add a companion key post-fixed with `.comment`, as shown in the example below:

```json
{
  "book": "Book",
  "book.comment": "we mean a reading book"
}
```

Now, We don't want these keys to get into our final bundle, so we can remove them using an official transloco library when building the production environment.

First, we need to install the library:


``` bash
npm install @ngneat/transloco-remove-comments
```


Then, we need to add to the `package.json` the following script:

```json
"scripts": {
  "remove-comments": "transloco-remove-comments dist/appName/assets/i18n",
  "build:prod": "ng build --prod && npm run remove-comments",
}
```

Now when we build the production environment, the library will take care of removing these keys from the translation files specified in the path.

**Once again, Transloco has made our life more comfortable.** Cheers! 🍻

***

Here is some more great content about Transloco:

[![🚀 Introducing Transloco: Angular Internationalization Done Right](https://thepracticaldev.s3.amazonaws.com/i/0byy9oicu3el19il9bx2.png)](https://netbasal.com/introducing-transloco-angular-internationalization-done-right-54710337630c)

[![🎉 Good Things Come to Those Who Wait: What’s new in Transloco](https://thepracticaldev.s3.amazonaws.com/i/0o19r97lw5jlti15nryp.png)](https://netbasal.com/good-things-come-to-those-who-wait-whats-new-in-transloco-5dadf886b485)

[![Creating Search Engine-Friendly Internationalized Apps with Angular Universal and Transloco 🌐](https://thepracticaldev.s3.amazonaws.com/i/cv1393qstlvo16qgk81x.jpg)](https://medium.com/@shahar.kazaz/creating-search-engine-friendly-internationalized-apps-with-angular-universal-and-transloco-ab9583cfb5ac)
Git: Show staged changes
Tags: beginners, git
Published: 2019-09-15 10:31:09

---
title: Git: Show staged changes
published: true
description: Git: Show staged changes
tags: beginners, git
series: Shorties
---

## Git: Show staged changes

I use `git add --patch` a lot.

In VSCode's Source Control Tab,
you can double-click on the staged file,
and a split screen will open up with the changes side-by-side.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m00lpkofqj0x6zh0p64x.png)

But how to do this in the terminal?

Use `git diff --staged`.
You can also use `git diff --cached`.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0og5c5rxz41d5hu5asvd.png)


`git diff --help` says:

```
git diff [<options>] --cached [<commit>] [--] [<path>...]
This form is to view the changes you staged for the next commit relative to the named <commit>. Typically you would want comparison with the latest commit, so if you do not give <commit>, it defaults to HEAD. If HEAD does not exist (e.g. unborn branches) and <commit> is not given, it shows all staged changes. --staged is a synonym of --cached.
```
React Multiple Files Upload with Node/Express Tutorial
Tags: node, javascript, react, reactmultiplefileupload
Published: 2020-02-01 19:06:54

---
title: React Multiple Files Upload with Node/Express Tutorial
published: true
tags: Node ,JS, React ,React Multiple File Upload
canonical_url: https://www.positronx.io/react-multiple-files-upload-with-node-express-tutorial/
---

The post [React Multiple Files Upload with Node/Express Tutorial](https://www.positronx.io/react-multiple-files-upload-with-node-express-tutorial/) appeared first on [positronX.io](https://www.positronx.io).

We are going to discuss mostly talked about topic React Multiple Files Upload with Node/Express Js. In this tutorial, we are going to learn how to upload multiple image files using Node, Express, Multer, and MongoDB. If you are new to React and want to learn how to upload files, then follow along.

We will learn to upload multiple image files and store those files in the MongoDB database using Multer and React. We will create express REST API which a user can easily use to make a POST request using React Axios.

[Click here to read more](https://www.positronx.io/react-multiple-files-upload-with-node-express-tutorial/)
Bulma - The Most Underrated Framework of the CSS Framework Era
Tags: html, css, webdev, design
Published: 2019-09-15 09:55:56

Everyone was using a CSS Framework to simplify their work and save their time, Bootstrap was and is King Right Now of the Frameworks Market. Every Institute, Almost Every Tutorial on YouTube was using Bootstrap, Developers were not learning Fundamentals of CSS and using Bootstrap. I was also a beginner at that time, I learned HTML and CSS from [W3schools](https://www.w3schools.com/) and [Lynda](https://www.lynda.com/). Then I used a lot of floats to make web pages, and kinda like the way.
___
 Responsive Design was my next goal, so CSS Framework was the Easiest way for Responsiveness, I tried to read docs and watched Bootstrap Videos but Bootstrap terrified me with lots of classes and inconvenient naming, and I didn't like to use bootstrap cause I think every website using Bootstrap looks quite similar it also applies styles on element as defaults, I tried two or more times but didn't get Bootstrap in my mind, so I found some alternatives like Foundation and Material, but they were just like Bootstrap. I just wanted to make my site Responsive, and then I found the video of [Brad Traversy Skeleton CSS](https://www.youtube.com/watch?v=nVANwdryGVc) 
___
I loved Skeleton CSS but now their devs are not updating it, its not based on CSS grid or Flexbox. There were some confusions in it, and then I found  [Bulma](https://www.bulma.io/) , I was just using YouTube as usual and then I came to [Bulma.css Tutorial Video ](https://www.youtube.com/watch?v=IiPQYQT2-wg) tagged “The Easiest Framework You can learn in 20 minutes”, Hmm I watched it and it really changed my life, It was really the easiest framework, even you don't have to remember the classes and there are some of the advantages : 
 - No default Styling
 - Powerful Flexbox Grid
 - Small Size in Kbs
 - Reusable and You can modify Sass
 - No Javascript only CSS
 - Reusable Components

___
I am Kinda Obsessed with Bulma(I think) But You can give it a try. 
This is my First Post BTW, You can Follow me on Twitter 😉 [https://www.twitter.com/justaashir](https://www.twitter.com/justaashir)
Dynamic Schema name in SQL View
Tags: sql
Published: 2019-09-15 09:39:36

I've recently answered a T-SQL question over on Stackoverflow. Unfortunately, I've answered it a long time after it was published, so I'm not even sure if the OP have seen my answer.

This question has a very low view rating (45 views at this time) and I'm wondering about other ways to solve the OP's problem. I'm pretty sure my suggestion will solve the problem, but since it uses DDL triggers (which I have no real-world experience with), I'm wondering is there a better way. So, what do you think? have any suggestions?

{% stackoverflow 56462131 %}
JavaScript Iterators and Generators: Asynchronous Generators
Tags: javascript, node, asynchronous, generators
Published: 2019-09-15 07:54:13

---
title: JavaScript Iterators and Generators: Asynchronous Generators
published: true
description: All you should need to know about JavaScript Asynchronous Generators
tags: javascript, node, asynchronous, generators
series: JavaScript Iterators and Generators
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hqi0voce6qhb24l3sctz.png
---

Hi, nice to meet you 😄!
You can find this article in my personal blog [here](https://andreasimonecosta.dev/series/javascript-iterators-and-generators/).
Reasons to Learn Probability For Machine Learning
Tags: machinelearning, motivation, computerscience
Published: 2019-09-15 07:42:55

---
title: Reasons to Learn Probability For Machine Learning
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3ijt9bwt4fsoye78kdel.jpg
published: true
description: As science and engineering move forward, we end up dealing with more complex systems.
tags: machinelearning, motivation, computerscience
---
As science and engineering move forward, we end up dealing with more complex systems. And in a complex system, we cannot expect to have a perfect model of each component or to know the exact state of every piece of the system. So uncertainty is now the foreground and needs to be modeled.

We also live in an information society. Data and information play an increasingly central role, both in our individual lives and in the economy as a whole. Now, data is only useful because it can tell us something we did not know. The reason to leverage information is to reduce uncertainty by understanding its nature.

And this is why probability theory and its children — statistics and inference — are a must.

>"Probability deals with predicting the likelihood of future events, while statistics involves the analysis of the frequency of past events." 

Because everything involves uncertainty and calls for probabilistic models.

Quantum mechanics, biological revolution, markets, transportation systems, customer demand are random. And the only reason to collect and manipulate data is to fight this randomness as much as possible. And the first step is to study and understand randomness.

---

_Ilona helps women developers to succeed in their careers without stress via her weekly newsletter. Sign up and [grab her networking cheat sheet as a bonus here](https://www.ilonacodes.com/networking-cheat-sheet)._

Photo by Balázs Utasi from Pexels
Use Promise for popup
Published: 2019-09-15 07:39:27


There are lot of things you can do with Promise. Today, I will share my experience on using promise for modal which I recently learned.

If you don't know much about EmberJs or Promise. Please visit <a href="http://emberjs.com" target="_blank">EmberJS</a> and 
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">Promise</a>) to get your basics up

## Why Promise?

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261

#### Prerequisites

```sh
ember install ember-bootstrap
ember generate ember-bootstrap --preprocessor=sass
```

If you want to use less instead of sass use `--preprocesor=less`. For other config, please check <a href="https://www.ember-bootstrap.com/#/getting-started/setup" target="_blank">here</a>


#### Steps

1. Create your component using 
```sh
ember generate component promise
```
<br/>
2. promise.js
```js
import Component from '@ember/component';

export default Component.extend({

  // It's important to have response undefined instead of boolean
  response : undefined,
  show     : false,

  actions: {
    promiseClicked() {
      new Promise( respond => {
        this.set( 'show', true );

        this.addObserver( 'response', function observer() {
          this.removeObserver( 'response', observer );
          respond( this.get( 'response' ) )
        });

      }).then( proceed => {
        if ( proceed ) {
          console.log( proceed );
        } else {
          console.log( proceed );
        }
        this.setProperties({ 'show': false, 'response': undefined });
      });
    },

    response( bool ) {
      this.set( 'response', bool );
    }
  },
});
```
Make sure variable response is set to undefined after removing observer.

<br/>
3. promise.hbs
```js
<BsButton @onClick={{action 'promiseClicked'}}> Promise </BsButton>

<BsModal
  @open={{show}}
  @onSubmit={{action "response" true}}
  @onHidden={{action "response" false}} as |modal|>
  <modal.header>
    <h4 class="modal-title">
      Custom Dialog
      <div class="badge">2</div>
    </h4>
  </modal.header>
  <modal.body>
    Promise Example?
    Check console when you click "Cancel or Save".
  </modal.body>
  <modal.footer>
    <BsButton @onClick={{action "response" false}}>Cancel</BsButton>
    <BsButton @type="success" @onClick={{action "response" true}}>Save</BsButton>
  </modal.footer>
</BsModal>
```

That's it. Thanks!
Announcing gatsby-plugin-social-cards
Tags: gatsby, react
Published: 2019-09-15 20:17:05

---
title: Announcing gatsby-plugin-social-cards
published: true
tags: #gatsbyjs #react
canonical_url: https://andri.dk/blog/2019/09/announcing-gatsby-plugin-social-cards
---

Ever seen those images shown next to posts on Twitter, Slack or Facebook? Ever wonder where they come from? Me too!

This plugin will create automatic cards for your (ReMark) at build-time.

## Announcing

I am ready to announce my new Gatsby plugin, gatsby-plugin-social-cards.

There are a few alternatives for Gatsby social-cards, but I wanted to try making these cards with SVG, React and the Sharp library that most Gatsby sites already depend on.

Currently this plugin resides within my site, but if there is interest in it, I'll move it into its own repo. Contact me on Twitter if you have any issues.

## Features

### Backgrounds

You can put a cover frontmatter on your post, and we'll use that. Otherwise, we'll use a default-background that you can specify or if that fails, we'll use a fallback one.

[![default card design](https://andri.dk/static/34221344967eb655433086323a4b2d01/b1910/default-design.jpg "default card design")](/static/34221344967eb655433086323a4b2d01/c35de/default-design.jpg)

### Designs

There are two design available now, "card" and "default". But we can expand that later.

[![default card design](https://andri.dk/static/7987758a52d337e319646b91587e15c4/b1910/card-design.jpg "default card design")](/static/7987758a52d337e319646b91587e15c4/c35de/card-design.jpg)

### Author image

If specified, an author image is shown on the image. That is also configurable.

[![default card design](https://andri.dk/static/ac9793437536b1aee7d53ef2f3a1801b/b1910/cover-custom-author.jpg "default card design")](/static/ac9793437536b1aee7d53ef2f3a1801b/c35de/cover-custom-author.jpg)

### Custom author-image

The author image can be ommitted if it's not wanted, or customized in the configuration.

## Install

```
yarn add gatsby-plugin-social-cards
# or npm install --save gatsby-plugin-social-cards
```

## How to use

Please see the [README](https://www.npmjs.com/package/gatsby-plugin-social-cards) for how to use.
Simple Console Rock, Paper, Scissors in C++
Published: 2019-09-15 04:45:42

This program is a simple rock, paper, scissors game where the player has to choose one of the three options to beat the computer. The computer will generate a random option by creating a number to indicate that option. 1 will be 'rock', 2 will be 'paper', and 3 will be 'scissors'. The expect outcome should look like this:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/76r3dwonmrvr8dq6oxm0.png)

Before we begin, let's set the values of rock, paper, and scissors to a number like so:![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/g5e61u1oe73dkfstkazw.png)

Now, let's make an options board. This will allow the user to pick between rock, paper, or scissors. Print out the options for the player to pick like this:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7ogun4jkf5g3t2ae50vp.png)

Next, we have to let the user pick and display their choice. We're displaying their number by comparing user value to our set constant values.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/awkes1zyt195eo5goh2g.png)

Once we have the user's choice, we need the get the computer's choice to see who is going to win. To do this we're going to randomly generate a number between 1-3 and display the computer's choice.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6z7fvudupg4zioht4fdd.png)

With both choices, we're ready to compare them and see who is the winner! Make a function that will determine all outcomes. Rock will beat scissors, scissors will beat paper, and paper will beat rocks. We should display the outcome if the computer or user wins. Don't forget to display a tie if both choices match.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9oxm4p17a7rql1hx1stm.png)

And that's it! Those were the basic steps into making a rock, paper, scissors game in C++. All the code that was used for the program looks like this:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ozbxxmhcqe371cf52sfo.png)
ES6: Const & Let
Tags: javascript, webdev, beginners, tutorial
Published: 2019-09-14 21:45:17

[~View the original post here at jayess.lifesandwich.co~](https://jayess.lifesandwich.co/blog/2019/08/javascript-es6-const-let/)

Who uses var? Not you hopefully. ES6 (ES2015) killed it for the better. It's replaced by two new variable assignment keywords; Const & Let — they work a little bit differently than var.

--------

**Const:** Your go-to 99% of the time.

**Let:** Use it only when needed.

--------

So what's the difference? Why are they so much better than var?

The answer is that Const & Let are block scoped vs var which is function scoped.

------

**Block Scoped:** only exist between a pair of curly braces { //code }


**Function scoped:** only exists within the current function.

------

The primary difference here is that naming a variable using const or let in an if statement, or a loop will basically hold that variable within it and will not allow it outside.


so this:


*if(true) {
var x = 2;
}
console.log(x)*


logs 2,
but this:

*if(1 === 1) {
const y = 2;
}
console.log(y)*

throws an error.


This is because x, created with var, doesn't care about the if statement { }, but const (and let) does.

This is a good thing, because it means if you accidentally name two variables the same, you won't get unexpected behavior, since a variable inside an if/ function/ loop will be completely different than one (named the exact same thing) outside of those { }. It helps avoid naming collisions.


###**Const vs Let**

let is the same as var, aside from the block scope thing we just talked about.

const, however, is short for constant, and means that you can't reassign it.

so:

*let a = 1
a = 2*

is cool.
but this:

*const b = 1
b = 2*

is a no go


You also have to initialize const with a value:

*let c;
c = 3*

is fine
but:

*const d;
d = 4;*


is not. (it'll error on that first line)


This is good because it means you can't accidentally reassign a value (although you can mutate arrays and objects via push, pop, and such).

##**//RECAP**

Var isn't great because it's function scoped and reassignable. Which is theoretically fine. but it opens the door for bad juju (namespace collision, unexpected values)

const and let are block scoped, and const is also not reassignable, which is why const should be used all of the time, except when you for sure need to reassign (like when incrementing in a loop).

Ditching var is a simple step to future proof your code and reduce bugs, and your users will thank you for it. 

-----------------------------------------

[~View the original post here at jayess.lifesandwich.co~](https://jayess.lifesandwich.co/blog/2019/08/javascript-es6-const-let/)
How to use Reduce in javascript?
Tags: javascript
Published: 2019-09-15 04:29:36

The reduce() method is used to apply a function to each element in the array to reduce the array to a single value.

#### Example:

```javascript

const ages = [33,12,20,16,5,54,21,44,23,55,45,90];

let ageSum = 0;

for(let i=0; i < ages.length; i++){
     ageSum += ages[i];
  }
//result
console.log(ageSum);
// 418

```

The method:

```javascript
const ageSum = ages.reduce((total,age) => total + age ,0);
//result
console.log(ageSum);
// 418

```
Which is best apollo-server vs express-graphql vs graphql-yoga vs prisma vs apollo-server-express
?
Tags: discuss, graphql
Published: 2019-09-15 04:15:09

Hello guys, I want to know from the experts which is best in case of using graphql. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fu6ajdzd1it53j2wy2py.png)

Here is the downloads data from npmtrends.com. Can you please help me in getting the best.
List of ways to merge arrays in javascript!
Tags: javascript, array, interview
Published: 2019-09-15 03:09:08

---
title: List of ways to merge arrays in javascript!
published: true
description: merge two arrays in javascript
tags: javascript, array, interview
cover_image : https://thepracticaldev.s3.amazonaws.com/i/q0menkinop9m15evmc98.png
---


Well, Imagine interviewer ask you to tell the ways to merge two arrays in JavaScript? There are various ways you can achieve it. so in this post, we will go through some of the ways to merge arrays.

Let's see some ways!


```javascript

const fruits1 = ["🍏", "🍎", "🍐"];

const fruits2 = ["🍊", "🍋", "🍌"];

/**
 * 1. Using concat method
 */

const concatFruits = fruits1.concat(fruits2);
console.log("concat:",concatFruits);

/**
 * Output
 * concat: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 2. Using ES6 spread syntax
 */

const spreadFruits = [...fruits1, ...fruits2];
console.log("spread:",spreadFruits);

/**
 * Output
 * spread: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 3. Using Push method
 * This method will mutate original array [fruits3]
 */

const fruits3 = ["🍏", "🍎", "🍐"];

const fruits4 = ["🍊", "🍋", "🍌"];

const pushFruits = fruits3.push(...fruits4);
console.log("push:",fruits3);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 4. Using unshift method
 * This method will mutate original array [fruits6]
 */

const fruits5 = ["🍏", "🍎", "🍐"];

const fruits6 = ["🍊", "🍋", "🍌"];

fruits6.unshift(...fruits5);
console.log("unshift:",fruits6);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

/**
 * 5. Using splice method
 * This method will mutate original array [fruits7]
 */

const fruits7 = ["🍏", "🍎", "🍐"];

const fruits8 = ["🍊", "🍋", "🍌"];

fruits7.splice(3, 0, ...fruits8);
console.log("splice:",fruits7);

/**
 * Output
 * push: ["🍏", "🍎", "🍐", "🍊", "🍋", "🍌"]
 */

```

[Play with jsfiddle](https://jsfiddle.net/varit05/96hn0k1d/)


Based on the above implementation, Recommend and convenient ways are 
    - option 1: `Array.prototype.concat()` method  or 
    - option 2: `Spread syntax`

Feel free to comment if you know any other way to do so.

References: 

[MDN - concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

[MDN - Spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)