Hello everyone! My name is Ayush Sahu, and I am thrilled to announce that I have joined Creative Commons this summer through the Google Summer of Code (2024) program. As a passionate advocate for open knowledge and a firm believer in the power of collaborative innovation, I am grateful to contribute to an organization that has been championing the free exchange of information and creativity for years.
I was inspired to collaborate with Creative Commons because of the profound impact it had on me personally. As a child creating videos for my YouTube channel, I was immensely grateful for the resources provided by Creative Commons. Their promotion of free and open knowledge enabled me to access high-quality content without the constraints of traditional licensing, fostering my creativity and passion for sharing information. This experience instilled in me a deep appreciation for the organization and its mission.
The Project I Am Working On
The project - Modernize CC Resource Archive focuses on implementing a comprehensive visual overhaul to the Resource Archive to align with current Creative Commons aesthetics and functionality standards. Utilizing the Internal Design System (Vocabulary), the project aims to upgrade the visual design, implement semantic, accessible, and standards-compliant HTML
, CSS
, and JavaScript
, and improve user experience (UX) for resource submission while ensuring site stability on GitHub Pages
. Through these efforts and solid documentation, the revamped Resources Archive will meet modern standards, enhance usability, and facilitate maintainability for both users and developers.
Community Bonding Period
The community bonding period has been an incredibly enriching experience. During this time, I had the opportunity to meet my mentors, familiarize myself with the project, and engage with the vibrant community behind Creative Commons. I participated in meetings and discussions, which have deepened my understanding of the organization's values as well as the codebase. The warm welcome and the wealth of knowledge shared by the community have been truly inspiring.
Environment, Code & Ideation - Weeks 1, 2 & 3
These were the initial weeks of the project which went into testing the development environment, planning upcoming UI changes and getting acquainted with the working process. Firstly, my project mentor Sara guided me through my first contribution in the coding period. I was granted member status at the Creative Commons Organization on GitHub, which was both new and exciting for me.
The key achievements were:
- PR#266 - Updated the
docker-compose.yml
file to the current spec. With the help of my mentor, I opened this first pull request in the coding period. The file was out of specification, as theversion
element at the top ofdocker-compose.yml
file was just informative. - Testing Docker Configurations: With immense help from mentors Sara and Timid Robot, I got the Docker environment ready for development.
- Learned more about Jekyll and read the Vocabulary code. Got familiar with classes in vocabulary.css and the custom CSS variables in library-vars.css.
- Accessibility Improvements: Learned about keyboard navigability and optimizing the website for better accessibility using semantic HTML and appropriate CSS properties.
- Issue Listing: Identified and listed relevant issues related to semantic code and UI changes. Also added some issues as a to-do list, as suggested by my mentor.
- Reviewed the present structure of the files, and worked on ideas to improve the structure for better understandability and grouping of similar files.
At the end of these initial weeks, I realized that I have spent enough time on understanding the code and planning on things. But as my mentor suggested, things will get smoother once we start working on them practically. So I decided to increase the pace of work in the upcoming weeks to get the planned tasks executed.
Execution, Updation & Refactor - Weeks 4, 5 & 6
As the midterm evaluation approached, we held weekly review meetings to plan changes and contributions. The pace picked up in weeks 5 and 6, resulting in several presentable pull requests dedicated to UI changes and code refactoring. Notable tasks executed include:
Improving File Structure
With discussion with my mentor, I improved the file structure in the codebase for better understandability and maintainability. After updating the structure, the paths to all the files that were changed were modified. This was achieved by a group of Pull Requests that were created catering to the issue. The pull requests were:
- PR#280 - Adds
footer.html
to the_includes
directory. - PR#281 - Includes
footer.html
to all the pages of the site. - PR#282 - Shifted
an-explanation-of-creative-commons
to_resources
. - PR#289 - Improves the file structure in the codebase.
- PR#292 - Updates the paths to downloadable resources and PDFs.
- PR#296 - Updated the
resource-template
with new paths for images.
Listing Page UI Changes
The listing.html
page is responsible for the display of resource cards on the index.html
and all.html
pages. The resource cards had an outdated visual setup and needed to be aligned with the Internal Design System of Creative Commons known as Vocabulary.
Through the PR#298, I performed the following tasks:
- Refactored the html structure of the resource card to
IMAGE - TITLE - BLURB
. - Utilizing vocabulary, enhanced the style for
thumbnail list
inlisting.html
. Worked on the grid structure instyle.css
. - Likewise, worked on enhancing style for the
thumbnail box
,thumbnail title
,thumbnail image
andthumbnail blurb
. - Worked on Fonts, colors, background colors, etc. according to
vocabulary
. - Assigned properties like
--underline-background-color
from vocabulary into style.css. - Formatted the
style.css
andlisting.html
files withprettier
. - Fixed the responsiveness of the resource cards.
- Added Documentation in
style.css
for understandability.
And through the PR#302, the following tasks were completed:
- Added a heading to the page.
- Added clear documentation about various sections in the file.
- Formatted the code with
prettier
code formatter.
All these changes gave the website a new look, aligning more closely with the standard Creative Commons design schemes.
Listing Page (All) Javascript Changes
The javascript code in listing.html file resided in the <head>
section of the page. The code was outdated and was lacking the ES6 Javascript concepts. For example, there were uses of var
keyword, document.write()
method, etc.. The code was responsible for a number of tasks related to the display of resources. It extracted the user-selected categories from the URL and then returned them as variables. Also, the javascript code was responsible for displaying the resources which contained the selected categories.
Through the PR#300, the following tasks were completed:
- Updated the functions and code to follow ES6 javascript concepts.
- Replaced the
document.write()
method withDocument Object Manipulation
. Thedocument.write()
is old and not preferable. - Utilized the javascript
DOM
for all the tasks related to filtering of resources inlisting.js
. - Assigned checks to the categories selected by the user (which are extracted through the URL), sanitizing the input and preventing any attacks on the website.
- Added proper documentation for all the functions and sections of code for better understandability.
Resource Page UI Changes
The resource page is a layout
to show various resources that are submitted in the resource archive. This layout page accepts values from the front matter
of various resources. This page was overall enhanced in terms of alignment to Creative Commons’ Design System.
The PR#304 performs the following tasks:
- Refactors the whole code for
resource.html
page by implementing semantic HTML. - Improves the styling of the page in
styles.css
, by utilizing vocabulary. - Makes the page responsive.
- The inspiration is drawn from the Vocabulary Blog Post Page.
These three weeks saw the most significant work being merged, resulting in a refreshed interface. Despite a slow start, consistent effort and mentor support helped me catch up by the midterm evaluation, making these weeks a great learning experience.
Issues Solved Till Now
The issues relevant to the project which have been solved until now are listed below:
- #17 - upgrade JS code in listings.html
- #176 - make thumbnails responsive
- #242 - add footer in submission and resource pages
- #265 - The docker-compose.yml file currently out of spec
- #267 - Improve documentation for Dockerfiles
- #269 - relocate footer code to separate file ‘footer.html’ for reuse
- #273 - Resource file in the wrong location
- #276 - Inconsistent docker behavior - Parsing Gemfile
- #283 - Unnecessary google analytics function in listing.html
- #285 - Unnecessary google analytics function in resource and submission.html
- #287 - The file structure in the codebase can be improved. (re-structuring)
- #288 - The style.css file is not properly organized and lacks documentation
- #290 - The download [pdf] file links at bottom of resources aren't working
- #293 - The resourcetemplate.md needs to be updated.
- #297 - Change the design of resource cards on homepage using vocabulary
- #165 - section heading for resource cards
- #301 - Add proper documentation to listing.html, refactor for structure
- #101 - Organize code with proper indentation
- #41 - UI/UX for resource page
- #272 - unwanted underline in the resource page
My Experience - From Getting Selected To Midterm
Getting selected to Google Summer of Code was honestly a very big deal for me. When I joined my university for my undergraduate degree, our seniors introduced us to two guys who got selected in GSoC that year. They were given immense importance and respect by our seniors and also my batchmates. From that instance I got to know that being a GSoC Contributor is a very prestigious thing for someone hoping to start their career. Having zero background knowledge in programming, I thought it’s not something that I should aim for, and leave it to the guys who already are pro at coding. But the dream of being a GSoC contributor just stuck somewhere in my head. Fast forward to my third year at the university, I became good with frontend development as it was something that naturally excited me. After working hard for some months, I was finally selected for the GSoC 2024 program with Creative Commons.
Now after being selected to GSoC, I was very happy and satisfied as it was a dream come true. As a result of this, I could not do the amount of work that I should have, in the initial weeks of the program. I had weekly review meetings with the org mentors, who constantly supported and encouraged me to catch up to the planned timeline of tasks. As a result of their motivation and some extra efforts, I was able to finish the tasks that needed to be done till the midterm evaluation. At this point I feel really good that we are successful in completing the tasks till the midterm evaluation. The best thing about this is that it was always a combined effort. I am planning to execute more tasks in the other half of the period, than we have till now. I’ll be faster as I have become really comfortable working with my mentors in these six weeks.
Gratitude and Acknowledgements
I would like to express my heartfelt gratitude to my mentors and the entire Creative Commons community for giving me this incredible opportunity. Your support and guidance have been invaluable. Special thanks to my mentor Sara Lovell (Possumbilities) for the constant support that I received from you all the time. I am really grateful for not only the technical help, but also the motivation, support and encouragement I got from your side. Also Timid Robot and Shafiya Heena were always present there whenever I needed them. Be it the weekly review meetings, or my confusion related to the development environment, I never felt I’m alone in this . I am excited to work further under your guidance and contribute to the shared vision of Creative Commons.
Join The Discussion
There are numerous ways you can join the discussion and contribute to the project. Whether it’s by providing feedback, contributing to the codebase or simply spreading the word about open knowledge, your participation is highly encouraged. You can check out our github repository here, to find the codebase and join the discussion over there.