SWE432
What is "progressive disclosure" (details on demand) and how does it help when designing complex interaction flows? (week 12)
Progressive disclosure: the mechanism of hiding details initially, and revealing them through an interaction only when the user requests them. This helps because it can avoid cluttering the user's interface when the user is performing typical tasks (and not deviating).
What does it mean to regularize a design, and why can this be beneficial? (week 13)
Regularizing a design means ensuring that different parts of a design that are representing the same or similar things look the same (or similar). If things are different, then they are intentionally drawn contrasting. In other words, you are always consistent within your design when you are showing the same thing (BUT NOT when showing things that are different). This enables the user to scan ahead, and maintain a system 1 behavior when appropriate, while ensuring that the user pays closer attention when there's some difference.
What is the cascade pattern? Define and provide an example of it in use
The cascade pattern involves calling many methods on the same object in sequence in a single statement, where each function returns the object used to call the next function. This lets us take an API with a lot of single purpose operations and put them together easily, letting us read the resulting code as a sentence. Example (Strings): str.replace("k","r").toUpperCase().substr(0,4);
What is the data ink ratio, and how can it be used in information visualization design? (week 13)
The data ink ratio is the proportion of non-redundant ink (in the visualization) that encodes data to clutter. In other words, it's the proportion of stuff on the page that's purely essential to everything that COULD be erased. It's useful in visual design to evaluate minimalism.
What are the advantages of a single page application?
The main advantage is the responsiveness. Users don't have to wait for a server to respond. Operations that can be completed on the client side don't contact the server, thus reducing the operation load on a server's resources.
What is an advantage of using distributed version control?
There is no central point of failure. In a distributed version control system, clients fully mirror the repository. Thus if any server dies, any of the client repositories can be copied back up to the server to restore it. Also: no latency when doing most operations (e.g. commit, diff). Easy to have multiple people maintaining multiple branches simultaneously.
Server side frameworks?
They help resolve the problem of messiness with server side scripting by structuring server into tiers to organize logic. Disadvantage: You need to refresh to get new data
What invented the internet?
Tim Berners-Lee
What are signs of spaghetti code?
Tons of not-very related functions in the same file No/bad comments Hard to understand Lots of nested functions Very long functions or files High coupling Low cohesion
What is the difference between unit and integration testing? When would you use one vs. the other? (week 6)
Unit testing: testing a program unit in isolation from the rest of the system. Integration testing: testing to demonstrate that different units of the system work together and produce the expected results Unit testing is used initially when the entire system may not exist yet. It is easier to find and fix bugs during this testing. Integration tests are done to make sure that units that worked in isolation will still work in combination with others.
Github? Basic branching, merging, conflict dealing?
Github is a Version Control System Version Control allows for Non linear development to take place. This is when many programming code a project at the same time and versions is managed. Distribution Model vs Centralized? In a centralized, there is only one version database and all comps communicate to that In distribution model, each comp has a version and those versions are merged into one in the server (GIT) There is no central point of failure and no latency when doing most operations ADD -> COMMIT-> PUSH
What are HTTP action verbs? How do they help intermediaries safely cache? (week 7)
HTTP action verbs can describe what will be done with resources. They are GET, PUT, DELETE and POST. They help intermediaries safely cache because they describe clearly what effect they might have on resources: for instance, retrievals (GETs) can easily be cached as long as the resource is not deleted (DELETE) or updated (POST).
Modules? How do they help with code reuse?
Help organize and maintain entire libraries in JS Must be defined in its own JS file export declarations (exposes functions as part of interface) Code imports modules
What is HTML
Hypertext Markup Language It is a MARKUP LANGUAGE to describe parts of a document Not programming language
What does HTTP stand for?
Hypertext Transfer Protocol Specifies/defines how information is transferred Using request such as GET, PUT, POST it send and transfers resources Always started on the client and server responds with a result It is STATELESS if all requests are independent of each other
What is Hypertext?
Hypertext is text that is not constrained to be linear. It is the text that is displayed on a computer or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.
What is an "interaction idiom" and how do idioms differ from interaction metaphors? (week 12)
Idiom: consistent mental model of how something works. It's not necessarily rooted in the real world (but could be) - the key is that we consider idioms in terms of mental models of UI interactions. Example: Files are an idiom that exists in most applications - if you see a file, you understand that you can do open/close/save/save as. Newsfeeds are idioms too. Metaphors: always grounded in the real world, providing an intuitive mapping between the system model and the real world.
What is a man-in-the-middle attack? How can we protect our web apps from them? (week 8)
In a man-in the middle attack, an adversary intercepts data traveling between a client and a server, perhaps pretending to be the server, or the client, and in doing so, can intercept (and modify) the data being transferred. To solve the problem, we need to establish some trust between the client and the server that the server really is who it says it is (e.g. through an SSL certificate), and also some encryption to prevent eavesdropping (e.g. through HTTPS). **Using HTTPS solves both problems.
Internet Governance? What is IETF?
Internet Engineering Task Force Create standards for the internet. World Wide Web Consortium Defines data formats and usage conventions
'this' in ES6
Is refers to an object which is the object in context of the existing code
What is usability, and how can software be made usable? (week 9)
It is a property of the relationship between humans with goal-driven tasks and an artifact (software). It is also the speed and success with which the goals can be accomplished (task performance). We should evaluate the usability of software before deploying to real users, for instance, by using heuristic evaluation
What's the value of having a "staging" environment in a development environment? (week 9)
It is an environment where software can be deployed. It is a complete production-like environment, but not the real production environment, so that the codes can be tested before being placed into production. A problem occurring in staging or testing is much better than in production.
What is "design for failure"? Why is it important when building microservices? (week 8)
It is design of every service of a big system assuming that at some points, everything it depends on might disappear -must fail "gracefully". Which means it is a designing in which failures have a minimal effect on service availability and functionality. It is important because a complicated system has lots of moving pieces that might fail. For example, service might have bugs, service might be slow to respond, and entire servers might go down.
What is JSON?
JSON (JavaScript Object Notation) is an open-standard format that uses human- readable text to transmit data objects consisting of attribute-value pairs.
Key difference between Java and JS?
Java is typed, meaning it cares about what type something. JS does not care, therefore, objects arnt typed either
What is JSON?
Javascript Object Notation Open standard format for transmitting data objects (no functions, only key values)
Microservices focus only on logic or presentation?
LOGIC Instead of horizontal scale web servers, vertically scale multiple small ones that are focused on specific tasks
Jquery?
Language for interacting with DOM
Classes in web apps? extends*
Mainly just syntx extends allows an object created by a class to be linked to a super class, it can, but does not have to add parent constructor
What's the difference between margin and padding?
Margin is the space between the border and next element. Padding is the space that's inside the element between the element and the border. OR: Margin is outer space of an element, while Padding is inner space of an element. Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.
How should microservices share data between themselves? (week 8)
Microservices must share data using well-defined APIs (e.g. over AJAX), or other messaging systems. Microservices must not share databases.
What are some limitations of static websites?
No interactivity. The content of a static website is fixed, and so does not change for different users. We cannot customize data based on a user's state or preferences.
What does OAuth do, and why is it good? (week 8)
OAuth is a protocol to allow users to safely authorize applications to have access to their data from other applications. OAuth provides a three-way "handshake conversation" whereby a "consumer app" (like our Todos app) can be granted access to some data from a "provider app" (like Facebook), after the user authorizes it. In this protocol, the consumer app does not ever find out the user's password (which is good).
DOM elements as objects? Explain
Objects correspond to every HTML element allowing DOM to interact with HTML in browser Object can be used directly (document, history, location)
Is usability "dummy proofing"? Why or why not? (week 9)
"Dummy proofing" describes a design which is usable even by some users of low intelligence who would not use it properly. Usability encompasses thinking about user task performance broadly, across a range of users, levels of expertise, and tasks. "Dummy proofing" is a narrow definition while usability is a broader idea of considering user tasks and examining how effectively interactions support these tasks.
What does it mean that HTTP is stateless, and how do cookies help? (week 7)
"Stateless" means that there is no mechanism in HTTP to associate multiple requests between a client and server. Cookies are name-value pairs that are stored in the browser, and are set be HTTP responses, and passed back to servers in subsequent HTTP requests. Cookies allow us to track some state between requests.
The jQuery hide() function can be used on an element or list of elements to hide them on the page. Write a jQuery snippet to hide all divs on a page with the class "item".
$(".item").hide(); - or - $("div .item").hide();
Your team is tasked with creating a new web service and designing the URIs through which clients will interact with the service. Your teammate proposes to create to create the following endpoints: /postResource/handler.cfm /retreiveResource/handler.cfm Describe at least one problem with this proposal. (week 7)
Problem 1: A good URI should not reference technology such as .cfm and .jsp, because technology might be changed. Problem 2: URI's should represent a resource. But "/postResource/handler" is not a resource. "Handler" probably shouldn't be there at all, and "resource" should instead refer to whatever the resource actually is. It's unclear what this URI is for. Problem 3: We don't put words like "post" and "retrieve" in the URI, because we instead use HTTP action verbs like "GET" and "POST."
Who decides on standards for the web? The US Government Anyone who wants to participate Tim Berners Lee Google
*******Anyone who wants to participate
What are two advantages of using heuristic evaluation? (week 9)
1. Discount usability engineering. Require fewer resources and time than formal usability testing. 2. Don't need to identify tasks, activities. 3. Can identify some fairly obvious fixes. 4. Can expose problems user testing doesn't expose. 5. Provides a language for justifying usability recommendations.
Describe at least two goals of visual design. (week 13)
1. Efficiently and accurately transmit information from the system to the user. 2. Reduce visual search time through layout and organization. 3. Create desired emotional reactions through aesthetic choices. 4. Present coherent and consistent design that reduces ambiguity and potential confusion.
The distance between the cursor and the submit button and cancel button are the same, but the submit button is twice as big as the cancel button. The time it takes for the user to click the cancel button is (pick one): 1. The same as clicking the submit button 2. Longer than clicking the submit button 3. Shorter than clicking the submit button (week 11)
2. Longer than clicking the submit button (he updated this answer on piazza)
How many participants should you recruit for a think-aloud usability study? (week 11)
4-5 is a good target. It's a tradeoff: more participants get you more data, but will be more expensive. Most serious problems are found with just the first few users.
What is Node.js
A RUNTIME NOT a web server Uses event driven, non blocking I/O model Has NPM packages NON-BLOCKING Meaning when a request is sent, other things can be done while waiting for a response
Briefly describe the HTTP request-response process:
A client clicks a link in a webpage or enters a URL into the address bar of a web browser, which sends a HTTP request to server. The server receives the request, accesses the component responsible for handling the request and responds with a HTTP response containing the requested information.
Which of the following is not true about closures?
A closure is the code of a function and its stack frame ***********Closures "close in" the value of each variable referenced when defined: the value of the variables referenced outside of the closure function are locked in when the closure is defined and never updated Closures are a popular way for creating APIs with BOTH public and private members A closure is code and pointers to variables
What is an example of a user's conceptual model, and why is it important to consider in designing user interactions? (week 10)
A conceptual model is a representation of a system, made of the composition of concepts which are used to help people know, understand or simulate a subject the model represents. Conceptual model are often abstraction of things from real world. User's conceptual model is what users expect to a system or the system's conceptual model. It is important in designing user interactions because the designer's conceptual model which meets (is the same of) the conceptual model of user can make users use the product effectively and easily.
What is a Cookie. How are they used? (week 7)
A cookie is a string associated with a name/domain/path stored at the browser as name-value pairs. It is used to store state information. Cookies are set through HTTP responses (set-cookie headers), and then are passed back to servers in HTTP requests (cookie: headers)
What is a "Deployment pipeline"? How does it relate to continuous deployment? (week 9)
A deployment pipeline is an automated process for getting software from version control into the hands of users, where it can be controlled by release engineers when something is ready to go out, oversees the actual deployment process. The deployment pipeline includes all of the steps needed to get software out to users, including testing, integration, and potentially some staged deployments. The key idea is that even if we are continuously deploying, there is some latency between when code is written and when it is deployed.
What is the purpose of piloting a study? (week 11)
A pilot study is a "dress rehearsal" to ensure that your software/prototype won't "blow up", test the tasks to make sure they are of the right length and difficulty. It tests the process of the study.
What is continuous integration? (week 9)
A practice where developers automatically build, test, and analyze a software change in response to every software change committed to the source repository.
What is a small multiples visualization, and why might it be advantageous to use one instead of an alternative visualization? (week 13)
A small multiples visualization support separate comparison of a data series, and might be more legible than putting all of the data variables in the same plot. For instance, rather than stacking 10 line graphs atop one another on the same axis, we might make each one smaller, and put them near each other.
What is an A/B test? (week 9)
A/B testing (sometimes called split testing) is comparing two versions of a web page to see which one performs better. For example, you might compare two web pages by showing the two variants (let's call them A and B) to similar visitors at the same time. The one that gives a better conversion rate wins.
DOM event handlers?
Allows you to get an element to then compute some tasks when an action occurs on that element A handler can get the element that got the event in case you do on click in list of images
Arrays vs. Objects
Arrays are objects
AJAX?
Asynchronous Javasrcript and XML Set to technologies for sending asyc requests from web page to server and receiving and response
Motivation for organizing code in Web apps?
Avoid code smells which is code that is hard to understand and maintain Components can reduce nested functions Creates Cohesion - property of a individual unit Coupling - property of a collection of units HIGH cohesion GOOD HIGH coupling BAD INCREASE cohesion by grouping functionality REDUCE coupling not making changes affect so much
1. What are the benefits of breaking a long task into smaller sub-components? What are the potential pitfalls of chopping up a long task into these smaller steps? (week 12)
Benefits: reduced memory load, help users plan to complete complex tasks, help users keep track of their progress in that task, can avoid transaction completion slips. Pitfalls: might "surprise" the user with an unexpected "next" step, might force user down an interaction path that doesn't match their model.
What are 3 web navigation conventions (referencing, for instance, a site like Amazon.com)? (week 12)
Breadcrumbs, site ID, "utilities," tabs/sections, local & global navigation, footer navigation.
What is CSS?
Cascading Style Sheets Language for styling documents Cascading meaning that the most specific rule takes precendence div a is more specific than div Last rule wins
Front end Frameworks?
Client is organized into components that are reusable. Components separate logic from presentation. Components generate content dynamically based on state EX: React, AngularJS Advantage: A lot of code is created for us Disadvantage: Logic must be present in client and server as project grows, and sometimes you may need to write it in multiple languages
What are two techniques for creating an API with public and private members in JavaScript? (No code examples needed).
Closures, Modules, Classes (Classes technically don't enable truly private members. But can achieve this through naming conventions for private member variables).
What is version control and its need?
Controlling multiple parts of a project that were done at the same time by many programmers
What is a data transformation? (week 13)
Data transformations map ranges into classes of variables, or aggregate them, for instance, placing data into buckets.
Describe two examples of distortions in information visualizations and how they could be avoided. (week 13)
Distortions distort the underlying data, making it hard for a user to understand the truth about the data. One example could be having multiple graphs side-by-side, with misaligned axes. Another could be having clutter within visualizations that distracts viewers from the true data. They can be avoided by not doing those things.
Consider the following HTML & CSS fragments (assume are correctly contained in HTML & CSS files) <div id="div1">Div1</div> <div id="div2" class="highlight">Div2</div> <div id="div3" class="highlight">Div3</div> div { color: blue; } #div3 { display:none; } div.highlight { color: red; } .highlight { color: green; } What color do Div1, Div2, and Div3 appear to the user?
Div 1: blue, Div2: red, Div3: not displayed
What is DOM?
Document object Model API for interacting with the HTML browser contains objects corresponding to every HTML element
What are at least two advantages of storing a Blob in a Blob store rather than in a file on a server? (week 8)
Don't have to worry about backups Don't have to worry about storage space Don't have to "get it right" yourself - someone else already did!
What is NPM for installing packages?
Easy to re-use libraries and npm
Why can it be desirable for a sketch or prototype to be low fidelity? (week 10)
Either a sketch or prototype is about system design before really building a system. We don't need to make them high fidelity with many details. Also, we want the deign part to be quicker; many details in system designing would be inefficient. By leaving details out, we avoid constraining our design space early.
You are writing an app that will power a blog. The blog allows users to post comments on articles - these comments are then shown to all users who view that article. Your friend who took SWE 432 mentioned that you should make sure to sanitize/escape/validate those comments before displaying them. What does it mean to "escape" them, and why should you do it? (week 8)
Escaping inputs means replacing characters that might be used to inject code (like <, >, ', ") with different characters that will look the same (e.g. > for >), but not have any effect on the code executing. This prevents cross-site-scripting and other code injection attacks, where users can inject code into your pages.
Closures? What are they and example?
Expressions that work with variables in a specific context Contain a function and its needed state Modules can be done with closures by (Thats how API's work!) Define a function whose variable are private Return an object where every member iin it is public Closures (INNER FUNCTIONS) have access to the OUTER FUNCTIONS variables even after it returns
What's the difference between relative positioning and absolute positioning?
Relative positioning: Element shifted from normal flow. Position of other elements is not affected. Absolute positioning: Element taken out of normal flow and does not affect position of other elements. Moves as user scrolls.
This code is supposed to show an alert when the user clicks on the coolDiv. However, as it's written, it doesn't do anything when the button is clicked. Find, correct, and explain why it doesn't. <html> <head><title>Event Listener</title></head> <body> <script language="javascript"> document.getElementById("coolDiv").addEventListener("click", function(){ alert("You clicked it!"); } ); </script> <div id="coolDiv">Click me!</div> </body> </html>
Simple fix: script tag should come after <div id="coolDiv"/> element for it to work because code in script tags will run in the order in which it is contained in the page. -OR- Using jQuery for document ready or onload is also fine. script tag language attribute value must be "JavaScript". Or omitted entirely (defaults to JS). Or, since language is deprecated attributed, use type instead. Since we did not talk about any of this explicitly, anything that references language is fine.
What's the difference between a sketch and a prototype? (week 10)
Sketching offers different alternative designs freehand. Then pick up the right design to build other mockups like storyboard and wireframe. Prototype is an early version of system. It is the stage just before beginning building a design. People can evaluate the prototype to make sure the design is right. **Sketching is to get "the right design", while prototyping is to get "the design right."
What's the difference between a sketch and a storyboard? (week 10)
Sketching offers different alternative designs freehand. Then pick up the right design to build other mockups like storyboard and wireframe. Storyboard is a sequence of visual "frames" illustrating interplay between user and envisioned system. It is like a use-case. It explains how system fit into a large context through a single scenario/story.
What is skeuomorphism? What is one drawback of skeuomorphism? (week 13)
Skeuomorphism is a design technique where we make items look like their real-world counterparts. It's like metaphors in that both involve relating things to the real-world, but with skeuomorphism, we directly pull ornamental details from the real-world. For instance, the earlier versions of Apple's iOS notes and calendar apps that had leather grain. The main drawback is that it can be distracting and waste visual bandwidth.
What are static pages vs dynamic pages?
Static URL corresponds to directory location on server, server returns requested files Simple, easily changeable, searchable, BUT no interactivity Dynamic Content is written through server side scripts and data is obtained from a database advantage is scalability and interactivity
What is an advantage of using jQuery for DOM manipulation?
Syntax is much easier / concise - OR- Provides abstractions & wrapper functions for DOM manipulation & AJAX
How are System 1 and System 2 different? (week 10)
System 1 includes things that are automatic (unconscious), effortless, fast thinking, associate, heuristic, and generally can't be turned off. System 1 processes normal, everyday activities at a low cost. Driving at night on a familiar road. System 2 activities are voluntary (conscious), effortful, require slow thinking and planning and are logical. System 2 processes more unexpected, atypical activities at a higher cost.
Cascading pattern?
"Chaining" allows us to have set of operations that mutate and object and return this so that we can call operations in one line and their effect will take place str.replace(..).uppercase(...)....etc
What are two advantages of using a microservice architecture? (week 8)
1.Not spaghetti; 2.Components can be developed totally independent; 3.Components can be replaced easily; 4.Can scale individual components at different rates.
What is Node.JS?
A runtime
What is a Blob? How can they be stored? (week 7)
BLOBs (Binary Large Objects) - arrays of binary data stored as a single entity. This is a generic term for an entity that is just an array of bytes. Blobs are typically images, audio, or other generic files. Blobs can be stored on a local server, for instance, using req.files in NodeJS, or can be stored in a blob store like one from Google or Amazon.
FOR students IN vs. FOR students OF
IN iterates over KEYS OF iterates over VALUE
How do objects in Javascript differ from objects in Java?
JS objects don't have pre-defined fields or methods - their structure can be changed at any time (unlike Java classes which have set structure). We can dynamically access fields of JS objects using the array syntax, whereas to achieve something similar in Java we need to use reflection. JS Objects are generally not typed.
What is HTML?
Language for describing structure of document
SPA technologies?
Single Page Applications Client side logic send messages to serve and receives response, and logic in html is changed based on response. Advantage: This increases speed of server client interaction Disavantage: poor client side modularity, can be hard to uunderstand and get messy Ex: AJAX, JQUERY, JSON, DOM manipulation
Write code to output the full name of the registrant with the lowest id var people = { registrants: [ { id: 13, fullName: 'Jon Snow' }, { id: 23, fullName: 'Abraham Lincoln' } ] };
var lowID = people.registrants[0].id ; var index = 0; for (var i=0; i<people.registrants.length; i++) { if (people.registrants[i].id < lowID) { lowID = people.registrants[i].id; index = i; } } ; console.log(people.registrants[index].fullName); -OR- console.log(people.registrants[1].fullName) was acceptable too!
How do you execute a request against the server? What happens when I type www.facebook.com?
Using URI's (Universal Resource Identifier (links) 1) Use a scheme <http> -> http (Hypertext Transfer Protocol) protocol that defines how info is transfered 2) Connect to host or IP address <cs.gmu.edu> 3) Request data <homepage.html> 4 down vote High level overview of a HTTP request from the browser: ---You enter "facebook.com" into the address bar. ---Browser resolves this to the numeric IP address (this can be cached by the OS or require a trip out to a DNS server). ---Browser issues a "HTTP/GET" request. It passes along an HttpRequest which includes metadata about the browser, user preferences (like preferred language) and any stored cookies for that domain. ---Facebook servers receive the request and their code begins to craft a response. ---Facebook will use the passed information including cookies to determine who the user is and what information to send back --A HTTP Response is returned from Facebook including a status line (200 OK, etc). Headers which include content-type, etc and the HTML body. ---The browser receives the Response and begins to parse it for display. ---The HTML body will include links to CSS, JS and images. All of these will trigger additional calls back to servers to retrieve those bits ---The browser layout engine will start to assemble the final page for display. ----CSS information may alter the layout and look of the page ---JS and DHTML may alter the layout of the page The final page is assembled and rendered to the end user.
Describe ES6 Objects as key value pairs
Variables are loosely typed (it figures out the type)
What's the difference between a violation, mistake, and slip? (week 10)
Violation is an intended action that user intended the erroneous output. Mistake is an unintended action that user formulated the wrong goal or plan (executing action will not achieve goal). There are two kind of mistake, one is rule based, and the other is knowledge based. Slip is also an unintended action that attentional failure occurs when user intended to do correct action, but did not actually execute action.
Life cycle of page loading and page load events
Wait for an event (click, hover, focus) Do some computation Update the DOM
First class functions: What is meant by functions as parameters (functional programming)
We can pass functions as parameters, thus allowing us to make code DRY function addMagic(id, event){ Do something to get X event(x)} addMagic(23, summation)
A server responds to a GET request by modifying a resource. Is this a problem? Why or why not? (week 7)
Yes this is a problem. GET requests should simply retrieve current state of of a resource. It must NOT make any modifications to any resource.
Is editing text in Microsoft Word an example of a direct manipulation interaction? Why or why not? (week 11)
Yes, users can manipulate content using small, reversible operations that offer immediate feedback. **Also ok to offer other scenarios where this is not the case and explain why.
Can using modes contribute to user error? Why or why not? (week 11)
Yes. Modes can create an inconsistent mapping. For instance, if sometimes control-s saved, and sometimes it sent an email, that could be confusing. The main problem with this is the system 1 vs system 2 thing: if the interaction becomes highly automatic, and then changes, and the user doesn't notice, it can be bad.
A participant just met you to begin a think-aloud user study. As the experimenter, what should you communicate to the participant before the user starts the study task? (week 11)
You should communicate that the study is to evaluate the interface and NOT the user. You should obtain affirmative consent. You should make the purpose of your study clear.
