DEV Community: Shawn(Heongi) Yeo

Javascript object - Object Literal and Constructor

Shawn(Heongi) Yeo — Thu, 28 Sep 2023 22:21:38 +0000

In This article, we will cover what is object literal and constructor.

Lets dive in !

object literal

object literal Syntax

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

const person = {
    name: ["Bob","Smith"],
    age: 32,
    bio: function () {
        console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
    },
    introduceSelf: function () {
        console.log(`Hi! I'm ${this.name[0]}`)
    }
}

We can replace the function syntax like this

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

This type of object creation is called object literal, This syntax is useful when we want to transfer a series of structured, related data items.

dot notation

we can access or set object's property and method using dot notation.

Eg, In our person's object

Access

console.log(person.name); 
//results  ["Bob", "Smith"]

person.bio(); 
//results  Bob Smith is 32 years old

Setting

person.name = ["Shawn", "Yeo"]
console.log(person.name);
//["Shawn", "Yeo"]

person.run = () => {console.log("I am running")}
person.run();
//I am running

Bracket notation

we can also use bracket notation to access and set property of our object.

Access

const name = person["name"]

//set
person["name"] = ["shawn", "yeo"]

Normally dot notation is preferred over bracket notation, however if object property name is held in variable you can use bracket notation to access the value.

const person = {
  name: ["Bob", "Smith"],
  age: 32,
};

function logProperty(propertyName) {
  console.log(person[propertyName]);
}

logProperty("name");
// ["Bob", "Smith"]
logProperty("age");
// 32

constructors

object literal is useful when you quickly need a related data to be passed over but when we need a shape of object to be recreate over and over, we use constructor.

constructor syntax

function Person(name) {
  this.name = name;
  this.introduceSelf = function () {
    console.log(`Hi! I'm ${this.name}.`);
  };
}

//creating person object using contructor
const person_1 = new Person("shawn");
const person_2 = new Person("johna");

By convention, constructor start with a capital and when we create instance of an object we use key word new

Thank you for reading ! we have covered concepts of Object literal, how we could access and set the values using dot notation and bracket notation. And how to use constructor to create object shape and the instance of an object.

Reference
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics

what is CSR , SSR ,SSG, ISR

Shawn(Heongi) Yeo — Sat, 05 Aug 2023 12:12:26 +0000

Client Side Rendering(CSR)

If you used React before you would have heard acronym CSR short for Client side rendering. Client side rendering means that our browser is responsible for creating a full interactive web pages.

CSR follows following step to generate the page.

1) Client request for a page.
2) Server serves an empty html file along side with javascript and css
3) Client runs javascript code and renders the page and fetch necessary data to build the page.
4) Client output full page to a user.

CSR provides an APP like experience and provides high quality of user interactivity. However, CSR initially serve an empty html file which makes it hard for web crawlers to know what content the page has and thus bad for SEO. CSR is a good option for an application that doesn't concern about SEO and prioritize a smooth user experience.

Server Side Rendering(SSR)

In server side rendering, the web page is rendered on the server on every clients request.

1) Client request for a page
2) Server runs Javascript code and fetches data and Renders the page.
3) Server serves Client with Fully rendered page.

Server Side Rendering offers good SEO and data is always up to date as page is built on the server on every request. SSR can be a great option for E-commerce as data is frequently updated in E-commerce websites.

Static Site Generation(SSG)

Static site Generation in other hand, already has web page built in built time. When client request for a page from a server, server simply serves built page. This offers fast load time and also these static files can be cached which offers even faster load time. However, SSG is not so good for website that frequently updates because the page needs to be built again for updated contents. If you are looking to build landing pages, marketing pages, Documentations that doesn't require frequent update, SSG will be the go to option.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration offers alternative to SSG if you require an update in your static page. ISR re-validates the static page periodically and updates the static files. This could be really handy if you want advantages of SSG but still want updated contents.

Dark Mode Tailwind & React (No flashing!)

Shawn(Heongi) Yeo — Sat, 05 Aug 2023 11:08:23 +0000

Initial Set up

First Lets set up our initial Project.

git clone https://github.com/hyeo151/Darkmode-Tutorial-React-Tailwind.git

cd Darkmode-Tutorial-React-Tailwind

npm install

npm run dev

When you start your server,you will either see light mode or dark mode depending on your OS color preference.

Light Mode

Dark Mode

By default tailwind uses prefers-color-scheme CSS media feature to enable Dark mode.

Class Strategy Set up

If we wish to add Dark mode which can be toggled by a user we can use class strategy

Go to tailwind.config.js and add darkMode: 'class'

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
};

Now we can add darkmode by simply adding class="dark" in our html element in index.html like this,

enables dark mode
<html lang="en" class="dark">

disable dark mode
<html lang="en" class="">

Dark Mode Logic

Now that we have set up class Strategy in our project let's add our logic for dark mode.

First we will add following script in our index.html in head element. Add this script before any other scripts or links.

<script>
      const initialTheme =
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches);
      if (initialTheme) {
        window.document.documentElement.classList.add("dark");
      }
</script>

Script like this is called Render-blocking resources which prevents a web page from loading quickly. However we use this method as opposed to using useEffect hook to avoid flashing

This Script instruct following,

[if local storage theme variable is dark]
OR
[if theme variable doesn't exist in local storage AND OS preference is dark]
THEN set our page as dark mode.

This script will load correct mode on initial page load.

Now Let's add darkTheme state for our project.
Go to App.jsx and declare darkTheme state.
We can use initialTheme that we declared previously and use it as our initial state.

const [darkTheme, setDarkTheme] = useState(initialTheme);

and we show icon according to our darkTheme state

{darkTheme ? (
  <i className="fa-solid fa-sun"></i>
) : (
  <i className="fa-regular fa-moon"></i>
)}

then we add clicked button which to toggle this state.

onClick={() => {
  handleThemeSwitch(setDarkTheme);
}}

Define function handleThemeSwitch

const handleThemeSwitch = (setDarkTheme) => {
  if (document.documentElement.classList.contains("dark")) {
    document.documentElement.classList.remove("dark");
    localStorage.theme = "light";
    setDarkTheme(false);
    return;
  }
  localStorage.theme = "dark";
  document.documentElement.classList.add("dark");
  setDarkTheme(true);
};

Final Code will look like this,

import { useState } from "react";
import "./App.css";

const handleThemeSwitch = (setDarkTheme) => {
  if (document.documentElement.classList.contains("dark")) {
    document.documentElement.classList.remove("dark");
    localStorage.theme = "light";
    setDarkTheme(false);
    return;
  }
  localStorage.theme = "dark";
  document.documentElement.classList.add("dark");
  setDarkTheme(true);
};

function App() {
  const [darkTheme, setDarkTheme] = useState(initialTheme);
  return (
    <div className="max-w-md rounded-md bg-slate-200 p-5 dark:bg-slate-300/80">
      <h1 className="mb-2 text-xl font-bold">Tailwind Dark/Light Mode</h1>
      <p className="mb-4">
        In this tutorial we will be learning how to enable dark mode for your
        tailwind react website/app
      </p>
      <button
        className="rounded-md bg-slate-500 px-5 py-1 font-bold"
        onClick={() => {
          handleThemeSwitch(setDarkTheme);
        }}
      >
        <div className="moon">
          {darkTheme ? (
            <i className="fa-solid fa-sun"></i>
          ) : (
            <i className="fa-regular fa-moon"></i>
          )}
        </div>
      </button>
    </div>
  );
}

export default App;

Now whenever user click on the switch button we can switch the dark mode.

If you get stuck you can check out the solution branch

git checkout solution

Thank you for reading!

If you liked this post please like, comment and share.
Ask questions in comment section : )