DOCSEARCHbyAlgolia
Submit Docs

PG of Code: Coding Notes, Essays, and Experiments

website·Indexed 29 days ago

https://pgofcode.co.za

A technical blog and knowledge base by Nadia featuring coding notes on JavaScript (data types, functions, strings, and numbers), HTML fundamentals, and semantic HTML. The site includes technical walkthroughs of AI-driven applications like That Tech Girl, guides on deploying Astro apps via Cloudflare Pages, and essays on the intersection of AI and software engineering skill development.

Tokens
17.3K
Snippets
125
Records
144
Agent score
47%

What's inside PG of Code

  1. Implement a standard HTML boilerplate

    A standard HTML document requires a boilerplate structure to inform the browser about the file's encoding, viewport settings, and external resources. Key components include the <!DOCTYPE html> declaration, the <html> wrapper with a lang attribute, and the <head> section for metadata.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Browser tab name</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
  </body>
</html>

  2. Architectural overview of the That Tech Girl app

    The application combines several layers to create a stable AI-driven experience:

    • Static Seed Layer: Provides the core structure/spine of the app.
    • Deterministic Logic: Manages the daily schedule.
    • Local Storage: Provides persistent memory for the user interface.
    • Backend Routes: Securely handles AI API calls and keeps secrets out of the browser.
    • Structured Prompts: Constrains AI output into UI-shaped data.
    • Caching: Stabilizes AI output to prevent random churn in the daily experience.
    • Service Worker & Manifest: Enables app-like installation and behavior.

  3. Understand JavaScript's dynamic typing

    JavaScript is a dynamically typed language. This means you do not need to declare the data type of a variable explicitly, and a single variable can be reassigned to values of different data types during execution.
    let example = "Hello"; // Initially a string
example = 42;           // Now a number

  4. Understand and define agent skills

    Agent skills consist of instructions, scripts, and reference materials provided to AI agents to enable them to perform specific tasks or follow particular operational guidelines.

  5. Use semantic HTML core elements for page structure

    Avoid using generic <div> elements when a semantic alternative exists. Semantic elements describe their content, which improves SEO and accessibility for screen readers.
    <header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>
<main>
  <section>
    <article>
      <!-- Blog post content -->
    </article>
    <figure>
      <img src="image.jpg" alt="Description">
      <figcaption>Caption for the image</figcaption>
    </figure>
  </section>
</main>
<footer>
  <address><!-- Contact information --></address>
</footer>

  6. Style HTML links using CSS pseudo-classes

    Links have different states that can be styled using CSS pseudo-classes. For best results, style rules should be defined in the following order to ensure correct override behavior:

    1. :link - The default state of an unvisited link.
    2. :visited - A link the user has already clicked.
    3. :hover - When the mouse cursor is over the link.
    4. :focus - When the link is selected via keyboard (Tab key).
    5. :active - The moment the link is being clicked.
    a:visited {
  color: brown;
}

  7. Declare and call basic JavaScript functions

    Functions are declared using the function keyword. They can take inputs (parameters), perform operations, and return a result. To execute the function, use the function name followed by parentheses.
    function greet() {
    console.log("Hello!");
}

greet();

  8. Use semantic HTML for tables and form inputs

    To ensure accessibility in tables, use the scope attribute within <th> elements to define whether a header applies to a row (scope="row") or a column (scope="col"). For form inputs, always associate a <label> element with its corresponding input using the for attribute matching the input's id.

  9. Extract values using array destructuring

    Array destructuring allows for concise variable assignment from arrays. You can skip elements using commas, provide default values for missing elements, and use the rest syntax (...) to capture all remaining elements into a new array.
    let fruits = ["apple", "banana", "orange", "mango", "kiwi"];

// Basic destructuring and skipping elements
let [first, , third] = fruits; // first="apple", third="orange"

// Default values
let [a, b, c = 3] = [1, 2]; // a=1, b=2, c=3

// Rest syntax
let [one, two, ...rest] = fruits; // rest=["orange", "mango", "kiwi"]

  10. Update or add elements to an array by index

    To update a value, assign a new value to a specific index. To add a new element, assign a value to an index that doesn't exist yet. Note: If you assign a value to an index significantly beyond the current length, JavaScript fills the intervening indices with undefined.
    let fruits = ["apple", "banana", "cherry"];

// Update existing value
fruits[1] = "blueberry";

// Add new element at the end
fruits[3] = "date";

console.log(fruits); // ["apple", "blueberry", "cherry", "date"]

  11. Declare and initialize variables using let and const

    Variables are containers for data.

    • Use let for variables that may need to be reassigned. They can be declared without an initial value (defaulting to undefined).
    • Use const for variables that should not be reassigned. A const variable must be initialized with a value at the time of declaration.
    • Avoid using var as it is no longer recommended due to its wider scoping rules which can cause bugs.

    Naming conventions: Use camelCase. Names can start with _ or $, but never a number.

    // let: allows reassignment
let age = 25;
age = 30;

// const: prevents reassignment
const maxScore = 100;
// maxScore = 200; // This would throw an error

// Declaration without initialization (undefined)
let userCity;

  12. Implement form buttons

    Buttons can be created using the <button> element or <input type="button">. The <button> element is preferred because it can contain child nodes like icons or images.

    Button Types:

    • submit: Sends form data to the server.
    • reset: Clears all fields in the form.
    • button: A neutral button with no default behavior, typically used with JavaScript.
    <button type="submit">Submit form</button>
<button type="reset">Reset form</button>
<button type="button" onclick="alert('Hello!')">Show alert</button>