Ian Obermiller

Part time hacker, full time dad.

React Anti-Pattern: Positional Children

When designing reusable components with React, you may need to dig into the children prop, say to wrap each child in another element or change the ordering. Once you’ve done so, you may also be tempted to do different things depending on the index of the child. An example from the Facebook codebase is the <LeftRight> component, which floats one child to the left, and another to the right. Its API looks like this:

<LeftRight>
  <div>floated to the left</div>
  <div>floated to the right</div>
</LeftRight>

Instead, simplify the API of <LeftRight> and pass the two children as props instead:

<LeftRight
  left={<div>floated to the left</div>}
  right={<div>floated to the right</div>}
/>

The props-based version:

  • Is easier to implement – no mucking about with React.Children
  • Is easier to use, since the API to the component is now explicit
  • Can have better validation, like requiring the props to be of a certain type
  • Is more flexible – what if left wasn’t required?

This post was inspired by spicyj’s comment on a React issue.

Flux Panel at ReactJS Conf 2015

Last week in Menlo Park was the first ReactJS conference, hosted by Facebook. I had the honor of being on the Flux Panel with some amazing developers. Bill Fisher did an excellent job preparing us for the panel and moderating, and it is chock full of nuggets of wisdom from those of us building some of the largest React+Flux apps. Topics include Relay vs Flux, isomorphic apps, maintainability, and approaches to data fetching.

(That’s me in the coveted React t-shirt, by the way)

For more Fluxxy goodness, check out my Flux interview with Andrew Cholakian and Trenton Strong.

Side-by-side diffs for Mercurial (hg)

Ever wish for hg diff in side-by-side view? I find it much easier to scan, assuming you have the horizontal real-estate in your terminal. Here is a simple guide to setting up side-by-side diffs in Mercurial on Linux/OSX: (more…)

React and Flux Interview

Andrew Cholakian and Trenton Strong, avid users of React, asked me a few insightful questions about using Flux with React in a large app. The full transcription follows.

(more…)

Pretty printing text with even line lengths

The following demo pretty prints the entered text to the desired line width by making the lines as even as possible. The demo uses a dynamic programming algorithm to choose line breaks in such a way that the sum of the squares of the slack is minimized.

(more…)

jQuery Performance: :not() vs .not()

While doing some profiling on Socl, I noticed a particular jQuery selector that was taking an inordinate amount of time to run:

var toTranslate = this.$element.find('.translatable').not('.translated');

The purpose of the code is to find elements that can be translated, but haven’t been already. My suspicion was on the .not() addition, and lo and behold, inlining the clause into the first selector dramatically increased performance:

var toTranslate = this.$element.find('.translatable:not(.translated)');

(more…)

Highlight search terms in C#, Javascript and TypeScript

Following is a function that given a string and a search query will wrap bold tags around search terms that were found in the query:

Example:

text = “The theory of the big bang was proposed in…”
query = “Big Bang Theory”
result = “The <b>theory</b> of the <b>big</b> <b>bang</b> was proposed in…”
result as html = The theory of the big bang was proposed in….
(more…)

TypeScript Syntax Highlighting for WordPress

For my first post on TypeScript, I included many code samples, and found the Javascript highlighting to be lacking since TypeScript introduces a number of new keywords. To remedy, I’ve put together a simple plugin that adds a TypeScript brush to the SyntaxHighlighter Evolved plugin, using this excellent tutorial. Once installed, you can use the new tags to highlight your TypeScript code, either [ts][/ts] or [typescript][/typescript].

Download the "SyntaxHighlighter Evolved: TypeScript Brush" plugin

(more…)

TypeScript Highlights

Microsoft recently released a new, open source language called TypeScript. It is a strict superset of Javascript, and compiles directly to Javascript. The compiler is open source, and written in TypeScript itself. My team at Microsoft has been dogfooding TypeScript for several months now, and I thought I’d share a few of my favorite parts of the language.

(more…)

LINQ for Javascript

While evaluating the different options for bringing LINQ-like operators to JavaScript, I compiled the following list of existing libraries:

I’d love to hear about any others!

Older Posts »