LukeFinney_Prework.md

And so it begins...

FE1706 Prework Day #3

DBW: CH. 7

1. When using the input element the value attribute controls it's behavior as it specifies what a given input will do whether that be "upload," "subscribe," or some other action.
2. The <select> element is used to create a dropdown list as it allows a given user to "select" and option from the list.
3. If one wishes to send information to a server he or she should use the submit type attribute. It would appear as follows in a line of code: <input type="submit" value="upload" />
4. Using the <fieldset> to group a number of form items together that relate for a particular purpose (e.g. contact information).

---

DBW: CH. 13 & 15

1. When one creates a new, HTML element a box is created that surrounds the created content. These boxes can be modified by adjusting the border, margin, and padding properties. The border property controls the edges of the box and they can be expanded on shrunk using pixels, percentages or ems. The border property defaults to being invisible, but it can be be made visible using color, and further modified in terms of its width and pattern. The margin property refers to the space on the outside edge of a given border that creates a buffer between the box in question and any other boxes. The padding element functions similarly to the margin property only on the inside of a given box. It identifies the space between the content in a box and that box's border.
2. 1px = top; 2px = right, 5px = bottom; 10px = left
3. Inline elements are elements that stay within the same line they are placed in such as the <b> element. On the other hand, block-level elements will always create a new line. Inline elements can be coded to work like block-level elements and viceversa by using the display property. The following could be used to make a block-level element behave like an inline one:
   p{
display: inline;}
4. Fixed positioning is used to make an element stay in a static place on a given page regardless of the scrolling of the user. In other words, you can "fix" a drop-down menu to the top of a page and it will remain at the top as the user scrolls up and down the page. It is important to consider the z-index when using fixed positioning as it allows one to control what box appears on top.
5. The main difference between a fixed and liquid layout is that a fixed layout is static while a liquid layout is dynamic. Fixed layouts will stay true to their specified pixels even if a user increase or decreases their browser, or accesses the page via a device that has a conflicting screen size. However, a liquid layout will morph with the various browser or screen sizes users visit the page with.

FE1706 Prework Day #4

DBW: CH. 5

1. The alt attribute is important because it provides a text description of an image if one cannot see the image whether that is due to an image not loading or for an individual who is visually impaired.
2. An image's placement as inline or block is determined by whether or not the <img> element is placed before or after a block element. Placing an <img> element before a block element will cause the block element to kick down and start on the next line, while placing it within a block element will put it inline with text.
3. A .jpg file is best used when a picture has many colors and shades in it. A .gif on the other hand, is best used when an image has few colors and/or large areas of the same color.

---

DBW: CH. 16

1. Using CSS to size images overall yields a developer more efficient control of the images used on a given site. First, allows you to create static classes of photo sizes used across the entire website. This allows for easy, quick adjustments as one maintains the site. Second, the image can now be moved using some of the features distinct to CSS, such as the float property. Third, CSS allows for the streamlined ability to add background images and modify those images.
2. A sprite is when one image is used for multiple parts of an interface. These are useful since they load fast given that it's only one image, typically a simple one at that.

FE1706 Prework Day #5

EJ: CH. 1 & 2

1. In JavaScript, numbers are just that, numbers. Fractional numbers must be represented with decimal notation, but this means that some numbers will need to be rounded making them less precise (e.g. Pi is an irrational number that continues forever, so rounding it to 3.14 will make it less precise than using the whole irrational number. However, there are limits to the number of digits that JavaScript uses, so rounding is inevitable at some point). Numbers can be manipulated using arithmetic in JavaScript, and such functions follow PEMDAS, although using parenthesis is always a good option when multiple operators are involved. Infinity, -infinity, and NaN (Not a Number) are considered numbers, but don't behave like them. Infinity is a mathematically solid concept an can result in "NaN" returns. Next, strings are used to represent text in JavaScript. Parenthesis around almost anything will indicate a string. Both single- and double-quotes can be used. Using a backslash \ indicates to JavaScript that the character following it has special meaning. It is in this way that one can print a mark that JavaScript would usually interpret differently, like a ". Different from the mathematical operators one can use with numbers, strings have their own set of operators, although the + operator may be used to glue text together. One of these unique operators is the typeof operator, which will produce a string value that names the type of value you give it if you ask for a return using the console.log action. Writing console.log(typeof 17) it will return the word number as that is what 17 is. In addition to numbers and strings, JavaScript also has booleans, which is the type one should use to designate "true & false." To allow a programmer to make full use of true/false situations, booleans can be manipulated using mathematical expressions of "greater than" > and "less than" <, as well as other variations on these expressions.
2. JavaScript supports three logical operators, which allow more functionality to control booleans as they include <i>and</i>, &&, <i>or</i> ||, <i>not</i> !. Additionally, a ternary operator manipulates three values and returns one of two other values based upon a true/false outcome. It splits up the three values using a question mark and a colon. A ternary operation would be written as follows: console.log(false ? 1 : 2); This would return a 2.
3. Variables, var, are JavaScript things that can hold a value. In order to assign something to a variable, one simple uses the word var followed by a space and then the name expressing a new variable. For example: var ten = 10; would define the word ten as the number 10. Variable names cannot be created from words that already have a special meaning in JavaScript, cannot have a number as the first digit ("22catch" = not okay; "catch22" = okay), and they cannot use punctuation except for the $ and _ symbols.
4. A statement in JavaScript is comprised of many expressions. Expressions are fragments of code that will produce a value and when multiple expressions are tied together they create a statement. Multiple statements combined together create a program. The values created by an expression are often meaningless in isolation, where as a statement's value can begin to have a larger impact.
5. Some of JavaScripts reserved words are: var, new, and typeof. These words have specific meanings that are necessary to build JavaScript programs. If one uses a reserved word as a variable, it will confuse the whole program.
6. Control flow is the order in which statements will be executed in a program. At it's most basic, control flow will execute from top to bottom. This flow can be adjusted using conditional and looping statements. It is important to understand this concept for one to be able to effectively build complex programs capable of responding to dynamic situations that are able to meet certain conditions, check for specific conditions, run and re-run functions for execution, etc.

UX/UI

Psychology

The Dodo supports the question: How much work does the user have to do to get what they want? People have to do almost zero work to get what they want, in this case what people want is happy videos about animals. The landing literally greets users with a happy video of an animal. Success.

The RTD Pass Store does not leave a good response to this question. This website looks almost nothing like the main RTD website. When I first clicked it my first thought was that it was an attempt at phishing. Overall, this website does not inspire confidence.

Usability

The True Size supports the question: Are you being clear and direct, or is this a little too clever? At this website, user need to provide minimal input to get what they're after. It's simple and straightforward.

Wonder challenges a positive response to that question. The website seeks to help people research, but when a user types in their research question, they must continue to provide inputs to how they want to research. This website seemingly is trying to help people research, but seems to make it more complicated than necessary for someone who might struggle with research to begin with, hence why they're at this site in the first place.

Design

ESPN supports a positive response to the question: Do users think it looks good? Do they trust it immediately? From top to bottom, the ESPN website varies its elements to help guide the user to the content they want. This inspires confidence from the user as they can easily get what they want, whether it's scores at the top, specific sports leagues, or general news.

Spicy Basil, the Thai restaurant near my house, challenges a positive response to the question in question. Spicy Basil's website is informative, as it clearly displays the menu, but the design of the website does not inspire confidence from the user. The color scheme and lack of meaningful organization leave much to be desired.

Copywriting

Google immediately came to mind in regards to supporting the question: Is it clear, direct, simple, and functional? The Google landing page is simple and direct. It provides a simply search bar that delivers exactly what a user wants. If a user has a Google account, there are other options a user may exercise on this page, but those options don't interfere with the main purpose of the page, to search out information for the user.

Reddit, on the other hand, would not support a positive response to the above question. The landing page is quite busy and is difficult for a new user to navigate and understand. Inspiring confusion in a user leads to a build up of anxiety. To effectively use this page requires some time learn how it's organized and at some level, it works better with a third-party brower extension that makes the UI better.

Analysis

Netflix supports a positive response to the question: Are you using data to prove that you are right, or to learn the truth? As a user spends time on the website interacting with its content, the site delivers the user content it believes that user desires based upon how that user interacts with it. As users either view or don't view this content, Netflix will continue to refine its knowledge base on that user's preferences getting closer to the "truth."

The Denver Post challenges a positive response to this question. Contrary to Netflix, this site is likely only gleaning data from page clicks, which isn't the beset indicator to return information on their user's preferences. In this regard they can only tell what stories were popular, but have no data to indicate why those particular stories garnered interest.