jaf7 / and-done

TODO app learning project, not built from a tutorial. Node.js, Materialize framework.

get-it-done

A learning project TODO list app that aspires to be a clean, intuitive user experience. UPDATE: This project was built prior to attending Flatiron Fullstack Immersive program, and I believe it offers an example of my passion and work ethic to teach myself before attending any formal program. I'll soon begin refactoring it. Many comments are left in the JavaScript for the time being as self-reminders.

This began as a solution to Rithm School's Intermediate Javascript Events Exercises, Parts 3 and 4. I realized in part 4 that by using local storage I could immediately start learning to design an app that uses persistent storage. Next version will use database or cloud storage. Using local storage is insecure for several reasons. ^{1 2}

I'm using Node School lessons and The Node Beginner Book as a guide, and building back-end functionality without using a framework such as Express. I want to begin to understand internals before using a framework (I think this will facilitate better understanding / utilization of such frameworks). The resulting code looks different in approach to several tutorials I've come across. Time / practice / study will refine my understanding of methods / best practices.

1 HTML5 Security and Storage APIs

2 Stack Overflow: Local Storage and Security

Purpose

• To begin to learn Node.js and understand modules, servers, routing and request handling
• To create an app that I will eventually use and improve in a feedback loop
• To begin exploring usability in relation to design
• An opportunity to work on the fundamentals (HTML/CSS, JS, readable maintainable non-brittle code)
• To introduce myself to using Heroku and Heroku CLI with a Node.js back-end.
• To take pleasure in the work of learning, revising, and improving

Demo

(Many improvements to be made to UX, UI, behavior! Work in progress.)

Note: Usage notes below ↓ (Currently debugging tooltip instructions for event capturing / bubbling)

Use it here! (Add notes, edit, mark complete, archive to see features!)

New Notes:

• "+" adds new note
• Folder icon opens / closes archive

Note Items:

• Click on note heading to expand note
• Click anywhere in note body to edit (change will persist)
• Checkbox marks as "completed" (adds a reversible strikethrough)
• Arrow-folder archives (for active notes) / unarchives (for archived notes)
• "-" permanently removes note item

Thanks for checking it out!

Built Using

• Node.js
• JavaScript
• HTML/CSS
• jQuery
• Materialize - Front-end framework based on Material Design
• jQuery.scrollTo - Lightweight animated scrolling with jQuery
• classList.js - Make element.classList work for older IE browsers (cross-browser JS shim)
• Heroku - deployed to Heroku remote, running on a single web dyno
• Heroku CLI - For running a local development server inside a virtual environment, logging to stdout, spinning up dynos

Resources

• Node School learnyounode workshopper
• The Node Beginner Book
• The Node Craftsman Book - "Working with NPM and Packages"
• package.json - Official Documentation
• npm init - Official Documentation
• NodeSource Beginner's Guide to NPM
• Getting Started with Node on Heroku
• Materialize Documentation
• jQuery API Documentation
• IIFE discussion - YDKJS: Up and Going, Chapter 2 - Buy the books, support the author!
• IIFE discussion - YDKJS: Scope and Closures, Chapter 3 - Buy the books, support the author!
• Material Design
• HTTP Status Codes - Wikipedia

TODO

• Submit event is occurring twice, on second occurrence Boolean(textArea.value) == false
• Make todo.js conform to airbnb style guide: https://github.com/airbnb/javascript
• Refactor buildFromScratch helper function and test for IE
• Re-implement alerts with a CSS solution
• Fix "Enter new item" alert
• Decide if refreshItemListeners helper function should be replaced with event delegation David Walsh, Event Delegation
• Add scrollTo <li> after restoring list items from archive
• Add animation for archive, restore, remove (Visually confusing w/ no visible transition. See materialize hiding and transition helpers)
• Back to top on pageload, & add back to top button for scrolled content
• Use classList.toggle() method for display: hidden instead of .add and .remove
• Limit header preview text to one line
• Revert expanded / collapsed list item states to all collapsed on moveListItem() or page (re)load
• For highlighting every other item: continue testing CSS pseudo-class nth-of-type(an+b) (remove toggleHighlights() helper function?)
• Debug recursive merge sort, continue studying sort algorithms, implement performant solution
• Move jQuery, Materialize, jquery.scrollTo to npm packaging (instead of CDNs) (Is there a best practice / canonical method?)
• Learn correct way to load requested resources for front-end style / behavior. My current method, building a request handler for each path and adding a method to the module.exports object, as demonstrated in Node Beginner Book, seems to have multiple failure points & is maybe confusing to follow (?)
• Consider learning / using NW.js (formerly node-webkit)
• Explore refactoring:
  • Object Oriented design
  • Most appropriate data structure for listData and archiveListData
    • Use objects (associative arrays) or nested arrays?
    • For branching TODO list with sublists?
    • If adding search feature with efficient sort algorithm?
      • Breadth- or Depth-first?
      • MergeSort? (Hopefully a TODO list will never be complex enough for this to be a non-trivial consideration. This is for the learning opportunity.)