Skip to main content

Micro-Note : My First Steps into Open Source

I just finished building Micro-Note, a simple web based note taking application. While it is not the most innovative app, it marks my first steps into the world of open source. Not only was I able to learn and exercise essential Git skills including the creation and operation of a repo, but also brush up on my web development basics. This involved both features found on the GitHub web app, and the Git command line interface. I found this highly useful as I am aware Git will be a part of my career moving forward, whether it be for open source or other ventures as a developer.

The app is simple and fairly self explanatory.  It allows the user to input notes into the web page and save them to continue or edit them later if needed. It is built with the standard web stack, HTML5, CSS, and JavaScript. It uses the FilerJS Browser Filesystem libraryto save the user input to a local file so the user can save and resume their note-taking at later time.  This was helpful as it allowed me to brush up on my web development skills. This exercise revealed to me I am somewhat rusty coding in JavaScript being 4 months removed from any sort of web development.

The additional feature I implemented was the use of the CSS library, PaperCSS. Plugging in this library allowed  my page to achieve the look and feel of a notebook by having a handwritten looking typography and colour scheme. The note area is also enclosed with a border and gradient background to add to the look and feel of the notes being written on a note card. The library includes some animations during mouse hover and click events to give the UI a very smooth a fluid feel.

Screenshot of Micro-Note, built using PaperCSS



I also learned to use GitHub pages for hosting web pages. I found this very cool, especially since it is free. I am now planning on using this feature to host a personal portfolio website in the future.

You can try Micro-Note at this URL: https://eekbatani.github.io/micro-note/

You can view the code in its repo at: https://github.com/eekbatani/micro-note

I look forward to continuing to develop my skill set and foundation in the world of open-source.

Comments

Popular posts from this blog

Lab 8 - Contribution Goals for CDOT Telescope & LifeStyle E-Commerce

After successfully completing Hacktoberfest, we move onto bigger and better challenges in open source. By November 15th I have the following goals to complete: 1. Contribute to a bigger issue on an open-source project (no more "good-first-issue" tags). 2. Contribute to CDOT Telescope, an internal project built by my fellow classmates. In this post I will break down my issue and goal for each goal. External Project- LifeStyle E-Commerce  This is a project I found in hacktoberfest and fixed a styling alignment bug for. You can find the full details of my contribution in my previous post.   If you are already familiar wit the project, you can skip the overview section. Overview Lifestyle E-ommerce is a front-end project for building an online store. It supplies various well designed pages for front-end developers to customize and utilize as a starting point for their e-commerce projects, whether it be for themselves or their clients. I gravitated towards this proj

Release 0.4 - My Internal Pull Request to Telescope

After a frantic 12 weeks, we have arrived at Release 0.4 - AKA the final release for the DPS909 Open-source course. Much like the previous release I covered, this release is comprised of two parts: an internal pull request to CDOT Telescope, and a more challenging external pull request to an open-source project. To improve your reading experience, I've also split my blog up into two parts. This post will be covering my internal contribution to CDOT Telescope. For a full description on what Telescope is, please refer to my previous pos t where I introduced it in detail, or the official overview . The Issue -  Search icon floating with window resize  Demonstration of the floating search issue Another student had added a dynamically floating search bar to the front end, however it was not functioning correctly as it would sporadically float around as you scroll or resize the page.  The initial hypothesis was that it was positioned relative to the view port cs it's

Hacktoberfest - Pull Request #2 : Rhymus

In my previou s post , I announced and explained my first pull request for this year's Hacktoberfest event, where I contributed to the documentation of CMS program called RawCMS. I also mentioned that documentation was simply a starting point for me as I aimed to contribute to the code/content of an actual application for my next pull request. I can proudly say that I succeeded in reaching this goal for my second pull request, as I was able to contribute to a project called Rhymus . The Project: Rhymus Rhymus is an open-source web based game written in HTML, CSS and Javascript. It presents the user with word based puzzles to help users improve their vocabulary and familiarity with some common expressions, Phrases and/or common expressions are shown with on of the words being replaced with a rhyme for the original. The user must input what the correct word is, and has the option to take a hint for less point. The game has a scoring system to measure the users success. All in a