LukeFinney_Prework.md

And so it begins...

FE1706 Prework Day #1

DBW Ch. 1 & 2

1. The purpose of HTML code is to outline the overarching structure for the page and organize a given page's hierarchy.
2. Tags are a series of preset codes that modify text in a variety of ways when used in couplets. There are three types of tags: opening, closing, and void-elements which are essentially self-closing tags. An element is comprised of a couplet of tags, opening & closing, or a void-element, along with any text those tags modify.
3. Attributes are used to elaborate further on elements by providing extra information to modify those elements.
4. The head element contains information about a given page. An example of this information would be the title element which, as the name suggests, provides a title for a given webpage in the bar at the top of a browser. Meanwhile, the body element hosts all the information that will display within a user's browser of choice.
5. Alt + Cmd + U
6. HTML Elements and Their Uses:
      * bold <b></b> is a bold element and it is used to make text visually bold on a web page.
      * italics <i></i> is an italic element and it is used to visually italicize text on a web page.
      * Super^script <sup></sup> is a superscript element and it is used to shrink and elevate text like one would for a mathematical power.
      * Sub_script <sub></sub> is a subscript element and it is used to shrink and drop text like one would for footnotes or chemical footnotes.
      * <br /> is a line
         break element
         and it starts text on new line.
      * <hr /> is a horizontal rule element

   ---

   and it adds a horizontal line to split up sections.
7. Empty elements are tags that do not contain words between an opening and closing tag and are usually only represent by one tag. This tag will have an opening bracket, a character, space, forward slash, and then the closing bracket.
8. Semantic markup are elements that don't affect the structure of your webpage, but provide extra information about the elements in the HTML code that is used by other programs such as screen readers and search engines. Additionally, these elements will sometimes visually modify the text they are modifying. For example <strong></strong> will bold the text visually, but also affect how the text is pronounced on a screen reader.
9. Three new semantic elements in HTML5 a new <header> element that contains a navigation for more precisely organizing information in the header. There are also <header> <footer> <aside>` and <article> that will allow programs like screen readers to more precisely identify or ignore content.

A Developer's Drive - Simple HTML Website

---

Gear Up: Empathy Reflection

1. What role does empathy play in your life and how has it helped you?
* Empathy has played a crucial role in two main areas of my life: family and teaching. I am part of a rather large, diverse extended-family consisting of somewhere between 130 and 150 people that range in age, occupation, education-level, race, etc. In my view, empathy is at the center of my extended-family's cohesion, as we have always sought to understand one another's challenges, celebrate each other's successes, and work through disagreements and conflicts inherent in any large, diverse group. Empathy was also a central component in my previous career as a teacher. Outside of the obvious need for empathy to be an effective classroom teacher reminiscent of my reflection on my family, I frequently discussed the role of empathy in writing. I taught history, which is a subject that demands a significant amount of writing. Teaching my students to be aware of how others will receive and understand (or not understand) their words was a point I frequently came back to in most of my lessons on effective writing.

2. How does empathy help you build better software?
* As a software developer, most of the software I create, manage, and/or maintain will be used by other people who will run the gambit in terms of how they identify personally and their prior experiences. It's crucial for software developers to be aware of this fact in order to make accessible programs. To over generalize, a developer doesn't necessarily have control over who uses their software, but they do have control over how it is structured. Given this, it's important to design software that caters to a variety of users and the potential life experiences they have prior to using the software.

3. Why is empathy important for working on a team?
* More often than not, teams work on complex problems on static timelines. Given this, team cohesion is a crucial element to being an effective and efficient worker. Empathy is a key characteristic to build cohesion. Team members that are empathic with one another will likely build strong relationships built on trust and understanding. This can enable to a team to produce at a high level.

4. Describe a situation in which your ability to empathize with a colleague or teammate was helpful.
* In my fifth year as a teacher I was afforded the opportunity to host a student-teacher in my classroom. It was an experience that pushed my ability to be empathetic to a new level. I had to ensure that I gave my student teacher just enough work to push him, but not so much that he'd become overwhelmed. I had to account for his background knowledge and make adjustments as needed. I also had to ensure that he was working on tasks he felt were meaningful to his own trajectory as an educator. Given that I was a young teacher still relatively close to my own student-teaching experience, I was able to leverage that to be a competent mentor teacher and provide him with guidance and experiences I wish I would have had as a student teacher.

5. When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?
* I struggle the most to be empathetic when working in teams and a given team member isn't necessarily doing due diligence to complete their portion of the work load, but it's largely a degree of choices they made that were within their control. For example, an afternoon project gets rushed because a person took an extra long lunch break, or something. To improve my skills in this regard I think requires me to be better at communicating with my teammates to establish not only clear norms for work, but also norms for how to communicate with one another in these types of situations.

---

FE1706 Prework Day #2

DBW: CH. 3 & 4

1. Ordered lists <ol></ol> are used for numbered lists where maintain steps or identifying something in a particular is important. Unordered lists <ul></ul> meanwhile, simply use bullet points. When creating either ordered or unordered lists, list items are added using the <li></li> tag. Unique from both ordered and unordered lists, definition lists <dl></dl> are used when one needs to define some sort of key term. When making definition lists use the <dt></dt> tag to identify a key term and use the <dd></dd> tag to identify the subsequent term's definition. Lists can also be placed within pre-existing lists making another level of lists. Doing so is known as creating a nested list. When created a nested list within an unordered list, a browser will usually modify the bullet point
2. The <a> is used to link to another website. The opening tag of the element includes a hypertext reference or href attribute and should be structured as follows: . Between the opening and closing tags, one should include text that describes/explains to the user where the link will take them. The closing tag is simply . A complete link element will appear as follows:
   <a href="http://www.google.com">Google</a>
3. If one wants to have a link open in a new window or tab, he or she must add that target attribute to the opening tag. It should be structured as follows: <a href="http://www.google.com" target="_blank">
4. Links can also be created that will navigate a user to specific part of the page like the "top" or "bottom." Doing this requires that a page has been set up with the necessary id attributes that designate such sections of the webpage. To make this happen, one needs to use the # symbol followed by the value of the id attribute that one wants the link to navigate to. It should be structured as follows: <a href="http://www.google.com/#bottom">

---

DBW: CH. 10, 11, & 12

1. The purpose of CSS is to allow a developer to modify how the content of a website appears to a given user. It modifies such elements as background colors, fonts, paragraph structure, among other elements.
2. CSS stands for Cascading Style Sheets. In this context, the word "cascade" refers to the priority placed on displaying a given CSS rule. General rules about CSS rules:

• When two selectors are the same, for example both modifying <b>, then the last rule takes priority.
• A rule that is more specific will take priority over a rule that is less so. For example, a rule modifying both <p> and <b> is more specific than a rule just modifying <p>.
• One can add !important to give a rule priority over rules that would usually take priority over it.

3. A CSS rule consists of two parts: a selector and a declaration. A selector indicates which element(s) a CSS rule will be applied to. You can add multiple elements, separated my commas, to be modified in the same way. A declaration consists of two parts: a property and a value. A property is the aspect of an element one wishes to modify, for example, font or color. A value identifies the specific setting for the chosen property. For example, if one has chosen color as the property, the value should identify a specific color like green or blue.
4. In order to link a CSS stylesheet to an HTML document one must use the link element. In the HTML document it will appear as follows: <link href="stylesheet file path" />
5. One should use external stylesheets over internal stylesheets because doing so allows the developer to apply one stylesheet to multiple pages. This makes editing the page more efficient and allows for faster load times of the page. Additionally, this keeps content separate from style formatting, allowing for both the CSS and HTML pages to be cleaner and more organized.
6. Hex color codes are one of four ways to specific a color in CSS. Hex codes are unique because they use a six-digit alpha-numeric code preceded by a hashtag. This code identifies the amount of red, green, and blue in a color, for example #228b22 is a forest green.
7. The HSL color property is new to CSS3. It's an acronym that stands for Hue, Saturation, and Lightness. Hue identifies the color based on angle, saturation identifies amount of gray in the color as a percentage, and lightness identifies the amount of white or black in a color, also as a percentage (0% lightness=black, 50%=normal, 100%=white). So forest green's HSL is 120, 61%, 34%.
8. The three main categories of font are serif, sans-serif, and monospace. The fonts differ in respect to their width and flair. Serif fonts are called such because they have serfis, or details added to the main letter strokes. Sans-serif fonts do not have these extra flairs, as they are literally, sans the serifs. Given this, sans-serif fonts are a good option if text is small, since they are simpler than serif fonts and lack the extra flair that could becomes cumbersome to read when small. Finally, monospace fonts are sometimes called fixed-width fonts since all letters in the font are the same width. This makes them good for writing code, since the spacing of letters remains static.
9. There are three ways to designate font size. Pixels designated by a number followed by px like 24px for example. Pixels will scale depending on a users screen resolution, which can make them more flexible than the other two types in some situations. Percentages are another way to designate font size and simply require a percentage like 100%. These will scale with webpage and allow a developer to have fonts shift in size relative to one another. Ems are the final way to change size. Ems change in size relative to the text size in the parent element and are designated using a decimal number followed by "em", 1.5em, for example.

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.