pwolfert

Translation Options

1. Bake in the Strings

Summary

This would turn return <div>{t('my_translation_key')}</div>; into return <div>My Translated Text</div>; at compile time. (Well, the React transformer would also replace that JSX, but whatever.)

Pros

• Keeps the final JS bundle small

pwolfert

Keybase proof

I hereby claim:

• I am pwolfert on github.
• I am pwolfert (https://keybase.io/pwolfert) on keybase.
• I have a public key ASDziQjOvXyZJx2Xe7oKYacykT9pLvoNLpGQALAzB4y2ygo

To claim this, I am signing this object:

pwolfert

<div class="inside">
    <p>Add links to external resources below.</p>
    <label for="_post_meta[pw_resource_links][0][pw_resource_link_text]" class="piklist-field-part piklist-child-label piklist-label-position-before ">Link Text</label>
    <input type="text" id="_post_meta_pw_resource_links_0_pw_resource_link_text_0" name="_post_meta[pw_resource_links][0][pw_resource_link_text]" value="[:en]A resource link[:]" class="i18n-multilingual piklist-field-condition _post_meta_pw_resource_links_pw_resource_link_text piklist-field-element piklist-field-element-condition" data-piklist-field-group="0b3e6a9" data-piklist-field-sortable="1" data-piklist-field-addmore="1" data-piklist-field-addmore-actions="1" data-piklist-field-columns="6" />
    <label for="_post_meta[pw_resource_links][0][pw_resource_link_url]" class="piklist-field-part piklist-child-label piklist-label-position-before ">Link URL</label>
    <input type="text" id="_post_meta_pw_resource_links_0_pw_resource_link_url_0" name="_post_meta[pw_resource_li

pwolfert

<div class="inside ui-sortable">
    <p>Add links to external resources below.</p>
    <label for="_post_meta[pw_resource_links][0][pw_resource_link_text]" class="piklist-field-part piklist-child-label piklist-label-position-before ">Link Text</label>
    <input name="qtranslate-fields[_post_meta][pw_resource_links][0][pw_resource_link_text][en]" type="hidden" class="hidden" value="A resource link">
    <input name="qtranslate-fields[_post_meta][pw_resource_links][0][pw_resource_link_text][es]" type="hidden" class="hidden" value="">
    <input name="qtranslate-fields[_post_meta][pw_resource_links][0][pw_resource_link_text][qtranslate-separator]" type="hidden" class="hidden" value="[">
    <div data-piklist-field-addmore="_post_meta[pw_resource_links][0][pw_resource_link_text]" class="piklist-field-addmore-wrapper piklist-field-addmore-wrapper-full piklist-field-sortable-active ui-sortable-handle" style="float: none;">
        <div data-piklist-field-group="e6c8c13" data-piklist-field-columns="6" class="piklis

pwolfert

The Winding Number Rule

This is a really interesting algorithm that I came across while looking through the java.awt.geom.GeneralPath source code. It's used primarily to determine whether a given point is inside the shape bounded by a curve, and it's known as the winding number rule. I think the term winding rule normally refers to the non-zero winding number rule algorithm, but I'm actually going to discuss the even-odd rule and use that in impementation because it's simpler conceptually.

Basically, a point is inside the curve if its winding number is odd; if it's even, the point lies outside the curve (even if it's completely enveloped by the curve, which is important).

See Wikipedia's article on Winding Numbers. Nice explanation here too

In order to properly test the function that implemented this, I had to understand how it worked. I've included a terrible pho

pwolfert

Asynchronously Reading and Writing Data for Real-Time Rendering

I'm writing a simulation in JavaScript that needs to be updated at fixed intervals for accuracy, but then I also want a renderer whose render loop is based off of window.requestAnimationFrame. I found an awesome solution here by Noel Llopis that showed a way to integrate the simulation's update loop into the render loop while assuring fixed-interval firing of the simulation's update function. The only problem for me was that it might be a requirement later that the simulation continue to run when the browser tab is not visible, therefore making reliance on requestAnimationFrame out-of-the-question for my simulation's update loop. So I set to task coming up with a way to have two independent loops.

The problem with independent loops is that the data can't change mid-render. This is traditionally