teleren/devto huggingface dataset:
Refetching in React Native with 1 line of code
Tags: reactnative, mobile, react, javascript
Published: 2018-10-09 14:15:03

---
title: Refetching in React Native with 1 line of code
published: true
description: Solve refetching plain and simple with React Navigation
cover_image: https://thepracticaldev.s3.amazonaws.com/i/40s213lpij4rtlsqmpn2.jpg
tags: reactnative, mobile, react, javascript 
canonical_url: https://medium.com/@bidah/refetching-in-react-native-with-1-line-of-code-1064c9c0ca66
---

Coming from a Vue.js background I have experienced components that unmont every time you navigate to another route/component. So as you can see using lifecycle methods like `mounted` or `created` was a common pattern to rerun logic if needed. You may need this e.g. in a news feed if you get back to the feed from a feed item screen and you need to show the newest feed from your API.

So back to React Native I found myself in this new scenario where components do not mount/unmount from screen to screen. So what to do? Turns out that the solution was in the navigation.

I am using [React Navigation](https://reactnavigation.org/) which [enables you to emits events](https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle) to screen components that subscribe to them. With that functionality you can use the event that best suit you. You get `willFocus`, `didFocus`, `willBlur`, and `didBlur`.

In my particular use case I needed to refetch when coming back from the previous screen. When the user pressed that back button I needed to reflect the changes so I used `willFocus` to fetch right away, before the render started.

I thought of using `willBlur` on the feed item screen before returning to the main feed saving the fetch response on store but `willFocus` worked just fine.

Going to the point, to solve refetch that one liner you need is:

```javascript
this.props.navigation.addListener( "willFocus", e => this.fetch())
```

You can call this listener on a new property of your class or in a lifecycle method.


How you fetch as always is up to you but with React Navigation and listeners your refetching is plain and simple.

There are other use cases where solutions like Relay’s `QueryRenderer` will be what you need. This could involve more complex scenarios such as needing foreground/background fetching, but for now and for me this was all I needed. Hope it helps you too. Happy refetching.
The Three Virtues of a GREAT Programmer
Tags: programming, ipsedixit
Published: 2018-10-09 14:02:23

---
title: The Three Virtues of a GREAT Programmer
published: true
description: 
tags: programming, ipse dixit
---
I'm for sure not a great programmer, but I find myself 100% convinced that the three virtues of great programmer from Larry Wall are the best explanation of what a great programmer is.

The Three Virtues of a GREAT Programmer, according to [Larry Wall](https://en.wikipedia.org/wiki/Larry_Wall) (the creator of PERL): 

* Laziness: The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don't have to answer so many questions about it.
* Impatience: The anger you feel when the computer is being lazy. This makes you write programs that don't just react to your needs, but actually anticipate them. Or at least pretend to.
* Hubris: The quality that makes you write (and maintain) programs that other people won't want to say bad things about.

Source: [http://threevirtues.com/](http://threevirtues.com/)

Originally published @ [https://coding.napolux.com](https://coding.napolux.com)
🎧 Fantastic bugs and how to squash them
Tags: javascript, podcast, productivity, beginners
Published: 2018-10-09 13:24:40

---
title: 🎧 Fantastic bugs and how to squash them
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nz1mdk018sbistqpclqy.jpg
canonical_url: https://changelog.com/jsparty/46
description: Not those pesky things you're scared to squash because they might suddenly jump on you — this is all about JavaScript bugs
tags: javascript, podcast, productivity, beginners
---

In this episode, [Safia Abdalla](https://twitter.com/captainsafia), [Suz Hinton](https://twitter.com/noopkat), [Kevin Ball](https://twitter.com/kbal11), and [Nick Nisi](https://twitter.com/nicknisi) get together to talk about bugs! 🐛🐜🐞

Not those pesky things you're scared to squash because they might suddenly jump on you — this is all about JavaScript bugs; how you prevent some of the common ones, what tools you can use to reduce bugs in your code, and a panel group therapy session where they discuss the most difficult bug they've had to fix.

Take a listen! 💚💚💚

{% podcast https://dev.to/jsparty/46-fantastic-bugs-and-how-to-squash-them %}

Find the full show notes and transcript on [changelog.com](https://changelog.com/jsparty/46).
Is it just us that is affected by safari 12 ITP
Tags: safari, itp, discuss, webdev
Published: 2018-10-09 13:02:27

---
title: Is it just us that is affected by safari 12 ITP
published: true
description: Safari enabled ITP as a part of their recent release, wondering why there is not much nise about this.
tags: safari, ITP, discuss, webdev
---

With the recent safari 12 release, apple has enabled ITP, which essentially is a machine learning system designed to block all tracking cookies. We use a third party Indentity provider to handle our registrations and authentication. This provider uses openid connect, which essentially relies on third party cookies for managing SSO between multiple domains. If in case the authication domain is black listed by ITP, it breaks the entire SSO flow. 

Was wondering if any of the dev s here are affected, and if yes what workarounds were used to mitigate the problem.
VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる
Tags: nuxt, flux, vue, vuex
Published: 2018-10-09 12:58:57

---
title: VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる
published: true
description: 
tags: nuxt,flux,vue,vuex
canonical_url: https://crieit.net/posts/Vuex-Store-Nuxt
---

最近のJavaScriptのフレームワークを勉強したての人の場合、Vue.jsなどはすぐ理解できても、Fluxの概念やVuexのStore等でわからなくなってしまうことはありませんか？ そういう場合、Nuxt.jsを触りつつNuxt.jsのマニュアルを見ると非常に簡潔で理解しやすいです。

具体的には下記のページです。ここを参考にしながら説明していきます。先にリンクの説明を見たい場合は「モジュールモード」の方を見るとより分かりやすいと思います。当記事の内容もそちらをベースに進めていきます。

[Vuex ストア - Nuxt.js](https://ja.nuxtjs.org/guide/vuex-store/)

## そもそも何に使うものなのか？

Storeはアプリケーション全体の状態を管理してくれるものです。具体的にはログインしているユーザーの情報などが一番わかり易いと思います。

## 具体的にどうやって使うのか

Nuxt.jsの場合、まず `store/index.js` に状態の定義を行います。

```javascript
export const state = () => ({
  user: null
})
```

また、その下に上記の状態を更新するための mutation という処理を書きます。

```javascript
export const mutations = {
  login(state, user) {
    state.user = user
  },
  logout(state) {
    state.user = null
  }
}
```

上記のようなファイルを作っておけばNuxt.jsでは勝手に読み込まれます。

あとは適当などこかのコンポーネント内で上記のmutationを呼び出せば状態を更新できます。

```javascript
this.$store.commit('login', user)
```

コンポーネント内で参照したい時は下記のようになります。

```javascript
<span>{{ $store.state.user.name }}</span>
```

非常に簡単ですね。

## 何のメリットがあるか？

アプリケーション上のどこからでもアクセスできるというのが一番のメリットとしてあげられるのではないかと思います。今回の例ではいちいち下層のコンポーネントにユーザー情報をプロパティ経由で渡さなくても、ユーザー情報にアクセスできます。

例えばStoreを使っていない場合、全体の `layout.vue` がありそこにユーザー情報を持たせるとすると、そこから `TheHeaderNavi` にユーザー情報をプロパティで渡し、更にその中の `TheLoginButton` 、更にその中の `TheLoginModal` にユーザー情報を渡さなければなりません。

しかもTheLoginModalでログインしたら、 `@logined` のようなイベントでログインした情報を受け取るというバケツリレーを最初に戻るまで繰り返さなければなりません。しかも他のページ上の画面でもユーザー情報を表示したいところがあれば全部同様にしていかなければなりません。気が狂いそうなほど非常に面倒です。

Storeであればこれらは全部不要となります。開発者の負担がまるで違いますので、超小規模アプリケーション以外ではほぼ必須ではないかと思います。

## Nuxt.jsの場合ファイル分けも非常に簡単

ユーザー情報だけでなく、例えばチャットのページでは発言一覧、地図のページでは地図上のマーカー情報一覧などをStoreに置いておきたいところなども出てくると思います。この場合先程紹介したマニュアルのページで解説されていますが、用途ごとにファイルを分けることもNuxt.jsでは非常に簡単です。

具体的にどうするかというと、本当にただファイルを分けて定義するだけです。例えば `store/chat.js` を作るとすると、参照する時は

```javascript
<div v-for="post in $store.state.chat.posts" :key="post.id">
</div>
```

のような感じで、commitは

```javascript
this.$store.commit('chat/add', post)
```

という感じで、非常に簡単です。

## ReactのReduxと比較すると？

ReactのReduxを使ったことがある方は分かると思いますが、結構面倒です（とはいえそれでもプロパティで数珠つなぎにするよりははるかに楽ですが）。だいぶ前に同様の記事を書いています。そこでは概念しか書いていませんが実際に実装すると結構手間で、管理も大変です。

[ReactにReduxを組み合わせると何が楽なのか](https://crieit.net/posts/React-Redux)

それに比べNuxt.jsのマニュアルになり、ぐんとわかりやすくなっていると思います。Reduxだと他にもactionsとかreducerとかファイル数も多く、面倒になっている部分だと思います。Nuxt.jsだと先程の説明ではstateとmutationsしか出てきておらず、最小限の実装だとほんとうに単純明快です。

もちろんこの簡単さのために逆に犠牲にしている部分はあると思うのですが、それでも個人であれこれぱぱっと何か作りたいときになどにはこれくらいで十分でスピーディーに物事を進められると思います。

## まとめ

とにかくこのNuxt.jsのStoreから理解を進めていくと簡単で分かりやすいです。多分ここを読んでちらっと理解しておくと、VuexやReactでStoreを使う時なども多少理解しやすくなっていると思います。

今までよく理解できなかった、という方がいればぜひこの機会にもう一度確認してみてください。
AnyChart 8.4.0 Released with JS Sankey Diagram and Other Improvements
Tags: javascript, webdev, dataviz, html
Published: 2018-10-09 12:24:46

---
title: AnyChart 8.4.0 Released with JS Sankey Diagram and Other Improvements
published: true
description: Award-winning AnyChart JS Charts library for data visualization receives the year’s third major update, adding Sankey Diagram as the centerpiece of the new release. Learn more about AnyChart 8.4.0.
tags: #javascript, #webdev, #dataviz, #html5
canonical_url: https://www.anychart.com/blog/2018/10/08/js-sankey-diagram-anychart-8-4-0
cover_image: https://i.imgur.com/0lyV5gd.png
---

One of the global leaders in interactive data visualization, [AnyChart](https://www.anychart.com) announced the [8.4.0 release of its JavaScript (HTML5) charting libraries](https://www.anychart.com/blog/2018/10/08/js-sankey-diagram-anychart-8-4-0/), featuring Sankey Diagram as the centerpiece of the year's third major update.

Learn more about AnyChart JS Charts 8.4.0 on the company's blog. Also, AnyChart invites everyone to share feedback and new feature suggestions for the next big release scheduled for December 2018.
Less for log debugging
Tags: lesslogsdebug
Published: 2018-10-09 11:32:24

---
title: Less for log debugging
published: true
description: Blog to get started with using less
tags: less logs debug
---

Today there are a variety of tools like Kibana, splunk, sumo, cloudwatch for aws etc which are tailor mode to solve problems associated with log storage and analysis. With more and more companies moving towards cloud architecture, these tools are becoming increasingly popular. But the harsh reality is that, in majority of workplaces, you will still need to debug logs the old fashioned way - Log into the server and use a tool to search for the exact line. 

I have personally used less to analyse log files. Less does not load the entire file into memory and because log files are normally large, it makes it very efficient. Today after a long time I faced a similar situation and had to brush up myself with less before I could use it. Hence I thought of putting together a blog with the minimum commands required to search log files.

Ok, Lets get started with the important bits first, entry and exit.

To open: `less <filename>`
To exit: `q`

Next use the arrow keys to navigate up and down, if you want to jump pages
To go to the Next page: `[Space bar]`
To go to the Previous page: `b`
To go to the beginning of the file: `g`
To go to the end of the file: `G`

To search for a pattern from the start of the page use:
`/pattern`
Next match: `n`
Previous match: `N`

Once you find your point of interest:
Mark the line: `m` followed by any letter

In case you are lost and want to come back to the mark:
`'<the letter>`

To search for a pattern from the end of the page use:
`?pattern`
Next match: `n`
Previous match: `N`

Since logs are constantly changing use 'r' to repaint the screen

These basic commands should be enough for most of the cases.
Bashing TYPO3 🔥
Tags: typo3, cms
Published: 2018-10-09 10:58:08

---
title: Bashing TYPO3 🔥
published: true
description: 
tags: typo3, cms
---

Since more than 10 years I've been using TYPO3 CMS to create websites, I'm an active community member, I've published extensions, I've contributed to the TYPO3 core and popular extensions.

As a TYPO3 guy I can't understand why it is not the world's most used and loved CMS. 😉

So I challenge you to bash TYPO3 as good as you can. For me it doesn't matter if you have just heard rumors about how bad TYPO3 is or if you have actually worked with it. If you have hard feelings about my favorite CMS please share them with me in the comments.

Maybe I will try to defend TYPO3 against your criticism, I will definitely learn from it.
My first blog 
Tags: firstblogroshan
Published: 2018-10-09 10:15:53

---
title: My first blog 
published: true
description: First of a series of blogs that I plan on writing to update myself.
tags: first blog roshan
---

As a software developer there is a need to constantly update oneself in order to stay relevant in the industry. In my short career I have explored a variety interesting stuff, and because I like to be absolutely clear of the concepts, spend a lot of time researching multiple sources for the same. The problem is that I am very unorganised and tend to lose track of what I researched (the links, tutorials etc). 

Hence I have decided that whenever I explore something, I will be blogging down my thoughts - everything so that if I decide to use that feature someday in the future, I should be able to get most of the useful information from my blog. I also always wanted to have a technical blog, so I believe this is a good start.

Giving it a shot, lets see how it goes. Cheers:-)
Does pair programming decrease individual's sense of responsibility or motivation?
Tags: question, discuss
Published: 2018-10-09 10:15:33

---
title: Does pair programming decrease individual's sense of responsibility or motivation?
published: true
description: 
tags: question,discussion
---


Do you think pair programming decreases individual's sense of responsibility or motivation?
One purpose of pair programming is to minimize the damage of losing someone who is the only one with some specific knowledge by sharing knowledge in the team.
If you see it the other way, however, it does not matter even if a member leaves the team and she might feel as if she had not played important role.
I think there are certain number of people who want to feel that they are indispensable to the team.
Gitlab-CI using Panther and Symfony 4
Tags: technology, ci, gitlab, panther
Published: 2019-08-27 13:06:49

---
title: Gitlab-CI using Panther and Symfony 4
published: true
tags: Technology,ci,gitlab,Panther
canonical_url: https://khalifa.tn/gitlab-ci-using-panther-and-symfony-4/
---

I tried to test my Symfony 4.1 app using gitlab-ci. Basically, when we Test PHP application we require php-cli docker image to execute composer install, phpunit.  
But in this case I have a node packages to install, a React App in the front to test and a Rest API to test with my React Application.

I created a simple Symfony 4.1 App using React Routes in front and I execute a fetch to get a JSON from ApiController.

I made a TestCase using Panther to test it locally and it works perfectly.

<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://player.vimeo.com/video/294109337?autoplay=1&amp;loop=1&amp;color=ff9933&amp;title=0&amp;byline=0&amp;portrait=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>

It tooks 9 secondes because in the controller I wrote sleep 8 secondes before returning the Response. 

Then, I want to test my app using Gitlab-CI, when I push an update I want to be sure that everything is fine and I can safely deploy my app on production.

I write a gitlab-ci to test the app, and it fails… it fails… it fails… I check the log and I try… Finally I decided to write my own Docker image and test my app with it.

I made this [Docker image](https://hub.docker.com/r/chokri/phpnode/) base on Ubuntu 18.04. It contains PHP 7.2 andNode JS.  
To be able to run Panther Unit Tests, we need to install 3 packages, (ZIP, Libnss3 and chromium-browser). All these stuffs are available in one place. The problem is that the size of the image is about 1.18GB !!

With this docker image I’m now able to run CI tests on gitlab.

![](https://i1.wp.com/khalifa.tn/wp-content/uploads/2018/10/Capture-d%E2%80%99e%CC%81cran-2018-10-09-a%CC%80-11.04.36-AM.png?w=646&ssl=1)

![](https://i0.wp.com/khalifa.tn/wp-content/uploads/2018/10/Capture-d%E2%80%99e%CC%81cran-2018-10-09-a%CC%80-11.05.57-AM.png?w=646&ssl=1)

The post [Gitlab-CI using Panther and Symfony 4](https://khalifa.tn/gitlab-ci-using-panther-and-symfony-4/) appeared first on [C.Khalifa](https://khalifa.tn).
I don't like remote working
Tags: discuss, remote
Published: 2018-10-09 07:49:36

---
title: I don't like remote working
published: true
description: 
tags: discuss, remote 
---

I feel like I'm the only developer in the world that truly enjoy going to the office every morning.

I like my colleagues, sometimes we have sushi for lunch, we play boardgames once a week after work and is generally a fun experience to work at the same desk. Being able to share knowledge and discuss with other colleagues face-to-face is really important to me, and the light chitchat at the coffee machine is invaluable.

So while I do understand the benefits of remote working (to be fair, we can do remote at will, and I did a couple of times) I really don't see the value in terms of productivity and social engagement over working physically all together. 

What are your thoughts on the matter? Do you work remotely or on site? Are you happy about your setup?
Blockchain without cryptocurrency? 🤔
Tags: blockchain, discuss, offtopic
Published: 2018-10-09 04:43:03

---
title: Blockchain without cryptocurrency? 🤔
published: true
description: Is a blockchain network without mining/currency return reliable or even possible?
tags: #blockchain #discuss #offtopic 
---

I'm seeing lots of discussions and press releases about intentions to regulate blockchain dissociated from cryptocurrency with intention to apply it as a validation network to industry, banks and government.

####Assuming that we are not on a solar powergrid, my question is:
If there is no currency involved, who would join a mining pool and spend 1365W/h (actual Antminer S9i power consumption) to validate blocks for free?

I read an interview with the president of Federation of Industries of the State of São Paulo (In a raw translation) saying:

> "[...] With an eye on the impact this technology will have on the entire industry chain, which can reduce costs, waste and bureaucratic processes, as well as increase productivity [...]"

What is the point to save X money with papers and bureaucracy and spend X*10^3 with electricity?
Go Projects to contribute to during Hacktoberfest
Tags: discuss, go
Published: 2018-10-09 04:13:56

---
title: Go Projects to contribute to during Hacktoberfest
published: true
description: 
tags: discuss, go
---
Hi Gophers!

As you know [Hacktoberfest 2018](https://hacktoberfest.digitalocean.com/) has already started. And if you are a Go developer you probably want to know to which projects you can contribute. Let's use this #discuss post to collect different OSS Go projects.
Instalando PHP7 no Linux
Tags: php, php7, linux
Published: 2018-10-09 02:56:52

---
title: Instalando PHP7 no Linux
published: true
description: Como instalar o PHP7 no Linux
tags: #php #php7 #linux
---

1. Atualizando os ficheiros:
<b># apt update</b>

2. Instalando o php7:
<b># apt search php7</b>
Verifique a versão mais atual do php7 e instale. Por exemplo, se a versão mais atual for a <b>7.2</b>, então faça:
<b># apt install php7.2</b>

3. Instalar pacotes adicionais:
<b># apt install libapache2-mod-php7.2</b>
<b># apt install php7.2-mysql</b>

Pronto! Com isso você terá o <b>PHP7</b> em seu computador e já poderá programar usando a linguagem!

Bons estudos!
=]
Deer
Tags: electron, notes, react, opensource
Published: 2018-10-08 22:57:23

---
title: Deer
published: true
description: 
tags: electron, notes, React, open_source
---

<p align="center">
  <img src="https://thepracticaldev.s3.amazonaws.com/i/wjddnt7ftn4epwqbuyse.png"/>
  <p align="center">
    <a href="https://gitter.im/abahmed/Deer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge">
      <img src="https://badges.gitter.im/abahmed/Deer.svg"/>
    </a>
  </p>
</p>

**Deer** is a modern, fast, beautiful note taking app. Write down your thoughts and ideas quickly and easily on Linux, Mac and Windows.


**Deer** is built on [Electron](https://electronjs.org) and aims to be
+ Free
+ Open Source
+ User Friendly
+ Secure
+ Fast
+ Simple
+ Customizable
+ Cross Platform for Desktop and Mobile
+ Multi-language

### Download
Currently, Deer is available for Linux, Mac and Windows.
[Download it now!](https://github.com/abahmed/Deer/releases)


### Getting started

Check [Our Docs](./docs/README.md) for **building**  and **installing** instructions.


If you would like to contribute to Deer, see [Our Docs](./docs/README.md) too.

### Get in touch!

Feel free to Join us on [Gitter](https://gitter.im/abahmed/Deer), or email us at [deer-project@googlegroups.com](deer-project@googlegroups.com) if you have questions.

### License

Deer is licensed under [MIT License](LICENSE).
Nic Cage or Not - React Native
Tags: reactnative, react, niccage, machinelearning
Published: 2018-10-08 22:22:34

---
title: Nic Cage or Not - React Native
published: true
description: Writing the Nic Cage App
tags: ReactNative, React, ReactJS, NicCage, MachineLearning
---

![nic or not app](https://thepracticaldev.s3.amazonaws.com/i/2fyuf6it7g1dah661cwu.png)

Machine Learning is doing crazy new things, [finding sharks](https://theconversation.com/sharkspotter-combines-ai-and-drone-technology-to-spot-sharks-and-aid-swimmers-on-australian-beaches-92667), [creating faces](https://twitter.com/GantLaborde/status/1033729921393274882), and more wild and useful examples.  For instance, there’s a Machine Learning model that could identify who would steal the declaration of independence. That means some crazy person spent time training a model to identify Nic Cage.  From installing beta software to learning how to properly train an image classification model. Who would do such a thing?  Spoiler alert, it was me.

While extremely useful, the Nic or Not app also has some interesting technology under the hood.  Facial recognition will continue to advance and consequently more and more apps will have an interesting application of such.  If you’re interested in the future of mobile and the fun of real-time facial recognition enjoy the [story of creating the ‘Nic or Not’ App in React Native](https://shift.infinite.red/cage-against-the-machine-a419b6980424).
Mini Quiz: Javascript Scoping
Tags: challenge, javascript, scoping, webdev
Published: 2018-10-08 22:13:35

---
title: Mini Quiz: Javascript Scoping
published: true
description: A quick quiz question on javascript scoping
tags: #challenge, #javascript, #scoping, #webdev
---


A quick quiz question on javascript scoping. Try and figure this out before executing in browser

If you were to create this object:

```javascript
var person = {
    name: 'Dave',
    weight: 100,
    height: 180,
    calculateBMI: function() {
        console.log(this);
        function innerFunction() {
            console.log(this);
        }
        innerFunction();
    }
}
```

When running `person.calculateBMI()` what object will `this` be mapped to when logged by the innerFunction?