teleren/devto huggingface dataset:
React v16.4.0 - Pointer events
Tags: javascript, react
Published: 2018-05-31 06:09:28

---
title: React v16.4.0 - Pointer events
published: true
tags: javascript,react
canonical_url: https://www.karolisram.com/react-v16-4-0-pointer-events/
---

On May 23rd, 2018 a [new minor release v16.4.0](https://github.com/facebook/react/releases/tag/v16.4.0) of React has been launched. Overall, it's a rather uneventful release mostly concerned with fixing a variety of bugs. Quite notably though, it adds support for [pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) which has been an often requested feature for almost the entire existence of React.

Pointer events, in essence, are very similar to mouse events (mousedown, mouseup, etc.) but are hardware-agnostic and thus can handle all input devices such as a mouse, stylus or touch. This is great since it removes the need for separate implementations for each device and makes authoring for cross-device pointers easier.

## Pointer events

The API of pointer events works in the same manner as existing various event handlers. Pointer events are added as attributes to React component and are passed a callback that accepts an event. Inside the callback we process the event. The following pointer events have been added to React DOM:

- onPointerDown
- onPointerMove
- onPointerUp
- onPointerCancel
- onGotPointerCapture
- onLostPointerCapture
- onPointerEnter
- onPointerLeave
- onPointerOver
- onPointerOut

When pointer events are fired is well explained on [MDN Pointer events documentation](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) so keep it as a reference for in-depth explanation of each event. Note that at the time of this writing, pointer events are not supported by Safari.

For an example of how pointer events can be incorporated on your own application, have a look at the below example by [Philip Spiess](https://github.com/philipp-spiess). I added [PEP](https://github.com/jquery/PEP) polyfill to also make it work on Safari. Note that `onGotPointerCapture` and `onLostPointerCapture` events still do not work even with the polyfill.

Check out this [demo on Code Sandbox](https://codesandbox.io/embed/1wrqxkxl64) to get a glimpse of what's possible with new pointer events. Hint: try dragging the circle on various devices.
published: false の記事供養 (2018/05 版)
Published: 2018-05-25 07:36:24

---
title: published: false の記事供養 (2018/05 版)
published: true
description: 下書き状態で放置してしまった記事を供養する
tags: 
---

忙しさにかまけて、書き出しだけ書いてそのまま仕上がらなかった記事は Chrome のタブに開きっぱなしになっているのだけど、だいぶ日数が経って書き上がる気がしなくなってしまったのでまとめて放流して供養する。

---

# Slack から Google Home を喋らせる

3月のはじめごろに Google Home Mini を買った。スマートスピーカーがブームになってきた頃は、みんなそんなに喋るスピーカーがほしいんだろうか？と懐疑的だったが、お試しで1台買った。我が家では、喋るラジオみたいな役職に就いて便利だったので1台買い増して居間と寝室の2台構成となった。

ところで、とても無益な話になってしまうのだが、私の妻は大変なものぐさで Slack で連絡をして通知音が鳴っても「なんか言ってるんだろうなー」とおもうだけで中身を確認してくれない習性がある。当人もその自覚があり、「Google Home 買ったんだしなんか伝えたい時は Google Home が喋れば聞いてやらんこともない(意訳)」というオーダーが入ったので日曜大工をがんばることになった。

いろいろ調べたが [Google Homeの喋らせ方](https://scrapbox.io/smart-home/Google_Home%E3%81%AE%E5%96%8B%E3%82%89%E3%81%9B%E6%96%B9) に書かれているように Google Home と同じネットワークの中に何らかの司令塔がないと喋れないようだった。

そこで、随分長らく買いそびれていた Raspberry Pi を買った。これもざざっと調べてスイッチサイエンスさんのスターターキット( https://www.switch-science.com/catalog/3559/ )を買った。ちゃちゃっと組み立てて刺すだけで Linux が立ち上がって少し感動した。ただ、我が家は HDMI のディスプレイを置いている位置には使える LAN ケーブルがなくて、運用の際には別の位置に置いて有線で使いたかったので、最初のセットアップを無線でやって ssh でログインできるところまでやって、勢いで有線で切り替える少々トリッキーなセットアップをした。祈りながら ssh がつながった時も少し感動した。

ささっと Node.js をインストールして、前掲の記事で紹介されていた https://github.com/noelportugal/google-home-notifier で様子を探ってみる。試しに喋らせてみると 

```
Please fix your application to use the native API of Avahi!
```

というような WARN が出るが、調べると https://github.com/thkl/homebridge-homematic/issues/41 なんか大変らしい。

それはそれとして、`google-home-notifier` が日本語を話してくれない問題があってコード読んだらそんなに大したことをしてなかったので、自分で再実装することにした。

https://github.com/e-jigsaw/google-home-notifier

---

ここまで書いて力尽きていた。現在我が家は Slack から Telegram に移行してしまったので、Slack のシステムは止めてしまった。

---

# Electron のアプリから TouchBar に UI をつくる

MacbookPro を新調して、TouchBar が搭載されたので何かできないかな〜とぼんやりおもってたら Electron で TouchBar を操作できる API が搭載されていることを知ったので触ってみる。Chrome Extension で特定ページで TouchBar に何らかを出して便利になったりすると面白そう。

https://github.com/electron/electron/blob/master/docs/api/touch-bar.md

この辺の Doc を読みつつ。

```js
// ...
const touchBar = new TouchBar([
  new TouchBarLabel({
    label: 'test'
  })
])
// ...
mainWindow.setTouchBar(touchBar)
// ...
```

こんな感じで書くだけで Label が表示できた。

```js
  new TouchBarButton({
    label: '➡️',
    click: () => {
      console.log('yo')
    }
  })
```

これで `yo yo` できるボタンが作れた。

```js

  new TouchBarScrubber({
    items: [{
      label: 'foo'
    }, {
      label: 'bar'
    }],
    select: index => console.log(index),
    showArrowButtons: true,
    selectedStyle: 'background'
  })
```

セレクタはこんな感じ。

---

これもここで力尽きている。そもそも TouchBar まわりのドキュメントが少なくて、すぐにソース掘ったりしなきゃいけなくなったりしてまだ望みの UI というか、システムが作れていない。

Electron 製のアプリは2コぐらい並列して開発を続けているが、どちらもあまり時間が取れていなくて進捗がない...。

---

もっと下書きがあった気がしたんだけど、dev.to で下書いていたのはこの2本だった。
もっと継続的にアウトプットをデリバリーしていきたい...。
What makes a good conference experience? I'm going to PHP[TEK] next week in Atlanta!
Tags: php, conferences, discuss
Published: 2018-05-25 07:00:46

---
title: What makes a good conference experience? I'm going to PHP[TEK] next week in Atlanta!
published: true
description: A quick glance into the question what makes a conference good without the answer.
tags: PHP, Conferences, discuss
---

So, next week I'm going to [PHP[TEK] 2018](https://tek.phparch.com/). I've only been to one tech(nical) conference before, and I want to make the most out of this opportunity. 

Last November I went to Nodevember, and I really enjoyed it. However, I do think that I tried to be at everything that I possibly could, and I was so exhausted because of it. Is it just best to be tired, and try to make absolutely every event? Do I need to just drink more coffee? You tell me. 

I would love if some interviewed people at conferences and asked them about their experience and what they generally like/dislike. I've thought about trying to do this myself, but I also don't want to make every conversation I have an interview. 

Anyways, I know very little about PHP, but I'm beyond thrilled to go to this conference. I'll be attending every day of it, from Tuesday - Friday. I also snagged a ticket to the Grumpy Programmer's Guide to Unit Testing training day, which is on Tuesday.

So, what do y'all think? What makes a good conference experience? If I were to try to interview people, what should I ask them? I would totally read up on attendees expereinces of conferences and general opinion.
Friday Blast #39
Tags: fridayblast, links, post
Published: 2019-01-20 15:25:34

---
title: Friday Blast #39
published: true
tags: friday_blast,links,post
canonical_url: https://horia141.com/friday-blast-39.html
series: "Friday Blast"
---

I’ve compiled a bunch of links of the multi-repo vs mono-repo choice. It’s been a hot topic of debate at work.

[Advantages of monorepos (2015)](https://danluu.com/monorepo/) - Dan Luu on why a bunch of large companies use monorepos and a bit on the tooling for them.

[Repo style wars - monorepo vs multirepo (2017)](http://www.gigamonkeys.com/mono-vs-multi/) - covers a bit of the pros and cons of each method. Also has a list of monorepo tools.

[Monorepos in git (2015)](https://developer.atlassian.com/blog/2015/10/monorepos-in-git/) - a piece from Atlassian. Decidedly against the idea, mostly because the tool won’t scale. Though in 3 years, things could have changed in git-land.

[Monorepos in the wild (2017)](https://medium.com/@maoberlehner/monorepos-in-the-wild-33c6eb246cb9) - again pros and cons, examples of Google and Facebook and a bunch of tooling. A good read.
Advice on getting first clients for an outsourcing dev shop in the Philippines
Tags: outsourcing, devshop, discuss
Published: 2018-05-25 04:10:23

---
title: Advice on getting first clients for an outsourcing dev shop in the Philippines
published: true
description: 
tags: outsourcing, devshop, discuss
---

Hi everyone, we are planning to open a dev shop in the Philippines. I have a few friends that are available for gigs, though we're also training an intern to become our first employee right now as the primary first employee. 

Our goal is to get our first small projects in the next weeks, small and simple enough so that the intern can do them with my help and supervision, whereas I keep on focusing on products we're building for longer-term. 

I'm sure others have done something like this before. We want to focus on building web apps via fullstack JS. 

How did you get your first clients? Do you recommend to just go with upwork/freelancer, etc., actually run some ads, try to ask friends if they know someone, etc? 

What worked for you to get started? Thanks :)
What is not right in this code? Post your solution.
Tags: challenge, node, javascript
Published: 2018-05-25 03:41:23

---
title: What is not right in this code? Post your solution.
published: true
description: Try to figure out what is wrong in this code.
tags: challenge, node, javascript
---
```js
const fs = require("fs");
const { promisify } = require("util");

const cache = new Map();

cache.set("file1", "data of file 1...");
cache.set("file2", "data of file 2...");

const readFilePromise = promisify(fs.readFile);

// What is wrong in this function?

const getFileData = (fileName, callback) => {
    if (cache.has(fileName)) return callback(null, cache.get(fileName));
    return readFilePromise(fileName)
        .then(data => {
            cache.set(fileName, data);
            return callback(null, data);
        }).catch(err => callback(err));
};
```
A real-time developers' board to keep up with tech articles on the web.
Tags: pushercontest
Published: 2018-05-25 00:38:53

---
title: A real-time developers' board to keep up with tech articles on the web.
published: true
description: A real-time notice board where developers post useful tech and programming articles they find all around the web. Articles are categorized according to channels so that developers can focus on the type of content they are interested in
tags: pushercontest
---

# What I built
![front page of app](https://thepracticaldev.s3.amazonaws.com/i/upxkyrjkz58s79aqwn55.PNG)

A platform where developers can post articles they find useful from around the web and others can see these articles and as well glean the available knowledge. It is updated in real-time courtesy of the Pusher channels API.

## Demo Link

https://pusher-comp-dev.herokuapp.com

## Link to Code

https://github.com/ChukwuEmekaAjah/pusher

# How I built it (what's the stack? did I run into issues or discover something new along the way?)

I used NodeJS/ExpressJS for the back-end stack. jQuery and materializecss was used for the front-end code. Pusher channels API for both client and server were also included.
I hosted the app on Heroku.

# Additional Resources/Info 
The app has features that update in real-time courtesy of the Pusher channels API. These features are the newly added channels, articles, articles liked, articles visited. This hack provides a framework that would allow users of the platform to see new as well as trending articles in real time.
The beauty of real-time communication and the developer board created would be of very much importance to fellow developers in their journey to becoming master software craftsmen leveraging the scattered publicly available knowledge on the world-wide web.
[Entry] Instagram clone
Tags: pushercontest, rubyrails, instagram, pusher
Published: 2018-05-24 23:45:43

---
title: [Entry] Instagram clone
published: true
description: An Instagram clone app/hack submitted to the first-ever DEV Community contest. 
tags: pushercontest, ruby/rails, Instagram, Pusher
---

# What I built
Here's a link to a video on Google Drive: https://drive.google.com/file/d/1q9rITDg4XdbAoCbNTGmzkDWNTHXf6Vpr/view?usp=sharing

I built an Instagram clone. You can upload pictures and others can view them in realtime. You can also heart pictures. The Instagram clone uses Pusher to update the pictures and likes in realtime

## Demo Link

https://pushergram.herokuapp.com/
The app is responsive and can be viewed on mobile and desktop devices.

## Link to Code

https://github.com/9jaswag/instaclone

# How I built it (what's the stack? did I run into issues or discover something new along the way?)

#### Stack
- Ruby on Rails
- Pusher
- Devise
- Bootstrap
- Carrierwave
- Heroku for hosting
- AWS for holding the images

I built this app in 4 hours 😴 😪. I built it using Ruby on Rails and handled user authentication with Devise.

#### Issues
The two issues I faced while building this app were handling image uploads and updating both likes and new posts in realtime.

After different tries with the image upload, I settled for Paperclip and it was all smooth sailing until I deployed to Heroku and couldn't find the images uploaded after 1 minute of uploading them and after minutes of Googling, I found out that Heroku does not store images.
I ended up using Carrierwave for image upload since it integrated well with AWS.

When it came to updating image likes in realtime, I had to find a way to identify the image in the DOM whose likes was to be updated. To solve this, I used `data attributes` to locate the posts via their ids and update their likes.

# Additional Resources/Info 

-[Carrierwave](https://github.com/carrierwaveuploader/carrierwave) and [Devise](https://github.com/plataformatec/devise) are life savers. I was able to handle user authentication and images uploads easily with them.
-Pusher makes implementing realtime features as easy as ABC 

*Update*: Here's a post on how I built the app:
{% link https://dev.to/troy34/build-an-instagram-clone-with-ruby-and-pusher-54ik %}
EGG: Ethereum Guessing Game
Tags: pushercontest, game
Published: 2018-05-24 22:41:53

---
title: EGG: Ethereum Guessing Game
published: true
description: An app/hack submitted to the first-ever DEV Community contest.
tags: pushercontest,game
---

# What I built

🥚 EGG: The Ethereum Guessing Game! Can you see the future? Then you'll win mad internet fame by playing EGG. Guess what you think the price of Ethereum will be before the round ends and whoever guesses closest wins the round!

*Now for the marketing version:*

An innovative real-time e-sports guessing game that leverages the Ethereum decentralized platform empowering players to deliver best-of-breed analysis of future market trades! (*ICO coming soon*)

## Demo Link

https://etherguess.herokuapp.com/

## Link to Code

I split up the back/frontend so there are 2 repos:
- Backend: https://github.com/dennyferra/PusherContest
- Frontend: https://github.com/dennyferra/PusherContestFront

# How I built it 🤓

I started out not really knowing what I wanted to build but I knew what stack I wanted to use: Node/Express, React/[MobX](https://github.com/mobxjs/mobx). I built a few MobX projects prior to this and I was interested in trying out some features of MobX that I hadn't used before. I was very limited with time so the code is quite unorganized, slapped together with duct tape and marshmallows, and likely has bugs (no tests), but I might revisit it at a later time and clean things up.

I used [Bulma CSS Framework](https://bulma.io/) for the first time. Started out with a template and overall it was pretty easy to work with. I also used some animations from [Animate.css](https://daneden.github.io/animate.css/).

I stumbled on [CodeSandbox](https://codesandbox.io) and ended up writing the frontend entirely using their online editor. It's a really nice editor, feels like VS Code, and they have support for various frameworks like React, Angular, Vue, and Preact.

Interestingly enough the easiest part of this project was using Pusher. I had a presence channel and public channel set up in no time at all. Their documentation made it pretty easy to get set up. My only issue was the auto-reloading of CodeSandbox - it ended up keeping channels open so I inadvertently hit the 100 concurrent users limit. After I realized what was going on I changed a setting in CodeSandbox to fully reload on changes and then my problems were gone.

Hosted the site on Heroku so the Dyno will time out when no users are on the site, but that's unlikely since I'm pretty sure this game will be the next Facebook 🔥 Have fun, thanks!
TANGO_Twitter-Clone
Tags: pushercontest, laravel, graphql, vue
Published: 2018-05-24 21:36:42

---
title: TANGO_Twitter-Clone
published: true
description: An app/hack submitted to the first-ever DEV Community contest. 
tags: pushercontest, laravel, GraphQl, vuejs
---
![TANGO](https://thepracticaldev.s3.amazonaws.com/i/2azfz91cp1tz5vqewk8z.png)

# What I built

A twitter like single page application (SPA) made with Vue.js, GraphQL and Pusher implemented on Laravel

## Demo Link

The project lives [HERE](http://projectpage.feedia.co)

**Demo Account**
- Email: asapabedi@gmail.com
- Password: freefall

## Link to Code

source code hosted on [GITHUB](https://github.com/asapabedi/TANGO_Twitter-clone)

# How I built it

I first built a GraphQL API using Laravel then used Vue.js, Vue router for frontend and Pusher for real-time activities.

# Additional Info 

Using Vue.js, Vuex and Pusher, I built a SPA application, I allowed the auth part to be taken care of by laravel out of box authentication, so once a user logs in it will load the single page application. Although, it is not a perfect replica of twitter but it has some of its key features. In this app a user can send tweets and replies, follow and unfollow users, all are done through pusher channels.
Write a simple but impactful script
Tags: challenge, javascript, python, programming
Published: 2018-05-24 21:29:26

---
title: Write a simple but impactful script
published: true
description: 
tags: #challenge #javascript #python #programming
---
**Basic challenge** (simple): Write a script that produces all possible 4-digit numbers (0000...9999), then put them into a random order and save the output into a text file. Make sure you include leading zeroes where necessary and make also sure that each number is on a separate line in the text file.

**Bonus challenge** (for daring programmers only): Do the basic challenge and then do the following: Call the generated file `leaked_pins.txt`, and email it to one of your co-workers. In the description of the email, say that all the PIN numbers have been leaked, and they should be cautious and check, whether their PIN is contained in the file or not.

Share your code below. If any of you tries the bonus challenge, I am happy to hear any stories :)
book review
Tags: objectoriented, java
Published: 2018-05-24 20:08:05

---
title: book review
published: true
description: new book on software design
tags: object-oriented, java
cover_image: https://thepracticaldev.s3.amazonaws.com/i/uz5719yy0iidrqx3xy4y.png
---

##How to Make Software Simpler

Here's an unorthodox, refreshing book by Stanford Professor John Ousterhout, inventor of the Tcl scripting language. The title is *A Philosophy of Software Design*, published in April 2018. 

It's a slim book, yet dense with wisdom of many years of programming. What I liked most about the book was advice that rings true, yet contradicts what some other software experts seem to recommend. Though there are code examples, mostly the brief chapters stay at a high level. 

Chapter two defines software complexity as anything related to the structure of a system which makes it hard to understand and modify the system. Our aim should be to reduce complexity. The remainder of the book drills down on this topic, with specific ideas on how we can design simpler systems.

Chapter four is especially interesting: it recommends that modules should be deep, not shallow, which is illustrated with figures. A deep module has a simple interface to the outside, and there is enough functionality in its methods to hide complexity. 

There are many other recommendations in the book, not all of which typical readers of dev.to might agree with. Yet much of it will feel familiar and thought provoking.
Ghosts of Programmers Past
Tags: programming, tools, legacy, people
Published: 2017-11-27 15:04:01

---
title: Ghosts of Programmers Past
published: true
description: Wait, I have ghosts in my computer‽
tags: programming, tools, legacy, people
---

For thousands of years, our species has been steadily building up information in ways unlike any other species known to us. It is the key to our success thus far. Information is not necessarily human-made, of course, any state of matter that is not utterly random has some information encoded in it.

It was fascinating to watch my geologist brother take a careful hacksaw to rock after rock, cutting each piece to size for the experiments, analyzing the magnetic properties and building a picture of how sediments formed layers of particles with the magnetic polarity of the earth embedded in every layer, forming a timeline. Even rocks tell stories to those who are listening!

Then I heard this story about Joe Ossanna and one of the programs that he authored back in 1970s: troff. If you haven't heard of it, it's alright, but if you're running a UNIX clone, you can try typing "troff -h" in your terminal. 

What is special about this program, is that it was built on now-arcane systems, not many know how the program works, but since it can be patched to fix its assumptions, the code continues to work mostly unchanged from what was written by Mr. Ossanna, to this date (http://troff.org/history.html).

If the command displayed some text and exited, cool - you just confirmed you too have a bunch of computer files that hold the information - the order of things that Joe Ossanna imagined, typed into a computer and shared with others.

You just summoned the ghost of Joe Ossanna!

As your tapped the keys and hit enter, code written by many brilliant minds of our species churned the bit-gears to make the magic of our generation's technology come alive.

How fascinating to realize, that not only have machines always been a part of us - we are made out of molecular machines after all, but also that we've been living as fragments of our ideas, strung together by compilers within our computers.

That seemingly mundane code you write and maintain can be your little ghost after you're gone - still around, ticking away, helping future generations get their work done... what would you make?
[Entry] Chip In App (Simulator)
Tags: pushercontest, vue, javascript, node
Published: 2018-05-24 17:06:05

---
title: [Entry] Chip In App (Simulator)
published: true
description: An app/hack submitted to the first-ever DEV Community contest. 
tags: pushercontest, vue, javascript, node
---

# What I built

I built an app that simulates a donation system. How? - First, the user sets up a goal (e.g., buy a house, buy a car, travel to Las Vegas, etc.) and then publishes it so others can contribute with some money quantity (either because they are friends or because they want to help).

*PS: There aren't real money transactions.*

## Demo Link

The app is being hosted by [now](https://zeit.co/now) at [chipin.now.sh](https://chipin.now.sh).

## Link to Code

The code is being hosted by [github](https://github.com/victoralvess/chip-in).

# How I built it

## Front-End

* Vue
* Pusher

The front-end is built using Vue. I chose it because I thought the contest was a good reason to learn new things like Vue and Pusher. Moreover, both Vue and Pusher are quite simple to work with.

## Back-End

* Express
* Passport
* Pusher

The back-end is built using Express as the framework and Passport to control the auth system.
I'm using Express for handling the requests from the client like "create a goal" and "contribute to goal" and then sync the data using Pusher.

## Database

* MongoDB

The app uses MongoDB as the database because it’s easy to work with Mongo and it doesn’t require complex configurations.

## Conclusion

Thank you for giving me that opportunity, I think I learned a lot with this contest and I can say that I'm a better person and a better developer now.
And that's it.

Bye.

PS: Don't forget to vote clicking on ❤️ and/or 🦄.