teleren/devto huggingface dataset:
Will the web ever evolve past JavaScript?
Tags: discuss, webdev, javascript, webassembly
Published: 2018-03-10 03:17:33

---
title: Will the web ever evolve past JavaScript?
published: true
description: Sorry Brendan, I love JS but I have some other ideas too.
tags: discuss, webdev, javascript, wasm
---

When I first came across the [.NET Framework](https://en.wikipedia.org/wiki/.NET_Framework) I was honestly amazed. Microsoft made a pseudo-assembly language that's entirely platform agnostic that works as a compiler target for numerous languages (C#, F#, more). And if you've been following the recent developments around WebAssembly this might all sound very familiar.

WebAssembly produced a great MVP but for WASM to really take off I would say that [this issue](https://github.com/WebAssembly/design/issues/1087) is the most important. This issue describes interoperability with existing ES modules and giving WASM access to the Web APIs everyone knows and loves. With this, you could feasibly write a web app in *any* language\*.

What do you think? Should WASM stick to doing math, or should the web get its own [Framework Class Library](https://en.wikipedia.org/wiki/Framework_Class_Library)?
What's my Terminal(s)? 
Tags: android, linux, mac, raspberrypi
Published: 2018-03-10 00:19:18

---
title: What's my Terminal(s)? 
published: true
description: An overview of where I do my Term'ing.
tags: android, linux, mac, raspberrypi
---

####I have been trying (since Feb 28th) to get this together. I got most of my computing devices to run versions of a Terminal. All were successful in fulfilling the requirements I set forth:

*1. Running a Bash-like shell.*
*2. Installing git.*
*3. Using npm / node.* 

####Here are my five terminals using the Neofetch or the Screenfetch command. Getting them altogether was an adventure. Some of them I had to screenshot and / or copy and paste the output in a text file.

*1) My Chromebook: HP 11 G5 EE. Terminal. OS: Gallium (based on Ubuntu 16.04.) Terminal: Tilda. Shell: Bash.*

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

*2) My Kindle Fire: 2nd Gen. OS: Fire OS 5.6.x (based on Android 5.1.1.) Terminal: Termux. Shell: Bash.*

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

*3) My 2010 iMac running Homebrew. OS: 10.12.6. Terminal: iTerm2. Shell: zsh.*

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

*4) My Google Nexus: LG 5X. OS: Android 8.1. Terminal: Termux. Shell: Bash.*

![Nexus_Fetch](https://thepracticaldev.s3.amazonaws.com/i/9tm87nbclgfn3ta1ne4d.png)

*5) MY Raspberry Pi: B+. OS: RaspBSD (Based on FreeBSD 11.1.) Terminal: Sakura. Shell: csh.*

![RaspBSD_Fetch](https://thepracticaldev.s3.amazonaws.com/i/o3o50mr9srt88xdx8kif.jpg)

####I still cannot upgrade my iPad as it is on iOS 10.x and is 32-bit. My Linux box has a dead CPU. And then I have countless virtual machines. One could have dozens of Terminals on one device using various OS'es. thank you for reading my first post on *[DEV](dev.to)*
Parsing chromedriver logs in Haskell
Published: 2018-03-10 00:00:00

---
title: Parsing chromedriver logs in Haskell
date: 20180310T00:00Z
---

chromedriver (the tool for programmatic interaction with Chrome) doesn't have an output format amenable to analysis, so I wrote a Haskell program to convert it to JSON [chromedriver-logs](https://github.com/chrismwendt/chromedriver-logs), which:

- Outputs JSON
- Keeps track of commands and their response times
- Streams log lines
- Ignores junk lines

<script src="https://asciinema.org/a/44dRKLg0E2Mp9CXrZb113IHAK.js" id="asciicast-44dRKLg0E2Mp9CXrZb113IHAK" async></script>
MarkdownHelper Updated
Tags: ruby, github, documentation, markdown
Published: 2018-03-09 22:19:28

---
title: MarkdownHelper Updated
published: true
description: Image relative path resolution
tags: ruby, github, documentation, markdown
---

I have updated the [markdown_helper gem](https://rubygems.org/gems/markdown_helper).

Features:

* File inclusion
* Image path resolution (new)

The image path resolution replaces relative image paths with absolute image URLs.

* This matters because in the documentation for a gem (on RubyDoc.info), YARD formatting [changes some file structures](https://rubydoc.tenderapp.com/kb/frequently-asked-questions/broken-links-404-to-markdown-or-text-documents#why-are-links-broken-), which breaks relative links to images.
* The resolution to absolute URLs avoids that breakage.
Good Team leaders and Managements. Is about culture?
Tags: discuss
Published: 2018-03-09 21:06:23

---
title: Good Team leaders and Managements. Is about culture?
published: true
tags: discuss
---

In almost 7 years of experience that I have in IT, this past year was the worst.
I had Mexican managers, American managers and Indian managers.

I never faced any issues with Mexicans or Americans managers but with India was so different. Why they think that yelling or making you feel worthless it will make you more efficient?

I am not saying all Indians are like that because I had good team leaders and partners from India. 

Am I got lost in translation? 

How a team leader or manager can improve the performance of a hole team?
React tutorial code in Stateless Functional Components and Redux
Tags: react, redux, tutorial, japanese
Published: 2018-03-09 20:46:48

---
title: React tutorial code in Stateless Functional Components and Redux
published: true
description: tic-tac-doe code rewritten SFC and Redux, redux-undo, reselect
tags: react, redux, tutorial, japanese
---

# TL;DR
Reduxばっか使ってると脳がへんになるぞ

# はい
こんにちは。もうおれはつかれた。そしてこれを見てください。

https://stackblitz.com/edit/react-tutorial-sfc-and-redux
(github repository is [here](https://github.com/FirstStar/react-tutorial-code-sfc-and-redux))

埋め込みのやり方わかりません。もう眠いのでどうでもいいです。

![tic-tac-toe](https://thepracticaldev.s3.amazonaws.com/i/mfljyqci2nvt0lgjqqf1.jpg)

内容的にはReactの[このページ](https://reactjs.org/tutorial/tutorial.html)で書くマルバツゲーム(tic-tac-toe)をStateless Functional Components + Redux(react-redux, redux-actions, reselect, redux-undo@beta)で全部書き直したというだけのことなんですがまあとりあえず見てください。コードがわりと汚い自信はあります。

# Conclusion
## Reduxは小規模なプログラムで書いてもただ煩雑なだけ
もう見出しのとおりです。
ただ、学習という意味合いではそれほど無駄ではないかな、とは思いますが。

## そもそもReduxを使う意味
これは若干ポエム要素を含みます（完全に個人の見解です）が、Reduxはプロジェクトの構造を少し複雑にする分、それぞれのアクションの責任を小さく分割するような制約を要求してくるため、ある程度の規模を持ち、かつ複数人が関わるようなプロジェクトでその効果を存分に発揮してくれるものと認識しています。

「規模」というのが肝要で、どれほど大きくなればReduxが威力を発揮するのか？
それはグラデーション的な曖昧な境界線を挟む問題なので、ここで説明はしませんが、このぐらい小規模だとReduxはむしろコードの分量をいたずらに増やし、煩雑にしてしまうだけである以上、やはり「Reduxを使わない」という選択肢は十分に有り得る、という、当たり前のような無意味な解答をみなさんに提供します。
Coding with TypeScript, Prettier and ?
Tags: typescript, javascript, node, discuss
Published: 2018-03-09 20:09:12

---
title: Coding with TypeScript, Prettier and ?
published: true
description: Just use typescript and prettier and you dont need any other tool to help you write better and readable code.
tags: typescript, javascript, nodejs, discuss
---

Recently I started working on a new web app project and we used TypeScript on both front-end and the server. TypeScript was a game changer just from the types.

We need static code analysis and code formatting to make the code readable, correct and `<whatever>`. Here is how I solved this in my code setup:

* Code analysis -> **TypeScript** compiler
* Code formatting -> **Prettier**

That's it. Using pre-commit hooks it made my life so easy that i don't even have to think about code formatting  as its done for me and consistent across the board. All I have to think about is the actual code.

**Question:** Do I need `ESlint`/`TSLint` to check my code for non-style issues?

Because typescript compilers already does that for you.

I am just asking because I have not felt the need for it and I know everybody uses it. So i am thinking what am I missing?


_Please share your thoughts :)_
Why don't operating systems and browsers limit shared resources more strictly?
Tags: discuss
Published: 2018-03-09 20:08:26

---
title: Why don't operating systems and browsers limit shared resources more strictly?
published: true
description: 
tags: discuss
---

Apps can consume RAM at high rates and the operating system doesn't always care. It can become a tragedy of the commons. The same is true for browser tabs and their relationship with memory and storage. They all throttle this to some extent, but issues still end up being the end-user's problem to deal with.

Just wondering why this is and any thoughts on where things might go in the future.
My frustrations with Python
Tags: python
Published: 2018-03-09 10:25:35

---
title: My frustrations with Python
published: true
description: 
tags: python
---
![](https://thepracticaldev.s3.amazonaws.com/i/ayp5cyj0t26wluuuvjlu.gif)

I have been coding using Python for almost 2 weeks now and I think I have a good handle on the basic stuff, i.e the basic syntax, declaring variables, printing them, playing around with the lists, dictionaries and that kind of stuff, pretty basic.

Now I am pretty good at PHP and by that what I mean is that PHP is the language I know better than other languages and that I use for most of my work, but due to it's popularity in various Dev forums and also due to my curiosity as a developer I came to the conclusion that I would be better off knowing some Python and if it grows on me, I could actually start doing some projects with it.

So when I set up the environment and was ready to start my python coding adventure, when I had obtained sufficient understanding of the language to now start doing some database scripting tests i.e.. connecting to the DB, querying the DB and that kind of stuff, I ran into some errors, and long story short those errors had to do with the mysql-connector module that I had imported in my script vis-a-vis the version of Python in my system (I run Python3.6 on Ubuntu). The most stable release as I found out is Python2.7 and is actually the default Python environment in my OS, so when I run my little DB connecting script, it runs perfectly.

I hopped back to the online forums to find a work-around for my situation and apparently I would have had an easier time just using Python2.7 in my DB test. The dilemma is that I actually want to write Python in its most progressive version which right now is 3.6, probably 3.7. It's like I'm stuck in ver 2.7 for now, and I'm not so sure about that.

Comparing PHP to Python where the most fundamental code is really the same (at least as far as DB connection is concerned for me), I cannot help but be frustrated by all this, if anyone out there knows some good starting points for me, please feel free to share your pointers.

Thanks. :)

#Python #Frustrations #Backend #Scripting
Why the most visited websites don't have animations?
Tags: discuss, animations, transitions
Published: 2018-03-09 19:34:06

---
title: Why the most visited websites don't have animations?
published: true
tags: discuss, animations, transitions
---
If we check the most famous websites such as Facebook, Twitter, Google, Youtube and so on, we can notice the lack of transitions and animations, with few exceptions (e.g. the facebook reactions).
Transitions in dropdown menus or in popup openings can be found in almost all amateur websites, so I wonder why not in the most famous. Should we worry? Are there drawbacks that I'm ignoring?
Feathersjs background hooks
Tags: javascript, node, feathersjs
Published: 2018-03-09 18:17:15

---
title: Feathersjs background hooks
published: true
description: 
tags: javascript, nodejs, feathersjs
---

##### Feathersjs is an open source REST and realtime API layer for modern applications.

If you require hook(s) to run after you have responded to the client, for example with a process that is likely to take a few seconds to complete and the response of the hooks isn’t required by the actual service being called, then you can return the `context` from the hook and allow the function to be run.

{% gist https://gist.github.com/Mattchewone/97fa88b9bf05e52c3ac235f899fb6c4d %}

Running a single hook is relatively straightforward as the above hook shows. But I required to run multiple hooks in sequence, with each one depending on the previous one.
Here is where `combine from the `feathers-hooks-common` comes in handy

{% gist https://gist.github.com/Mattchewone/0931d8903a4bcdde675851a2e5a6e173 %}

The above hook shows a rather simplistic hook that will look up all records with a name property, it will add them to the params object.


{% gist https://gist.github.com/Mattchewone/4215286d23bf90fc8131f768253de229 %}


This second hook will filter out existing names so we are left with new names to create. Say we had a large amount of names to create or we had some hooks that ran on the names being created and we didn’t wish to wait for the create to finish before we responded to the client from the initial request.


{% gist https://gist.github.com/Mattchewone/297caaea9eb40c9d0a03318d3dcd88b0 %}


We can `combine` the hooks and return the `context` immediately, the hooks will run “in the background”. The response will be sent to the client whilst the hooks are still being processed by the event loop.
★ Today we hit 10 million PHP package downloads
Tags: php, opensource
Published: 2020-01-02 22:59:28

---
title: ★ Today we hit 10 million PHP package downloads
published: true
date: 2018-03-09 17:33:36 UTC
tags: php, open source
canonical_url: https://freek.dev/1001-today-we-hit-10-million-php-package-downloads
---

For the past few years [Spatie](https://spatie.be/en/), the company where I work, has released many [Laravel](https://spatie.be/en/opensource/laravel) and [PHP](https://spatie.be/en/opensource/php) packages. Those packages are primarily built to be used in our own projects. We do not operate in a void. We have a community around us. They use our work. They help to make our packages better by submitting issues and opening pull requests.

Today we hit a remarkable landmark. According to Packagist the combined download count of our packages has crossed the 10 million mark. We want to celebrate this achievement and thank our contributers. We've launched a site where each contributor can lookup which contributions he or she made. You can find it here: [https://10million.spatie.be/](https://10million.spatie.be/)

[![](https://freek.dev/uploads/media/10m/website.png)](https://10million.spatie.be)

What's even more amazing is the download rate. Two weeks ago Packagist reported that our packages get downloaded 1 million times each month. That number is rising rapidly. At this pace we'll we'll hit the 20 million downloads mark by the end of this year, or early next year.

Some people have told us that our company is special. It's not. We're a 6 person company. We simply love what we do. We work a bit on open source every single day. If you want to know more about how our open source story started and how we manage things, [read this blogpost](https://freek.dev/the-story-behind-our-open-source-efforts).

On [the opensource pages](https://spatie.be/en/opensource) of our company website, you'll find lists of each PHP, Laravel and JS package we've already released. We have some very cool things in our pipeline that we can't wait to show you. To all our contributors: thank you very much, you're all awesome!
GitHub – What I've figured out.
Published: 2023-05-25 07:26:34

---
title: GitHub – What I've figured out.
published: true
date: 2017-12-08 16:00:00 UTC
tags: 
canonical_url: https://blog.afrieirham.com/github-what-ive-figured-out
---

Since I started taking Computer Science course, I have time and time again been brought up with this GitHub thing. I have realised that it is something that I need to embrace and learn, instead of avoiding it. So this is what I have figured out about GitHub, as it is for now. Enjoy reading!

# What is GitHub?

My simplest explanation is

> GitHub = Google Drive (for codes)

That is what I have used GitHub for. At least for now.

But of course, it is more than just a Cloud Storage.

![1520201797310.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1626769981955/D1BXF19S4.jpeg)

# How do I get started?

1. [Sign Up](https://github.com) for free.
2. [Download](https://desktop.github.com) the GitHub for Desktop
3. You are basically done.

# GitHub Desktop?

![1520212528210.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1626770267690/63YocSgV3.jpeg)This is the main app I use to "Push" or "Pull" my codes and create a repository on my GitHub profile.

If you have used Google Drive (Backup and Sync) app for windows, it is basically the same.

# Those fancy words. {push, pull, fork, clone, commit, etc}

On GitHub, there are some of a few terms that I have been forced to understand what it means.

- Repository (read; repo) = The main file containing all the necessary pieces of information.
- Push = Updating by uploading the codes and files into the repository.
- Pull = Updating by download the codes and files from the repository.
- Commit = Literally "commit" a change to the codes or files.

These are some of the words that I can explain using my own words because I have been dealing with it for now.

There are a lot more, but I'm still confused with them.

I have tried to "clone" and "fork" stuff. But I am still not 100% sure about it. What I think it means is;

- Clone = Download the repository without affecting the real repo.
- Fork = Copy someone else's repo and put it into your repo.

Those are some of it, again, I might be wrong because I'm trying to explain it using my own words. You can always google it yourself.

# Conclusion.

GitHub is a development platform that developers always use to organise their codes. Developers and coders can also do a collaboration on a project. GitHub makes it easy for them to work as a team, solving problems, creating apps, develop a website etc.

Bottom line, as a Software Engineering student, I will somehow face this again in the near future. It is not thought in schools, and we are expected to figure it out ourselves if we are going to pursue in this coding field.

I hope you get some values out of this, either you are trying to figure out yourself too or you are an experienced programmer.

Thanks for reading. Feel free to leave a comment.
Fluid SVGs with Vue.js
Tags: vue, javascript, webdev, svg
Published: 2018-03-09 20:00:44

---
title: Fluid SVGs with Vue.js
published: true
tags: ["vue", "javascript", "webdev", "svg"]
canonical_url: https://lobotuerto.com/blog/fluid-svgs-with-vuejs/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/89mrfsnadalqxfxp9mk0.jpg
---

I really like going for fluid SVGs when doing data visualization.

Fluid SVGs are the ones that can extend on the horizontal axis as far as the _parent_ allows it. They preserve their aspect ratio, growing and shrinking accordingly to adjust themselves if their size ever changes.

The trick lies in how you define the `<svg>` element, specially its `viewBox` attribute.  
Also, don’t define a `height` or `width` on it.

* * *

Here is a single file component in **Vue.js** that will behave exactly like that.  
Let’s name it `src/components/FluidSvg.vue`:

```html
<template>
  <div>

    <svg :viewBox="viewBoxString">
      <rect
        class="my-square"
        :x="rect.x"
        :y="rect.y"
        :width="rect.width"
        :height="rect.height"
      ></rect>
    </svg>

  </div>
</template>

<script>
export default {
  name: 'FluidSvg',

  data () {
    return {
      svg: {
        width: 1000,
        height: 1000
      },
      rect: {
        x: 100,
        y: 100,
        width: 300,
        height: 300
      }
    }
  },

  computed: {
    viewBoxString () {
      return `0 0 ${this.svg.width} ${this.svg.height}`
    }
  }
}
</script>

<style>
svg {
  background-color: antiquewhite;
  border: 2px solid black;
}

.my-square {
  fill: white;
  stroke: red;
  stroke-width: 2;
}
</style>
```

Now, use it inside some other component like this:

```html
<template>
  <div>
    <div class="example-1">
      <fluid-svg></fluid-svg>
    </div>

    <div class="example-2">
      <fluid-svg></fluid-svg>
    </div>

    <div class="example-3">
      <fluid-svg></fluid-svg>
    </div>
  </div>
</template>

<script>
import FluidSvg from '@/components/FluidSvg'

export default {
  name: 'HelloWorld',
  components: { FluidSvg },
}
</script>

<style>
.example-1 {
  width: 100px;
}

.example-2 {
  width: 200px;
}

.example-3 {
  width: 400px;
}
</style>
```

This is what you’ll see:

![Fluid SVGs](https://lobotuerto.com/blog/fluid-svgs-with-vuejs/fluid-svgs.png)
AWS Well-Architected Review – Should I or not?
Tags: aws, architect
Published: 2018-03-09 14:37:36

---
title: AWS Well-Architected Review – Should I or not?
published: true
description: 
tags: aws, architect
---
AWS Well-Architected Review Framework is a document/white-paper which enables you to review and improve your cloud-based architectures and better understand the business impact of your design decisions. It essentially addresses the general design principles as well as specific best practices and guidance in five conceptual areas defined as the pillars of the Well-Architected Framework.

[Original Post](https://blog.totalcloud.io/aws-well-architected-review-should-i-or-not/)
AWS Cloud Cost Monitoring & Management Report
Tags: aws, devops, cost, discuss
Published: 2018-03-09 14:35:09

---
title: AWS Cloud Cost Monitoring & Management Report
published: true
description: A report on the present AWS cost monitoring & management practices.
tags: aws, devops, cost, discuss
---

I did this survey in January and am looking for feedback on it.

[Report](https://blog.totalcloud.io/aws-cloud-cost-monitoring-management-report/)
ターミナルのカーソル操作まとめ
Published: 2018-03-09 14:03:01

---
title: ターミナルのカーソル操作まとめ
published: true
description: 
tags: 
---

カーソルキーに頼らないようにしたい。

前後左右 [^1]

| コマンド | 内容 |
|----------|------|
| Ctrl + p | ↑    |
| Ctrl + n | ↓    |
| Ctrl + f | →    |
| Ctrl + b | ←    |

行頭・行末

| コマンド | 内容 |
|----------|------|
| Ctrl + a | 行頭に移動    |
| Ctrl + e | 行末に移動    |

単語単位

| コマンド | 内容 |
|----------|------|
| Alt + f<br>または<br>Esc, f | 前方の単語に移動    |
| Alt + b<br>または<br>Esc, b | 後方の単語に移動    |

文字の削除・ペースト

| コマンド | 内容 |
|----------|------|
| Ctrl + h<br>または<br>Backspace | 1文字削除(カーソル位置の後方が対象)    |
| Ctrl + d<br>または<br>Delete | 1文字削除(カーソル位置が対象)    |
| Ctrl + w | 単語単位で削除(カーソルが単語の途中にある場合は、その位置から後方に削除)    |
| Ctrl + k | カーソル位置から行末まで削除    |
| Ctrl + u | カーソル位置から行頭まで削除    |
| Ctrl + y | 最後に削除した内容をペースト    |

その他

| コマンド | 内容 |
|----------|------|
| Tab | 補完    |
| Ctrl + l | 画面のクリア(clearコマンドと同じ)    |
| Ctrl + r | コマンド履歴の検索    |


[^1]: カーソル操作というより、カーソルキーとの対応表
エポック秒から指定されたタイムゾーンの日付を取得する
Tags: java
Published: 2018-03-09 14:00:11

---
title: エポック秒から指定されたタイムゾーンの日付を取得する
published: true
description: 
tags: Java
---

エポック秒とタイムゾーンを指定して日付を取得する。

```java
// 2017/10/01 00:00:00 のエポック秒
Instant instant = Instant.ofEpochSecond(1506816000L);

ZonedDateTime tokyo = ZonedDateTime.ofInstant(instant, ZoneId.of("Asia/Tokyo"));
System.out.println(tokyo); // 2017-10-01T09:00+09:00[Asia/Tokyo]

ZonedDateTime utc = ZonedDateTime.ofInstant(instant, ZoneId.of("UTC"));
System.out.println(utc); // 2017-10-01T00:00Z[UTC]

ZonedDateTime london = ZonedDateTime.ofInstant(instant, ZoneId.of("Europe/London"));
System.out.println(london); // 2017-10-01T01:00+01:00[Europe/London]

ZonedDateTime la = ZonedDateTime.ofInstant(instant, ZoneId.of("America/Los_Angeles"));
System.out.println(la); // 2017-09-30T17:00-07:00[America/Los_Angeles]
```

※ ロンドンやLAはサマータイム中なので1時間の差がある
文字列連結のパフォーマンス
Tags: java
Published: 2018-03-09 13:58:24

---
title: 文字列連結のパフォーマンス
published: true
description: 
tags: Java
---

Java本格入門で紹介されていた文字列連結を試す。[^1]

|               | 10万回 | 1万回 | 5千回 | 千回 |
|---------------|-------:|------:|------:|-----:|
| StringBuilder |    7.4 |   0.7 |   0.5 |  0.1 |
| String#concat |   11.5 |   1.8 |   1.5 |  0.6 |
| ＋演算子      | 3453.5 | 106.2 |  20.7 |  2.2 |
※ 単位はミリ秒


[^1]: 実行環境によって結果は異なる