7
edits
Changes
m
You will have completed your lab when your blog post from Step 5 appears on the [http://zenit.senecac.on.ca/~chris.tyler/planet/ CDOT Planet site]. I will mark them as they appear there. NOTE: Complete the planet site updates only once per hour, so your post might not show up right away. Please steps above and then add a line for your blog in information to the following table:below.
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
switched repo and pages link
Our goal is to create a single-page, serverless web app for note taking, and host it on GitHub.
NOTE: You are free to collaborate with others in the class, share ideas, code, and help one another debug. However, every student must follow the steps to completion so as to create the necessary work products.
==Walkthrough==
===Step 1: Create a new GitHub Repo===
# Create a new GitHub repo ([https://help.github.com/en/articles/create-a-repo instructions here]). :## Name it something like '''my-note''', '''micro-note''', '''whiteboard''' or something else that makes sense to you, and add ## Add a '''Description''', for example: '''"A web based note taking app"'''. ## Set your repo to be '''Public''', and initialize ## Initialize it with a '''README.md''' and '''License'''. For your License, choose '''BSD 2-Clause "Simplified License"''' (see [https://opensource.org/licenses/BSD-2-Clause BSD 2-Clause]).
# Your new repo will have a URL that combines your GitHub username and chosen repo name: https://github.com/username/repo-name. Understanding this URL scheme is important when you're trying to make sense of which version of a repo (i.e., which fork) you're reading.
# Create a new file named '''index.html''' inside your local repo's directory. You can use any code editor you like--I'd suggest using [https://code.visualstudio.com/ Visual Studio Code].
# In your '''index.html''' Create file, create a [https://web222.ca/weeks/week05/#basic-html5-document basic HTML5 document].
# Try opening your '''index.html''' page in a browser, and make sure it works as you expect.
# Once you're convinced that everything's working, commit your work to git. To do so, use the following commands:
## <code>git add index.html</code>
## <code>git commit -m "Adding a basic web page"</code>
===Step 4: Mirror your work on GitHub===
# Our note taking web app needs a way to save and load our work. To prepare you for your 0.1 Release, we'll use the [https://github.com/filerjs/filer FilerJS Browser Filesystem library].
# Add a <code>script</code> tag to the bottom of your HTML <code>body</code> that uses the following '''src''': https://unpkg.com/filer/dist/filer.min.js: <pre><script src="https://unpkg.com/filer/dist/filer.min.js"></script></pre># Below this, add a second <code>script</code> that initializes a filesystem: <codepre><script>const fs = new Filer.FileSystem();...</codepre>
# The <code>fs</code> instance can be used to call any of the filesystem operations like [https://github.com/filerjs/filer#readFile readFile()] or [https://github.com/filerjs/filer#writeFile writeFile()].
# Write some code to accomplish the following set of steps:
## When the page's DOM is finished loading (use the [https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event DOMContentLoaded event]), try to <code>fs.readFile('/note', 'utf8', function(err, data) {...})</code>. If there is an error (i.e., if <code>err</code> is non-null), use a default string like '''"Welcome to my notepad!"'''. If the file does exist (i.e. <code>data</code> is non-null), use that for your string instead.
## Use the string from the previous step to display in a <code><div></code> that you add to the page. You can give it an '''id="notepad"'''. Also make this <code><div></code> editable using the [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content contenteditable] attribute (i.e., the user should be able to edit the text in the page).: <pre><div id="note" contenteditable></div></pre>## Use a [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval setInterval()] call to register an interval callback that saves whatever is in the notepad div every 2-5 seconds (try different amounts of time to see what works best) to the '''/note''' file. NOTE: recall that you can use <code>document.querySelector('#note').innerHTML</code> to get/set the contents of the div.
## When the user refreshes the page, or loads it after closing it, the contents of the '''/note''' file should reappear.
===Step 6: Adding FeaturesPush and Setup Gh-Pages Hosting=== # Once you have the basics working from Step 5, use <code>git add</code>, <code>git commit</code>, and <code>git push</code> as discussed above to sync your GitHub repo with your local machine.# Next, we'll enable [https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages Gh-Pages for our master branch]. This will tell GitHub to create a web server to host our content. Follow these steps:## Click '''Settings''' in your GitHub repo's main page header## Under the '''GitHub Pages > Source''' dropdown, choose the '''master branch''' option.## Click '''Save'''# Your site will get built and hosted at https://username.github.io/repo-name. Every time you push new code to your master branch, these changes will get rebuilt and hosted again. NOTE: it may take some time between when you push, and when it shows up on github.io. ===Step 7: Add Something Cool=== For the final step, add something unique, interesting, fun, cool, etc. your app. Here are some ideas, but you are free to do anything you'd like: * Update the "save" logic so it uses keyboard shortcuts. You could use a library like [https://wangchujiang.com/hotkeys/ Hotkeys.js]. If you use this library, make sure you see the [https://github.com/jaywcjlove/hotkeys#filter note about enabling it for contenteditable].* Add some UI, maybe a toolbar with a Save button.* Change the fonts using something like [https://fonts.google.com/ Google Fonts]* Make the UI responsive, so it works well on mobile, tablets, or desktop.* Use a CSS library to make the UI look like it's using being done with hand-drawn, paper sketch styles (e.g., [https://www.getpapercss.com/ PaperCSS])* Use a background image instead of a pure white document* Add some kind of Google Docs style indicator to tell the user when their changes are saved (i.e., "Saving..." vs. "All changes saved!")* Make it possible to support multiple pages/files. For example, if the user loads '''index.html?p=note''' you load the '''/note''' file, but '''index.html?p=opensource''' would cause the app to use the '''/opensource''' file instead.* Add the ability to download and save your notepad. You can use a library like [https://github.com/eligrey/FileSaver.js/ FileSaver.js].* Add a word count feature. There are lots of existing JavaScript text analysis libraries you could use, or write your own.* Instead of a plain DIV using contenteditable, switch to a rich text editor control using an open source component like [https://trix-editor.org/ Trix] or [https://quilljs.com/ Quill] (there are dozens if you do some research).
===Step 8: Blog about Your App===
Write a blog post about your app. Include links to the code on GitHub, as well as the live version on github.io. Explain how it works, and which extra feature(s) you added. Also discuss any new technical things you learned along the way.
==Submission==
{| class="wikitable"
! Name
! Fork GitHub Repo (URL)! GitHub Pages (URL)
! Blog Post (URL)
|-
| Example Name
| https://github.com/example/coolnotepad-repoapp| https://example.github.io/notepad-app| https://examplestudent.wordpress.com/2019/09/05/introducing-coolnotepad/|-| Cheng-Tuo Shueh| https://github.com/jerryshueh/simple-noter| https://jerryshueh.github.io/simple-noter/| https://osstudent.blogspot.com/2019/09/dps909-lab-2-git-practice-simple-noter.html|-|Josue Quilon Barrios|https://github.com/manekenpix/miniNote|https://manekenpix.github.io/miniNote/|https://whataboutopensource.blogspot.com/2019/09/mininote-your-new-web-based-note-taking.html|-|James Inkster|https://github.com/grommers00/my-note|https://grommers00.github.io/my-note/|https://grommers.wordpress.com/2019/09/11/the-simple-reponote/
|-
|Ehsan Ekbatani|https://github.com/eekbatani/micro-note|https://eekbatani.github.io/micro-note/|https://eekbatani.blogspot.com/2019/09/micro-note-my-first-steps-into-open.html|-|Kartik Budhiraja|https://github.com/kartik-budhiraja/Notify|https://kartik-budhiraja.github.io/Notify/|https://kartikopensource.wordpress.com/2019/09/12/notify-online-notes-taking/|-|Jordan Sie|https://github.com/jrdnlx/noteboard|https://jrdnlx.github.io/noteboard/|https://jrdnlxnoteboard.blogspot.com/2019/09/phase-one-of-my-noteboard-application.html|-|Wajeeh Sheikh |https://github.com/wajeehsheikh/Waj-Notes|https://wajeehsheikh.github.io/Waj-Notes/|https://opensourcebywajeehsheikh.blogspot.com/2019/09/my-online-notepad.html|-|Cindy Le|https://github.com/cindyledev/my-note|https://cindyledev.github.io/my-note/|https://cindyledev.wordpress.com/2019/09/12/lab-2-programming-with-git-and-github/|-|Ryan Wilson|https://github.com/RyanWils/my-note|https://ryanwils.github.io/my-note/|https://medium.com/@rwilson31/note-taker-edb92f268d7b|-|David Medeiros|https://github.com/drwm-base/my-note|https://drwm-base.github.io/my-note/|https://discoveropensource.blogspot.com/2019/09/my-note-my-first-step-into-open-source.html|-|Robert Begna|https://github.com/robertbegna/my-note|https://robertbegna.github.io/my-note/|https://robertbegnastechblog.blogspot.com/2019/09/dps909-lab2-my-note.html|-|Bowei Yao|https://github.com/ragnarokatz/my-note|https://ragnarokatz.github.io/my-note/|https://ragnarokatz.wordpress.com/2019/09/12/a-simple-note-taker/|-|Varshan Nagarajan|https://github.com/varshannagarajan/my-notepad|https://varshannagarajan.github.io/my-notepad/|https://varshannagarajan.wordpress.com/2019/09/12/learning-about-github/|-|Carlos Gomez|https://github.com/cagomezr/WebNote|https://cagomezr.github.io/WebNote/|https://cagomezr.wordpress.com/2019/09/12/git-github-and-source-control/|-|Gia Tuong Tran|https://github.com/giatuongtran9/my-note|https://giatuongtran9.github.io/my-note/|https://giatuongtran.wordpress.com/2019/09/12/osd600-lab-2-simple-note-app/|-|Luca Cataldo|https://github.com/lucacataldo/my-note|https://lucacataldo.github.io/my-note/|https://cataldosoft.wordpress.com/2019/09/12/creating-a-note-taking-app-with-filer-js/|-|Hansol Cho|https://github.com/Hansol-Cho/my-note-app|https://hansol-cho.github.io/my-note-app/|https://medium.com/@hansol.cho613/web-based-note-app-348e5f77c650?sk=2046b8cc5db6eec62fbaf75562dac1b8|-|Bruno Alexander Cremonese de Morais|https://github.com/brucremo/whiteboard|https://brucremo.github.io/whiteboard/|https://bacmme.blogspot.com/2019/09/whiteboard-note-what-you-want-with.html|-|Minuk Park|https://github.com/mpark86/my-note|https://mpark86.github.io/my-note/|https://minukpark.wordpress.com/2019/09/12/simple-note-taking-app/|-|Reza Rajabi|https://github.com/Reza-Rajabi/nOTeTOn|https://reza-rajabi.github.io/nOTeTOn/|https://opensourcebrowsing.blogspot.com/2019/09/a-simple-note-taking-app-noteton-if-you.html|-|Matthew Clifford|https://github.com/smilegodly/whiteboardapp|https://smilegodly.github.io/whiteboardapp/|https://awesomeresponsibility.wordpress.com/2019/09/19/whiteboardapp/|-|Timothy Morris|https://github.com/MeisterRed/micro-note|https://meisterred.github.io/micro-note/|https://medium.com/@tjmorris56/micronote-a-web-based-note-taking-app-99d90eb9ff67|-|Paul Luu|https://github.com/ImmutableBox/whiteboard/tree/master|https://immutablebox.github.io/whiteboard/|https://paulopensourceblog.wordpress.com/2019/09/12/simple-whiteboard-application/|-|Wing Tung Lau|https://aprilllllllll.github.io/OSD600/|https://github.com/aprilllllllll/OSD600|https://aprilprogrammer.blogspot.com/2019/09/web-based-notepad.html|-|Igor Naperkovskiy|https://github.com/cryolis/whiteboard|https://cryolis.github.io/whiteboard/|https://sentech849662565.wordpress.com/2019/09/13/first-git-project|-||Xin (Jack) Nian|https://github.com/nianjack/MicroNote|https://nianjack.github.io/MicroNote|https://jacknian.wordpress.com/2019/09/12/micronote-a-web-based-note-taking-app|-|Hayley McIldoon|https://github.com/shmooey/my-note|https://shmooey.github.io/my-note/|https://hmcildoon.wordpress.com/2019/09/13/my-note/|-|Jatin Arora|https://github.com/jatinAroraGit/note-down|https://jatinaroragit.github.io/note-down/|https://jatinoopensource.wordpress.com/2019/09/12/lab-2-taking-notes/|-|Krystyna Lopez|https://github.com/lozinska/my-note|https://lozinska.github.io/my-note/|https://klopez8.blogspot.com/2019/09/filer-open-source-project.html|-|Minyi Chen|https://github.com/KarlaChen/my-note|https://karlachen.github.io/my-note/|https://karlachen.blogspot.com/2019/09/simple-take-note-app.html|-|Anton Biriukov|https://github.com/birtony/my-note-keeper.git|https://birtony.github.io/my-note-keeper/|https://medium.com/@birtony/implementing-a-simple-web-based-note-taking-application-5f57a74caf4|-|Ngoc Nam Khang Nguyen|https://github.com/vitokhangnguyen/my-lightweight-noteboard|https://vitokhangnguyen.github.io/my-lightweight-noteboard/|https://khangnguyenopensource.blogspot.com/2019/09/my-lightweight-noteboard-10.html|-|Jacob Shuman|https://github.com/jacob-shuman/midnote|https://jacob-shuman.github.io/midnote/|https://medium.com/@jacobshuman7/midnote-99f1a231e31c|-|Ryan Marzec|https://github.com/RyanMarzec/micro-notes|https://ryanmarzec.github.io/micro-notes/|https://marss64.wordpress.com/2019/09/13/micro-notes-a-step-into-open-source-on-github/|-|Adith Syam|https://github.com/asyam1/my-note|https://asyam1.github.io/my-note/|https://adithsyam2.blogspot.com/2019/09/my-notes-web-application-for-my-first.html|-|Sina Lahsaee|https://github.com/ODAVING/Whiteboard|https://odaving.github.io/Whiteboard/|https://opensourceprojects19.blogspot.com/2019/09/simple-whiteboard.html|-|Siwen Feng|https://github.com/SiwenFeng/whiteboard|https://siwenfeng.github.io/whiteboard/|https://fengsiwen.blogspot.com/2019/09/whiteboard-app-v10.html
|
|-
|Brett Dennis|https://github.com/UltimaBGD/micro-note|https://ultimabgd.github.io/micro-note/|https://ultimaopensource.wordpress.com/2019/09/13/filer-js-testing-micro-note/
|-
|Hansal Bachkaniwala|https://github.com/hansal7014/Notes-Forever|https://hansal7014.github.io/Notes-Forever/|https://medium.com/@hansal7014/notes-forever-a-note-taking-web-app-77309b62bc82
|-
|Neil Ong|https://github.com/neilong31/foreverNote|https://neilong31.github.io/foreverNote/|https://neilong31.wordpress.com/2019/09/13/web-based-note-taker-forevernote/
|-
|Andre Rosa|https://github.com/Cadesh/whiteboard|https://cadesh.github.io/whiteboard|https://medium.com/@andrewvrosa/github-tricks-80709e9c1fc7
|-
|Julie Philip James|https://github.com/jpjjulie/my-note|https://jpjjulie.github.io/my-note/|https://juliephilipjames.wordpress.com/2019/09/13/creating-my-note-through-github/
|-
|Jayson Sherry|https://github.com/jayson528/WebNotes|https://jayson528.github.io/WebNotes/|https://mlforiphone.blogspot.com/2019/09/taking-notes-on-fly-have-you-ever.html
|-
|Yohan Choi|https://github.com/cyh0968/notepad|https://cyh0968.github.io/notepad|https://ychoi63.blogspot.com/2019/09/developing-note-taking-app-step-01.html
|-
|Jordan Hui|https://github.com/jordanhui19/whiteboard|https://jordanhui19.github.io/whiteboard/|https://jhuiosd600.blogspot.com/2019/09/the-whiteboard-note-taking-app.html
|-
|Miguel Roncancio|https://github.com/miggs125/mini-note|https://miggs125.github.io/mini-note/|https://codepen.io/miggs125/post/mini-note
|-
|Thomas Luu|https://github.com/ThomasLuu00/micro-note|https://thomasluu00.github.io/micro-note/|https://thomasopensourceblog.wordpress.com/2019/09/14/playing-with-github-and-filer/
|-
|Calvin Ho|https://github.com/c3ho/whiteboard|https://c3ho.github.io/whiteboard/|https://c3ho.blogspot.com/2019/09/whiteboard-app.html
|-
|Rafi Ungar|https://github.com/Silvyre/zennotate|https://silvyre.github.io/zennotate/|https://raungar.wordpress.com/2019/09/13/zennotate-on-first-open-source-experiences/
|-
|Haichuan He|https://github.com/haichuan0424/my-note|https://haichuan0424.github.io/my-note/|https://medium.com/@haichuan0424/my-notepad-app-1d146ff4b1f4
|-
|Nazneen Nahar|https://github.com/nazneennahar/my-note-|https://nazneennahar.github.io/my-note-/|https://inspirationalnation.wordpress.com/2019/09/14/my-note-note-taking-app/
|-
|Muqing Li|https://github.com/a8a9a16/whiteboard|https://a8a9a16.github.io/whiteboard/|https://muqingli.wordpress.com/2019/09/14/notepad-app-based-on-github-io/
|-
|Musawar Bajwa|https://github.com/MusaBajwa/micro-note|https://musabajwa.github.io/micro-note/|https://musawarbajwa.wordpress.com/2019/09/14/my-first-web-based-note-taking-app/
|-
|Daniel Beigi|https://github.com/dbeigi/whiteboard|https://dbeigi.github.io/whiteboard/|https://danwithopensource.blogspot.com/2019/09/whiteboard-application-built-with-open.html
|-
|Sefa Baah - Acheamphour|https://github.com/Sbaah/Micro-note|https://sbaah.github.io/Micro-note/|https://opensourcedps909blog.blogspot.com/2019/09/dps909-fall-2019-lab-2.html
|-
|Ana Garcia|https://github.com/agarcia-caicedo/tinyNote|https://agarcia-caicedo.github.io/tinyNote/|https://semortea.wordpress.com/2019/09/14/tinynote/
|-
|Mykola Skuybeda|https://github.com/mskuybeda/my-note|https://mskuybeda.github.io/my-note/|https://nicksopensource.wordpress.com/2019/09/14/github-tutorial/
|-
|Ilya Zhuravlev|https://github.com/izhuravlev/z-Note|https://izhuravlev.github.io/z-Note/|https://medium.com/@ilya.zhurik/meet-z-note-e6449e80c8da
|-
|Sarika Hanif|https://github.com/s-arika/my-note|https://s-arika.github.io/my-note/|https://medium.com/@shanif5/my-note-online-note-taking-app-d89b52487453
|-
|Evelyn Yeung|https://github.com/evlnyng/CornellNote|https://evlnyng.github.io/CornellNote/|https://evlnyng.tumblr.com/post/187713806753/cornell-method-notetaking-app
|-
|Zufishan Ali|https://github.com/zufishanali/my-note|https://zufishanali.github.io/my-note/|https://medium.com/@ali.zufishan/my-note-6cc78bd51f9d
|-
|Pavan Kamra|https://github.com/PavanKKamra/note-taking-app|https://pavankkamra.github.io/note-taking-app/|https://pavankamra.blogspot.com/2019/09/note-taking-application.html
|-
|Sukhbeer Dhillon|https://github.com/sukhbeersingh/notaker/|https://sukhbeersingh.github.io/notaker/|https://medium.com/@sukhbeerdhillon305/notaker-99c1c1722f77
|-
|Manan Patel|https://github.com/Manan311/My_Note|https://manan311.github.io/My_Note/|https://manan-patels-blog.blogspot.com/2019/09/notepad.html
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|
|-
