CC Open Source Blog

New CreativeCommons.org launched 2023 September

multiple authors image

by Sara Lovell, Shafiya Heena, Timid Robot Zehta on 2024-05-28

Creative Commons (CC) launched a new CreativeCommons.org website on 2023 September 27th. This relaunch included not just the website, but the entire technology stack (platform, server, and website components).

Improved platform

The new website is hosted on AWS. This allowed us to design a more secure network architecture between services and deploy/manage the services using infrastructure as code.

Improved services

The services running the website were simplified and updated. The number of distinct servers was reduced from six down to two. Previously, loading the homepage required five services (HAProxy, Varnish, Apache2, PHP+FPM, and MariaDB). The complexity of the old services made troubleshooting more difficult. They were designed before Cloudflare began supporting us through Project Galileo. The new website requires only two services (Apache2 and MariaDB).

Improved website components

Vocabulary

The website consists of a variety of components that use the Vocabulary design system (creativecommons/vocabulary) to present a unified user experience. This relaunch was the first implementation of the new Vocabulary. It has returned to web core principals favoring semantic HTML and appropriately scoped CSS styling. It keeps the style layer responsibilities firmly within the CSS, rather than utilizing a framework like Bootstrap to add a myriad of style-based classes to the HTML layer. Furthermore, JavaScript use has been kept incredibly minimal, offering routes of behavior that can’t already be accomplished via HTML and/or CSS, letting HTML and CSS do what they do best. This simplicity improves performance and also lowers barriers for community contributions.

Accessibility was a priority, making the code more semantic already helps, but we went further in ensuring that all the affordances you get from HTML aren’t blocked or altered via opinionated (and often non-standard) frameworks. The site performs better generally, and is much kinder to slower connection speeds.

The new implementation of Vocabulary includes a new Information Architecture and more stable UX approach for better visitor experiences. CC licensed media is one of our strengths and as such it was important to allow proper attribution to be baked into every instance of media rendering within the design. This means that while the image or video may be important to the flow of content, its attribution also gets a level of appropriate importance as well, highlighting ways in which others might handle attribution and following through on our own mission in the pursuit of better sharing at large.

WordPress

The project utilizes a custom WordPress theme (creativecommons/vocabulary-theme) that implements the new Vocabulary design system.

The theme utilizes the WordPress Classic Editor because of its long-term stability and more stable UX. Gutenberg still does not adhere to adequate Accessibility approaches, nor does it have a sense of stable feature-completeness. This creates an unreliable landscape to build upon. Gutenberg also requires one to build Block composition through React.js to accomplish tasks that are far easier and more approachable with the standard PHP templates that the Classic Editor is compatible with. This dramatically improves the ability for a new contributor to help, and speeds up the development process.

To allow a degree of more varied page composition, Advanced Custom Fields was utilized to more easily add, update, and version control custom fields across pages and page templates. This strikes a balance between more complex page composition, but within a more controllable set of circumstances.

Plugins in general were cut dramatically. The legacy site contained 20 active plugins, while this project relies on less than half, at 9, with hopeful pathways to eventually cut that number even further.

The site utilizes several custom content types and better taxonomies to split up the UX flow of varied kinds of content creation, allowing for smoother multi-author attribution, site-wide notices for fundraising and event announcements, and better blog post organization and way-finding overall.

With the deployment of our new website, we also replaced the legacy ccEngine with the new CC Legal Tools. The current legal tool landscape is refreshingly simple with only seven tools (CC BY 4.0, CC BY-NC 4.0, CC BY-NC-ND 4.0, CC BY-NC-SA 4.0, CC BY-ND 4.0, CC BY-SA 4.0, CC0 1.0). However since previous versions of the licenses were adapted to specific jurisdictions (ported) and we collaborate with the community to support many translations, the new CC Legal Tools app manages over 30,000 documents!

The project to rewrite the CC Legal Tools and replace the legacy ccEngine began in 2020 with a request for proposals (RFP: License Infrastructure - Google Docs). The Caktus Group began the new CC Legal Tools using the Django Python web framework. The work was continued by Timid Robot. Saurabh helped with RDF/XML generation (CC Legal Tools: Machine-Readable Layer — Creative Commons Open Source).

The new CC Legal Tools consist of two repositories:

  1. creativecommons/cc-legal-tools-app: Static site generator using Django
  2. creativecommons/cc-legal-tools-data: Inputs and outputs of the application

The legacy ccEngine consists of around 15,960 lines of Python 2. It was developed and extended organically over time, resulting in a less coherent codebase. The new CC Legal Tools has the benefit of hindsight and was architected as a single application to meet all of current requirements of CC. It consists of around 17,400 lines of Python 3 (including around 4,000 lines of tests). Benefits of the new CC Legal Tools include:

In particular, the fact that the new CC Legal Tools generate static assets is noteworthy. Static assets can be hosted performantly with a very simple service setup.

Chooser

The new chooser beta (creativecommons/chooser) was promoted to production with the new header and footer from the Vocabulary design system for a more uniform user experience.

FAQ & Platform Toolkit

The FAQ (creativecommons/faq) and Platform Toolkit (creativecommons/mp) were updated to use the new header and footer from the Vocabulary design system for a more uniform user experience.

Improved development

Utilizing infrastructure as code, we now have a much more robust staging environment. This allows us to preview larger changes so that they can be deployed to production with minimum risk. We also improved our local development environment and content synchronization tooling (creativecommons/index-dev-env). This means that not only did we fix many old bugs, but when new bugs are identified, we can fix them more rapidly!

Thank you

Thank you to the people who directly contributed to the success of the new website!