teleren/devto huggingface dataset:
I wrote a JavaScript Unit Test today... Mock Import Time Function
Tags: javascript, unittest, jest, skiplist
Published: 2018-05-06 04:29:15

---
title: I wrote a JavaScript Unit Test today... Mock Import Time Function
published: True
description: I came across an interesting language feature of JavaScript ES6 feature, import time function, that I wanted to be able to write a unit test for.
tags: javascript, unittest, jest, skiplist
---

I am using Redux inside of a create-react-app application, jest included.

# Task
Add a new REST resource named `wadget` to the existing reducers function. *Using TDD.*

```javascript
// reducers.js
import {combineReducers} from 'redux'

import widget from './widget'

export default combineReducers({
    widget
})
```

---

As a `kata` today, I wanted to mock out this function that executes at import time. I am still learning the JavaScript ecosystem. I could do this in Python...

Let's pause for a moment... because it sounds pretty ridiculous. *Languages allow imports to execute non-encapsulated code procedurally. Side effects within these files alter the state of the running system when the instruction pointer links to the file.*

**Let's connect to a database when we import the DAO base file!** *<sarcasm...>*


# Test

I struggled with this for a little bit today. I asked a question on [stack overflow](https://stackoverflow.com/questions/50192478/how-do-i-spy-an-exported-function-invocation-in-javascript-using-sinon?noredirect=1#comment87405519_50192478).


```javascript
// reducers.test.js
import redux from 'redux'
import widget from './widget'

describe('Use jest', () => {
    afterEach(() => {
        jest.resetModules()
    });

    test('first test', () => {
        jest.doMock('redux');

        require('./reducers');
        let {combineReducers} = require('redux');

        expect(combineReducers).toBeCalledWith({"widget": widget})
    });
});
```

# Coding Steps

At this point, since I have the invocation of combinedReducers isolated, I can update my test to expect another resource type, wadget.

##### (red) FAIL Test
```javascript
import widget from './widget'
import wadget from './wadget'
// ...
expect(combineReducers).toBeCalledWith({
  "widget": widget,
  "wadget": wadget
})
```

##### (green) SUCCESS
```javascript
// reducers.js
import {combineReducers} from 'redux'

import widget from './widget'
import widget from './wadget'

export default combineReducers({
    widget,
    wadget
})
```

---

[![agile2018endorsement](https://www.agilealliance.org/wp-content/uploads/2018/04/Agile_SD2018_600x100_Speaking_FM.jpg)](http://sched.co/EU9g)
How do you take notes?
Tags: productivity, notes, development, discuss
Published: 2018-05-06 04:02:16

---
title: How do you take notes?
published: true
description: How do you take notes?
tags: productivity, notes, development, discuss
---

I am wondering how everyone takes notes? This can be while you're testing or doing some courses or you're just putting down a to-do. Do you have a specific notes taking application you use? Are you more of a pen and paper person (like me), do you use vim or emacs with org-mode? 


I am interested in what everyone uses in case there is something better than what I am currently doing. 


Thanks!
TIL: Non-capturing groups in regular expressions
Tags: javascript
Published: 2018-05-16 17:29:48

---
title: TIL: Non-capturing groups in regular expressions
published: true
tags: javascript
canonical_url: https://www.stefanjudis.com/today-i-learned/non-capturing-groups-in-regular-expressions/
---

It's regular expression time again. 🎉 I don't remember where I saw the following discovery, but after years of using regular expressions, I'm very surprised that I haven't seen it before. 

Let's have a look at an example showing capturing groups. 

```javascript
const regex = /(Jane|John|Alison)\s(.*?)\s(Smith|Smuth)/;
```

The regex defines that I'm looking for a very particular name combination. The name should begin with `Jane`, `John` or `Alison`, end with `Smith` or `Smuth` but also have a middle name.

```javascript
const result = regex.exec('Jane Isabell Smith');
console.log(result[0]); // 'Jane Isabell Smith'
console.log(result[1]); // 'Jane'
console.log(result[2]); // 'Isabell'
console.log(result[3]); // 'Smith'
```

The by `exec` returned array holds the full string of characters matched followed by the defined groups. Now, to get the middle name, I'd have to look at the regular expression to find out that it is the second group in the regex and will be available at `result[2]`. 

There's nothing particularly wrong with this but groups I'm not interested in are included in the result which makes it a bit more difficult for me deal with the returned value.

__It turns out that you can define groups that are not captured!__

```javascript
const regex = /(?:Jane|John|Alison)\s(.*?)\s(?:Smith|Smuth)/;
const result = regex.exec('Jane Isabell Smith');
console.log(result[0]); // 'Jane Isabell Smith'
console.log(result[1]); // 'Isabell'
```

You can use `(?:)` to not capture groups and drop them from the result. When you're dealing with complex regular expressions this can be indeed very helpful! 🎉

*Edited: [As Dave Newson pointed out](https://twitter.com/vincetherunt/status/993463061926170624) there are also [named capture groups on their way](https://mathiasbynens.be/notes/es-regexp-proposals#named-capture-groups)! The "group future" looks bright!*
KAMPONENT
Tags: react
Published: 2018-05-05 08:31:08

---
title: KAMPONENT
published: true
description: a component for creating react components 🏃
tags: reactjs
cover_image: https://thepracticaldev.s3.amazonaws.com/i/425i3n6wncocu7f21gte.png
---

If you like this library please click on the start button on github.
https://github.com/cooldrip/komponent

# kamponent
a component for creating react components 🏃

### This library is not released yet


### Installation

npm:
```bash
npm install kamponent --save
```

yarn:
```bash
yarn add kamponent
```

### Example 1

```js
<Kamponent pure initialState={{ count: 0 }}>
    {({ state, setState }) => {
        return (
            <div>
                <h3>{state.count}</h3>
                <button onClick={() => setState({ count: state.count + 1 })}>+</button>
                <button onClick={() => setState({ count: state.count - 1 })}>-</button>
            </div>
        );
    }}
</Kamponent>
```

### Example 2

```js
<Kamponent>
    {({ props }) => {
        return (
            <div>
                <h3>{props.count}</h3>
                <button onClick={() => props.increment()}>+</button>
                <button onClick={() => props.decrement()}>-</button>
            </div>
        );
    }}
</Kamponent>
```

### props
|    Property    | Type | Working |
| -------------  | ---- | ------- |
| children  | function or array or object | Yes |
| initialState  | object | Yes |
| pure  | bool | Yes |
| didMount  | function | Yes |
| didCatch  | function | Yes |
| willUnmount  | function | Yes |
| shouldUpdate  | function | Yes |
| didUpdate  | function | Yes |
| snapshotBeforeUpdate  | function | Yes |


### params in functions
###### note: you can access to this parameters from functions and children (if it be function).
|    Property    | Type | Working |
| -------------  | ---- | ------- |
| state  | any | Yes |
| props  | any | Yes |
| setState  | function | Yes |
| forceUpdate  | function | Yes |
For mobile app developers that use ads for revenue, how do you plan to comply with GDPR?
Tags: discuss, mobileapps
Published: 2018-05-05 22:21:51

---
title: For mobile app developers that use ads for revenue, how do you plan to comply with GDPR?
published: true
description: GDPR compliance for mobile apps
tags: #discuss, #mobileapps
---

I've published a few iOS apps that use Admob to generate revenue.  With the EU cookie compliance laws going into effect on May 25th, what are mobile app developers doing to comply with the EU laws?
"Nextron": Electron + Next.js dream
Tags: javascript, electron, nextjs, react
Published: 2018-05-05 20:23:44

---
title: "Nextron": Electron + Next.js dream
published: true
description: Build the Electron + Next.js app for speed.
tags: JavaScript,Electron,Nextjs,React
---

I'm a .NET developer in Japan usually, but I love to write JavaScript/TypeScript in my spare time.

This article introduces [Nextron](https://github.com/saltyshiomix/nextron), which can make the [Electron](https://electronjs.org/) app with [Next.js](https://nextjs.org/).

## Why?

I totally respect [zeit/next.js](https://github.com/zeit/next.js/) library, but with Electron, there is no de-facto-standard for now.

So I wrote [Nextron](https://github.com/saltyshiomix/nextron) in this spare time, Golden Week, in Japan.

Once you installed `nextron`, THEN

- you can write all renderer codes with Next.js
- you can build all cross-platform packages for release usage by **only one command**.

## Requirements

[Nextron](https://github.com/saltyshiomix/nextron) uses [npx](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner) internally, so it requires below:

- `"node": ">=8.2.0"`
- `"npm": ">=5.2.0"`

## Install

```bash
$ npm install --global nextron
```

## Usage

```bash
# Install scaffolds for quick start
$ nextron init <YOUR-APP-NAME>
$ cd <YOUR-APP-NAME>

# for development
# it starts development process (with HMR(Hot Module Replacement) featuire)
$ yarn dev

# for production
# it builds the electron app for release usage
$ yarn build
```

## Folder Structure

After `nextron init`, folder structure below is created.

```
.
├── common
├── main
│   └── index.js
├── package.json
├── renderer
│   ├── next.config.js
│   └── pages
│       └── home.js
└── static
    ├── icon.icns
    └── icon.ico
```

At this time, we can:

1. develop **whole** renderer process with Next.js!
1. foget to know how we build electron packages for release

with [Nextron](https://github.com/saltyshiomix/nextron)

## Screenshots

**yarn dev**

![yarn-dev-image](https://thepracticaldev.s3.amazonaws.com/i/dstcbld2xakdq89n0u9n.png)

**yarn build**

![yarn-build-image](https://thepracticaldev.s3.amazonaws.com/i/3lul0sgeuvd6anq1zysg.png)

## Conclusion

At this time, this [Nextron](https://github.com/saltyshiomix/nextron) project is highly WIP, so PRs are welcome!!

May the code be with you!
Service Workers... aren't working
Tags: help
Published: 2018-05-05 07:06:56

---
title: Service Workers... aren't working
published: true
description: I'm trying to cache a small game for offline use.
tags: help
---

Well, I know there are articles all over the internet that talk about service workers. However, I'm stuck.

I'm trying cache a few files for offline use, for a small game I'm working on, which I would've thought would be relatively simple. Previous versions of it used `<html manifest="cache.manifest">` to cache the files necessary, and I had planned to do the same once again... until I did a bit of research, and found it was deprecated.

Service workers are, apparently, the recommended replacement for the appcache. For some reason, I can't get them working, though. I've tried following the instructions for making a web-app work offline with service workers off the [MDN web docs](https://developer.mozilla.org/en-US/Apps/Progressive/Offline_Service_workers), but I keep getting `Uncaught (in promise) TypeError: Request failed` in the console.

Help would be much appreciated.

View the game @ https://car-cricket.glitch.me
View the source code @ https://glitch.com/edit/#!/car-cricket
What is Data Visualisation?
Tags: node, react, javascript, discuss
Published: 2018-05-05 15:11:37

---
title: What is Data Visualisation?
published: true    
description: 
tags: nodejs, reactjs, javascript, discuss 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rifju90lopm2i8n4zzd2.jpg   
---

So I have been reading this post:

{% link https://dev.to/anthonydelgado/javascript-is-eating-the-world? %}

and I have been practicing through freecodecamp as well and I came to know that React.js comes under their data Visualization section so I was wondering what is it? and why React.js and other front end stuff comes under that. 

I bachelors in ICT (basically CS) and always practiced Data Structures and Algorithms on online judges or otherwise and have been creating simple web apps like blogs and weather app with Python Django and then also with Node.js express.js 

> ( I know I should have started with React.js/Vue.js/Angular in short with front end but I didn't is it bad? what should I do? for job perspective in mind) 

I had a Data Mining Course in my junior year at college but I don't know much about how these front end technologies comes under Data Visualization. 

Any explanation/advice/guidance will help
Learning Generative Art; day 6 "Surface Wave" 🏄
Tags: beginners, art, graffiti, showdev
Published: 2018-05-05 13:16:22

---
title: Learning Generative Art; day 6 "Surface Wave" 🏄
published: true
description: I drew an image expressing surface wave with p5
tags: beginners,art,graffiti,showdev
cover_image: https://user-images.githubusercontent.com/1811616/39663562-65bc2758-50b0-11e8-9823-015ac231c1c0.png

---

Continuation of [My first step in learning Generative Art](https://dev.to/ohbarye/my-first-step-in-learning-generative-art-3674). I'm going to finish this series tomorrow, so this is the second to last.

## "Surface Wave"

<img width="704" alt="2018-05-05 21 58 21" src="https://user-images.githubusercontent.com/1811616/39663562-65bc2758-50b0-11e8-9823-015ac231c1c0.png">

<img width="705" alt="2018-05-05 21 57 17" src="https://user-images.githubusercontent.com/1811616/39663561-65969862-50b0-11e8-8e0f-9a85c14b4a27.png">

![surface_blue](https://user-images.githubusercontent.com/1811616/39663565-6942f44c-50b0-11e8-82e6-d71a5306e1d9.gif)

![surface_orange](https://user-images.githubusercontent.com/1811616/39663566-696e22de-50b0-11e8-9cec-ccbc440e3b42.gif)

I've tried to express [surface wave](https://en.wikipedia.org/wiki/Surface_wave) with 2D noise. It looks like a wave, and also surface on the earth.

I can calm down by watching a wave no matter whether the wave is electric or natural. What about you?


```js
var yoff = 0.0;
var backgroudColor;

function setup() {
  createCanvas(1400, 400);
  backgroudColor = 255;
  // backgroudColor = 22;
}

function draw() {
  background(backgroudColor, 2);

  fill(backgroudColor, 2);
  stroke(color(random(22),random(100, 255),random(255), 200));
  // stroke(color(random(222, 255),random(100, 155),random(10), 200));
  strokeWeight(random(4))
  beginShape();

  var xoff = 0;

  for (var x = 0; x <= width; x += 10) {
    var y = map(noise(xoff, yoff), 0, 1, 100, height);
    vertex(x, y);
    xoff += 0.05;
  }

  yoff += 0.01;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
}
```
Understanding basics of array in javascript
Tags: beginners, javascript, webdev
Published: 2018-05-05 10:29:38

---
title: Understanding basics of array in javascript
published: true
description: 
tags: #newbies #javascript #webdev
---

_This post is originally posted to [my blog](http://frugencefidel.com/blog/understanding-basics-of-array-in-javascript)._

In the post I will share some basics about Array.

**Array**

Array is the way of storing group or list of data.

Let say, we want to store group of colors without using array.

```javascript
  const color1 = 'purple';
  const color2 = 'black';
  const color3 = 'yellow';
  const color4 = 'aqua';
```

As we see, our codes are not DRY(Don't Repeat Yourself) at all. They are WET(Write Everything Twice), this is not a good practice for writing good code. We can use Array to solve this problem.

```javascript
  const colors = ['purple', 'black', 'yellow', 'aqua'];
```

**How to create Array**

You can start with empty Array and then add data later, or you can start with it's data;

```javascript
  // empty array
  const colors = [];

  // with data
  const colors = ['purple', 'black', 'yellow', 'aqua'];
```

**Add data into array**

There two way I known for adding data into the Array, 'bracket notation' and array methods.

*i. By bracket notation*

Array are indexed starting from 0.

```javascript
  const colors = [];

  // Add first data
  colors[0] = 'purple';

  // So the second item
  colors[1] = 'black';

  console.log(colors); // ['purple', 'black'];
```

*ii. By Array methods*

If you want to add item at very first position of Array use unshift method, at very end use push method.

```javascript
  const colors = ['purple', 'black'];

  // use unshift method to add to front
  colors.unshift('aqua');
  console.log(colors); // ['aqua', 'purple', 'black'];

  // use push method to add to end
  colors.push('yellow');
  console.log(colors); // ['aqua', 'purple', 'black', 'yellow'];
```

**Access data from Array**

You can access data from Array by using bracket notation.

```javascript
  const colors = ['purple', 'black', 'yellow', 'aqua'];

  // black and aqua
  colors[1]; // 'black'
  colors[3]; // 'aqua'
```

Also you can access array's item by loop over it.

```javascript
  const colors = ['purple', 'black', 'yellow', 'aqua'];

  for(const color of colors) {
    console.log(color);  // purple black yellow aqua
  }
```

**Update data of Array**

Also you can use bracket notation to update array's data.

```javascript
  const colors = ['purple', 'black'];

  // update black to yellow
  colors[1] = 'yellow';
  console.log(colors); // ['purple', 'yellow'];
```

Array can hold any data type and can be nested.

```javascript
  const data = [24, true, ['orange', null], undefined];
```
Linux Samba Server
Tags: linux, beginners
Published: 2018-05-05 09:16:50

---
title: Linux Samba Server
published: true
description: 
tags: #linux #beginners 
---

1 Linux/Samba/Windows Relationship
2 Install Samba
3 Samba File Sharing
4 Access Samba Shared Files
5 Mounting Samba Shares
6 Creating Samba Users
7 Authenticate Users Using Windows Server

https://likegeeks.com/linux-samba-server/

Hope you like it.
Regards,
I am stuck.
Tags: android, discuss, beginners, advice
Published: 2018-05-05 06:10:42

---
title: I am stuck.
published: true
description: How to start making android apps when you are stuck?
tags: android, discuss, beginner, advice
---

I'm stuck. Really, when I saw that kind of statement in web development before, I would have laughed. I would say just make websites, what is so difficult about this. Now I realize the reason I thought this way was I had a plenty of experience in building web apps. I've always had projects to do and got paid really well. 

But now I'm stuck in Android. I've completed 3 books and Udacity tutorials. I know about fundamental concepts. I can make apps if someone gives me instructions. The problem is there are no such instructions. When I worked on web, I had a clear vision of my project beforehand. I could see how much work to do and time to spend. When I want to start a new Android app I just stare at editor and have no idea what I am gonna do.

What do you do when you were stuck in learning new technologies? I would really appreciate your advice on how to pass that barrier and start making things.
Does God Have A Programming Language?
Tags: discuss
Published: 2018-05-05 04:51:06

---
title: Does God Have A Programming Language?
published: true
tags: discuss
---

When God created the world, do you think he invented a programming language? I think it happens to be that [DNA is God's Programming Language](https://ua1.us/tech/t-shirts/gods-programming-language-t-shirt-for-programmers-and-developers/)
Daily OpenSource'ness
Tags: opensouce, github, community, collaboration
Published: 2018-05-05 00:35:43

---
title: Daily OpenSource'ness
published: true
description: I strongly believe it is better for you and your career, the community, the world, if you spent a little time every day contributing to Open Source
tags: OpenSouce, GitHub, Community, Collaboration
---

I **strongly** believe it is better for YOU and YOUR career, as well as the community...and of course the world. If you spend a little time every day contributing to **Open Source** - I do mean only a *little*. It is surprising how much a little every day, will amount to a lot over 1 month - imagine 6 months...1 year...*you see where I am going with this*!!

### What is a contribution?

A contribution can be practically anything, YES anything! It is not just about source code and pull requests (aka PRs). 

Here are some examples in addition to source code changes and PRs...

- Raising an issue for an idea or defect
- Documentation - we all know this is always lacking, so if you spot something missing, incomplete or incorrect, contribute it back and help the next person
- Confirming someone else's idea or defect, adding any additional value
- ... and so much more ...

### New to Open Source?

If you want to join a community to help you get started in Open Source, please come and pair with me on Open Source **Live** on Twitch http://twitch.tv/eddiejaoude and join our discord for #TwitchCoders https://discordapp.com/invite/jVwPDFd to continue our discussions between live streams.

If you want to practice your **Git** and **GitHub**, my Open Source project **DashboardHub** welcomes all and any contributions. Even if just for practice. Raise a `test` issue for fun, we won't mind. Head over there now and start contributing to Open Source today http://github.com/DashboardHub/PipelineDashboard 

### What are your thoughts?

- Do you use Open Source (I think most people do even if they don't realise it)
- Do you contribute to Open Source already
- Do you want to contribute to Open Source

Please let me know your thoughts in the comments below...
Healing The Rift Between Programmers And Managers
Tags: career, devtips, culture, agile
Published: 2018-05-05 00:04:39

---
title: Healing The Rift Between Programmers And Managers
published: true
description: In this video I share some stories about software projects I have been on where I was challenged to be enlightened to continue.
tags: #career, #devtips, #culture, #agile
cover_image: https://thepracticaldev.s3.amazonaws.com/i/fe0w0ot766zzbrgfl5eq.png
---

It's common in many companies for there to be animosity between programmers and managers.

Earlier in my career I met many other software developers who loved to complain about management.

And I've been just as frustrated, especially when it seems like management doesn't know what they're doing.

But eventually after having several experiences talking to other programmers I respected, my perspective changed.

In this video I share some stories about software projects I have been on where I was challenged to be enlightened to continue.

I hope these stories help you think about what you can do to take the power of your career back into your own hands.

[Subscribe for 90+ videos on healthy software development](https://YouTube.com/c/JaymeEdwardsmedia?sub_confirmation=1)

{% youtube _TlQb8MKCNo %}

# [Watch on YouTube 📺](https://www.youtube.com/watch?v=_TlQb8MKCNo&list=PL32pD389V8xvAiSh4rIE_xqLLBCOnap0M&index=1)