teleren/devto huggingface dataset:
Neovim and neoformat setting for WordPress Coding Standards
Tags: wordpress, neovim, phpcbf
Published: 2017-12-15 16:59:46

---
title: Neovim and neoformat setting for WordPress Coding Standards
published: true
description: phpcbf and neoformat settings
tags: WordPress,neovim,phpcbf
---

# The Coding Standards are important
I'm WordPress Developer.
I am conscious of writing readable code, but since I am a human, I make mistakes.

Let's use formatter. And I want to run phpcbf from Neovim.

Great plugin is [neoformat](https://github.com/sbdchd/neoformat)

Below are my settings.
```vim
let g:neoformat_php_phpcbf = {
      \ 'exe': 'phpcbf',
      \ 'args': [
      \ '--standard=WordPress',
      \ '--extensions=php',
      \ '%',
      \ '||',
      \ 'true'
      \ ],
      \ 'stdin': 1,
      \ 'no_append': 1
      \ }
let g:neoformat_enabled_php = ['phpcbf']
nnoremap <leader>nf :Neoformat<cr>
```
Generate email list automatically with automaildoc
Tags: ruby, webdev, opensource, showdev
Published: 2017-12-15 15:42:01

---
title: Generate email list automatically with automaildoc
published: true
description: Generate email list automatically with automaildoc from RSpec.
tags: Ruby,webdev,opensource,showdev
---

Hello, diligent developers who manage systems to send emails to somewhere. In this article, I'd like to introduce a Ruby gem named **[automaildoc](https://github.com/ohbarye/automaildoc)**, which generates mail list from RSpec automatically.

![image](https://user-images.githubusercontent.com/1811616/30522089-771f2474-9c05-11e7-8f9f-ed8f828c18b8.png)

## How to use

After installing the gem, run `AUTOMAILDOC = 1 rspec` from the command line to generate HTML to list the mail. Easy!

<img src="https://user-images.githubusercontent.com/1811616/29994112-c6dacbc6-9002-11e7-812f-a346d415d6c4.gif">

Let me elaborate a bit for beginners.

Add this line to your application's Gemfile:

```ruby
gem 'automaildoc', group: :test
```

And then execute:

```console
$ bundle
```

Add an `automaildoc` tag to your mail spec. (Don't you have it? Then it's an exact chance to write them right now!)

```ruby
RSpec.describe 'Sign up mail', automaildoc: true do
  let!(:user) { create(:user) }
  let!(:mail) { SignupMailer.mail(user) }

  it 'should send to a user' do
    expect(mail.to).to eq user
  end
end
```
Run Rspec test with `AUTOMAILDOC=1`.

```console
$ AUTOMAILDOC=1 bundle exec rspec
```

That's it. Then automaildoc generates an HTML file to `./doc/mails`. The file should be what you've wanted.

## Background of automaildoc

Have you received such inquiries from stakeholders like product managers, a business side, customer support, etc.?

> "May I confirm emails sent from our system for legal/brand check?"

> "Can you show the text of a similar past email to think of the sentence of the newly sent email?"

Then developers respond each time by checking code or I18n translation files. I have experienced such a situation many times.

However, due to the A/B test and CS request, a content of an email is frequently updated. A total number of emails will increase or decrease without noticing during daily development. Besides, there is also a problem that even if the mail is same, it varies depending on the context or condition. I finally found the task repeatable, annoying, and not more comfortable than I'd expect.

As a solution to this problem, my colleague gave me an idea that it would be convenient to generate from RSpec automatically like `autodoc`. After that, when I received a request like "I want to see email list" again, then I remembered this and tried it with great force.

---

I hope this article and gem would be helpful for you too.
XHR not send to server on 'beforeunload' event in IE
Tags: javascript, help
Published: 2017-12-15 11:48:05

---
title: XHR not send to server on 'beforeunload' event in IE
published: true
description: 
tags: #javascript #help
---

This is my first post ever on any blog/site i am not a good writer. I am junior ASP.NET software engineer recently i am working in React for front end development.

Yesterday was writing a function in JavaScript for on window closed. function responsibility was to send xhr call to server.

##Here is my source code.

```javascript
// binding beforunload event

 componentDidMount() {
      if (window.addEventListener) {
        window.addEventListener('beforeunload', this.onUnload, false);
      } else if (window.attachEvent) {
        window.attachEvent('onbeforeunload', this.onUnload);
      }
    }

// call api function 'unlock'
onUnload() {
      unlock();
    }


// api 
export function unlock(Id) {
  return axios
    .get(UNLOCK(Id))
    .then((data) => data);
}
```
It was working fine for chrome but it was not working for IE.
I spend a lot of time to debug this issue but did not succeed. after that one of my colleague recommend me to send an sync call to the server because of asynchronous browser did not wait for response. after spend a lot time of arguing with him i implement and it works.

##After change async to sync

```javascript
export function unlock(Id) {
  // use jQuery ajax call becaus axios does not provide {async: false} option
  window.jQuery.ajax({
    type: 'GET',
    url: UNLOCK(Id),
    async: false,
    success(data) {
      //code 
    },
  });
}
```
#Discussion

My understanding is when unlock function calls on window close. function should send xhr request to server after that browser tab should be closed.
In my case i don't need the response of xhr call.

##Question: why unlock function was not sending the call to the server?
Which language(s) would you recommend to Transform a large volume of data?
Tags: discuss, etl
Published: 2017-12-15 11:47:22

---
title: Which language(s) would you recommend to Transform a large volume of data?
published: true
tags: discuss, etl
---

Hi!

Which language (or languages) would you recommend to create a custom ETL tool with the purpose of processing a (very) large volume of data? The main focus here should be for the T (Transform) component, since that's where all the major issues and complexity will surely arise.

I know there're lots of tools available out there that perform this kind of stuff but I'm currently considering all the scenarios and the complexity of the project itself may "force" us to pursue a custom solution so I'd like to ear from you guys and your expertise and past experiences!

Thanks :)
Should I use GitHub pages for my blog instead of WordPress?
Tags: discuss
Published: 2017-12-15 10:04:01

---
title: Should I use GitHub pages for my blog instead of WordPress?
published: true
tags: discuss
---
For last few week I am trying to build a blog for my programming thought. The blog is simply my programming journal and I don't want to earn money from this. I am using WordPress on my blog and I think it is overkilling. Should I switch to Github pages?
When `position: fixed;` is not working.
Tags: css
Published: 2017-12-15 06:57:35

---
title: "When `position: fixed;` is not working."
published: true
description: Debug for css property.
tags: 'css'
---

Hello, This is my first posting :)

If a parent elements has `transform` properties, `position: fixed;` of children elements does not be working.

That case, The children elements behave like `position: absolute;`.

# Solution to the problem
If a parent elements uses transform animation, Replace without transform animation. or Remove transform properties or Set `transform: none;`.
Notepad "Boostnote" which can be written with Markdown is very useful
Tags: markdown, productivity, opensource, react
Published: 2017-12-15 06:44:28

---
title: Notepad "Boostnote" which can be written with Markdown is very useful
published: true
description: 
tags: markdown,productivity,opensource,react
---
![](https://thepracticaldev.s3.amazonaws.com/i/1mbvk92g57s99vq75vto.png)

## What's Markdown?
> Markdown is a lightweight markup language with plain text formatting syntax. It is designed so that it can be converted to HTML and many other formats using a tool by the same name.[8] Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor. As the initial description of Markdown contained ambiguities and unanswered questions, many implementations and extensions of Markdown appeared over the years to answer these issues.
refs:[From Wikipedia](https://en.wikipedia.org/wiki/Markdown)  

Markdown is mainly used as a means to easily write HTML. 
Medium also has Markdown notation.
For example, if you want to bold some parts of text, write ``` <strong> bold </ strong> ``` for HTML, ``` ** bold ** ``` for Markdown.

Boostnote is a software that can write notes using such Markdown.

# Features of Boostnote
## Sharing function via DropBox
Boostnote allows you to share notes with other devices via online storage DropBox.

However, to use this function, I regret that I have to install "DropBox" on my computer.

## Todo list is easy to make & easy to use
In Boostnote you can create a checkbox by writing "- [ ]" to create a Todo list.

In addition, a gauge of the completion rate is also generated in the created ToDo list, and you can confirm at a glance how long the task is completed now.
#### preview
![](https://thepracticaldev.s3.amazonaws.com/i/y7f8esd5rq8yoe9wdwn3.png)
#### editor
![](https://thepracticaldev.s3.amazonaws.com/i/4iwwwtuf5774obod6k91.png)

## Print
You can print out the notes directly from Boostnote.

## Markdown is easy to write even on a smart tablet!
![](https://thepracticaldev.s3.amazonaws.com/i/zvsfh93rw0j10bm9aav4.jpg)
![](https://thepracticaldev.s3.amazonaws.com/i/xd1ty3taceq4l3bh5yyi.png)

Both the Android version and the iOS version, Markdown input assist bar added on the keyboard.
It makes easy to write Markdown on the smart tablet.

## Bad feature

Hard to share with others
Since sharing is via DropBox, it is inconvenient when you want to share notes with others.


## Boostnote is too convenient.

This is serious. I can't leave.

## Overall rating - ★★★★★

Boostnote was originally a "memopad made for programmers", which is not introduced here, but it also allows you to write down the source-code.
I introduced Boostnote as an ordinary Notepad because it has enough functions.

## Download link

Boostnote has Windows, MacOS, Linux, iOS, Android version.

▶ [Boostnote Official HP](https://boostnote.io)
Designers, what resources would you recommend to a developer?
Tags: discuss, design, frontend
Published: 2017-12-15 03:57:04

---
title: Designers, what resources would you recommend to a developer?
published: true
description: What resources would you designers out there recommend to developers who are interested in understanding more of what you do?
tags: discuss, design, front-end
---

When I started web development, I was hoping to work as a front-end developer. I was a bit passionate about it, and I still am, even though I work today in a full-stack environment that involves both JavaScript, Sass, and .NET. I've wanted to improve my skill as a front-end developer, and part of me feels like that involves a big more of a background in design than I have.

What resources would you designers out there recommend to developers who are interested in understanding more of what you do? A quick search of books brings up a few resources like David Kadavy's [Design for Hackers](https://www.goodreads.com/book/show/11457105-design-for-hackers) and Tutplus' [Design School for Developers](https://webdesign.tutsplus.com/articles/welcome-to-design-school-for-developers--webdesign-13272) but these seem a little dated. WOuld you still recommend these?
A note on Dynamic Programming
Tags: algorithms
Published: 2017-12-15 02:57:53

---
title: A note on Dynamic Programming
published: true
description: 
tags: algorithm
---

This is a quick note about Dynamic Programming from [The Algorithm Design Manual](http://www.algorist.com/) book. I found it really helpful.

## Why dynamic programming is so hard?

> - Until you understand dynamic programming, it seems like magic.
> - You must figure out the trick before you can use it.

## The trick

> - Dynamic Programming is a technique for efficiently implementing a recursive algorithm by storing partial results.
> - The trick is: seeing whether the naive recursive algorithm computes the same subproblems over and over again.
> - If so, storing the answer for each subproblem in a table to lookup instead of recomputing.
> - Start with a recursive algorithm or definition. Only once we have a correct recursive algorithm, do we worry about speeding it up by using a result matrix.

## The advice on how to learn

> - Dynamic programming is best learned by carefully studying examples until things start to click
Serverless is just for image processing or can I use to build my API
Tags: discuss
Published: 2017-12-14 23:13:13

---
title: Serverless is just for image processing or can I use to build my API
published: true
tags: discuss
---

I was talking with a friend and he told me that Lamda functions (serverless) is just for operations like resize an image and cannot be used as API for example.

What do you think?

Can I use Serverless for everything? and replace my Backend.
Dynamic imports in React-Native
Tags: reactnative, javascript
Published: 2017-12-14 22:26:44

---
title: Dynamic imports in React-Native
published: true
description: You can't import things dynamically, but scripting can help you.
tags: react-native, javascript
---

Have you ever tried to do this in a React-Native app?
```js
<Image source={require("./images/" + this.props.image)} />
```
If you have, you probably discovered that all the imports are statically analyzed at compile-time, and have to be a simple string, not a dynamic expression.
Nevertheless, in a recent project this was very frustrating; My requirements were to include a folder of images in the app bundle, and render one of them according to a response from the server.
What we can do, is to require all the images in a file:
```js
// assets/images/index.js
const images = {
  dog: require("./dog.png"),
  cat: require("./cat.png")
}
export default images;
```
Then, we can use it like this:
```js
// app/imageView.js
import images from "../assets/images"
const View = (props) => 
  <Image source={images[this.props.image]} />
```

The problem is that my images folder had a lot of images I couldn’t possibly manually require them all.
So, I used the power of automation and created a simple script to make the assets/images/index.js file for me:

```js
// prepareImages.js
const fs = require("fs");
const files = fs.readdirSync("./assets/images").filter(x => x.includes("png"));
const ex =
  "{\n" +
  files.map(x => `"${x.split(".png")[0]}": require("./${x}"),`).join("\n") +
  "}";
const res = "export default " + ex;
fs.writeFileSync("./assets/images/index.js", res);
```



This will produce a nice file exporting every image in a folder.
Thank you for reading!

P.S: I found a babel plugin that does something like this: https://github.com/dushaobindoudou/babel-plugin-require-all but the documentation isn’t very clear (is in Chinese or something) so I tested it, and here is how it works:
given: `const imges = requireAll('./assets/imgs')`
it will output:
```js
const $assets_images_cat = require('./assets/images/cat.png');

const $assets_images_dog = require('./assets/images/dog.png');

const images = {
  $assets_images_cat: $assets_images_cat,
  $assets_images_dog: $assets_images_dog
};
```
Which modern languages use grammars as a basic feature?
Tags: computerscience, coding, technology, discuss
Published: 2017-12-14 16:44:58

---
title: Which modern languages use grammars as a basic feature?
published: true
description: Is Perl6 the only language that includes grammars as a core structure?
tags: computerscience, coding, technology, discuss
--- 

Perl6 includes grammars as part of the language. Grammars are special classes that can be used to parse text, and so on. I do not know of any other language, modern or otherwise, but I really don't know all of them. 
Three of the last [Perl 6 Advent Calendar posts](https://perl6advent.wordpress.com) are devoted to grammars, so we are really proud of them. But it would be nice to compare with other languages that have them as parts of the *batteries included* package. Do you know of any?
Goodbye code. No more of you for a bit. 
Tags: code, burnout, challenge
Published: 2017-12-14 16:07:55

---
title: Goodbye code. No more of you for a bit. 
published: true
description: It's always fascinating to begin something new but what happens when you lack the huge payload of inner strength to follow along?
tags: code, burnout, challenge
---

"You know Sam. It's quite strange how one moment you have a burning desire for something and the next, you don't even want to speak about it".

I allowed my gaze to focus on the only source of light in the room that was my computer's screen.

![](https://thepracticaldev.s3.amazonaws.com/i/ov4f2l8crb7ggy25ymiz.jpg)

"I wouldn't blame you mate, you had all those clients' jobs to attend to. It sucks when you have to do stuff for money so you abandon other stuffs you enjoy doing. I'm sure you just need a break, you'll have the zeal again mate".

Sam responded accurately.

"I'm not sure about this, Sam. I believe it's over".

![](https://thepracticaldev.s3.amazonaws.com/i/jhkqmqndmwz5ilosotbv.jpg)


*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *


*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *



Hello there, my name is Jordan.

When it's May next year, it will be a complete year since I started writing actual code.   

In the first few months, it was kind of a hassle to write code and be satisfied with it but then I got to understand that no one starts out perfect; we get better by the day.

Anyway, that's not the reason for this post. This is the reason:

On the first day of this month, my friend, Sam and I started the 30 days of code challenge because the university is out of session until next year.

The first, second and third days were aflame 🔥 but the fourth day came and...

I stopped.

I couldn't anymore. Here's the reason:

On the fourth day, I looked at my code schedule and said  "Goodbye code. No more of you".

You can't blame me, I burnt out. 

Actually, I burn out fairly easily but I thought I had everything under control this time around.

I had a plan and it was a good plan. Here's the plan: 

> I'll write lots of code each day for the challenge since I don't have school work to be bothered with.

> I'll use the rest of the day to work on the stuff I do for clients.

Lol. Like every other time, things didn't go as planned and here's what ended up happening:

> I spent the most of the day writing code for clients, because all of a sudden, they started demanding for extra features. 

> I had only a few hours left each day to do stuff for the challenge. 

> I burnt out and suddenly did not want to look at or hear about code anymore.

That's it. That's what happened.

I'm writing this post to let you know why I haven't been blogging about my code. 

I'm not a loser so I didn't just give up.

I burnt out.

When I don't feel this way anymore, I'll do the challenge again and smash it this time around 🔥🔥🔥
How to create a session / login with ejs ?
Tags: javascript, webdev, node, login
Published: 2017-12-14 09:50:29

---
title: How to create a session / login with ejs ?
published: true
description: 
tags: javascript , webdev , node , login
---

Hi, for a web development project, I want to make a login page on my website, but I don't know how to create a session, and compare the login with my .json. 
I tried to do my login system with passport, express-session ans socket.io, but I didn't succeed. I don't understand the logic required.

Could someone please help me ? Explain to me the logic ? Show me an example code which help me ?
How to identify required part of a image, crop and save as new file
Tags: python, opencv, tesseract, ocr
Published: 2017-12-14 06:07:13

---
title: How to identify required part of a image, crop and save as new file

published: true
description: Hi everyone please be gentle. I have an different images and my (first of all) task is to identify the PAN card in that image and cut off the PAN card from the background and save it to a new file.
tags: Python,opencv,tesseract,ocr
---
Kubernetes-powered Docker for mac is released!
Tags: docker, macos, kubernetes
Published: 2017-12-14 05:29:01

---
title: "Kubernetes-powered Docker for mac is released!"
published: true
tags: docker,macos,kubernetes
canonical_url: https://blog.web-apps.tech/kubernetes-powerd_docker_for_mac/
---

 ![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/kubernetes_logo.png)

DockerCon EU 2017で、DockerがKubernetesを統合・サポートすると[発表されました](http://www.publickey1.jp/blog/17/dockerkubernetesdockercon_eu_2017.html)が、本日ついにKubernetesサポート版Docker for macが(Edgeリリースですが)リリースされました！

これにより、macを使用している場合は(おそらく過去最も簡単に)開発用Kubernetesクラスタを起動することができるようになりました！

この記事では、Docker for macでKubernetesを立ちあげる手順をまとめておきます。

## Kubernetesの起動手順

Docker for macのStable版を利用している場合、Edge版をインストールする必要があります。  
[Install Docker for mac](https://docs.docker.com/docker-for-mac/install/)のページから、Edge Channelのインストーラをダウンロードし、インストールします。  
Dockerを終了させておけば、Stable版を自分でアンインストールする必要はありません<sup><a href="#fn1" id="fnref1">[1]</a></sup>。  
Edge版をインストールし、Dockerの設定画面を開くと、以下の様にKubernetesタブが追加されています！！

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-preference-general.png)

Kubernetesタブで、Kubernetesの有効化・無効化を簡単に切り替えることができます。

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-preference-kubernetes.png)

`Enable Kubernetes`にチェックを入れ(`Show system containers`はお好みで)、`Apply & Restart`ボタンを押すと、「Kubernetesの初回インストールは少し時間かかるけど、インストールする？」という確認画面が出るので、`Install`を押します。

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-preference-progress-kubernetes.png)

一応プログレスバーが出るのですが、余り意味はありませんでした・・・  
数分でインストールが終わります。

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-preference-done-kubernetes.png)

無事インストールが終了したら、`Close`を押したあと、設定画面を閉じます。

この時点で、DockerメニューにもKubernetesのステータスが表示されています。

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-menu-kubernetes-is-running.png)

今回私は`Show system containers`をオンにしたので、`docker ps`<sup><a href="#fn2" id="fnref2">[2]</a></sup>するとKubernetesの動作に必要なコンテナが起動しています。  
DNS、API Server、Etcd、Scheduler、Proxyと最小限の構成ですね。

kubectlが自動でインストールされるのかどうかは・・・・わかりませんでした。(すでにインストール済みだったため)  
kubectlがインストール済みの場合、自動でコンフィグが追加され、以下のコマンドでcontextを選択することで操作できるようになります。

```
$ kubectl config use-context docker-for-desktop
```

![Kubernetes-powered Docker for mac is released!](https://blog.web-apps.tech/content/images/2017/12/docker-kubectl-get-nodes.png)

`kubectl get nodes`すると、確かに1ノード構成でクラスタが立ち上がっているのがわかります。

* * *
<section>
<ol>
<li id="fn1">
<p>Edge版の初回起動時にアンインストールされます <a href="#fnref1">↩︎</a></p>
</li>
<li id="fn2">
<p><code>docker container ls</code>と打つのは面倒ですね <a href="#fnref2">↩︎</a></p>
</li>
</ol>
</section>
What topics can I cover in my Golang Youtube Channel
Tags: discuss, go
Published: 2017-12-14 04:18:55

---
title: What topics can I cover in my Golang Youtube Channel
published: true
tags: discuss, go
---

I'm really enjoying to share some stuff about Golang and related technologies. I am blogging on my [Blog](http://pliutau.com/) and also on [dev.to](https://dev.to/plutov). Here is my [GitHub](https://github.com/plutov).

But I want to try the new way to share things, by doing live streams or record a videos where I'll share my screen and we can implement together some interesting functionality.

So I want to ask dev.to Go community what topics will be interesting in your opinion? I have some ideas already:

 - Implement Bots with NLP.
 - Code Reviews.
 - Performance optimizations.