November 10, 2025 at 11:07 PM EST
Migrating frontend notes
November 10, 2025 at 11:07 PM EST
Migrating frontend notes
Break through the unoptimal dialogue in your mind and outwork your self-doubt consistently.
I won’t be a wimp.
From Robin Williams’s Non-Designer’s Design Book:
Black and White
Fonts
I use Gabarito for this site, and the font exists in my public folder:
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<--->]
mx-auto mt-5
Convention of adding variables to :root (refers to html)
:root matches the highest element in the DOM.
If it’s not looking the way you want:
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);
[1,2,6,7,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
Hoisting
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();
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.
Basics:
window in frontmatter)client:* for interactivity (hydration). When your website runs, Astro can help you run React components
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();
});
[Object: null prototype] [Module] { frontmatter: [Getter], file: [Getter], url: [Getter], rawContent: [Getter], compiledContent: [Getter], getHeadings: [Getter], Content: [Getter], default: [Getter] },
}
No comments on this post yet. Be the first to share your wisdom :).