CC Open Source Blog

CC Vocabulary - My First Four Weeks


by Chidiebere Onyegbuchulem on 2020-01-14

This blog is part of the series: Outreachy Dec 2019 round: CC Vocabulary

Vocabulary is Creative Commons's web design system; an extension of CC Style Guide for the web. This project was originally started by my mentors Dhruv Bhanushali and Hugo Solar to unify all of CC websites and applications. Vocabulary has been undergoing a lot of changes lately. As part of my Outreachy internship, I will be contributing to extending its scope and usage.

My Progress so far...

Before my first contribution, Vocabulary comprised of reusable UI components built with Vue.js and a live styleguide built with Styleguidist. My first task was to create an interactive playground experience with Storybook which would eventually replace that built with Styleguidist. Storybook was chosen for obvious reasons:

My first three weeks were more of struggling and learning. Coming from a React background, I had to reconfigure my brain to understand Vue and Vue storybook. I did a lot of reading of documentation and articles, testing locally and asking for help when stuck. I eventually completed the task and created a pull request. A live version of the interactive playground can be seen here. Please feel free to play around with it and give a feedback.

The following week, I worked on updating some Vue Vocabulary components with the CC Vocabulary design library.

What's Next...

This week, I will be working on extending the usage of vocabulary to other CC websites that are not built with Vue. What I worked on previously was Vue-Vocabulary for CC websites and platforms that support Vue. The goal is to use the already developed stylesheets in Vocabulary to build the same functional components with vanilla JavaScript.

Well, all said, the past weeks have been great. I will be sharing more in two weeks.