# web-frontend

Published articles for web-frontend.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Copy-pasting more than just text

DevFeed: [Copy-pasting more than just text](<https://devfeed.tech/articles/copy-pasting-more-than-just-text-27370.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/copy-pasting-more-than-just-text.htm>)

Author: Khan Academy

Published: 2015-08-31T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [React](<https://devfeed.tech/topics/react.md>), [interactive website](<https://devfeed.tech/topics/interactive-website.md>)

Tags: [alt-text](<https://devfeed.tech/tags/alt-text.md>), [copy](<https://devfeed.tech/tags/copy.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [interactive-content](<https://devfeed.tech/tags/interactive-content.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [news](<https://devfeed.tech/tags/news.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>), [widget](<https://devfeed.tech/tags/widget.md>)

### AI overview

Sam Lau describes how Khan Academy improved copy-pasting in Perseus, its interactive exercise and article editor, by moving widget metadata alongside copied text. The change preserves information such as image URLs and a number line's starting value, making it easier for content creators to move or duplicate widgets.

### Source excerpt

By Sam Lau The Result I'll skip to the happy ending. This little feature implements more sophisticated copy-pasting ... Read more

## Kanbanning the LearnStorm Dev Process

DevFeed: [Kanbanning the LearnStorm Dev Process](<https://devfeed.tech/articles/kanbanning-the-learnstorm-dev-process-27387.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/kanbanning-learnstorm-dev-process.htm>)

Author: Khan Academy

Published: 2015-12-07T23:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>)

Tags: [dev](<https://devfeed.tech/tags/dev.md>), [development](<https://devfeed.tech/tags/development.md>), [development-process](<https://devfeed.tech/tags/development-process.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [news](<https://devfeed.tech/tags/news.md>), [projects](<https://devfeed.tech/tags/projects.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

Kevin Dangoor describes how Khan Academy's LearnStorm initiative changed its development process from project-based planning with Trello and Google Sheets to task-focused tracking in Google Docs and Asana as launch requirements evolved.

### Source excerpt

By Kevin Dangoor In his New Employee's Primer post from July, Riley Shaw wrote a little about our ... Read more

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

DevFeed: [Let's Reduce! A Gentle Introduction to Javascript's Reduce Method](<https://devfeed.tech/articles/let-s-reduce-a-gentle-introduction-to-javascript-s-reduce-method-27391.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/lets-reduce.htm>)

Author: Khan Academy

Published: 2017-07-10T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [coding](<https://devfeed.tech/topics/coding.md>), [Redux](<https://devfeed.tech/topics/redux.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [array](<https://devfeed.tech/tags/array.md>), [arrow](<https://devfeed.tech/tags/arrow.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [filter](<https://devfeed.tech/tags/filter.md>), [introduction](<https://devfeed.tech/tags/introduction.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [map](<https://devfeed.tech/tags/map.md>), [news](<https://devfeed.tech/tags/news.md>), [react](<https://devfeed.tech/tags/react.md>), [reduce](<https://devfeed.tech/tags/reduce.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

A tutorial explaining JavaScript's reduce method as a foundation for understanding Redux. It describes how reduce processes array items, how each iteration depends on the previous return value, and why the method can be difficult to learn.

### Source excerpt

By Josh Comeau Every summer, Khan Academy recruits a few software engineer interns. As part of their onboarding, ... Read more

## Making Websites Work with Windows High Contrast Mode

DevFeed: [Making Websites Work with Windows High Contrast Mode](<https://devfeed.tech/articles/making-websites-work-with-windows-high-contrast-mode-27420.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/windows-high-contrast-mode.htm>)

Author: Khan Academy

Published: 2019-03-21T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [Windows](<https://devfeed.tech/topics/windows.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [css](<https://devfeed.tech/tags/css.md>), [developers](<https://devfeed.tech/tags/developers.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [news](<https://devfeed.tech/tags/news.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>), [windows](<https://devfeed.tech/tags/windows.md>)

### AI overview

This tutorial explains how Windows High Contrast Mode changes web application styling and presents accessibility considerations for backgrounds, images, borders, and outlines. It emphasizes using CSS for decorative styling and retaining borders and outlines for functional purposes.

### Source excerpt

By Diedra Rater At Khan Academy, we've been working to make our web product more accessible to a ... Read more

## What's New in OSS at Khan Academy

DevFeed: [What's New in OSS at Khan Academy](<https://devfeed.tech/articles/what-s-new-in-oss-at-khan-academy-27396.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/new-oss-activity.htm>)

Author: Khan Academy

Published: 2017-04-03T22:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Open Source](<https://devfeed.tech/topics/open-source.md>), [Software](<https://devfeed.tech/topics/software.md>), [React](<https://devfeed.tech/topics/react.md>), [Functional programming](<https://devfeed.tech/topics/functional-programming.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Algorithms](<https://devfeed.tech/topics/algorithms.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>)

Tags: [algorithms](<https://devfeed.tech/tags/algorithms.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [functional-programming](<https://devfeed.tech/tags/functional-programming.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [news](<https://devfeed.tech/tags/news.md>), [open-source-software](<https://devfeed.tech/tags/open-source-software.md>), [oss](<https://devfeed.tech/tags/oss.md>), [react](<https://devfeed.tech/tags/react.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

Khan Academy highlights several recent open-source projects, including Mu Lambda, a small JavaScript library of functional programming utilities; React Balance Text, a React wrapper for Adobe's Balance-Text project; Fuzzy Match Utils, which uses string-matching algorithms for filtering; and React Multi Select.

### Source excerpt

By Brian Genisio At Khan Academy, we rely heavily on Open Source Software (OSS). The majority of our ... Read more

## Working Remotely

DevFeed: [Working Remotely](<https://devfeed.tech/articles/working-remotely-27421.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/working-remotely.htm>)

Author: Khan Academy

Published: 2017-10-02T22:00:00Z

Content type: opinion

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Job](<https://devfeed.tech/topics/job.md>)

Tags: [engineering](<https://devfeed.tech/tags/engineering.md>), [news](<https://devfeed.tech/tags/news.md>), [remote](<https://devfeed.tech/tags/remote.md>), [remote-work](<https://devfeed.tech/tags/remote-work.md>), [time](<https://devfeed.tech/tags/time.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>), [work](<https://devfeed.tech/tags/work.md>)

### AI overview

Scott Grant reflects on working remotely after moving from Silicon Valley to Kingston, Ontario. He explains how remote work expands access to technology jobs outside major hubs and discusses the discipline and routine needed to work effectively.

### Source excerpt

By Scott Grant When my wife and I left Silicon Valley in sunny California to return to my ... Read more

## Making thumbnails fast

DevFeed: [Making thumbnails fast](<https://devfeed.tech/articles/making-thumbnails-fast-27392.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/making-thumbnails-fast.htm>)

Author: Khan Academy

Published: 2015-09-14T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Image](<https://devfeed.tech/topics/image.md>), [pixel](<https://devfeed.tech/topics/pixel.md>), [Server](<https://devfeed.tech/topics/server.md>), [Software](<https://devfeed.tech/topics/software.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [blog](<https://devfeed.tech/tags/blog.md>), [code](<https://devfeed.tech/tags/code.md>), [color](<https://devfeed.tech/tags/color.md>), [components](<https://devfeed.tech/tags/components.md>), [design](<https://devfeed.tech/tags/design.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [image](<https://devfeed.tech/tags/image.md>), [images](<https://devfeed.tech/tags/images.md>), [news](<https://devfeed.tech/tags/news.md>), [rgb](<https://devfeed.tech/tags/rgb.md>), [software](<https://devfeed.tech/tags/software.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

Khan Academy explains how it generated custom video thumbnails by resizing, desaturating, lightening, color-tinting, and overlaying text and branding on source images. The post also explains pixel multiplication and why the team implemented the image operations themselves because its server infrastructure could not use available libraries.

### Source excerpt

Note: This post contains quite a bit of LaTeX notation, which is not supported right now on this ... Read more

## Babel in Khan Academy's i18n Toolchain

DevFeed: [Babel in Khan Academy's i18n Toolchain](<https://devfeed.tech/articles/babel-in-khan-academy-s-i18n-toolchain-27381.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/i18n-babel-plugin.htm>)

Author: Khan Academy

Published: 2015-06-22T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Babel](<https://devfeed.tech/topics/babel.md>), [Internationalization (i18n)](<https://devfeed.tech/topics/i18n.md>), [toolchain](<https://devfeed.tech/topics/toolchain.md>), [es6](<https://devfeed.tech/topics/es6.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Parser](<https://devfeed.tech/topics/parser.md>), [Universal Syntax Tree.](<https://devfeed.tech/topics/unist.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [architecture](<https://devfeed.tech/tags/architecture.md>), [babel](<https://devfeed.tech/tags/babel.md>), [build](<https://devfeed.tech/tags/build.md>), [build-system](<https://devfeed.tech/tags/build-system.md>), [code](<https://devfeed.tech/tags/code.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [es6](<https://devfeed.tech/tags/es6.md>), [eslint](<https://devfeed.tech/tags/eslint.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [news](<https://devfeed.tech/tags/news.md>), [plugin](<https://devfeed.tech/tags/plugin.md>), [source](<https://devfeed.tech/tags/source.md>), [structure](<https://devfeed.tech/tags/structure.md>), [syntax](<https://devfeed.tech/tags/syntax.md>), [tests](<https://devfeed.tech/tags/tests.md>), [toolchain](<https://devfeed.tech/tags/toolchain.md>), [types](<https://devfeed.tech/tags/types.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

### AI overview

Khan Academy describes switching its ES6 and JSX frontend compilation from jstransform to Babel. The article explains a custom Babel plugin for preserving the project's internationalization behavior and discusses matching generated output, line numbers, whitespace, and the existing build chain.

### Source excerpt

By Kevin Barabash We've been using ES6 (along with JSX) for sometime at Khan Academy. Right now, we're ... Read more

## Khan Academy: a new employee's primer

DevFeed: [Khan Academy: a new employee's primer](<https://devfeed.tech/articles/khan-academy-a-new-employee-s-primer-27395.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/new-employees-primer.htm>)

Author: Khan Academy

Published: 2015-07-20T22:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Job](<https://devfeed.tech/topics/job.md>)

Tags: [developer](<https://devfeed.tech/tags/developer.md>), [developers](<https://devfeed.tech/tags/developers.md>), [education](<https://devfeed.tech/tags/education.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [news](<https://devfeed.tech/tags/news.md>), [onboarding](<https://devfeed.tech/tags/onboarding.md>), [organization](<https://devfeed.tech/tags/organization.md>), [people](<https://devfeed.tech/tags/people.md>), [startup](<https://devfeed.tech/tags/startup.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>), [work](<https://devfeed.tech/tags/work.md>)

### AI overview

Riley Shaw describes the onboarding experience after joining Khan Academy's developer team. The article highlights advance communication, supportive team messages, an assigned onboarding mentor, and early one-on-one time with a manager.

### Source excerpt

By Riley Shaw I recently joined the developer team at Khan Academy. Since arriving I've been surprised by ... Read more

## A Case for Time Tracking: Data Driven Time-Management

DevFeed: [A Case for Time Tracking: Data Driven Time-Management](<https://devfeed.tech/articles/a-case-for-time-tracking-data-driven-time-management-27363.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/a-case-for-time-tracking.htm>)

Author: Khan Academy

Published: 2016-08-08T22:00:00Z

Content type: opinion

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Google Calendar](<https://devfeed.tech/topics/google-calendar.md>), [data](<https://devfeed.tech/topics/data.md>), [Development](<https://devfeed.tech/topics/development.md>), [Tech Lead](<https://devfeed.tech/topics/tech-lead.md>)

Tags: [data](<https://devfeed.tech/tags/data.md>), [developer](<https://devfeed.tech/tags/developer.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [google](<https://devfeed.tech/tags/google.md>), [news](<https://devfeed.tech/tags/news.md>), [tech-lead](<https://devfeed.tech/tags/tech-lead.md>), [time-management](<https://devfeed.tech/tags/time-management.md>), [time-tracking](<https://devfeed.tech/tags/time-tracking.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

The author describes tracking all work activities as personal Google Calendar events. They argue that the resulting data provides a clearer view of how time is spent and helps inform decisions, productivity, and confidence about work.

### Source excerpt

By Oliver Northwood Tl;dr: Time-tracking everything I do in Google Calendar has made me happier, more productive, and ... Read more

## Interning at Khan Academy: from student to intern

DevFeed: [Interning at Khan Academy: from student to intern](<https://devfeed.tech/articles/interning-at-khan-academy-from-student-to-intern-27383.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/interning-at-khan-academy.htm>)

Author: Khan Academy

Published: 2016-12-12T23:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Mobile](<https://devfeed.tech/topics/mobile.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [React](<https://devfeed.tech/topics/react.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [es6](<https://devfeed.tech/topics/es6.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>), [Scala](<https://devfeed.tech/topics/scala.md>)

Tags: [bugs](<https://devfeed.tech/tags/bugs.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [es6](<https://devfeed.tech/tags/es6.md>), [features](<https://devfeed.tech/tags/features.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [intern](<https://devfeed.tech/tags/intern.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [news](<https://devfeed.tech/tags/news.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [react](<https://devfeed.tech/tags/react.md>), [student](<https://devfeed.tech/tags/student.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

A student intern describes two months working on Khan Academy's X-on-Mobile initiative. The article covers improving a mobile math keypad, fixing gesture-related bugs, adding interface features, learning idiomatic ES6 with React in production, and working with open-source libraries.

### Source excerpt

By Shadaj Laddad This past summer I had the amazing opportunity to work on a product I use ... Read more

## Stories from our latest intern class

DevFeed: [Stories from our latest intern class](<https://devfeed.tech/articles/stories-from-our-latest-intern-class-27409.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/stories-from-interns.htm>)

Author: Khan Academy

Published: 2015-12-21T23:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Programming](<https://devfeed.tech/topics/programming.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Ionic](<https://devfeed.tech/topics/ionic.md>), [AdventureX 2026](<https://devfeed.tech/topics/adventurex2026.md>)

Tags: [backup](<https://devfeed.tech/tags/backup.md>), [blog-post](<https://devfeed.tech/tags/blog-post.md>), [email](<https://devfeed.tech/tags/email.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [github](<https://devfeed.tech/tags/github.md>), [hackathon](<https://devfeed.tech/tags/hackathon.md>), [intern](<https://devfeed.tech/tags/intern.md>), [ionic](<https://devfeed.tech/tags/ionic.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [news](<https://devfeed.tech/tags/news.md>), [programming](<https://devfeed.tech/tags/programming.md>), [project](<https://devfeed.tech/tags/project.md>), [stories](<https://devfeed.tech/tags/stories.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

This article shares reflections from Khan Academy's 2015 intern class. It describes a hackathon project that used Ionic to build a mobile app for browsing and playing JavaScript projects, and discusses backing up Khan Academy mailing-list data.

### Source excerpt

By 2015 Interns We sent an email out to all of the 2015 interns in early November, shortly ... Read more

## Automating Highly Similar Translations

DevFeed: [Automating Highly Similar Translations](<https://devfeed.tech/articles/automating-highly-similar-translations-27416.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/translation_assistant.htm>)

Author: Khan Academy

Published: 2016-02-15T23:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [ui](<https://devfeed.tech/topics/ui.md>), [Template](<https://devfeed.tech/topics/template.md>), [Tool](<https://devfeed.tech/topics/tool.md>)

Tags: [engineering](<https://devfeed.tech/tags/engineering.md>), [languages](<https://devfeed.tech/tags/languages.md>), [news](<https://devfeed.tech/tags/news.md>), [templates](<https://devfeed.tech/tags/templates.md>), [tool](<https://devfeed.tech/tags/tool.md>), [translation](<https://devfeed.tech/tags/translation.md>), [ui](<https://devfeed.tech/tags/ui.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

Khan Academy describes a redesigned translator dashboard and a translation tool with smart translations. The system groups highly similar English strings, reuses existing translations through templates, and updates the UI to show which strings can be translated automatically.

### Source excerpt

By Kevin Barabash Khan Academy is available in 12 languages and is in the process of being translated ... Read more

## Solving a Double-Sided Wooden Puzzle with Coordinate Systems and Search Pruning

DevFeed: [Solving a Double-Sided Wooden Puzzle with Coordinate Systems and Search Pruning](<https://devfeed.tech/articles/how-wooden-puzzles-can-destroy-dev-teams-27374.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/evil-puzzle.htm>)

Author: Khan Academy

Published: 2015-07-06T22:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [Math and Logic](<https://devfeed.tech/topics/math-and-logic.md>)

Tags: [dev](<https://devfeed.tech/tags/dev.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [logic](<https://devfeed.tech/tags/logic.md>), [news](<https://devfeed.tech/tags/news.md>), [program](<https://devfeed.tech/tags/program.md>), [puzzle](<https://devfeed.tech/tags/puzzle.md>), [puzzles](<https://devfeed.tech/tags/puzzles.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

John Sullivan describes how five Khan Academy developers wrote solvers for a double-sided wooden puzzle. The article covers representing piece positions, handling rotations and reflections, and pruning the search space to improve placement search.

### Source excerpt

By John Sullivan Last week a mysterious double-sided puzzle appeared at Khan Academy. To solve the puzzle you ... Read more

## The Autonomous Dumbledore

DevFeed: [The Autonomous Dumbledore](<https://devfeed.tech/articles/the-autonomous-dumbledore-27368.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/autonomous-dumbledore.htm>)

Author: Khan Academy

Published: 2016-04-25T22:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [API](<https://devfeed.tech/topics/api.md>), [Job](<https://devfeed.tech/topics/job.md>), [test](<https://devfeed.tech/topics/test.md>), [maintenance](<https://devfeed.tech/topics/maintenance.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [bugs](<https://devfeed.tech/tags/bugs.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [feature](<https://devfeed.tech/tags/feature.md>), [fetch](<https://devfeed.tech/tags/fetch.md>), [job](<https://devfeed.tech/tags/job.md>), [maintenance](<https://devfeed.tech/tags/maintenance.md>), [news](<https://devfeed.tech/tags/news.md>), [running](<https://devfeed.tech/tags/running.md>), [scheduled](<https://devfeed.tech/tags/scheduled.md>), [test](<https://devfeed.tech/tags/test.md>), [tests](<https://devfeed.tech/tags/tests.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

An intern at Khan Academy describes the Autonomous Dumbledore, a system that monitors PSAT score-linking endpoints through recurring tests and automatically enables or disables the related feature based on recent results.

### Source excerpt

By Evy Kassirer When I arrived at Khan Academy to start my internship on the Official SAT Practice ... Read more

## Time Management at Khan Academy

DevFeed: [Time Management at Khan Academy](<https://devfeed.tech/articles/time-management-at-khan-academy-27411.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/time-management-multiple-authors.htm>)

Author: Khan Academy

Published: 2016-07-25T22:00:00Z

Content type: opinion

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [To-Do](<https://devfeed.tech/topics/todo.md>), [Job](<https://devfeed.tech/topics/job.md>)

Tags: [email](<https://devfeed.tech/tags/email.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [learn](<https://devfeed.tech/tags/learn.md>), [management](<https://devfeed.tech/tags/management.md>), [meetings](<https://devfeed.tech/tags/meetings.md>), [news](<https://devfeed.tech/tags/news.md>), [team](<https://devfeed.tech/tags/team.md>), [time-management](<https://devfeed.tech/tags/time-management.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>), [work](<https://devfeed.tech/tags/work.md>)

### AI overview

Khan Academy employees share approaches to managing their time, including weekly Trello to-do lists, scheduling uninterrupted work around meetings, and organizing tasks around energy and responsiveness needs.

### Source excerpt

By Multiple Everyone at Khan Academy received a plea recently: I'm hoping to organize a blog post that ... Read more

## How to upgrade hundreds of React components without breaking production

DevFeed: [How to upgrade hundreds of React components without breaking production](<https://devfeed.tech/articles/how-to-upgrade-hundreds-of-react-components-without-breaking-production-27417.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/upgrade-buttons-links.htm>)

Author: Khan Academy

Published: 2019-09-23T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Design system](<https://devfeed.tech/topics/design-system.md>), [upgrade](<https://devfeed.tech/topics/upgrade.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [consistency](<https://devfeed.tech/topics/consistency.md>), [test](<https://devfeed.tech/topics/test.md>), [Deployment](<https://devfeed.tech/topics/deployment.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [components](<https://devfeed.tech/tags/components.md>), [consistency](<https://devfeed.tech/tags/consistency.md>), [deployment](<https://devfeed.tech/tags/deployment.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [news](<https://devfeed.tech/tags/news.md>), [production](<https://devfeed.tech/tags/production.md>), [react](<https://devfeed.tech/tags/react.md>), [test](<https://devfeed.tech/tags/test.md>), [upgrade](<https://devfeed.tech/tags/upgrade.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

This article explains how Khan Academy upgraded hundreds of React buttons and links to components from its Wonder Blocks design system. It describes using a prop-conversion guide, organizing small team-owned changes, deploying often, and validating the migration with detailed test plans and responsive screenshots.

### Source excerpt

By Jangmi Jo Background In 2018, we started renewing our color system using our new shared design system, ... Read more

## Creating Query Components with Apollo

DevFeed: [Creating Query Components with Apollo](<https://devfeed.tech/articles/creating-query-components-with-apollo-27371.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/creating-query-components-with-apollo.htm>)

Author: Khan Academy

Published: 2017-06-12T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [GraphQL](<https://devfeed.tech/topics/graphql.md>), [React](<https://devfeed.tech/topics/react.md>), [React Component](<https://devfeed.tech/topics/react-component.md>), [API](<https://devfeed.tech/topics/api.md>)

Tags: [apollo](<https://devfeed.tech/tags/apollo.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [examples](<https://devfeed.tech/tags/examples.md>), [flow](<https://devfeed.tech/tags/flow.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [news](<https://devfeed.tech/tags/news.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

This tutorial explains a Query Components pattern for React applications using Apollo and GraphQL. The pattern separates data definitions from presentational components, allowing the presentational layer to remain independent of Apollo and GraphQL. Examples cover filtering by postal code, loading and error states, empty results, and Flow types.

### Source excerpt

By Brian Genisio Here at Khan Academy, we've been using GraphQL in several projects with great success. GraphQL ... Read more

## Prototyping with Framer

DevFeed: [Prototyping with Framer](<https://devfeed.tech/articles/prototyping-with-framer-27399.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/prototyping-with-framer.htm>)

Author: Khan Academy

Published: 2016-10-03T22:00:00Z

Content type: tutorial

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Testing](<https://devfeed.tech/topics/testing.md>), [coding](<https://devfeed.tech/topics/coding.md>), [backends](<https://devfeed.tech/topics/backends.md>)

Tags: [backends](<https://devfeed.tech/tags/backends.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [framer](<https://devfeed.tech/tags/framer.md>), [news](<https://devfeed.tech/tags/news.md>), [prototype](<https://devfeed.tech/tags/prototype.md>), [prototyping](<https://devfeed.tech/tags/prototyping.md>), [user-testing](<https://devfeed.tech/tags/user-testing.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

Khan Academy describes how it uses prototypes in user testing to gather feedback on new designs. The article explains the role of low- and high-fidelity prototypes, their limited lifespan, and the choice of Framer for creating and revising prototypes quickly.

### Source excerpt

By Nick Breen We strive to make all of Khan Academy's new features & experiences easy to understand ... Read more

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

DevFeed: [It's Okay to Break Things: Reflections on Khan Academy's Healthy Hackathon](<https://devfeed.tech/articles/it-s-okay-to-break-things-reflections-on-khan-academy-s-healthy-hackathon-27385.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/its-okay-to-break-things.htm>)

Author: Khan Academy

Published: 2017-03-06T23:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Hackathon](<https://devfeed.tech/topics/hackathon.md>), [Software Engineering](<https://devfeed.tech/topics/software-engineering.md>), [API](<https://devfeed.tech/topics/api.md>), [Web](<https://devfeed.tech/topics/web.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [collaboration](<https://devfeed.tech/tags/collaboration.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [equity](<https://devfeed.tech/tags/equity.md>), [hackathon](<https://devfeed.tech/tags/hackathon.md>), [mozilla](<https://devfeed.tech/tags/mozilla.md>), [news](<https://devfeed.tech/tags/news.md>), [reflections](<https://devfeed.tech/tags/reflections.md>), [software-engineer](<https://devfeed.tech/tags/software-engineer.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

Kimerie Green reflects on participating in Khan Academy's internal Healthy Hackathon while working as a Software Engineering Fellow. She describes building Read-to-Me, an experimental project using Mozilla's Web Speech API to read Perseus widget content aloud for early learners. The project was not shipped because it needed further code review and design work, but it provided lessons about curiosity, collaboration, and software engineering.

### Source excerpt

By Kimerie Green For the past few months, I have been working as a Software Engineering Fellow at ... Read more

## tota11y - an accessibility visualization toolkit

DevFeed: [tota11y - an accessibility visualization toolkit](<https://devfeed.tech/articles/tota11y-an-accessibility-visualization-toolkit-27413.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/tota11y.htm>)

Author: Khan Academy

Published: 2015-06-08T22:00:00Z

Content type: release

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [audit](<https://devfeed.tech/topics/audit.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessibility-testing](<https://devfeed.tech/tags/accessibility-testing.md>), [audit](<https://devfeed.tech/tags/audit.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [developer-tools](<https://devfeed.tech/tags/developer-tools.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [linter](<https://devfeed.tech/tags/linter.md>), [news](<https://devfeed.tech/tags/news.md>), [testing](<https://devfeed.tech/tags/testing.md>), [tests](<https://devfeed.tech/tags/tests.md>), [tooling](<https://devfeed.tech/tags/tooling.md>), [unit-tests](<https://devfeed.tech/tags/unit-tests.md>), [visualization](<https://devfeed.tech/tags/visualization.md>), [web](<https://devfeed.tech/tags/web.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

Khan Academy announces tota11y, an accessibility visualization toolkit designed to make manual accessibility testing easier for developers. The article describes its development and use of browser-based annotations to help teams understand and fix accessibility issues.

### Source excerpt

By Jordan Scales Today we're releasing tota11y (on GitHub), an accessibility visualization toolkit that aims to reduce the ... Read more

## Khan Academy Uses Local Storage and Request Queues to Handle Offline Actions

DevFeed: [Khan Academy Uses Local Storage and Request Queues to Handle Offline Actions](<https://devfeed.tech/articles/no-cheating-allowed-27397.md>)

Original publisher: [Read original article](<http://engineering.khanacademy.org/posts/no-cheating-allowed.htm>)

Author: Khan Academy

Published: 2015-08-17T22:00:00Z

Content type: article

Language: en

Sources: [Khan Academy](<https://devfeed.tech/sources/khan-academy.md>)

Topics: [LocalStorage](<https://devfeed.tech/topics/localstorage.md>), [client](<https://devfeed.tech/topics/client.md>), [Code](<https://devfeed.tech/topics/code.md>), [Internet](<https://devfeed.tech/topics/internet.md>), [servers](<https://devfeed.tech/topics/servers.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [change](<https://devfeed.tech/tags/change.md>), [code](<https://devfeed.tech/tags/code.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [function](<https://devfeed.tech/tags/function.md>), [hints](<https://devfeed.tech/tags/hints.md>), [linear](<https://devfeed.tech/tags/linear.md>), [local](<https://devfeed.tech/tags/local.md>), [news](<https://devfeed.tech/tags/news.md>), [offline](<https://devfeed.tech/tags/offline.md>), [queue](<https://devfeed.tech/tags/queue.md>), [request](<https://devfeed.tech/tags/request.md>), [server](<https://devfeed.tech/tags/server.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

This article explains how Khan Academy addressed offline hint cheating by changing the client's request architecture. Actions are stored in local storage and placed in a queue for retry when connectivity returns, with linear backoff to avoid repeated requests during outages.

### Source excerpt

By Phillip Lemons The problem Recently, a number of students on Khan Academy found a way to cheat ... Read more

## How trivago rewrote its web application from PHP and Melody to Next.js and TypeScript

DevFeed: [How trivago rewrote its web application from PHP and Melody to Next.js and TypeScript](<https://devfeed.tech/articles/warp-a-web-application-rewrite-project-28022.md>)

Original publisher: [Read original article](<https://tech.trivago.com/post/2022-05-16-warp-a-web-application-rewrite-project/>)

Author: Tom Bartel

Published: 2022-05-16T00:00:00Z

Content type: article

Language: en

Sources: [Trivago](<https://devfeed.tech/sources/trivago.md>)

Topics: [Next.js](<https://devfeed.tech/topics/next-js.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [PHP](<https://devfeed.tech/topics/php.md>)

Tags: [development](<https://devfeed.tech/tags/development.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [engineering-culture](<https://devfeed.tech/tags/engineering-culture.md>), [framework](<https://devfeed.tech/tags/framework.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [php](<https://devfeed.tech/tags/php.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [web](<https://devfeed.tech/tags/web.md>), [web-frontend](<https://devfeed.tech/tags/web-frontend.md>)

### AI overview

This article introduces trivago's series about rewriting its web application between April 2020 and the end of 2021. The company moved from a large PHP codebase and its home-grown Melody JavaScript framework to a Next.js application written in TypeScript, driven partly by concerns about maintaining, documenting, and training developers on Melody.

### Source excerpt

From April 2020 until the end of 2021, we have put trivago's web frontend on a new tech stack. Having moved away from a quite large PHP codebase and our home-grown JavaScript framework