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

Collaborating with issues and pull requests on Github

This week I got the chance to get my hands dirty with some code, learn the ins and outs of git and collaborate on projects on Github. Slowly things are coming back to me after not doing development for a while with Javascript, HTML, and CSS. I also learned something new with CSS which I will discuss below. After a few classes on Git by my instructor, I was lost and confused. But after working on these projects and actually putting what he thought into practice, I managed to get the hang of working with git. I also had the opportunity of working with projects on Github which helped me get some real practice on how to collab with other developers.  I had to opportunity of collaborating with two other developers,  MusaNajwa  and  wajeehsheikh .  After looking at their note-taking applications and looking through their code in the repositories, I decided that there are some few improvements that I can add to their applications. Mirconote Looking at this appl...
Post a Comment
Read more

Rhymus Application

The last day of Hacktoberfest is here and I submit my last pull request. It has been a great exposure to the open-source community. Before starting hacktoberfest I set two goals: Git - How to use git C# & TypeScript - Learn new languages Working with multiple projects, I managed to get a hang of using git. Unfourtonalty I didn't have the chance to give C# & TypeScript. My plan is to focus on this goal for the next month as we dive into working with big open source projects. rhymus This week I had the opportunity to work on rhymus .  the bug was to display the score to the player once the game was over. At first, the developer wanted the score to be displayed in a pop-up. I tried using javascript alert() method on but it didn't look very user-friendly, so I decided to come up with a design and suggest it to him. I decided to add the scoreboard on the card once the game was over and would be removed for a new game. Afterwards, I made the pull request and...
Post a Comment
Read more