DEV Community: luke9kim8

Bits of Good Bootcamp Lecture 3: JavaScript

luke9kim8 — Tue, 14 Sep 2021 04:21:02 +0000

So far you have been practicing with HTML and CSS to build simple static web pages. However, most websites (or web apps) are more dynamic. Today, we will take our first step to make our websites dynamic using JavaScript.

Unfortunately, before we could start using JavaScript on browsers, we need to go over the basics. This lecture will focus on helping you to get comfortable with the JavaScript syntax and get ready to apply it on your HTML/CSS web pages in the next lecture.

Language Overview

Here are some things you should know about JavaScript. First, JavaScript is loosely typed, meaning you don’t have to specify the exact type for variables and functions you use. Every modern browser should have some sort of JavaScript Engine that can run your JavaScript code. (include an image of browser - js engine)

However, JavaScript can also be used as a server side language to build backend APIs. This means that you don’t have to depend on your browser to run your JavaScript. You can just run it on your computer and Node.js will act as the JavaScript engine. You can install Node.js from here https://nodejs.org/en/download/.

For Windows people, pay attention to where you install your applications like Node.js, Git, Python, etc. Windows installers do not add your installed programs to path directly, which might give you an error when you try to run it on the command line. They will most likely be installed at C:/Users/[your name]/Program Files. If you ever get an error trying to run an application x, consider googling “How to add x to PATH Windows”.

Let’s get started! Open up your VS Code and create a new file called lecture3.js

Hello World

Like all programs, we first start with Hello World. To print a line to the console, you would use console.log("Hello World");.

// lecture3.js
// On your terminal or cmd, run "node lecture3.js"

console.log("hello world");

Declarations

You don't have to explicitly declare the type of the variable like Java or C++ with JavaScript. However, it has its own keywords, which note the scope and the mutability of the variable. These keywords are const, let, and var.

const

When you don't want to change the variable's assignment, you use const. Once the variable is declared as const, you cannot change or reassign it!

const pixar = "Cars";
pixar = "Ratatouille";     // Illegal! Can't reassign!
const pixar = "Coco";      // Illegal! Cant' redeclare!

var

var used to be the default declaration for most variables. Any variables that are declared with the var keyword can be updated.

var x = 10;        // After initializing x,
if (x > 0) {
    x = 20;        // You can update it b.c. x is declared with var
}

But people don't use var anymore! That is because var is function scoped. As long as it is declared in a function, it can be accessed/updated/reassigned within the function.

var x = 10;
var x = 20;

if (x > 10) {
    var y = "I live in `if` block!";
}
console.log(y);    // This is totally legal with var!

let

let was introduced on ES6 to replace some of var's quirks. Unlike var, let is block scoped. This means the above example would be illegal with let because y is bounded within the if block. If you try to access it outside of its scope, you will get a reference error.

let x = 10;
let x = 20;        // Illegal! Syntax Error! Already declared!

if (x > 10) {
    let y = "I live in `if` block!";
}
console.log(y);    // Illegal! Reference error!

Conclusion

When in doubt, use let over var to avoid breaking your code

Before we move onto other JS topics, I'd like to quickly note a unique behavior of const objects and arrays. While you can't reassign a const object and arrays with new instances, you can modify its attribute or add new elements to it.

When you declare a variable const x = ["hello", "world"], you are assigning the reference to the array. This might confuse new programmers, but for now understand that modifying the values of const objects and array is possible.

// Arrays
const array = [1,2,3,4];
array[0] = -1;            // OK!
array.push(5);            // OK!
array = [4,5,6,7];        // Not OK! This is reassigning!

// Objects
const teacher = {
    name: "Mr. Hendrix",
    subject: ["Math", "Physics"]
    age: 29
}

teacher.age = 30;                            // OK!
teacher.subject = ["Calculus", "Chemistry"]  // OK!

Strings

In JavaScript, Strings are immutable. This means you cannot modify any character of the string or append another string to it.

Objects

Objects in Java

Functions

Arrays

Using documentToReactComponents with options

luke9kim8 — Tue, 11 May 2021 03:34:11 +0000

There are many tutorials on how to use Next.js with Contentful, but not a lot talk about how to render rich text files(RTF) with images. In this post, I'll talk about how to render RTFs with images by passing in an option to documentToReactComponents.

Problem

Here is a sample blogpost that I want to publish on my personal website.

Contentful offers documentToReactComponents function to render its rich text file fields. Install rich-text-react-renderer via npm install @contentful/rich-text-react-renderer.

To use documentToReactComponents, first import it in your component. Then, pass in the rich text file field you fetched from Contentful using client.getEntries().

import {documentToReactComponents} from '@contentful/rich-text-react-renderer'

export async function getStaticProps({params}) {
  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_KEY
  })
  const res = await client.getEntries({content_type: 'blogpost'})
   return {
     props: {
       blogposts: res.items
     }
   }
}

In my example, I call client.getEntries() in getStaticProps and call documentToReactComponents in the Blog component JSX. blogpost.fields.blogContent is my rich text file field.

const Blog = ({blogposts}) => {
  return (
    <div>
      <h1>Blog</h1>
      {blogposts.map(blogpost => (
        <div>
          <h1>{blogpost.fields.title}</h1>
          <div>{documentToReactComponents(blogpost.fields.blogContent)}</div>
        </div>
      ))}
    </div>
  )
}

This should render some data on your app, but not all of them. In my situation, I don't see any images despite I embedded them in my RTF.

Solution

To solve this, we need to specify how to render these embedded data. We can do this by passing a second renderOption parameter to documentToReactComponents.

renderOption is just an object with a renderNode key. The value associated with renderNode is an object specifying how to render the content on the RTF.

const renderOption = {
  renderNode: {
    [BLOCKS.EMBEDDED_ASSET]: (node, children) => {
      return (<Image
        src={`https:${node.data.target.fields.file.url}`}
        height={node.data.target.fields.file.details.image.height}
        width={node.data.target.fields.file.details.image.width}
      />)
    }
  }
}

The keys of renderNode specify different types of content (like heading 1, paragraphs, or embedded assets), and the values specify the functions that transform the content to the format we want. This transformation function takes in two parameters: node and children. The node refers to the node itself while the children refers to children node of the specified content.

Helpful resources where I got all of these from

Rendering linked assets and entries in the Contentful Rich Text field by Salma Alam-Naylor
Contentful Strategies: How To Render RichText by Stefan Judis