|
|
Line 1,036: |
Line 1,036: |
| * get - to make requests that are simple -response may be complex | | * get - to make requests that are simple -response may be complex |
| * post - to push a form or JSON to the server | | * post - to push a form or JSON to the server |
| |}
| |
| |}
| |
| <!--
| |
|
| |
|
| |
| ===========================================================================================================================================================================================================================================================================================
| |
|
| |
|
| |
| -->
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Javascript and JQuery
| |
| |-
| |
| |
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Formatting examples (numbers dates etc.)
| |
| |-
| |
| |
| |
| // Javascript sucks at dates.
| |
| // d3 to the rescue!
| |
| var parseInitDate = d3.utcParse("%Y-%m-%dT%H:%M:%SZ");
| |
| var initDate = parseInitDate(initial_managed_value_date);
| |
| var initDateString =
| |
| initDate.getUTCFullYear()
| |
| +"/"+ (initDate.getUTCMonth()+1)
| |
| +"/"+ initDate.getUTCDate()
| |
| + " " + initDate.getUTCHours()
| |
| + ":" + initDate.getUTCMinutes()
| |
| + ":" + initDate.getUTCSeconds();
| |
|
| |
| var rightNow = new Date;
| |
| var initToNow_DecimalDays = parseFloat(rightNow - initDate) / 864e5; // 86,400,000 ms/day
| |
| var initToNow_PercentOfYear = initToNow_DecimalDays / 365.0;
| |
| var change_in_value = (parseFloat(total_managed_value) - parseFloat(initial_managed_value))/parseFloat(initial_managed_value);
| |
|
| |
| $('#initial_managed_value').val(initial_managed_value.toFixed(2));
| |
| $('#initial_managed_value_date').val(initDateString);
| |
| $('#change_in_value').val((change_in_value*100.0).toFixed(1)+ "%");
| |
| $('#equivalent_apr').val((change_in_value/initToNow_PercentOfYear*100.0).toFixed(1)+ "%");
| |
| $('#total_managed_value_readonly').val(total_managed_value.toFixed(2));
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Array vs Object lifetime
| |
| |-
| |
| |
| |
| // If the JSON data were an array, we would need to slice-to-clone to keep it around:
| |
| // var dataCopy = data.slice();
| |
| // updateStockData(run,dataCopy);
| |
| // We have an object so we can pass a reference, and it will keep the object around.
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Event handlers
| |
| |-
| |
| | Three basic methods:
| |
| * Attach a function to an event of a specific element; charts.js example:
| |
| var label = jQuery('<label class="btn btn-sm btn-'+color+'"></label>').appendTo(action_button_bar);
| |
| var input = jQuery('<input class="run-'+cmd+'" type="checkbox" autocomplete="off" value="'+cycle.run+'">').appendTo(label)
| |
| .on('change', cycle.owned? function(){
| |
| patchPick(this.value,'{ "action" : "run-hold" }');
| |
| } : function() {
| |
| patchPick(this.value,'{ "action" : "run-buy" }');
| |
| });
| |
| var text = jQuery('<span class="glyphicon glyphicon-'+glyph+'"></span> <span class="hidden-xs">'+cmd+'</span>').appendTo(label);
| |
|
| |
| * Add a function handler once, for a class of elements; picks.js example:
| |
| $("input[type='checkbox'][class='run-top' ]").change(function() { patchPick(this.value,'{ "action" : "run-move-top" }'); });
| |
| * Event delegation: Javascript takes events and "bubbles them up" through the chain of parents; set up a handler on a parent to listen for these bubbles.
| |
| * At end of handler, prevent further bubbling with stopPropagation() - still finishes the current event (eg following the href of an <a>):
| |
| <pre>
| |
| var datepicker = jQuery(
| |
| '<div class="input-group date form-inline pull-left" data-provide="datepicker" id="datepicker'+cycle.run+'">'+
| |
| '<input type="text" class="input-sm form-control">'+
| |
| '<div class="input-group-addon">'+
| |
| '<span class="glyphicon glyphicon-th"></span>'+
| |
| '</div>'+
| |
| '</div>'
| |
| )
| |
| .on('changeDate', function(e){
| |
| alert('next '+cycle.run);
| |
| e.stopPropagation();
| |
| })
| |
| ;
| |
| </pre>
| |
| * Or use preventDefault() to stop completely:
| |
| <pre>
| |
| var datepicker_next = jQuery(
| |
| '<a href="">My javascript action</a>'
| |
| )
| |
| .on('click', function(e){
| |
| alert('next '+cycle.run);
| |
| e.preventDefault();
| |
| })
| |
| ;
| |
| </pre>
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Debug clicks on ANY PAGE
| |
| |-
| |
| |
| |
| * Press F12 => Sources => Event Listener Breakpoints righthand pane => Mouse => [x] click
| |
| B O O M we have it captured and can step into ANYTHING.
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! JWT flow
| |
| |-
| |
| | Client is easy!
| |
| <pre>
| |
| Client application API
| |
| -------- -----------
| |
| | |
| |
| | GET /api/employees |
| |
| |----------------------------------------------------->|
| |
| | 403 Forbidden |
| |
| |<-----------------------------------------------------|
| |
| | |
| |
| | |
| |
| | POST /api/authenticate |
| |
| | { login: "john.doe", password: "password" } |
| |
| |----------------------------------------------------->|
| |
| | 200 Success |
| |
| | { token: "my.personal.token" } |
| |
| |<-----------------------------------------------------|
| |
| | |
| |
| | |
| |
| | GET /api/employees |
| |
| | Header { "Authorization: Token "my.personal.token" } |
| |
| |----------------------------------------------------->|
| |
| | 200 Success |
| |
| |<-----------------------------------------------------|
| |
| | |
| |
| </pre>
| |
| |}
| |
| |}
| |
| <!--
| |
|
| |
|
| |
| ===========================================================================================================================================================================================================================================================================================
| |
|
| |
|
| |
| -->
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Node.js
| |
| |-
| |
| |
| |
| {| class="wikitable"
| |
| ! [[Node.js]] installation
| |
| |}
| |
| {| class="wikitable"
| |
| ! [[Node create a new module]]
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Register with npm
| |
| |-
| |
| | A one-time registration is required on a new machine if you want to publish from it:
| |
| npm adduser
| |
| Username: moodboom
| |
| Password: (see private)
| |
| Email: (this IS public) moodboom@gmail.com
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Publish a node module
| |
| |-
| |
| |
| |
| sudo npm install -g # keep doing this until you are happy with local install
| |
| # update version in package.json
| |
| # this creates a FULL "annotated" tag, not a "lightweight" tag that doesn't show up for [git describe] - it also removes the need for a separate commit
| |
| git tag -a 1.0.5 -m "changes include..."
| |
| git push && git push --tags # NOTE: bitpost has a git hook to push changes all the way up to github
| |
| npm publish
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Update a node module's dependencies
| |
| |-
| |
| |
| |
| # make sure dependency in package.json has a carat at the beginning of its version (^x means "at least" version x)
| |
| # make sure the dependency has a new version available - completely publish it first if it is your own
| |
| # then you can simply reinstall from within the module folder to get all dependencies upgraded
| |
| sudo npm install -g
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! Develop several node modules at once
| |
| |-
| |
| | Convert dependencies to use local packages instead of published versions, eg:
| |
| cd ~/development/mah-haus
| |
| npm install -S /home/m/development/thedigitalage/rad-scripts
| |
| Then reinstall everything (local dependent modules, then parent modules, pita - consider links if doing longer-term dev)
| |
| sudo npm install -g
| |
| Then convert back to published versions as they become available (it's up to me to stabilize and publish new module versions):
| |
| cd ~/development/mah-haus
| |
| npm install -S rad-scripts
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! auto AWS
| |
| |-
| |
| |
| |
| * npm install -g aws-sdk
| |
| * Add credentials here: C:\Users\Administrator\.aws
| |
| * see existing scripts, anything is possible
| |
| |}
| |
| {| class="mw-collapsible mw-collapsed wikitable"
| |
| ! install bootstrap
| |
| |-
| |
| |
| |
| * npm install -g grunt-cli
| |
| * mkdir mysite && cd mysite
| |
| * npm install bootstrap
| |
| * cd node_modules/bootstrap
| |
| * npm install # to actually pull down dependencies
| |
| * grunt dist # builds and minifies so you're good to go!
| |
| |} | | |} |
| |} | | |} |