teleren/devto huggingface dataset:
Email development with React and Webpack
Tags: react, webdev, email, showdev
Published: 2018-07-29 19:02:24

---
title: Email development with React and Webpack
cover_image: https://i2.wp.com/alediaferia.com/wp-content/uploads/2018/07/adult-business-businessman-1061588.jpg?w=3000&ssl=1
published: true
canonical_url: https://alediaferia.com/2018/07/29/email-development-rendering-webpack/
description: "My experience developing emails using webpack and react"
tags: react,webdev,email,showdev
---

I blogged about my experience developing email templates using React and Webpack and thought it'd be interesting for others to see how I've achieved HTML rendering in this project.
Hope you guys enjoy it.

Read more about it [here](https://alediaferia.com/2018/07/29/email-development-rendering-webpack/).
Electron Tray application: How to reference target balloon in event handler of balloon-clicked event?
Tags: help, electron, javascript, balloon
Published: 2018-07-29 17:49:48

---
title: Electron Tray application: How to reference target balloon in event handler of balloon-clicked event?
published: true
description: How to reference which balloon is clicked in the handler of balloon-clicked event?
tags: help, electron, javascript, balloon
---

Electron *Tray* applications can show balloons using the *Tray.displayBalloon* method that takes an object with *title*, *content* and optional *icon* property.

To my knowledge, the balloon interface does not include a click or onClick property. The *Tray* class does have a *balloon-click* event that fires when a balloon is clicked as well as a *balloon-closed* and *balloon-show* event. However the *event* object passed to the callback function does not seem to include a reference to the balloon that dispatched the event. (the balloon that was displayed, clicked or closed)

```js
tray.on('balloon-click', console.log)
tray.on('balloon-show', console.log)
tray.on('balloon-closed', console.log)
```

Log:

```
    { preventDefault: [Function: preventDefault],
      sender:
       Tray {
         _events:
          { 'balloon-click': [Function],
            'balloon-show': [Function: consoleLog] },
         _eventsCount: 2 } }
```

My Tray application sends balloon notifications from different sources. What happens when you click the balloon (where to navigate to or what window to open) kinda depends on what the balloon is saying. 

I need a reference to the balloon that was clicked, not just that there was a balloon click somewhere at some point. It strongly expected this to be there.

I can think of many ways to implement a solution ranging from a simple wrapper function and an *activeBalloon* variable to an entire BalloonManager class but I don't feel like wasting my time if I just overlooked this in the [Electron Tray API documentation](https://electronjs.org/docs/api/tray).

> This question was also asked on discuss.atom.io in August 2017

Source: [https://discuss.atom.io/t/tray-balloon-click-how-to-know-which-balloon-is-clicked/46744][2]
Write Software that Evolves
Tags: softwareengineering, projectplanning, requirements
Published: 2018-07-29 17:44:12

---
title: "Write Software that Evolves"
published: true
description: "Write software that allows for change"
tags: ["Software Engineering", "Project Planning", "Requirements"]
canonical_url: "https://www.dylanpaulus.com/software%20engineering/2018/07/29/write-software-that-evolves/"
cover_image: https://thepracticaldev.s3.amazonaws.com/i/x6ysspcflzk6v0gyydba.jpg
---

[Original Post](https://www.dylanpaulus.com/software%20engineering/2018/07/29/write-software-that-evolves/)

# Write Software that Evolves

In software development we can easily get trapped in [analysis paralysis](https://en.wikipedia.org/wiki/Analysis_paralysis). Having the foresight to make all the correct decisions is hard. We make hundreds, if not thousands of decisions during the lifetime of our software. You’ll likely get something wrong. Instead of trying to get every minutia correct before starting a project, we should aim to write software that can evolve.

### Continuous Minimum Viable Product Development

One approach in combatting the constant changing of requirements is to strive for a continual minimum viable product (MVP). An MVP is the most basic version of a feature or application that satisfies a need. For example, let’s say our client wants the ability to view some information. We may only design a page with a table that holds the data (We _wouldn’t_ add additional features like filtering or graphs). Notice how I said _continuous_. This process shouldn’t end after the application/feature is released. Keeping improvements incremental and small allows us to be flexible in our requirements. Do no more or less than what’s being asked.

### Lazy Evaluation

> “I’m sure the user would need this feature. It’s easy, I’ll just add it”

This kind of thinking is killer to flexible software. First, every line of code has a cost. Not only are there time, money, and energy in initially writing the code, but also the maintenance and surface area for bugs creates its own cost. Second, the feature added could never be used by the user or just wrong! Best scenario this doubles the amount of work adding the feature.

Instead of eagerly evaluating requirements, flexible software works best through lazy evaluation. Wait for the client/stake-holder/user to ask for a feature before implementing it (even on improvements you know they’ll ask for). Lazy evaluation has a few benefits. It reduces adding features the user won’t use–they asked for it. It also allows us to understand what the user is really asking for. Instead of creating something then asking, “is this what you want?” we’re able to get up-front the ideal process.

### Summary

Instead of picking a target a firing–hoping we hit something. Combining continuous MVP and lazy evaluation keeps us agile. It allows firing in a direction and incrementally changing course as the target moves. Of course, do your homework and gather requirements beforehand, but aim for software that can evolve over time instead of trying to get it right from the start.


_Photo by Jamie Street on Unsplash_
Need help with CI/CD and other DevOps stuff
Tags: docker, ci, devops, help
Published: 2018-07-29 17:01:57

---
title: Need help with CI/CD and other DevOps stuff
published: true
description: 
tags: docker, continuous-integration, devops, help
---

For a while, I've used digital ocean as my hosting platform of choice. For $10 a month, I get to put unlimited databases and node js apps with high performance and a fast connection. This works great for me, someone who has very little userbase for any of my apps and I just want to host them to show to people and get feedback. I want to try to configure my environment to make it easy for me to manage all my apps, proxies and https certificates.

My typical flow for deploying an app goes like this:

- Git clone the app into my main directory (~/apps). For example, my-example-app.
- Configure the environment specific variables in .env files.
- Run `./p.sh` to run the production environment, which launches a docker database along with my app after doing other things, like building my client.
- Once I verify my app works, I have to create an nginx file. I make one in my sites-available and replace all the boilerplate instances of domains with the new domain I want to use, and symbolic link it in sites-enabled. I then restart nginx and verify that works.
- Now I create a new letsencrypt certificate, pointing at the domain, and take a few minutes going through that.

Overall, adding and managing new apps is a pain, and I don't have any kind of CI or CD going on yet. Recently, I used the Netlify static site hosting to see how that was, and I was blown away with how easy managing it was. I linked my git repo with Netlify, set custom build commands for the frontend, and I was provided a temporary subdomain like 12930js09d1290f.netlify.com . I aliased one of my domains to that, which allowed me to one-click https for my new sites. Within minutes, the site was up with https and my custom domain, all being rebuilt automatically whenever I pushed to a specified branch on github!

I want to try to replicate as much of this as possible, self-hosted. I'm wondering what kind of options there are for management of this kind of thing through a web panel. Am I looking for "continuous integration" software or something else?
How do developers find permanent jobs?
Tags: jobs, roles, developerroles
Published: 2018-07-29 14:06:03

---
title: How do developers find permanent jobs?
published: true
description: Finding a role as a developer. Where to look and what are the pain points? 
tags: Jobs, roles, developer roles
---

Where do developers find roles? Are the new platforms any good? What should you look out for during the process? From my experience, surely this system could be improved?
Unite Server-Side rendering and Single-Page applications
Tags: webdev, javascript, ssr, spa
Published: 2018-07-29 13:22:56

---
title: Unite Server-Side rendering and Single-Page applications
published: true
description: agnostic web page building
tags: webdev, javascript, SSR, SPA
---

This sums up my findings when writing https://github.com/kapouer/window-page.

A web page is defined by its url `pathname` and `query`.

# phases

## · route

Bootstrap initial document that loads scripts and stylesheets.


## · build

Scripts and stylesheets loaded during route are available.

Build document depending on `pathname`.


## · patch

Document has been built.

Modify document depending on `query`.


## · setup

Initialize User Interface (animations and stuff).

Register event listeners on document's body.


## · close

Cleanup User Interface.

Unregister event listeners on document's body.


# prerendering

`document.visibilityState == "prerendering"`


Two equivalent scenarios:
- server-side prerendering (jsdom...)
- browser prerendering (safari...)

The functions bound to these phases must be run:
- route
- build
- patch

and document is serialized as HTML.


# rendering

All other cases.

Prerendered HTML is loaded along with scripts and styles, then the functions bound to these phases must be run:
- setup


# navigation

Can happen through History API, or by following links, submitting forms, etc...
All of which must be properly intercepted.

If only current `query` changes, only the functions bound to this phase must be run:
- patch

Otherwise it is:
- close
- route
- build
- patch
- setup

Or, if `route` replaces current document by fetching a prerendered document:
- close
- route
- setup


# credentials

route, build, patch phases will typically fetch data through HTTP: credentials can be passed along to these requests if needed.


# custom elements reacting to patch phase (query changes)

In this framework it must be done manually, either by calling directly an element's update method, or firing an event on current document, or delegating to a singleton manager.


# additional comments

- at the time of writing the module, asynchronous events were not a thing yet, so i had to implement my own promise chains and double them with synchronous events to be able to listen for changes even before the router library was not yet loaded (which can be needed when doing complicated stuff with iframes).
An engineering perspective on Tech debt
Tags: techdebt, architecture
Published: 2018-07-29 13:07:48

---
title: An engineering perspective on Tech debt
published: true
description: What is "tech debt"?
tags: techdebt, architecture
---

One of the inescapable realities of enterprise software is the necessity of facing down "tech debt". But what exactly is it? Is it always something to avoid? The central issue here, of course, it how you define this term.

<img src="http://aisaac.io/content/images/2015/10/man-pushing-rock-up-hill-ok-to-use.jpg" style="height:120px; float:right; padding:15px">

   My definition of tech debt is this: it's the **ongoing technical impact of business decisions made in order to secure a market advantage**. Tech debt functions just like the availability of credit to a growing business, providing it with a much-needed boost during it's rapid-growth stage. Sometimes you've got to take on a calculated "shortcut" to reduce time-to-market and gain a strong market share. It's a business decision, a calculated gamble, so to speak.
   
   So true tech debt, the "good" kind, is **a compromise knowingly made on the engineering side of product-building in order to gain business advantage**.  

What you'll find is that the term "tech debt" is also used when addressing **long-standing issues arising from bad programming practices or brittle & shallow design**. But those are just a fallout of poor hiring practices, inexperience and/or unprofessional engineering leadership. I believe this to be an incorrect usage of the term that just muddies the waters.

Here's the kicker: **Can the engineering burden you are facing down be explicitly tied to decisions made in order to gain a business advantage?** If so, then you are now "paying back" tech debt by setting things right. If not, it's not tech debt at all -- it's just cleaning up a mess you (or someone else) made.

And here's the final word from [Ward Cunningham's explanation](http://c2.com/cgi/wiki?WardExplainsDebtMetaphor): 

>"... the ability to pay back debt, and make the debt metaphor work for your advantage depends upon your writing code that is clean enough to be able to refactor as you come to understand your problem."

So, the next time you use the term "tech debt", think it through: Is this the "good" kind of debt? Or is it something else entirely?
Build Electron application for MacOS (without MacOS?)
Tags: help, discuss, electron, macos
Published: 2018-07-29 12:49:28

---
title: Build Electron application for MacOS (without MacOS?)
published: true
description: How do I go about building and testing my Electron application for MacOS?
tags: help, discuss, electron, macos
---

This seems like a good question to ask you guys here on dev.to

I advertise to my clients and pretty much anyone who will listen that with the right configuration(s) Node/Electron applications can easily be built for Windows, Linux and MacOS with zero changes in the actual code. (provided that the application has no operating system specific dependencies and other duh objections) 

Building a Node application for all three platforms is pretty easy and I have done that a million times. Building my Electron app for Windows and Linux using the _electron-builder_ is no rocket science either. In theory they should also run on MacOS. However I have never actually built an Electron app for MacOS. Mostly this is because I do not own an Apple computer (think I have never physically touched one), it doesn't seem to be possible on Windows and there is no way in hell my laptop will run it virtually. 

The Black Eyed Peas asked if I can _practice what I'm preachin'_ so I had a look online if I can maybe rent a VPS somewhere that runs MacOS, then figure out the rest using a form of remote desktop protocol. I did find some cloud solutions that offer MacOS VPS services but most of them are pricey and not worth the investment at this point. I just need a simple build server for compatibility testing and learning purposes, not because I need currently need it in the real world.

So. Dear Apple developers, how would I go about doing that? Preferably without spending $49/month on a VPS that is idle 99.99% of the time.
How to set up SSH access with RSA private key on Windows - GitBash
Tags: ssh, windows, gitbash, cmdprompt
Published: 2018-07-29 12:38:34

---
title: How to set up SSH access with RSA private key on Windows - GitBash
published: true
description: This guide will help you set up named ssh servers that you can connect to with your favourite command line tool.
tags: ssh, windows, GitBash, cmdprompt
---
SSH access from windows does not require any extra software to be installed on your computer. It can be accessed right from your favourite command line tool. Today I'll show you how to easily access your cloud servers via SSH by using your favourite command line tool and save it for you to access it later on as well.

Install GitBash in your computer and then run the following command.
<pre>
$ cd ~/.ssh
// If the above commands returns: 
bash: cd: /c/Users/junaid/.ssh: No such file or directory 
// Then run the following commands instead

$ mkdir ~/.ssh
$ cd ~/.ssh
$ explorer .
</pre>

<blockquote>
I am using GitBash because I love it. You can also use the windows command line tool if you prefer (there is a slight difference)
</blockquote>
On windows command prompt you can just open windows command prompt from the start menu and run the following commands:
<pre>cd .ssh
// If the above command returns: 
The system cannot find the path specified.
// Then run the following commands instead

mkdir .ssh
explorer .
</pre>

It will open the folder for you. Paste your "Private RSA Key" file in this folder and create a config file("config" no file type extension needed ). If you already have a config file then edit it and copy the following code into it.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tdor3wos10vs2jjmjyn2.png)

<pre>Host X
    HostName xxx.xxx.xxx.xxx
    User root
    IdentityFile ~/.ssh/fileNameWhereRSAKeyIsStored
    IdentitiesOnly yes
    Port ****
    ServerAliveInterval 60</pre>


Edit the details in the config file and put the HostName, user and port number that you got from the SSH service provider.

### Naming your RSA files
For your RSA file you can name it whatever you like (no file name extension needed). The file will be referenced in your config file as <code>IdentityFile</code>


Now, whenever you need to connect to the SSH just run the following command.

<pre>$ ssh X</pre>


You can also configure more than on SSH hosts if you like. All you have to do is paste your RSA key file and edit the config file. For example, If I have to configure two SSH hosts then my config file would look like this:
<pre>Host X
    HostName xxx.xxx.xxx.xxx
    User root
    IdentityFile ~/.ssh/fileNameWhereRSAKeyIsStored
    IdentitiesOnly yes
    Port portNumberOfSSH
    ServerAliveInterval 60

Host Y
    HostName yyy.yyy.yyy.yyy
    User root
    IdentityFile ~/.ssh/fileNameWhereRSAKeyIsStored
    IdentitiesOnly yes
    Port portNumberOfSSH
    ServerAliveInterval 60</pre>

Easy no?
Good news for Net Ninja followers
Tags: javascript, react, redux, discuss
Published: 2018-07-29 10:40:23

---
title: Good news for Net Ninja followers
published: true
description: just a shout out to video tutorial learners
tags: javascript, react, redux, discuss
---

I know this might sound stupid but I'm just excited and want to shout out to all those who are learning mostly from YouTube and Udemy video tutorials. 

The Net Ninja has started an amazing [React Redux course](https://youtu.be/OxIDLw0M-m0) now, I love his content and his teaching style is awesome, another YouTube channel Academin ( Maximilian Schwarzmuller ) also provides in depth understanding of topics.

PS I'm not *paid to promote* their content but their tutorials help me land at my jobs and projects so I just want other learners to get benefits if they haven't yet found these. 

Please share all other ***YouTube/Udemy/Udacity*** channels and content creators that you guys follow, and also please share the bunch of people that you guys follow on Twitter, Twitter is so much helpful in this regard.
A3RTとユーザーローカルの文章の自動要約を試してみた
Tags: ai
Published: 2018-07-28 15:04:51

---
title: A3RTとユーザーローカルの文章の自動要約を試してみた
published: true
description: 
tags: ai
canonical_url: https://crieit.net/posts/A3RT
---

先日ユーザーローカルが文章の自動要約ツールを公開しました。また、リクルートテクノロジーズが公開しているAI群であるA3RTにText Summarization APIという文章の自動要約APIがあります。それらを実際に使って文章の要約を試してみました。

[自動要約 無料ツール by ユーザーローカル](https://text-summary.userlocal.jp/)

[Text Summarization API｜PRODUCT｜A3RT](https://a3rt.recruit-tech.co.jp/product/TextSummarizationAPI/)

## ユーザーローカルの自動要約

こちらはAPIではなく、ブラウザ上で使う自動要約ツールとなっています。実際に下記の文章多めの記事で試してみました。コードは削除して試しています。

[bosyuの募集一覧を勝手に作ってみた（機械学習解説付き） - Crieit](https://crieit.net/posts/bosyu)

結果は下記のようになりました。

### 3行ダイジェスト

```
この機能はそのままクラス分類( Classification )というらしいです。 
ひとつのカテゴリにいくつでもキーワードを設定できるようにしました。 
分類されないものは全部「その他」カテゴリに入れています。
```

### 10行ダイジェスト

```
bo sy u. me の一覧ページを作成してみました。 
応募が来るとサービス上で簡単一覧できる便利なサービスです。 
（カテゴリの自動分類方法詳細は後述）、環境 
機械学習によるカテゴリの自動分類、サービスの肝です。 
この機能はそのままクラス分類( Classification )というらしいです。 
Watson Natural Language Classifier (自然言語分類) 
facebookresearch / fastText : Library for fast text representation and classification 
ひとつのカテゴリにいくつでもキーワードを設定できるようにしました。 
非常に的確にカテゴリ分類ができるようになりました。 
分類されないものは全部「その他」カテゴリに入れています。
```

どちらもいまいちではありますが、10行の方は多少それっぽくは見えます。

ユーザーローカルの自動要約は3行、5行、10行から選べるため一番それっぽいものを選ぶことができます。また、文章のどのあたりが重要な部分か、というのをマーカーやヒートマップで確認する機能もあるので、参考になります。

ただ、重要な部分を使って自動要約を行っているので、人間が作る要約とは違い文章の開始と終了が不自然だったりします。今回の3行の方等もそんな感じですね。

また、こちらは結果表示画面に精度向上のためのアンケートがあるので、無料で公開するかわりにみんなで協力してデータを集めて精度を高める実験中、という感じがします。

## A3RTの自動要約

A3RTの方はText Summarization APIといって、プログラムから実行できるようなAPIとなっています。こちらは下記のような制限があります。

> 要約できる1文の最大文字数は200文字、且つ最大文章数は10です。

ということで、そのままでは長文には使えないので、記事の本文を上記に合うように区切って、それぞれを自動要約してくっつけることで試してみました。

```
bosyu.meの募集一覧ただ、ただほんとに一覧するだけだとTwitter上で#bosyuというハッシュタグを使って見ればいいだけなので、独自の機能としてカテゴリ分類機能を追加し、カテゴリ毎の募集を見られるようにしてみました。
8ce5b9af-16f5-d75a-536d-b62a6e57971e.pngカテゴリは選択たらすぐに画面が切り替わるのですが、Date Pickerはどうも選択時のcallbackが無いようだったので、仕方なく検索ボタンを押してもらう形にしました。
Google Cloud Natural Language APIGoogle Cloud Natural LanguageとりあえずGoogleなら何かあるだろ、と思って調べたら全くそのままのものがありました。
機能的にはこれで問題なかったのですが、とりあえず最初にGoogleのAPIを知ってしまったので学習が要らないAPIを引き続き探しました。
色々探しましたがGoogleのもののように良い感じに最初からカテゴリ分けされてるっぽいものはなさそうですし、ツイートであれば学習データを集めるのは特に難しいことではないし、学習させるというのも大事なことだと思ったためです。
ツイートなので文章が全体的に短すぎるのか、何時間かしかかけずに集めたデータが少なすぎたのか、おかしなカテゴリに入ってしまうものが多発しました。こういう場合にはわざわざ機械学習を導入せず、シンプルな方法を選択することも必要な場面はあると思います。
```

変な感じにはなっていますが、これは前述の通り適当な仕様で自動要約しているので、多分その作り方に問題がありそうです。長文の場合はもうちょっと考えて実装しないといけなそうですね。もしくはA3RT自体が対応してくれないと厳しいかもしれません。

こちらも要約後の文章数は指定できるので、いくつか出力して一番良いものを選ぶことはできそうです。

今回試しに作ったプログラムは下記で操作できるものを公開しています。

[A3RT Text Summarization API Sample](http://alphabrend.sakura.ne.jp/a3rt-text-summarization/)

プログラムはGitHubに公開しています。（最短で動作するように作ったので適当です）

[dala00/a3rt-text-summarization-sample](https://github.com/dala00/a3rt-text-summarization-sample)

## まとめ

どちらの自動要約も十分なものか、と言われると微妙ですが、とりあえず大量に要約文を作りたい、という場合には良さそうです。ユーザーローカルは多分そのうち有料でもっと精度の高いAPIが実装されるのではないかと思いますが、A3RTであればなぜかはわかりませんが無料ですので、必要に応じて使っていくことは可能です。

今のところどちらも機能的に制約がありますが、機会があればぜひ試してみてください。
BxJS Weekly Episode 21 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-07-29 09:19:27

---
title: BxJS Weekly Episode 21 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---


Hey dev.to community!

BxJS Weekly Episode 21 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/episodes/Episode-21-2018-07-28.md).

You can also watch or listen to this episode on:
- [YouTube](https://www.youtube.com/watch?v=Dk8zNOROJ6I)
- [Soundcloud](https://soundcloud.com/bxjsweekly/episode-21-july-28-2018-javascript-news-podcast)
- [Castbox](https://castbox.fm/episode/BxJS-Weekly-Ep.-21-July-28%2C-2018-(javascript-news-podcast)-id1378315-id86532748)

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)

Social media links:
- [Twitter](http://twitter.com/yamalight)
- [Medium](https://medium.com/@yamalight)
- [Github](http://github.com/yamalight)

If you enjoy my content, please consider [supporting me](https://codezen.net/support.html) 😉