Originally published at: Outreachy Project "Revamp the Community Websites and Applications" progress update – Fedora Community Blog
Ojong is working with the Fedora websites and apps team as an Outreachy Intern. This blog post is her experience and project update so far.
My Journey
I was encouraged to apply for the Outreachy program by a friend who Outreachy alum. I was pretty excited when my application got accepted. I am particularly happy with my decision to go with the Fedora project. After exploring, I applied for the “Revamp the Community Websites and Applications” project.
My goal with this project was to build on my skills in HTML, CSS, and Javascript while contributing to an amazing Open Source project.
Project update
Throughout my internship, I was able to pick up engaging tasks and complete them. My journey started with working on the Fedora Bootstrap project which we are upgrading to use Bootstrap v5. Most of what I did involve cleaning up the entire project. I made improvements in various areas such as:
- Change the formatting of the content
- Replace incorrect links
- Fix broken components
- Improve on the stylesheets
Since the designs were unavailable, I started working on a different sub-project suggested by my mentor.
My new task was to create interactive SVGs for the Fedora Project websites to replace the current static ones. Some existing charts needed a complete revamp. I had to work with Apache Echarts, which was a little challenging to understand at first, but now I enjoy working with it a lot! To get familiar with the library,
- I went through a few resources to understand the project details and requirement
- I got hands on, making an SVG file interactive using echarts.js.
For example, in an interactive SVG,
- the user can zoom in and move it around.
- Hovering or clicking on a specific node displays contents about that node.
Once I felt comfortable, I started working with more complex SVGs like the Fedora Project organizational structure chart.
In order to make the nodes interactive, We
- used Inkscape to uniquely name each node
- created a JSON file containing detailed information about each node
- used javascript to link up the information with the nodes.
After this was done, hovering over or clicking on a node like “Mindshare” brings up detailed information about Fedora Mindshare, with links you can follow to know more.
So far, I’ve enjoyed working on this project a lot. I’ve learned to do new and amazing things with SVG files that I didn’t think were possible before. I also worked with a bunch of new tools and libraries. Now, I just have to make a few more adjustments to the implementations, and start making other charts interactive too, next being apps.fp.org!
Thank you for reading my updates so far.