Node.js and CSS Quiz

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Which variable represents a normal blue color?

$color-blue-normal (correct)

$color-blue-ultra-light

$color-blue-mid

$color-blue-light

Which of the following is defined as the default color?

$color-default

$color-grey-normal (correct)

$color-blue-normal

$color-white-normal

Which file contains global CSS styles not bound to a specific module?

Person.js

Person.module.scss

styles.css

globals.css (correct)

What is the primary purpose of the `Person.js` file?

To render a person's resume. (C) Signup and view all the answers

Which file type is less powerful than SCSS files?

CSS files (D) Signup and view all the answers

What is the primary purpose of Node.js?

To enable server-side JavaScript programs. (B) Signup and view all the answers

What is the Node Package Manager (NPM) mainly used for?

Installing software packages to enhance a website. (A) Signup and view all the answers

What is the main benefit of using Node Version Manager (NVM)?

It enables switching between different Node.js versions (A) Signup and view all the answers

Which command is used to install the required Node.js modules?

<code>npm install</code> (D) Signup and view all the answers

Which command is used to install Node.js version 18.18.2 using NVM on Windows?

nvm install 18.18.2 (D) Signup and view all the answers

Which file stores environment variables for the application?

.env.local (D) Signup and view all the answers

How do you check which version of Node.js is installed?

node --version (B) Signup and view all the answers

How can you list all installed Node.js versions using NVM on macOS?

nvm ls (C) Signup and view all the answers

What is the purpose of the `STORYBLOK_PREVIEW_SECRET` variable?

To authorize access for previewing content (D) Signup and view all the answers

What is the function of an HTTPS proxy when developing locally with Storyblok CMS?

To facilitate secure communication between a local PC and Storyblok CMS. (A) Signup and view all the answers

In the Storyblok preview URL, what should `YOUR_STORYBLOK_PREVIEW_SECRET_GOES_HERE` be replaced with?

The actual secret value (B) Signup and view all the answers

What is the typical protocol and port used for the local development server?

<a href="https://localhost:3010">https://localhost:3010</a> (A) Signup and view all the answers

Which of these statements accurately describes Node.js?

It is a framework that allows Javascript to be utilized for server-side programming. (A) Signup and view all the answers

What action is needed to enable the Storyblok visual editor?

Set the default environment location in Storyblok to <code>https://localhost:3010/</code> (A) Signup and view all the answers

After setting up the environment, how do you start the debugging mode in VSCode?

By using the "play" icon in the debug view (D) Signup and view all the answers

What is the final step to test the local development server?

Navigate to <code>https://localhost:3010/people/jan-moons</code> in the browser (C) Signup and view all the answers

What command is used to build the site locally in a way that mirrors Vercel's production build process?

<code>npm run build</code> (B) Signup and view all the answers

Where can environment variables be set for a Vercel project after an initial failed build?

Project>Settings>Environment Variables (B) Signup and view all the answers

How can a new build be triggered from the 'Deployments' page in Vercel?

By selecting a build and choosing to redeploy to Production. (B) Signup and view all the answers

What action is required to reflect changes made to the site's content online, when the site is statically generated?

Both code and content changes require a new build. (C) Signup and view all the answers

What is the function of a deploy hook in Vercel?

A unique URL that triggers a new deployment. (C) Signup and view all the answers

What is the role of a webhook in the context of content changes and Vercel?

It's an event that calls a deploy hook when content is saved or published. (C) Signup and view all the answers

After successfully deploying your site to Vercel, what is the key change in the URL that can be noticed?

It is a publicly accessible URL. (C) Signup and view all the answers

If environment variables are forgotten initially, what must be done to ensure that new values are picked up by Vercel?

After setting them, a new build must be triggered. (C) Signup and view all the answers

Which of the following best describes the primary difference between Google Analytics and HotJar?

Google Analytics is a web analytics tool, whereas HotJar is a session analytics tool focused on user interactions. (D) Signup and view all the answers

In the described development process, what is the primary function of Vercel?

Hosting the software and making it accessible to end users. (C) Signup and view all the answers

Which tool is primarily used for local code testing and debugging?

Visual Studio Code/Chrome Developer Tools (C) Signup and view all the answers

What role does GitHub play in the development process described?

It is the platform where code changes are stored and managed online. (A) Signup and view all the answers

What is the purpose of an 'integration' environment in a real-world development setting?

To enable the software to be tested in the context of other software it interacts with. (C) Signup and view all the answers

What does an 'acceptance' environment provide for the software development process?

A space for testers or designated end-users to try out changes before release. (B) Signup and view all the answers

Which of the following tools is explicitly described as an email communication tool?

SendInBlue (D) Signup and view all the answers

According to the passage, what causes the deployment process to happen automatically when using Vercel?

When changes are pushed to the online GitHub repository. (C) Signup and view all the answers

What is the primary purpose of a Vercel Deploy Hook?

To manually trigger a deployment of a specific branch to Vercel by making an API call. (C) Signup and view all the answers

In the context of the described code execution order, what is the role of `getStaticPaths`?

To retrieve a list of all possible paths the site needs to render on the server. (A) Signup and view all the answers

Which of the following best describes the purpose of `getStaticProps`?

It fetches and provides the data required for a specific page based on the URL. (B) Signup and view all the answers

What is the correct order of code execution when processing an incoming request, according to the material?

<code>[[...slug]].js/getStaticPaths</code>, <code>[[...slug]].js/getStaticProps</code>, <code>_app.js/MyApp</code>, <code>[[...slug]].js/Page</code> (C) Signup and view all the answers

What is the role of the `_app.js/MyApp` component?

To establish site-wide initializations of your application. (B) Signup and view all the answers

Why would a website be statically generated when deploying to Vercel?

To optimize website performance with pre-built HTML, CSS, and JS files. (A) Signup and view all the answers

Which of these is NOT one of the primary component systems described in this content?

A version control system (D) Signup and view all the answers

What action initiates the fetching of data for a specific URL in this setup?

Requesting a specific path (A) Signup and view all the answers

Study Notes

Connecting the CMS and the Site

Introduction
- The data model was introduced and implemented in Storyblok
- The resume website needs to connect to the new data model in the content management system
Getting the Code
- The easiest way to get the code for the Resume project is to fork it.
- Instructions for forking the repository are available at: https://docs.github.com/en/get-started/quickstart/fork-a-repo
- Steps to get the code:
  - Log in to your GitHub account
  - Search for JanMoonsUGent/resume
  - Open the repository
  - Fork the repository
  - You will now be in your account/resume
Git Clone vs. Fork
- Developers who work on a common codebase will clone the repository to synchronize changes
- Forking creates a new codebase. Updates to a fork are not synchronized with the original repo
Cloning the Project
- Use the GitHub CLI to clone the project from your online GitHub account to your local computer. This is described in part 1, starting from step 7

Software Structure

After cloning, open the folder in VSCode
The file structure is a Next.js project
Important folders/files:
- components: Contains JavaScript files for UI components
- node_modules: Contains external modules used by the site
- public: Contains publicly accessible assets (e.g., images)
- styles: Contains CSS stylesheets (using SCSS)
- pages: Contains Next.js pages. Includes [[...slug]].js, _app.js, and _document.js which are relevant for StoryBlok
Specific files:
- _app.js: Initializes pages in NextJS
- [[...slug]].js: Uses dynamic routes based on Storyblok information. The catch-all route handler runs before any page.
- styles/colors.scss: Contains CSS color variables
Code examples:
pages/_app.js: maps Storyblok component names to Next.js component names
pages/[[...slug]].js: responsible for executing for every URL request to the site and includes three important methods:

  - getStaticPaths: gets all possible paths for the server-side rendering of pages
  - getStaticProps: retrieves data from the CMS needed for the current page

components/genericComponents/Person/Person.js: Displays person information, including experience. Uses storyblokEditable to support real-time editing in Storyblok.
components/genericComponents/Experience/Experience.js: Displays experience information. Uses RichTextToHTML to handle rich text content from Storyblok, making the code snippet dynamically generate HTML.

Environment Variables

.env.local: Contains sensitive information like API keys, preview secret key, and deployment URL
STORYBLOK_API_KEY: Allows connection to the Storyblok CMS
STORYBLOK_PREVIEW_SECRET: Used for previewing the site within Storyblok
NEXT_PUBLIC_DEPLOY_URL: URL to the site after deployment

Deployment to Vercel

Deploy the project to Vercel using the deployment button
Set the environment variables in Vercel settings before deploying
Now the site will be accessible online.

Additional Notes

npm run build: Builds the site for production.
Deployment hooks and webhooks can be used to automatically rebuild the website when changes are made in Storyblok.
If environment variables aren't correctly configured, the site may not function correctly.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Test your knowledge on Node.js, CSS, and related tools with this quiz. Answer questions related to file types, environment variables, and key functionalities of Node.js and its package manager NPM. Ideal for developers and those learning web technologies.