teleren/devto huggingface dataset:
Security Sprint: The new Internet
Tags: protocol, ipfs, security
Published: 2018-11-09 13:41:36

---
title: Security Sprint: The new Internet
published: true
description: Let's play with IPFS
tags: protocol, IPFS, security
---

Hello again! and welcome to the weekly **Security Sprint** :p

Today I'm going to introduce a very exciting thing. But before, let's go back in time for a moment. We are in the late 80's, internet is very exciting, everyone want to have a webpage... Communication has changed, and we are going into a new lifestyle, in which we can be anonymous, there are no walls between users and knowledge is open. But... uh-oh, some countries are not very happy with this statements... Internet begins to have such importance, **it shapes society**. If you where an ambitious company or country, wouldn't you think... Who has internet control has society influence, right?

Step by step, internet as we know it is currently being **limited, censored and monitored**. To prevent and fight against this, there are associations, activists and such... and one of the proposals is... IPFS protocol. 

IPFS is, as the official website describes "_peer-to-peer hypermedia protocol
to make the web faster, safer, and more open_". It wants to offer a distributed alternative protocol, making it more resilient which is handy in case of developing countries, for example. Here's an info-graphic from the official webpage:

![](https://thepracticaldev.s3.amazonaws.com/i/lqh1tsxch21kwlbjfz4r.png)


[Installation works in different OS](https://docs.ipfs.io/introduction/install/), but I'm focusing on Linux. The documentation is clear, and it has a script for installing it. After the installation, we should create a repository in which we are storing the data/settings. For this, we are going to use:

```
$ ipfs init
initializing ipfs node at /Users/jbenet/.go-ipfs
generating 2048-bit RSA keypair...done
...
```

Our node ID is the `peer identity` hash. If we've been successful, we should be able to start as told in the repo installation:

```
ipfs cat /ipfs/ourhash/readme
``` 
Remember to change `ourhash` with our `peer identity` hash. Once we did our basic setup as told in the readme, we are ready to go online...

```
$ ipfs daemon
Initializing daemon...
...
```

Yay! we are in the network... You can see the ipfs address or your peers using `ipfs swarm peers` command. There's also a web interface console, we can access in the link http://localhost:5001/ipfs/yourhash. 

![](https://thepracticaldev.s3.amazonaws.com/i/2wi2a4s14ak07lmqdzq4.png)

And we can add stuff in "Files".

![](https://thepracticaldev.s3.amazonaws.com/i/pfjnxe7pe0v8dn8c1djc.png)

The security in IPFS is still _weak_, as they are still claiming auditing. It's a nice opportunity to investigate about distributed technologies!

Hope you guys enjoyed this introduction to IPFS, I'd love to write soon about it again, deeper.
Daily Coding Puzzles - Nov 4th - Nov 9th
Tags: codingpuzzle, programming, challenge
Published: 2018-11-09 15:09:27

---
title: Daily Coding Puzzles - Nov 4th - Nov 9th
published: true
description: A discussion about this week's Coding Puzzles
tags: #CodingPuzzle, #programming, #challenge
cover_image: https://thepracticaldev.s3.amazonaws.com/i/64lxrl8wtr1kk1bxwgp0.jpg
---

Every day on [Twitter](https://twitter.com/aspittel), I post coding puzzles. These are quick coding challenges that increase in difficulty across the span of the week -- with Monday being the most beginner friendly and Friday being super tough. I love seeing other people's solutions as well, and so people post their solution to the problem in any programming language.

[Here's more about them.](https://dev.to/aspittel/daily-coding-puzzles-4ce9)

I wanted to try posting these here. I'm going to post each question from this week as a comment below, and then we will thread answers under those questions. Please feel free to post your solutions to the ones you are interested in below! Then, you can comment with insights into people's solutions below that! I will also add a meta thread if you have advice on how to format this in the future!

Excited to see your solutions!
I made a simple clone of the android game 'Freaking Math' in VueJS
Tags: vue, showdev
Published: 2018-11-09 14:21:13

---
title: I made a simple clone of the android game 'Freaking Math' in VueJS
published: true
description: 
tags: #vuejs, #vue, #showdev
---

{% github oaltena/vuemath %}

Feel free to contribute.
An ADHD Avenger's Weekly Wanderings
Tags: top7, discuss
Published: 2018-11-09 14:06:26

---
title: An ADHD Avenger's Weekly Wanderings
published: true
description: A recap of the things I learned and the rabbit holes I explored this week.
tags: icymi,discuss
---

*This article has been trimmed down from my blog, [Literary Phenomenot](https://wolfhoundjesse.wordpress.com)*

# This Week in Tech

I've been developing my own process for documenting legacy code while I refactor, drawing from the experiences of the general collective at [software engineering stack exchange](https://softwareengineering.stackexchange.com/). The sentiment for most is that inheriting old code is such a hassle. I, on the other hand, feel like an investigator of sorts, and I get satisfaction out of knowing that when the rest of the team arrives, they'll have a head start because of my efforts. What's your approach? 

Next, we've been interviewing candidates to fill our mid-level and junior developer positions. Interviews are not unlike auditions; you get chance to show off how you can play, and the rest is trying to figure out if we'd enjoy sitting next to each other for the coming years. Having just gone through the process myself, I'm fascinated by the number of variations out in the field when it comes to selecting candidates. Do we screen them with phone calls or a coding test? Should we have them submit a real code sample, or are we more interested in how they communicate concepts verbally? How about those coffee/happy hour interviews? It's almost as much of an art as it is a process.

Lastly, I've made some progress this week on submitting my first pull request for dev.to. Whether or not it is accepted, I'm really enjoying getting to know Ruby!

# Sights and Sounds

On the way to work this morning, Spotify let me know that Muse's new album, Simulation Theory, is available. The timing is perfect, because I've just discovered an old article on digital trends that lists the [10 best video game soundtracks on Spotify](https://www.digitaltrends.com/gaming/10-best-video-game-soundtracks-on-spotify/). All of it's fantastic for coding IMHO, and I especially love those moments when something familiar comes on, something that was in the background of your story for hours on end, and you're instantly transported to another world. Video game music is every bit as iconic as film scores, or at least that was the topic for a paper I wrote in my 21st Century Music class in 2008. Music is powerful stuff.

# That is All.
Git: How to keep your fork updated with remote repository
Tags: git, bash, productivity, tips
Published: 2018-11-09 12:52:41

---
title: Git: How to keep your fork updated with remote repository
published: true
description: How to keep your repo updated with changes from remote
tags: git,bash,productivity,tips
---

This is useful when you have forked a repository (repo), cloned it to your local machine and want to keep it in sync with the original repo.

#### Adding the remote repo

We can list the remote repositories for our repo with **`git remote -v`** and add the original repo as follows:
```bash
git remote add upstream LINK_TO_ORIGINAL_REPO
```
Note that it is merely a convention to call it **`upstream`**. You can give any name you want.

Check that the repo is added to your remote using **`git remote -v`**.

#### Sync with remote

- Check if there are any changes in remote not on your fork using **`git fetch upstream`**
- Checkout whichever branch you are interested ( **`git checkout $BRANCH`**)
- Merge with upstream using: **`git merge upstream/$BRANCH`**
- Push your changes to origin if needed: **`git push origin $BRANCH`**

#### Removing the remote repo

If you no longer want to get changes from the remote repo, it is easy to remove it using **`git remote remove upstream`**

#### References

Github's [help page](https://help.github.com/articles/syncing-a-fork/)
Speech Sentiment Analyser    
Tags: machinelearning, ai, aws, node
Published: 2018-11-09 11:56:46


---
title: Speech Sentiment Analyser    
published: true
description: Speech Sentiment Analyser is a ML & AI based tool to help analyse the user sentiment in an audio file
tags: ML,AI,AWS,NodeJS
---
![ML & AI](https://thepracticaldev.s3.amazonaws.com/i/anu85xjqw270m8kht9ma.jpg)

Hi all!

Speech Sentiment Analyzer (SSA) is ML & AI powered tool which will help to analyse the sentiment in the audio file using AWS Transcribe and Comprehend. It gives a detailed insight to what user describes. SSA will help you analysis audio speech and creates a transcripts from audio file which in-turn will be used to derive the sentiment of user.

The process has two main steps

1. Uploading an audio file , which will be automatically converted into transcripts.
2. Once step1 is completed , you can do sentiment analysis on a click of a button

Github Repository : [https://github.com/sudarsan15/speech-sentiment-analyser](https://github.com/sudarsan15/speech-sentiment-analyser).

Feel free to check out and let me know your feedback.

Looking forward to hear from you all.

Thanks
Simple Christmas Gift Ideas Using Your Skills
Tags: productivity, discuss
Published: 2018-11-09 10:53:57

Some of you might go and buy gift cards, some of you might go and buy shirts or some present that SO would love. Well what if you could use your skills and give them something digital? 

I started doing this years ago and seems to be working well for both the gift receiver and gift giver. 

Few years ago, one of my friends was always saying how he/she would love to have a website for pictures outside of facebook.

Xmas came around, and I did just that. Bought domain, build a site and provided account info and showed how to do stuff.. receiver was overwhelmed with joy and still is to date. 

Last year, one of my family members at some dinner talk was saying how it takes them literally hours of gathering some data from one excel sheet to another and then also pull some data from various sites. 

I put my python skills into work and just ask them to give me some sample data, it took me few hrs to build a simple app that literally took one simple command and took all the data needed and combined into one excel sheet. 
Xmas came around.. I showed them github repo, and ask them to README.md (That usually devs never do 😛). The gratitude and joy of saving family member hours of work got me some nice gifts in return.

Say you are photoshop/design expert, you could use your skill and restore or colorize some of the old ripped pictures your Grandpa/Grandma have from 1940s. 

Your Geekiness could be put to good use, build something with Raspberry PI a simple PLEX server or some home device.. whatever you can think of... 

Just throwing few ideas out there... 


Also, there are a lot of Charity and Contractor websites out there that want to have a simple feature added to their website but don't know how to add it or can't afford paying some Web Company $2000 that could take you literally less than an hr to build. 

The only downside of it is that you might get asked questions throughout the year, if you go for something like a website .. (I would stay away from such *gifts*)

Please share some ideas or something you've done as a gift for your family or close friend.. or even a contractor who provided you free lawn mowing the next year.
TypeScriptでRenderPropsをやった
Published: 2018-11-09 10:41:33

---
title: TypeScriptでRenderPropsをやった
published: true
description: 
tags: 
---

[React Render Props in TypeScript - James Ravenscroft - Medium](https://medium.com/@jrwebdev/react-render-props-in-typescript-b561b00bc67c)

[Render Props - React](https://reactjs.org/docs/render-props.html)

    
    import { storiesOf } from '@storybook/react';
    import * as React from 'react';
    
    interface NumberHolderInjectionProps {
      num?: number;
      onChange(num: number): void;
    }
    
    interface NumberHolderProps {
      children(injection: NumberHolderInjectionProps): JSX.Element;
    }
    
    interface NumberHolderState {
      num?: Number;
    }
    
    class NumberHolder extends React.Component<NumberHolderProps, NumberHolderState> {
      state = {
        num: undefined
      };
    
      onChange = (num: number) => {
        this.setState({
          num
        });
      }
    
      render(): JSX.Element {
        return this.props.children({
          num: this.state.num,
          onChange: this.onChange
        });
      }
    }
    
    interface NumberRendererProps extends NumberHolderInjectionProps {}
    
    let isFirst = true;
    
    const NumberRenderer: React.SFC<NumberRendererProps> = (props) => {
    	// コレがないと無限ループする
      if (isFirst) {
        props.onChange(777);
        isFirst = false;
      }
    
      return (
        <div>
          <p>{ (props.num || 10000) } </p>
        </div>
      );
    };
    
    const WrappedNumberRenderer: React.SFC<{}> = (_) => (
      <NumberHolder>
        {(injection: NumberHolderInjectionProps) => <NumberRenderer {...injection} />}
      </NumberHolder>
    );
    
    storiesOf('TypeScript＆RenderPropsの実験実装', module)
      .add('Simple実装', () => (
        <WrappedNumberRenderer />
      ));
django-react-templatetagsでdjangotemplateからreact コンポーネントを描画する
Published: 2018-11-09 10:39:52

---
title: django-react-templatetagsでdjangotemplateからreact コンポーネントを描画する
published: true
description: 
tags: 
---


##はじめに

この記事は django advent calendar 12日目の記事です。

今回は django-teact-templatetagsを紹介させていただきたいと思います。

https://github.com/Frojd/django-react-templatetags

## 特徴
- サーバーサイドから django template をレスポンスを行う
- pythonのモデルを componentsに渡す データに変換可能なMixin
- SSR をサポート（未検証）

機能としてはたったこれだけですが、SPAでないアプリケーションにreactを導入したい場合やSSRしたい場合には重宝すると思いました。

## 使い方

基本的にREADMEの通りにすればOK
https://github.com/Frojd/django-react-templatetags/blob/develop/README.md

- installed_app に追加

```py
INSTALLED_APPS = (
    # ...
    'django_react_templatetags',
)

```

- context_processor に追加

```py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            'templates...',
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'debug': True,
            'context_processors': [
                ...
                'django_react_templatetags.context_processors.react_context_processor',
            ],
        },
    },
]

```

- django templateに load react と ``` {% react_render component="Component" props=my_data %} ``` を追加


```
 {% load react %}

<body>
<p>...something</p>
{% react_render component="Component" props=my_data %}
{% react_print %}
</body>
```

- modelからreact-componentに変換

READMEを参考に RepresentationMixin を実装するだけです。
https://github.com/Frojd/django-react-templatetags#working-with-models


## 使ってみた困った所

フロントエンドを今どきの作りにした場合は webpackやgulp からコンパイルされ、minifyされてjavascriptを読み込むと思います。

その際にはjsのトップレベルがローカルクロージャとなる場合が多く サーバに描画されたhtmlからreact-componentがスコープの対象外になりました。

最終的には(極力避けたかったのですが)ビルドされるjavascript内でブラウザのwindow変数に トップレベルの ReactComponentを代入するようにしました。

```js
// こんなかんじのコードをrootに置く
const RootComponent = require("./Root")

window.RootComponent= RootComponent

```

##まとめ

ライブラリそのものは薄く設計を工夫すれば捨てるのが容易で pythonのモデルからjavascriptへのデータ受け渡しまでサポートしてもらえるので個人的には結構アリな選択肢かと思いました。

特に従来のWebAppに部分的にReactを導入したい場合などは適していると思います。

また、今回は試していませんがSSRしたい場合も選択肢に入って良いと思います。
i installed a 9 month old mini project again
Tags: discuss, npm, node, javascript
Published: 2018-11-09 09:08:29

---
title: i installed a 9 month old mini project again
published: true
description: is the struggle real?
tags: #discuss #npm #node #javascript
---

I installed a npm project again after 9 months...
The package.json contained less then 10 entries.

![wtf](https://i.imgur.com/u19Rf6L.png)


This feels insecure, somehow.... but iam not an expert ;-)
How to create Material animation for ListView in Android
Tags: kotlin, android
Published: 2018-11-09 07:54:33

---
title: How to create Material animation for ListView in Android
published: true
description: create material app with android
tags: #kotlin #android 
---

![Preview](https://thepracticaldev.s3.amazonaws.com/i/8h6ch4s9al8lh2vwjsji.gif)

This animation is Material Transitions.

https://material.io/design/navigation/navigation-transitions.html#hierarchical-transitions


Create this animation with Kotlin.


## Setting transition name


Create transition name to xml files.

```xml
<ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:id="@+id/profile_url"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintVertical_bias="0.32"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp"
            android:transitionName="profileUrl"
            app:layout_constraintStart_toStartOf="parent"
            android:scaleType="fitXY"
            android:layout_marginStart="8dp"/>
```

Set `android:transitionName="profileUrl"` to the part where make to animate the view.

And Make the same setting for the transition destination view.

```xml
<ImageView
            android:layout_width="383dp"
            android:layout_height="185dp"
            tools:srcCompat="@tools:sample/avatars"
            android:id="@+id/material_image"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:transitionName="profileUrl"
            android:scaleType="fitXY"
            />
```

##　Screen transitions implementation in Android applications with Kotlin

Before transition　screen code

```kotlin

Glide.with(context).load(userModel.profileUrl).into(profileUrl)
val intent = ListViewDetailActivity.createIntent(requireActivity(), userModel.profileUrl)
val viewPair = Pair(p0.profileUrl as View, ViewCompat.getTransitionName(p0.profileUrl))
val activityCompatOption = ActivityOptionsCompat.makeSceneTransitionAnimation(requireActivity(), viewPair)
ActivityCompat.startActivity(requireContext(), intent, activityCompatOption.toBundle())

```

After transition screen code


```kotlin
class ListViewDetailActivity : AppCompatActivity() {

    companion object {
        fun createIntent(activity: Activity, url: String) : Intent {
            val intent = Intent(activity, ListViewDetailActivity::class.java)
            intent.putExtra("url", url)
            return intent
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_list_view_detail)


        val intent = intent
        val url = intent.getStringExtra("url")
        Glide.with(this).load(url).into(material_image)
    }
}

```
A rapper that just makes painfully true songs about programming
Tags: showdev, programming, culture
Published: 2018-11-09 05:58:05

---
title: A rapper that just makes painfully true songs about programming
published: true
description: https://www.youtube.com/channel/UCoGRABtFGU7ng79NqF0KuIQ
tags: #showdev, #programming, #culture
---

I'm a full time programmer and I love making rap music. I see a lot of humor in our profession/industry, and thought it would be fun to combine the two.

Please check out my YouTube channel here: https://www.youtube.com/channel/UCoGRABtFGU7ng79NqF0KuIQ
Finally a mobile browser that addresses one of my main complaints...
Tags: browser, android
Published: 2018-11-09 05:57:53

---
title: Finally a mobile browser that addresses one of my main complaints...
published: true
description: 
tags: #browser #Android
---
<img width="100%" height="30%" src="https://thepracticaldev.s3.amazonaws.com/i/iyi71s17d6dogj7gyfj8.png"></img>

Browsing one of my favorites alternative sources for apps, I found a so interesting application: The One Handed Browser... which wants to solve the problem of using a not so small device without using another hand to it.

And, it solves the question so well!

The UI is so much simple, not demands so much time to learn how to use.

<img width="50%" height="30%"src="https://thepracticaldev.s3.amazonaws.com/i/gfictftu6g7aatdd4dev.jpg"></img>

With a click of a button (the "hand" one) your thumb reaches the top of the page (so useful for sites with topbars). The same occurs when you slide the page beyond the top limit.

<img width="50%" height="30%"  src="https://thepracticaldev.s3.amazonaws.com/i/4re5dhugjnttdkwo0wne.jpg"></img>

It haves a night mode, too (my eyes thanks so much!).

<figure>
<img width="50%" height="30%"  src="https://thepracticaldev.s3.amazonaws.com/i/0yjv8ndvifkhkwx2m1hq.jpg"></img>
<figcaption>These guys are amazing! Thanks to them, I'm writing this post on Mojave using a not natively supported 2011 MacBook Pro!</figcaption>
<figure>


The address bar is on bottom, and it's revealed by pressing the "search" button

<figure>
<img width="50%" height="30%"  src="https://thepracticaldev.s3.amazonaws.com/i/qp41zx661zltk1ufrdlx.jpg"></img>
<figcaption>My favorite Brazil's Android related site</figcaption>
</figure>


...and the options bar is adapted for one handed usage, as well.

<figure>
<img width="50%" height="30%" src="https://thepracticaldev.s3.amazonaws.com/i/eqzrafpjmk7b0334gbcc.jpg"></img>
<figcaption>Sliding up in option's bar (there will be the bookmarks, history and etc.), there are some extra features</figcaption>
<figure>


Another thing I found so useful is, when you long press the "search" icon (which actually is the url bar activator, too), you have the options to copy and paste urls. In Chrome, for selecting a url, I always had to put the cursor, long press, and press the "select all" option because Android selection tool puts the selection before the end of url.

<figure>
<img width="50%" height="30%"  src="https://thepracticaldev.s3.amazonaws.com/i/h7u7d8ej7fatqzanc91z.jpg"></img>
<figcaption>Smartisan's HandShaker >>> Google's Android File Transfer</figcaption>
</figure>

You switch tabs pressing the "number/number" tab counter on bottom bar
<figure>
<img width="50%" height="30%"  src="https://thepracticaldev.s3.amazonaws.com/i/y10l8lhgsoijhhxmxz10.jpg"></img>
<figcaption>By default, tabs have a 3D presentation. But I prefer the classic tab style instead.</figcaption>
</figure>

Despite I have found it on XDA Labs, it is available on Google Play Store, too:
https://play.google.com/store/apps/details?id=com.oh.bro
日本人じゃーい
Published: 2018-11-09 05:44:48

---
title: 日本人じゃーい
published: true
description: 
tags: ポエム
---

# 日本語がいける！わお！

　文系な人間をどうやって開発界隈に引き込むかとかを考えたりします。例えばプログラミングにおける抽象化って、考えなくていいことを考えないっていう発想ですよね。

　これは科学で言う「古典」を指すわけです。

　例えばニュートン力学は相対性理論における物体の動きが光速に比べて十分に遅いときになりたつ近似です。そして物が光速よく十分遅いと考えられれば、ニュートン力学に抽象化することができます。また、ポインタをつかうデータ構造を使わない。もしくはプログラミング言語が用意しているもので十分であれば、C言語じゃなくてJavaとかで良いわけです。

　そして現在では間違いとされている天動説も、惑星以外の星に関しては十分成り立つわけです。

そういった考え方の枠組みをまとめていく作業は文系のほうが得意だろうなぁという印象です。研究の手法であったり、いろいろと文理融合できる部分とかありそうだなーとか思ったりしてます。
Object detection Part 3 - Local training [Tensorflow]
Tags: objectdetection, python, training, tensorflow
Published: 2018-11-09 04:49:16

---
title: Object detection Part 3 - Local training [Tensorflow]
published: true
description: We look into training your model locally on windows and other platforms.
tags: object detection, python, training, tensorflow 
---

{% youtube 5QLR26XHIu0 %}