teleren/devto huggingface dataset:
Publish vue components like this.
Tags: vuex, javascript, vue
Published: 2018-06-21 04:26:52

---
title: Publish vue components like this.
published: true
tags: vuex,javascript,vuejs,vue
canonical_url: 
---

First of all big up to those who develop and publish vue components. You make work very easy and simple for us. Most components are just an npm install away.

However I would like to draw your attention to one small aspect of exporting components. Lets look at how we normally expose components to be publishable. Assuming we have a hello world component

{% gist https://gist.github.com/sadick254/488d318ad07a20a4554756cc100e7ebb %}

Lets expose it to be the outside world so that we can publish to npm

{% gist https://gist.github.com/sadick254/243483598fadc6fbe436d92843d063d1 %}

With this when someone installs your vue component he/she has to import it and register it to the global scope.

{% gist https://gist.github.com/sadick254/60e04975fbe08aa54afaec8b7b5eb688 %}

This approach is okay if the component is going to be used in many places of the application. If not it would be polluting the global scope. But if someone using your component wants to use it on a local component once he has to resort to importing it like this

```javascript
import HelloWorld from 'helloworld/src/components/HelloWorld.vue'
```
Which is not really ideal and not straight forward. The best practice would be to provide the user a way to both import it globally and locally at the same time with minimal effort. Not having to deal with the internal structure of your application.

The ideal imports should be

{% gist https://gist.github.com/sadick254/bc073bb145701e1d559f778671eeed3c %}

To achieve this there is only one line you need to add. One that is being neglected by most component developers.

When you export your component please remember to include this line.

{% gist https://gist.github.com/sadick254/2ab9e5c59344c9b776fa4034347004a3 %}

_If this post was helpful please share it and stay tuned for my other articles. You can follow me on_ [_GitHub_](https://github.com/sadick254) _and_ [_LinkedIn_](https://www.linkedin.com/in/isaac-odhiambo-678b1547/)_. If you have any ideas and improvements feel free to share them with me._

_Happy coding!_
Adding basic navigation to the Fuse Netrunner browser
Tags: video, fuse, coding, ui
Published: 2017-11-23 07:10:28

---
title: Adding basic navigation to the Fuse Netrunner browser
published: true
description: Adding some basic state-based navigaton between the pages
tags: video, fuse, coding, ui
---

{% youtube 28EGDJiE330 %}

I add some basic navigation to our browser to go to a deck listing and an about page. I haven't implemented those pages yet though, just placeholders. -- Watch live on [Twitch - Mortoray](https://www.twitch.tv/mortoray)
Bullet-proofed routing with Laravel and Vue (Part 1)
Tags: laravel, vue, routing, javascript
Published: 2017-11-23 04:49:06

---
title: Bullet-proofed routing with Laravel and Vue (Part 1)
published: true
description: Let make an spa more spa like
tags: laravel, vue, routing, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z50qkkqm6fsx4go9hpyw.png
---

# Introduction
Laravel and Vue are two really cool software tools I fancy and quite frankly I kinda think there's no better combo for these guys. In this post we are gonna have a look at the routing tricks we can implement to get the most of these guys.

> Routing especially with Vue is long business, so this is going to be a two part post, so stick around.

## The Routing Problem
I know, we might not want to admit it but with Vue and laravel running a show as an spa, we usually have a routing problem.

> What exactly is this problem

#### Case Scene
So we have an application with the following routes

/resource/
/posts/
/posts/{slug}

let's assume these routes are served via the web routes in laravel (routes/web.php), no biggie,

But when we move the magic over to vue, using the vue router, it becomes a really messy beast to deal with, for an spa all routes would have to be prefixed with the hash bang for vue to handle their translation appropriately.

therefore 
/resource/ becomes !#/resources
/posts/ becomes !#/posts
/posts/{slug} becomes ??, you guessed it, bam !#/posts/{slug}

For cool devs such as ourselves and the amazing users we hope to have, this is not cool.

#### Moment of Truth.

At this point you are probably really annoyed and just want to see the solution, so here we go.

Now, vue attempts to fix this using the history values on the Vue router

```
const router = new Router({
		routes: routes,
		base: '/',
		mode: 'history',
		history: true
	});
```
Using the router settings, we can set the history value to true and have them use the normal route values when clicked from the the route link `router-link` component.

But this is only a partial fix, since when we request a route from the main external link this gives us a error since now its laravel routing that's handling the mix, and no longer a show run by vue routing, so how do we ensure this remains a vue business

Well, this is the magic piece

```php
Route::get('/{vue_capture?}', function () {
   return view('inner');
})->where('vue_capture', '^(?!storage).*$'); 
```
This route setup essentially means that all routes that follow the after the / are immediately sent back to the blade file that hosts the vue root element and main implementation, in this case that blade file is "inner" the regex on the function, captures all except routes looking to access the storage links.

## Conclusion

With this vue handles the show, and all things routing runs with vue. In the next post we'll have a look at the process of using vuex to authenticate and automatically redirect to appropriate routes, and of course how to do it in a bullet-proofed manner.
中規模のSwaggerファイルをいい感じに管理するために薄いフレームワーク作った - swglow
Tags: swagger
Published: 2017-11-23 03:58:28

---
title: 中規模のSwaggerファイルをいい感じに管理するために薄いフレームワーク作った - swglow
published: true
description: swagger yaml framework
tags: #swagger
---


## 今回の成果物
### Swaglow
https://github.com/chuross/swaglow

## 特長
特定のルールに基づいたディレクトリ階層から、SwaggerのYamlファイルを結合して出力する。

* SwaggerのYaml運用に**最低限**の秩序をもたらす
	* フレームワークが生成したディレクトリに沿ってファイルを追加していくので、ファイル管理をルール化しやすい
* ディレクトリ階層や名前から`paths`や`definitions`の定義を自動生成
	* 最終的なYamlがどう生成されるのか意識する必要は無い
	* Yamlファイルを個別に管理していくことに集中できる

## 経緯
Swaggerで扱うYaml(or Json)は最終的には1つのファイルとして扱わないといけないが、何も考えずにそれに乗っかるとファイルが肥大化して管理しづらくなる。

そのためYamlを分割して結合するのが良く、npmにも既にそれを実現するライブラリも豊富にある。しかし、そのどれもが`$ref`を使う方式で、これだとファイルをどの単位で分割するかのルールが無いので、もうちょっと仕組み的に縛りたかった。

## 導入

1. `$ npm install -g swaglow`

## 使い方
### 初期化
まずはプロジェクトのルートディレクトリでinitコマンドを実行

`$ swaglow init -o [output path]`

するとこのようなディレクトリが出力先に生成される

```
swaglow root // -oで指定したパスのルート
- swaglow.json // 専用のコンフィグファイル
- paths // APIのエンドポイントを管理するディレクトリ
- definitions // モデルを管理するディレクトリ
- parameters // APIリクエストで使う共通のパラメータを管理するディレクトリ
```

### 開発
簡単な例としてREADME.mdにある内容をリンク貼っとく
[GitHub - chuross/swaglow: simple swagger framework](https://github.com/chuross/swaglow#example)

より実践的な例だと、このライブラリを使ってQiita API用のSwaggerを作るリポジトリを用意したのでそちらを確認してほしい

swagger-toolsなどを用いて出力したyamlをvalidateしたりiOS Clientにビルドする仕組みを入れてCIで回すようにしている

[GitHub - chuross/qiita-swagger-yaml: swagger yaml file for Qiita](https://github.com/chuross/qiita-swagger-yaml)


### ビルド
`$ swaglow build -o [output path]`

出力先に結合されたSwagger Yamlファイルが生成される

## ライセンス
MIT

## あとがき
今回紹介したように手運用でSwaggerのYamlを生成するのは基本的にはオススメしない。

* 追従しないとサーバー側の実装と乖離する可能性がある(メンテコストの増加)
* Swagger Yaml職人が出る可能性がある(属人化)
	* チーム全体で管理していく仕組み作りなどが必要になる

そういった意味では自社開発のAPIにリクエストを投げる場合であればメンテの効率を上げるためにサーバー側で書かれたコードから自動生成させるのが良いだろう。

では手運用は果たして意味が無いのかと言うと状況によってはそんなこともない。

例えばこのようなケースには使えると思われる

* プロジェクトがスタートした直後でサーバー側の準備ができていない場合
	* モックサーバーとして活用する
	* 本格的な運用はサーバー側ができたらそっちでやるのが良さそう
* 別会社・別チームのプロダクトなどそもそもSwaggerの連携が難しい場合

このような感じでケース・バイ・ケースだと思うので、もし何らかの理由で手運用の管理が必要になった場合はこのフレームワークを使うと良いかもしれない。
web-log
Published: 2017-11-23 02:43:23

---
title: web-log
published: true
description: 
tags: 
---
#want
##index card
in japanese(https://ja.m.wikipedia.org/wiki/情報カード)

##book
Purufu obu hevun : Noshinkei gekai ga mita shigo no sekai. (Japanese) Hardcover – October 12, 2013
by Eben Alexander; Takako Shirakawa (Author)
[amazon co.jp] (https://www.amazon.co.jp/プルーフ・オブ・ヘヴン-脳神経外科医が見た死後の世界-エベン-アレグザンダー/dp/4152094087/ref=sr_1_1?s=books&ie=UTF8&qid=1511403275&sr=1-1)
[amazon.com](https://www.amazon.com/プルーフ・オブ・ヘヴン-脳神経外科医が見た死後の世界-エベン-アレグザンダー/dp/4152094087/ref=sr_1_1?s=books&ie=UTF8&qid=1511403275&sr=1-1)

##EVENT
- tire technology expo 2018(http://www.tiretechnology-expo.com/en/exhibitor-list.php)

- automotive testing expo 2018(http://www.testing-expo.com/india/ta/)

#funny site
- visual thesaurus(https://www.visualthesaurus.com/trialover/)

- Create business card for cosplayer
(https://proof.jigmy.com/meishi/ms0350redraw.10000?pageFlag=0&selCategoryText=1000000138&trayOpen=0&page=3)

- Set up google account if you die.
(https://myaccount.google.com/u/0/inactive)

- if create Marriage registration with another dimension charactor,
you can receive acceptance certificate.
(https://gateboxlab.com/tokoukyoku_marriage/) 

- google create os without linux kernel.
(https://fuchsia.googlesource.com/?format=HTML)

- minor-os Haiku.(It's rival Jobs's mac-os in NeXT, evolution version)
(http://blog.livedoor.jp/toaru_se/archives/28712675.html)

- OSAKA MOTOR SHOW 2017:Crappy than TOKYO MOTOR SHOW 2017.
(http://www.osaka-motorshow.com)

- SAPPORO MOTOR SHOW 2018:Crappy than TOKYO MOTOR SHOW 2017.
(http://sapporomotorshow.jp)
I am quitting my Job as a Project Co-ordinator to pursue my passion as a developer. Am I doing the right thing?
Tags: help, discuss, beginners, career
Published: 2017-11-23 02:33:11

---
title: I am quitting my Job as a Project Co-ordinator to pursue my passion as a developer. Am I doing the right thing?
published: true
description: Career switch? 
tags: help, discuss, beginners, career
---

Hi, I have been Project Co-ordinator development team for the past 10 months and I have been mostly co-ordinating with the clients rather than actually managing my team (because my company is like that). I've always wanted to be a Software developer and I think this is the right time for me to quit my job and develop my skills on programming. 

P.S. I graduated(CSE) in 2016 and this is my first job. I think it not too late to make career switch.
Professor Pacejka pass away.
Published: 2017-11-23 02:07:25

---
title: Professor Pacejka pass away.
published: true
description: 
tags: 
---
![Professor Pacejka](http://cms.ukintpress.com/UserFiles/web-pacejka3.jpg)
Professor Pacejka pass away.
It's very sadness.

Tribute: Hans Pacejka 1934-2017[http://www.tiretechnologyinternational.com/news.php?NewsID=87381]
I want this pen
Published: 2017-11-23 01:27:45

---
title: I want this pen
published: true
description: 
tags: 
---
I want this.
![Think Ink Pen](https://images-na.ssl-images-amazon.com/images/I/71WIy1hP24L.jpg)
Think Ink Pen(https://fado.vn/jp/stress-relief-pen-think-ink-pen-magnetic-pen-focus-spinner-fidget-toy-for-kids-and-adults-with-adhd-toy-pen-focus-toy-145mm-sliver-B072LKD58X.html?ie=UTF8&psc=1)
Game Application
Published: 2017-11-23 01:01:11

---
title: Game Application
published: true
description: 
tags: 
---
# Dragon Quest Rivals
(http://www.dragonquest.jp/rivals/)
no-play.

It look like so funny.
but,it is hard me to select 40 card.

# Animal Crossing:Poket Camp
(https://ac-pocketcamp.com/ja-JP/site)

no-play.
It's difficult to access,no-responce for two-day.
I tried ORLY Cover Generator
Published: 2017-11-23 00:59:18

---
title: I tried ORLY Cover Generator
published: true
description: 
tags: 
---
# O RLY Cover Generator
(https://dev.to/rly)

I tried it.
![Note Cover O RLY Cover Generator](https://thepracticaldev.s3.amazonaws.com/i/1lp2215zdndm8u86np2q.png)
Ethereum
Published: 2017-11-22 22:17:32

---
title: Ethereum
published: true
description: 
tags: 
---
#Ethereum
BlockChain Platform.

##Ethereum Philosophy
- A Proof of Stake Design Philosophy
(https://medium.com/@VitalikButerin/a-proof-of-stake-design-philosophy-506585978d51)
- in Japanese
(http://block-chain.jp/tech/ethereum-solidity/)

- Summary Ethereum in Japanese
(http://block-chain.jp/tech/ethereum-solidity/)

##Solidity
Language for Ethereum Virtual Machine
- Tutorial in Japanese
(https://github.com/ethereum/wiki/blob/master/%5BJapanese%5D-Solidity-Tutorial.md)
Mining cryptocurrencies instead of having ads?
Tags: discuss
Published: 2017-11-22 21:58:07

---
title: Mining cryptocurrencies instead of having ads?
published: true
tags: discuss
---

Today I saw a tweet from @ben that had a dev.to link talking about ads that made me remember something that I saw some weeks ago:

{% twitter 933158678340890624 %}

### Coinhive

[Coinhive](https://coinhive.com/) offers a Javascript API for mining a cryptocurrency called [Monero](https://getmonero.org/) in your own website so instead of having a tons of ads you ask for some processing power for mining to the user.

Concepts (I got this from their website):

- Captcha: We offer an easy to implement captcha-like service where users need to solve a number of hashes (adjustable by you) in order to submit a form. This prevents spam at an inconvenience that is comparable to a classic captcha. All with the added benefit of earning you money.

- Shortlinks: If you have an URL you'd like to forward your users to, you can create a cnhv.co shortlink to it. The user has to solves a number of hashes (adjustable by you) and is automatically forwarded to the target URL afterwards.

- Javascript API: If you don't like the captcha or shortlinks for whatever reason, nothing is stopping you from implementing your own solution on top of our API.
The JavaScript API let's you associate solved hashes to specific users on your site. Users can solve hashes on your behalf in return for benefits you provide.

---

I think this super interesting in captcha and short links but I would not like it that much if all my tabs are mining at the same time.

Do you think that this will become the new ads?

Do you know some potential problems that we could encounter as users?

Please share your opinion.
sudo apt-get install yakuake
Tags: install, ubuntu, yakuake
Published: 2017-11-22 21:21:48

---
title: sudo apt-get install yakuake
published: true
description: Install "Yakuake" on Linux Mint 18.2 ( Ubuntu )
tags: Install, Ubuntu,Yakuake
---
Linux Mint 18.2 + Yakuake Konsole (F12 = Open) ( Breeze Theme ) #Emacs -nw + Bookmarks .org Doc. open URL in Browser C-C C-O [Picture](https://thepracticaldev.s3.amazonaws.com/i/g2elg4kzk8asqyhn8aow.png)

Breeze Theme https://store.kde.org/p/1193435

```shell
➜  ~ sudo apt-get install yakuake
[sudo] password for psnc: 
Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following additional packages will be installed:
  konsole4-kpart
The following NEW packages will be installed:
  konsole4-kpart yakuake
0 upgraded, 2 newly installed, 0 to remove and 4 not upgraded.
Need to get 673 kB of archives.
After this operation, 3.025 kB of additional disk space will be used.
Do you want to continue? [Y/n] y 
Get:1 http://archive.ubuntu.com/ubuntu xenial/universe amd64 konsole4-kpart amd64 4:4.14.3-0ubuntu3 [327 kB]
Get:2 http://archive.ubuntu.com/ubuntu xenial/universe amd64 yakuake amd64 2.9.9-3 [346 kB]
Fetched 673 kB in 1s (424 kB/s)  
Selecting previously unselected package konsole4-kpart.
(Reading database ... 379593 files and directories currently installed.)
Preparing to unpack .../konsole4-kpart_4%3a4.14.3-0ubuntu3_amd64.deb ...
Unpacking konsole4-kpart (4:4.14.3-0ubuntu3) ...
Selecting previously unselected package yakuake.
Preparing to unpack .../yakuake_2.9.9-3_amd64.deb ...
Unpacking yakuake (2.9.9-3) ...
Processing triggers for desktop-file-utils (0.22+linuxmint1) ...
Processing triggers for mime-support (3.59ubuntu1) ...
Processing triggers for hicolor-icon-theme (0.15-0ubuntu1) ...
Processing triggers for man-db (2.7.5-1) ...
Setting up konsole4-kpart (4:4.14.3-0ubuntu3) ...
Setting up yakuake (2.9.9-3) ...
```
Best way to copy an object in JavaScript?
Tags: javascript, code, discuss
Published: 2017-11-22 20:22:55

---
title: Best way to copy an object in JavaScript?
published: true
description: 
tags: javascript, code, discuss
---
![Object.assign()](https://thepracticaldev.s3.amazonaws.com/i/5fl5k3opqfek6qtq9wxm.jpg)

So I'm always looking for a way to use vanilla JS whenever possible these days, and I discovered that _deep_ copying an object in JavaScript is still weird. 

StackOverflow [reminded me](https://stackoverflow.com/a/39736431/130596) of the `JSON.parse( JSON.stringify( obj ) )` trick, and it looks like [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) still doesn't copy nested objects.

jQuery's `$.extend()` works. But that's not vanilla JS any more.

What hacks do you guys use for copying JS objects?
 
 `¯\_(ツ)_/¯`
Are you interested in personal development?
Tags: discuss, life, personaldevelopment
Published: 2017-11-22 19:58:28

---
title: Are you interested in personal development?
published: true
description: And how do you do it?
tags: discuss, life, personal development
---
I’d say I’m kind of an introverted person. And I think since we’re in a software development community here, many of you are, too (sorry for stereotyping).

Through the years in my career as a software developer, I have often stumbled over the subject of “personal development”. I tried different things and I figured, that going on stage at Gamescom, practicing social skills, working out, publishing my thoughts through writing, approaching girls (and finding my fiancée!) or in essence just pushing the boundaries of my comfort zone really did benefit my life.

I just love this topic and I always try to find any new piece of advice on how to improve my life and how to care for myself - not only career-wise.

Now I’m very curious, are you also interested in personal development? By now, being an introvert, for example, is more of a strength than a weakness for me because now I know how to use this trait to my advantage.

If you are interested in this topic, what do you do? Do you read certain books? Do you follow specific people on YouTube, Twitter, etc.? Do you have certain habits that will improve your life, such as a morning routine that you follow every day, even on weekends? Anything else?

I’d love to hear and read from you. Thank you very much.
"My Shell Workflow: Using bash history"
Tags: shell, bash, productivity
Published: 2017-11-22 16:39:24

---
title:  "My Shell Workflow: Using bash history"
description: Using bash history to quickly re-execute long tedious commands.
tags: shell, bash, productivity
published: true
---

### Working on the shell with your hands tied :|

While I try to use my vagrant box for work as much as possible, there are times when I have to connect to server machines over ssh and not have my favorite z-shell. It was getting irritatingly boring to repeat the same set of command every time. One option is to create my own aliases but I will have to do so everytime I login. Our sysadmin has (strangely) ensured that everyone sudo's to a common user to do any editing work. 

### Finding my way out :) 
So I use the following set of commands to ensure that I am not getting bogged down by the process. 

Suppose I want to search a command that I have previously used. I type  `history | grep <command-snippet>` which gives me a numbered list when I have used the command earlier. Then I use the number to run the same command - `!<number>` again. See below - 

```shell
> history | grep vim
2795  vim scratch-pad.txt
2820  vim .git/config
2822  vim .git/config
2845  sudo vim /etc/hosts
2847  sudo vim /etc/hosts

> !2820
> vim .git/config
```

This might still be tedius. So the other option is to search history without calling `history` command. 

### The Savior `Ctrl+R` :D

- On the bash terminal, press `Ctrl+R` to open reverse search dialog. 
- Type the snippet of the command you would have executed earlier. 
- Press `Ctrl+O` to execute the command. or Press `Ctrl+Space` to print the command for editing before executing. 

```shell
(reverse-i-search)`install': sudo apt-get install ant #After pressing Ctrl+O
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
.... 


(reverse-i-search)`zsh': sudo apt-get install zsh #After pressing Ctrl+Space
> sudo apt-get install zsh  
```

A nifty side-effect of using `Ctrl+R` on the bash prompt is that once the chosen command is completed, the next command from history is printed on the prompt for us to use if needed. Most of the time, I am restarting my server and tailing the logs. So using this option automatically returns the next command (`tail -f`) after I execute the restart command. 

I hope this helps you as well.
A keep it simple flex based css 
Tags: css, flex, grid
Published: 2017-11-22 16:31:17

---
title: A keep it simple flex based css 
published: true
description: 
tags: css, flex, grid
---
I have made a very beta minimal flex based css grid system, please check it out.

https://fricss.ramlev.com/

And the source is available https://git.ramlev.com/ramlev/fricss
How do you keep up with your programming goals?
Tags: discuss, goals
Published: 2017-11-22 13:20:57

---
title: How do you keep up with your programming goals?
published: true
description: I'm trying to learn  from fellow software developers on how they keep up with their goals to become even better software engineers.
tags: discuss, goals
---
I've been programming for a while now and I've always had this yearning to grow even more as a software developer. I always set goals but I don't seem to follow through. Maybe because I am a student studying something in school that isn't really close to Computer science or it's just me.

I would love to hear from seniors, experienced and even inexperienced comrades on how they keep up with their learning goals.

Thanks for your most anticipated response.
React-Native Modals Problems
Tags: react, native, modal, alert
Published: 2017-11-22 11:54:33

---
title: React-Native Modals Problems
published: true
description: In this article I will show some problems that react-native has with rendering successive modals.
tags: React, Native, Modal, Alert
---

Ok, the problem is the following one: I try to render a modal that has a loader (ActivityIndicator as the native-component) and it is preceded by an Alert. 

The modal is showed while the call to the API is on loading and the response hasn't arrived. When the response has come the Alert is rendered. For some reasons the ios closes the alert immediately and the modal with the loader remains on the screen forever. You have to close the app in order to get rid of it. 

After some documentation I found that the alert native component is deep inside a modal and I think that the iOS loses track of the modals he has to close. After some brainstorming with some better developers than me(almost everyone) we found a solution: SetTimeOut(), even with 0(practically instant) so the iOS has time to decide what modals to close. Happy Happy, Joy Joy for about 2 or 3 days when we tested the app on some devices. The devices can't close the modals as it should. So I decided to look better on the dearest friend of man, the internet. I tried looking if react-native offers an *onModalClose* method and I found out that there was such a method, but only on the rc. So the only chance is to wait for the next release. Come on REACT :D
Explain this Javascript expression just like I'm five
Tags: quiz, discuss, explainlikeimfive
Published: 2017-11-22 09:15:15

---
title: Explain this Javascript expression just like I'm five
published: true
description: Javascript Quiz, explained to a five-year-old
tags: #quiz #discuss #explainlikeimfive
---

Explain to me the result of this expression in Javascript:

```
["10", "10", "10", "10"].map(parseInt)
```