"Three months?!"
"Can't be that soon, right?"
"Right?!"

Damn.

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 InputField and Button, some unconventional ones like Definition and Quote, and some components that only our own tailored design library could afford like Header and Footer.

Here's a list and there's a living styleguide.

Elements

• Heading
• Paragraph
• ImageView
• Button
• ChoiceField
• InputField
• SelectField
• SwitchField
• Rating
• ProgressBar
• Statistic
• LicenseIconography
• Shield

Layouts

• Container
• Section
• Grid
  • GridCell
• Tabbed
  • TabbedPane
• Table
  • TableCell

Patterns

• Card
• Definition
• Header
• Footer
• LicenseBadge
• BrandImagery
• Quote
• Locale
• NavigationLink
  • NavigationLink
• Trail
  • TrailCrumb

Button

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.

Quality

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.

Usage

CC Vocabulary can be installed via npm and used with a build process...

$ npm install @creativecommons/vocabulary

...or used directly in the browser inside script tags.

<script type="text/javascript"
        src="https://unpkg.com/@creativecommons/vocabulary"></script>

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">

Demo

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.

See the Pen CC Vocabulary UMD demo by Dhruv Bhanushali (@dhruvkb) on CodePen.

Contributions invited

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

Repository: https://github.com/creativecommons/cc-vocabulary/

Commits: https://github.com/creativecommons/cc-vocabulary/commits/master

Issues: https://github.com/creativecommons/cc-vocabulary/issues

Contributors: https://github.com/creativecommons/cc-vocabulary/graphs/contributors

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.

Sneak peek

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.

Status

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

Repository: https://github.com/dhruvkb/cccatalog-frontend/

PR: https://github.com/cc-archive/cccatalog-frontend/pull/413/

Commits: https://github.com/cc-archive/cccatalog-frontend/pull/413/commits

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.

😴 TL;DR?

Summarising, CC Vocabulary is now mature and is getting married to CC Search. GSoC was a successful matchmaker.

❤️ Postremo

"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~