Chris Ng

Senior Software Engineer at LinkedIn.

Read this first

One Year at LinkedIn

This month marks my one year anniversary working at LinkedIn.

I have moved majority of my writing from here at Svbtle to LinkedIn Publishing as my post history from both sites show.

This is in a sense a “pinned-to-the-top” post for anyone who reads or stumbles upon my Svbtle posts to check my articles out at LinkedIn.

If you are interested in following my articles, you can do so by visiting my LinkedIn profile at
https://www.linkedin.com/in/chrisrng/ or publicly without a login at https://www.linkedin.com/today/author/chrisrng.

View →


Web Workers 101

Do you want to know the basic “todo mvc” of the Web Workers API? This is not the end all of what there is to know about Web Workers, but rather this a good first guide to exploring the topic. The posts on MDN would be a great resource for a detailed verbose explanation.

AAEAAQAAAAAAAAjdAAAAJGNmNDdkZjY3LWI3YTYtNDA4NS1iNTMzLTczNzA4M2IwZjVjYw.jpg

Source: http://dilbert.com/strip/2011-12-16

The Web Workers API allows us to run scripts in the background independent of any user interface scripts that we are currently running (or will run in the future). Think of it as the ever listening phone in the comic above, it doesn’t interrupt the Pointy-haired Boss until it has done the work asked.

Web Workers as specified by the WHATWG HTML Living Standard are:

  • Expected to be long-lived processes
  • Not intended to be used in large numbers
  • Expected to have a high start-up performance cost
  • Expected to have a high per-instance memory cost
  • Mimics multithreading

Workers...

Continue reading →


Using URL.createObjectURL()

This is a blog post about using the Web API URL.createObjectURL(). Here we will go through the use cases as well as the inner intricacies of what this Web API does. First up lets see how to use the API.

 URL.createObjectURL()

 Syntax from MDN:

objectURL = URL.createObjectURL(blob)

createObjectURL is a static method provided by the URL Web API.

Returns a DOMString containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.

So when we invoke the function on the variable blob, we get back a persistent reference string with a unique URL that temporarily references to the in-memory blob object that lives in the Blob URL Store.

It is a persistent reference since as long as that blob is in memory the reference string will be in play unless revoked.

It is temporary however since when the browser is...

Continue reading →


Building a Slack Bot in Golang

 The Background

This blog post details the steps in which I’ve built my first Slack Bot with less than trivial functionality. It was created over a hackathon and was then released on open source as Pricelinelabs‘s leaderboard project under MIT License. This bot was built on Golang and uses nlopes’s Slack API wrapper. The post is not a how-to guide to building a Slack Bot using Golang but rather a recap of how the team built the Slack Bot.

Special thanks to Ben and Alexey for being part of the hackathon team.

 The Problem

If you use Slack internally, like any other company, you have likely ran into message saturation from being part of many channels and group direct messages. Conversely if you are the one who answers questions in a specific channel, this likely takes up at least 10% of your time. I proposed a product solution of a Slack Bot that measures the value of your...

Continue reading →


Collatz Conjecture

In this blog post we deviate a little from the ES6 parade I’ve been writing here. We dive into the Collatz Conjecture (otherwise known as the 3n + 1 conjecture) on today’s blog. The Collatz conjecture is the simplest open problem in mathematics.

 Collatz Conjecture

The conjecture states that:

Take any positive integer n. If n is even, divide it by 2 to get n / 2. If n is odd, multiply it by 3 and add 1 to obtain 3n + 1. Repeat the process (which has been called “Half Or Triple Plus One”, or HOTPO) indefinitely. The conjecture is that no matter what number you start with, you will always eventually reach 1.

Basically if we give the number 10 the breakdown is as follows: 10 > 5 > 16 > 8 > 4 > 2 > 1 (match!). The conjecture states that every arbitrary positive integer will reach back to the number 1 after jumping through the hoops.

collatz_conjecture.png
Source: https://xkcd.com/710/

 Trivial Code

So to...

Continue reading →


React Rally 2016 Recap

I recently attended the React Rally conference in Salt Lake City, UT. The conference was about the front end server and client framework React, created by Facebook. Speakers covered topics such as Redux, Relay, RethinkDB, Async and of course React and Javascript. React allows developers to write in Javascript easily on the client and server (universally), sharing the same code that comprises the components on both sides. The trivial benefits are for speed in rendering and ease of reuse but as the conference showed it does much much more.

 Day 1

Sarah Drasner started the day with a talk on animation. If you hate animation, it might be because you’re doing it wrong. There was a big push for GSAP (GreenSock) as well as using SVG for animations and responsiveness.

Joseph Savona from the Facebook Relay team had the next talk regarding the new Relay 2.0. The main idea was for product devs to...

Continue reading →


ES7 Async Await in JavaScript

This is a blog post on the async and await functionality coming to JavaScript. It is currently on Stage 3 Draft but is well adopted in tools such as Babel which transpiles the code into Generators (which is actually transpiled again by Babel to backward support legacy browsers). The development of this proposal is happening at https://github.com/tc39/ecmascript-asyncawait, if you’d like to track it further.

 async / await

The aysnc and await pattern is essentially a decorator on top of promises and generators to have an even cleaner solution to the callback hell anti-pattern.

Promises provide a layer of abstraction to handle callbacks. To build on top of that, together with Generators, the async / await pattern handles writing asynchronous code in JavaScript.

Async Functions internally leverage both generators and promises.

 Traditional Promise-based Architecture (ES6)

export default
...

Continue reading →


Pricelinelabs: omni-slider

This blog is about my experience building and being the author of the first open source project under Pricelinelabs. The omni-slider is a multi-range vanilla javascript slider widget component released on the open source world in GitHub on June 2, 2015.

gif.gif

 History

We initially were using an open source AngularJS slider by Venturorocket, however it had implementation issues so it was hard to iterate on. The idea then popped up to me to create a slider as a programming challenge. I then started and finished development on the internal slider component on August 2015.

Early in May we decided to chose this component as the first project to launch in Pricelinelabs’s GitHub since it had very few dependencies and was something the devs in my team wanted to have (to use as an open source dependency) at different points in their careers. I have since then removed the single dependency to...

Continue reading →


Using WeakMap for Private Properties

This blog is about a cool idea of leveraging WeakMap to have private properties in Javascript Classes. A private property is a property that is only accessible to member functions of instances of the same class. Javascript inherently does not support private properties unlike languages such as Java or C++. It is however, at the time of writing, at Stage 0 Proposal to add it to the ECMAScript spec.

As a recap from my previous blog, a WeakMap is:

  • iterable by providing keys only
  • not enumerable
  • unique object or function references
  • does not accept primitive data types as keys
const myWeakMap = new WeakMap();
const harry = {};
const potter = () => {};
myWeakMap.set(harry, "cat");
myWeakMap.set(potter, 7);
myWeakMap.has(harry); // true
myWeakMap.get(potter); // 7
myWeakMap.delete(harry);

 WeakMap Technique

Traditionally, the way to have private properties in Javascript is to either...

Continue reading →


Bitwise Operators in JavaScript

Bitwise Operators are rarely used in JavaScript whereas you would commonly see it being in used in languages like Objective-C or Java. Do other languages just have more resource constraints or have problems that need hyper performance more? That’s not really what I’m here to talk about, this is more of a fun blog on what Bitwise Operators can do in your JavaScript application.

 Crash Course

Here is a short recap of your CS 101 class on Bitwise Operators:

  • Bitwise AND returns a one if the two bits are both one
  • Bitwise OR returns a one if one of the two bits is a one
  • Bitwise XOR returns a one if either bit is a one or zero but not both
  • Bitwise NOT inverts the bits
  • Shift Operators shifts bits a specified number of bit positions
  • Zero-filling Shift Operators so the result is always a 32-bit unsigned integer

 Applications

 Bitwise AND ( & )

  • Determining if a number is odd or even ((x...

Continue reading →