Developer Toolbox

// ── Variables & types ──
let count = 5;                 // block-scoped, reassignable
const PI = 3.14159;            // block-scoped, constant
typeof count;                  // "number"; also: string, boolean, object, undefined, bigint

// ── Strings ──
const name = "Justin";
`Hello ${name}, 1 + 2 = ${1 + 2}`      // template literal (backticks)
"abcdef".length                        // 6
"abc".toUpperCase() .includes("b") .slice(0, 2) .split(",")

// ── Arrays ──
const a = [1, 2, 3];
a.push(4);  a.pop();  a.shift();  a.unshift(0);
a.map(x => x * 2)                      // [2, 4, 6]  transform each
a.filter(x => x > 1)                   // keep matching
a.reduce((sum, x) => sum + x, 0)       // fold to one value
a.find(x => x > 1)  a.includes(2)  a.sort((p, q) => p - q)

// ── Objects, destructuring, spread ──
const user = { name: "J", age: 30 };
const { name: n, age } = user;         // pull fields out
const copy = { ...user, admin: true }; // shallow copy + extra field

// ── Functions ──
function add(a, b = 0) { return a + b; }   // default parameter
const mul = (a, b) => a * b;               // arrow function

// ── Control flow ──
if (x > 0) { } else if (x === 0) { } else { }     // === checks type too
for (let i = 0; i < 10; i++) { }
for (const item of list) { }               // values
while (x > 0) { x--; }

// ── Classes ──
class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}
class Dog extends Animal {
  speak() { return "Woof"; }               // override
}

// ── Async / await ──
const res = await fetch("/api/data");
const data = await res.json();
try { await risky(); } catch (err) { console.error(err); }

// ── DOM ──
const el = document.querySelector("#id, .class, tag");
el.addEventListener("click", (e) => { /* ... */ });
el.textContent = "hi";  el.classList.toggle("dark");

// ── Program skeleton ──
#include <iostream>
#include <string>
#include <vector>
using namespace std;

int main() {
    // ── Variables & types ──
    int n = 42;  double d = 3.14;  bool ok = true;
    char c = 'A';  string s = "hello";
    const int MAX = 100;           // constant
    auto total = n * 2;            // compiler deduces type

    // ── Input / output ──
    cout << "Enter a number: ";
    cin >> n;
    cout << "You typed " << n << endl;

    // ── Control flow ──
    if (n > 0) { } else if (n == 0) { } else { }
    for (int i = 0; i < 10; i++) { }
    while (n > 0) { n--; }
    switch (c) { case 'A': break; default: break; }

    // ── Vectors (dynamic arrays) ──
    vector<int> v = {3, 1, 4};
    v.push_back(1);                // append
    v.size();  v[0];  v.at(0);     // .at() bounds-checks
    for (int x : v) cout << x;     // range-based for
    return 0;
}

// ── Functions ──
int add(int a, int b = 0) { return a + b; }        // default arg
void swapRef(int &a, int &b) { int t = a; a = b; b = t; }  // pass by reference

// ── Classes ──
class Animal {
public:
    Animal(string n) : name(n) {}                  // constructor + init list
    virtual string speak() { return name + " makes a sound"; }
private:
    string name;
};
class Dog : public Animal {                        // inheritance
public:
    Dog(string n) : Animal(n) {}
    string speak() override { return "Woof"; }
};

// ── Pointers & references ──
int x = 5;
int* p = &x;      // p holds the address of x
*p = 7;           // dereference: x is now 7
int& r = x;       // reference: alias for x

// ── Compile & run ──
// g++ -std=c++17 main.cpp -o main && ./main

# ── Variables & types (dynamic) ──
n = 42;  pi = 3.14;  ok = True;  s = "hello"
type(n)                      # <class 'int'>

# ── f-strings ──
name = "Justin"
print(f"Hello {name}, 1 + 2 = {1 + 2}")

# ── Lists, tuples, dicts, sets ──
nums = [3, 1, 4]
nums.append(1);  nums.sort();  len(nums)
point = (3, 4)                        # tuple: immutable
user = {"name": "J", "age": 30}       # dict
user["name"];  user.get("email", "n/a")
seen = {1, 2, 3}                      # set: unique items

# ── Slicing ──
nums[0]  nums[-1]  nums[1:3]  nums[::-1]   # last one reverses

# ── Control flow (indentation matters!) ──
if n > 0:
    ...
elif n == 0:
    ...
else:
    ...
for x in nums:  print(x)
for i, x in enumerate(nums):  ...          # index + value
while n > 0:  n -= 1

# ── Comprehensions ──
squares = [x**2 for x in range(10) if x % 2 == 0]
lookup  = {x: x**2 for x in range(5)}

# ── Functions ──
def add(a, b=0, *args, **kwargs):
    """Docstring: what this function does."""
    return a + b

# ── Classes ──
class Animal:
    def __init__(self, name):
        self.name = name
    def speak(self):
        return f"{self.name} makes a sound"

class Dog(Animal):                    # inheritance
    def speak(self):
        return "Woof"

# ── Files & errors ──
with open("data.txt") as f:           # auto-closes the file
    text = f.read()
try:
    risky()
except ValueError as e:
    print(e)

# ── Run ──
# python3 script.py
# venv: python3 -m venv .venv && source .venv/bin/activate

<!-- ── Page skeleton ── -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ── Text ── -->
  <h1>Heading 1</h1>  ...down to h6
  <p>Paragraph with <strong>bold</strong>, <em>italic</em>, <code>code</code></p>
  <a href="https://example.com" target="_blank">Link</a>
  <img src="photo.jpg" alt="Describe the image" width="300">

  <!-- ── Lists & tables ── -->
  <ul><li>Bullet item</li></ul>
  <ol><li>Numbered item</li></ol>
  <table>
    <tr><th>Header</th></tr>
    <tr><td>Cell</td></tr>
  </table>

  <!-- ── Semantic layout (use instead of div where possible) ── -->
  <header> <nav> <main> <section> <article> <aside> <footer>

  <!-- ── Forms ── -->
  <form action="/submit" method="post">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
    <input type="checkbox">  <input type="radio">  <input type="number">
    <select><option>One</option></select>
    <textarea rows="4"></textarea>
    <button type="submit">Send</button>
  </form>

  <script src="app.js"></script>
</body>
</html>

/* ── Selectors ── */
p { }                /* every <p> element */
.card { }            /* class="card" */
#main { }            /* id="main" */
.card > p { }        /* direct child only */
.card p { }          /* any descendant */
a:hover, input:focus, li:first-child { }   /* pseudo-classes */

/* ── Box model (outside → in: margin, border, padding, content) ── */
.box {
  margin: 16px;              /* space outside the border */
  border: 1px solid #ccc;
  padding: 12px;             /* space inside the border */
  box-sizing: border-box;    /* width includes padding + border */
}

/* ── Flexbox: one-dimensional layout ── */
.row {
  display: flex;
  justify-content: space-between;   /* main axis */
  align-items: center;              /* cross axis */
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Grid: two-dimensional layout ── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* three equal columns */
  gap: 16px;
}

/* ── Positioning ── */
/* static (default) · relative · absolute · fixed · sticky */
.badge { position: absolute; top: 0; right: 0; }
/* absolute positions against the nearest non-static ancestor */

/* ── Custom properties (variables) ── */
:root { --brand: #2ecc71; }
.btn  { background: var(--brand); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .row { flex-direction: column; }
}

/* ── Units ── */
/* px fixed · % of parent · rem multiple of root font size · vw/vh % of viewport */