Development

Simple Local Servers

When testing many facets of the OptinMonster embed code I find myself needing a clean & quick HTML page on almost a daily basis. For most tasks throwing some code into JSFiddle will do, but testing some of our more advanced targeting rules becomes onerous, if not impossible.

In comes a great little NPM package serve from the team over at Zeit that gives you a bare-bones web server from the terminal.

So without further ado, my process:

Install the package

> npm i -g serve

Create the necessary files

I first create a new temporary directory and add an index.html file.

> mkdir om-test && cd om-test
> touch index.html

Add the HTML

I then place some boilerplate HTML in index.html along with the OptinMonster embed code.

<html>
<head><title>OptinMonster Test</title></head>
<body>
	<h1>I'm OptinMonster Testing Rick!</h1>
	<!-- OptinMonster embed code goes here -->
</body>
</html>

Start the server

Back in the terminal and in the temporary directory, start the server with server ..

Starting the server

Once you see “Serving!” your page is ready to go!

View the page

You can now see the test page at http://localhost:5000.

View the page

That’s it.

Personal

The Stillness of Hunting

In The Stand

Even when you come back empty-handed the time has not been wasted. Hunting provides us with so much more than meat.

In the stillness of hunting you have time to stop, to listen, and be present with yourself and the great outdoors.

Development

Accessing React refs in React-DnD

My team and I at OptinMonster are in the process of building a true drag & drop solution for the campaign builder. This represents the biggest improvement to the platform in over a year.

We landed on using the excellent React DnD to power the user interactions. It provides some high-level components to make use of the HTML5 Drag & Drop API which significantly speeds up our development.

One problem I’ve run into is accessing a child of the drop target element to calculate some hover interactions. The React DnD docs suggest using findDOMNode(component) but performing the DOM tree searches during the hover callback (which fires seemingly every 10ms) can bring the browser to a standstill with any significant number of nodes.

So instead I found React refs are accessible from within the React DnD callbacks with component.decoratedComponentInstance. This is a significantly faster method of pulling data out of the DOM and provides access only to the DOM elements you really need. Here’s how to make use of the refs:

/**
* Set `this.targetEl` to your desired element.
*/
class MyComponent extends React.Component {
// ...
render() {
    return (
        <div className="parent">
            <div className="child" ref={el => this.targetEl = el}>Content Here</div>
        </div>
    )
}
// ...
}

/**
* And in your drop target spec `targetEl` will be available.
*/
const dropTarget = {
  hover: (props, monitor, component) => {
    // Get the target bounding rectangle
    const hoverBoundingRect = component.decoratedComponentInstance.targetEl.getBoundingClientRect();
    // ... 
  }
}

Have any questions about React, drag & drop, or OptinMonster? Let me know on Twitter!

Development

Leave it better than you found it

The Boy Scouts and many outdoorsmen/women have a code of leaving the campsite better than you found it. That means picking up trash even if you didn’t leave it. When you finish your stay the campsite should be pristine.

That guideline can easily be translated to software development. I highly doubt you’ve opened up a class file and, besides the big issue went in to fix, you thought there was nothing you could do to improve it.

Does the formatting conform to your team’s standards?

Do all of the variable and method names make sense?

Could any part of the code be made less ambiguous?

Next time you hop into some code for a “quick-fix”, take a look around and see what you can do to leave the file better than you found it.

Personal

Make hay

There’s an old saying, “Make hay while the sun shines”. It means you should get your work done while the conditions are favorable. No distractions. Don’t even think of dilly-dallying!

You never know when the power will go out. Or you’ll get the flu. Or your kid will get sick. Or all of the above.

So make your hay, develop that app, write your comment or so your work while the sun is still shining.