MIS 3502 Exam 1

erase everything from inner html of tag

$("#message").html("");

ajax example part 4- POST

$.ajax({ url: endpoint_url, data: the_serialized_data, method: "POST", success: (result) => { console.log(result); }, error: (data) => { console.log(data); } });

Text types

Store values intended to be used as text strings Fixed or variable numbers of characters

Write the jQuery command that will make the following tag invisible. You use use the id of the tag. <img id="star" src="/images/star.png" style="width:100px;">

$("#star").hide();

append images example

$(#fish).append('<img src ="redfish.png" style= "width: 150px">');

How to use jQuery methods

$('#message').html("Perseverance Conquers"); ('#message')-call the selector, somewhere on the page, there's a tag with an id of "message" -"find it html("Perseverance Conquers"); -"do it" -put words into html of tag

How to use jQuery events

$('#theButton').click(( ) => { //code goes here }); click(( ) - click event -set up instruction for browser to follow when something happens

"use script"

top of script tag, means when I create a variable, of any sort, inside my script, I must use some sort of declarative -in this case "let"; can't just say "max=10;", or part of function declaration -specifying the "use strict" directive is widely regarded to be best practice

What does this mean? Why is the result not 100 SELECT MAX(CAST(quiz_points AS CHAR ) FROM people; Results: quiz_points 99

99 is the largest as they are both 9's 99 is larger than 100, 1,000, and 1,000,000 100 vs 99 9>1 9>0

HTML tags with common attributes

<div id = "message"> Success! </div> <img src. ="/home,png"> <input id= "theButton type="button" value="Click me!"> <a href="https://www.temple.edu"> Click me </a> attributes are: id, src, id, type, value, href -the texts after are NOT attributes

Some HTML tags

<h1> Hello World </h1> <p> </p> <br> <div> </div> <img> <input> <a> </a>

2. HTML image tag don't have meaningful alt text

<img src="images/puppy.png" alt ="cute puppy"> -Good <img src="images/heart.png" alt =""> -good if heart.png is purely decorative. Screen reader will ignore this <img src="images/puppy.png"> -bad, no alt and not accesible

DELETE

DELETE requests are idempotent. DELETE requests transmit in the body of an HTTP request. DELETE requests are used for the removal/destruction/deletion of an existing instance of an object. Deleting again does not make it more deleted

content wrapper

wraps around content

SQL statement

written into SQL to get an answer from the database -is white space independent -made up of clauses SELECT first name, last name -- clause FROM quiz _ results -- clause WHERE state code = 'CA'. -- clause ORDER BY last name ASC; -- clause - 'CA' is the expression - field and table names specify where to look and what to look for - first_name, last_name, quiz_results, state_code -predicates- conditions, and expressions represent values -semicolon at end of statement -a SQL query is any statement that returns records

html form example

wrong: <form> <label for "primaryemail> Your primary email address:</label> <input type="text" </form> -need to have the id correct: <form> <label for "primaryemail> Your primary email address:</label> <input type="text" id="primaryemail"> </form>

What does this mean? SELECT SUM(quiz_points) FROM people;

The total of the quiz points added together

SELECT COUNT(state_code ) FROM people WHERE state code='CA';

This will count the number of state codes that have value of CA

User Interface

color, design, and layout -imagery that evokes and communicates feeling

Bryan is 13 years old, Lisa is 15, and Mike is 21. Their ages would most likely be stored in a: column row schema table

column - This data is of the same type and will go in a column, most likely called Age.

tables

fields and records make up a table

How many clauses are defined in this statement? SELECT Height,Weight FROM Shapes WHERE Material = wood ORDER BY Height;

four -Clauses are defined by the keywords in the statement, which are SELECT, FROM, WHERE, and ORDER BY

Definition of accessible

"easily used or accessed by people with disabilities: adapted for use by people with disabilities"

What does this mean? SELECT team, COUNT( quiz_points ), SUM (quiz_points ), AVG(quiz_points ) FROM people GROUP BY team;

Count the number of results for each team, add together all the quiz points for each team, give the avg quiz score of each team

CSS prioritization example 2- Default browser < Internal Style Sheet <style>

In line css on top of html page: .example{ background-color: black; } Default browser: <div id="square" class="greenthing example" >4</div> </div>

Tools for Using SQL

MySQL DB Browser for SQLite-tool works consistently across all major platforms

Database vs Spreadsheets

both store data in fields and records -database tables can have specific relationships to each other and allows us to manage and ask questions about data

ajax example part 6- Sending on webpage task=write%20some%20code&task_owner=Oswald $("#btnOne").click( ()=>{ putTheDataIn(); //getTheDataOut(); //twoStepOperation(); } );

Two tasks are sent with GET: Task= write some code Task owner = Oswald- this is the serialized data sent to the API. The API thought about it and returned a confirmation number

!important

halts a cascade with this directive -takes precedent

What does this mean? SELECT first name, LENGTH(first_ name) FROM people;

Length of each first name by characters Example: first_name LENGTH(first_name) Janice 6 Wanda 5 Rose 4 Christine 9

Subselect

Let's us know about what specific value in the data without having prior knowledge

What will be the result? let myFunTwo = () => { if ( 1 == 1){ var x = "Dragon Fruit"; } $("#message").html(x); }

Dragon Fruit -Will show dragon fruit because var has function level scope and escapes the bounds of the code block

Questions on accessibility

What is it? Why it's important? How we can make accessible solutions (from the beginning)?

Javascript

"use script"; - declarative/directive on top of JS code, script tag starts with this -declare variable with let -declare functions -write a "for" loop -write an "if" statement

Boolean type

-store true and false value

SQL Order

1. SELECT 2. FROM 3. WHERE 4. GROUP BY 5. ORDER BY 6. LIMIT

Calling an API with ajax

$.ajax({ url: endpoint_url, data: the_serialized_data, method: "POST", success: (result) => { console.log(result); }, error:(data) => { console.log(data); } }); -the first variable represent where the web service can be found -the second variable holds serialized data -success and error are callback functions -use this syntax instead of $.get(), $getJSON, or $.post()

ajax example part 5- GET

$.ajax({ url: endpoint_url2, data: the_serialized_data, method: "GET", success: (result) => { console.log(result); $("#ulOutput").html(""); //empty the ul tag for (let i = 0; i < result.length; i++){ $("#ulOutput").append("<li>" + result[i]["task"] + "</li>"); } }, error: (data) => { console.log(data); } }); -The get version is basically the same as the post version, except there's a loop It will loop through the results and append 0 or more list items to an existing list item tag

SQL as a Data Definition Language (DDL)

- changes structure of data themselves -edit the structure(schema) of the database -add, change, or remove fields or tables

1. Client- Server Architecture

- Restful systems separate the systems responsible for storing and processing the data(the server) from the systems responsible for collecting, requesting, consuming, and presenting the data to a user(the client) - this separation should be so distinct that the client and server system can be improved and updated independently of each other -An upgrade to the client should not necessitate an upgrade to the server... and vice versa (Google updating software does not mean I have to get a new phone) -Think of this as a separation of duties

Add new data use INSERT

- adds a record to a table INSERT INTO tablename (field1, field2) VALUES (value1, value2);

What does this mean? SELECT quiz_points FROM people ORDER BY AS CHAR (quiz_points AS CHAR ); Results: quiz_points 100 100 100 63 65

- this would be ascending order because the command treats the numbers as characters 100 vs 63 1 comes before 6 0 before 3 etc

Delete Example #1 -We want to delete everyone who don't have a quiz point entry SELECT * FROM people WHERE quiz_points = NULL DELETE FROM people WHERE quiz_points= NULL

- we check to see everyone who did not have a quiz point entry -Once we are sure, we can delete them from the database

UPDATE example 2 -we want to change the company of the people who work for Fisher LLC to Megacorp Inc SELECT * FROM people WHERE company= 'Fisher LLC'; UPDATE people SET company ='Megacorp Inc' WHERE company = 'Fisher LLC';

- we want to see all the people who work for Fisher LLC -then we update to change Fisher LLC to Megacorp Inc

Select multiple fields SELECT first_name, last_name FROM people;

-Can get multiple fields, order can be changed based on what you put first

How to link html with JavaScript

-Putting images in a separate folder caused the images to disappear on the browser -Relative reference; images folder to grab picture Do that for every image -relative reference the app.js (will not work except the start over button) -doesn't work because when the page was loaded into the browser, the event handlers(click button) that were set up, that page load happened so fast the event handler were not present yet in the index.html. Click event can't be registered with the button yet. The tag with the button doesn't exist yet. We need an event that will trigger when the page is ready, when the document is ready. -jQuery has an event called the document ready event -add the event handler into the document ready event -cut from opening script to closing script tag and paste in its own file called "app.js" -will make the html file a lot cleaner

attributes facts

-any tag can have id attribute -some tags have no attributes -some tags have special attributes -ex. input have type and value attributes

2. Statelessness

-as far as the server is concerned, all clients requests are treated equally. There's no special, server-side side memory of past client activity. The responsibility of managing state(for example, logged in or not; if logged in, you will see certain things visually, retrieve data that belongs to you. If not logged in, there are things you can't do) is on the client. This is what makes the RESTful approach so scalable (Server should not favor one request over another, regardless of history. Put burden of managing state on client) -if server is keeping track of history from certain origin, then it is entering into role of managing state. NOT RESTful. For a server managed state, every time you get a new user/new requests, system resources will keep going up. Memory have to increase for each client request. Resources keep piling on in memory -In REST each and every resource request is to convey the application state. That means that the state gets transferred with each request -Persistent communication -Intermittent communication

Idempotent

-can be issued over and over again without changing the underlying state of the server

classes vs id

-classes are generic -id needs to be unique

3. Cacheability

-clients and servers should be able to cache resource data that changes infrequently. Modern browser have caching built in already. Cache can be programmed to change infrequently -for example: there are 50 states in the US. That's not likely to change soon. So, it's inefficient to build a system each time you need that data. Clients should be able to cache that infrequently updated date and web servers should be able to control the duration of that cache.

Database

-collection of information -made up of one or more tables -tables -fields -records

Kinds of Disabilities

-color blindness -blindness -auditory disabilities(deafness- audio cue can't be the only cue; can use haptic cue) -low vision -mobility disabilities -limited with keyboard and mouse -cognitive disabilities -language ability -path to desirable result -socio-economic limitation

4. Color contrast insufficient

-color contrast is represented as a ratio of lumens. The first number is the brightest color, and the second number is the darkest color -brightest: darkest -text with bad contrast are <4.5:1 -threshold for large text more lenient, but remember 4.5:1 -WCAG requires page elements have both foreground and background colors defined (or inherited) that provide sufficient contrast -WAVE extension will report critical contrast problems Bad contrast: roughly 2:1 Good enough contrast: Ratio of 6:1 considered to be accessible Great contrast: Ratio of 21:1. Best contrast, can't have more than this

Relative reference for CSS

-cut style tag from html and paste it in the CSS folder after creating the .css file -we can remove the style tag -will cause the border to disappear -we need need to link the css We use relative reference- Link tag is a self-closing tag <link rel="stylesheet" href"css/app.css">

records

-each set of information into rows are like cards, they all have the same fields, but each cards pertains to one person, each one is an individual record

SQL as a Data Manipulation Language (DML)

-edit data in a database -create, read, update, or delete (CRUD)

tags with inner html

-for html methods -inner html- between opening and closing tag -all tag that have opening and closing tag have inner html <h1> Hello World </h1> <p> </p> <div> </div> <a> </a>

declare functions

-function declaration -function expression -function expression with arrow notation -the syntax for function declaration differs from the syntax of function expression -function expression and specifically arrow notation is used more commonly than the older function declaration

A11y benefits everyone

-if we include and design for the edge cases, we will have an accessible universal design for everyone -we can also: -improve usability for all -broaden market penetration -improve SEO -avoid discrimination allegations and legal battles -build positive public relations

Hierarchies and relative references

-in the file structure of our web software solutions -we are used to seeing them jammed together -it's called relative references because they are not a fully qualified DNS name, not https or http -instead we reference the folder -HTML(.html), CSS(.css), JavaScript (.js) (focused) -separating out the three with HTML being the parent

500 Status Code

-indicates a server error. That means the request made by the client appears to be fine, but the server is experiencing some difficult. -Server is saying to the client "It's not you, it's me"

User Interface and User Experience

-interplay between the two -accessibility is a universal concern -value determine solution is good or not

Data Type

-kind of data stored in a field -data types indicate what a field is optimized to store and what operations are possible on it -can be text, numeric, binary -certain operations are not possible with certain types (add up names in a table)

Web accessibility

-make websites usable by as many people as possible -benefit people with disabilities, mobile device users, those with slow network connections (Mozilla) -inclusive practice- no barriers that prevent interaction, access to websites on world wide web by people with physical and situational disabilities and socioeconomic restrictions on bandwidth and speed

Math in SQL

-most basic: use a SELECT statement, such as SELECT 4+2; -supports arithmetic operators: +.-, *, / and % -assumes integer operations unless otherwise specified -support comparison operators: >, <, >=, <=, !=, or <> -calculation functions: SUM(), AVG (), and so on

Null

-represents a field having no value in it whatsoever -not the same as false, no, or zero -can appear in any field designated for any data type

1. HTML page title page missing/not meaningful

-spot and fix missing title tag -title content should be concise, meaningful, and unique -list most specific information first (specific to general, for visually impaired) -ex. Degree Requirement | MIS Department | Fox School of Business -the more pages in your application, the more important the title tag is

Date and time types

-store a value that should be treated as date/time data (like 2021-04-05 or 2021-04-05 17:35:00)

Binary types

-store short binary sequences (like 10010) - often used for bitmasks or sequences that represents a coded series of information) -store long binary sequences (files)

Number types

-store values as integers of various lengths, floating-point numbers and so on -integer type not concerned with decimal points

SELECT clause

-tells database we want some information returned to us -Can return text that are not part of the database

self closing tags

-there are no openers or closers -not all tag have inner html or value, but the most common tag that has value is the input tag(other tag that has value are select, radio, checkboxes, all parts of form) <br> <img> <input>

Overcoming common SQL mistakes

-typos and syntax errors: read the error and break down the statement -text values should be in a single quotation marks (') -field names with spaces need to be in backticks ('), but avoid spaces in field names if possible -keep a development development journal in plain text -copy and paste in plain text rather than formatted text -smart quotes("), rather than straight quotes('), will cause problems -share SQL statements as plain-text .sql files or attachments rather than in chat or email -to find null values, use IS NULL or IS NOT NULL instead of equality operators like = -test your matching conditions before using them for a destructive action like UPDATE or DELETE -most database software will run all the SQL statements in a window at once; select the ones you want to run

3. HTML label tag not used with HTML form element

-use label tag with HTML form in the html source code: <label for "primaryemail> Your primary email address:</label> <input type="text" id="primaryemail"> -label for input text link between the two are "primaryemail" -has to reference id

What about mobile accessibility?

-web app on websites accessible on mobile must be viewable from both a portrait and landscape orientation, with some exception(piano- can only be usable on landscape) -Mozilla developer has checklist for mobile application for accessibility

jQuery method - .serialize()

.serialize() is used to collect data from a form and convert it into a format that can be sent to a server for processing. When you call .serialize() on a form, it creates a string that contains all the values of the form fields in a specific format. This string can then be sent to a server using ajax, and the server can use it to process the information that was entered in the form. .serialize() serializes the data on the form. Find the stuff from the form and send it to the API

Dual role of SQL

1. Data Manipulation Language (DML) 2. Data Definition Language (DDL)

Two common mistakes with methods and API

1. Abusing the GET method 2. API are not self-documenting(this is a bad mistake) - must update documentation of API

The 6 REST constraints

1. Client- Server Architecture 2. Statelessness 3. Cacheability 4. Layered System 5. Code on Demand (optional constraint) 6. Uniform Interface

Any MIS student should be able to identify these accessibility errors

1. HTML page title page missing/not meaningful 2. HTML image tag don't have meaningful alt text 3. HTML label tag not used with HTML form element 4. Color contrast insufficient 5. any critical errors identified by WAVE extension 6. any HTML errors identified by Firefox View Page Source -title goes inside head of html -start with <h1>, close with </h1>

What does REST mean to you?

1. HTTP request must send all the data necessary for the server to respond to the request. The server will never remember prior requests. So, we will send a userid to the server often to represent the state of "logged in" to the server 2. We will use the HTTP methods for their intended purposes (GET, POST, PUT, PATCH, DELETE) We will use the HTTP status codes for their intended purposes. 3. Specifically, you will need to know some status codes: 200(success), 400(Bad Request), and 500 (Internal Server Error) 4. Any web service we create should provide simple(but accurate/complete) documentation at the root of the endpoint (Changing your mind means you need to change documentation)

How can we make A11y solutions?

1. Understand your role 2. Use good resources 3. Use good templates 4. Test

jQuery events

1. click https:www.w3school.com/jquery/

jQuery Methods

1. show 2. hide 3. html 4. val 5. append 6. addClass 7. removeClass https:www.w3school.com/jquery/

spans much add up to

12 -when spans doesn't add up to 12, it will look messy with one block going under the row when it shouldn't be

HTTP Status Codes

200 400 500 -More thorough documentation of the HTTP status codes can be found here: https://www.restapitutorial.com/httpstatuscodes.html -all valuable clues to the source of the problem

4. Layered System

A client can't tell whether it's connected directly to an end server, or to an intermediary along the way. Intermediary servers can also improve system scalability

What does this mean? SELECT * FROM people WHERE state_code LIKE '%N' ;

All states that ends with N will show

What does this mean? SELECT * FROM people WHERE state_code LIKE 'C%' ;

All states that starts with the letter C will show

What will be the result? "use strict"; //globals const x = "Apple"; var y = "Grape"; let myFunTwo = () => { if ( 1 == 1){ let x = "Dragon Fruit"; } $("#message").html(x); }

Apple -If changed to let, it will not be undefined because you have a constant at the top called x= "Apple";, meaning Apple will be available throughout the whole page -let has block level scope meaning x has to be the next best thing and apple at the top will be that

What will be the result? let myFunThree = (z) => { if ( 1 == 1){ let x = "Elderberry"; } $("#message").html(x); }

Apple -Will get apple again because of the let

What's an API

Application Programming Interface. Allows specifically exposed methods of an application to be accessed and manipulated outside the program itself -obscuring behind the scene technical detail (remote and infrared signals) -API can not be over the web

JOIN

Ask for records across two tables that are associated with each other based on a common piece of information

This statement will return a row for every row in the Customer table, and also associated information from the CustomerDetail table if there is any. A. SELECT * FROM CustomerDetail RIGHT JOIN CustomerDetail ON Customer. Id = CustomerDetail. Customerld; B. SELECT * FROM Customer LEFT JOIN CustomerDetai1 ON Customer. Id = CustomerDetail. Customerld; C. SELECT * FROM Customer WHERE CustomerDetail.CustomerId Customer; = Customer.ld; D. SELECT * FROM Customer;

B. SELECT * FROM Customer LEFT JOIN CustomerDetai1 ON Customer. Id = CustomerDetail. Customerld; The result will show every row in the Customer table, and information from rows that have a matching ID field in the CustomerDetails table will be included, too. -Left join will show everything on customer

What will be the result? let myFunOne = () => { var x = "Banana"; if ( 1 == 1){ let x = "Cherry"; } $("#message").html(x); }

Banana

What will be the result? let myFunOne = () => { let x = "Banana"; if ( 1 == 1){ let x = "Cherry"; } $("#message").html(x); }

Banana -If both variables are declared with let, it will be banana because let has block level scope and will not escape the bounds of the code block

CSS- styling prioritization

Browser default-> External Style Sheet <link> -> Internal Style Sheet <style> -> Inline Style Tag attribute -there's a cascade of priority. The highest priority being most closest to the tag, the most specific and closest to the tag style directive is the one that gets applied. -diagram shows what happens when you have two different css styles/rules that are contradictory -div tag can't have the background color of red and green at the same time; can't be 30px and 25px at the same time -the closest it is to the tag, the more likely it is to win browser default- browser apply some styling to button without any manual styling -browser knows which one to use based off the highest priority as shown by the diagram

CRUD

C- create with insert statement R- reading with select statement U -update in CRUD D- Deleting date from a table

Which SQL clause will you add to this query in order to associate the "Phone" field with the "Numberl" field in the "Contacts" table? SELECT * FROM Customers A. JOIN Contacts ON Phone=Number1 B. JOIN ON Customers. Phone=Contacts.Number1 C. JOIN Contacts ON Customers. Phone=Contacts.Number1 D. CONNECT Customers. Phone=Contacts.Number1

C. JOIN Contacts ON Customers. Phone=Contacts.Number1 The JOIN clause specifies the fields and their tables on which the association will be made.

CSS

Cascading Style Sheets CSS can be specified in an external style sheet -can also be inside a style tag -can lastly be in line style tag attribute

CSS id vs tag

CSS rules that reference a tag by its id take priority over rules than reference a tag by its class because an id is more specific than a class -both and class can be used to apply styling

UPDATE example 1 step 2 - method#2: SELECT last name FROM people WHERE first name= 'Carlos' AND City= 'Houston'; UPDATE people SET last name= 'Morrison' WHERE first name='Carlos' AND city='Houston';

Check and see if Carlos Morrison is from Houston Since he is, this is more specific

What will be the result? let myFunOne = () => { var x = "Banana"; if ( 1 == 1){ var x = "Cherry"; } $("#message").html(x); }

Cherry - If both variables are declared with var, it will also be cherry because var has function level scope and escape the bounds of the code block

What will be the result? let myFunOne = () => { var x = "Banana"; if ( 1 == 1){ x = "Cherry"; } $("#message").html(x); }

Cherry -If let is taken out, you get cherry because you reassigned the value of x

Which data row will be left out with this condition in your statement? WHERE Color != 'B' OR (Size='L' AND Price>20) Color is 'B', Size is 'L' and Price is 30. Color is 'W', Size is 'S' and Price is 20. Color is 'G', Size is 'L' and Price is 25. Color is 'B', Size is 'XL' and Price is 10.

Color is 'B', Size is 'XL' and Price is 10. Since both sides of the OR condition are false, this record will not be returned. -Since it's B and it's not L and less than 20

Variable Declaration

Const, Var , Let -let is the most popular way to declare a variable -constant is similar to a variable expect it doesn't change - all these mechanisms have something called scope -If have only one to use, you should rely on let With two, you can use const and let Var can usually be done away with one exception; special case -Right thing to do is not rely on scoping, but if you wanted to pass a piece of data into the function, you should pass it as a parameter

Write the jQuery command that put the content "Go Owls!" into a div with the id of message

Correct: $(#message).html("Go Owls!"); Incorrect: (#message).html("Go Owls!"); - no $ $(#message).val("Go Owls!"); - can't be val because there's a div tag, which doesn't have values $(message).html("Go Owls!"); - no #

What does this do? SELECT first_name, COUNT(first_name) FROM people GROUP BY first_name;

Counts the number of time each first name appears

What does this do? SELECT state_code, COUNT(state_code) FROM people GROUP BY state_code;

Counts the number of time each state code appears

Set up our first AWS lambda function

Create Lambda function Set up the second, proxy gateway Enable CORS on both gateways Deploy both gateways

Write a SQL query: REMOVE: Lois Hart has requested to be removed from our list.

DELETE FROM people WHERE first_name= 'Lois' AND last_name ='Hart'

Why is accessibility important?

Disability -not right to exclude from websites due to disability 1. accessibility- right thing to do 2. accessible sites part of law in some countries 3. build accessible site benefits everyone 4. Semantic HTML, improve accessibility and SEO(search engine optimization), improving findability 5. demonstrate good ethics and morals, improving public image 6. improve use for other groups - mobile users and low network speed

Dot vs Hashtag CSS Special characters

Dot . - Used to reference a class attribute Example: Dot $('.content-wrapper').hide(); Hashtag # - Used to reference the id attribute Example: Hash $('#login_message').html("");

What will be the result? let myFunThree = (z) => { if ( 1 == 1){ var x = "Elderberry"; } $("#message").html(x); }

Elderberry -Will get elderberry because of the var

What does this mean? SELECT DISTINCT(first_name) FROM people; SELECT DISTINCT(shirt_hat) FROM people;

Example 1: Will show each first name once as they are unique Example 2: will only show shirt and hat as they are the only two options shirt_or_hat hat shirt

What does .focus() do? $("#btnOne").focus();

Focus highlights the button subtly, puts attention on one of the button

2. Use good resources

For MIS3502 students 1. Firefox View Page Source(not for accessibility) firefox.com- checks for valid HTML, bugs in HTML 2. WebAIM's WAVE extension(Web Accessibility Evaluation Tool) -webaim.org and wave.webaim.org -WAVE extension started at Temple -checks for contrasts, html, and other accessibility errors 3. Mozilla Developer Network's Accessibility documentation -https://developer.mozilla.org/en-US/docs/Web/Accessibility 4. The Web Content Accessibility Guidelines (WCAG) from W3C https://www.w3.org/WAI/standards- guidelines/wcag

What will be the result? let myFunThree = (z) => { if ( 1 == 1){ var x = "Elderberry"; } $("#message").html(z); } $("#btnThree").click( ()=>{ myFunThree("Fuji Apple") } );

Fuji Apple -If you want to see z, you can change $("message").html(x) to $("message").html(z) -"z" is an argument or a parameter of myFunThree and will receive whatever variable I pass to it here, expecting Fuji Apple

HTTP methods

GET POST PUT PATCH DELETE

1. Abusing the GET method

GET is assumed to be a idempotent operation that never modifies the state of the resource. But here it has been contorted into performing other functions: -https://exampleapi.xyz?action=ADD&productname=Widget -?action=ADD&productname=Widget -this is the data part. Query string. We are asking it to add, which is bad. This is a get because we are given a url and all the data are in a query string. This should be a POST, but we are using a GET

GET

GET requests are idempotent. GET requests transmit data in the query string of a HTTP URL. Data sent in the query string is not secure. GET requests are used for reading/retrieving data

ajax example part 2-forms <input type="text" id="idTheTask" name="task"> <input type="hidden" id="idTheTaskOwner" name="task_owner" value="Oswald">

HTML has form- 2 tags Tag one is input tag with type text with name "task" Tag two is input tag with type hidden with value of "Oswald", with name of "task_owner" Also tag with type button, but without name All three input tags are inside a form We want to send all the data collected here and send it to an API We want to post to the add task We get from the todo task

ajax example part 1-endpoints const endpoint_url = "https://misdemo.temple.edu/todo/addtask"; //POST TO THIS ONE! const endpoint_url2 = "https://misdemo.temple.edu/todo/tasks"; //Get from this one

Have 2 API endpoints One to create data - task list (item and a list of tasks) -POST Request Another one- get a list of tasks back out of the system - GET Request We want to send through these APIs

GROUP BY

Helps divide results in various ways

Write a SQL query: ADD: Walter St. John, 93 points, Baffled Badgers Buffalo, NY (hat) Emerald Chou, 92 points, Angry Ants Topeka, KS (shirt)

INSERT INTO people (first_name, last_name, quiz_points, team, city, state_code, shirt_or_hat) Values (Walter, St.John, 93, Baffled Badgers, Buffalo, NY, hat), (Emerald, Chou, 92, Angry Ants, Topkea, KS, shirt);

What does IS, IS NOT, and <> operate as?

IS operates as an equal sign IS NOT and <> operates as not equal signs

CSS prioritization example 3- Class < Id

In CSS: #square { margin: 10px; height: 200px; width: 200px; border-style: solid; border-color: black; background-color: chartreuse } In body of HTML: <div class="col-md-4 yellowthing"> <div id="square" class="greenthing" >4</div> </div> Id and class are both stating a background color. However, because id is more specific and there is currently a background-color in the css, the color of chartreuse will take precedent

CSS prioritization example 1- External Style Sheet <link> < Inline Style Tag attribute

In css: .greenthing { background-color: green ; } In HTML: <div id="square" class="greenthing" style="background-color: aqua" >4</div> </div> The square will change to the aqua color. This is because the other rules were overridden by the style attribute which was closest to the tag itself

Screen-reader software

JAWS, NVDA- for Microsoft -VoiceOver-Apple

Transforming data

LOWER UPPER SUBSTR REPLACE ORDER BY CAST AS CHAR AS INT AS

What is the most common example of state?

Log-in

Name attribute vs id attribute

Name attribute great for sending data to API (exists to interact with external resources like an API) ID attribute great for styling in css (focus on the client)

ajax example part 8- Trying to get both to run with async and await let twoStepOperation = async () => { -async goes at the beginning of the function await $.ajax({ -await goes before both ajax declaration. Is nested within async $("#btnOne").click( ()=>{ //putTheDataIn(); //getTheDataOut(); twoStepOperation(); } );

Need the async for the await to work. The two commands complement each other To fix, we use async and await. We will activate the twoStepOperation. It's an asynchronous meaning that inside the code block it has bundled together, a series of steps and all jquery commands can have await in the front -will await the first response to finish before moving on to the next response, make them synchronous -Will now get and post right away. Will wait till record is created before moving on

"Thunder Client" VS Code extension

New request that will test a restful api

What does this mean? SELECT MAX(CAST(quiz_points AS INT ) FROM people; Results: quiz_points 100

Numbers are back to being treated as integers, which will get you the value you would expect

What is the output of the following statement? SELECT 2*(5+1); O 8 O 0.333 O 12 O 11

O 12 In this statement, the expression inside the parentheses is evaluated first (5+1=6), and then the outer expression is evaluated (2*6=12).

As a database administrator, you receive a request to store images in a column. Which SQL data type is the best choice for storing this data? O Numbers O Binary O Date/Time O Text

O Binary The Binary type stores any kind of data.

Which statement is true regarding this query executed on an SQLite database? INSERT INTO Parts (Price, Description) VALUES (35.00, 'Battery'); OIt will add a new row to the table. O It will update an existing row in the table. O It will fail if the table has additional columns besides Price and Description. O It will fail if the Description column is defined as a numeric field.

O It will add a new row to the table. This query is an INSERT statement that adds a new record into the table.

Which SQL query demonstrates a common mistake? O SELECT * FROM Bank Deposits; O SELECT * FROM Accounts WHERE Name ' = John Smith'; O DELETE FROM Accounts WHERE Account1D IS NULL; O SELECT * FROM Bank Deposits'

O SELECT * FROM Bank Deposits; This query fails to wrap a field name with a space inside back ticks, which is a common SQL mistake.

Which query will return the highest sale amount for every office? O SELECT Office FROM Sales GROUP BY MAX(Amount); O SELECT MAX(Amount, Office) FROM Sales; O SELECT MAX(Amount) FROM Sales GROUP BY Office; O SELECT MAX(Amount) , Office FROM Sales;

O SELECT MAX(Amount) FROM Sales GROUP BY Office; The GROUP BY clause will group rows by the office value, and the query will return the max amount for each.

Is it possible to group by two fields, and if so what would be the correct syntax? O Yes, using this syntax: GROUP BY Field1 GROUP BY Field2 O No, applying multiple grouping in the same statement is not allowed. O Yes, using this syntax: GROUP BY Field1, Field2 O Yes, multiple grouping is allowed, but only if the grouped fields have the same data type.

O Yes, using this syntax: GROUP BY Fieldi, Field2 Grouping by two fields is possible by adding both fields in the same GROUP BY clause.

What does the VARCHAR data type usually store? O a varying sequence of true or false values O names of variables used within SQL O text with variable length O numbers with low precision

O text with variable length The VARCHAR type is used for storing a variable number of characters.

Your SQL statement is returning a TransactionDate field. What can you add to it in order to list the dates from latest to earliest? ORDER BY TransactionDate CURRENT ORDER BY TransactionDate ASC ORDER BY TransactionDate ORDER BY TransactionDate DESC

ORDER BY TransactionDate DESC The DESC option will sort in descending order, and show the latest dates first

PATCH

PATCH requests are idempotent. PATCH requests transmit data in the body of an HTTP request. PATCH requests are used for updating one specific element of an existing object(for example, a status code). -focus on changing one attribute at a time

POST

POST requests are NOT idempotent. POST requests transmit data in the body of an HTTP request. POST requests are used for creating objects

PUT

PUT requests are idempotent. PUT requests transmit data in the body of an HTTP request. PUT requests are used for redefining (updating an existing object

What does this mean? SELECT first_name, quiz_points FROM people WHERE quiz_points >= 70 ORDER BY quiz_points;

People with quiz points greater than or equal to 70 in ascending order

Recurring challenge with state

Recall that the burden of managing state is on the client. This raises many security concerns. The IT industry favors the efficiency and scalability gains made possible by REST ... but those gains introduce risks related to session hijacking and impersonation. (info about the current session. Who's logged in and who's not. How is the login validated? Information can be intercepted). -Centrally managed state would be easier to secure -There is no consistent approach to managing the state of a RESTful architecture securely. (This is a recurring challenge)

What is REST

Representational State Transfer -a software architectural style... a set of rules and conventions for the creation of an API -way of building -computer scientist by the name of Roy Fielding who defined the principles of REST in his 2000 PhD dissertation`

Practical Implications of HTTP and REST

Roy Fielding was one of the principal authors of the HTTP specification. Fielding created the REST constraints with HTTP in mind. So, if you use HTTP convention correctly, you are likely to end up creating RESTful system. Ignoring or using HTTP in a non-standard/haphazard way will result in unexpected/unfamiliar scenarios. This can increase the long-term maintenance cost of the system

How to select everything?

SELECT * -returns all fields in a table

Subselect- example 2-Without knowing the abbreviation of Minnesota, get the info of all the people from Minnesota

SELECT * FROM people WHERE state_code=(SELECT state_abbrev FROM states WHERE state_name= 'Minnesota')

Show the first name and the last name of the people who wants a shirt AND lives in California AND NOT part of the angry ants team

SELECT first_name, last_name FROM people; WHERE shirt_or_hat = 'shirt' AND state_code = 'CA' AND team != 'Angry Ants;

Show the first name and the last name of the people who wants a shirt AND lives in California

SELECT first_name, last_name FROM people; WHERE shirt_or_hat = 'shirt' AND state_code = 'CA';

Show the first name and the last name of the people who wants a shirt

SELECT first_name, last_name FROM people; WHERE shirt_or_hat = 'shirt';

Subselect- example 1- people who got the highest scores in the quiz_points column

SELECT first_name, last_name, quiz_points FROM people WHERE quiz_points= (SELECT MAX(quiz_points) FROM people);

Challenge: Summary of Prizes o List each person's name, team, and score o List which prize each person wants and sort the list using that information 0 Further sort the list by team name

SELECT shirt_or_hat, first_name, last_name, team, quiz_points FROM people ORDER BY shirt_or_hat , team;

Challenge: Quiz Metrics o Show maximum score and average score in each state o Sort by average score, with the largest at the top of the report

SELECT state_code, MAX(quiz_points), AVG(quiz_points) FROM people GROUP BY state_code ORDER BY AVG(quiz_points) DESC;

Challenge: Explore JOINs o Create a summary of how many hats need to be shipped to each state

SELECT state_name, COUNT (shirt_or_hat) FROM states JOIN people ON states.state_abbrev = people.state_code WHERE shirt_or_hat = "hat" GROUP BY state_name, shirt_or_hat

Challenge: Explore JOINs o Create a summary showing how many members of each team are in each geographic division

SELECT team, COUNT (first_name), division FROM people JOIN states ON people.state_code = people.state_abbrev GROUP BY team, division

What does this mean? SELECT first name, last name people FROM ORDER BY first name ;

Select the first and last name and sort first name by alphabetical order, ascending order, which is the default -DESC will sort first name by reverse alphabetical order

What does this mean? SELECT state code, last name, first_name FROM people ORDER BY state code, last name ;

Select the state code, last name, and first name with both last name and state code sorted by ascending order

What does this mean? SELECT MAX(quiz_points), MIN(quiz_points) FROM people;

Selecting the highest and lowest quiz scores

5. Code on Demand (optional constraint)

Servers can temporarily extend or customize the functionality of a client transferring executable code. The constraint is optional. Client can request a system update from the server and the server will respond maybe with an incremental update. Apple would not like this as they don't want others updating their software

What does this mean? SELECT * FROM people WHERE company LIKE '%LLC' ;

Shows all companies that ends with LLC Example: Cartwright LLC Steuber LLC Simonis LLC Bashirian LLC

What does this mean? SELECT * FROM people WHERE company LIKE '%LLC' LIMIT 5;

Shows first 5 members whose companies that ends with LLC Example: id_number company 10 Cartwright LLC 15 Steuber LLC 30 Simonis LLC 76 Bashirian LLC 87 Prohaska LLC

Control + Shift + R

Sometimes Chrome needs a little hint to understand to not just refresh index.html, but also pull in all of the dependencies fresh. Quiz question: "What for a developer is better than hitting the refresh button?" Keystroke for Windows: Control + Shift + R Keystroke for Mac: Command + Shift + R

ORDER BY field1, field2,

Sort the results of a query using field1, then field2, and so on

Final thoughts on A11y

Start with a good template- template accessible upfront Keep A11y in mind, don;t ignore alt text Test and correct before launch -IT secure-> foundation-> do work and keep A11y in mind, then test it

SQL

Structured Query Language- originally called SEQUEL, pronunciation varies by application -lets us formulate questions a database can respond to -became to be 1974, became a standard in 1986 -write a question a computer can understand -express what you mean explicitly -often is a series of smaller questions -adopted into many DMBS

Bootstrap contextual classes

Styled with bootstrap classes like "btn btn-primary" -used based off the context which they are to be used

6. Uniform Interface

The constraint comprised of 4 additional constraints or principles. Taken together, these 4 principles basically require the API to be consistent with HTTP standards and to be self-describing

What's the difference between the first and second query? SELECT shirt or hat, state code, first name, last name people FROM WHERE state code = 'CA' OR state code = 'CO' AND shirt or hat 'shirt' SELECT shirt or hat, state code, first name, last name people FROM WHERE (state code = 'CA' OR state code = 'CO') AND shirt or hat 'shirt'

The first query will get both shirt and hat people even though you just wanted shirt. This is because the database is thinking that the last two statements are paired together, CA will show both hats and shirts The second query with the parentheses will show shirts only from CA and CO

ajax example part 7- Trying to get both to run at once $("#btnOne").click( ()=>{ putTheDataIn(); getTheDataOut(); //twoStepOperation(); } );

There's will be some delay. The problem is with ajax. When there is two ajax calls, there's no guarantee that the operations will happen in the timely order that you think they would AJAX- asynchronous javascript and XML

Write a SQL query: CHANGE: Bonnie Brooks wants a shirt, not a hat!

UPDATE people SET shirt_or_hat = shirt WHERE first_name = "Bonnie" AND last_name = "Brooks"

UPDATE example 1 step 1: Name is entered incorrectly Need to change last name from 'Morrrison' to 'Morrison' - need to check if Carlos Morrison is the only Carlos

UPDATE people SET last_name= 'Morrison' WHERE first_name='Carlos'; SELECT last name FROM people WHERE first name = 'Carlos'; Results: last_name Gray Morrrison Howell Graham Owens -No, he's not the only Carlos

Bad jQuery questions- gives the exact jQuery method(or event) wanted

Using the html method of jQuery, put the content "Go Owls!" into a div with the id of message Using the val method of jQuery to put the value of an input tag into a variable x. The input tag has an id of comment

Select the WHERE clause that returns all records with the text "priority" in the Comment column WHERE Comment LIKE '%priority%' WHERE Comment LIKE 'priority%' WHERE Comment LIKE 'priority' WHERE Comment LIKE '%priority'

WHERE Comment LIKE '%priority%' -Since the text "priority" could appear anywhere in the text, % at both ends allows a match in case there's text before or after the search term.

UPDATE example 1 step 2 - method#3: Using ID SELECT * FROM people WHERE id number= 175; UPDATE people SET lat_name='Morrison' WHERE id_number=175;

We check to see what Carlos' id number is We can then update based off the id number -Where clause is important because it only targets the correct record, if not it will set the last name to Morrison for every record in the table

Delete Example #1 -We want to delete Bob from the database SELECT * FROM people WHERE first_name ='Bob' DELETE FROM people WHERE id_number = 1001;

We first check to see where bob is and what is his corresponding id We make sure that only Bob gets deleted His id number is 1001

Why use ajax?

We now use ajax and not post( ) or get() because it's very flexible (one that works for every situation. We now send the data to an URL, declare the method (there are other methods other than post or get), and success and error. Success and error are callback functions. When everything works, success function will execute, something goes wrong, error function will run

What does this mean? SELECT LOWER( first_name), SUBSTR( last_name, 1, 5) FROM people;

We only want the first five letters on the last name Example: first_name Upper(last_name) Janice Howel Wanda Alvar Laura Olson

What does this mean? SELECT LOWER( first_name), SUBSTR( last_name, 2) FROM people;

We start from the second character and continue until the end Example: first_name Upper(last_name) Janice owell Wanda lvarez Laura lson

What does this mean? SELECT LOWER( first_name), SUBSTR( last_name, 2, 4) FROM people;

We start from the second character and end with the fourth character of the last name Example: first_name Upper(last_name) Janice owel Wanda lvar Laura lson

What's a Web Service(What is a Web API- same as web service)

Web Services are APIs that use web protocols (HTTPS, HTTPS, JSON, XML, etc.). For example, a web service can be used to programmatically obtain data from a resource(such as US postal office having to actually visit the application itself (checking the web site usps.com).

What does this do? INSERT INTO people (first_name, last_name, state_code, city, shirt_or_hat) VALUES ('Mary', 'Hamilton', 'OR', 'Portland', 'hat');

Will add a row with Mary to the first_name column Hamilton to the last_name column OR to the state_code column hat to the shirt_or_hat column

What does this do? INSERT example: INSERT INTO people(first_name) VALUES ( 'Bob');

Will add another entry with Bob just into the first_name, null for all other fields

What does this mean? SELECT LOWER( first_name), UPPER( last_name) FROM people;

Will get the upper and lower case of each field Example: Lower(first_name) Upper(last_name) janice HOWELL wanda ALVAREZ laura OLSON

What does this mean? SELECT LOWER( first_name), SUBSTR( last_name, -2) FROM people;

Will grab the last two characters of the last name Example: first_name Upper(last_name) Janice ll Wanda ez Laura on

UPDATE example 1 step 2 - method#1: UPDATE people SET last name='Morrison' WHERE last name='Morrrison';

Will remove the extra 'r'

What does this mean? SELECT REPLACE( first_name, "a", "-") FROM people;

Will replace all first name "a" letters with "-" Is case sensitive, "A" will not be changed Example: Lower(first_name) J-nice W-nd- L-ur-

What does this mean? SELECT * FROM people WHERE first_name LIKE 'B%N' ;

Will show first names that starts with B and ends with N Example: Brian Benjamin Brandon

What does this mean? SELECT * FROM people WHERE first_name LIKE '%N%' ;

Will show first names with N anywhere, including the middle Example: Ryan Christine Helen Wanda

What does this mean? SELECT * FROM people WHERE first_name LIKE '%ON%' ;

Will show first names with ON anywhere, including the middle Example: Bonnie Raymond Jason Jonathan

ajax example part 7- Getting data out {task_id: 12738, task_owner: 'Oswald', task: 'write some code', task_date: "2023-03-10T00:57:42.000Z", task_id: 12738, task_owner: "Oswald" {task_id: 12739, task_owner: 'Oswald', task: 'test', task_date: "2023-03-10T00:59:51.000Z", task_id: 12739, task_owner: "Oswald" $("#btnOne").click( ()=>{ //putTheDataIn(); getTheDataOut(); //twoStepOperation(); } );

Will show the data inputted appended to a list Will show results: task, task_owner and task_id Result: write some code test

What does this mean? SELECT * FROM people WHERE company LIKE '%LLC' LIMIT 5 OFFSET 5;

Will show the second set of 5 Example: id_number first_name 107 Welch LLC 119 Ward LLC 127 Goodwin LLC 145 Kilback LLC 147 Marks LLC

Good jQuery questions - don't indicate the exact jQuery method(or event) wanted

Write the jQuery command that put the content "Go Owls!" into a div with the id of message Write the jQuery command that will retrieve the user provided data from the input tag with the id of comment and assign it to an existing variable x

What happens when you wrap first_name in quotes? example: SELECT "first_name" FROM people;

You will get the text literal back with number being the number of results had there not been a quote For example: There are 5 results for this query: SELECT "first_name" FROM people; Results will be: column name: first_name first_name first_name first_name first_name first_name

Adding multiple rows at once example Wrong: INSERT INTO people (first_name, last_name) VALUES ('George', 'White'), ('Jenn', 'Smith'), ('Carol'); Correct: INSERT INTO people (first_name, last_name) VALUES ('George', 'White'), ('Jenn', 'Smith'), ('Carol, Null');

You wanted to add both first name and last name, so not giving Carol a last name will not work -If Carol doesn't have a last name, you can use NULL

What is accessibility?

accessibility (11 letters in between a and y) => A11y (pronounced "A" eleven "y") -think about what the www is used for: -commerce -news and information -entertainment -would be wrong to exclude people from those resources based solely on their disabilities. Best to improve A11y if possible -help distinguish a rookie IT professional from a pro

Make A11y solutions- 1. Understand your role

accessible technology only supports human content creators -Accessible Technology(screen readers-attempts to identify picture for a blind person, translate to text and spoken, delivered to user's browser) -Human creating content with accessibility in mind (make content and code accessible) -example: human decides what's said for alt text, need to make it most understandable for a blind person. Auto generated descriptions can be lacking and too long. Need to identify and resolve -Accessible platforms(medium for content)

bootstrap

adds styling example- $(#message").addClass("alert alert-success") -makes message green

Alias example SELECT first_name AS firstname, UPPER(last_name) AS surname FROM people WHERE firstname='Laura'; Results: firstname surname Laura OLSON Laura BROWN Laura LOPEZ Laura MASON

an alias is used to assign a temporary name to a table or a column in a table -Changes the name of the column -will work with the WHERE clause

Intermittent communication

as client requests goes up, resources remain steady or grow slowly. Don't store all memory, much less than server manages state. Clients, with each request, send off everything that server needs to process the request, or else server can't help

Scope of Const

block level scope -good inside of the current code block and all nested block

Scope of Let

block level scope -let has block level scope, it's available only inside the current code block

Putting the Javascript pieces together

for (let i =1; i <= max; i++) { sum = sum +i if (i == max) { console.log("This is the last step!"); } } -will write into the console at the last step

Persistent communication

for a server managed state, every time you get a new user/new requests, system resources will keep going up. Memory have to increase for each client request. Resources keep piling on in memory

function declaration

function addTwoNums (x,y) { return x+y; } -function is announced without assigning it to anything

Scope of Var

function level scope - can be nested conditional statement, declare a variable var and it's good inside the whole function -is available inside the whole function

User Experience

how the end user uses the solution from end to end -how do you interact, how information is organized that makes sense -research on how people interact with system(behavior matches action?)

write an "if" statement

if (max ==10) { console.log("The max is " + max); } Note the use of "+" or concatenation

400 Status Code

indicates a client error. That is, client sent a request that did not make sense. -a classical example of this is "404 Not Found". -Try it! Go to https://www.google.com/bad then try going to https://www.temple.edu/bad. Notice that both pages report the status code 404. That's not just a coincidence. -the internet is built on standards like HTTP and these errors code are part of that standard

200 Status Code

indicates success, "OK" -most common status code

fields

individual kinds of information into columns

Question 3 of 4 Which type of join returns only the matches for items that are in both tables? O outer join O right join O left join O inner join

inner join An inner join only returns matches for items in the left table that are also found in the right table.

jQuery vs JavaScript

jQuery is not the same as JavaScript -it's a library that helps you do the tedious operations with tedious syntax -jQuery is a JavaScript library

UPDATE

keyword changes data stored in fields in a record UPDATE tablename SET field1=value1, field2=value2 WHERE condition;

Schema

layout -definition of how fields, tables, and relationship sets up

write a "for" loop

let max = 10; let sum =0; for (let i=1; i <= max; i++){ sum = sum +1; } sum number 1 through 10

function expression with arrow notation

let multTwoNums = (x,y) => { return x*y; }

ajax example part 3- serialization

let putTheDataIn = () => { // get the data off the form let the_serialized_data = $("#frmMyStuff").serialize(); console.log(the_serialized_data); -serialize form tags -This function serializes the data on the form. Find the stuff from the form and send it to the API

function expression

let subTwoNums = function (x,y) { return x-y; } -there shall be variable called subTwoNums with data type function, function with parameter (x,y)

WHERE clause

lets us add selection criteria to a statement examples: SELECT * FROM people WHERE state_code = 'CA'; -Shows everyone from California who participated in the quiz -case sensitive for where, can't use "ca"

proxy resource

multiple requests through the same API Gateway, just need one API Gateway

declare variable with let

must declare with let let max = 10; let sum = 0;

ready() event of jQuery

paste in your javascript code from the main document. Use: $(document).ready( () => { });

Disability

physical, mental, cognitive, or development condition- impairs, interferes with/limit person's ability to engage in tasks or actions or participation in daily activities and interactions

Which records will be shown when the query ends with LIMIT 10 OFFSET 5 ? records 6 through 15 records 5 through 15 records 5 through 10 records 6 through 10

records 6 through 15 The results will be limited to 10 records, skipping the first 5 records.

LIKE '%'

return results that match part of a string. The % character represents the portion of the string to ignore

The topic of accessibility

rooted in good, ethical principles(right things to do, considerate of others) -gives students an opportunity to reacquaint themselves with HTML -gives us an on-ramp to AWS -AWS S3 and web pages we store -has been a career booster for several recent grads(Nhi) -provides good universal concepts that improves both UX and UI (we are thinking about both components and systems when it comes to accessibility)

Why REST puts the burden of managing state on the client.

scalability -client-side code is inherently less secure than server-side code

The "Items" table has one "Name" column with 12 items in it. What will this query return? the text "Name" showing 12 times the values of all 12 items the text "Name" showing once the text "Items" showing once

the text "Name" showing 12 times Since "Name" is in quotes, it will be the actual text returned for each one of the 12 items.

What is the DISTINCT clause used for? to sort the values in a column in a certain order to count how many rows are represented in the data to return the number of characters in a data value to return the unique values from a column

to return the unique values from a column The DISTINCT clause returns the values in a column that are distinct from one another.

float drop

when you shrink the page, blocks will stack on top of each other. It will drop below the prior tag