Frontend Fun

November 10, 2025 at 11:07 PM EST

Migrating frontend notes

programming

Intro

Break through the unoptimal dialogue in your mind and outwork your self-doubt consistently.

HTML and CSS

P.A.R.C Framework

I won’t be a wimp.

From Robin Williams’s Non-Designer’s Design Book:

• Proximity - Group related items together
• Alignment - Create visual connections
• Repetition - Strengthen unity and consistency
• Contrast - Create visual interest and hierarchy

Colours

Black and White

Animatable Properties

Fonts

I use Gabarito for this site, and the font exists in my public folder:

1. public -> fonts
2. styles -> fonts.css
3. global.css -> imports font.css

CSS Syntax

Box-shadow: You can put as many as you want.  

box-shadow: color offset-x offset-y blur-radius;

Media Queries

@media (min-width: 600px) { } /* Apply when viewport ≥ 600px */
@media (max-width: 800px) { } /* Apply when viewport ≤ 800px */

Margin

margin: A , TB LR , T LR B, T R B L
margin: 0 auto # centering [<--->Element Width<--->]

Convention of adding variables to :root (refers to html)

:root matches the highest element in the DOM. 

Debugging

If it’s not looking the way you want:

• Check imports, inline styles, Tailwind classes. Can you really override that style (!important loses Javascript inline style)?
• Did you specify a width, height, padding? Headings come with their own margins.
• You can use inset, line-height as crazy glue.
• Account for all breakpoints: If you change one property at a selected screen size, you have to account for it on others.
• Try grid instead of flex.

JavaScript

Useful stuff

Arrow functions

d => d.id
function id(d) {
    return d.id
}

Template literals & object Access

const x = { message: { username: "Kangi", text: "Breathe" } };
console.log(`${x.message.username}: ${x.message.text}`);

RNG

let range = 11 
const randomInt = Math.floor(Math.random() * range);

Copying arrays

let original = ["Oyakodon", "Saba no Misoni", "Gyusuji"]
const copy1 = Array.from(original, x => x);
const copy2 = [...original];

Splicing

What does this log?

// array.splice(start, deleteCount, item1, item2);
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 6, 7, 4, 5); 

Fill & From

a = Array(4).fill("entry");
// {length: 3 } is an array-like object
b = Array.from({ length: 3 }, (_, i) => `Team ${i + 1}`);

Every

[1, 3, 5].every(n => n % 2 !== 0); // true
["a", "b", ""].every(s => s.trim() !== ''); // false

Entries

// Object.entries captures m1 and m2 which you map over.
let messages = { m1: ["Conquer", "The"], m2: ["Terminal"] };
Object.entries(messages).map(([key,value]) => {
    console.log(key)
    console.log(value)
})

Map

let teams = { team: ["Joe", "Banaya", "Osroene", "Edessa"] };
teams.team.map((member) => {
  console.log(member);
});

Arrow Functions vs Regular Functions

this

• Function: What calls it.
• Arrow: What’s around it.

Hoisting

• Call functions from anywhere

Examples

// Arrow function - lexical `this`
// A lexical 'this' is one that inherits it from the surrounding scope
const App = () => <div>Content</div>;

// Regular function - can be called before declaration
function App() { return <div>Content</div>; }

const obj = {
  name: 'MyApp',
  arrowFunc: () => console.log(this.name),    
  regularFunc() { console.log(this.name); }  
};

obj.arrowFunc()    // undefined
obj.regularFunc()  // 'MyApp'

The anonymous function’s this here points to the outside, surrounding one.

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}
new Timer();

React

Basics: Render and Commit and useEffect.

State Updates

// Functional state update with previous state
setItems(prevItems => [...prevItems, newItem]);

You can also review the repos for Gameok and Grid Diary.

Astro

Basics:

• Build time: Prepare everything to be shipped to the browser
• Run time: It’s on the browser

Key Concepts

• Browser APIs only work client-side (no window in frontmatter)
• At build time, components render to HTML/CSS by default (no client JS)
• Use client:* for interactivity (hydration). When your website runs, Astro can help you run React components

Applications

Check out: meta.glob

// allPosts will look like this with eager: true
/*[
    [Object: null prototype] [Module] {
    frontmatter: [Getter],
  },
  ...
  ]
*/

// I can include what I need
type AstroPost = {
  frontmatter: {
    pubDate: string;
	tags: string[]
   
  };
  
};

const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })) as AstroPost[];
const tags = [...new Set(allPosts.map((post: AstroPost) => post.frontmatter.tags).flat())];
const sortedPosts = allPosts.sort((a: AstroPost, b: AstroPost) => {
  const dateA = new Date(a.frontmatter.pubDate);
  const dateB = new Date(b.frontmatter.pubDate);
  return dateB.getTime() - dateA.getTime();
});

Resources

Combinators

Typescale

Easing Graphs

Realtime Colors

Gradients

CSS Scan

React Docs

Share your wisdom