Skip to main content

Whiteboard Application: Built with Open Source Projects


I just took my first steps into the open source world and it was amazing. As my first project, I built a note taking application with the help of some open source projects and Github. I’m going to admit, I was a bit scared at first because I hadn’t touched web development in months so I was I rusty in Javascript and other web technologies. Thanks to my instructor, I was able to set-up everything on Github with ease and execute git commands that I had forgotten. All in all it was a good experience and was nice to get back into coding after a long break from it.

Whiteboard Application
The point of this application is to allow users to takes notes on a webpage. There are also features such as saving what you have written on the whiteboard or clearing the whiteboard all at once. The application was built using the following open source projects:
  • ·         Filer
  • ·         PaperCSS
  • ·         Hotkeys

FilerJS Browser Filersystem library allowed us to read and write to files with a given file path. This was really helpful as it allowed me to add the functionality of saving the notes and continuing them during a later time.
PaperCSS was used mostly to for UI. The fonts and the background was given a hand-drawn, paper sketch feeling giving the user an authentic feeling of taking note.
HotKeys helped me with taking user keyboard input. With this I was able to create custom shortcuts for saving and cleaning functionality.



Technology
 Working on this project i learned many things but the thing that stuck out most to me was contenteditable. Contenteditable is an attribute that can be added to any HTML element. When added, the element becomes editable. To me this is a very interesting feature and will be making use of it with other projects.

Links

 Github Repo

 Whiteboard Application
Labels:

Comments

Post a Comment

Popular posts from this blog

Steps Into Open Source

Visual Studio Code is the project I plan to use to help me get involved within the open source community. Developed by Microsoft, it has become one of the most popular source-code editor out there. An editor with beneficial features built in such as: ·            Debugging ·           IntelliSense ·           Git source control ·           Integrated terminal ·           Extension marketplace Plus there’s so much more that I haven’t mentioned. The application is written in Typescript and supports Windows, OS and Linux. During my internship I came across the release notes of Visual Studio Code for the month of August. Out of curiosity I quickly scanned the notes and reached the bottom of the page. I was amazed at the number of contribu...
Post a Comment
Read more

Taking on new technology

In my last week's blog, I talked about the two objectives I would take on during November. In the middle of working on the contributions, I decided to change my issue for the internal open source project. I'm hoping to continue with this issue for next pull request I have to submit for my course. As you know, the external open source project I chose to contribute to was vscode . In the beginning, when i saw this issue , i thought this would be an uncomplicated and straightforward issue to work on within a big open source project. Before i forked the clown, i took a good look at the documents they had to just get a sense of how to contribute to the project and do the simple tasks of running and testing. After cloning, i had an issue running the project, this is where i spent some good time reading the documentation again, but i was just having a hard time running the project. I managed to get it running after a few reads.  Thanks to another contributor i had a hint of where...
Post a Comment
Read more