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