Training Meetups - JavaScript

[ktabarez]

I sent out the meeting minutes, can one of you 3 please beautify this issue. Thankya

[abt-mfcu]

I got this.

[ktabarez]

Meeting Minutes for 8/15/16

Project

• Pluralsight Training – Javascript https://app.pluralsight.com/paths/skills/javascript

Attendees

• Adam
• Ben
• Kain
• Lan
• Leslie
• Michael
• Rey

Meeting Lead

• Kain

Obstacles

• Meeting might be too early for some
• An hour a day might be too much for some

Follow-up Action Items

• Will schedule a meeting at a later time. It might be too early for some.
• After this week, decide if an hour a day meetups are too frequent to have.

Completed Work

• Module 1 - https://app.pluralsight.com/player?course=quick-start-javascript-3-1918&author=susan-simkins&name=quick-start-javascript-3-1918-m1&clip=0 Module 2
• Objects - https://app.pluralsight.com/player?course=quick-start-javascript-3-1918&author=susan-simkins&name=quick-start-javascript-3-1918-m2&clip=0
• Methods - https://app.pluralsight.com/player?course=quick-start-javascript-3-1918&author=susan-simkins&name=quick-start-javascript-3-1918-m2&clip=1
• Object Literals and Object Constructors - https://app.pluralsight.com/player?course=quick-start-javascript-3-1918&author=susan-simkins&name=quick-start-javascript-3-1918-m2&clip=2

Decisions Made

• Will try to only move on till the next videos once we all understand the concepts shown.

For tomorrow’s meeting

• we’ll do a live code session where we can showcase what we’ve learned
• go over key terms
• answer any outstanding questions

Summary

• Team found it beneficial watching the videos as a group because they can pause and ask questions.
• Discussed the benefits of accessing an object via its key or via dot notation

    var person = {
                firstName: "Mickey"
                lastName: "Mouse",
                getAge: function(){
                                return 55;
                }
    };
alert(person["lastName"]);
alert(person.lastName);

• It’s very important to know the JavaScript terms so we can understand what people are talking about in blog posts, stackoverflow, textbooks, etc. Knowing key terms, when to use them, what they mean will help us all be on the same page. Will also help in retrieving better results when performing Google searches.

Key terms learned:

• Object Literal - a comma-separated list of name-value pairs wrapped in curly braces.
• Instantiate an Object - to create an instance by defining one particular variation of object, giving it a name, and locating it in some physical place.
• Properties - the values associated with a JavaScript object.
• Dot Notation - accessing a property of an object by adding . plus the property name after the object name (Example Object.property: document.getElementByID)
• Function - a block of code designed to perform a particular task, executed when "something" invokes it (calls it). (Example: function name(parameter1, parameter2, parameter3) { code to be executed } )
• The new operator - creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function (Example: new constructor[([arguments])])
• Object Key - the name of the property
• Object Constructor - a function called via the new operator to create multiple instances of an object.
• Primitive types - literal values that have no properties. Includes these 5 types: undefined, null, boolean, string and number.
• Non Primitive types - composite data types that reference data, such as Object and Array.

[ktabarez]

Meeting Minutes for 8/16/16

Project

• Pluralsight Training – Javascript https://app.pluralsight.com/paths/skills/javascript

Attendees

• Adam
• Dell
• John
• Kain
• Lan
• Leslie
• Rey

Meeting Lead

• Kain

Obstacles

• None

Follow-up Action Items

• Complete the following exercise.
  • Create a logging object literal that has one function: logThisMessage that takes in a message parameter and does a console.log(message);
  • Create an object using an object constructor that’s called app.  The object should have…
• four properties that should be initialized to an empty string.
  • HeaderSection
  • BodySection
  • SidebarSection
  • FooterSection
• The following functions:
  • init
  • config
• Try to answer the following questions:
  • Why is it important to understand global scope?
  • What are host objects?
  • What are core objects?
  • What are user defined objects?
  • What type of object is the window object?
  • What is function based scope?
  • What is global scope?
  • When to use global variables?
  • When to use local variables?

Completed Work

• Topics covered in module 4: https://app.pluralsight.com/paths/skills/javascript

Decisions Made

• N/A

Summary

• Recapped yesterday’s topic
• Avoid global scoped variables because you can accidently override functions
• Local variables only exist within the function scope that they are declared in

function func1(){
//some code logic

  function func2(){
     var num = 1
   }

  console.log(num); 
/*num is out of scope so num is now undefined because it’s
 being used outside of the func it was declared in func2*/
}

• Key terms learned:
  • Host Objects
  • Core Objects
  • User Defined Objects
  • Environment where your code runs
  • Built into the language
  • Global scope
  • Local scope
  • Function scope
  • Window object

[ktabarez]

Training Meetups: JavaScript Meeting Minutes 8/17/16

Project Pluralsight Training – Javascript https://app.pluralsight.com/paths/skills/javascript

Attendees • Adam • Dell • John • Kain • Lan • Leslie • Rey

Meeting Lead Kain

Obstacles • None

Follow-up Action Items • Complete the following exercise. Expand on yesterday’s exercise and … o Convert the following properties into objects created via Object Constructor. Each of these properties should expose a public init function.  HeaderSection • should contain the following properties o appName o user – an object literal with the following properties  username  email  company role  BodySection • should contain the following properties o pageName – a string  SidebarSection • Should contain the following properties o MenuItems – an array of object literals with 3 object literals. Each object literal should contain the following properties  Object 1 • name – string with value of Home • link – string with value of ‘/’  Object 2 • name – string with value of Reports • link – string with value of ‘/reports’  Object 3 • name – string with value of Settings • link – string with value of ‘/settings’  FooterSection • A companyContactInfo object literal with the following properties o Phone o Fax o Address o email

Completed Work • Topics covered under the intermediate section – Module 1: Javascript Objects and Prototypes o All topics in section 1 of the table of contents o All topics in section 2 of the table of contents

Decissions Made o N/A Summary • Will send a recap in the morning didn’t have enough time to complete this section • Plunker link: http://plnkr.co/edit/j4Fzv5ELxL5zH1kKVi5f?p=preview

[ktabarez]

Training Meetups: JavaScript Meeting Minutes 8/18/16

Project Pluralsight Training – Javascript https://app.pluralsight.com/paths/skills/javascript

Attendees • Aaron • Adam • Dell • John • Kain • Lan • Rey

Meeting Lead Kain

Obstacles • None

Follow-up Action Items • No homework 

Completed Work • Topics covered under the intermediate section – Module 1: Javascript Objects and Prototypes o All topics in section 3: JavaScript Prototypes and Inheritance

Decissions Made • Watch section 3 again or move on to Module 2: JavaScript design patterns.

Summary • Prototype and the prototype property • Instance vs Prototype properties • Multiple levels of inheritance • Prototypal inheritance chains • Creating prototypes with classes

[ktabarez]

Training Meetups: JavaScript Meeting Minutes 8/22/16

Project Pluralsight Training – Javascript https://app.pluralsight.com/paths/skills/javascript

Attendees • Adam • John • Kain • Lan • Leslie • Rey

Meeting Lead Kain

Obstacles • None

Follow-up Action Items • Build on the current exercise o Instead of using this and the dot operator to access member properties and functions use ‘that’. o Update the init function  Should accept a call back function that’s called callbackFunc  callbackFunc should be called right before init ends. Completed Work • Topics covered under the intermediate section – Module 2: JavaScript Design Patterns o Common object patterns  Intro https://app.pluralsight.com/player?course=javascript-design-patterns&author=aaron-powell&name=javascript-design-patterns-m0-common&clip=0  Function argument patterns https://app.pluralsight.com/player?course=javascript-design-patterns&author=aaron-powell&name=javascript-design-patterns-m0-common&clip=1  Chaining https://app.pluralsight.com/player?course=javascript-design-patterns&author=aaron-powell&name=javascript-design-patterns-m0-common&clip=2

Decissions Made • N/A

Key Terms • Call back functions • this vs that • Chaining • The arguments function property

Summary • ‘this’ can change depending on where you are at in the code • Object chaining allows for a fluid way of invoking functions on an object • To enable object chaining you need to return a reference to the current object • It’s best practice to assign this to that and return that when creating an object that uses object chaining • A function who accepts a parameter as a function reads as “accepts a call back function”. The function can then invoke the call back function and pass arguments to it.

[ktabarez]

Training Meetups: JavaScript Meeting Minutes 8/23/16

Project Pluralsight Training – Javascript https://app.pluralsight.com/paths/skills/javascript

Attendees • Aaron • Adam • John • Kain • Lan • Leslie • Rey

Meeting Lead Kain

Obstacles • None

Follow-up Action Items • Build on the current exercise  To the app object • Add a private member array property called onLiveUserCountChangedCallbacks which will keep track of the callbacks to be executed when the liveUserCount property changes • Add a public member function called onLiveUserCountChanged that accepts a callback and pushes the callback to the onLiveUserCountChangedCallbacks array. • Add a liveUserCount public property and make it observable. When the liveUserCount changes, execute all the callbacks in onLiveUserCountChangedCallbacks.  Completed Work • Topics covered under the intermediate section – Module 2: JavaScript Design Patterns o Common object patterns  Observable Properties https://app.pluralsight.com/player?course=javascript-design-patterns&author=aaron-powell&name=javascript-design-patterns-m0-common&clip=3 Decissions Made • N/A

Key Terms • More callback functions • Observable property • Observable Pattern

Summary • We went over the observable pattern and the JavaScript syntax.

[ktabarez]

Training Meetups: JavaScript Meeting Minutes 8/24/16 - 8/26/16

Project Pluralsight Training – Javascript https://app.pluralsight.com/paths/skills/javascript

Attendees • Aaron • Adam • Dell • John • Kain • Lan • Leslie • Rey

Meeting Lead Kain

Obstacles • N/A

Follow-up Action Items • Build on the current exercise o Update the app object init function to return a promise once all initialization code has been executed Completed Work • Completed the JavaScript design patterns module. Topics covered: o Timer Pattern o Asynchronous Module Definitions o Pub/Sub Design Pattern o Promises

Decissions Made • N/A

Key Terms • Pub/Sub • Deferred • Promise • Asynchronouse Execution Pattern • Recursive setTimeout Pattern

[ktabarez]

Training Meetups: JavaScript Meeting Minutes 8/29/16

Project Pluralsight Training – Javascript https://app.pluralsight.com/paths/skills/javascript

Attendees • Adam • John • Kain • Leslie • Rey

Meeting Lead Kain

Obstacles • N/A

Follow-up Action Items • Build on the current exercise o Add the jQuery library to your HTML page o Add an H1 to your body element o In the init function of your app class, use jQuery to set the H1 element to “Hello Word!” • Will start “Demo: CSS3 Selectors” under Finding Parts of a Page.

Completed Work • jQuery Getting started o Intro o Anatomy of a jQuery Command o Finding parts of a page, all the way up to CSS3 Selector Review.

Decisions Made • N/A

Key Terms • Anonymous function • Wrapped set • Selector • CSS3 selectors • Pseudo Selectors

Summary • Anatomy of jQuery o Anonymous function is a function that doesn’t have a name

$(function(){ //your code here });

o Find all divs on a page

$(function(){ var divs = $(‘div’); //divs now has an array of all div elements on your page });

o Selectors are used to target a certain element or a set of elements on your HTML page o Principles of CSS selectors  #some-id • The name of the id needs to be unique across your HTML page • Start with a #  .some-class • Starts with a ‘.’ • Can sprinkle them all over your HTML page.  Pseudo selectors • Target the state of an element • Examples: o div:first-child o div:hover o div:not(.some-other-class)

[ktabarez]

Training Meetups: JavaScript Meeting Minutes 8/30/16 - 9/2/16

Project Pluralsight Training – JavaScript https://app.pluralsight.com/paths/skills/javascript

Attendees • Aaron • Adam • John • Kain • Lan • Leslie • Rey

Meeting Lead Kain

Follow-up Action Items • Adam – Continue working on the header section • John – Start on the sidebar section • Rey – Start on Body section of our card management app

Completed Work • Will start Advanced Event Handling under the Advanced Techniques in JavaScript and jQuery - https://app.pluralsight.com/player?course=javascript-jquery-advanced-techniques&author=kevin-murray&name=javascript-jquery-advanced-techniques-m3&clip=0 • Started live team coding sessions – Applying everything we’ve learned so far and writing an app as a team. Each member has been assigned a task o Using this plunk to collaborate: https://plnkr.co/edit/UJGLEW4yHlNWidZ3yaaL