My Coding Notebook

Light ← → Dark

Cat icons created by Freepik - Flaticon

Collapse All

Command Line Stuff

Basic commands

  1. ls: lists the files in the curent folder (list segment)

    $ ls

    README.txt tester.txt

  2. pwd: shows the current folder (print working directory)

    $ pwd

    /c/Users/USERNAME/Documents/coding-projects/notebook

  3. Ctrl + c: exits a process

    $ ctrl + c //keyboard command

Create Files

  1. touch: creates a new file without editing it

    $ touch newfile.txt

  2. echo: creates a file and adds text to it or appends text to an existing file. (write and overwrite is >, append is >>)

    $ echo "Here's some text." > newfile.txt

    $ echo "And here's some new text." >> newfile.txt

  3. cat: creates a file and allows adding text to it to happen directly in the terminal following. (Exit with Ctrl + D.) Also shows a files contents.

    $ cat > this-makes-a-new-file.txt

    I'm adding text now...|

     

    $ cat this-displays-its-contents.txt

    This is its contents.

  4. sed: adds new text to a specific line in a file

    $ sed -i '2a Here's some text for after line 2.' newfile.txt

Miscellaneous

  1. mkdir: makes a new folder

    $ mkdir newFolder

  2. code: opens a file in VSCode

    $ code index.html

CSS Stuff

Boiler plate

  1. Remove existing formatting

    *{

      padding: 0;

      margin: 0;

      box-sizing: border-box;

    }

Misc

  1. (1/2) Object fit: to do object fit and position, you have to define both width AND height.

    .my-image-container img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      object-position: left center; /*horizontal vertical*/

    }

  2. (2/2) The container for the image can be styled to create a banner effect.

    .my-image-container {

      overflow: hidden;

      width: 100%;

      height: 300px;

      background-color: var(--color);

      opacity: 0.7;

    }

  3. Making a triangle: define three borders, two transparent and one of the color you want. Width and height should be 0.

    .triangle {

      width: 0;

      height: 0;

      border-top: 50px solid black;

      border-left: 50px solid transparent;

      border-right: 50px solid transparent;

    }

Javascript Stuff

Variable Declarations

  1. var: an old declarator (we use let instead)

    var aVarVar = "This is a variable";

  2. let: block level declarator that can be reassigned

    let aLetVar = "This is a variable that can change.";

  3. const: block level declarator that cannot be reassigned

    const aConstVar = "This is a variable that cannot change.";

Query Selectors

  1. querySelector: select the first occurence of a CSS element. (the identification symbol must accompany the name, i.e. "." or "#", etc.)

    const newVar = document.querySelector(".class1");

  2. querySelectorAll: select all the matching of a CSS class

    const newVarAll = document.querySelector(".class1");

  3. getElementById: best and most common way to select one element

    const anElem = document.getElementById("this-one");

  4. getElementsByClassName: gets a live HTMLCollection of all objects with a particlar class name

    const aClassList = document.getElementsByClassName("class1");

  5. getElementsByTagName: gets a live HTMLCollection of all objects with a particlar tag name

    const aTagList = document.getElementsByTagName("p");

React Stuff

Basics

  1. Images: In react, it is best practice to import images and not link them directly in the src attribute of the image.

    import myImageName from "./assets/myImageLinkPath.png";

     

    <img id="my-image" src={myImageName} alt="my image description" />

  2. Links: Internal links should use the react Link tag, while external links can use the regular anchor tag. I like to keep links in a link js file for less redundancy.

    import { links } from "./assets/myLinkBank";

     

    <a href={links.Link1} target="_blank">This is an externally pointing link.</a>

    <Link to={links.Link2} target="_blank">This is an internally pointing link.</Link>

Create a React-Vite Project

  1. From the command line (i.e. Git Bash), create a Vite React project and confrim.

    $ npm create vite@latest

    Okay to proceed? (y) y

  2. Enter the project name.

    ? Project name: project-name

  3. Select the React framework with arrow keys and press enter.

    ? Select a framework:

    Vanilla

    Vue

    React

    Preact

    Lit

    Svelte

    Others

  4. Then choose the language variant. I want to work in Javascript.

    ? Select variant:

    JavaScript

    TypeScript

    JavaScript + SWC

    TypeScript + SWC

  5. Enter the folder.

    $ cd project-name

  6. Install npm with "i" or "install" and then open in VS Code.

    $ npm i

    $ code .

  7. To run a live verson of the site, run the following code in the VS Code terminal (Open with shortcut Ctrl+Shift+` ), and click on the link created.

    > npm run dev

Routing

  1. The latest version of react-router-dom (as of 11.25.24) recommends the use of {createBrowserRouter} and {RouterProvider} instead of {BrowserRouter, Router, Routes}.

    import React from "react";

    import ReactDOM from "react-dom/client";

    import App from './App.jsx'

    import { createBrowserRouter, RouterProvider } from 'react-router-dom'

     

    const router = new createBrowserRouter([

      {path: '/', element: <App />}, // the location of the app is here

      {path: '/other-link', element: <SitePage />}, // other app pages go next

    ]);

     

    ReactDOM.createRoot(document.getElementById('root')).render(

    <React.StrictMode>

      <RouterProvider router={router} />

    </React.StrictMode>

  2. Links that are internal to the site need to be wrapped in <Link> tags and SHOULD NOT use anchor tags. "Key" replaces "id" and "to" replaces "href."

    <Link to="/other-page" key="other-pgae-id">Go to Other Page Now!</Link>

  3. External links are recommended to use anchor tags as usual as best practice.

Terminal

  1. npm run dev: run a live version of the site

    > npm run dev...|

  2. npm run build: build the deploy version of the site

    > npm run build

  3. Ctrl + c: to exit a build or dev run.

    > Do you want to exit (y/n)? y...|

  4. npx serve dist: run the build on a simulated server. Best to use a -s flag to emulate acutal routing.

    > npx serve -s dist...|

Vite Stuff

Set up Node JS on Vanilla

  1. To set up the vite build tools on a vanilla site, start with the npm init on the command line while in the project folder.

    C:\Users\USERNAME\Documents\Coding-Projects\your-app

    > npm init -y

  2. Then install the vite bundler.

    C:\Users\USERNAME\Documents\Coding-Projects\your-app

    > npm i vite (or npm install vite)

  3. Then install any packages or libraries as desired. For example clerk or bootstrap.

    C:\Users\USERNAME\Documents\Coding-Projects\your-app

    > npm i @clerk/clerk-js

    > npm i bootstrap@5.3.3

  4. It's a good idea to create scripts for dev, build, and serve in the package.json.

    // In package.json

     

    "scripts": {

      "dev": "vite",

      "build": "vite build",

      "serve": "vite preview"

    },

  5. Create a .gitignore file to add the node-modules folder to (and anything else as desired).

    // In .gitignore

     

    node_modules

    test.js

VS Code Stuff

Shortcuts

  1. rafce: to generate the boilerplate for a component.

    rafce...|

  2. clg: bring up console.log line.

    clg...|

    console.log(first);...|

  3. !: generate boilerplate html.

    !...|

    <!DOCTYPE html>

    <html lang="en">

    <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Document<title>

    </head>

    <body>

     

    </body>

    </html>...|

Git Stuff

Deploying

  1. To deploy, first commit any changes.

    > git commit -m "Put message here."

  2. Create a branch with no commit history from main branch and call it "deploy."

    git checkout --orphan deploy

  3. Remove everything except node_modules. Best done by hand.

    Removing node_modules causes an annoying error that is normal but I don't like it so don't do it. :P

  4. Copy the dist folder over to the deploy branch fromt he main branch.

    git checkout main -- dist

  5. Create a .gitignore file to prevent node_modules upload.

    // in .gitignore

    node_modules

  6. This branch can now be chosen as the deploy branch on your hosting site.