teleren/devto huggingface dataset:
Making HOC with prop type inference from Recompose and Redux connector in Flow
Tags: flow, javascript, redux, react
Published: 2018-03-11 12:35:38

---
title: Making HOC with prop type inference from Recompose and Redux connector in Flow
published: true
description: 
tags: flow,javascript,redux,react
---

It seems like the type annotation for react-redux’s `connect` is not compatible with the recompose’s `HOC` type declaration. I often encountered errors when `connect` is specified in `compose` function like this:

```js
const enhance: HOC<*, Props> = compose(
  connect(),
  pure, // <-- Flow error - Component: This type is incompatible with the expected param type of Component
  withHandlers({
    ...
  })
)
```

If I removed `connect()` from parameters, the flow error disappears. Huh? But the app with this code works fine so I guess there are some bugs in the Flow-typed definitions. I don’t wanna waste time for this problem.

So I made simple utility functions to make `connect` compatible with `compose` function which yet prop type inference is working in base components. Below code is `getDispatch` function that calls `connect` with no parameters so it will simply add `dispatch` to `props` of the base component:

```js
// @flow
import { type HOC } from 'recompose'
import { connect } from 'react-redux'
import type { Dispatch } from '../types'

type CHOC<E: {}> = HOC<{ ...$Exact<E>, dispatch: Dispatch }, E>

export default function getDispatch<Enhanced: {}>(): CHOC<Enhanced> {
  return (connect(): Function)
}
```

You can use it like so:

```js
const enhance: HOC<*, Props> = compose(
  withDispatch(),
  pure,
  withHandlers({
    ...
  })
)
```

And you will get `props.dispatch`.

When you want to get store mapped to props, you can use below `connectStore` function:

```js
// @flow
import { type HOC } from 'recompose'
import { connect } from 'react-redux'
import type { Dispatch, State } from '../types'

type F<M> = (state: State) => M
type CHOC<E: {}, M> = HOC<{ ...$Exact<E>, dispatch: Dispatch, ...M }, E>

export default function connectStore<Enhanced: {}, M: *>(
  mapper: F<M>
): CHOC<Enhanced, M> {
  return (connect(mapper): Function)
}
```

It forces the type of connector function casted as recompose’s `HOC` so it will work without problem:

```js
const enhance: HOC<*, Props> = compose(
  connect(({ editingNote }) => ({ editingNote })),
  pure,
  withHandlers({
    ...
  })
)
const EnhancedComponent = enhance(props => {
  console.log(props.editingNote) // <-- type inference works!
})
```

Obviously it is just a workaround and it even may break in the future, but it simplifies my codebase and works fine for now.
The type inference in Flow is pretty great but type annotations tend to be very complicated. It reminds me of the macro hell in C/C++ 🙄
A Web Frameworks list by language
Tags: webdev, productivity, showdev
Published: 2018-03-11 11:26:57

---
title: A Web Frameworks list by language 
published: true
description:  
tags: #webdev #productivity #showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/i38ap9vloyqf2kx9ltrv.png
---

Hello folks :D, I just wanted to share with you a little tool that i created it's a simple list of web frameworks listed and grouped by category and by language ( JS , CSS , PHP , Python .. ) , you can also add your favorite framework in the list ;) 

# [Check out Frame](http://frame.graphicmade.com)
Visualize AWS Flow Logs in a Visual Environment (closed beta)
Tags: aws, network, security
Published: 2018-03-11 11:05:25

---
title: Visualize AWS Flow Logs in a Visual Environment (closed beta)
published: true
description: Sign-up for TotalCloud closed beta to visualize AWS VPC flow logs
tags: aws, network, security
---

What are you using VPC for?

[BETA](beta.totalcloud.io)
What is the best type of computer for a computer science student entering college/university?
Tags: discuss, webdev, computerscience, programming
Published: 2018-03-11 03:13:30

---
title: What is the best type of computer for a computer science student entering college/university?
published: true
description: Best computer for programming, computer science, and software engineering college students
tags: discuss, webdev, computerscience, programming
---

![Image of someone typing on computer](https://source.unsplash.com/user/miabaker/ctRgcY-lY8I)

This can be as general (Mac, Windows, Linux) or specific (SSD vs disk drive, RAM, etc.) as you like!  A good computer can make a huge difference in how productive you are when writing code, especially over a four year time period.  So what is the best computer to get?
Using JavaScript Promises for Non-Async Control Flow?
Tags: discuss, javascript
Published: 2018-03-11 01:58:59

---
title: Using JavaScript Promises for Non-Async Control Flow?
published: true
tags: discuss, javascript
---

I love functional languages like Elixir + Elm that give you a pipe syntax for control flow:

    data
    |> first_transformation
    |> second_transformation
    |> etc

It's easy to understand what this program is doing! I've been learning about how promises work in JavaScript, and they seem like a good way to mimic this kind of data-chaining, even if your functions aren't really doing anything that needs to be asynchronous:

    first_transformation(data)
    .then(second_transformation)
    .then(third_transformation)
    .catch(handle_errors_from_the_whole_chain)

The MDN docs on [Control flow and error handling](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) suggest that [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) are mostly for async/deferred operations. Is it normal to use promises merely as a mechanism for control flow and organization? Is it a horrible idea for some reason?
If you could start over from scratch, how would CSS work?
Tags: discuss, css, webdev
Published: 2018-03-11 00:46:53

---
title: If you could start over from scratch, how would CSS work?
published: true
tags: discuss, css, webdev
---

CSS has a lot of issues. Now that we have a few decades of knowledge, how would you do things differently.

And I'm talking about web styling in general, doesn't have to be "cascading stylesheets" or anything like what we currently have.
PrxPass - A reverse-proxy self-hosted solution (aka local tunnel)
Tags: showdev, go
Published: 2018-03-10 23:03:40

---
title: PrxPass - A reverse-proxy self-hosted solution (aka local tunnel)
published: true
description: PrxPass is a reverse-proxy self-hosted server that works like ngrok or localtunnel
tags: showdev, go
---

I finally passed the burnout thing and started coding different things. I've had a need for a reverse-proxy server that works like ngrok or localtunnel but self-hosted (I know localtunnel IS self-hosted but it's in JavaScript...) so I wrote my own.

The idea is simple: you simply start the `prxpass-server` on your server, then on your local machine, you start the `prxpass-client` that connects to the server and proxies every request made to `<your_id>.<hostname>` to your local web application (e.g. `localhost:4000`). 

So for example if you're working on a bot that uses webhooks (e.g. a Telegram bot), you can tell Telegram to send stuff to e.g. `mysuperduperbot.prxpass.defman.me` (you can set up custom IDs if the server instance allows that) and prxpass will proxy every request to e.g. `localhost:9000`. In your bot, you only have to listen for POST requests at `localhost:9000` in that case and you can even setup a HTTPS once LetsEncrypt rolls out their wildcard certs.

There are other ways to use prxpass, for example if you want to give someone a live demo of your web app without uploading it to the server.

prxpass is not limited to HTTP but to TCP atm (planning to add UDP proxying in the future), so in idea you can proxypass anything that works over the TCP stack. I've not tested it though.

If you have any ideas how I can improve my program - feel free to write the idea in the comments or open an issue on GitHub. If you're interested in using it (it's alpha atm) - please tell me so I'd build the binaries for you. (I didn't bother to build anything but the windows client and the linux server).

Links:

* [prxpass-server](//github.com/Defman21/prxpass-server)
* [prxpass-client](//github.com/Defman21/prxpass-client)
Did you know that Google is an Evil Monopoly?
Published: 2018-03-10 22:47:03

---
title: Did you know that Google is an Evil Monopoly?
published: true
tags: 
---
![alt text](https://thepracticaldev.s3.amazonaws.com/i/fskrj7dqep77a6l97sot.jpeg)
See: [The Problem With Google And Why You Should Care]
(http://bobonmedicaldevicesoftware.com/blog/2018/03/03/the-problem-with-google-and-why-you-should-care/)

Reading the [Medgadget article](https://www.medgadget.com/2018/03/google-serfdom-publishing-digital-age.html) was a real wakeup call for me, but I suspect that most people do not realize that Google's behavior continues to have a significant impact on innovation and online content. This has been going on for a long time but still seems like a well-kept secret.

Questions:

1. For Google employees: Did you know you work for an Evil Monopoly?
2. For everyone else: Did you **even** know that Google was an Evil Monopoly?
3. Have you ever been directly affected by this (e.g. a failed startup)?
Explain the main differences between ReactJS and AngularJS
Tags: explainlikeimfive
Published: 2018-03-10 19:39:03

---
title: Explain the main differences between ReactJS and AngularJS 
published: true
description: 
tags: #explainlikeimfive
---

I'm five years old, loves JavaScript and needs some new toys to play with. But whats the main difference?
graceful shutdown server with syg
Tags: go
Published: 2018-03-10 16:21:34

---
title: graceful shutdown server with syg
published: true
tags: go
---

*originally posted to [blob.web-apps.tech](https://blog.web-apps.tech/graceful-shutdown-with-syg)*

Using [`github.com/nasa9084/syg`](https://github.com/nasa9084/syg), you can map signal to callback function easily.(c.f. [syg: simply signal to callback mapping in Go](https://dev.to/nasa9084/syg-simply-signal-to-callback-mapping-in-go-24kf))

Now, let's implement a HTTP server which shuts down gracefully when catch SIGINT.

```
package app

import (
    "context"
    "net/http"
    "os"
    "time"
    
    "github.com/nasa9084/syg"
)

type Server struct {
    server *http.Server
    closed chan struct{}
}

func NewServer() *Server {
    http.HandleFunc("/", longlongHandler)
    return &Server{
        server: &http.Server{
            Addr: ":8080",
        },
        closed: make(chan struct{}),
    }
}

func (s *Server) Run() error {
    // os.Interrupt　= syscall.SIGINT
    cancel := syg.Listen(s.shutdown, os.Interrupt)
    defer cancel()

    err := s.server.ListenAndServe()
    <-s.closed
    return err
}

func (s *Server) shutdown(os.Signal) {
    s.Shutdown(context.Background())
    close(s.closed)
}

func longlongHandler(w http.ResponseWriter, r *http.Request) {
    // a very long process!
    time.Sleep(10 * time.Second)
    w.Write([]byte("hello"))
}
```

call from main:

```
package main

import (
    "log"
    
    "foo/bar/app" // assume the app package above is in $GOPATH/foo/bar/app
)

func main() {
    s := app.NewServer()
    if err := s.Run(); err != http.ErrServerClosed {
        log.Print(err)
    }
}
```

In main, you don't need to think goroutine, graceful shutdown, or signal listening.

Check the server is running well.

At first, build and run the server:

``` shell
$ go build main.go
$ ./main

```

Then launch one more Terminal, and send a request:

``` shell
$ curl localhost:8080
hello
```

after 10 seconds, message "hello" is returned.

Now, send request once again, type `Ctrl-C`(this means SIGINT) in the first terminal before returned the response.
The server will shut down after return the response, not suddenly.

We did it!
How to install Node.js in Manjaro Linux
Tags: tutorial, linux, node, manjaro
Published: 2018-03-10 21:11:08

---
title: How to install Node.js in Manjaro Linux
published: true
tags: ["tutorial", "linux", "node", "manjaro"]
canonical_url: https://lobotuerto.com/blog/how-to-install-nodejs-in-manjaro-linux/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ieuxvsw7gcdbeevq0kzf.png
---


***

You can check the latest updated version of this article at [lobotuerto's notes - How to install Node.js in Manjaro Linux.](https://lobotuerto.com/blog/how-to-install-nodejs-in-manjaro-linux/)

***


# Installation process

Version managers rule in dev environments.  
So we will install [Node.js](https://nodejs.org/en/) through [nvm](https://github.com/creationix/nvm).

Install the `nvm` package from the [AUR](https://wiki.archlinux.org/index.php/Arch_User_Repository):

```
pacaur -S nvm
```

Then on your terminal:

```
echo 'source /usr/share/nvm/init-nvm.sh' >> ~/.bashrc
exec $SHELL
```

To list all available versions for **Node.js** :

```
nvm ls-remote
```

Let’s install latest from the **9** series:

```
nvm install 9
node -v #v9.8.0
npm -v #5.6.0
```

Add the [Yarn](https://yarnpkg.com/en/) package manager globally:

```
npm install -g yarn
```

We need to add **Yarn’s** binary to our `$PATH` in `~/.bashrc`.  
In a terminal:

```
echo 'export PATH=$PATH:~/.yarn/bin' >> ~/.bashrc
```

If you are a [Vue.js](https://vuejs.org/) fan —and why shouldn’t you be one? :)— install [vue-cli](https://github.com/vuejs/vue-cli):

```
yarn global add vue-cli
```

# Links

- [Node.js in the ArchWiki](https://wiki.archlinux.org/index.php/Node.js)
How to enable dotnet watch in Jetbrains Raider
Tags: csharp, netcore, beginners, productivity
Published: 2018-03-10 14:01:06

---
title: How to enable dotnet watch in Jetbrains Raider
published: true
description: How to enable dotnet watch in Jetbrains Raider
tags: csharp,netcore,beginner,productivity
---

Hi guys, while working on my pet API project in C# and .NET Core I realized that I miss having the debugger 'watch' for file changes.

The standard way of doing this in .NET Core 2.0 is to setup [dotnet-watch](https://github.com/aspnet/DotNetTools/tree/rel/2.0.0/src/Microsoft.DotNet.Watcher.Tools) . It seems that starting with .NET Core 2.1 this step isn't going to be necessary, so one less step to do. 
Until then you can follow the [official tutorial](https://docs.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch) for setting up dotnet-watch.

In order to make it work in Rider, you need to do some simple steps.

1. Under Run/Debug Configurations, click the _plus_ sign and pick __Run external tool__
![Run/Debug Configurations](https://thepracticaldev.s3.amazonaws.com/i/6pyxfzo3itpf7gnj4n2o.PNG)

1. Set dotnet-watch, and make sure to set the proper _Working Directory_ macro `$ProjectFileDir$`
![External tool](https://thepracticaldev.s3.amazonaws.com/i/i5l5v67nsk743bbjdnzu.PNG)

__Update__
Since there's no implicit way of setting up the ASPNETCORE_ENVIRONMENT in Rider before running the command, here's a quick way of adding a parameter to your program to enable the switch.

Modify _Program.cs_
```csharp
        public static IWebHost BuildWebHost(string[] args)
        {
            var config = new ConfigurationBuilder().AddCommandLine(args).Build();
            var enviroment = config["environment"] ?? "Development";
            
            return WebHost.CreateDefaultBuilder(args)
                          .UseEnvironment(enviroment)
                          .UseStartup<Startup>()
                          .Build();
        }
```
Now you can run ```dotnet watch run --environment="Development"```  (or any other environment variable) and have the specific environment setup depending on your run configuration.
Introducing the "Let's Build Chuck Norris!" Project
Tags: chucknorris, cpp
Published: 2018-03-10 15:34:37

---
title: Introducing the "Let's Build Chuck Norris!" Project
published: true
tags: [chucknorris, cpp]
series: Let's Build Chuck Norris!
canonical_url: https://dmerej.info/blog/post/introducing-the-chuck-norris-project/
---

_Originally published on [my blog](https://dmerej.info/blog/post/introducing-the-chuck-norris-project/)._

# The Chuck Norris library

The Chuck Norris library is written in C++ and contains a class able to give you random Chuck Norris facts when the `getFact()` method is called:


Here’s how to use it:

```cpp
#include <ChuckNorris.hpp>

ChuckNorris chuckNorris;
std::string fact = chuckNorris.getFact();
```

You will find all the source code on [GitHub](https://github.com/dmerejkowsky/chucknorris).

# Let's build Chuck Norris!

“Let’s Build Chuck Norris!” project is a series of blog posts aiming at exploring various topics about C++ and build systems:

Here are all of them, in chronological order. Enjoy!

1. [Using CMake and Ninja](https://dmerej.info/blog/post/chuck-norris-part-1-cmake-ninja/)
2. [Managing third-party dependencies with conan](https://dmerej.info/blog/post/chuck-norris-part-2-sqlite-conan/)
3. [Exposing a C API on top of C++ code](https://dmerej.info/blog/post/chuck-norris-part-3-a-c-wrapper/)
4. [Using Python with ctypes](https://dmerej.info/blog/post/chuck-norris-part-4-python-ctypes/)
5. [Using cffi to build a Python extension](https://dmerej.info/blog/post/chuck-norris-part-5-python-cffi/)
6. [Cross compiling for Android](https://dmerej.info/blog/post/chuck-norris-part-6-android-cross-compilation/)
7. [Android and JNA](https://dmerej.info/blog/post/chuck-norris-part-7-android-jna/)
8. [Using C++ in an iOS application](https://dmerej.info/blog/post/chuck-norris-part-8-ios/)
Electronic friendly Graffiti
Tags: graffiti, street, art, electronic
Published: 2018-03-10 11:19:01

---
title: Electronic friendly Graffiti
published: true
description: how I created conductive spray paint
tags: graffiti, street, art, electronic
---

Not long ago I explained to my young pupil how to make conductive drawing with pencil or pure graphite. Anyway, my favorite local art shop announced they brought graphite powder on their website. Graphite powder is the most pure form of -wonderfully conducting- graphite, and easily mixable so I run and bought a bottle of powder. On my way I also bought a travel mini-spray and acrylic black paint.

Once at home, I took out the voltimeter and started mixing. first, some graphite powder and water, painted a bit and measured. ¡Bingo! I could get a bit of potential difference. Although, it wasn't very much and the painting wasn't very strong. I added a bit of acrylic paint... it looked very nice, again painted and measured, still working, added a bit of extra graphite for better conducting, ¡Perfect! 
![](https://thepracticaldev.s3.amazonaws.com/i/klgwkronjuyclwookwkr.jpg)
The measure seemed pretty nice, for so I tried out putting a led over the painting and using the resistance+5V wire in the other edge of the brushstroke. ¡Bingo! it lights. 
![](https://thepracticaldev.s3.amazonaws.com/i/wixueyk7hnvtmkki79tw.jpg)
Not as strong as if the were directly connected, but this is because the paint itself creates some resistance, as not every component is equally conductive. The better option here is to use a resistance with lower Ohms, such as 100 ohms instead of 220 (which I used). or also design the painting pattern to be a parallel resistance instead of a continuous.

Continuous:
```

{LED}-[---brushstroke---]-(resistance)-5V 
```

Parallel:
```

        _[---brushstroke---] 
       /                    \
{LED}-<                      >--5V
        \_(resistance)------/
```

Anyway once I got the recipe, I created a bit more to fit in a mini-spray can, and added a Molotow (one of my favorite graffiti brands) mini-ball inside for mixing when shaking (the tiny ball that makes a sound when you shake a paint can). Decorated the spray with a toxic-green lightning and its done, a conductive spray can. 

![](https://thepracticaldev.s3.amazonaws.com/i/cvbqj7smemw2rc2v0iw7.jpg)
![](https://thepracticaldev.s3.amazonaws.com/i/efdikj2q4vegwzwak3km.jpg)
tools:title=”RemoteSampleData”
Tags: android, androiddevelopment, androidlayout
Published: 2019-03-25 21:18:06

---
title: tools:title=”RemoteSampleData”
published: true
tags: android,androiddevelopment,androidlayout
canonical_url: https://vladimirj.dev/remote-sample-data/
---

What I’ve learned from my previous [article](https://dev.to/vladimirwrites/toolstitlelayoutpreview-5ae9) is that the best way to gain new knowledge about a certain topic is to write about it. When I first wrote the article, I had no idea that you can create custom sampledata for your Android project. (If you don’t have a clue what `sampledata` is, please read [tools:title=”LayoutPreview”](https://dev.to/vladimirwrites/toolstitlelayoutpreview-5ae9)) And then someone sent me [this](https://blog.stylingandroid.com/tool-time-part-2/).

It sounded like a really cool feature, so I made the list of my favorite characters from Lord of the Rings, used it as `sampledata`, and got this glorious layout preview.

![LotR](https://cdn-images-1.medium.com/max/1600/1*cZHVJzVAvIfQMI47DEZo1A.png)

Later on, I wanted to include it in my other projects, but the only option that I had was to copy/paste the `sampledata` from one project to another, and that didn’t make any sense. Then I did what every (lazy) developer would do, asked a [question on StackOverflow](https://stackoverflow.com/questions/48874434/use-sample-data-directory-from-a-library).

After 10 views and no answer in sight, I’ve decided to sacrifice a bit of my reputation and start a bounty. And it worked. I got my answer, which I will share with you.

To use `sampledata` between multiple projects you first have to host it and then have a Gradle script which will download it into your project’s `sampledata` folder. This is the code which does that:

{% gist https://gist.github.com/VladimirWrites/536060a2edddb6d6436f80bce82b7f8e %}{% gist https://gist.github.com/VladimirWrites/b7bb9fdedebf535f4d9ee78ca2ca39b8 %}

The first script will delete `sampledata` once you do a clean build, and the second one will create `sampledata` folder in case it doesn’t exist, and then download sample files into it. It works like a charm and from now on you can go crazy with your layout previews. I know that from now on I will never again use `@tools:sample/lorem/random`.

![Developers developers](https://cdn-images-1.medium.com/max/2000/1*mRs5qWCaRL0rpaflBjwfZQ.png)

This code can be found in [GitHub repo](https://github.com/VladimirWrites/tools-sample).

I’ve also added some sample data and will keep adding more. If you notice that something is missing or could be improved, feel free to contribute. This could be a great opportunity for novice developers to make their first contribution 😉.

_Thanks for reading! If you enjoyed this story, please click the ❤️ button and share to help others find it! Feel free to leave a comment 💬 below.
Have feedback? Let’s be friends [on Twitter](https://twitter.com/VladimirWrites)._
Release: Free ebook about "Serverless"
Tags: serverless
Published: 2020-04-19 18:17:22

---
title: Release: Free ebook about "Serverless"
date: 2018-03-10 09:22:58 UTC
published: true
tags: serverless
canonical_url: https://d.nekoruri.jp/entry/2018/03/10/serverless-en
---

I published free "Serverless book" English version (translated by Google translator).   
You can retrieve PDF from Gumroad with $0 / ￥0!

=> [https://gum.co/serverless-en](https://gum.co/serverless-en)

[in Japanese]  
というわけで、「サーバーレスを支える技術」をGoogle翻訳に突っ込んだものを無料リリースしました。  
翻訳チェックなど一切していないものです。
Looking for a Cloud service or product to import data from REST APIs
Tags: discuss
Published: 2018-03-10 03:19:39

---
title: Looking for a Cloud service or product to import data from REST APIs
published: true
tags: discuss
---

What service or product (preferably in the cloud) that you would recommend for importing data from REST APIs and sending it into a storage? If possible, this service or product should be user-friendly and configurable with minimum coding?

In a perfect world, I image an admin console where you can provide API's URL, authentication credentials, data schema, destination information (i.e MS SQL, MongoDB, or another REST API). You would be able to schedule the data import or set an event to trigger the import.