teleren/devto huggingface dataset:
The best way to write UML anywhere
Tags: chromeextension, uml
Published: 2017-11-18 14:05:37

---
title: The best way to write UML anywhere
published: true
description: 
tags: #ChromeExtension #UML
---

I’m to introduce the Google Chrome extension which gets along with PlantUML: [“UML anywhere”](https://chrome.google.com/webstore/detail/uml-anywhere/mcefidbiooofpmcanlmgcjiickpdehah).
百聞は一見にしかず。
See the demo below.

![hoge](https://thepracticaldev.s3.amazonaws.com/i/4a8ots3zxk7stc51xs3d.gif)

Here is the article by the author (in Japanese):
[Qiita（とかブログとか）にPlantUMLで書いたUML図を貼れるようにChrome拡張機能を作った - Qiita](https://qiita.com/ryskiwt/items/06c1322ebae8af376f7a)
Explain me C compilation like I'm five
Tags: explainlikeimfive, beginners, c, discuss
Published: 2017-11-18 10:07:42

---
title: Explain me C compilation like I'm five
published: true
description: 
tags: explainlikeimfive, beginner, c, discuss
---

With/Without librairies, makefiles, several files, etc.
I'm a truly beginner with this and I didn't understand a damn thing.

Thanks !
Brush Your Ideas Magento Product Designer Tool
Tags: ecommerce, software, designtool, webtoprint
Published: 2017-11-18 07:22:28

---
title: Brush Your Ideas Magento Product Designer Tool
published: true
description: It is time to turn your online store into a creative hub by employing  Brush Your Ideas:[Brush Your Ideas](https://www.brushyourideas.com). It is a perfect Web-to-Print Magento Product Designer that amplifies your customers creative streak. Be it apparels, mugs, cards or gifts; we enable your customers to get their ideas embossed on any printable surface. Your clients don’t have to worry about printing on different formats as they can obtain their visual musings on PNG, JPG, SVG and PDF files. And not just that! Through the Social Media Support feature, they can also share their artwork on Facebook, Twitter, Instagram and Pinterest.

tags: #ecommerce, #software, #designtool, #webtoprint
---
Enable split apk only when release build.
Tags: android
Published: 2017-11-18 06:52:14

---
title: Enable split apk only when release build.
published: true
description: 
tags: android
---

During development most of the time you do not need split apk, but doesn't work settings like bellow.

```groovy
buildType {
  debug {
    splits {
      abi {
        println ("split settings for debug.")
        enable false
      }
    }
  }

  release { 
    splits {
      abi {
        println ("split settings for release.")
        enable true
        reset()
        include 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
        universalApk true
      }
    }
  }
}
```

This is because the setting process is executed sequentially.

```groovy
./gradlew assembleDebug
> ...
> split settings for debug.
> split settings for release.
> ...
```

# Solution 1

You can access the gradle task name on gradle scripts. Control the splits by the task name as follows.

```groovy
android {
  splits {
    abi {
      enable gradle.startParameter.taskNames.contains("assembleRelease")
      reset()
      include 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
      universalApk true
    }
  }
}
```

# Solution 2

You can pass parameters to gradle script.

```groovy
android {
  splits {
    abi {
      enable project.hasProperty("enabledSplitApks")
      reset()
      include 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
      universalApk true
    }
  }
}
```

Control split apk as needed.

```sh
./gradlew assembleDebug -PenabledSplitApks
```

It saves build time by omitting extra processing :smile:
WeatherTab for Firefox
Tags: extension, firefox, javascript, showdev
Published: 2017-11-18 05:20:41

---
title: WeatherTab for Firefox
published: true
description: I ported my first Firefox extension, and I changed almost nothing to get it working.
tags: extension, firefox, javascript, showdev
---

Remember [WeatherTab](https://dev.to/peiche/weathertab-a-new-tab-extension-for-chrome)? It’s a new tab extension that I created for Chrome, and I just released its port to Firefox.

According to Mozilla’s documentation, Firefox is almost completely compatible with the extension API supported by Chrome and Opera (and, by extension (puns!), my favorite underdog Vivaldi). They have a [page](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension) dedicated to helping developers port their Chrome extensions to Firefox. And they’re not kidding; I had to change almost nothing to get WeatherTab working in Firefox.

The extension uses the `geolocation` permission, which in JavaScript means using `navigator.geolocation`. I didn’t have to do anything to get this working.

It also uses the `storage` permission, which means using `chrome.storage`. Even though this seems Chrome-specific, Firefox states that in most cases, it will work without any developer intervention. In my case, this turned out to not be true, but not for the reason I thought.

Firefox does support the usage of `chrome.storage`, but it does not support `chrome.storage.sync` without an application ID. Changing it to `chrome.storage.local` allowed the extension to work again, but it meant the temperature setting wouldn’t be synchronized across browsers.

I ended up pushing out the first version of the port with `chrome.storage.local`, then once the extension was live, I grabbed the UUID from the developer page, updated the manifest with it, updated the code to use `chrome.storage.sync`, and republishing. Now version 1.4.3 is live with the working synced temp setting. (I bumped the version of the Chrome extension to maintain parity between the two.)

[Check out the shiny new extension!](https://addons.mozilla.org/en-US/firefox/addon/weathertab/)
[Judge my crazy nested Yahoo API calls on GitHub.](https://github.com/peiche/weathertab-firefox)

_This was originally published on [eichefam.net](https://eichefam.net/2017/11/17/weathertab-for-firefox/)._
Poll: Helpful or Annoying - Fixed Position Video Players on Page Scroll
Tags: ux, webdesign, discuss, videos
Published: 2017-11-17 21:18:50

---
title: "Poll: Helpful or Annoying - Fixed Position Video Players on Page Scroll"
published: true
description: "Poll: We've all been there. You see a link to an article you want to read so you click it, and the page loads. You start scrolling to read the content, and a video starts playing. It then shows up on the right hand side of your screen (in a rail, near ads, whatever) and stays there while you scroll the article. The question is: is this annoying, or helpful?"
tags: ux, web-design, discuss, videos
---

This is less of a post for developers, more of a question for consumers - ie individuals visiting websites for content articles, which happen to show videos. 

We've all been there. You see a link to an article you want to read so you click it, and the page loads. You start scrolling to get past the enormous header ads and read the content, and a video starts playing. It then re-positions itself (ie its CSS changes to `position:fixed`) and resizes to be always visible in a rail,  and stays there while you scroll the article. The question is:

{% twitter 931559320743014401 %}

Do you generally like this behavior? What does your own site's user actions/experience tell us? Is it a trend that should continue, or that should go away? Take the poll above, leave your responses below!
What's your typing speed (WPM)?
Tags: random, fun, discuss
Published: 2017-11-17 20:26:54

---
title: What's your typing speed (WPM)?
published: true
description: Just for fun — how fast do you type?
tags: random, fun, discuss
---

Just a fun thread for a Friday afternoon.

Most of us spend a significant percentage of our waking hours typing away on our keyboards.  But how fast are we each typing?

**Take the test here: https://10fastfingers.com/typing-test/**

- What's your WPM (words-per-minute)?
- Do you use an external keyboard?
- Any Dvorak or other non-QWERTY typers?
Reading text file and split by line
Tags: c
Published: 2017-11-17 18:58:30

---
title: Reading text file and split by line
published: true
description: 
tags: C
---

There are many troublesome in text processing in the programming language C. Even just write program that read line by line make time consume. I have read [articles that try to implement it](
http://fa11enprince.hatenablog.com/entry/2016/01/26/025647).

I have experience to write chat CGI that include line text processing.

Just read the whole file at once by fread.

![reading text by line](https://thepracticaldev.s3.amazonaws.com/i/p5xabmucg62h1d2jvqom.png)

And replace return to null. It is apparently an array of rows.

![replace return to null](https://thepracticaldev.s3.amazonaws.com/i/9ov6jt8zv69uolunv2ud.png)

The implementation is above.

```c
// whole.h
char** whole(const char* const filename);
void freewhole(char** m);
```

```c
// whole.c
#include <stdio.h>
#include <stdlib.h>

static long int filesize(FILE* fp) {
  fseek(fp, 0, SEEK_END);
  long int size = ftell(fp);
  fseek(fp, 0, SEEK_SET);
  return size;
}

static int countline(char* block) {
  int line = 0;

  for(int i=0, flag=0; block[i]; i++)
    switch(block[i]) {
    case '\r': line++; flag=1; break;
    case '\n': if(flag) flag = 0; else line++; break;
    default: flag = 0;
    }

  return line+2;
}

static char* nextline(char* str) {
  char* n;
  for(n=str; *n!='\n' && *n!='\r' && *n!='\0'; n++);
  switch(*n) {
  case '\0': return NULL;
  case '\r': *n++='\0'; if(*n=='\n') n++; if(*n=='\0') return NULL; break;
  case '\n': *n++='\0'; if(*n=='\0') return NULL; break;
  }
  return n;
}

static char* readall(const char* const filename) {
  FILE* fp = fopen(filename, "rb");
  if(fp==NULL) {perror(NULL); exit(EXIT_FAILURE); }
  int size = filesize(fp);
  char* block = malloc(size+1);
  if(block==NULL) {perror(NULL); exit(EXIT_FAILURE); }
  int read_size = fread(block, 1, size, fp);
  fclose(fp);
  block[read_size]='\0';
  return block;
}

static char** split(char* block) {
  int linelength=countline(block);
  char** lines = malloc(linelength*sizeof(char*));
  if(lines==NULL) {perror(NULL); exit(EXIT_FAILURE); }
  char** p;
  for(p=lines; block!=NULL; block=nextline(block)) *p++=block;
  *p=NULL;
  return lines;
}

char** whole(const char* const filename) {
  char* block = readall(filename);
  return split(block);
}

void freewhole(char** m) {
  free(m[0]);
  free(m);
}
```

Example of use.

```
// example.c
#include <stdio.h>
#include "whole.h"

int main(void) {
  char** lines = whole("test.txt");

  for(int i=0; lines[i]; i++) printf("%d %s\n", i, lines[i]);

  freewhole(lines);
  
  return 0;
}
```
Science as a side project
Tags: career, sideprojects
Published: 2017-11-17 17:50:43

---
title: Science as a side project
published: true
description: In the age of "makers", scientific experimentation doesn't get enough attention.
tags: career, sideprojects
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pgdidiknwzgp7dcb9bxb.png
---

In software development, side projects can be a source of personal fulfillment, career advancement, and often both. They're also the birthplace of a lot of innovation and commercial success. People are free to do whatever they please with their spare time, including not code at all. For those who want to embark on projects, I've noticed that a lot of folks are not really sure _what_ they want to build in their spare time. To that crowd, I propose a path that does not get much attention: Science.

By science, I mean good old fashioned experimentation for the sake of discovery, as opposed to engineering with a "product" or "user" in mind. That path is great if you want to go there, but plain old research and experimentation can be just as impactful for the world, and perhaps a lot more fun. It does not get nearly as much attention in the age of "makers".

Instead of creating another calendar app or blogging platform, not that there's anything wrong with that, I encourage you to think about experimenting in software using the scientific method. 

![](https://www.sciencebuddies.org/Files/5084/7/2013-updated_scientific-method-steps_v6_noheader.png)

Types of experiments could include performance benchmarks, statistical analysis ([perhaps using the BigQuery/GitHub dataset](https://dev.to/walker/using-googles-bigquery-to-better-understand-the-python-ecosystem)), or any attempt to validate a hypothesis you might have within our field.

I'm not imploring anything overly formal. I wouldn't even know where to begin with _formal_ scientific publishing, but as a part of the software development community, there are a lot of ways to make an immediate impact with personal scientific research. One such way is to publish any interesting outcomes right here on [dev.to](/). Those type of posts always get a lot of attention because they're inherently original. The software development community is always hungry for original research. It's also an area where inexperience can sometimes be a feature and not a bug, because you may be able to take a fresh look at an area of the field that others take for granted. As a means of standing out in a crowd of newer software developers, scientific research is a powerful one.

Science cannot always be justified as a business expense for a company, but since there is so much you can gain from it in terms of enjoyment and career advancement, it's easy to justify on a personal basis. If you hadn't thought to take the time to run some experiments, I urge you to consider it. The industry could use more of it and you'll have a lot of fun.

Happy coding.
React's key prop is super sly
Tags: react, javascript
Published: 2017-11-17 17:35:58

---
title: React's key prop is super sly
published: true
description: A tiny bite about React's key prop
tags: react, javascript
---

I sometimes [make videos on the internet](https://www.youtube.com/channel/UCDHuR3rK_PqaTuYH4qGN3fg) about javascript stuff.

I made a tiny one to show a common gotcha with React:

{% twitter 931572554929659904 %}

You should follow me on [twitter](https://twitter.com/siddharthkp)
How to monetize open source
Tags: opensource
Published: 2017-11-17 16:00:38

---
title: How to monetize open source
published: true
tags: opensource
canonical_url: 
---

Open source provides the framework for a lot of innovative work happening in the tech industry. Despite this, open source is not as well funded as some startups that have emerged in the tech industry. As a result, open source maintainers need to explore alternate avenues for generating funding to support their work. I’ll share a few of the more lucrative funding opportunities that open source projects can pursue to fund their work.

**Corporate sponsorship**

Getting corporations to sponsor an open-source project can be an intensive process but can be a good way to ensure sustainable long-term revenue. Corporate sponsorships can be in-kind in the form of donated employee time or office space or direct sponsorship in the form of monetary donations. Companies usually provide sponsorship as part of their marketing budget, so it helps to make sure that the incentives provided for corporate sponsorship align with the needs of a marketing operation within a company. Companies that sponsor should be given as much visibility throughout the project as possible.

**A business around open source**

For maintainers with an entrepreneurial itch, building a for-profit business around the open source project can be a good model for monetization and sustainability. Often, the for-profit business acts as a consulting company around the particular project. Companies are more than willing to pay to get expert advice and education from the creators of an open source tool. In alternative situations, the business provides a hosted version of the open-source project that limits the amount of time that companies have to spend configuring and maintaining the tool in order to integrate it into their workflows. In general, it makes the most sense to build a for-profit business around an open source project if the project consists of a complete product. This complete product can be a CMS, a web framework, or a continuous integration system.

**Pay-to-play system**

Once an open source project reaches a certain level of popularity, users will undoubtedly start to request special features for their particular uses cases. This is great opportunity to institute a “pay-to-play” system where larger organizations can pay in order to have certain features added to the product. This works best for projects that have an extendable nature and tend to provide a limited framework for solving a certain problem without going all the way.

**Grant funding**

For open source projects that don’t have a profit-motive, there are several intuitions that provide grant founding to open source projects that align with the intuitions vision. The process for getting grant funding can be long and complicated, but some grants can provide rewards in the millions of the dollars. In general, grant funding works best for open source projects that facilitate a niche cross-disciplinary need.
Lazy Approach to Display YouTube Videos in A React Native App
Tags: reactnative
Published: 2017-11-17 15:52:43

---
title: Lazy Approach to Display YouTube Videos in A React Native App
published: true
description: 
tags: reactnative
---

Sometimes ago, I made an half-baked RN app for an internship job. I would need to display company videos from their YouTube account. Went I was to find plugins on npm. As I did not come across a working plugin at that moment so I decided to go with the laziest method I thought of.

# WEBVIEW FTW !!!

Yass, I am lazy to write a native plugin so there is WebView :)


```javascript
<WebView 
    ref={(ref) => { this.videoPlayer = ref;}}
    scalesPageToFit={true} 
    source={{ html: '<html><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /><iframe src="https://www.youtube.com/embed/' + this.props.navigation.state.params.videoId + '?modestbranding=1&playsinline=1&showinfo=0&rel=0" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe></html>'}} 
    onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest} //for iOS
    onNavigationStateChange ={this.onShouldStartLoadWithRequest} //for Android
/>
```

1. It has a `this.videoPlayer` component reference.
2. `this.props.navigation.state.params.videoId` is a parameter pass in by Redux using React Navigation `NavigationActions.navigate`.
3. It has a source to an embed YouTube player with 100% css height and width.

Then, there is a Youtube logo on the bottom which the user can tap to either open the native YouTube app or a new tab in their default browsers to YouTube.

I did not want the user to leave the app as well. I included a little "hack" that disallow this action.


```javascript
onShouldStartLoadWithRequest = (navigator) => {
    if (navigator.url.indexOf('embed') !== -1
    ) {
        return true;
    } else {
        this.videoPlayer.stopLoading(); //Some reference to your WebView to make it stop loading that URL
        return false;
    }    
}
```

For every url change, the WebView will call the function delivered to its `onShouldStartLoadWithRequest` and `onNavigationStateChange` props. It simply check if the `embed` from YouTube web embed url is still there or not.

Otherwise, the WebView will stop loading.

---

Quick and dirty. Ugly but **IT WORKS**

![](http://static1.squarespace.com/static/5539b16ae4b09e35ffe0d93c/55c27624e4b0db8468d6a825/57c73fd0d2b8574ea2f13334/1472679095663/59631492.jpg?format=1000w)
Changelog: Language detection and segmentation
Tags: meta, changelog
Published: 2017-11-17 15:40:38

---
title: Changelog: Language detection and segmentation
published: true
description: This is something we had been steadily thinking about and/or working on for a while, but the influx of new Japanese members encouraged us to ship something now. It's not fully baked but it's a helpful start.
tags: meta, changelog
---

This is something we had been steadily thinking about and/or working on for a while, but the influx of new Japanese members encouraged us to ship something now. It's not fully baked but it's a helpful start.

We now automatically detect (human) languages for posts and allow you to determine which languages you'd like to see in your feed. You do this [in your settings](https://dev.to/settings/misc). We have settings for some of the popular languages on the platform right now, but in the future it should be pretty generalized. We also make an estimation on your settings when you sign up depending on such things like your Twitter language settings.

Software development communication globally conducts itself mostly in English, but that's not how the world works and we want to make pushes for a more inclusive environment for software developers whenever possible. Language-oriented features also help preserve a better experience for English-only software developers. You're now much less likely to see a Spanish or Japanese post in your feed if you have not indicated that as a language preference.

I think a natural feature to complement some of this would be translations of great existing posts into different languages and having that functionality be fairly native to the platform. That's a matter of modeling out feature and building clear permissions settings for this sort of thing.

We still lack a lot of internationalization features within the app, but it's all a work in progress. This was a productive push to get us heading well in that direction.

Happy coding ❤️
はじめての投稿！
Tags: ruby
Published: 2017-11-17 14:46:30

---
title: "はじめての投稿！"
published: true
description: 
tags: "ruby"
---

# 話題のdev.toのはじめての投稿！

Ruby とかやってます！

This is my first post on dev.to.
I use Ruby.
What are the Best Tips in implement TDD in a web application project
Tags: discuss, tdd, beginners, testing
Published: 2017-11-17 14:41:28

---
title: What are the Best Tips in implement TDD in a web application project
published: true
description: What are your tips in doing a TDD? what tools do you use?  
tags: #discuss,#TDD,#beginners,#testing
---
#####I don't really understand the TDD (test Driven Development) i will like to have somme informations on the best way to implement it... some tools you use? how do you code?
[lang='ja'] もう position sticky だけで良いと思います
Tags: css
Published: 2017-11-17 01:01:49

---
title: "[lang='ja'] もう position sticky だけで良いと思います"
published: true
description: position sticky が動作しないブラウザでも、JavaScriptによってヘッダーや特定の要素の追従ができるが、そもそも追従がそんなに大事なのかという話
tags: CSS
---

## はじめまして

dev.to初投稿。

## position: sticky;について

2017/11/17現在、[Can I use...](https://caniuse.com/#feat=css-sticky)で確認したところ、IE11, Edge15以前、Androidの古いブラウザでは動作しない。また、ChromeやFirefoxでもtable要素関連の追従はサポートされていない。

## CSSとJavaScriptでのSticky

ポリフィル（ex. [stickybits](https://github.com/dollarshaveclub/stickybits))を使えばJavaScriptによって追従させることができる。

しかし、position: sticky;によって追従させるのと、JavaScriptによって追従させるのでは、少し表示に差が出てしまう。

## アニメーションが滑らかでない

JSで追従を実装した場合は、positionプロパティの値が、JSから変更される。

(how-to-achieve-60-fps-animations-with-css3)[https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108]で言われているように、transformとopacity以外で要素を動かすと、滑らかな（60fpsに近い）アニメーションにはならない。

JSで実装している場合、端末にもよるとは思うが、持っているAndroidや周りの人のスマホで確認してもらった結果、positionプロパティの値を切り替えるタイミングで少しガタつきが発生している。PCでも操作スピードによっては一瞬ガタつく。

個人的にはけっこう気になるし、気になってしまう可能性があるものをわざわざ実装したくはない。

## そもそも追従は必要なのか

position: sticky;が効かないブラウザのために、わざわざJSで追従する必要はあるんだろうか。アニメーションは滑らかじゃないし、そもそもJSを読み込む必要があるのでJSが実行されるまでは追従できないし。。。

しかもだいたいにおいて、追従している要素ってヘッダーだったりする。スマホの場合は特にそうだが、メインコンテンツが表示される領域を小さくしてまでヘッダーを追従させる意味なんてほとんどないんじゃないのか。例えば、コンバージョンにつながるボタンがヘッダー内にあって、それを見せ続けるために追従させたい、というのであればまだわかる。

でもロゴとメニューしか入っていないヘッダーを追従させているのはどうなの。そのためにJSで実装している時間がもったいないし、もっと他に重要なところあるでしょ、と思う。

## Progressive CSS

これは造語ですが、position: sticky;に対応しているブラウザは追従する、対応していないブラウザは追従しない、でいいと思っている。@support (position: sticky;) {} 使えばスタイルの分岐もできるのでそんなに気にしなくていいと思う。

sticky以外にも言えるかもしれないが、それほど重要でないことのために、わざわざポリフィル探してきて、古いブラウザで確認してまで実装する意味はそんなにないと思うし、どんなブラウザでも見た目と挙動を同じにしないといけないと思っているのは、おそらく実装している側だけ。

結局のところ自分が持っているブラウザでしか見ない。少なくとも自分は、自分が作っているサイト以外を複数端末で確認するなんてことはまずない。

機能が破綻していたり、よっぽど見た目が崩れなければもう古いブラウザは対応せずに、積極的に新しい書き方に寄せていくべきじゃないだろうか。