teleren/devto huggingface dataset:
Testing EmberJS app in Chrome in Docker
Tags: ember, docker, testing
Published: 2018-09-16 07:45:59

---
title: Testing EmberJS app in Chrome in Docker 
published: true
description: Till recently running Chrome in Docker was quite a hard problem to crack. A write-up on a minimal setup.
tags: EmberJS, Docker, testing
---

Assuming you already have an *ember-cli* app. First, let's create a `Dockerfile`:

```Docker
# Dockerfile

FROM node:10-alpine

RUN npm install -g ember-cli

RUN \
  echo http://dl-3.alpinelinux.org/alpine/edge/main >> /etc/apk/repositories  && \
  apk add chromium
  
WORKDIR /myapp

COPY . /myapp/

RUN yarn

CMD ["ember", "test"]
```

Then you will need to alter your application `testem.js`. Note that we are not using **Chrome**, but **Chromium**:

```js
module.exports = {
  test_page: 'tests/index.html?hidepassed',
  disable_watching: true,
  launch_in_ci: [
    'Chromium'
  ],
  launch_in_dev: [
    'Chromium'
  ],
  browser_args: {
    Chromium: {
      ci: [
        // --no-sandbox is needed when running Chrome inside a container
        // process.env.CI ? '--no-sandbox' : null,
        '--no-sandbox',
        '--headless',
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-software-rasterizer',
        '--mute-audio',
        '--remote-debugging-port=0',
        '--window-size=1440,900'
      ].filter(Boolean)
    }
  }
};
```

Build your container:

```sh
$ docker build -t myapp .
```

And after this your tests should be able to run:

```
$ docker run myapp 
Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
cleaning up...
Built project successfully. Stored in "/myapp/tmp/class-tests_dist-RpV40XiD.tmp".
ok 1 Chrome 68.0 - [3 ms] - ESLint | app: app.js
ok 2 Chrome 68.0 - [0 ms] - ESLint | app: resolver.js
ok 3 Chrome 68.0 - [0 ms] - ESLint | app: router.js
ok 4 Chrome 68.0 - [0 ms] - ESLint | tests: test-helper.js
ok 5 Chrome 68.0 - [2 ms] - ember-qunit: Ember.onerror validation: Ember.onerror is functioning properly

1..5
# tests 5
# pass  5
# skip  0
# fail  0

# ok
```
What do you expect from dev meet-ups? 🤝
Tags: discuss, meetup, learning
Published: 2018-09-16 06:43:50

---
title: What do you expect from dev meet-ups? 🤝
published: true
tags: discuss, meet-up, learning
---

When you attend a dev meet-up what are your expectations?

Reason is that, I am exposed to fewer dev meet-ups and scope of learning and frequency of meet-ups is less where I live. So, am curious about what is happening all around the world and want to listen to it directly from devs instead of some google search. 


Let me add some from my little experience :

1. Networking,
2. AMAs,
3. Coding standards.




Thanks for your time 🙌
Simple development environment for Rust-WASM-npm packages
Tags: javascript, rust, docker, webdev
Published: 2018-09-16 06:37:55

---
title: Simple development environment for Rust-WASM-npm packages
published: true
description: Simple development environment for Rust-WASM-npm packages
tags: [javascript, rust, docker, webdev]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gcbam09tbtfundx2vis2.jpg
---

> Photo by Paola Aguilar on Unsplash

There is only one prerequisite for this tutorial - installed Docker. Well, also you will need a good internet connection because of rust image which weights 1.7Gb

```sh
docker run -v "$PWD":/usr/src/myapp -w /usr/src/myapp --rm --interactive --tty stereobooster/rust-wasm
USER=stereobooster cargo generate --git https://github.com/rustwasm/wasm-pack-template
cd wasm-nanoid
wasm-pack init
```

Use your GitHub handle instead of mine (`USER=stereobooster`). Use your name of the project instead of mine (`wasm-nanoid`).

**This is it**. Your development environment ready. Keep reading to know how to write and test package.

## Develop

Edit `Cargo.toml`:

```toml
description = "nanoid implemented in wasm"
repository = "https://github.com/stereobooster/wasm-nanoid"
license = "MIT"
```

Edit `README.md`. Add to `.gitignore`:

```
*.log
pkg/*
```

Commit (you may want to do this in an OS shell because git inside Docker is not configured).

```sh
git add .
git commit -m "initial commit"
```

I want to build the simple thing, so I will reuse the existing Nano ID package (crate).

Add dependency to `Cargo.toml`:

```toml
js-sys = "0.2.6"
nanoid = "0.2.0"
```

Edit `src/lib.rs`:

```rs
extern crate cfg_if;
extern crate wasm_bindgen;
extern crate js_sys;
// import nanoid module
extern crate nanoid;

// for [wasm_bindgen] instruction
use wasm_bindgen::prelude::*;

// the function itself
#[wasm_bindgen]
pub fn simpleNanoid() -> js_sys::JsString {
    // generate nanoid and convert value (str) to JsString
    js_sys::JsString::from(nanoid::simple())
}
```

To build run in docker shell:

```sh
wasm-pack init
```

## Setup testing environment

Run in OS shell:

```sh
npm init wasm-app example
```

create `package.json` in the root of the project:

```json
{
  "private": true,
  "workspaces": ["*"]
}
```

Edit `.gitignore` (add):

```
node_modules
```

Edit `example/package.json`:

```js
"devDependencies": {
  "wasm-nanoid": "^0.1.0",
  ...
}
```

Now run the example:

```sh
cd example
yarn
yarn start
```

## Publish

If you want to publish run in OS shell, where your npm credentials are configured:

```sh
cd pkg
npm publish
```

## Result

In my case I got (in example apps console):

```
Error importing `index.js`: RuntimeError: unreachable
    at __rust_start_panic (wasm-function[79]:1)
```

and `wasm_nanoid_bg.wasm` is 50Kb but at least it was easy to create, test and publish my first (not working) WASM npm package. Will get back to [tutorial](https://rustwasm.github.io/book/game-of-life/setup.html).

Code from this post published [here](https://github.com/stereobooster/wasm-nanoid).

---

Follow me on [twitter](https://twitter.com/stereobooster) and [github](https://github.com/stereobooster).
Dev.to "Publishing from RSS" not working for me
Tags: help
Published: 2018-09-16 04:07:14

---
title: Dev.to "Publishing from RSS" not working for me
published: true
tags: help
---

I setup my Dev.to profile to publish posts from my blog feed - https://bignumworks.com/feed.xml

However, it Dev.to is not importing the posts.

Am I missing something?
An even simpler javascript tokenizer
Tags: javascript, node, webdev, discuss
Published: 2018-09-17 16:15:56

---
title: An even simpler javascript tokenizer
published: true
tags: javascript, node, webdev, discuss
canonical_url: http://www.albertywu.com/2018/09/15/tokenize/
---

What’s the easiest way you know of to tokenize an arithmetic expression in javascript? Let’s say you’re building a calculator application, and want this to happen:

```javascript
console.log(
 tokenize('100-(5.4 + 2/3)*5')
)
// ['100', '-', '(', '5.4', '+', '2/3', ')', '*', '5']
```

Before you reach into your npm module bag-o-tricks, realize that this can be done in one line of javascript using a secret feature of the string [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) method. Behold:

```javascript
'100-(5.4+2/3)*5'
  .split(/(-|\+|\/|\*|\(|\))/)
  .map(s => s.trim())
  .filter(s => s !== '')
// ['100', '-', '(', '5.4', '+', '2/3', ')', '*', '5']
```

Excuse me? What’s that hot mess inside the `split` function? Let’s break it down step by step using a few examples of increasing complexity:

* * *

#### Example 1: `s.split(/-/)`

Pretty obvious: this splits the string `s` anywhere it sees the minus sign symbol `-`.

```javascript
'3-2-1'.split(/-/)
// ["3", "2", "1"]
```

* * *

#### Example 2: `s.split(/(-)/)`

The only difference from the previous example is the enclosing parens in the regex, which creates a capturing group. Here’s the key point of the entire article: If the regular expression contains capturing parentheses around the separator, then each time the separator is matched, the results of the capturing group are spliced into the output array.

```javascript
'3-2-1'.split(/(-)/)
// ["3", "-", "2", "-", "1"]
```

* * *

#### Example 3: `s.split(/(-|\+)/)`

This builds off the previous example by adding support for the addition symbol `\+`. The backslash `\` is required to escape the regex. The vertical pipe `|` acts as an OR statement (match `-` OR `+`).

```javascript
'3-2-1+2+3'.split(/(-|\+)/)
// ["3", "-", "2", "-", "1", "+", "2", "+", "3"]
```

* * *

#### The Final Boss (tying everything together)

Hopefully, you now have all tools needed to understand `.split(/(-|\+|\/|\*|\(|\))/)`. Hope that made sense! Let me know in the comments if you liked this article, or ping me on [twitter](https://twitter.com/albertywu)!
Changelog to track software updates over time
Tags: process, software, discuss
Published: 2018-09-16 02:39:34

---
title: Changelog to track software updates over time
published: true
description: Writing a changelog to keep everyone up to date on software changes
tags: process, software, discuss
---

How common is it for companies to keep changelog's or release notes for end users/stakeholders?

I find I usually come across open source projects or some commercial products that  actually maintain their changelog, but what about companies that produce software for internal use?   

None can argue the benefit, *but how often does it happen*?
Explain Git like I'm five
Tags: discuss, explainlikeimfive
Published: 2018-09-16 02:32:27

---
title: Explain Git like I'm five
published: true
description: 
tags: #discuss #explainlikeimfive
---

I've been using Subversion for 13 years.  You get used to what you know.  You hate other people don't use it as they should.  Now everyone is transitioning to Git shortly.  I love the idea of using new technologies and some of the hooks we'll be able to use with GitLab, MatterMost, and Jenkins.  

I understand it's decentralized, but outside of that concept and some light syntax knowledge, I don't know much.  

Explain to me like I'm five, please!
A Couple of Beautiful Things I Learned Today
Tags: javascript, formallogic, boolean, learning
Published: 2018-09-16 00:40:59

---
title: A Couple of Beautiful Things I Learned Today
published: true
description: 
tags: javascript, formal logic, boolean, learning
---

I just wanted to make this post to share a couple of beautiful moments from the workshop I attended today.

This one is something I managed to write myself, and I'm fairly proud of it. The problem was to write a function that would take a number and return true if it was even, and false if it wasn't.

```
function even(num){
    return !(num%2);
}
```

This function relies on the fact that 0 evaluates falsey (that is to say, when it's type coerced to a boolean, it resolves as "false"). Since I know that the modulo operation will give a zero when a number divides evenly, I just have to flip the value with a not (!) operator. After that, it'll give me true when num is even, and false when it isn't.

I felt proud of myself for finding this solution.

___

Next, we have some stuff that's obvious for anyone who's done any amount of formal logic, but felt like a real revelation/accomplishment for me.

The first part of the assignment was to reproduce "or" functionality, meaning the || operator, with only ! and && operators. The second was to reproduce "and" functionality (&&) with only ! and || to work with.

```
function or(a, b){
    return !(!a&&!b);
}

function and(a, b){
    return !(!a||!b);
}
```
Previously I had written the "or" with if/else statements, accounting for !a&&b, a&&!b, and a&&b as potential cases that should return true. Finding a way to write it succinctly in a single line without any of the accoutrements of JS control flow felt like a revelation.

The secret, of course is that the "or" operator will only return false when both operands are false. So we can represent that situation as !a&&!b. That will resolve to "true" when both a and b are false, and it will resolve to "false" in all other scenarios. This is the opposite of the functionality we want from it, so the last step is to simply invert the resulting boolean.

Similarly, I had written a&&b as follows:

```
function and(a, b){
    if (a) if (b) return true;
    return false;
}
```
I couldn't understand how to constrain the || operator in an effective way, and honestly I needed a glimpse at someone else's solution in order to understand how to conceptualize my own.

Still, filling in the rest to reach this solution and cleaning it up in these ways felt beautiful. The solutions are elegant, perfect constructs. Not a single wasted character, all working in concert. No flaws, no edge cases. Just logic.

Let's look at them again:

```
function or(a, b){
    return !(!a&&!b);
}

function and(a, b){
    return !(!a||!b);
}
```
ahhh, so serene.
Use httpexpect to test server
Tags: http, testing, networking, go
Published: 2018-09-16 13:17:06

---
title: Use httpexpect to test server
published: true
tags: http,testing,networking,golang
canonical_url: https://dannypsnl.github.io//http/testing/networking/golang/2018/09/16/httpexpect-go.html
---

Use built-in functionality to test a Go server is a painful experience. The problem is because we have to handle too many errors and get so much thing we don't always need.

Of course, we will create an abstraction to reduce this panic. But if we already have a mature solution? That is [httpexpect](https://github.com/gavv/httpexpect)

We have two options for import:

- `import "github.com/gavv/httpexpect.v1"`
- `import "github.com/gavv/httpexpect"`

The different is `v1` is stable branch, another is `master` branch on GitHub.

I suggest pick stable one for the company project, but it’s fine to use `master` branch at side project.

`httpexpect` works pretty good with `httptest`. A simple example:

```go
type fakeHandler struct {
}

func (h *fakeHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
	fmt.Fprint(w, "Hello")
}

func TestIt(t *testing.T) {
	handler := &fakeHandler{}
	server := httptest.NewServer(handler)
	defer server.Close()

	e := httpexpect.New(t, server.URL)

	e.GET("/").
		Expect().
		Status(http.StatusOK).
		Body().Equal("Hello")
}

```

How about add form value?

```go
e.PATCH("/test/patch").WithFormField("value", "patch").
	Expect().Status(http.StatusOK).
	Body().Equal("patch")

```

JSON response?

```go
e.POST("/post").
	Expect().Status(http.StatusOK).
	ContentType("application/json", "").
	JSON().Equal(expected)

```

Query?

```go
e.GET("/user").WithQuery("name", "Danny").
	Expect().Status(http.StatusOK).

```

Hope you would feel happy with this little introduction.
Imposter? No, Baby, I'm the Real Deal
Tags: ruby, beginners, discuss
Published: 2018-09-15 22:43:29

---
title: Imposter? No, Baby, I'm the Real Deal
published: true
description: When did you drop the "noob" title? What was the sign for you?
tags: Ruby, Beginner, discuss
---

I found my first issue! I found my first issue? I found my first issue.

I've been operating in the noob space since the first day I started my coding bootcamp activities.  In this space: I'm unsure by everything, overwhelmed by everything, have a handle on nothing, and walk by faith as I see my tests go from red to green because of the bootcamp's instruction (as opposed to my brain's actual output...)

When I found my [first issue](https://github.com/learn-co-curriculum/rails-edit-update-action-readme/issues/14), I didn't even know I found it. For 30 mins I:
* stared at that damn code
* tweaked that damn code
* used chrome's developer tool to see what I was getting
* searched web docs to see what the method's yield was supposed to be
* stared at that damn code again...

It hit me. 

>Liz, you are the right one. You are getting exactly what you should be getting - what you THOUGHT should happen aligns with what all the websites are saying you should get.

I stared one more time at that damn code with wide eyes. 

I found my first issue! (cue excitement)
I found my first issue? (cue the second guessing)
I found my first issue. (of course you did, you smart MF!)


**What was your moment? When did you know you became less noob-ish?**
Manipulate Microsoft Visio file format programmatically in Java
Published: 2018-09-15 22:21:05

---
title: Manipulate Microsoft Visio file format programmatically in Java
published: true
description: Manipulate Microsoft Visio file format programmatically in Java
tags: 
---

Moved To
https://dev.to/asposediagram/manipulate-microsoft-visio-file-format-programmatically-in-java-20c9
How to make an open-source library ?
Tags: discuss
Published: 2018-09-15 22:14:00

---
title: How to make an open-source library ?
published: true
tags: discuss
---
I would like to start working in Open Source, however I have no clue about how to make this good.
It will be a PHP library.
Is there best practice ? One way or multiple ? Is there a framework to develop library ? How to handle tests ? I know how to test in a framework but not really out of that.

Thanks folks !
Blogging my Homework
Tags: study, learning, fullstack
Published: 2018-09-16 08:50:00

---
title: Blogging my Homework
published: true
tags: study,learning,full stack
canonical_url: https://booyaa.wtf/2018/blogging-my-homework
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kp99ftz08ujkq1bel9qk.png
---

_Photo by [Bonnie Kittle](https://unsplash.com/photos/GiIZSko7Guk) on Unsplash (cropped)_

The company I work for [Made Tech](https://www.madetech.com/) care about their employees' personal development. They take this matter so seriously that on Friday afternoons, we spend this time honing our skills. To help focus our studies we began working on material that forms the basis of our core skills assessments.

The idea behind these core skills is to cover various disciplines that make a full stack engineer. To that end, the current core skills are:

- [Test Drive Development](https://learn.madetech.com/core-skills/tdd/)
- [Web Applications Development with React](https://learn.madetech.com/core-skills/web-application-development-with-react/)
- Frontend Development (coming soon)

There are three levels of competencies:

1. Basic/Foundation
2. Intermediate
3. Advanced

I recently passed the [TDD core skill level 1 (Giraffe)](https://learn.madetech.com/core-skills/tdd/#giraffe) and I've decided to blog my study to aid my learning. This will form the basis of a blog post series called "Blogging my Homework".

All the learning material as well as the assessment criteria is publicly available at [learn.madetech.com](https://learn.madetech.com/).

I'd love your feedback and tips, hopefully you can also learn a few things from me too!

{% link https://dev.to/booyaa/web-app-development-core-skill-hedgehog---part-one-2144 %}
{% link https://dev.to/booyaa/web-app-development-core-skill-hedgehog---part-two-3p1i %}
{% link https://dev.to/booyaa/web-app-development-core-skill-fox-3ij5 %}
Canceling setInterval in React
Tags: react, javascript
Published: 2018-09-15 20:00:03

---
title: Canceling setInterval in React
published: true
tags: react,javascript
canonical_url: https://www.slightedgecoder.com/2018/09/15/canceling-interval-in-react/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/orb3v8z5ureu5s7yzwss.gif
---

_Photo by [Icons8 team](https://unsplash.com/photos/dhZtNlvNE8M?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

Sometimes you need to run a command in an interval using [window.setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval).
But if you don’t stop the interval when the component using the `setInterval` is not stopped, it will continuously run using unnecessary resources.

I will talk about how to handle `setInterval` in React

## 😅 Reproducing the Issue 

Let’s create a very “contrived” example that prints “hello world” every second in console.

{% gist https://gist.github.com/dance2die/e7108c9dc2d25e2a3d651b427965f425 %}


_Follow along on [CodeSandBox](https://codesandbox.io/s/0x979w8n5l)_

When you navigate away from the component (to simulate unmounting), the interval still runs.

Even worse, when you navigate back to `Greeting` component, another interval process starts! 😱

![Error Reproduced](https://i0.wp.com/www.slightedgecoder.com/wp-content/uploads/2018/09/reproducing-issue.gif?w=1170&ssl=1)

## 🔧 How to Fix the Issue  

You need to save the interval ID when you call the `setInterval`.

_Reference_: [WindowOrWorkerGlobalScope.setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval#Return_value)

{% gist https://gist.github.com/dance2die/75fcb22f74c265cf545917a9441f0242 %}

To cancel `setInterval`, you need to call `clearInterval`, which require the interval ID returned when you called `setInterval`.

The best place to do is right before the component unmounts ([componentWillUnmount](http://componentWillUnmount())).

{% gist https://gist.github.com/dance2die/da463930aa353665d8026d2225291c00 %}

You can see below that the interval doesn’t run any more after canceled within `componentWillUmount`.

![The interval canceled](https://i2.wp.com/www.slightedgecoder.com/wp-content/uploads/2018/09/setInterval-canceled.gif?w=1170&ssl=1)

[Try it for yourself](https://codesandbox.io/s/w7mnz4w0pk?autoresize=1&expanddevtools=1&moduleview=1&view=preview)

_The post [Canceling interval in React](https://www.slightedgecoder.com/2018/09/15/canceling-interval-in-react/) appeared first on [Sung's Technical Blog](https://www.slightedgecoder.com)._
Been Blogging since 2002 - AMA.
Tags: ama
Published: 2018-09-15 18:09:21

---
title: Been Blogging since 2002 - AMA.
published: true
description: tech blogger since 2002
tags: ama
---

I’ve been blogging since 2002 , more like 2000 if we take hacking articles I wrote on Geocities while playing Yahoo games. Most of blogs I build were out of passion however I sold them all back in 2014 for bit over 6 figures. 

Feel free to ask anything around bloggging, yes I still “blog” however not on my own sites.
A gift for new devs
Tags: beginners, career
Published: 2018-09-15 18:08:29

---
title: A gift for new devs
published: true
description: 5 tix available for frontendmasters bootcamp
tags: beginners, career
---

There is an amazing online bootcamp coming up. My friends @frontendmasters are hosting a 2 week beginners bootcamp and I want to give away 5 tickets. If you want to do this, and it will help you to have a ticket, please let me know. I will pay for your registration. All I ask is that, sometime in the future, you do the same for someone else. 
[FEM bootcamp](https://frontendmasters.com/bootcamp/) 

Friends, please post your request to attend here, on DEV and include your email.