CC Open Source Blog
CC Vocabulary: Care for dessert?
"Can't be that soon, right?"
Hi, it's me again. It's been long since I last sat down to write. I haven't been punctual with my posts and my only hope of redemption is that my punctuality with code makes up for it somehow.
With GSoC deadlines drawing to a close, it makes sense to have a post describing the fruits of this quarter-year of labour. Let's start with two big news pieces.
If this feels like a self-congratulatory piece patting myself on the back, I apologise. It's also my GSoC final submission work product report.
🎉 Vocabulary is ready for consumption!
It's been that way for almost a couple of weeks, actually. I just wasn't able to take time out for a blog post.
The rate at which Vocabulary components have received compatibility-breaking changes has continuously gone down week after week. Code has been refactored, yes. Stylesheets have been cleaned up, yes. Documentation has been updated and at times even rewritten, yes. But in terms of functionality, the components are stable and solid enough to act as a foundation for the apps to come. The external API for the components has matured considerably.
It's been about twelve weeks since the first commit to CC Vocabulary way back in May. As with everything else in software, Vocabulary has moved fast. Under the mentorship of Hugo Solar and over the course of 300+ commits and 17+ alpha releases, Vocabulary has gone from 1 component that just said "Hello World!" to over 33 components that are capable of replacing over half the entire codebase of the frontend for CC Search. Talk about kids growing fast!
You get all the components a typical web application needs, and then some. It's
got the standards like
Button, some unconventional ones like
Quote, and some components that only our own tailored design
library could afford like
Here's a list and there's a living styleguide.
Vocabulary also offers some Stylus mixins, token collection in Stylus, SASS and JSON and some handy utils too. That's about it.
I know what you are thinking and yes, all of that, including the designs and revisions, was accomplished in two months and a half.
The code follows the Standard code style and the Vue official style guide. In addition, Vocabulary has its own style guide that has rules right down to the order of rules in the CSS. This ensures that code is sensibly written, easily understandable and as little in debt as possible.
CC Vocabulary can be installed via
npm and used with a build process...
$ npm install @creativecommons/vocabulary
...or used directly in the browser inside
Even JS is optional (may break in some cases, horrifying so).
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@creativecommons/vocabulary/vocabulary.css">
Of course I'm not going to hype you up and leave you hanging! Here's a pen to show you what's possible. Actually, since the pen uses the UMD version, what it shows is the lower end of what's possible.
Also to make the repository friendlier to incoming developers a number of issues have been dug out, reported and labelled. This provides incomers, like myself three months ago, a channel to familiarise themselves with the codebase well before Outreachy and the next Summer of Code.
GSoC work product
The proposal listed a number of components to be developed as a part of the program. Over twice that number of components have been implemented.
In other news...
🎉 Search is largely integrated with Vocabulary!
This was the subordinate goal of my Summer of Code proposal. Surprisingly enough, once the components were ready it was only a matter of finding code in CC Search's frontend and swapping it out with Vocabulary components. Oh, the tests have pained me so. Literally every single test broke down and had to be manually updated.
The end result of the toil under the guidance and review of Breno Ferreira is a search experience that feels polished and looks beautiful and works elegantly. It also enables another half a billion people to use the platform and sets the groundwork to take that number higher.
The bundle size is lower and code manageability is higher thanks to decoupling of low level components from the high level experience. Can you ask for more? How about more consistent icons?
The least I can do is attach screenshots of the new CC Search to give you a sneak peek into what Creative Commons apps, starting with Search of course, will look like in the future. These are screenshots, not mockups.
Yes, CC Search has largely also been translated to Hindi, making it accessible to the Internet-savvy chunk of the half a billion people who speak the language in the country with the second-largest Internet enabled populace (first if you factor in democracy and freedom).
These pages too have been internationalised.
Did you spot the new icons? I made a choice to adopt Font Awesome for Vocabulary as it is a modern, scalable and lightweight alternative to finding a cohesive set of icons from the trove of the Noun Project and bundling them ourselves. Plus Font Awesome provides Vue components! What's not to like.
I'm not sure if there is enough time in the GSoC period for the integration PR to be reviewed and merged but I'm not going anywhere and neither are you. You can follow the integration as it happens here.
If you're enthusiastic you can clone the branch and run the setup on your machine. Experience it for yourself, how about that?
GSoC work product
The proposal aimed to replace a lot of indigenous components with Vocabulary counterparts. Internationalisation and a consistent icon system are just me going above and beyond.
"I think... I feel good about it."
GSoC has been a thoroughly refreshing, enriching and educating experience. Without a shred of doubt I am taking away a lot from this exercise (notably, the knowledge of the existence of CSS custom properties). My only hope is that I have given back a comparable amount of output to the community that gave an outsider like me a chance to work on something this impactful in the long-term.
I can't wait to continue my journey post-GSoC and see what the core team and the next batch of interns creates for, and using, Vocabulary.
GSoC may be over, but CC and I have a long way to go.
~Signing off, for now~
Posts in the GSoC 2019: CC Vocabulary series
- CC Vocabulary is a new design system for Creative Commons
- CC Vocabulary, the lexicon so far
- CC Vocabulary: the main course
- CC Vocabulary: Care for dessert?