cch5ng / angular_front_end_interview Goto Github PK

testing the $scope assignment to results of service http request, getting undefined result. think this is a timing/async issue.
learn services better, look at $http. also look at js promises, callbacks.

• just so I don't forget
• my source file has been updated from the README to a local HTML file. this way at least I have increased reliability about the application's direct source. the application won't break sporadically but the data could become out of sync with the h5bp project source

• added bower_components because of broken links to css and js libraries but this really bloated the project with unnecessary files
  • try to find hosted versions of the angular related files. http://cdnjs.com/libraries/angular.js/ should cover angular-route and angular-sanitize. just check versions
  • for css/files coming from html5 boilerplate, seems like I should grab only what I need and put a copy into my app directory with respective subdirectories

• when I change from the default menu item, the associated styling persists
• if I change to the about menu item (from default), the bottom border style does not get applied at all

quick fix:
hard coded the http request url to look for custom domain

• 3362817

opening different issue for long term goals

cause: crap, it's a cors issue b/c my github is getting redirected to my custom domain ... so dunno maybe I need to do something similar to plans for rss plus (make a flask application that makes the http request on the backend)... have to think about this one.

may want to update the data model to handle this better

many other github projects have a link to results of travis tests on their front page

I would like to figure out how this is done

• need to update styles for the All questions and About pages
  • need to increase the top border for the first div or paragraph on those pages b/c of the toolbar height when the nav menu gets collapsed

• could now enhance this application to save preferences (like a base interview template in particular question order)
• but then synchronization between user data store and the latest h5bp questions list might get messy (?)

• yay. this means I can rewrite my code to do a dynamic http get on the json rather than manually parse their markdown from master branch
• https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/gh-pages/params.json
• also see https://github.com/github/markup

• (DONE) ng-repeat logic for displaying random question result to same page
  http://www.java2s.com/Tutorials/AngularJS/AngularJS_Example/Directives/data_ng_repeat_Loop_through_two_dimensional_array.htm
• (DONE) display max number of questions available
• (DONE) add form validation for min and max input values

currently web scraping contents of h5bp interview questions gh-pages index.html. while this works, it is unreliable b/c of the likelihood that the master README.mdn (original questions source) has not been pushed to the gh-pages branch.
would like to parse the text of the README.mdn but not exactly sure how to do this. may require learning reg expressions. may use some 3rd party text parse library??

use case: the tester will probably print out a set of questions before the interview, possibly printing out multiple copies, one for the interviewee and one for the tester

this may be an end to end test but until I fix the issue with parsing the README.mdn as the real data source, there should be a test (ideally travis) that verifies that the expected structure of the index.html has not changed. otherwise the app breaks.

feel it is redundant to use the deferred.resolve and .reject within the $html.get results. tried http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/ > composing promises but perhaps did not understand it well enough. created bugs where the service was not getting called properly. clean up later

maybe you want to start from simple to difficult?

• add text and audio affirmations to pep someone up before an interview (see local Notes page)
  • (low priority but adding a fun value) this is totally not necessary but intended to be funny/cheesey and help someone to feel relaxed before a potentially stressful situation
  • not sure whether the audio should be one long file with all affirmations or broken up into mult files. if I preload the audio while the user is looking at the default application page (form), then it's probably faster to download a single file. node is supposed to be good with streaming files so that may be something interesting if the audio gets too big or inefficient.
  • it might be nice to invite users to submit their own affirmation ideas
• inspirations
  • http://www.inthe70s.com/generated/terms.shtml
  • http://www.freesound.org/people/suonho/sounds/25918/
  • http://www.freesound.org/people/Raggaman/sounds/26978/
  • ?? (think original audio is better)
    • http://ccmixter.org/files/DaveMerrick/49064
• the feel of the affirmations (the mood) is much stronger than the current branding of the application but do I want to rebrand it? if it looks all psychedelic, then will the app still be considered useful?
  • is it better if an app looks more fun, even though it is supposed to be functional?

• right now doing a manual grab and manual process of the h5bp markdown file
  • I do not want to have to regularly check for when the other project's file has been updated
  • this may be a good use case for service worker and push notification
  • maybe if the worker has a weekly schedule to watch for the top date on this file
    • https://github.com/h5bp/Front-end-Developer-Interview-Questions/commits/master/README.md
    • And if the latest commit date > my application's stored date for the latest markdown source (which I'm not currently storing), then a push notification (email) should be sent to me
• this feature would not be helpful to anyone other than myself (well, increase the reliability of this application to be most current content) but the application of this logic could apply to other use cases and handy to know
  • maybe for financial data
  • maybe for medical data
  • critical information that fluctuates on an irregular basis

• fix on free time; focus short term on react stuff b/c feel that the upgrade from angular 1.x to 5 is non trivial and perhaps not huge ROI for next week...

the app is broken; something having to do with github pages host (most likely related to using my private domain with redirection from a github repo)

look into hosting the built app using surge; think just need to deploy the source starting at the /app level

resource

• https://medium.com/@nioperas06/deploy-angular-apps-to-surge-7ee763db2235

• when I tried to comment out the jquery link, got error from bootstrap.js
• when I tried to comment out the bootstrap.js link, the collapsed nav menu for mobile dimensions would not display

for testers, wanting to create a boilerplate of interview questions

see if the star images from http://glyphicons.bootstrapcheatsheets.com/ may be useful

maybe a stopwatch to be aware of potentially rambling on during verbal questions or needing to solve coding problems faster

• apply ng-cloak where applicable
  • for ex when the page first loads there is a little fouc for the max number lines below each input

• use ng-repeat for inputs. am not sure if this will break the logic for max values and data binding for form submit click
  • if possible, it would be better to use ng-repeat to dynamically generate the form input fields and their labels. but there is a current dependency on a known bug related to inconsistent formatting of coding questions

if I go with react, then I'd also like to rework the logic something like:

• server side http get on md src: https://raw.githubusercontent.com/h5bp/Front-end-Developer-Interview-Questions/master/README.md
• client side use marked lib to convert to html: https://github.com/chjj/marked
• then something akin to the logic I have already in original app but converted for react usage
• need figure out how to output html result into a file in app/src dir (and whether this html is the right format for existing logic)
• (nice to have) some way to schedule polling for the latest .md file (like every quarter or so)
  • 2nd thought, if I can do a server side request to h5bp repo, then I'll be getting the latest src each time so scheduling is not necessary

options

• (probably better for now) migrate react and flask for http requests
• upgrade angular 2 and flask for the http requests
  • look at sample angular/flask apps https://realpython.com/blog/python/flask-by-example-integrating-flask-and-angularjs/
• maybe want to set up some automated test system so I could get notification when an app goes down; probably go with travisCI so I can apply the knowledge to other opensource proj's
  • http://www.sitepoint.com/testing-javascript-jasmine-travis-karma/

• added latest styles to the index.html directly. should they be moved to a separate file?
• think for now they can stay b/c the file size is small and it may cause unnecessary overhead to download another file

• since I have a current manual workaround to getting a copy of the most recent h5bp README.mdn contents and using that as the basis of the application's questions list, it may be sufficient to reference and link the the original project this application's README
• maybe revisit this if I implement a toolbar (with logo, title, and about)