DEV Community: Rui Teixeira

Hoverable Component with Render Props

Rui Teixeira — Sat, 01 Sep 2018 10:03:46 +0000

This week I had to implement some onHover behavior for a component but wanted to make it reusable and not have it as part of my component's state.

I have only been developing with React full time for the last 6 months so was struggling to come up with a clean way to do this.

Luckily I also started watching @kentcdodds's Advanced React Patterns where he explains how you can achieve this using render props.

So I implemented Hoverable with a render prop (children). I can then pass it my existing component which takes in a prop hovered and I can easily reuse it for other components.

Below is an example of how I implemented. You can also find it in this CodeSandbox

With Typescript I wasn't able to use children as the prop so I used a renderprop... literally! You can see that in this CodeSandbox

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Hoverable extends React.Component {
    state = { hovered: false };
    render() {
        return (
            <div
                onMouseEnter={() => this.setState({ hovered: true })}
                onMouseLeave={() => this.setState({ hovered: false })}
            >
                {this.props.children(this.state.hovered)}
            </div>
        );
    }
}

function App() {
    return (
        <Hoverable>
            {hovered => <div>{hovered ?  "🔥" : "🦄"}</div>}
        </Hoverable>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Running python from node and stream output

Rui Teixeira — Sat, 13 Jan 2018 19:52:19 +0000

My current side project is RPiCon - a desktop application to develop python for the raspberry pi.

The main feature is that you will be able to run code on your desktop/laptop before deploying to the pi taking advantage of a virtual GPIO. Since I already had decided to write it as an electron application I needed a way to run and interact with python code from nodejs.

When deciding how to run the code I had two requirements:

Being able to start and stop the python application easily
Streaming the output so that I could display it to the user in real time

The obvious choice

As part of node's out-of-the-box api they have something called Child Process which is well documented and there are plenty of tutorials for it. So I added this snippet to my app:

const { spawn } = require("child_process");

var pyProcess = spawn("python", "PATHTOFILE.py");

pyProcess.stdout.setEncoding("utf8");
pyProcess.stdout.on("data", data => {
  console.log(data);
});

pyProcess.stdout.on("end", data => {
  console.log("Token " + token + ": closing connection.");
});

This seemed to do the trick until I realized that the "data" event was not being emitted as soon as the code was printing to stdout but it was being buffered. Although buffering is probably better for some use cases I wanted an IDE-like experience where the output feels like a terminal output.

The unmaintained choice

While I'm sure there is a way to persuade the node child process to not buffer the output my research actually lead me to pty.js which addressed both my requirements. As an added bonus the code didn't have to change much:

const { spawn } = require("pty.js");

var pyProcess = spawn("python", [scriptPath]);

pyProcess.on("data", data => {
  console.log(data);
});

pyProcess.on("exit", exitCode => {
  console.log("Exiting with code " + exitCode);
});

However, when jumping from macos to linux and back I noticed that the behavior when the process completed was not consistent. More specifically the "exit" event did not seem to emitted on macos. Soon I realized that in linux the event was also not getting triggered for the right reasons - when the python code finished it would throw an error and cause the "exit" event to be kicked off.

After tinkering for a while with the lib locally and going through its github issues I was sure this was an issue with pty.js. I also realized that the project seemed to be abandoned even though there were quite a few pull requests.

Fork this!

Fortunately, a kind soul has a forked this project to NodePty and has actively maintained it. Funnily enough I found this fork because there is a pending PR on pty.js to declare it unmaintained and point to NodePty.

Everything I wanted just worked by switching the dependency and replacing the import with:

const { spawn } = require("node-pty");

It's amazing how many amazing tools are being being built and maintained by the OSS community out there. These are just a fraction of the options I had to build what I want and that's just awesome!

I won't be rolling out my own CMS

Rui Teixeira — Mon, 17 Jul 2017 13:18:13 +0000

In the past I've started blogging about my dev work a few times but haven't had much success getting to actually writing posts. In most attempts I've gotten lost in building my blogging platform because I wanted to be a "real dev".

I'd start by wanting to build my own CMS! Not by using any framework or any too-easy-to-use library. I wanted it to be hardcore and from scratch from database to the styling of the buttons. Even the thought of an IDE doing all the work for me was unacceptable! Syntax highlighting was the only luxury I could afford without becoming a fraud!

Safe to say I never built a CMS.

This is just an example of a flawed mindset that has stopped me from focusing on what I actually want to make. The idea that I have to be in the detail of everything that surrounds what I'm building is a crippling feeling.

A couple of years ago I got some advice from a senior developer that stuck with me: if you constantly teach others then you free yourself to learn more. This benefits you because you can expand, experiment and create new and more interesting projects. But it also benefits the team/community because that knowledge is not centralised and because they don't have to reinvent the wheel and can build on top of your work.

I'm not proud to say it took me a while to see this advice from the perspective of the person getting the knowledge. Even more importantly that this knowledge can come in the form of tools that abstract away complex processes. I started realising that using what others have built gives me the opportunity to be creative and build on that knowledge and hopefully then contribute back.

I've recently started playing around with React and I've happily used create-react-app to skip the project setup steps! I don't miss out on googling "best atom plugins for <Language I'm using now>"! Also, I'm a massive fan of code formatters!

There's so much cool stuff out there that is impossible to learn about everything in detail. On the other hand there's so much cool stuff out there that this is a great time to be a developer!