Jon Rumsey

An online markdown blog and knowledge repository.

Project maintained by nojronatron Hosted on GitHub Pages — Theme by mattgraham

Notes from Duckett HTML and JS Books

HTML Book Chapters 4 and 15
JS Book Chapters 3

HTML Book Chapter 4 Notes - Links

Many reasons to link, usual suspects are:

Structure

<a href="">content</a>

URL construction will depend on whether the link is internal or external:

<a href='mailto:person@domain.org'>Email me!</a>

<a href='https://www.google.com' target="_blank">Google Search</a>

Linking to Specific Parts of a Page

Same Page:

Other Page:

<a href="http://my-site.com/#SummaryLinks">Summary Links on my site</a>

HTML Book Chapter 15 Notes - Layout

Positioning Elements

Controlling the position of elements can be achieve through the following:

Note: Use the Z-index to set the "bring to front" and "send to back" equivalent effect on a box.

FLow Details:

Overlapping Elements:

Floating Elements:

The zero pixels tall problem: Some browsers might treat Floated elements as if they were zero pixels tall. To solve this:

div {
  overflow: auto;
  width: 100%;
}

Multi-column Layouts with Floats

You must define these rules to <div> elements to enable the 'column' box behavior:

Screen Size, Resolution, and Pages

Various computers, hand-helds, phones, etc will have different screen sizes.
Developers should take screen-size differences into account when designing a website.
Screen resolution varies from device-to-device as well, which impacts an absolute setting like px.
Page sizing is important, and good sizing decisions will help all users view a well-desgined page.
Recommendation: Stick with page widths of around 960-1000 px.
Try to capture user attention within the first 500-700px vertically on the page, and let them know there is more 'below the fold' and entice them to scroll down.

Fixed Width Layouts vs. Liquid Layouts

Fixed-width Layouts

Liquid Layouts

Layout Grids

The book talks about the 12-column layout design where spanning columns is used to set box widths, thereby creating an interesting, consistent layout of elements on the page. Column widths are set specifically, and evenly to provide consistency when designing box layout.

The book also links up a pre-defined CSS file "960.gs" as a starter for designing a Layout Grid for your site.

Advantages:

Disadvantages:

Multiple Stylesheets

Use @import in your stylesheet to reference another stylesheet.
Reference multiple stylesheets using the Link element <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> statements.

Note: When using multiple stylesheets, rules of precedence can make determining final applied style more complicated.

JS Book Chapter 3 Notes - Functions

Note: Only cover pgs. 86-99

Functions: Perform specific actions with a block of code.
Objects: User-created items that store data in a specified format, sometimes providing properties about the data or manipulate data.
Built-in Objects: JavaScript provides some objects with members that are commonly used to perform tasks.

The Structure of a Function

function myFunc (params) {
  //  codeblock
}

Calling a function is simple:

  1. Define the function.
  2. Call the function by name.
function logIt (message) {
  console.log(message);
}

logIt('Hello World!');

When the interpreter comes to the function keyword it will store the function in memory and use 'logIt' as the custom function name.

When the interpreter continues down the code lines to the logIt(are) line, it looks up the function name 'logIt()' in memory, and supplies any argument (none in this example), and then executes the codeblock.

When the interpreter hits the last curly in the function it exits the function and returns to the end of the 'logIt()' line, and continues downward.

If a function has a variable name in its argument list, then the function must be called in the code and must include initialized variables for the argument list.

Functions that return values

Functions that have a 'return' statement with an argument (a variable or some object), will send that variable back to the calling line of code when it exits.

The calling line of code can either ignore or store the return value from the function with a return statement.

A function can return multiple values by returning:

Named Functions are functions with a name. Anonymous Functions are functions with no name.

let funcyMessage = function(message) {
  return `This is your message: "${message}"`;
}
let newMessage = funcyMessage("Hello World!") ;

IIFE: Immediately Invoked Function Expression. 'iffy'. Stores a value returned from an anonymous function.

let perimeter = (function() {
  let width = 4;
  let height = 5;
  return width + height;
}());
//  the inner parentheses after the let statement ensure the code is treated as a single block
//  the final parentheses tell the interpreter to run the function immediately

When to use anonymous functions and iffys?

The above list of examples are directly quoted from [Duckett, pg97]

Variable Scope

Globally scoped: A variable declared at the root level in a document, and not enclosed with any curly braces. Risks naming collisions in your code if not used carefully.
Locally scoped: A variable declared within a pair of curly braces is scoped to any code within those braces. Function-level scope: A variable declared within a function can only be accessed within that function.

Performance Warning: Globally scoped variables live as long as the web page is loaded in the browser window.

Reading: 6 Reasons for Paired Programming

Personal notes while reading the Code Fellows blog article about Paired Programming

Blog Author: [Allie Grampa]

Key takeaways:

Learning to Code:

Core skills are put to work:

Lab sessions for pair programming will take place at Code Fellows to learn and practice Paired Programming skills and processes.

Benefits include: