M5 Flashcards by daniel porter

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

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

How well did you know this?

Not at all

Perfectly

What are the two components of a CSS animation?

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.

How well did you know this?

Not at all

Perfectly

Why should we try to use CSS animations?

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

How well did you know this?

Not at all

Perfectly

What are CSS transitions?

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

How well did you know this?

Not at all

Perfectly

What do CSS frameworks do?

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

How well did you know this?

Not at all

Perfectly

Describe boostrap?

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.

How well did you know this?

Not at all

Perfectly

What are CSS preproccessors and what is transpiling?

List some examples of CSS preprocessors.

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

How well did you know this?

Not at all

Perfectly

What is Sass and its features?

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.

How well did you know this?

Not at all

Perfectly

What is an API?

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

How well did you know this?

Not at all

Perfectly

What are browser APIs - give some examples?

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.

How well did you know this?

Not at all

Perfectly

What is Postman?

A useful program for creating HTTP requests.

Allows you to try out/test different API URLs.

How well did you know this?

Not at all

Perfectly

What are the accessibility principles?

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

How well did you know this?

Not at all

Perfectly

What is the WAI?

WAI: Web Accessibility Initiative

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

How well did you know this?

Not at all

Perfectly

Describe the first two priciples of the WAI?

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

How well did you know this?

Not at all

Perfectly

What is an ARIA tag?

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.

How well did you know this?

Not at all

Perfectly

What is a promise and how is it used?

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.’

What is fetch ?

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.

What is the alternative syntax to fetch?

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.

Provide an example function using async await

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

What is component based development?

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

What is React?

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,

What is the React file structure?

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.

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

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>

What are some of the conditions of React Components?

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.

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

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.

What is a build tool?

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

What are the two ways to write components in React?

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

What is the syntax for a function component?

``` Function components const FunctionComponent = () => { return (

Example

); } ```

What is the syntax for a class component? Describe each element of the function

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

Example

); } } ``` 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

How can we organise components?

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

What are props/properties?

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

What is State?

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.

How do we use state?

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.

What are Hooks?

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.

What is useEffect?

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

What is lifting state?

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.