Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Development > Webstacks > Flashcards

Webstacks Flashcards

1
Q

Static Site Generation (SSG)

A

Static site generation is where your HTML is generated at build time. This HTML is then used for each request. Static site generation is probably the best type of rendering strategy for SEO as not only do you have all the HTML on page load because it’s pre-rendered, but it also helps with page performance – now another ranking factor when it comes to SEO.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Server-Side Rendering (SSR)

A

Like SSG, Server-Side Rendering (SSR) is pre-rendered, which also makes it great for SEO. Instead of being generated at build time, as in SSG, SSR’s HTML is generated at request time. This is great for when you have pages that are very dynamic.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Incremental Static Regeneration (ISR)

A

If you have a very large amount of pages, generating them all at build time may not be feasible. Next.js allows you to create or update static pages after you have built your site.

Incremental Static Regeneration enables developers and content editors to use static generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Client Side Rendering (CSR)

A

Client-Side Rendering allows developers to make their websites entirely rendered in the browser with JavaScript. On initial page load a single HTML file is generally served with little to no content until you fetch the JavaScript and the browser compiles everything.

As we commented above, in general Client-Side Rendering is not recommended for optimal SEO.

CSR is perfect for data heavy dashboards, account pages or any page that you do not require to be in any search engine index.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is DRY

A

Dont repeat yourself

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is KISS

A

Keep it simple, smarty

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

YAGNI

A

You ain’t gonna need it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

How to handle SVG Images in NextJs

A

Use normal image tab

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

When to use Static Generation

A

Marketing, blog posts, e-commerce, and help/docs. Nice to use with a headless CMS, not ideal when writing draft from a headless CMS and want to preview the draft immediately.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

When to use pre-rendering

A

when it updates frequently

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Difference between getStaticPaths and getStaticProps

A

Use ‘‘getStaticPaths” to fetch an array of product IDs and use “getStaticProps” to fetch data for each product ID.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Which one of the following is not a production optimization process?

Compiling
Bundling
Routing
Minifying

A

Routing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Minifying removes syntax highlighting from your code.

True - syntax highlighting is only needed in development
False - syntax highlighting is provided by your code editor

A

False

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Which of the following is not a goal of code splitting?

Improve the application’s initial load
Only load the required code for an entry point
Delete redundant code

A

C

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

True or False: Build time is the period of time when an application is being built in response to a user’s request.

True
False

A

False

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Can you have multiple rendering methods in a single Next.js application?

Yes - you can choose your rendering method on the page level
No - you need to choose your application’s rendering method at the start

A

yes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is the edge

A

The Edge is a generalized concept for the fringe (or edge) of the network, closest to the user. CDNs could be considered part of “the Edge” because they store static content at the fringe (edge) of the network.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

If you wanted to add a new route /authors/me, what would the file name be (including the directory)?

authors/me.js
pages/authors/me.js
routes/authors/me.js

A

b

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Code splitting in Next.js

A

Next.js does code splitting automatically, so each page only loads what’s necessary for that page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What does next/image simplify for you?

Uploading & storing images
Resizing & optimizing images
Cropping & color correcting images

A

b

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What does next/script simplify for you?

Loading third-party scripts
Minifying & compressing scripts
Optimizing bundled script chunks

A

a

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Which of the following styling methods does Next.js not have built-in support for?

CSS Modules
Sass
styled-jsx
styled-components

A

d

23
Q

Where can you import global CSS files?

Inside any file
Only inside pages/_app.js

A

b

24
Q

Why are CSS Modules useful?

They automatically fix any cross-browser issues
They scope styles at the component level

A

b

25
Q

Which of the following is not a benefit of pre-rendering?

Improved SEO
Allows your application to work without JavaScript
Allows your application to only run server-side

A

c

26
Q

Quick Review: When would you use Server-side rendering?

When you have thousands of pages
When the data needs to be up-to-date with every request
When you are building a page specific to a user

A

b

27
Q

When would you use Server-side rendering?

When you have thousands of pages
When the data needs to be up-to-date with every request
When you are building a page specific to a user

A

b

28
Q

Quick Review: Where does getStaticProps run?

Client-side
Server-side
Both

A

b server side

29
Q

When should you use Client-side rendering?

When you can pre-render the data ahead of a user’s request
When you need to fetch data at request time instead of build time
Private, user-specific pages where SEO is not relevant

A

c

30
Q

How does params.id from getStaticProps({ params }) know the key is named id?

The front matter of the Markdown file
The value from the file name

A

b

31
Q

You want to dynamically create product pages with the path pages/products/[id].js, where [id] refers to a specific product ID. What is the correct way to implement this?

Use getStaticPaths to fetch an array of product IDs and use getStaticProps to fetch data for each product.

Use getStaticPaths to fetch data for each product and use getStaticProps to fetch an array of product IDs.

A

a

32
Q

Which of the following is a good use case for an API Route?

Saving incoming data to your database
Securely communicating with a third-party API
Previewing draft content from your CMS
All of the above

A

d all of above

33
Q

What happens to a page’s data after it has been crawled?

It is thrown away in 99% of the cases.
It is stored in an Index if it meets the required criteria by each search engine.
A human decides if the pages should be indexed.

A

b

34
Q

How can you identify if a user on your site is a web crawler?

Via their IP address.
Via their device type
Via their interaction with the page.
Via their User-Agent.

A

d

35
Q

What status code indicates a page has been moved to a new URL?

404
500
418
301/308

A

301/308

36
Q

What is the purpose of a robots.txt file?

To indicate which pages/files crawlers can access and crawl
To provide crawlers a list of URLs to crawl
To add notes about crawling
All of the above

A

a

37
Q

What is the purpose of a sitemap?

A

To communicate which URLs belong to your site and facilitate crawling

38
Q

What is the main purpose of a canonical?

To de-duplicate pages
To change the URL of a page
To allow robots on a page
All of the above

A

d

39
Q

Which of the following is used on social media?

Open Graph
JSON-LD
H1 Tag

A

a

40
Q

Why are headings important for SEO?

They help bots understand which text on the page can be more representative of the overall content.

They help users to spend less time on the site.

They are not important for SEO.

All of the above.

None of the above.

A

a

41
Q

What is measured by Core Web Vitals?

How many external scripts you are loading.
Loading, interactivity, and visual stability.
How accessible your website is.

A

b

42
Q

What does Largest Contentful Paint (LCP) measure?

LCP measures visual stability of a web page.
LCP measures interactivity of a web page.
LCP measures the loading performance of a web page.

A

c

43
Q

What does First Input Delay (FID) measure?

FID measures the visual stability of a web page.
FID measures the interactivity of a web page.
FID measures the loading performance of a web page.

A

b

44
Q

What are the three Core Web Vitals metrics?

FID, CLS, TBT
LCP, FID, CLS
CLS, FID, TBT

A

b

45
Q

Why should you run Lighthouse in incognito mode?

To prevent site history from being saved.
To stop extensions from negatively affecting load performance.
So your browser history does not affect performance.

A

b

46
Q

When is the best time to track performance?

Before you merge a pull request
Run a report every day
Track over time by monitoring real users

A

c

47
Q

Content Delivery API

A

The Content Delivery API (CDA), available at cdn.contentful.com, is a read-only API for delivering content from Contentful to apps, websites and other media. Content is delivered as JSON data, and images, videos and other media as files.

48
Q

Content Management API

A

The Content Management API (CMA), available at api.contentful.com, is a read-write API for managing content. Unlike the Content Delivery API, the management API requires you to authenticate as a Contentful user. You could use the CMA for several use cases, such as:

Automatic imports from WordPress, Drupal, and more.
Integration with other backend systems, such as an e-commerce shop.

Building custom editing experiences. We built the Contentful web app on top of this API.

49
Q

Content Preview API

A

variant of the CDA for previewing your content before delivering it to your customers.

50
Q

Images API

A

The Images API, available at images.ctfassets.net, allows you to resize and crop images, change their background color and convert them to different formats.

51
Q

GraphQL Content API

A

The GraphQL Content API, available at graphql.contentful.com, provides each space in Contentful with a GraphQL schema based on its content types.

52
Q

Webhooks

A

Webhooks are HTTP callbacks which can be used to send notifications when data in Contentful is changed, allowing external systems to react to changes to do things such as trigger a website rebuild or send a notification to a chat application.

53
Q

Integrating migrations in your continuous delivery pipeline

A

Build
Build your application and verify that the code compiles as expected.

Test
Run automated tests; unit tests; integration tests.

Deploy
Deploy the application to a number of environments. Often to a staging or pre-production environment manually test before deploying to production.

Test
Run automated end-to-end tests against the environments you deployed your application to in the previous step.

54
Q

What is rich text?

A

what you see is what you get but rather than plain html, it’s in a json format.

Web Development (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions