teleren/devto huggingface dataset:
We can virtualize even GUI Text Editor with Docker
Tags: docker, emacs, linux
Published: 2018-02-18 07:59:09

---
title: We can virtualize even GUI Text Editor with Docker
published: true
description: 
tags: docker, emacs, linux
---

Recently, I virtualized almost everything with Docker.

Finally I virtualized my Emacs with GUI because I am using Arch Linux which cannot provide `emacs-mozc` and `fcitx-mozc` for package namespace collision.

So I installed Emacs with X11 client in Docker container, then display Emacs screen to Host's X11 server.

# Environment

- Host OS：Arch Linux
- Guest OS：Debian GNU/Linux
- Docker version： 1.12.1

# Procedure

First of all, write quite simple `Dockerfile`. Hopefully install some tools like `emacs-mozc` or `cask`.

```docker
FROM debian:latest

RUN apt-get update
RUN apt-get -y install emacs24

RUN useradd -G sudo -u 1000 --create-home emacs

ENV HOME /home/emacs
WORKDIR /home/emacs

CMD /usr/bin/emacs --reverse
```

Then run `docker build --tag emacs .` in the directory with above `Dockerfile`.

Next, create a launch script and put it to a directory. `$PATH` must include the directory.

```bash
#!/bin/bash

xhost +local:
docker run -it --rm \
       -v /tmp/.X11-unix:/tmp/.X11-unix \
       -v $HOME:/home/emacs/host_home \
       -e DISPLAY=$DISPLAY \
       --user 1000 \
       emacs

xhost -local:
```

The above code just do

- Pass `$DISPLAY` env var to the container
- Share `$HOME` directory for general usage
- Share `/tmp/.X11-unix` between host and container to connect X11 socket


Finally launch emacs:

`emacs-docker`

It works! 

![Screenshot_2016-10-07_01-26-59.png](https://qiita-image-store.s3.amazonaws.com/0/103885/078982d6-5daa-263a-2542-50e0c1c6f2f4.png)

To check the host and guest interaction let's run `dired` emacs file explorer. 

![Screenshot_2016-10-07_01-30-31.png](https://qiita-image-store.s3.amazonaws.com/0/103885/fdc59c7a-6144-975f-4ee4-04f17240baa9.png)

Yes, `$HOME` of host is mounted to the container.
In the container these files owner are recognized as Docker executing user(emacs). cause the UID `1000` matches.

# Attention

- If HOST UID and GUEST UID does not match, we cannot edit files for permission problem.
- We cannot use Symbolic link in the container like Docker, LXC. This is sometimes really inconvenient.

This post is a kind of joke to some extent, but I will use emacs-docker actively.

# Appendix

There is `/tmp/.XIM-unix` directory. If we mount it then possibly we can virtualize XIM functions.

Container is a dream.
Regular expressions Tutorial For Linux
Tags: linux, bash, regex, beginners
Published: 2018-02-18 07:19:47

---
title: Regular expressions Tutorial For Linux
published: true
description: 
tags: #linux #bash #regex #beginners
---

In order to successfully work with the Linux sed editor and the awk command in your shell scripts, you have to understand regular expressions or in short regex. Since there are many engines for regex, we will use the shell regex and see the bash power in working with regex.

First, we need to understand what regex is, then we will see how to use it.

1 What is regex
2 Types of regex
3 Define BRE Patterns
4 Special Characters
5 Anchor Characters
6 The dot Character
7 Character Classes
8 Negating Character Classes
9 Using Ranges
10 Special Character Classes
11 The Asterisk
12 Extended Regular Expressions
12.1 The question mark
12.2 The Plus Sign
12.3 Curly Braces
12.4 Pipe Symbol
13 Grouping Expressions
14 Practical examples
14.1 Counting Directory Files
14.2 Validating E-mail Address

https://likegeeks.com/regex-tutorial-linux/

Hope you like it.

Regards,
How wonderful feature 'Higher Order Messages' in Laravel 5.4
Tags: laravel, php, functional
Published: 2018-02-18 03:05:27

---
title: How wonderful feature 'Higher Order Messages' in Laravel 5.4
published: true
description: 
tags: laravel, PHP, FP
---

I was moved to the feature "Higher Order Messages" in Laravel added at 5.4.

https://laravel.com/docs/5.5/collections#method-flatmap

I would like to show some examples.

# Prerequisite

There are two models `Company` and `User`.

The obvious relationship is:

- Company hasMany Users
- User belongsTo Company

`Company` Model has these methods:

- `getIsContractExpiredAttribute` 
- `notifyContractExpiration` 


(This example has some problems but this is for just example)

Then we will take 5 contract expired companies randomly and send emails to those companies.

# Before (~ 5.3)

```php
Company::with('users')
    ->all()
    ->filter(function ($company) {
        return $company->isContractExpired;
    })
    ->take(5)
    ->pluck('users')->flatten()
    ->each(function ($user) {
        $user->notifyContractExpiration;
    });


```

# After (5.4 ~)

```php
Company::with('users')
    ->all()
    ->filter->isContractExpired
    ->take(5)
    ->flatMap->users
    ->each->notifyContractExpiration;
```

There are less closure. Simple, great readability.

# Detail

In the above example, `Company::all()->map` returns `Illuminate\Support\HigherOrderCollectionProxy` which has a lot of tasks.


The following methods support `HigherOrderCollectionProxy`.

- average
- avg
- contains
- each
- every
- filter
- first
- flatMap
- map
- partition
- reject
- sortBy
- sortByDesc
- sum

For example, `Company::all()->sum->isContractExpired` returns count of contract expired companies.

A lot of fun like SQL, right?
JavaScript Decorators 
Tags: showdev, javascript, es6, decorators
Published: 2018-02-18 02:02:51

---
title: JavaScript Decorators 
published: true
description: 
tags: showdev, javascript, es6, decorators
---
JavaScript developers. Are you using JS Decorators in your projects ? Today I write simple wrapper for better experience with decorators. Important to me is your opinion about this helper library.

Thanks

https://www.npmjs.com/package/decorator-wrapper
Using Bootstrap 4 with Vue
Tags: vue, bootstrap
Published: 2018-04-22 22:08:20

---
title: "Using Bootstrap 4 with Vue"
published: true
tags: vue, bootstrap
canonical_url: https://www.techiediaries.com/vue-bootstrap/
---

In this article I'll show you how to integrate the latest version of Bootstrap with your Vue application.

Bootstrap 4 has many new features such as the use of Flexbox, ES6 modules and a new card component (which you can use to easily craft card-based layouts such as the famous Masonry layout without JavaScript/jQuery plugins or complex algorithms) etc.

You can use Bootstrap 4 to add mobile first styling to your Vue application without re-inventing the wheel and without having to acquire deep CSS knowledge particularly if you need to create complex and responsive layouts.

Bootstrap 4 requires jQuery and Popper.js. jQuery is a DOM library that makes a direct manipulation of the DOM unlike Vue which uses the virtual DOM approach so you'll want to avoid using jQuery within your Vue application but this means you won't be able to use many Bootstrap 4 components that requires jQuery?

Don't worry though the community has provided some packages that integrate Bootstrap 4 with Vue without resorting to jQuery. Let's see the most popular libraries

So let's get started with the first library that you can use to integrate your Vue application with Bootstrap 4

## [Bootstrap-Vue](https://bootstrap-vue.js.org/)

![](https://screenshotscdn.firefoxusercontent.com/images/030f06e4-c4cc-4e09-aa12-e8843bc4192a.png)

Head over to your terminal and navigate inside your Vue project then run the following command to intall `bootstrap-vue`

```
npm install bootstrap-vue bootstrap --save
```

`bootstrap-vue` requires Bootstrap CSS files so you need to install `bootstrap` too.

Next you'll need to enable the _VueBootstrap_ plugin in your Vue app entry point.

```
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

new Vue({
  el: '#app',
  render: h => h(App)
})
```

You can also use these two templates to scaffold your Vue project [webpack-simple](https://github.com/bootstrap-vue/webpack-simple) and [webpack](https://github.com/bootstrap-vue/webpack) which integrate `bootstrap-vue` out of the box.

For example this how you generate a new Vue project based `bootstrap-vue/webpack-simple` using the Vue CLI.

```
vue init bootstrap-vue/webpack-simple my-project
cd my-project 
npm install
```

You can then use different [Bootstrap 4 components](https://bootstrap-vue.js.org/docs/components/)

```
<template>
<div>
  <b-button>This is a button</b-button>
  <b-button href="#">This is a link</b-button>
</div>
</template>
```

## Conclusion

Using Bootstrap-Vue is the recommended way to integrate Bootstrap 4 with your Vue 2 application since it offers Vue components for Bootsrap components that requires jQuery.
How to Run Mule 4 In Docker Container
Tags: mule, muleesb, docker
Published: 2018-02-19 20:52:36

---
title: "How to Run Mule 4 In Docker Container"
published: true
tags: mule, mule-esb, docker
canonical_url: https://javastreets.com/blog/run-mule4-in-docker-container.html
---

Recently I updated javastreets/mule docker image to Mule ESB 4.1.0 Community version. In this post, we will run a Hello Mule 4 application in Docker container.

 Table of Contents 

- 1. What is Mule Docker Image?
- 2. Say Hello Mule 4 Application
- 3. Dockerfile
- 4. Build and Run
- 5. Conclusion

## 1. What is a Mule Docker Image?

If you are looking for Mule Docker image, then you can check javastreets/mule docker images on [docker hub](https://hub.docker.com/r/javastreets/mule/tags/). It is probably the smallest and compact Mule ESB Image.

If you have Docker installed on your machine, you can pull the image as `docker pull javastreets/mule`.

## 2. Say Hello Mule 4 Application

I have added a Simple Hello Mule 4 application to [mule4-examples](https://github.com/manikmagar/mule4-examples/tree/master/say-hello-mule4-docker) repository on github. This application has only one HTTP listener flow that listens on [http://localhost:8081/test/hello](http://localhost:8081/test/hello).

It is built for current **Mule 4 Community Edition Runtime**.

## 3. Dockerfile

The Dockerfile to build and package our application to mule -

```
FROM javastreets/mule:latest-4

COPY ./target/say-hello-mule4-docker*.jar /opt/mule/apps/

CMD ["/opt/mule/bin/mule"]
```

## 4. Build and Run

To build and run the application - execute `sh buildAndRun.sh`.

This performs 3 steps -

-  Run Maven Build to package application.
-  Build Docker image named hellomule4 and adds this application to Mule within docker.
-  Starts the docker container to run mule in foreground. (press CTRL+C to stop mule)

To run application in background, you may also run below command -

`docker run -d --name hellomule4 -p 8081:8081 hellomule4`

This docker image exposes 8081 port and binds it to the 8081 of localhost.

Once application is running, access below url to see Hello from Mule -

[http://localhost:8081/test/hello](http://localhost:8081/test/hello)

It should output -

_Hello from Mule ESB (Version: 4.1.0). I am running inside docker image javastreets/mule:latest-4_

## 5. Conclusion

It is easy to run Mule Applications inside Docker Containers. javastreet/mule docker image provides an easy way to get Mule Up and Kicking! Example source code is available on Github here - [mule4-examples](https://github.com/manikmagar/mule4-examples/tree/master/say-hello-mule4-docker)
Storybook Driven Development を試している
Tags: javascript, react, storybook, recompose
Published: 2018-02-16 17:14:35

---
title: Storybook Driven Development を試している
published: true
description: Storybook と recompose を組み合わせて Atomic Design でコンポーネント群を組み合わせる
tags: JavaScript, React, Storybook, recompose
---

前々から気になっていた Storybook を試して、プロダクトでも採用してみたので所感を書く。

ちなみに、[Next.js](https://github.com/zeit/next.js) を使っているけれど、`.babelrc` の設定とかをやっていれば `start-storybook` の `-s ./` オプションで問題なく動いた。

# 動機

ここ数年、React を使って component ベースでウェブページを設計することを何度かやってきているが、未だにパスタコンポーネントが出来上がってしまう。そしてパスタコンポーネント群は往々にして開発がつらくなっていく...。

# Storybook について

![](https://i.gyazo.com/4e5bee38519cf776e97452d380d7b305.png)

Storybook は動的にスタイルガイドを生成できるツールで、React だけではなく Vue や Angular にも対応しているよう。

`@storybook/react` をインストールして CLI から起動するだけでホットロードしてくれる画面が立ち上がって便利だった。

サンプルは https://storybook.js.org/examples/ でみれる。

# アトミックデザインについて

![](https://i.gyazo.com/1e42493f2e45b243085bf9571b593212.png)

(これが全てだろう)

![](https://i.gyazo.com/758f97c15a3e4721f5a4c020125d04e7.jpg)

(有名な図)

Storybook を書いていくときにある程度項目立てをしていった方がいいだろう、と考えた。そこで思い出したのが Atomic Design だった。昔、知った時は分類がややこしそうだと思ったが、一旦従ってみることにした。

# 開発フロー

まずは小物から Atom として Storybook に書いていく。状態によって変化するコンポーネントは状態を列挙して、Storybook 上で確認できるようにしていく。まずは Atom と Molecules たちが仕上がってくる。

各パーツが仕上がったら API とつなぎ込む必要がある Organisms など、動きをつけていく。ここで役に立つのが recompose である。

# recompose について

[recompose](https://github.com/acdlite/recompose) は Lodash ライクな React (特に HoC)向けのユーティリティベルト。

```js
const enhance = withState('counter', 'setCounter', 0)
const Counter = enhance(({ counter, setCounter }) =>
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
)
```

こんな感じで見た目を司るコンポーネントのみを切り出せるように様々な関数が用意されている。

例えば React の Lifecycle 関数だと

```js
const PostsList = ({ posts }) => (
  <ul>{posts.map(p => <li>{p.title}</li>)}</ul>
)

const PostsListWithData = lifecycle({
  componentDidMount() {
    fetchPosts().then(posts => {
      this.setState({ posts });
    })
  }
})(PostsList);
```

こんな感じで分離させることができる。

また、これらは `compose` 関数でこれらを組み合わせることもできる。

```js
const enhance = compose(
  withState('counter', 'setCounter', 0),
  lifecycle({...})
)

enhance(Counter)
```

ゆくゆくは enzyme を使って Storybook 上で挙動の確認などもできるとよいのだけど、一旦 Storybook ではスタイルガイドに徹することにして

```js
export const Counter = ({...}) => (...)

const enhance = compose(...)

export default enhance(Counter)
```

として、story では `import {Counter} from '...'` と読み込み、Pages からは `import Counter from '...'` と読み込むことで見た目のみのコンポーネントと、動き込みのコンポーネントに分けることができた。

見た目に関しては Storybook 上でパーフェクトに仕上がってるので、バチッと動くロジックを書けばうまいこと動くようになるので心地よかった。

# 今後の展望など

Storybook のドキュメントにも書いてある visual regression test をやってみたい。あとは、上にも少し書いた enzyme を使っての動きのテストなど。

# まとめ

Atomic Design に従ったコンポーネント群を Storybook を使って見た目を仕上げてから、recompose を使って動きを足していく開発フローを導入してみている。

余談だけど、ざざっと Examples を見たら Wix の wix-style-react はものすごい使いやすいようにカスタムされていてすごかった...。オフィシャルに取り込んでほしいレベル。
It's perfectly fine to only code at work, don't let anyone tell you otherwise.
Tags: career, productivity
Published: 2018-02-17 18:36:07

---
title: It's perfectly fine to only code at work, don't let anyone tell you otherwise. 
published: true
description: Us humans put a lot of pressure on one-another and there are a lot of competitive, unhealthy environments that cause us a lot of pain.
tags: career, productivity
---

Here's a thread from the community a little while back:

{% link https://dev.to/pungiish/programmers-who-only-code-at-work-bhp %}

> What's your opinion on programmers who are not passionate about programming, have no side projects and only program at their jobs. Not senior devs either, just programmmers, who are not juniors anymore. Can they ever improve, write better code? Or do they stagnate.

I wanted to share this wonderful top comment:

{% devcomment 1aia %}

Us humans put a lot of pressure on one-another and there are a lot of competitive, unhealthy environments that cause us a lot of pain. We also each have different personal contexts which ultimately guide our lives a lot more than 1's and 0's.

{% devcomment 1b1m %}

If you want to code in your spare time, go for it, but this career is an absolute marathon and being able to take yourself away from your computer more often is a strength as far as I'm concerned.

@_patrickgod has a lot of good posts on maintaining healthy habits and they all touch on balance.

{% link https://dev.to/_patrickgod/3-healthy-habits-for-programmers-1dce %}

{% link https://dev.to/_patrickgod/sleep-more-code-more-496i %}

I'm getting ready to escape into a bit of nature for the weekend and wanted to take a minute to share some great tips from the community on the subject of escaping. I hope it helps someone out there.

Happy coding!
Check your settings, save mad loot
Tags: aws, s3, cdn, bootstrap
Published: 2018-02-17 15:21:54

---
title: Check your settings, save mad loot
published: true
description: “Set and forget” web services can be a blessing and a curse.
tags: aws, s3, cdn, bootstrap
cover_image: https://thepracticaldev.s3.amazonaws.com/i/heddivq1g0wl2bo5se7k.jpg
---

<small>Photo by <a href="https://unsplash.com/@agent_illustrateur?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Christine Roy">Christine Roy</a></small>

### TL;DR

I co-founded and have been leading the [BootstrapCDN](https://www.bootstrapcdn.com/) project since 2012. I have made many mistakes, here is one I hope others can learn from. “Set and forget” web services can be a blessing and a curse. No matter what service you are using so, log in and audit the bill.

---

Since 2013 [we](https://github.com/MaxCDN/bootstrapcdn/graphs/contributors) have been using S3 as our object store origin. You see, the beauty of S3 is how reliable/secure it is. That’s the _blessing_. The _curse_ to that is you rarely have to login.

Late last November, I had to login to check a setting and had some time to kill so decided to check the cost explorer. I always knew our S3 costs where high but never dove into it because it was never an issue. So I decided I see what was happening and digging through the S3 logs, noticed strange query strings (e.g. `?v=1&v=2&v=3...&v=5409`) which was treated as a separate object that couldn't be cached (on the CDN) since it was constantly changing, "[Cache Busting](https://dev.to/search?q=Cache%20Busting)" so to speak. I logged into the MaxCDN Control Panel, and _disabled_ “Treat as separate cacheable item”.

<img src="https://thepracticaldev.s3.amazonaws.com/i/wplqb2ami7lw4ci55578.png">

This is what 1 simple change did:

<img src="https://thepracticaldev.s3.amazonaws.com/i/ihovac3jr1cwi4pejiss.png">

### Things I learned

* At the time I started the investigation, at our scale, a 0.43% non-cache hit ratio equaled 297mm+ requests going back to the origin i.e. S3.
* Making changes to a service that serves ~72 billion requests a month is scary but as long as you have a team to help monitor abnormalities, don’t be afraid.
* No matter how well things are working, login and audit!

**Before change (October 2017)**:

<img src="https://thepracticaldev.s3.amazonaws.com/i/clq81na7ltbsqv8ns5eu.png">


**After change (January 2018):**

<img src="https://thepracticaldev.s3.amazonaws.com/i/byjvlyq62fhyknmrbecq.png">


### In closing

Writing this post wasn’t easy. Admitting to something so stupid opens yourself up to ridicule, but I am 99.57% positive there are others making similar mistakes. No matter what service you are using, login and audit. In the meantime, I'll be finding out why 211mm+ requests are cache misses.🤔
Practicality Beats Purity Intro - Test Passing Rate
Tags: python, engineering, practicality
Published: 2019-07-05 03:28:30

---
title: Practicality Beats Purity Intro - Test Passing Rate
published: true
tags: python, engineering, practicality
canonical_url: https://tryexceptpass.org/article/practicality-beats-purity-1/
cover_image: https://tryexceptpass.org/images/rube-goldberg.jpg
---

A few hours later, I find myself sitting in the “comforts” of my cubicle. The discussion replaying over and over in my head: “An interface with this behavior will integrate with most common language libraries, with no special client code”, I said. The response was: “But then it’s not a _<insert_random_technical_buzzword_here></insert_random_technical_buzzword_here>_ design, and the company already decided that’s the route we’re taking.”

I’ve spent many years of my career involved in buzzword dogma discussions. It’s present at all levels of software development, from basic principles, to scheduling, to implementation, its interfaces, its tests, the execution, the infrastructure that runs it and its release mechanisms. Most of the time, people lose track of why or what they are building in favor of claiming they are using some common buzzword, regardless of the effects on architecture, ease of use, customer experience or maintenance costs. My experience shows they don’t even know why the buzzword technology does things a certain way or why it someone chose it in the first place. Factual or data-based counterargument results in an almost “religious” discussion and even shaming.

Given today’s ease of communication and the ability to share our experiences, it’s great that we try to educate other folks on the problems we typically face throughout our lives and careers. Especially the specific principles used in managing their solutions.

[Read on ...](https://tryexceptpass.org/article/practicality-beats-purity-1/)
入門自然言語処理 pp.225-241
Tags: nlp, python, reading
Published: 2018-02-17 02:56:30

---
title: 入門自然言語処理 pp.225-241
published: true
description: 
tags: nlp, python, reading
---

5.6 変換を利用したタグ付け。一旦大雑把にタグ付けしたあと、教師あり学習したルールでさらに修正を加えていく。

6章は、テキスト分類の学習。

> 「a」、[e]、「i」で終わる名前は女性の名前であることが多く、「k」、「o」、「r」、「s」、「t」で終わる名前は男性であることが多い。
> 
> 訳注: [...]日本語の場合は「男」や「夫」は男性、「子」は女性といった考え方をすることができる。

へー。なるほどね。
What exit should a .NET developer take?
Tags: discuss, career
Published: 2018-02-16 18:38:09

---
title: What exit should a .NET developer take?
published: true
description: Is there a stack or language that .NET developers have found themselves moving to?

tags: discuss, career
---

Is there a stack or language that .NET developers have found themselves moving to?

I'm currently working in a .NET stack, and it's also been a little bit of a slough as I work primarily on ASP.NET Web Forms-based projects and fewer MVC projects. I've been considering leveling up my skills to .NET Core, but I was wondering if anyone had any suggestions about other tools to explore.
Explain me clean architecture like im five
Tags: explainlikeimfive, android
Published: 2018-02-16 17:57:11

---
title: Explain me clean architecture like im five
published: true
description: 
tags: explainlikeimfive, android
---
![clean architecture](https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTUyQVF1X73Bu0tM_7XXzHsMi-vCKaeJPPaSc74QS-AbNh9URENu6o3yykR)
Apply Constraints to Lucid Relationships in AdonisJS
Tags: node, tutorial, javascript, mysql
Published: 2018-02-16 17:52:54

---
title: Apply Constraints to Lucid Relationships in AdonisJS
published: true
description: Lucid is an implementation of Active Record pattern in Javascript.
tags: node, tutorial, javascript, mysql
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nl7p7ynodkglth8b1uil.png
---

> Subscribe to my YouTube channel for [more tutorials on working with VueJS and AdonisJS -- an MVC framework for NodeJS](https://www.youtube.com/channel/UCF5w1QdWroWOoxxXMgp88AQ?sub_confirmation=1)!

In this video I show you how to use Lucid to apply runtime constraints to any related data you add to your main query. ie: Limiting related customer projects to only those that are incomplete. 


{% youtube eOOdseihjSI %}


## Links:

[Github Repo](https://github.com/patrickodacre/simple-api-adonis-js/tree/lucid_query_constraints)

**Related YouTube Videos**

[Use Lucid ORM to Query Related Data from a MySQL Database](https://www.youtube.com/watch?v=_zUF_mhubL0)
Explain WebAssembly Like I'm five
Tags: explainlikeimfive, webassembly
Published: 2018-02-16 11:39:17

---
title: Explain WebAssembly Like I'm five
published: true
description: 
tags: explainlikeimfive, webassembly
---

What in the heck is WebAssembly? Tried to understand the docs but had no success.