INF 362 Unit 1 – Debugging

View Github Repository Open presentation in a new window

SUNY-Albany-CCI-INF362

See all presentation from SUNY-Albany-CCI-INF362

INF 362 Unit 1 – Debugging

0 0

spring-2014-unit-1

Effective Debugging

On Github SUNY-Albany-CCI-INF362 / spring-2014-unit-1

INF 362 Unit 1

Debugging

RAT

iRAT

5 Minutes

iRAT

2 Minutes

iRAT

1 Minute

iRAT

Hand in your test papers.

tRAT

tRAT

10 Minutes

tRAT

5 Minutes

tRAT

1 Minute

How'd teams do?

Appeals Process

Mini Lecture

Clarification

Some things to note

Activities

Rank the following CSS Selectors by specificity

#foo .bar .qux #foo div ul li p a .bar #foo #foo .bar p #foo #baz

What color is this text?

<p class="title" id="red">Hello, World!</p>
#red .title {color: red; border: 1px solid green}
.title {color: green; font-size: 34px;}
p {color: black; font-size:20px; border: 1px solid orange;}
Black Red Green Orange

What color is the border?

<p class="title" id="red">Hello, World!</p>
#red .title {color: red; border: 1px solid green}
.title {color: green; font-size: 34px;}
p {color: black; font-size:20px; border: 1px solid orange;}
Black Red Green Orange

What font size is this text?

<p class="title" id="red">Hello, World!</p>
#red.title {
color: red; font-size:12px; border: 1px solid green}
.title {color: green; font-size: 34px;}
p {color: black; font-size:20px; border: 1px solid orange;}
20px 34px 16px None of the Above

Given the following options, which is the best way to diagnose and resolve a problem with a CSS rule not applying to your code.

Look at your CSS directly Use Dev Tools style inspector Add !important to the style that's not applying Both A and C

A JavaScript function you just wrote is not working, where in dev tools would you want to look first?

Network Panel Element Inspector Sources Panel None of the Above

Place the following steps in order of effectiveness at solving a CSS problem

Add a new class to the element in html, and new styles in CSS Add an "element.style" style to the element in dev tools Check for specificity/cascading issues in Dev Tools Check to see if you wrote the CSS rule correctly

Place the following steps in order of effectiveness for diagnosing and resolving a JS function not firing.

Check to see if you wrote the JS function correctly Run the JS through a linter Add console.log statements where appropriate to track script execution Check the error output of the console

Jeff just diagnosed and solved a problem.

Rearrange Jeff's diagnosis steps in the order you would have chosen and then decide as a team which steps you would have performed and in which order. (you CAN drop steps)

Effect wasn't showing up on screen Found a few missing semicolons, fixed them Refreshed page, still had errors Checked HTML, was clear of errors Checked Chrome Dev Console, saw 2 errors Fixed error in his initialization function (1st error) Refreshed page, had another error Fixed extra comma in a declaration (2nd error) Refreshed page, everything worked.

Back to Jeff.

What is the biggest optimization you could have performed?

Effect wasn't showing up on screen Found a few missing semicolons, fixed them Refreshed page, still had errors Checked HTML, was clear of errors Checked Chrome Dev Console, saw 2 errors Fixed error in his initialization function (1st error) Refreshed page, had another error Fixed extra comma in a declaration (2nd error) Refreshed page, everything worked.

Create a bug in CSS that can be debugged by dev tools

Among the team, choose the best CSS bug, and explain why you thought it was the best example of a css rule to be diagnosed through dev tools.

Create a JS bug that can be diagnosed by dev tools

Among your team choose the best JS bug and explain why.

Given the following code example: Individually: What is the expected output of this code

var theName = "sara";
var namer = function(theName) {
    document.write(theName)
}
namer();

As a team what is the output of this code

var theName = "sara";
var namer = function(theName) {
    document.write(theName)
}
namer();

undefined

This script is not performing the task you think it should be. Choose the between lines where placing a console.log() would be most effective in checking to see if the function is firing at all.

var theName = "sara";
var namer = function(theName) {
    document.write(theName)
}
namer();
1-2 2-3 3-4 4-5 5-6

What is the console.log function you should write to check to see what name is set to inside the function?

var theName = "sara";
var namer = function(theName) {
    document.write(theName)
}
namer();

console.log(theName);

Sara's code isn't printing out her name. Which of the following mistakes in this code is the actual cause?

var theName = "sara";
var namer = function(theName) {
    document.write(theName)
}
namer();
theName should be passed into the function theName is not a global variable document.write(theName) is missing a semi-colon namer is not properly initialized as a function

I'm having a really tough time using Dev Tools. I'd like you to write up some instructions for me to do the following:

Start with this page: (http://jsbin.com/IdAFaJa/1/ ) Add your team name to the H1 tag Apply your team color to your team name Add an unordered list with your team member names after "members" Create a custom css class for your team member names. Apply that style to the list of names Find an image on wikipedia commons (http://commons.wikimedia.org) for your team mascot: provide the search term used to find that image Insert it between the text: "Team {Your Team Name}, Go <img>'s" Image should be 300x300px Image should have a border of 5px inset of your team color;

Final Project Introduction

Create a REAL web app

Working with Empire Justice Center (EJC) to create a web-based foreclosure app.

Each team creates their own version.

Teams determine the criteria for critique.

In the end one team will emerge victorious, and be chosen by EJC to go live.

This is job experience, put this on your resume.

Phase 1

Project Proposal

  • Scope of the project
  • Style Tile
  • All published on GitHub

Phase 2

Project Midterm

  • Mobile First, Responsive Prototype
  • Foundation 5
  • Information Architecture in place
  • Layout finalized

Phase 3

Final Project

  • Jekyll-based static web app
  • Using data sources for content
  • Javascript is a requirement
  • Cross-Browser compatible to IE 9

Unit 2 Preview

  • User Research
  • Collaborative Design
  • Style Tiles
  • Scope

For Next Class

GitHub

Sign up for GitHub Add username to the Team spreadsheet: http://bit.ly/inf362teams

User Research

How to Interview Humans Determining User Needs Creating Personas

Project Scope

Creating a great project scope

Design Studio

The Design Studio Method Podcast that breaks down design studio even further/ Extra - How design studios build consensus (crucial) Extra maybe overkill, as it says a lot of what the first two said, but he answers questions in this one

The Dao of Web Design

http://alistapart.com/article/dao

Style Tiles

Get an understanding of what a Style Tile is, you'll be creating one soon.

Work Study Available

See me for details

0