KA Engineering

KA Engineering

We're the engineers behind Khan Academy. We're building a free, world-class education for anyone, anywhere.

Subscribe

Latest posts

Let's Reduce! A Gentle Introduction to Javascript's Reduce Method

Josh Comeau on July 10

Creating Query Components with Apollo

Brian Genisio on June 12

Migrating to a Mobile Monorepo for React Native

Jared Forsyth on May 29

Memcached-Backed Content Infrastructure

Ben Kraft on May 15

Profiling App Engine Memcached

Ben Kraft on May 1

App Engine Flex Language Shootout

Amos Latteier on April 17

What's New in OSS at Khan Academy

Brian Genisio on April 3

Automating App Store Screenshots

Bryan Clark on March 27

It's Okay to Break Things: Reflections on Khan Academy's Healthy Hackathon

Kimerie Green on March 6

Interning at Khan Academy: from student to intern

Shadaj Laddad on Dec 12, 2016

Prototyping with Framer

Nick Breen on Oct 3, 2016

Evolving our content infrastructure

William Chargin on Sep 19, 2016

Building a Really, Really Small Android App

Charlie Marsh on Aug 22, 2016

A Case for Time Tracking: Data Driven Time-Management

Oliver Northwood on Aug 8, 2016

Time Management at Khan Academy

Several Authors on Jul 25, 2016

Hackathons Can Be Healthy

Tom Yedwab on Jul 11, 2016

Ensuring transaction-safety in Google App Engine

Craig Silverstein on Jun 27, 2016

The User Write Lock: an Alternative to Transactions for Google App Engine

Craig Silverstein on Jun 20, 2016

Khan Academy's Engineering Principles

Ben Kamens on Jun 6, 2016

Minimizing the length of regular expressions, in practice

Craig Silverstein on May 23, 2016

Introducing SwiftTweaks

Bryan Clark on May 9, 2016

The Autonomous Dumbledore

Evy Kassirer on Apr 25, 2016

Engineering career development at Khan Academy

Ben Eater on Apr 11, 2016

Inline CSS at Khan Academy: Aphrodite

Jamie Wong on Mar 29, 2016

Starting Android at Khan Academy

Ben Komalo on Feb 29, 2016

Automating Highly Similar Translations

Kevin Barabash on Feb 15, 2016

The weekly snippet-server: open-sourced

Craig Silverstein on Feb 1, 2016

Stories from our latest intern class

2015 Interns on Dec 21, 2015

Kanbanning the LearnStorm Dev Process

Kevin Dangoor on Dec 7, 2015

Forgo JS packaging? Not so fast

Craig Silverstein on Nov 23, 2015

Switching to Slack

Benjamin Pollack on Nov 9, 2015

Receiving feedback as an intern at Khan Academy

David Wang on Oct 26, 2015

Schrödinger's deploys no more: how we update translations

Chelsea Voss on Oct 12, 2015

i18nize-templates: Internationalization After the Fact

Craig Silverstein on Sep 28, 2015

Making thumbnails fast

William Chargin on Sep 14, 2015

Copy-pasting more than just text

Sam Lau on Aug 31, 2015

No cheating allowed!!

Phillip Lemons on Aug 17, 2015

Fun with slope fields, css and react

Marcos Ojeda on Aug 5, 2015

Khan Academy: a new employee's primer

Riley Shaw on Jul 20, 2015

How wooden puzzles can destroy dev teams

John Sullivan on Jul 6, 2015

Babel in Khan Academy's i18n Toolchain

Kevin Barabash on Jun 22, 2015

tota11y - an accessibility visualization toolkit

Jordan Scales on Jun 8, 2015

Meta

What's New in OSS at Khan Academy

by Brian Genisio on April 3

At Khan Academy, we rely heavily on Open Source Software (OSS). The majority of our software is built upon OSS and we love giving back to the community when we find nuggets of code we think other will find useful.

If you're ever curious to see what we're up to with OSS, take a look at https://khan.github.io. Some of the most recent additions to that page are highlighted below.

Mu Lambda

Mu Lambda is a small library of functional programming utilities for JavaScript. Our front-end codebase is using more and more functional concepts lately and we need some help composing our functions via utilities. Unfortunately, most of the great OSS options out there today are rather heavy-weight from a payload perspective. Mu Lambda is 1/10th the size of the popular options out there! One caveat: it doesn't have monad support (which is partially how we reduce the payload size.) If you want to see it in action, check out the tests.

React Balance text

React Balance Text is a React wrapper for the Adobe Web Platform's Balance-Text project which aims to help eliminate text rags and widows in page copy by making sure the text is as "balanced" as possible across all lines.

Before we built our wrapper, we contributed to their project to help remove the jQuery dependancy. It didn't seem prudent to have a React component which which relied on jQuery. In today's browser ecosystem, a component like Balance-Text no longer needs anything that jQuery can offer. We collaborated with Adobe to create version 3.0 of Balance-Text and then wrote a simple wrapper around it for React.

The usage is simple and clean:

<BalanceText style={containerTextStyle}>
    Dispassionate extraterrestrial observer another world, as a patch of light! Extraplanetary! Colonies great turbulent clouds Orion's sword. Venture, circumnavigated vastness is bearable only through love? Tendrils of gossamer clouds quasar cosmos a still more glorious dawn awaits quasar decipherment Drake Equation citizens of distant epochs cosmic ocean consciousness, are creatures of the cosmos not a sunrise but a galaxyrise galaxies, colonies vastness is bearable only through love as a patch of light shores of the cosmic ocean and billions upon billions upon billions upon billions upon billions upon billions upon billions.
</BalanceText>

See the project's storybook for more details and use cases.

Fuzzy Match Utils

Fuzzy Match Utils is a collection of string matching algorithms designed with React Select in mind. Internally, it uses the Levenshtein distance and longest common subsequence algorithms which employs dyanamic prorogramming to measure the difference between two string sequences. Instead of matching strings literally, it uses a "fuzzy" approach. For example, if you searched for "Bay High", it will do well to find "Bayside High School" in a list of schools. We use these utilities in some of our React Select implementations to help the user filter long lists of options more effectively.

React Multi-Select

Speaking of React Select, React Multi Select is a multiple select component for React (which also uses Fuzzy Match Utils), modeled after the React Select look and feel. React Select is awesome, and we use it a lot, but the way it handles multiple options didn't jive with some new user experiences we are working on. React Select uses a tagging approach where we preferred a dropdown of checkboxes.

We wrote React Multi Select to have the same look and feel as React Select, but with a different UX when the user selects the dropdown, specifically designed for the multiple selection use case. We used the React Component Development Kit which uses React Storybook to help us show use cases. Because of this, you can demo the component in the project's storybook

animation of react-multi-select

Keeping everything else alive

In addition to these new projects, we've been keeping our other OSS projects updated as well. For example, we've landed several performance-related updates to Aphrodite thanks to public contributor Joe Lencioni. In KaTeX, we've also incorporated several pull requests from the community. Check out our OSS page for more projects.