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.
CC Legal Tools
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:
creativecommons/cc-legal-tools-app: Static site
generator using Django
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:
Currently supported software (Python 3, Django 4.2, etc.)
Simplified data model
Improved translation handling
Improved RDF/XML generation/management
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!
Nate, former Director of Communications & Community
Sara, Full Stack Engineer
Shafiya, Systems Engineer
Timid Robot, Director of Technology
as well as many other previous staff, community contributors, and other
supporters!