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

Post a Comment

Popular posts from this blog

Hacktoberfest - My First of Many Open Source Events

After establishing a basic foundation in open-source concepts and skills, I eagerly look forward to participating in Hacktoberfest this upcoming October, and hopefully many more to come. Hacktoberfest is hosted by Digital Ocean and it is a month long event that runs throughout the month of October and encourages contributions to a variety of projects. It is highly accessible and welcoming to individuals across all regions and skill levels globally, which is great news since I still consider myself a beginner as an open-source developer. On top of all this, they also offer the prize of a Hacktoberfest shirt for registered users that successfully complete 4 or more pull requests. After reading through all the information on the Hacktoberfest website, I proceeded to set two goals and find three issues I would like to tackle. Here are the goals I set for this event: 1 . Get involved in a project that you find interesting As a student, its often difficult to pursue personal pr
Post a Comment
Read more

Hacktoberfest - Pull request 4 - Fixing a UI Bug in "Lifestyle-Ecommerce-Website"

We are nearing the end of Hacktoberfest and that means we are finishing the challenge with our fourth and final pull request. In my  previous post , I announced and explained my third pull request for this year's Hacktoberfest event, where I enhanced the UI/UX of Rhymus, a web based word-puzzle game designed to improve a users vocabulary. I also went on to say that my goal for this pull request will be to solve an actual bug within the code of a project, meaning  correcting an actual flaw, rather than enhancements and additions which I had done so far. I am proud to say I did exactly what I aimed to by fixing a bug in a project called "Lifestyle-Ecommerce-Website". The Project:  Lifestyle-Ecommerce-Website Lifestyle-Ecommerce-Website 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 clie
Post a Comment
Read more

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
Post a Comment
Read more