- Familiarized self with new Mac laptop, installed new programs and set-up basic user necessities (ie new browser, email, programs, etc.)
- Skimmed prework requirements and completed a few typing speed tests and did some Computer Science Warmups
- Started with three typing speed tests: average WPM was around 34-36; need to work on efficiency to get around <10-15% error; also completed a few logic games in Computer Science Warmups
- Started official prework; watched Mac intro video, installed Sublime Text and Xcode
- Made sure the correct GitHub account was being used, saved new bookmark
- Created new Gist file to track progress
- Started to read Chapter 1 and 2 of HTML & CSS: Design and Build Websites, but the GitHub website had a major outage; waited for it to start back up and completed a couple of typing speed tests; Best result was 39 WPM with 6% error
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- On a website, what is the purpose of HTML code? * HTML code on a website serves as the structure of a page. In essence, this is the language that shows how information should appear to the viewer. Much like newspapers are structured in a particular way for readability, HTML code organizes the content of a page however you see fit.
- What is the difference between an element and a tag? * For all intents and purposes, they can be used interchangably. However, an element encompasses a tag. For instance, an element could contain the tag body and the tag /body, but would also include any information between the opening and closing tag. The tag, however, is either the opening or closing tag, but not both simultaneously.
- Why do we use attributes in HTML elements? * Attributes are used to further define elements in HTML, for instance, defining a particular text size or color, within a given element. Attributes have two pieces to them: a name and a value, which are separated by an equals sign. The name defines what kind of adjustment you're applying to the elements, such as what language a particular paragraph should be in (ie lang). The value defines the information or setting of the paticular attribute, such as whether the language chosen is English or French (ie "en-us" versus "fr"). As an additional note, attributes must always be in the opening tag of an element.
- Describe the purpose of the head, title, and body HTML elements. * The head (head) HTML element defines information about the page rather than what is shown on the page. This will appear at the top of the browser (ie above the URL) or on a browsing tab. The title (title) HTML element is often seen as descriptors for certain websites, giving quick bits of information about what is shown inside the browsing window (ie Linksys Official Support-...). The title tag is placed inside the head tag in order to be placed in this particular area. The body (body) HTML tag is what is shown inside the main browser window, such as text, images, videos, etc. that you are presenting to the user.
- In your browser (Chrome), how do you view the source of a website? * When on a web page, go to the toolbar at the top of the page and hit View. In the drop-down menu, scroll to the bottom and hover over Developer>. This will show another drop-down menu where you can now click View Source. Alternatively, when on a webpage, you can use the hot-key command Option+Command+U to view the source as well.
- List five different HTML elements and what they are used for. For example, p and /p is a paragraph element, and it is used to represent a paragraph of text. * h1-h6: Used to represent headings in varrying sizes and boldness. H1 distinguishes 'Heading 1', h2 distinguishes 'Heading 2' (aka first sub-heading), so on and so forth. * b: Used to bold text, adding emphasis and context to what is being said in your writing. * i: Used to put text in italics, adding emphasis and context to what is being said in your writing. Also used to distinguish technical terms, titles of books, etc. * sup & sub: Used for supersctript and subscript respectively. Sup is used for dates and mathematics. Sub is used for chemical formulas and footnotes. * em: Used to provide emphasis for screen readers and to distinguish text within code writing. Often italicizes the text, but this tag should not be used to simply italicize. * abbr: Used to signify the meaning of an abbreviation within text (ie Big Friendly Giant abbreviated to BFG).
- What are empty elements? * Empty elements usually only have one tag. This would be considered an internal line break within a paragraph (br /) or a horizontal rule (hr /) that undercuts a paragraph, signifying a change in topic or a new scene in a book. Before the closing angled bracket of a tag, there is a space a forward slash to signify the empty cell.
- What is semantic markup? * Semantic markup is a group of tags that do not change the structure of a web page, but add additional information. This can be important for screen readers when trying to add emphasis to certain words (ie em and strong) or it can be used to cite text within a body of text (ie blockquote and q).
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements. * nav: This is used to signify the primary navigation of a web page. This new element in HTML 5 helps to distinguish this particular section for screen readers if a user is looking solely for the primary navigation of a web page. * article: This new element is used to signfy text on a web page that is specific to an article or particular body of text. Like the above, this can be used to help screen readers single out an particular article, bypassing other text, such as the header. * footer: This is an element used to distinguish text that is placed at the bottom of a web page. This can be particularly important for screen readers when trying to isolate footer text, which is where web pages often store their FAQs, contact information, and other 'help' topics.
Considering empathy in all situations of life should be immensely important, but I think it is particularly necessary when problem solving in professional and creative fields. For me, I think there are two sides of the coin when talking about empathy: internal and external empathy. Internal empathy helps you look inward and see how you can alter your actions and behavior to better understand others. This could be active listening, being more open to others' opinions and methods of reasoning, or simply trying to solve something from another angle by adopting another person's viewpoint. External empathy is more outward facing, making sure you understand what it is that #others# need. This could be giving other people the floor to get their point accross or designing a product with the user in mind (such as in "Why is Empathy Important for Design?"), solving a problem from a human angle, rather than a technical one.
To me, empathy is crucial to understanding any industry, but in particular the tech sector. While it can be argued that software development focuses around machines (ie the language, hardware, etc.), we create for the sole use and purpose of humans. This could be a program for a veterinary clinic, a local coffee shop, or, like in the aforementioned article, a digital reader for those with poor eyesight. While the execution of the goal may be 'machine-based,' the solution is completely 'human-centric.' Realizing this can sometimes be difficult as one has to humanize a tech-based problem, but in doing so, the ammount of satisfaction and purpose that is gained from the final solution is overwhelming. What can sometimes be even more difficult is remaining empathetic with your team.
Though I haven't immersed myself into the team-based coding world as of yet, I have had several opportunities to better my empathetic understanding of what it's like to work with others in various situations: as a bartender working with front of house and back of house employees; as an account coordinator at an advertising sales company working with clients and sales people; and as a partner of a small business with my best friend, the most difficult situation to be copmletely empathetic. As a small business owner, I partner with my best friend, Chris. We've known each other since we were five-years-old and have been through a lot together. As friends, we've had ups and downs, but have always managed to persevere, accepting one another in a loving way. As business partners, however, we would often have to sacrifice our pride for the sake of the business. Each of us has had moments of self-perceived genius, only to have it shot down, realizing that it wasn't best for the company. Having this pointed out by our partner and best friend was often frustrating, but would ultimately be the best decision for our end goal. While this would initially be a difficult pill to swallow, the end result was always worth it. After all, I'm in business with my best friend not because he's fun, but because I know he's smart, ingenuitive, and has good judgement. If I can't trust him to tell me when something is wrong, who can I trust?
Clearly, empathy is an important skill to refine, but is most apparent when working with a team in a professional and creative environment: software development is both of these. While we're learning to code in order to develope a professional skill set, it is unquestionably creative. If someone stumbles upon a method of solving a problem that saves hours of time, I should hear them out, even if it trumps a way I thought was brilliant. In the same vein, I should hope (and, really, expect) that when I want my point of view to be considered, others will listen.
- Started the day with three typing tests. Results were as follows:
- 31 WPM/6% UKO
- 39 WPM/8% UKO
- 40 WPM/9% UKO
- Completed the Concept Quizes of Computer Science Warmups yesterday and moved onto the Challenge Quizzes today. Completed Level 1 and got 5/5 questions correct, though, I admittedly guessed on the last one. However, this lead me to learn about Big O Notation and a bit more about algorithims.
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
* Ordered List (ol): Lists that have a specific order and will be numbered using the ol command when recognized by a browser. This could be a list that has steps that need to be followed in a particular order, such as a recipe or legal document.
* Unordered List (ul): Lists that have no specific order and are often listed with bullet points as opposed to numbers. This could be something like a shopping list or ingredients for a souffle.
* Definition List (dl): These lists are used to define a term or subject and are paired with the tags dt (definition term, aka the term being defined) and dd (the definition). Upon seeing this type of element, the browser will display the definition indented from the definition term.
- Note: Ordered and Unordered Lists use the tag li for their list items.
- What is the basic structure of an element used to link to another website? * The basic structure of an element used to link to another website would employ the a tag and be followed by href. That is then proceeded by =" and the absolute URL (Uniform Resource Locator) from another website.
- What attribute should you include in a link to open a new tab when the link is clicked? * In order to open a link into a new tab when the link is clicked you must include the attribute target. This is within your opening a tag, but comes after your URL. After the attribute target, you would write ="_ blank (no space in writing the actual code, but added here for clarity). It is also a best practice to inform the user that the link will be opening into a new tab by saying something along the lines of, "(opens in a new window)".
- How do you link to a specific part of the same page? * Linking to a specific part of the same page is done by using the href tag followed by the # symbol. This is then followed by an attribute that starts with a letter (not a number or symbol), such as top,bottom,Number 1, March, etc., which links to a corresponding section of the page with the same label. In order for the link to take the user to the appropriate section of the page, however, you must properly label that particular section of the page with the same attribute using the id attribute. For instance, if you have a list of journal entries at the top of a page (such as Day1, Day2, etc.) which the user can click in order to scroll down to a particular entry, say, Day 3, you would need to list that section of the page with the attribute id ="Day3".
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- What is the purpose of CSS? * CSS sets certain rules for how your webpage will be displayed. In essence, it's the aesthetics or styling of the webpage, telling the content from your HTML document to present itself in a particular way. This could be anything from background color, font color, font size, border width, etc.
- What does CSS stand for? What does cascading mean in this case?
* CSS stands for Cascading Style Sheet. Here, cascading means that the rules will apply to every type of element that you specify in your HTML document. For instance, if you want to change the font type for your entire page, you would specifiy the body element, but if you want to single out your h1 headers to be the color red, you could do that as well. One rule in CSS would apply to all of the h1 elements in your HTML document.
3. What is the basic structure of a CSS rule?
- The basic structure of a CSS rule is broken down into two parts, one of which breaks down into two further parts:
- Selector: This indicates which element the rule applies to, such as p, for all paragraph sections, or h2, for all h2 headers.
- Declaration: This dictates how the elements referred to in the selector (ie, h2, p, etc.) should be styled. This could be anything from font style, size, color, etc. (ie, font-family: Arial, color: yellow, etc.).
- Property: The property of your declaration singles out which aspect of the element you want to change, such as font or color.
- Value: The value of your declaration singles out the specific setting you want to use for the chosen property, such as Arial or green.
- The basic structure of a CSS rule is broken down into two parts, one of which breaks down into two further parts:
- How do you link a CSS stylesheet to your HTML document?
* In order to link a CSS stylesheet to your HTML document, you have to put a link element in the head section referring to it. This link element must include three other attibutes in order to work:
- href: This will specify the path that the HTML document should take to access the CSS stylesheet and is often called css or stylesheet.
- type: This specifies the type of document being linked to from the HTML document. In this case, the value should be text/css.
- rel: This describes the relationship that the linked to document has with the HTML document. In terms of a CSS stylesheet to an HTML document, the value here should be stylesheet.
- Why is it useful to use external stylesheets as opposed to using internal CSS? * Using an external stylesshet is useful for a number of reason. First an foremost, it is more efficient. Using an external stylesheet allows you to refernece it accross several HTML documents, instead of having to apply the styling code to each individual web page. Should you ever need to make an adjustment to your styling, you only have to update the one stylesheet, instead of having to update each individual HTML document. Using a stylesheet allows all of the individual HTML documents to automatically update when changes are made. Beyond this, it allows for less code in the HTML document, which is not only cleaner, but helps to prevent errors by keeping the structure and the styling of your web page separated.
- Describe what a color hex code is. * A color hex code is one of three ways to define a color in CSS. Hex codes are six digit representations of the RGB value of a particular color expressed in hexadecimal code. For instance, rgb(102,205,170) would be the hex code #66cdaa. This not only allows for the same wide variety of color as RGB Values, but uses less characters and is cleaner when looking at a CSS stylesheet.
- What are the three parts of an HSL color property?
* Hue: The standard idea of color, representing anything from traditional red, green, blue, etc. to more obtuse colors such as pumpkin, canary yellow, or booger. The colors are often represented as a circle where the angle represnts a particular color. However, it may also be shown as a slider with values from 0 to 360 (ie 360 degrees).
* Saturation: This is the level of gray that is or is not in a particular color. In other words, this represents the intensity of the color. Something with more gray will be a more faded or dull, where as something with less or no gray will be more vibrant and colorful. Saturation is represented along a percentage scale with 100% being fully satutated (ie no gray) and 0% having no saturation (ie a shade of gray).
* Lightness: On this scale the color varies in increasing amounts of white or black from the direct middle (where the color lightness is normal). Tipping toward the white side of the scale makes the color light, whereas tipping toward the black side makes it darker. This, too, is on a percentage scale where 0% lightness is black and 100% lightness is white. Lightness is sometimes referred to as luminosity.
- Note: This should be distingished from the concept of brightness which only adds black from the normal color, where as lightness offers both black and white.
- In the wolrd of typeface, what are the three main categories of fonts? What are the differences between them? * Serif: Font types that have a more decorative look with extra details on the end of the main strokes of the letters, known as serifs. * Sans-Serif* (aka 'without' serif): Font types that have straight ends to the letters and often result in a cleaner design look. No extra details (ie serifs) are added to the characters. * Monospace: Font types where all letters are the same width as each and every other character. This is common in code, as the characters line-up nicely.
- When specifying font-size, what are the main three units used? * Pixels: This is the most common unit of measurement in terms of font-size and is based off of the original ratio developed by European typographers in the sixteenth century. 16px is the standard size of normal text. * Percentages: This type of sizing uses the standard 16px as it's 100% range, with lower percentages making the font smaller (ie 12px = 75%) and higher percentages making the font larger (ie 32px = 200%). * Ems: This measurement is based on the width of a letter 'm'. Again, like the above, using the standard size of 16px as a starting point, 1 em is the middle ground, with lower values (ie 12px = 0.75 em) making the font smaller and higher values (ie 32px = 2em) making the font larger.
- Started the day with three typing tests. Results were as follows:
- 45 WPM/6% UKO
- 42 WPM/10% UKO
- 41 WPM/11% UKO
- Completed Level 2 of the Challenge Quizes. The questions are getting more difficult and I only got 3/5 correct this time, but it's definitely a mental work out, regardless.
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- If you're using an input element in a form, what attribute controls the behavoir of the input? * When using the input element in a form, the attribute type="..." controls the behavior of the input. This tells the element what type of information is being received. This could be anything from type="password", type="text", type="checkbox", or type="radio". The type="..." attribute tells the input element not only what information is to be collected, but how it should be presented as well (ie text entry, blocked out charactes, multiple choice, etc.).
- What element is used to create a dropdown list? * The select element is used to create a dropdown list. It must include a name attriute for the type of information you're collection (ie devices, genres, countries, etc.) and each choice should be within an opening and closing option tag, which will also have a value attribute that indicates the option the user selected when the data was collected.
- If you're using an input element to send form data to a server, what should the type attribute be set to? * When using an input element to send form data to a server, the type attribute should be set to submit. In order to use this effectively, you must ascrbie a name to the type of information you will be sending to the server (ie email, first name, etc.), as well as set a value for the button they will click to send the information (ie Subscribe, Send, Submit, etc.).
- What element is used to group similar form items together? * The fieldset element is used to group similar form items together. This is particularly helpful when collecting several pieces of information from a user, such as their contact information or mailing address. The legend tag can also be used to group all of the input fields under a particular title (ie Contact Info, Mailing Address, etc.).
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- Describe the differences between border, margin, and padding. * Border: Each box on a page has a border, which you can define with various colors, thickness, etc. The border is the boundary that sepates the edge of one box from another, which may not be visible if no styling is added to it. * Margin: Another boundary that you can define with a variety of styling. The margin sits outside the border and creates a gap between the borders of two adjacent boxes. * Padding: Padding is the area between the inside of the border and whatever content is contained within it. This, too, can be defined with various colors, thickness, etc. and can be added to increase text readability within a border.
- For a CSS rule padding: 1 px 2px 5 px 10px, what sides of the content box does each pixel value correspond to?
* The order of CSS rule padding goes in clockwise order: top, right, bottom, left. Therefore, the aforementioned pixel values would correspond to padding as follows:
- 1px: Top padding (padding-top)
- 2px: Right padding (padding-right)
- 5px: Bottom padding (padding-bottom)
- 10px: Left padding (padding-left)
- Descibre the difference between block-level and inline elements.
* Block-level: This is a type of ordering wherein elements line-up one on top of another. This is the way in which elements would usually be treated.
* Inline: This is a type of ordering in which styling can force block-level elements to line-up side-by-side. This is often used for site navigation
- Note: You can also use inline-block to cause block-level elements to flow like an inline element while still retaining other features of a block-level element. You can also use display: none; to hide an element from the page.
- What is the role of fixed positioning and why is z-index important in the scenario of using fixed positioning? * Fixed position is a form of absolute positioning that positions an element in relation to the browser window rather than the containing element, such as a div element. A fixed element will not affect the surrounding elements and will not move when the user scrolls up and down. The z-index property allows you to control which boxes appear on top when moving an element from normal flow. Without the z-index boxes can overlap, causing a messier and confusing layout.
- What is the difference between a fixed and a liquid layout? * Fixed Layout: A layout that does not change in size as a user increases or decreases their browser window. This means that a web page viewed on a laptop computer will have the same dimensions when viewed on a mobile device. Measurements tend to be give in pixels. * Liquid Layout: A layout that stretches and contrasts, adjusting to when the user increases or decreases the size of their browser window. This style of layout would conform to the device the user is viewing the website from, growing to fit a larger browser window (ie laptop) and shrinking to fit a smaller on (ie cellphone). Measurements tend to be given in percentages.
- Started the day with three typing tests. Results were as follows:
- 40 WPM/12% UKO
- 41 WPM/12% UKO
- 40 WPM/11% UKO
- Note: WPM is steady, but work on slowing down a little bit to get UKO <10%.
- Level 3 of the Challenge Quizes was... intense. It took me over 10+ minutes to solve one problem and I realized that I'm out of the 'warm-up' realm, haha. Tried some other warm-up games to get some mental flexibility instead of exhaust myself.
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- In an image element, why is the alt attribute important? * The alt attribute is important when placing an image in HTML because it provides a textual description of an image should a user be unable to see it. This could be due to an issues with the image or because someone is using a screen reader. If someone is unable to actually see the image, the text helps to describe what is supposed to be there. Additionally, alt text helps search engines further determine the type of content that is on your web page.
- What determines if an image element is inline or block? * The placement of your img element determines whether it is inline or block. If the img element is placed outside of a block element (ie, h1 or p), it will be treated as another block element, being placed in stacking order before or after other block elements. If the img element is place inside a block element (ie, inside a p element), it will be treated as an inline element and anything else inside that block element (such as text) will flow around the img element. An img defaults as an inline element, which dictates this behavior.
- What are the benefits of jpg or png image file formats? * The jpg file type should be used when images contain several colors and higher amounts of detail. Saving an image with a high amount of detail as a png will result in loss of image quality in areas where it may seem like there is only one color (ie, snow) when there is really a subtle variety in hue across the image. * The png file type should be used when images contain low detail and mostly flat color, such as a logo or vector image. The png file type also has the added benefit of allowing for transparency in images.
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- What is the benefit of specifying the height and width of images in CSS compare to specifying in the HTML? * The benefit of specifying the height and width of images in CSS comes from making it cleaner and more efficient. The first benefit lies in keeping your styling code (CSS) separated from your structuring code (HTML), which makes the code tidier and more organized. The second benefit adds efficiency, allowing you to set dimensions for particular images classes in CSS instead of having to apply dimensions for every single image in your HTML code. For instance, if you wanted to make several images on your web page 300x300 squares, you could create a class (ie, medium_square) in HTML and couple it with a CSS line of code affecting that particular class. This would make every image of that class resize to 300x300. 2. What is an image sprite and why is it useful? * An image sprite is a single image that is used for several different parts of an interface, such as a logo. This is useful because it allows web browsers to request one image instead of multiple, applying it to various parts of the web page. For instance, say you have a button with three image states: static, hover, and click. A sprite allows you to have one image for all states instead of three separate files, helping your web page to load faster.
- Started the day with three typing tests. Results were as follows:
- 41 WPM/4% UKO
- 38 WPM/9% UKO
- End of Objective-C Cheddar
- 28 WPM/7% UKO
- Ventured into a jQuery text; lots of weird characters, but WPM was still 25+ and UKO was <10%!
- *Decided to do Computer Science Fundamentals: Intro to Algorithims which was much easier and more informative. Completed the seciton on Arrays.
Eloquent JavaScript: Chapters 1 and 2 on Data Types, Variables, and Control Flow Prework Questions Day 5
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. * Numbers: Unsurprisingly, numerical values. Only about 18 quintillion (18 zeros) different numbers can be represented. Considering negative and nonwhole numbers, the maximum is closer to 9 quadrillion (15 zeros) as a bit must be used for the negative sign and the decimal point. Special numbers include Infinity, -Infinity, and NaN (Not a Number), the last of which arrives from nonsensical computations. * Strings: Used to represent text and are written by enclosing their contents in quotation marks. Both single and double quotes can be used to mark strings as long as the beginning and end quotes match. A backslash () in a line indicates that the character after it has special meaning; this is called escaping the character (ie \n is a new line, \t is a tab character). Operators (such as +) can be used in strings to glue multiple strings together (ie "cat" + "monster" = catmonster). * Booleans: Representative of 'true' and 'false' values in JavaScript. Can be used when determining 'yes' and 'no' or 'on' and 'off' or '>' and '<'. Other similar operartors are >= (greater than or equal to), <= (less than or equal to), == (equal to), and != (not equal to).
- What are the three logical operators that JavaScript supports? * && (and): Result is true only if both the values given to it are true. * || (or): Result is true if either of the values given to it is true. * ! (not): A unary operator that flips the value given to it (ie '!true' = 'false' and '!false' = 'true'). * ? (ternary/conditional): This operates on three values and is the only such operator in the langueage. The value on the left of the question mark picks which of the other two values will come out. When it is true, the middle (left-most after the question mark) value is chosen, and when it is false, the value on the right comes out.
- What is the naming convention used for variables? * Variables are named in JavaScript by using the key-word 'var', which indicates that the following sentence is going to define a variable. This is followed by the name of the variable and, if we want to immediatey give it a value, by an = operator and an expression (ie, var caught = 5 * 5;). In this example, caught is the name of the variable and the number produced from 5 * 5 is what caught now represents. Once a variable has been defined, its name can be used as an expression.
- What is the difference between an expression and a statement? * Expression: A fragment of code that produces a value. Every value that is written literally (ie, 22 or "psychoanalysis") is an expression. When between parentheses, it is still an expression (ie nesting). Considering it a sentence fragment in the human language. It's content to just produce a value, which can then be used by the enclosing expression. * Statement: This would correspond closer to a full sentence in the human language. The simplest kind of statement is an expression with a semicolon after it (ie 1;). This is a program (albeit useless). A statement stands on its own and amounts to something only if it affects the world (ie, displaying something on the screen or changing the internal state of the machine in a way that will affect the statements that come after it -> side effects).
- What are a few JavaScript reserved words and why are they important to avoid using for variable names? * Var is a reserved JavaScript word used to define a variable. Others include break, case, default, yield, false, true, among many others. These are considered keywords and are reserved for executing functions or behaviors in JavaScript. If a variable definition doesn't work as expected, it is likely that a keyword was mistakenly used.
- What is control flow and why is it useful for programming? * Control flow executes programs that contain one or more statements from top to bottom. Control flow can be straight with more simple statements, moving from point 'A' to point 'B', or it can be more complex containing conditions, while and do loops, or breaks. In essence, it's the order in which the program is to be exectued given any number or variables or conditions.
- Started the day with three typing tests. Results were as follows:
- 33 WPM/6% UKO
- 26 WPM/20% UKO (ouch)
- 39 WPM/4% UKO (better)
(Note: No greater/lesser than symbols used in answers for the sake of clarity.)
- If we have a function defined as function sayHello() {console.log("Hello!)}, what is the difference between entering sayHello and sayHello() in the console? * When defining the above function, typing sayHello refences the entire function and pulls it into the console. However, typing sayHello() executes the function itself, which has been instructed to display the string Hello!.
- What is the keyword return used for? * The return keyword determines the value the function returns. When control comes across such a statement, it immediately jumps out of the current function and gives the returned value to the code that called the function. The return keyword without an expression after it will cause the function to return undefined.
- What are function parameters? * (From the book): Function parameters behave like variables, but their initial values are given by the caller of the function, not the code in the function itself. Parameters are local to a function, which means that the result variable of a particular command will be newly created every time the function is called. The "localness" of variables applies only to the parameters and to variables declared with the var keyword inside the function body. Variables delcared outside of any function are called global, because they are visible throughout the program. It is possible to access such variables from inside a function, as long as you haven't declared a local variable with the same name. * (My own words): Parameters determine in what circumstances certain lines of code (ie functions, variables, keywords, etc.) will be executed. A particular variable may have one definition within a functon (ie x), but it may have another definition outside of it. The variable will, therefor, behave one way inside of the function (local) and behave another way outside of the function (global). Which variable definition is used at a particular time is determined by how the variable is called. The caller must be specific as to which variable definition of x they are wanting to execute. If the call is nonspecific, the global definition will be referenced because it is more accessible. This prevents accidental interference between functions.
- What is the naming convention used for function names? * Naming functions should be intuitive and only as complicated as needed to accurately describe what the function does. Though you may have a function that serves a particular purpose to a specific problem, the root of the function may be to perform a simple task. For instance, if you need a function that indents with three spaces on each new line of text, you wouldn't want to name the function functionIndentThreeSpaceWithNewLine. Though that name is incredibly descriptive for what you currently need, it over complicates the base use of the function. Something like functionIndent would be much simpler and still get the same point across.
- Started the day with three typing tests. Results were as follows:
- 38 WPM/9% UKO
- 36 WPM/7% UKO
- 39 WPM/10% UKO
- Psychology What do they expect when they click this?
- Support: [Bespoke Edge] (https://bespokeedge.com/): The website has a clean and minimal layout with clear call to action buttons. In particular the 'Make an appointment' link takes you to a straight forward form where you can leave your name and contact information. Base data is collected from the company and the ball is in their court to finalize the appointment, taking the responsibility out of the users hands.
- Violation: [Eddy's Beef Jerky] (https://eddysbeefjerky.com/): The website has a number of interesting products with various categories. When clicking on the 'Shop By Flavor' hero image, one expects to see the flavors highlighted, but is brought to a generic 'All Products' page instead. Instead of interesting flavors being highlighted, no distinction is made from the home page.
- Usability Are you being clear and direct, or is this a little too clever?
- Support: [Great Divide Brewing] (https://greatdivide.com/): With heavy pressure on breweries to individualize themselves, they do a good job of flexing this muscle without pulling it. There are still simple, straightforward images of beer and their products. 'About' section and products are clear and obvious in order to learn more about their identity as a brewery.
- Violation: [Ink Lounge] (http://inklounge.com/}: The layout is consistent with the idea of a creative space, but some of the hero images and tiles don't convey an immediate idea of what their primary purpose is. They have several interesting classes and qualities, but in trying to convey their brand in a different/interesting format/layout, the message gets convoluted and isn't immediately apparent.
- Design Do users think it looks good? Do they trust it immediately?
- Support: [Teakoe Tea] (https://www.teakoe.com/}: Strong brand presence and design elements immediately present on page. Users understand the product and the good intentions behind them above the fold, which creates a cohesive identity. Brand image is consistent and recognizable throughout all products.
- Violation: [Leo's Dry Goods] (https://www.leosdrygoods.com/): Initial image of company is warm and inviting with a minimal design presence. However, although products show care a craft, products images aren't of highest quality and show inconsistency in style, exposure, and focus. While the products are clearly made with care, this leads the shopper to ask questions as to what they can "trust" what they're buying.
- Copywriting Is the biggest text the most important text?
- Support: [The Real Dill] (https://therealdill.com/): Large hero image makes text concise and specific. Even though the middle text link is a call to action ('Treat Yo Self'), the largest text is still their branding from the large, full-page hero image. This makes the promotion of brand awareness the foremost priority.
- Violation: [Donna Diddit] (http://www.donnadiddit.com/): Largest text is the company name, but only marginally larger than some of the other decorative textual images, which, in turn, have more character than the sans-serif font used for the company name, which makes those images more eye catching. Meaningful category text (such as 'Shop', 'Services', 'Events') is much smaller than other images and makes the user search for where they should click if looking for something in particular.
- Analysis Are you using data to prove that you are right, or to learn the truth?
- Support:
- Violation: