a scrolldeck.js portfolio by James Cavanaugh
preparing to update NoteBuilder
to the delight of clinicians everywhere.
a scrolldeck.js portfolio by James Cavanaugh
preparing to update NoteBuilder
to the delight of clinicians everywhere.
Baseline: In 2006, inline styling on a personal website required minimal knowledge of several css selectors. No real understanding of classes, id's, specificity, etc.
Skill Development: Introductory skills referencing and positioning DOM elements; using unordered lists horizontally, absolute positioning an image within a relatively positioned div, centering, floats, etc.
I struggled with creating a sticky footer but was assisted by Thinkful staff.
Along with learning tenets of HTML and CSS3, I gained skill in seeing the many small details needed to create an accurate clone.
Frank Troglauer Jr Sep 27, 2013 Good morning James, superb job on this project! The only issue I see is that your navigation wraps when the page is resized down horizontally. The way Google handles this is by keeping it in place using white-space styling. Another method is by not setting a fixed height on div#nav and instead doing min-height so the container increases as needed. http://prntscr.com/1trpww
Baseline: Who hasn't heard of JQuery. I had never tried it.
Skill Development: jQuery is magical. Helped by it's excellent documentation and stackoverflow I found I could wreak all kinds of havoc on the DOM. If I knew then what I know now, 'toggleClass' could have saved hours of time and cut the codebase down by 2/3rds... but at the time what I already 'knew' was making it difficult.
I opened a GitHub account and bought an app to manage it. Within a couple days the app was never opened as the program GitHub provides is far better.
I created a nice little javascript 'Day of the Week' function.
Frank Troglauer Jr Oct 2, 2013 Nice job on this project James! There are two issues I would like to point out. First your container for the "Happy Day" text isn't wide enough. Also the content below the headline shifts up slightly when you swap out text. http://prntscr.com/1usy66
Baseline: No experience with inputs or creating dynamic responses to user entries.
Skill Development: On the design front I timidly stayed with some safe shades of grey. I thoroughly enjoyed using jQuery to provide help text, highlight buttons, trigger a cheat button as a kindness to busy folk, and create a progress tracker for those of us with poor memories.
Behind the scenes I explored using a singleton design pattern to hold a generated random number as well as arrays to build up responses.
The final version incorporated FTj's suggestions below.
Frank Troglauer Jr Oct 18, 2013 Looking good James. Couple of suggestions. 1. Keep users from entering just spaces or nothing as a "guess". 2. Allow users to press enter to submit a guess 3. Add hover effects for the buttons, perhaps just change text from gray to white. I like the clear button. Overall nice job on this project!
Baseline: The last project was a good base for this refinement; i.e. inputs, creating dynamic responses to user entries, etc.
Skill Development: I explored other components of the jQuery API
and continue to be amazed at what it can do. I also found, evaluated, and incorporated useful libraries.
That said,
I am frustrated in attempts to organize the code into a coherent structure rather than the current jumble of functions.
On the design front I learned that just because a web based color generator gives you three colors that compliment each other, it can still be ugly. I'm sticking with greys.
I took Grae's advice and read Design of Everyday Things.
Grae Drake Oct 23, 2013 Hey, looks good. Only critique I have is that you probably want to include the sortable code in your document.ready() function. Not actually critical in this implementation, since you can't add any items to the shopping list until the document is ready, but it's best practice to keep everything in there, and could be important were you to make changes down the road. P.S. The color palette is... a good start. Can't wait to see what you do once you make it into Unit 4. Feel free to peek at the color theory materials in U4L4. Oh, and if you're lacking a good bedtime read you might want to start on The Design of Everyday Things, available in U4L1. Remember: it's the door's fault.
Baseline: What I have learned in this course to date.
Skill Development: I used a json object to hold the quiz data, parsed it with javascript, and used the animo.js library extensively for presentation; i.e. image movement, blur, etc.
I dove into twitter bootstrap3 and stayed with safe colors. I wrestled with cueing the user into taking the next steps through the quiz. It's still a bit cryptic even with the wiggly plus button.
I appreciate Thinkful staff taking time to explain how modest changes can make a significant difference.
I am still frustrated by code organization.
Grae Drake Nov 12, 2013 Hey Jim, great job. This is a beautiful app. Agree that more feedback would be good with the final question. Right now you establish a (subtle) pattern with the first four questions, then set the user up for a gotcha with the final question. Rather than just omitting the blur effect (which focuses attention on one option) I'd consider some way of emphasizing the "correctness" of all four options in the final question. Maybe something like displaying a relevant quote for each one?
Baseline: What is an API?
Skill Development: I became captivated by css transforms, bought CSS Transforms and used this project to practice.
I found a basic Wikipedia API plugin but still spent hours with the API docs refining the parsed data. Ended up building two arrays; one for images, one for image captions. More hours after FTj's critique. The images are tiled using collagePlus.
I'm pleased disambiguation pages have links that work. Took a while.
Interesting error page/homage to Camus: The struggle itself toward the heights is enough to fill a man's heart. One must imagine Sisyphus happy.
Frank Troglauer Jr Nov 30, 2013 I ran into an issue when I did a search. no results came up and no message. Loading image is floating over the bottom of the container. If you initiate a search on the image tab it doesn't show the loading image so I don't think the search took and hit it multiple times until it loads repeatedly. The page constantly flips to the images tab even though there is text for my search which I don't like. It should stay on the tab I am on unless there isn't content for the tab from the search. Overall this is a really impressive project.
Baseline: What's yours?
Skill Development: If you are feeling like HTML, CSS and Javascript are your bailiwick but you've been spinning your wheels trying to get a handle on things...
perhaps you need a curated path through the maze,
and a wilderness guide who knows the territory,
and a supportive community facing the same struggles.
Worked for me.
Consider making it part of your journey and I'll see you down the road.
+Frank Troglauer Jr Jan 5, 2014 5:37 AM Very cool project which I am sure is impressive on the desktop but as I am traveling I am forced to review on iPhone and it is extremely difficult to read or scroll through content. The nav bar helps with this but it is jumbled and displays improperly for me.
+Mark Michon +Frank Troglauer Jr +Grae Drake +Mohammed Ameenuddin Atif +Bhaumik Patel +Dolphins Jan 5, 2014 Hey All, great job. You've got a good thing going on. A couple things (as FTj says): nothing but kudos to mentor mmichon; great listening skills, he could hear the question behind the question, encouraged emails and returned timely responses, always pointed me in useful directions, but I wonder if I could have benefited from 2 sessions a week. I know office hours and all that but I was reticent about speaking there, getting the staffperson up to speed on the confusion, etc. The other thing was some unsureness about making comments to peers. As newcomers joined the Dolphins I saw predictable patterns in the questions and in their project's 'missed things'. There were times I thought I could helpfully comment but then thought 'perhaps that is overstepping bounds'. So any clarity there might help newcomers. Again, THANKS.
