Bicycle Gear Calculator

I am a big fan of Sheldon Brown’s gear calculator page. Sheldon Brown’s gear calculator script allows you to calculate gearing ratios, gear-inches, and speed for given cadences. After using it over the course of several years now, I found myself wanting something that would allow me to adjust the values dynamically and compare multiple different setups at once. I threw together a little app to scratch my itch using Angular.js. Hope this is useful to someone else out there.

Continue reading

How to replace a cracked Chromebook XE303C12 screen for $44

I got a Chromebook a while back. I believe that for at least the mid-term future, the web browser is the de-facto common platform for software, and at $250, the Chromebook is a lightweight, reasonably performant, and affordable price of entry into the rich world of web applications.

Unfortunately I think there were some corners cut in terms of durability to reach the $250 price point. It worked great, fast enough for my needs and very portable, but the screen cracked one day seemingly at random while I was out of the room. There’s not much of a market for Chromebooks with cracked screens, and according to Internet forums the “tech support” is something of a racket designed to fleece customers. I looked into DIY repair options and it turns out the fix is pretty cheap / simple to do at home. It literally took me five minutes.

What you’ll need:

Procedure:

This quick video on Youtube from Dennis Padiernos illustrates the procedure pretty well.

  • Completely power off the computer.
  • Use your fingernail to remove the screen cover, starting from the inside.
    • Save the bottom of the cover for last – this part is held on by a sticky tape. You will have to be persistent and apply steady force. Start from the middle of the bottom and work your way out. The parts are all plastic so don’t use too much force.
  • Remove the screws holding the screen in place. There are only four screws, two on each side of the screen.
  • Lay the screen flat on the keyboard. Locate the cable running from the computer to the screen and disconnect by pulling on the little yellow plastic “handle” on the side closest to you. Be gentle because the metal on the connector is very soft and easy to bend.
  • Place the old screen aside and maneuver the new screen in place, face-down on the keyboard. Align the cable with the screen connector socket, using the yellow plastic handle to maneuver it. It’s hard to see the tiny connector, but the cable side is male and the screen side is female. Pull the two sides together once they are aligned; it should snap it into place.
  • Hold the new screen in place against the computer and reconnect using the four screws. You should be able to turn on the computer now and verify the screen functions.
  • Press the screen cover in place.

That’s it! I wish you and your new screen a long and happy life.

Five JSON REST API Link Formats Compared

In this post I intend to compare five JSON REST API data formats which implement some form of resource linking.

Three Sentence Summary (TLDR)
Web services may benefit from providing links within resource representations, but no clear consensus exists for what these links should contain. By comparing several different formats for embedding links in REST APIs, we can infer some trends which may inform us when designing or consuming REST APIs. If we generalize based on the comparison of five different readily available REST API Link formats, we may conclude that service vendors who provide links are likely to only consistently support target URLs and relation types, while other features such as embedded resource metadata, documentation, and deprecation status are less likely to be supported consistently by vendors.

Continue reading

HTML 5 Placeholder + Autofocus: Cross-browser support for IE

Alternate title: Placeholding is Hard

Recently I implemented a user interface with a search field that used both autofocus and placeholder attributes. I learned that different browsers implement Placeholder attributes differently. The official spec says the placeholder text should disappear on focus, but most modern browsers (Firefox, Chrome, Safari) implement an “unofficial convention”, where the placeholder text remains on focus, until the user begins entering text.

Here’s the catch: IE 10 doesn’t follow that unofficial convention. This is one case where the IE team actually follows the specs better than the other browser vendors do, but the browser still looks like the odd one out since it is the only commonly used browser that implements the feature that way.

Not all developers can agree whether the official spec (clear-on-focus) or the unofficial convention (clear-on-entry) is better, and some people have pretty strong opinions either way. I can see merits to both behaviors, but I don’t take a side either way. The design I had to implement combined both autofocus and a placeholder, however, so I had to override IE 10’s native implementation and backport the behavior to earlier pre-HTML5 versions of IE as well.

It turns out that while there are about a dozen plugins which backport placeholder support to older browsers, none of them did everything I needed them to do:

  • Support for unofficial clear-on-entry behavior
  • Option to override native implementation
  • Support for IE 9
  • DOM compatible with HTML 5 implementation (text as input value, not as absolutely positioned elements)

After evaluating every one of the plugins in Modernizr’s list (linked above), I had to roll up my sleeves and write my own. Nah, that’s too hard, actually I forked Shane Carr’s excellent Placeholdr.js project and modified it just enough to support the unofficial clear-on-entry behavior (Placeholdr originally only supported the official behavior) and to optionally override native implementations.

My forked project is available at https://github.com/SamPlacette/placeholdr if anyone would like to use it. It does itch a unique scratch, so hopefully someone else out there will find it helpful. Eventually I would like to submit a pull request back to the Placeholdr master branch, but first I need to figure out a way to restore backward compatibility with the Placeholdr project.

Hope this helps you out. I’d be curious to hear if you have had to deal with any other unusual problems with cross-browser support or if you have some ideas on what I could do to improve my fork of the Placeholdr project.

Node.js net module server listen socket EPERM error

Today I was playing around with creating a REPL server in Node.js using a local socket (see the Node.js REPLify module if that sounds interesting to you). I got stuck on a permission error when trying to create the REPL server. I eventually tracked it down to within the module, where it executes the “listen” method on a net server with a socket file location param. The weird part was that it failed with the same error even after I opened up the directory permissions to 777, and it even failed when I ran the script as superuser. Another weird behavior was that it worked just fine if I modified the module to listen on a network port instead of on a socket.

That last behavior led me to figure out the problem eventually. Apparently Node.js cannot create sockets on a shared directory in a virtual machine. When I changed the socket to a different directory, it seemed to work just fine with no permission errors.

I wanted to share this information because I couldn’t find it mentioned anywhere on the Internet when I was troubleshooting my problem. Hopefully this helps someone out there.

How to Quantify Software Developer Experience

What’s the hardest question you get asked in a job interview for a software developer position? My beautiful wife can attest that I am self-deprecating to a fault in interviews, but in particular, I tend to get hung up when people ask me to rate myself at a certain skill, e.g., “How good are you at estimation, from 1-10?“. It’s a tough question because anything above 7 implies I think I am some sort of recognized expert, while anything below could be interpreted the other way, as if I had merely read a blog post on the subject and would like to try it some day. The answer is important, because interviewers can use this question to detect resume embellishments and overconfidence, two dangerous traits in a candidate.

I recently had an opportunity to examine the problem of evaluating software developers’ experience, and in my research I found a great answer on StackExchange.com that really resonated with me. I paraphrased and adapted the following categories of software developer experience from the original post by Chuck Conway, which may be referenced at http://programmers.stackexchange.com/a/173107. These categories of experience are also loosely informed by the Programmer Competency Matrix by Sijin Joseph. The following labels are intended to be granular enough to apply to individual skills, tools, languages, etc. in isolation, but may also be applied in aggregate to a developer’s set of primary skills to get an idea of their overall experience.

Without further ado, I submit categories of software developer experience, on a scale of 1 to 10:

Mastery, 7.5 – 10: The developer is an expert in the field, capable of advancing the state of the art and speaking with authority on the subject. The developer possesses deep knowledge of library / language source code and design decisions behind it. The developer may have contributed to the development of the subject and/or may have written on the subject at length.

Proficiency, 5 – 7.5: The developer has multiple projects’ worth of professional experience in the subject and has in-depth first-hand knowledge in design, implementation, and support. The developer knows best practices and understands the motivating factors behind them. The developer is aware of historical, current and future developments in the field. The developer has some knowledge of the underlying implementation details and how it can affect usage. The developer is most likely used to being the most experienced person in their team / organization in this subject, and is comfortable teaching and supervising others in its use and application.

Competency, 2.5 – 5: The developer has experience practicing the subject independently in a professional role. The developer has some awareness of best practices and guiding design principles, and can apply them correctly in most situations. The developer can independently execute support and implementation tasks, but may benefit from some sort of review / supervision process for new design work. The developer is probably most comfortable developing individual components in isolation.

Foundational Ability, 1 – 2.5: The developer has some basic exposure to the subject, either through academic projects or through limited professional work. The developer is not yet skilled at applying the solution to a variety of problems. The developer is not aware of best practices and may contribute to technical debt if not supervised. This developer has the potential to grow and become competent, but needs both oversight and guidance in order to get there.

Skip shopping cart in WooCommerce

My beautiful wife put together a great WordPress blog, and installed the WooCommerce plugin in order to sell some items on her site. However, she didn’t like the conversion flow for end users; users had to add an item to the cart, confirm the quantities and subtotal, then enter payment information. Because my wife only had one SKU (product), and customers could only buy one at a time, she wanted to skip the shopping cart verification step, and allow customers to go straight from the product page to entering payment information after hitting a big red button.

Seems like a reasonable request. However, after much googling, I determined there was no out-of-the-box setting to enable users to skip the cart page after adding an item to the cart. Furthermore, although the WooCommerce plugin app does expose some AJAX endpoints, those endpoints do not provide the ability to reliably add one and only item of a given product to a cart before redirecting a user to the checkout page.

Luckily my beautiful wife is married to an ace programmer. It’s been several years since I’ve done any coding in PHP, but I went ahead and threw down a little modification for the WooCommerce plugin to enable her special use case. I’m releasing the code here into the public domain.

/** * Set cart item quantity action *
 * Only works for simple products (with integer IDs, no colors etc) *
 * @access public
 * @return void */
function woocommerce_set_cart_qty_action() { 
  global $woocommerce;
  foreach ($_REQUEST as $key => $quantity) {
    // only allow integer quantities
    if (! is_numeric($quantity)) continue;

    // attempt to extract product ID from query string key
    $update_directive_bits = preg_split('/^set-cart-qty_/', $key);
    if (count($update_directive_bits) >= 2 and is_numeric($update_directive_bits[1])) {
      $product_id = (int) $update_directive_bits[1]; 
      $cart_id = $woocommerce->cart->generate_cart_id($product_id);
      // See if this product and its options is already in the cart
      $cart_item_key = $woocommerce->cart->find_product_in_cart( $cart_id ); 
      // If cart_item_key is set, the item is already in the cart
      if ( $cart_item_key ) {
        $woocommerce->cart->set_quantity($cart_item_key, $quantity);
      } else {
        // Add the product to the cart 
        $woocommerce->cart->add_to_cart($product_id, $quantity);
      }
    }
  }
}

add_action( 'init', 'woocommerce_set_cart_qty_action' );

Please be aware this code has been tested, but is intended for hobbyist use. No warranty is implied. Your mileage may vary. Offer void where prohibited.

Installation instructions:
Copy and paste the code in your theme’s functions.php file.

Usage instructions:
Create a hyperlink with a query string argument like so:
<url>?set-cart-qty_<product ID>=<quantity>
Where <product ID> is the numerical ID of your product (something like “167”) and <quantity> is the quantity you want set in the user’s shopping cart (most likely this will just be “1”).

Example URL to send user to checkout with exactly one item of product with ID “167” in cart:

http://my.website.com/checkout?set-cart-qty_167=1

In my wife’s case the URL was set to the checkout page, so that she could set up a shiny red button that linked the user to checkout with the appropriate product already set in the cart, ready to check out.

Feel free to use it for your own site; it should be useful for any situation where you want to ensure a single product exists in the cart at a set quantity.