Megan Taylor

front-end dev, volunteacher, news & data junkie, bibliophile, Flyers fan, sci-fi geek and kitteh servant

post

Thinkful Unit 3 Comprehension Checks

Lesson 1

Assignment 1

Describe what event binding is and how it can be used to make your pages interactive.

Event binding attaches a handler to an event for the DOM elements.

Events can be:

  • A mouse click
  • A web page loading
  • Taking mouse over an element
  • Submitting an HTML form
  • A keystroke on your keyboard

So you can have elements appear, disappear, animate, etc., based on events.

What are the advantages of using the first block of code over the second?

$(‘#my-div’).on(‘click’, function() { ...do stuff...; });
vs.
$(‘#my-div’).click( function() { ...do stuff...; });

the ability to bind to multiple events at once
use “namespaced” events

What does .preventDefault() do, and when would you use it?

prevents the default action of an event, like clicking on a link or a button

What does .stopPropagation() do, and when would you use it?

prevents ‘event bubbling’ – when an event is triggered for a nested element and then is triggered for every element up the DOM.

How and why would you use this in an event handler?

this allows you to target a specific element, while still binding to a high-level element. This is called event delegation.

Give an example of event delegation and explain its advantages.

Event delegation lets you bind fewer event handlers, which can be a big performance gain. It also lets you bind to parent elements and know that event handlers will fire as expected even if the contents of that parent element change.

Assignment 2

How can you set the fast and slow speeds for jQuery animations?

The predefined speeds are specified in the jQuery.fx.speeds object; you can modify this object to override the defaults, or extend it with new names:

// re-set an existing predefined speed
jQuery.fx.speeds.fast = 50;
// Since we've re-set the 'fast' speed, this will now animate over the
// course of 50 milliseconds
$( '.hidden' ).hide( 'fast' );

Why might you be further ahead using CSS animations instead of jQuery for mobile devices?

In modern browsers, and especially on mobile devices, it is often much more efficient to achieve animations using CSS rather than JavaScript.

What must you do to the spelling of properties like font-size that have hyphens if you want to reference them in a jQuery animation method?

If you want to animate a CSS property whose name includes a hyphen, you will need to use a “camel case” version of the property name if you do not quote the property name. For example, the font-size property must be referred to as fontSize.

How can you stop a jQuery effect?

.stop() will stop currently running animations on the selected elements.
.delay() will pause before the execution of the next animation method. Pass it the number of milliseconds you want to wait.

Lesson 2

Assignment 1

Memorize both syntactically correct ways you can call jQuery’s .ajax() method.

$.ajax({
 url: '/data/people.json',
 dataType: 'json',
 success: function( resp ) {
 $( '#target').html( resp.people[0].name );
 },
 error: function( req, status, err ) {
 console.log( 'something went wrong', status, err );
 }
});
$.ajax( '/data/people.json', {
  type: 'GET',
  dataType: 'json',
  success: function( resp ) {
    console.log( resp.people );
  },
  error: function( req, status, err ) {
    console.log( 'something went wrong', status, err );
  }
});

What are success and error callbacks, and how do they work with .ajax()?

Success Callback: A function to be called if the request succeeds.
Error Callback: A function to be called if the request fails.

Make sure you understand that how and why the return command of an ajax() call will return before the server to which the request was made has responded.

AJAX requests run asynchronously —  the $.ajax method returns before the request is finished, and this function’s return statement runs before the request is complete.

What is JSON and what can you use it to represent?

JSON is a string representation of data.

What are the .get() and .post() methods?

If we’re just making a simple request — and if we don’t care about error handling — jQuery provides several “convenience methods” that let us use an abbreviated syntax. Each of these methods takes a URL, an optional data object, and an optional callback for handling a successful request.

$.get( '/data/people.html', function( html ){
  $( '#target' ).html( html );
});
$.post( '/data/save', { name: 'Rebecca' }, function( resp ) {
  console.log( JSON.parse( resp ) );
});

We can send data with our request by passing an object as the second argument to one of the convenience methods.
For a GET request, this data will be appended to the URL as a query string; for a POST request, it will be sent as form data.

How can you use jQuery to serialize and submit form data?

The .serialize() method converts form input to a query string format.

.ajax() calls return a jqXHR object. What are the .then(), .done(), .fail(), and .always() methods on jqXHR objects for?

.then() – attach success and error callbacks
.done() – attach success callback
.fail()– attach error callback
.always() –  attach callback that runs on success or failure

What is JSONP and what does it allow you to do?

Allows you to use data even though it is hosted on another server.

What does an ajax call with JSONP look like in jQuery?

$.ajax({
 url: '/data/search.jsonp',
 data: { q: 'a' },
 dataType: 'jsonp',
 success: function( resp ) {
 $( '#target' ).html( 'Results: ' + resp.results.length );
 }
});

What is the .getJSON() method?

A convenience method to make a JSONP request; if the URL includes callback=? or similar, then jQuery will treat it as a JSONP request.

$.getJSON( '/data/search.jsonp?q=a&callback=?',
 function( resp ) {
 $( '#target' ).html( 'Results: ' + resp.results.length );
 }
);

How can you use $.Deferred() to return a promise?

The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request.

Lesson 3

Assignment 1

What is JSON?

JSON (or JavaScript Object Notation) is a lightweight, easy and popular way to exchange data.

What’s a callback and how does it work in the context of a jQuery .getJSON() request?

A callback is a function that is passed to another function to run.

What is JSONP and what does it allow you to do?

JSONP (or JSON with padding) allows a script to fetch data from another server on a different domain.

Assignment 2

What is encapsulation and why is it important?

Encapsulation in an important organization concept for code. It separates code into distinct pieces.
Broadly, encapsulation does one or both of these:

  • restricts access to some of the object’s components
  • facilitates the bundling of data with the methods (or other functions) operating on that data

How can you use object literals to namespace functions?

An object literal is perhaps the simplest way to encapsulate related code. It doesn’t offer any privacy for properties or methods, but it’s useful for eliminating anonymous functions from your code, centralizing configuration options, and easing the path to reuse and refactoring.


// An object literal
var myFeature = {

    myProperty: "hello",

    myMethod: function() {
        console.log( myFeature.myProperty );
    },

    init: function( settings ) {
        myFeature.settings = settings;
    },

    readSettings: function() {
        console.log( myFeature.settings );
    }

};

myFeature.myProperty === "hello"; // true

myFeature.myMethod(); // "hello"

myFeature.init({
    foo: "bar"
});

myFeature.readSettings(); // { foo: "bar" }

The object literal above is simply an object assigned to a variable. The object has one property and several methods. All of the properties and methods are public, so any part of your application can see the properties and call methods on the object. While there is an init method, there’s nothing requiring that it be called before the object is functional.

Explain the DRY concept.

Don’t repeat yourself; if you’re repeating yourself, you’re doing it wrong.

post

Thinkful Unit 1 Comprehension Checks

Lesson 1

Assignment 1

Explain in words your grandparents would understand what happens after you type a URL in your web browser and hit ‘Enter’.

Browser reads the URL, finds the rules for talking to another computer, finds the name of the computer serving the webpage, finds which specific webpage you are looking for. From the name of the computer where the webpage lives, the browser can find the computer’s IP address(like a phone number). The browser connects to the IP address (like calling someone and they pick up the phone) and then if it can find the specific webpage you asked for, it shows up on your screen. If it can’t (like if you call and someone picks up but the person you are looking for isn’t home or its a wrong number) then it shows a 404 page.

What is a DNS, and what is its purpose?

DNS is like a phone book for computers. It’s how you can connect to another computer from your own.

What is a server and what is a path, and how do they relate in a URL?

The server is the computer where your webpage lives. The path tells the computer where the file you are looking for is.

Assignment 2

What do the ‘hypertext’ and ‘markup language’ in HTML mean, respectively?

Hypertext is simply the idea of documents that are capable of being linked together.
Markup languages are used to annotate and add semantic structure, or meaning, to a text document.

What is an HTML tag?

Tells the browser what different pieces of text are (list, header, paragraph, etc.)

What’s the difference between a span and a div?
The div tag is used to divide section of a webpage and a span tag is used to divide up text.

What is the doctype tag, and where does it go?

It goes at the very top of the HTML file. It tells the browser what version of HTML you are writing the document in.

Lesson 2

Assignment 1

Explain what it means when we say that CSS is responsible for presentation (vs. HTML, which is responsible for content)?

CSS adds color, size, columns, typography, images and layout

What is a selector? What is an element? How are they related in CSS?

The CSS selector is the HTML element we want to affect.

What is the general form for a CSS declaration (HINT: It’s a combination of the terms value, selector, property).

h1{color:#fff;}
selector:{property:value;}

What is a descendant selector, and how does it work?

Descendant selectors are similar to family trees; you start with the parent element you wish to select, add a space, and continue naming any interior elements until you’re arrived at the specific element you wish to select.

Assignment 2

How would you implement inline styles?

<p style="color:#fff;">text</p>

How would you implement internal styles?

<style>
p { color:#fff; }
</style>

How do you link to an external style sheet?

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Why is it generally a good idea to avoid inline styles?
Because it defeats the point of CSS, you would have to go back through everything to make style changes.

Lesson 3

Assignment 3

For a given styled div element, what would you expect the following margin settings to do:

div { margin: 10px; }
10px of space on the outside of the div (every side)

div { margin: 10px 10px;}
10px of space above and below the div

div { margin: 10px 10px 20px 5px;}
10px of space above the div, 10px of space to the right of the div, 20px of space below the div and 5px of space to the left of the div.

Explain the difference between the following values for the display property: block, inline-block, inline, none.

none: Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
inline: The element generates one or more inline element boxes.
block: The element generates a block element box.
inline-block: Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.

What does the clear property do, and when would you use it?

return the document to its normal flow after floating

Explain the difference between absolute and relative positioning.

The relative value allows you to use box offset properties such as top, right, bottom and left. The absolute value breaks the element from the normal flow of a document.

What is the effect of setting a negative top margin on an element?

The element will be pulled up on the page.

Lesson 5

Assignment 1

What’s the difference between an HTML element and tag?

Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include h1 through h6, p, a, div, span, strong, and em.
Elements are often made of multiple sets of tags, identified as opening and closing tags. Opening tags mark the beginning of an element, such as <div>. Closing tags mark the end of an element and begin with a forward slash, such as </div>.

What’s the difference between a relative and absolute path, and when should you use the former instead of the latter?

A relative path is used to point to something on the same computer or server. An absolute path is used to point to something on another computer or server.

Why would you often want to include multiple options when setting the font-family property for, say, the body element in your CSS?

Because the font you use might not be on your users’ computers.

Lesson 6

Assignment 1

How would you implement a gradient background for a given div?

 div {
 background: #70bf32;
 background: url('linear-gradient.png') 0 0 repeat-x;
 background: -webkit-linear-gradient(#a1e048, #6a942f);
 background: -moz-linear-gradient(#a1e048, #6a942f);
 background: -ms-linear-gradient(#a1e048, #6a942f);
 background: -o-linear-gradient(#a1e048, #6a942f);
 background: linear-gradient(#a1e048, #6a942f);
 }

How would you use an image as a bullet in an unordered list?

 li {
 background: url('tick.png') 0 0 no-repeat;
 list-style: none;
 padding-left: 20px;
 }

What’s the point of including the alt attribute in any and all img elements appearing in your HTML?

The alt attribute value is displayed in place of the image should the image not be available. Also, the alt text is the cursor tooltip text that may be shown when hovering over the image.

post

Learning Front End Web Development with Thinkful

Thinkful is an online learning community that combines online resources with personalized feedback and mentoring. They have a Front End Development course, and just added a Python course. I recently signed up for the Front End Development course, hoping to shore up my JavaScript and figure out some of the cool new features of HTML5/CSS3.

After looking over the syllabus, I was initially concerned, because they start with very basic HTML/CSS. Been there, done that. I’m confident in that skill set. But after voicing my concerns, both my mentor and the class coordinator assured me that I could skip anything I felt comfortable with and go straight to the JavaScript.

So this week, I’ll be doing a quick overview of HTML5/CSS3 features (beyond the new semantic tags), and then I’ll jump into the JavaScript/jQuery segment.

Here are some resources I’ve collected:

Road Map To Coding With HTML5: Tutorials and Guidelines

Top HTML 5 Tutorials from HTMLGoodies

Take Your Design To The Next Level With CSS3

HTML5 Rocks Tutorials

Dive Into HTML5

If you have any other useful resources, I’d love to see them!