Khan Engineering

Khan Engineering

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


Latest posts

Making Websites Work with Windows High Contrast Mode

Diedra Rater on March 21

Kotlin for Python developers

Aasmund Eldhuset on Nov 29, 2018

Using static analysis in Python, JavaScript and more to make your system safer

Kevin Dangoor on Jul 26, 2018

Kotlin on the server at Khan Academy

Colin Fuller on Jun 28, 2018

The Original Serverless Architecture is Still Here

Kevin Dangoor on May 31, 2018

What do software architects at Khan Academy do?

Kevin Dangoor on May 14, 2018

New data pipeline management platform at Khan Academy

Ragini Gupta on Apr 30, 2018

Untangling our Python Code

Carter J. Bastian on Apr 16, 2018

Slicker: A Tool for Moving Things in Python

Ben Kraft on Apr 2, 2018

The Great Python Refactor of 2017 And Also 2018

Craig Silverstein on Mar 19, 2018

Working Remotely

Scott Grant on Oct 2, 2017

Tips for giving your first code reviews

Hannah Blumberg on Sep 18, 2017

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

Josh Comeau on Jul 10, 2017

Creating Query Components with Apollo

Brian Genisio on Jun 12, 2017

Migrating to a Mobile Monorepo for React Native

Jared Forsyth on May 29, 2017

Memcached-Backed Content Infrastructure

Ben Kraft on May 15, 2017

Profiling App Engine Memcached

Ben Kraft on May 1, 2017

App Engine Flex Language Shootout

Amos Latteier on Apr 17, 2017

What's New in OSS at Khan Academy

Brian Genisio on Apr 3, 2017

Automating App Store Screenshots

Bryan Clark on Mar 27, 2017

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

Kimerie Green on Mar 6, 2017

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


Interning at Khan Academy: from student to intern

by Shadaj Laddad on Dec 12, 2016

This past summer I had the amazing opportunity to work on a product I use as a student every day: Khan Academy. During my internship, I worked on the web frontend team on the amusingly-named X-on-Mobile initiative (XOM) to bring Khan Academy exercises to mobile devices. In this blog post, I’ll be going through a highly-compressed summary of my two months at Khan Academy.

Part 1: Ramping up

My first day at Khan Academy was a whirlwind of activities. From setting up my laptop to having a 1:1 with my mentor and finally adding myself to the interns page, I had a lot of things to do. As soon as I settled down with my first deploy, I got to work on the XOM initiative, starting with improving the math keypad.

As part of XOM, the team had designed a math keypad that could be used to type in expression responses to mathematics problems in a mobile-friendly way. I started by fixing some bugs, such as disabling gestures on the keypad's sidebar, which has navigation buttons that cannot be swiped around like the other keys. Once I had a good idea of how the keypad worked, I was able to start working on adding new features our designers had crafted such as using square icons for representing empty blocks. And, by working on these low-level details, I learned the difference between a good user experience and a great user experience: polish.

At Khan Academy, we use React, something I had worked with before, but only in the context of Scala.js applications. As part of making changes to the math keypad, I had to learn how to write idiomatic ES6 code. Working on Khan Academy gave me a great opportunity to use React with ES6 in a production environment, and left me with many ideas on how React.js could be used more seamlessly with Scala.js. For example, seeing how properties could be easily reused for different components in ES6 gave me ideas of different ways to model properties in Scala.js.

In addition to learning React and ES6, I got a chance to work with the plethora of open-source libraries at Khan Academy. For example, I often used Aphrodite to style React components, with which I learned how easy it is to use inline styles to bring your CSS styles and JavaScript code closer together.

changes to the math keypad

an early screenshot of changes to the math keypad

Part 2: iframes, iframes, iframes

Now that I was used to the flow of picking a task, creating a code review, and deploying my changes, I started on my first project: improving our content editor to be mobile first. Historically, our content creators have worked primarily on desktop: they write their content on desktop, they preview their content on desktop, they review each other's work on desktop, they check their email on desktop. How can we make it easy for our content creators to build content for mobile first, and thereby avoid awful small-screen layout bugs, but still allow them to take advantage of the big-screen multi-tasking perks of desktop devices? This involved pulling together specs for what types of devices students use Khan Academy on, rendering content with the new styles the rest of the team was working on, isolating the rendered content to prevent styles leaking from the rest of the editor, and implementing touch emulation for interacting with the mobile previews.

To implement the isolation of content, I decided to render previews inside of iframes. In addition to providing style isolation, iframes also made it possible to properly render components that are rendered directly to the body, such as the math keypad I worked on earlier. But to work with iframes, I now had to make sure that the iframes showed live previews while maintaining the speed of the preview updates. Having quick preview updates meant that iframe reloads had to be minimized and communication between the editor and preview frames needed to be as fast as possible.

To transfer data between the parent editor and the child iframe, the parent first stores a JS object representation of the exercise content in a global variable, because the exercise content contains callback functions which prevent it from being serialized for window messaging. The parent then sends a message ( to the iframe, notifying it of the updated content.

When the iframe receives this message, it grabs the exercise content from the global variable from the parent and renders that content. The browser only allows this because the iframe and parent are on the same domain. With this implementation, preview updates happen immediately after content edits. In addition, iframe loads are minimized with a custom shouldComponentUpdate method that only allows full reloads for switching form factor or enabling/disabling touch emulation. In most cases, the only delay happens during the initial editor load.

interactive mobile previews

live-updated interactive mobile previews with iframes!

After these changes were implemented, I got the chance to work with content creators to test out my changes and make sure they didn’t interrupt their creation process. By working with content creators, I was able to understand exactly what they were hoping to get out of my changes, and I was able to tune the goals of my project to these needs to make sure that it was helping the content creators as much as possible. For example, I learned that content creators often take screenshots of the editor for annotating content, which resulted in changes to the editor to make sure that all preview content was always visible with no scrolling. With all the kinks worked out, I was able to finally deploy the content editor that is now used by content creators every day! Even as I continued on to my next project, content creators continued to provide feedback that was worked through and helped further refine the editor.

Part 3: crispEdges for the win!

Moving on from the mobile-first content editor, I began work on my next project: making KA’s interactive graphing widgets work on mobile devices. Since new designs for the mobile widgets were needed to make graphs fit in with our visual language in other mobile experiences, I worked with Louis, a fellow intern, on the design. On Khan Academy, interactive graphs are rendered with SVGs, so most of my work dealt with rendering the SVG elements for different graph parts with the new styles.

changes to the graph widget

some changes to the graph widget: larger points and deletion tooltips

One of the most interesting things I learned in this project was the shape-rendering CSS style. On SVG elements, you can apply the shape-rendering style to give the renderer hints on what to prioritize when rendering the elements. In the case of this project, I used the shape-rendering property with the crispEdges value to make lines render more crisply. This is especially useful for grid lines, which sit perfectly horizontal and vertical. By setting crispEdges on these lines, the renderer knows to render them lined up with pixel rows instead of blurring the line to higher and lower rows. On mobile devices, especially those with higher resolutions, this small change makes a large difference in how the graphs look.

the effects of crispEdges

if you look closely, you can see the effects of crispEdges here


All in all, my internship at Khan Academy was an amazing experience. It gave me the opportunity to have an impact on learners around the world and learn many new technologies. From building new tools for content editors to creating a brand new experience for students using interactive graphs, I was able to work in a wide variety of areas. I’m super thankful to my mentor Kevin for all his help throughout my internship, the XOM team for being super encouraging on all my projects, my fellow interns for great lunchtime discussions, and the entire Khan Academy team for creating such a great place to work.


P.S. since most of my work here was in open-source projects you can check out my work in detail on GitHub (1, 2)