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.
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.
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