KA Engineering

KA Engineering

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

Subscribe

Upcoming fortnightly post

App Engine Memcache Performance

by Ben Kraft on May 1

Latest posts

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 December 12

Prototyping with Framer

Nick Breen on October 3

Evolving our content infrastructure

William Chargin on September 19

Building a Really, Really Small Android App

Charlie Marsh on August 22

A Case for Time Tracking: Data Driven Time-Management

Oliver Northwood on August 8

Time Management at Khan Academy

Several Authors on July 25

Hackathons Can Be Healthy

Tom Yedwab on July 11

Ensuring transaction-safety in Google App Engine

Craig Silverstein on June 27

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

Craig Silverstein on June 20

Khan Academy's Engineering Principles

Ben Kamens on June 6

Minimizing the length of regular expressions, in practice

Craig Silverstein on May 23

Introducing SwiftTweaks

Bryan Clark on May 9

The Autonomous Dumbledore

Evy Kassirer on April 25

Engineering career development at Khan Academy

Ben Eater on April 11

Inline CSS at Khan Academy: Aphrodite

Jamie Wong on March 29

Starting Android at Khan Academy

Ben Komalo on February 29

Automating Highly Similar Translations

Kevin Barabash on February 15

The weekly snippet-server: open-sourced

Craig Silverstein on February 1

Stories from our latest intern class

2015 Interns on December 21

Kanbanning the LearnStorm Dev Process

Kevin Dangoor on December 7

Forgo JS packaging? Not so fast

Craig Silverstein on November 23

Switching to Slack

Benjamin Pollack on November 9

Receiving feedback as an intern at Khan Academy

David Wang on October 26

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

Chelsea Voss on October 12

i18nize-templates: Internationalization After the Fact

Craig Silverstein on September 28

Making thumbnails fast

William Chargin on September 14

Copy-pasting more than just text

Sam Lau on August 31

No cheating allowed!!

Phillip Lemons on August 17

Fun with slope fields, css and react

Marcos Ojeda on August 5

Khan Academy: a new employee's primer

Riley Shaw on July 20

How wooden puzzles can destroy dev teams

John Sullivan on July 6

Babel in Khan Academy's i18n Toolchain

Kevin Barabash on June 22

tota11y - an accessibility visualization toolkit

Jordan Scales on June 8

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.