Skip to main content

DPS 909 - Release 0.2 - Hacktoberfest Week 1

As mentioned in my last blog post, I am currently in the midst of participating in Hacktoberfest in order to deepen my understanding of open source. For my first week, I decided to start with a simple issue that I could confidently contribute to: the HackSta account's issue #12. This issue invites other Github users to contribute customized icons for the Atom text editor (a product of Github!). It was very easy to start - users simply have to fork the repo and contribute new designs for the Atom logo in SVG format. The project has had many contributions in the past, and already has a large collection of over 500 icons, so there was lots of materials and references to work off of. The entire collection of custom Atom icons can be found on the project's website. There are entire collections of interesting variations on the default Atom logo, including palettes pulled directly from the color values of country flags and famous sports team logos.

Take your pick - there's tons!

To begin my contribution, I first looked through the project repo in order to understand all the standards and conventions I'd need to adhere to for my eventual pull request to be truly valuable to the project. The repo's readme document has a very useful "How to Contribute" section that contained all the information that interested users need to get started. The instructions were fairly straightforward:
  • Create your own Atom icon using any of the existing contributions as a template.
  • Save your contribution(s) as an SVG file.
  • Remove the width and height attributes from the SVG (it causes problems for the project's automated processes).
  • Adhere to a specific naming convention if you are contributing multiple icons as part of a set (i.e. setname_iconname).
  • Submit a formal pull request so your contributions can be reviewed and (hopefully!) merged into the project's master branch
I decided to have a bit of fun and contribute a set of icons, called "Atomay", based on popular franchises in Japanese animation. For my fellow enthusiasts, see if you can identify what each of my four icons are based on:





I have submitted my custom icons in a pull request, which, at the time of writing, is still pending. I hope the project managers see my contributions as valuable and incorporate my PR into the official repo soon - it would be an honor!

This was a very fun contribution for me, as I have a background in graphics design and was able to come up with the icon designs fairly quickly, which was exactly my goal! I wanted my first Hacktoberfest contribution to be something I could confidently do, in order to give myself a strong start. However, I run into a few issues, particularly when it came to editing the metadata of the SVG files. I'd always known that SVG files were simply XML files with math-based instructions on how to construct the contained graphics, however despite my experiences in graphics design I'd never actually opened the SVG files in a text editor before. In order to meet the standards of the Atom icons project, I needed to edit the metadata to remove the width and height attributes... but when I attempted to do so on my first icon, I found that the entire canvas became misaligned. After some troubleshooting, I discovered that Adobe Illustrator - which I used to edit the icons -  seems to perform some proprietary black magic on the SVG metadata, which did not play well when I used one of the existing SVGs in the project as a template. The solution turned out to be explicitly opening Illustrator's artboard settings and manually setting the canvas boundaries. After that, I was able to go into the metadata and delete the unnecessary attributes without issue.

Just goes to show that nothing ever goes as planned... and perhaps do more research the next time I attempt to use proprietary software on open source work. Lesson learned!

Comments

Popular posts from this blog

DPS909 - Lab 1 - Github Trending Research: WebGL Fluid Simulator

The WebGL Fluid Simulator is a small application that allows the user to play with simulated fluids right in their browser, and works on both PCs and mobile devices. The visual effects follow proper fluid dynamics, and can be manipulated in real time by pointing and click, as well as several available options such as quality, density, and velocity.  The app is written in JavaScript, and as the name suggests, visually renders its effects using WebGL. It was created by Github user PavelDoGreat based off another Github project:  Fluids-2D , and is distributed under the MIT license. As of September 8th, 2019, WebGL Fluid Simulator is trending with 2,307 stars during the month, and 6,070 stars in total. Main interface of WebGL Fluid Simulator by Github user PavelDoGreat I was interested in investigating this project as it demonstrates the breadth of open source resources on Github. Users can find projects that range from complex systems and APIs, to small plug-ins and simpl...

DPS 909 - Lab 3 - Hacktoberfest, and the Very Scary Repository

It's that time of year; the mornings are getting chilly, the leaves are turning, the pumpkin spice is flowing, and open source developers are getting all worked up over something called Hacktoberfest . Not to be confused with the other , similar-sounding (though arguably no less beer-filled) celebration, Hacktoberfest is a chance for open source enthusiast to truly flex their projects and contributions. Hosted by DigitalOcean , Hacktoberfest 2019 is an event running throughout the month of October that encourages activity in the open source community. It is completely free to sign up, and participants can even link their Github accounts to use as their Hacktoberfest profiles. As you may have already guessed, I will be participating in this event as my next major milestone on my journey into the world of open source. Through the miracle of APIs, even my profile picture was imported! While the prospect of diving headfirst into such a large, open source event as a beginner may s...

DPS 909 - Release 0.3 - Diving Deeper

Hacktoberfest has come and gone. For everyone who attended and made an effort... hopefully you all got your shirts! For the rest of us... well you win some and then you lose some. But if you didn't, don't let it get you down - the true open source is the friends you made along the way. And speaking of friends, our Fall 2019 class of DPS 909 at Seneca College has decided to do something a little special for our Release 0.3 assignment: we've started our own internal, open source project! To cut a long story short, we've been tasked with developing a web application that aggregates open-source-related blog posts from current and former students of the DPS 909 course. A very old, and very out-dated version of the website current exists here , but it is clunky, buggy, and prone to errors that block up the whole system. It's our job as the current students of DPS 909 to redesign and revitalize this website into something much more intuitive and robust. The repo of our ...