M5

Question 1

What is an SVG and some of its benefits/downsides?

Answer 1

SVG - scalable vector graphics
Shapes are defined using points joined up by lines rather than pixels.

Benefits:
Supported by all major browsers
Scalable without losing quality
Can be manipulated with JS/CSS
No need for extra http request

downsides:
But can be slow as browser has to draw it

Question 2

What are the two components of a CSS animation?

Answer 2

A style describing the CSS animation.

A set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

Question 3

Why should we try to use CSS animations?

Answer 3

Modern browsers can optimise rendering, so we should always try to create our animations using CSS transitions/animations where possible.

Question 4

What are CSS transitions?

Answer 4

CSS transitions provide a way to control animation speed when changing CSS properties.

Question 5

What do CSS frameworks do?

Answer 5

Are designed to make writing CSS easier.
Fix many cross browser issues.
Provide responsive CSS.
Encourage code consistency and good practices

Question 6

Describe boostrap?

Answer 6

Bootstrap is a free front-end framework Created by Twitter and originally named Twitter Blueprint.
Faster and easier web development
Bootstrap includes HTML and CSS based design templates
Bootstrap also gives you the ability to easily create responsive designs
Its default grid system has 12 responsive columns.
Is mobile-first.

Question 7

What are CSS preproccessors and what is transpiling?

List some examples of CSS preprocessors.

Answer 7

CSS preprocessors allow us to introduce programming language-like constructs, such as functions, variables, conditionals, and more, into styles to keep them clean and efficient.

Web browsers can only understand HTML, CSS and JS.
The conversion into plain css is called transpiling - a type of translator taking the source code as its input and produces an equivalent in the same or different language.

Examples - sass, less, CSS crush, stylus

Question 8

What is Sass and its features?

Answer 8

Sass - Syntactically Awesome StyleSheets
Sass is both a program(the preprocessor) and a syntax

Features -
Variables $,
Nesting,
Grouping by common css i.e font: family weight size etc,
@mixin and @include - a reusable set of properties which can also take an argument
Can be split into files and imported using @use.
You can tell Sass to watch your source files for changes, and re-compile the CSS each time you save.

Question 9

What is an API?

Answer 9

API - some software that sends information back and forth between a website or app and a user.

Question 10

What are browser APIs - give some examples?

Answer 10

Web browsers provide APIs that provide the ability to access/use code that is not native to your current language. I.e setTimeout, setInterval and fetch.

Question 11

What is Postman?

Answer 11

A useful program for creating HTTP requests.

Allows you to try out/test different API URLs.

Question 12

What are the accessibility principles?

Answer 12

POUR -
Perceivable information and user interface
Operable user interface and navigation
Understandable information and user interface
Robust content and reliable interpretation

Question 13

What is the WAI?

Answer 13

WAI: Web Accessibility Initiative

The WAI creates standards and materials to help developers understand and implement accessibility.

Question 14

Describe the first two priciples of the WAI?

Answer 14

Principle 1: A role is a promise i.e if role=button, it should be a button
Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger

Question 15

What is an ARIA tag?

Answer 15

ARIA - Accessible Rich Internet Applications

ARIA attributes modify existing element semantics or add semantics to elements where no native semantics exist.
They provide additional information to screen readers about the purpose of an element.

Question 16

What is a promise and how is it used?

Answer 16

Promise - asynchronous operation, returns an object that gets resolved which is a success or failure

JS is single threaded so can block the browser so we use a promise to kick it off and let the browser run it in the background.

A promise is essentially a way in JavaScript of you saying, ‘Do this thing and, once you’ve done it, do this.’

Question 17

What is fetch ?

Answer 17

Some operations in JavaScript can take some time. You may not want to wait for it to finish as this could block the browser.

Fetch returns a promise, which gets chained with then.

Question 18

What is the alternative syntax to fetch?

Answer 18

Using async and await.

Async
Indicates that the function will return a promise.
If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.
The function will contain zero or more await expressions.

Await
Can only be used inside an async function.
Can go before any function that is promise-based (like fetch).
Execution of the async function is suspended and control passed back to the caller.
When the promise has either been fulfilled or rejected, the async function resumes.

Question 19

Provide an example function using async await

Answer 19

async function displayData() {
const response = await fetch('https://swapi.dev/api/people/1');
const data = await extractResponseData(response);
processResponseData(data);}

Question 20

What is component based development?

Answer 20

an architectural style that combines HTML CSS and Javascript into self contained reusable elements.

Question 21

What is React?

Answer 21

React is a declarative JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

React is not a framework (unlike Angular, which is more opinionated).

React is an open-source project created by Facebook.

React uses separation of concerns by functionality i.e a button,

Question 22

What is the React file structure?

Answer 22

React file structure :
.gitignore and README.md - Standard files we’ve seen before.

public directory -Contains files such as index.html, JavaScript library files, images, and other assets.

src directory - Contains all our React code.

node_modules directory - This is where external packages that the project depends on are saved. Stuff installed using npm will go in here.

Package.json - Holds metadata about the project - e.g. name and version. It also contains settings about the project - e.g. the dependencies in node_modules.

Question 23

What is JSX and some of its syntax differences to Javascript?

Answer 23

React uses JSX - javascript xml

JSX is a syntax extension to JavaScript to describe what the UI should look like.

className is used instead of class for adding CSS classes, as class is a reserved keyword in JavaScript.
Properties and methods in JSX are camelCase - onclick will become onClick.
Self-closing tags must end in a slash - e.g. <img></img>

Question 24

What are some of the conditions of React Components?

Answer 24

React applications consist of components within components.

Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div> represents an HTML div tag, but represents a component.

A React component can only return one parent element.
To allow a component to have several other components nested within it, JSX includes a fragment component:
<>…</div>

import LikeButton from ‘./LikeButton’;
gets a component called LikeButton from a file named LikeButton.js.

Question 25

What is the virtual DOM and how is it used in React?

Answer 25

Virtual DOM - a copy of the real DOM, but not as detailed as the real DOM which allows it to be updated much faster

After the virtual DOM has changed, it is then compared to a snapshot of the real DOM ,this process is called diffing. Only the changed elements are updated in the real DOM.

Question 26

What is a build tool?

Answer 26

A build tool is a tool that automates monotonous tasks using an event based trigger to run tasks such as builds automatically

Question 27

What are the two ways to write components in React?

Answer 27

React components can be written as functions - function components - or as classes - class components.

Question 28

What is the syntax for a function component?

Answer 28

Function components 
const FunctionComponent = () => {
return (
 	<div>Example</div>
	);
}

Question 29

What is the syntax for a class component?

Describe each element of the function

Answer 29

class ClassComponent extends Component {
constructor() {
 	super();
 	this.state = {colour: 'red', make: 'Fiesta'};
}
 		render() {
    		return (<div>Example</div>);
 			   }
}

Extends means inheritance, so we import components from react.
Component is parent, car is child - this is also called super and sub
constructor - initialising the object, automatically called when a new instance of this class is created.
super - calling the parent, so it is setup correctly first.
state - effectively all the properties of the object.
behaviours - all the methods of the object
different from functions with return, in components we use render to return things.
render is a method

Question 30

How can we organise components?

Answer 30

We can organise our code more using folders :

The name of the folder is the name of the component.
The main code for the component is in a file called index.js in the folder.
We import from the file to App.js, which always looks for an index.js file

Question 31

What are props/properties?

Answer 31

As components are functions, they can be given arguments, these are props.

For components the arguments are called properties - shortened to props.

Props are read-only (immutable). Components cannot change them.

Props are only passed from top to bottom in a React application’s component hierarchy.

Props make our components more general and transportable to other applications

Question 32

What is State?

Answer 32

State is any data that should be kept and modified during the execution of an app without necessarily being added to a database.

State is private and fully controlled by a component.

Any change in data stored in state will trigger a rerender of that component

Always use the function provided by useState to update the state.

Question 33

How do we use state?

Answer 33

we set the data as initialState and use ‘useState’
const [state, setState] = useState(initialState);

useState does several things. it puts what your starting value is ( initialState ) in a starting state

the second thing it does is create a function , which we called setState, that can put a new array in for state

we can then pass down the state as props to other components.

Question 34

What are Hooks?

Answer 34

A Hook is a special function that lets you “hook into” React features.

useState is a Hook that lets you add React state to function components.

Question 35

What is useEffect?

Answer 35

It allows us to run a function when a specific variable changes.

first argument of useEffect, is a callback to do something. the second is an array of things to keep an eye on.

leaving the second argument as an empty array will set it to run only once, when the component first renders

Question 36

What is lifting state?

Answer 36

React components can manage their own state.

But, often components need to communicate their state to other components or share their state with other components.

Siblings can not pass state to each other directly.

Instead, state should be placed in the nearest common parent.