barbielang

• 

  MergeSort in barbielang

Inspiration

Learning to code is often highlighted as a world of math, syntax, and rigid logic, which can often feel overwhelming for young kids. Paired with a boring or complicated interface, the barrier to entry becomes even higher, discouraging many kids before they’ve had a real chance to explore what coding can be.

This challenge feels even heavier for young girls. Many of them decide early on, often without realizing it, that coding isn’t for them as they don’t see themselves reflected in who codes, what coding looks like, or where they belong in those spaces. Over time, that absence sends a message, “this world wasn’t made for you”.

This is why we created barbielang. Going off of Barbie’s cultural idea, “Anything is possible”, we wanted to create a world for young kids where they can build anything using code. barbielang allows kids to learn coding with intuitive code blocks, and a creative environment (it’s pink!). By embracing this aesthetic, we push back against the idea that technical spaces must look a certain way to be taken seriously. Using pink was an intentional reminder that creativity and personal identity don’t disappear when you start writing code.

barbielang doesn’t make coding easier by removing concepts or simplifying logic. Instead, it makes coding more relatable. The same foundational ideas like conditions, loops, variables, and functions are all still there, but presented in a way that feels more human and approachable. As an entry point, BarbieLang helps learners build confidence first, so they’re better prepared to transition into traditional programming languages later.

What it does

barbielang is an interpreted block-based programming language.

How we built it

We used the Blockly library for the front-end which is a visual programming editor that uses drag and drop blocks. This library powers popular coding platforms such as Scratch and Microsoft MakeCode. We customized it by making it Barbie themed. For the interpreter language, we used OCaml (lexer, parser, evaluator). js_of_ocaml compiles the OCaml interpreter to JavaScript so that it runs in the browser.

Custom Language Features

Ken.say() = print feel/otherwise = if/else keepgoing = while loop kenough/kentinue = break/continue glitter/dush = true/false

Assets and theming

Bartex - custom Barbie font applied across all UI Custom barbie theme for Blockly Splash screen with fadeout overlay Glitter particle animation on block deletion

Challenges we ran into

We ran into several challenges during development. One of the biggest was designing andBlockly’sting the interpreter logic, especially ensuring that BarbieLang programs executed correctly beyond the visual blocks. Another challenge was identifying and working with tools to convert OCaml to JavaScript so the interpreter could run in a web environment. We also faced difficulties working with Blockly, which does not natively support TypeScript. Modifying and extending a large, legacy JavaScript codebase required careful use of runtime hooks and overrides. On the design side, customizing Blockly’s CSS was surprisingly challenging, especially when integrating Barbie-themed fonts, images, and visual assets while maintaining a consistent and usable interface.

Accomplishments that we're proud of

We’re proud of the thoughtful details that make barbielang feel alive, from playful animations like a trash can that spews glitter when blocks are deleted, to the satisfying sounds of blocks clicking together. We also focused heavily on maintaining a cohesive user experience, using consistent fonts, Barbie-inspired keywords in place of traditional programming keywords, and a beach-themed workspace that feels more inviting. Most importantly, we’re especially proud of building an interpreter that brings barbielang to life, turning these creative design choices into a fully functional programming language rather than just a visual experience.

What we learned

We learned how to modify a large and complex JavaScript library, Blockly, which was originally created before TypeScript. This required us to work with runtime hooks and method overrides to extend its functionality. In addition, we built a custom interpreter to execute barbielang programs, ensuring the language was more than just a visual interface. On the design side, we used a combination of CSS, JavaScript, and Canvas to create the poster, workspace, and custom blocks, balancing playful aesthetics with a cohesive and usable development environment.

What's next for barbielang

Moving forward, we plan to expand barbielang by adding more built-in library functions and utilities to increase its expressiveness and versatility. This could include additional data structures, more interactive visual elements, and creative functions that allow learners to manipulate graphics, sound, and animations directly through code. We also aim to enhance the user experience by introducing more customizable blocks, improving error messages to be even more instructive and encouraging, and refining the interpreter for greater performance and scalability. These additions will help make BarbieLang not only a fun and approachable introduction to coding but also a platform that grows with learners as they develop more advanced programming skills.

Built With

• blockly
• javascript