teleren/devto huggingface dataset:
The Basics of Same Origin Policy and CORS
Published: 2019-08-11 17:37:54

Let's say you are accessing your bank account from bank.com in one browser tab, but also have a malicious website, evil.com, open in another. The bank account obviously has important information that you wouldn't want to share, so that's where security mechanisms come into play to prevent that malicious website's Javascript from accessing anything from the bank's browser tab. Such security mechanisms are same-origin policy and CORS (cross-origin resource sharing) that mandates the interactions between one source from another. This means that the codes that are being ran cannot just be any code — it has to have permission.

One way of having permission is through same-origin policy. By sharing the same origins, defined by the protocol, domain, and port of the URL, a site knows that the documents loaded should be able to interact with the resources from that origin and not another. So while evil.com could request to send information, bank.com does not permit to receive that information because they do not share origins. Bank.com could only interact with other documents within Bank.com's server.

![](https://thepracticaldev.s3.amazonaws.com/i/yzyrtmkdw8a5ft3dqhu4.png)

Since the same-origin policy is a bit restrictive, another way of having permission is through cross-origin policy. This mechanism bypasses the same-origin policy and allows two sources to interact with each other without sharing origins, however only from sources that are specified. This is very helpful as many sites uses each others' sources such as images. For example, if bank.com requested access to some of loan.com's sources and its server is expecting that request, then loan.com is permitting Bank.com access to that information.

![](https://thepracticaldev.s3.amazonaws.com/i/3500qqwndxc9ucy28n0g.png)

Same-origin policy and CORS are only two of the many policies, but by understanding these policies, you will understand the general core concept of how security policies work to reduce risks in malicious acts.
FizzBuzz challenge in as many languages as possible
Published: 2019-08-11 21:51:39

I was recently reading this [post](https://dev.to/adyngom/how-to-approach-solving-a-challenge-during-a-coding-interview-1gf4) inwhich the amazing Ady Ngom was disscussing different ways to solve the common FizzBizz challenge given in interviews and how to refactor and streamline your code.

This gave me an idea.

####What if we ask the community here to write their own solution to the FizzBuzz challenge in their given language.

What to do:

```lua
--[[
Write a program that prints the numbers from 1 to 100.
But for multiples of three print Fizz instead of the number, 
For the multiples of five print Buzz and for numbers 
which are multiples of both three and five print FizzBuzz
--]]
```

Rules:

1. Have fun!
2. Don't copy others code, keep it unique 👍.
3. Use this format:

> Language: e.g Python
  Code:
  Other/info: e.g Hia folks, I like cheese.


**Lets see how many different languages we can get here!**
(You can make it as simple or as complex as you like.)
Bottom Navbar with great animation made with pure CSS
Tags: css, html, codepen, animation
Published: 2019-08-11 20:50:16

---
title: Bottom Navbar with great animation made with pure CSS
published: true
description: Bottom Navbar with great animation made with pure CSS
tags: css, html, codepen, animation
---

###Demo 
- https://codepen.io/flavio_amaral/pen/OKBxxK

![Bottom Navbar with great animation made with pure CSS](http://i68.tinypic.com/2w7k01v.png)
React.useMemo() for Optimisation
Tags: react, usememo, optimisation
Published: 2019-08-11 19:39:57

React.useMemo() is another method from the Hook API that helps to optimize performance. It memoizes and returns the same value for the expensive calculations if dependencies remain the same. For example, if you have a computational function inside the component, and that function receives props as arguments to calculate the value, usually you would like to spare the calculation if your component did update, but the props passed to function remained the same.

## How to Use It
The method has the following structure `React.useMemo(() => fn, deps)`. It takes two arguments: an inline function and an array of dependencies.
Inline function, the first agument, returns a value from the expensive computation - `() => doHeavyComputation(a, b)`.
The second argument is an array of dependencies `[a, b]`, when one of the dependencies changes, `useMemo()` recomputes the value, if it doesn't - returns last memoized value.

```javascript
const memoisedValue = React.useMemo(() => doHeavyComputation(a, b), [a, b])
```
If you forget to pass an array of dependencies, the new value computes every time the component renders.

Also important to note, that computational functions should be pure, without side effects. If you want to change the state in, for example, `doHeavyComputation()`, you should use `React.useEffect()` hook.

## When to Use It

React documentation states, that you should use it for expensive calculations. Here are a few examples where you might put it to use:

#### Filtering Large Arrays

```javascript
function MyList(list, query) {
  // On every component render it will be refiltered
  const filteredList = filterListByQyery(list, query);
  
  // Will recalculate only when the list or the query changes
  const memoizedFilteredList = React.useMemo(
    () => filterListByQyery(list, query),
    [list, query],
  );
}
```

#### Recursive functions, like Fibonacci series, factorial, etc.

```javascript
function MySequance(number) {
  // Will recalculate only when the number changes
  const memoizedSequance = React.useMemo(() => getFibonacci(number), [number]);
}
```

#### Avoid unnecessary child component rendering

```javascript
function Parent(a, b) {
  // Will skip rerendering if the argument `a` will not change
  const childA = React.useMemo(() => <ChildA item={a} />, [a]);
  
  // Will skip rerendering if `b` remains the same. Similar to `React.memo()` method
  const childB = React.useMemo(() => <ChildB item={b} />, [b]);
  
  return (
    <>
      {childA}
      {childB}
    </>
  )
}
```

## Wrap up

Every performance optimization comes with a cost. For example, `useMemo` takes longer time to mount, easy to make mistakes in providing the dependencies, and it might be hard to read the code for your colleagues.
So before applying the method to your code, do a performance profiling and make sure that is worth it.
currentColor (a CSS variable before CSS variables were cool)
Tags: css, webdev, explainlikeimfive, beginners
Published: 2019-08-11 19:14:46

---
title: currentColor (a CSS variable before CSS variables were cool)
published: true
description: CSS variables are becoming a standard, with more than 90% of currently used browsers supporting it out of the box. Before CSS variables, there was a CSS value that shared some common ground as CSS variables, called `currentColor`.
tags: css, webdev, explainlikeimfive, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/of5r78x6jhrxjyf3vl4a.jpg
---

CSS variables are becoming a standard, with more than 90% of currently used browsers supporting it out of the box. Before CSS variables, there was a CSS value that shared some common ground as CSS variables, called `currentColor`.

```css
.message--danger {
    border: 5px solid currentColor;
    color: red;
}

```

#About currentColor value

So, how does `currentColor` work? Basically, an element that has CSS property with `currentColor` value inherits the value of the `color` property (of the same element). Basically, the computed value of `color` will be applied as a value of `currentColor`. 

This value can be applied to the following CSS properties: borders, outlines, box shadows, and backgrounds. 

This is useful when borders, shadows, outlines or background share the same color value. It's great for keeping your code DRY in cases where other properties like background, borders, outline, etc. need to have the same color as text.

#Simple example
{% codepen https://codepen.io/AdrianBece/pen/eqPLza %}

In this example, we simply change the color in the BEM modifier classes and this changes text color, background color of the box to the left and border color.

#Browser support

A bit more than 98% of globally used browsers support this CSS value. More info here: https://caniuse.com/#search=currentColor

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.
60 Days of Flutter
Tags: flutter, android, mobile, firebase
Published: 2019-08-11 18:53:55

I’ll be writing a 60 day series on medium about my journey of developing a full fledged messaging app using flutter and firebase. Link:

https://medium.com/@adityadroid/60-days-of-flutter-building-a-messenger-from-scratch-ab2c89e1fd0f?sk=b0315c7b56c3349c45bb9635ab3727af
Debugging TypeScript (Node.js) in IntelliJ IDEA
Tags: typescript, tutorial, typescriptnodejs, tsnode
Published: 2019-08-11 18:02:54

---
title: Debugging TypeScript (Node.js) in IntelliJ IDEA
published: true
description: tutorial how to debug typescript with intellij and nodejs.
tags: typeScript, tutorial, typeScriptNodejs, tsNode, 
---

Some time ago I've started to write typescript on server-side. and right after I've faced a problem with debugging it, after searching how to do it on the internet I found out that some of the tutorials are not working or not full, so I decided to create my own. which is working :) and contains everything you need :) So let's do it.

### Dependencies:
- typescript
- ts-node
- tsconfig-paths


let's install them:

`npm i -S typescript ts-node tsconfig-paths`

create index.ts file `touch index.ts`

Now we need to add some example code for our debugging, we add it to index.ts file:

<code>function examplefunc(num1:number, num2: number){
  const a = num1;
  const b = num2;
  const c = a + b:
  return c;
 }</code>

create debug listener config in ide
![debug listener config](https://thepracticaldev.s3.amazonaws.com/i/dc3wdw7pqfsw1k3qi9kr.gif)
create config -> attach to Node.js/Chrome

create run config for index.ts
![ide run config](https://thepracticaldev.s3.amazonaws.com/i/jinubefea5bcj2pblj8q.gif)

NodeParameters: `--inspect --require ts-node/register -r tsconfig-paths/register`

javascript file: `index.ts`

start debugger listener config `debuggerListener`

drop breakpoint in code and run `debugts` config

![result](https://thepracticaldev.s3.amazonaws.com/i/9d1ut9yr9flki1ypjr4k.gif)

now execution will stop at the breakpoint, now we can easily debug ts files in IntelliJ :)
article found: Python is eating the world
Tags: python
Published: 2019-08-11 17:47:31

---
title: article found: Python is eating the world
published: true
description: 
tags: python
---

It is zdnet but there is a lot of history covered (if you want to know about it all started).

https://www.zdnet.com/article/python-is-eating-the-world-how-one-developers-side-project-became-the-hottest-programming-language-on-the-planet/
Simple JSON:API plugin for Nuxt.js
Tags: beginners, vue, nuxt, javascript
Published: 2019-08-11 17:41:18

---
title: "Simple JSON:API plugin for Nuxt.js"
published: true
description: Simple JSON:API plugin for Nuxt.js
tags: beginner,vuejs,nuxtjs,javascript
canonical_url: http://alexandrubucur.com/blog/2019/simple-jsonapi-plugin-for-nuxt.js/
---
Hi all,

So far I am keeping myself on track to work a bit every weekend on my side projects.

That being said, I am a big fan on JSON:API and in my search for streamlining the consumption on the front-end I've finally settled on a nifty JSON:API client called [Devour](https://github.com/twg/devour). It has the right amount of magic to make it worthwile and not be over the top 'magical'.

For that, I've made a small nuxt.js plugin that allows me to use it regardless if it's in a component or in the vuex store.

```js
import JsonApi from "devour-client";
import * as apis from "~/api/index.js";

export default (ctx, inject) => {
  // eslint-disable-next-line no-undef
  const jsonApi = new JsonApi({ apiUrl: CONFIG.backend.url });
  const apiMap = {};

  for (const [key, value] of Object.entries(apis)) {
    jsonApi.define(
      apis[key].structure().modelName,
      apis[key].structure().fields
    );
  }

  for (const [key, value] of Object.entries(apis)) {
    // eslint-disable-next-line no-undef
    apiMap[key] = new apis[key](jsonApi, CONFIG);
  }

  apiMap.jsonApi = jsonApi;

  // Inject into the nuxt/vue context
  ctx.$api = apiMap;
  inject("api", apiMap);
};
```
The `CONFIG` constant is generated by the following library [config](https://www.npmjs.com/package/config) and [injected](https://github.com/lorenwest/node-config/wiki/Webpack-Usage#option-1) into the app for easy access.

To use the plugin, `index.js` is a generic export for the various API _models_ that we're going to use.

```js
export { default as InventoryItem } from "./InventoryItem";
```

The _model_ is nothing more than a simple object that returns the required configuration for the api and exposes it after trough its own methods.

I'd rather not tightly couple the app to Devour, so keeping them into our own classes should make it easier to swap it out going forward, and/or just use axios directly if needed.

```js
export default class InventoryItem {
  constructor(api, config) {
    this.api = api;
    this.config = config;
  }

  static structure() {
    return {
      modelName: "inventory-item",
      fields: {
        name: ""
      }
    };
  }

  getInventoryItems() {
    return this.api.findAll(InventoryItem.structure().modelName);
  }
}
```

I am curious on knowing how you guys are separating your API calls in your own SPA apps
Bakery: A FrontEnd Starter kit based on Webpack and Handlebars, supporting ES6 and SCSS.
Published: 2019-08-11 17:19:04


Just wanted to present a little something I worked on last couple of days, it might be useful, take a look if you want :)
[https://github.com/dennib/Bakery](https://github.com/dennib/Bakery)
Wipro talent Array Based Question.
Tags: replit, java
Published: 2019-08-11 17:10:45

1) Simple Encoded Array: Maya has stored few confidential numbers in an array (array of int). To ensure that others do not find the numbers easily, she has applied a simple encoding. 
Encoding used: Each array element has been substituted with a value that is the sum of its original value and its succeeding element’s value.
i.e. arr[i] = arr[i] + arr[i+1]
e.g. value in arr[0] = original value of arr[0] + original value of arr[1]
Also note that value of last element i.e. arr[last index] remains unchanged.

Example:
If the original array is – 
{2, 5, 1, 7, 9, 3}
The encoded array would be –
{7, 6, 8, 16, 12, 3}

Provided the encoded array, you are expected to find the –
a)	First number (value in index 0) in the original array
b)	Sum of all numbers in the original array

The prototype of the function is:
public static void findOriginalFirstAndSum(int[] input1);
where input1 is the encoded array.
The method is expected to –
-	find the value of the first number of the original array and store it in the member output1 and 
-	find the sum of all numbers in the original array and store it in the member output2

Assumption(s):
-	The array elements can be positive and/or negative numbers


Example 1:
Original array = {2, 5, 1, 7, 9, 3}
Encoded array = {7, 6, 8, 16, 12, 3}
First number in original array = 2
Sum of all numbers in original array = 27
NOTE: Only the “Encoded array” will be supplied to the function and it is expected to do the processing to find the expected result values.


{% replit @VikasTomar/Wipro-talent %}
Brainf*ck in 5 minutes.
Tags: inclusion, beginners
Published: 2019-08-11 15:28:48

The easiest least readable programming language I’ve written in so far has to be Brainf*ck. Brainf*ck is what I’d call a tacobell programming language, everything is made from the same 8 ingredients. You use the 8 operators to manipulate one datapointer (a number stored somewhere) and to change datapointers (Brainf*ck has 30.000 datapointers). 

The operators are as follows:
“>” moves the datapointer to the right.
“<”  moves the datapointer to the left. 
“+” increases the selected datapointer by one.
“-” decreases the selected datapointer by one.
“.” outputs the number in the selected datapointer as an ASCII character.
“,” reads one character from input and writes it to the datapointer.
“[” if the current datapointer is at 0, then skip to the next “]”.
“]” if the current datapointer is not at 0, then go back to the last “[”.

Take note of the last two being able to form a loop to do clever manipulations.

So now that you know the commands you want to print the text: “Hello world!” as is traditionally the first thing to do with any new programming language. You start by looking up the ASCII number for every character:
H = 72,
e = 101,
l = 108,
l = 108,
o = 111,
space = 32,
w = 119,
o = 111,
r = 114,
l = 108,
d = 100, 
! = 33.

Now the first datapointer will be used as an index for the loops, the second for the characters, and a third one for the space and exclamation mark. following below is the tutorial. 

First we want 72, we know that 72 = 12 * 6 so we set the index to 6:

```
++++++
```

Then we start a loop that increments our second datapointer by 12 for every point it deducts in the first datapointer (making it go up to 72 before our loop stops)

```
[>++++++++++++<-]
```

And then we can print the “H”

```
>.
```

Now we need to increment the second datapointer by 101 - 72 = 29, a prime number so the same trick won’t work again. We will use 28 + 1 instead.

```
<++++[>+++++++<-]
```

We can now print the “e” and simply do +7, print again twice, +3 and print again.

```
>+.+++++++..+++.
```

Now we are going to use the third pointer, put it at 4 * 8 = 32 and print space.

```
<++++[>>++++++++<<-]>>.
```

Back to the second pointer for the rest of the letters same as before.

```
<++++++++.--------.+++.------.--------.>+.
```

Our final code will be:

```
++++++[>++++++++++++<-]>.<++++[>+++++++<-]>+.+++++++..+++.<++++[>>++++++++<<-]>>.<++++++++.--------.+++.------.--------.>+.
```

Easily writeable and understandable.

Online brainf*ck interpretator:
https://copy.sh/brainfuck/
List for the History of a Mystery Illness
Published: 2019-08-11 15:07:06

---
title: List for the History of a Mystery Illness
published: true
description: 
tags: 
---
O The Mindset differences among STEM workers and software engineers
O The MonsterZero in IT, stem, arts, k work, even society at large
O M0 is a social contagion
O M0 robs sufferers of their higher cognitive skills
O M0 sufferers do not connect up knowledge into maps
0 M0 sufferers are not aware that there is much anything wrong with them (anosognosia)
O M0 do not see the bigger picture
O M0 do not ask Why or How
O M0 are not mindful or aware of much
O M0 communication is often based on arguments to sustain tension and spread the contagion
O 80% of society is infected


O around 130 million STEM workers alive. popularising mapping could level up the economy!
O ai research indicated other skills needed to free minds and work their mindset into mapping - 50 metalearning skills
O meditation is a superskill for mappers
O M0 sufferers have arguments to sustain their background stress levels this loop causes it to be self sustaining
O dopamine theory of M0
O stress reduction and prevention medications appear in research
O dopamine is an anticipation molecule
O dopamine is not a pleasure molecule
O anticipation of what is expected of you is shut off during flow
O flow is a replicable phenomenon
O without stress flow activation can be learned
O Ming discovers the main predictors of mapping as skills that can be developed!
O DMS STRIATUM and DLS size changes due to stress, both support different approaches to problem solving
O Aha!M0 is stress!
O mbsr relieves stress, increases mindfulness, increases the chances of insights
O breathe meditation creates the cyclic hrv and changes physiology to exit stress
O human meta-learning skills are mapper skills
O divergent thinking and insights
O M0 removes the larger picture and longer term goals from consciousness
O connectivity between knowledge packets form k maps
O real time VR neurofeedback INCREASES the speed of developing meta-learning skills from months to days
How to install and configure Nagios Core on CentOS 7 (without compiling)
Tags: linux, centos, monitoring, python
Published: 2019-08-11 14:50:49

[Nagios Core](https://www.nagios.org/projects/nagios-core/) is an open source tool for IT insfrastructure monitoring. Nagios relies on plugins to monitor everything - databases, operating systems, applications, network equipment, protocols, and more!  

### Installation

Update your repo and install nagios:

```bash
yum update -y ; yum install nagios -y
```
Nagios depends on the Apache web server for its web interface. The previous commands will install apache. Start and enable the service:

```
systemctl enable httpd.service
systemctl start httpd.service
```

Now, lets open port 80:

```bash
firewall-cmd --zone=public --add-port=80/tcp
firewall-cmd --zone=public --add-port=80/tcp --permanent
```

Install the plugins and nrpe:

```bash
yum install nagios-plugins nrpe nagios-plugins-nrpe
systemctl start nrpe
systemctl enable nrpe
```

**Note:** NRPE, allows you to remotely execute Nagios plugins on other Linux/Unix machines and receive the output through nagios.

We also need some basic plugins, that nagios needs by default:

```bash
for i in users uptime ssh ping procs load http swap disk; do yum install nagios-plugins-$i -y; done
```

Start and enable nrpe:

```bash
systemctl start nrpe
systemctl enable nrpe
```

The check_http plugin won't work unless we create an 'index.html' in /var/www/html. Lets'create one:

``` bash
echo "<h1> Apache is UP and RUNNING. </h1>" > /var/www/html/index.html
```

Click [here](http://nagios-plugins.org/doc/man/index.html) for more details about the plugins.

Now, for apache to allow access to the web interface, we've to give the 'nagiosadmin' user a password. The user is created by default. You can change it if you want. To achieve this, let's run 'htpasswd' and input your password:

``` bash
htpasswd  /etc/nagios/passwd nagiosadmin
```

All is set. Let's start and enable the nagios service:

``` bash
systemctl start nagios.service
systemctl enable nagios.service
```

Go to 'http://localhost/nagios' or 'http://{ip-address}/nagios', enter your credentials, and that's it. 

**Note:** In the services tab, several plugins will print status critical. Give nagios a minute or two to read its configuration and use its required plugins. 

You can also use the 'nagiostats' utility on the command line:

```bash
[root@centos \~]# nagiostats | grep '^Services Ok'
Services Ok/Warn/Unk/Crit:              8 / 0 / 0 / 0
```

Just for fun: I wrote a [python script] (https://github.com/kavishgr/My-Python--Bash-Scripts/blob/master/NagiosInstall.py) to automate the installation.
Explain The Pros & Cons of OSS Like I'm Five
Tags: anonymous, explainlikeimfive
Published: 2019-08-11 14:50:14

---
title: Explain The Pros & Cons of OSS Like I'm Five
published: true
tags: anonymous, explainlikeimfive
---

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment._