paulwongx

Object Oriented Programming

SOLID Principles

• Single Responsibility Principle (SRP)
• Open/Closed Principle (OCP)
• Liskov Substitution Principle (LSP)
• Interface Segregation Principle (ISP)
• Dependency Inversion Principle (DIP)

paulwongx

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

paulwongx

Git Commands

# Checking out a new branch
git checkout -b <branch-name>
git checkout -b feature/my-feature

# Commiting a branch
git add .
git commit -m "Your commit message here"
git push origin <branch-name>

paulwongx

<div class="flex h-screen w-full flex-col bg-green-50">
  <div class="h-[72px] w-full bg-green-100">Header</div>

  <div id="body" class="flex flex-row">
    <div id="sidebar" class="flex-0 scrollbar h-[calc(100vh-72px)] w-64 bg-green-200 flex flex-col">
      <div id="top-sidebar" class="flex flex-col bg-red-50">
        <div>Menu 1</div>
        <div>Menu 2</div>
        <div>Menu 3</div>
      </div>

paulwongx

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:GetObjectAcl",
                "s3:GetObject",
                "s3:DeleteObject",

paulwongx

Turborepo

Creating a new app with tailwindcss

1. cd apps
2. npx create-next-app@latest
3. Add globals.css inside apps
4. Change .eslintrc.json to .eslintrc.js

module.exports = {
  root: true,

paulwongx

postgreSQL commands

Source: https://www.youtube.com/watch?v=qw--VYLpxG4

List databses

\l

Create database

paulwongx

// This file adds coloring to the announcements to make it easier to read and understand what's going on

import {
  DragCancelEvent,
  DragEndEvent,
  DragMoveEvent,
  DragOverEvent,
  DragStartEvent,
  useDndMonitor,
} from "@dnd-kit/core";

paulwongx

# Creating a next app from example template
# All examples: https://github.com/vercel/next.js/tree/canary/examples
yarn create next-app -e app-dir-mdx .

paulwongx

"use client"
import React, { useState, SetStateAction, Dispatch } from "react";
import { Color, colors } from "@/types"
import { useIsomorphicLayoutEffect } from "usehooks-ts";

interface ThemeContextProps {
  theme: Color;
  setTheme: Dispatch<SetStateAction<Color>> | null;
}