Outreachy Midpoint Blog Post
Hi there! My name is Queen, and I’m an Outreachy intern at Creative Commons. My project involves consolidating and implementing the Vocabulary design system across Creative Commons ancillary websites. In this post, I’ll share my progress and key takeaways from the first half of my internship.
Project Overview
The goal of my project is to implement the Vocabulary design system across several Creative Commons ancillary websites like the CC Open Source, CC Legal Database, CC Search Portal, and CC Resource Archive.
Progress So Far
Phase One: Refactoring Markup to Align with Vocabulary
In the first phase, I focused on refactoring the markup to align with Vocabulary’s components and context. Here are the pull requests (PRs) merged during this phase:
- PR 118: Refactored the recent blog post section on the homepage.
- PR 856: Refactored the homepage markup to align with Vocabulary components.
- PR 862: Updated
page-with-toc.html, which serves as a template for many pages. - PR 863: Initially, I planned to refactor the markup to Vocabulary’s context, but after feedback from my mentor, I instead removed legacy class names while retaining the table structure.
- PR 865: Refactored the blog’s author page to match Vocabulary’s “person” context.
- PR 866: Updated the blog structure to follow Vocabulary markup.
- PR 867: Refactored the Project List page, leaving the table markup intact but removing old styles.
- PR 868: Refactored the Issue Finder tool, replacing Vue.js with plain JavaScript. Although removing Webpack will happen later, this PR set the stage for future improvements.
- PR 870: Aligned the Authors page with Vocabulary’s team styling.
- PR 871: Refactored the Project Ideas page, incorporating Vocabulary’s project markup and removing legacy styles.
- PR 873: Dynamically updated the body tag’s class in
layout.htmland added a body-class field to theblog.inimodel file for consistent styling. - PR 880: Refactored
page-with-title.html(used by CC Tech Archives) to align with Vocabulary. - PR 886: Updated the header component markup and removed old class names.
Phase 2: Adding Local Styles
After refactoring the markup, I moved on to styling sections that Vocabulary doesn’t cover. Here are some of the merged PRs so far;
- PR 888: Added local styles based on Creative Commons’ main website for the homepage and other sections, such as “Get Involved” and “Featured Projects.”
- PR 891: Created a new
issue-finder.cssfile to restyle the Issue Finder page while removing legacy styles but maintaining legacy design. - PR 898: Integrated Datatables and jQuery by adding them to a vendor folder. Styled the table and code blocks using existing website styles.
- PR 990: Styled the CC Search archive table using Datatables.
Current Status
I’m a little behind schedule—I had planned to start work on the Legal Database website by now. However, I’m wrapping up the CC Open Source website this week and will move on to the next phase soon.
Lessons Learned
This internship has been an incredible learning journey. Here are some key takeaways:
Technical Skills:
- I’ve become comfortable working with Lektor, a static site generator that was entirely new to me.
- Implementing the Vocabulary design system has improved my problem-solving skills, especially when dealing with legacy code and adapting the system to fit unique website needs.
- To localize the table component, I had to read the DataTables documentation, which helped my ability to learn on the go.
Collaboration:
Working with mentors has taught me the value of clear communication, especially when addressing blockers or seeking feedback.
Project Management:
Breaking tasks into smaller chunks, prioritizing effectively, and maintaining consistent progress have been critical in managing this project.
This experience has significantly boosted my confidence as a front-end developer, particularly in creating user-friendly and accessible interfaces.
That’s it for now! Thank you for reading about my progress. I’m excited to see how the second half of this journey unfolds!