// notes/
Coding tips and build notes by Mahir Faysal, a student web developer in Bangladesh: tested Python, HTML, CSS, JavaScript and PHP tutorials, plus notes from my Next.js and Gemini projects. Sample posts are marked and drafts stay in the admin area.
// 01 · why
I forget what I understood last week unless I write it down. A note is that memory, published so I have to be clear. The topics are the same ones on the skills page: how a document is structured, how CSS decides where a box sits, how a small script reacts to a click, how PHP prints a value.
They are short on purpose. A long tutorial I cannot defend would be worse than a short note I can. If you are further along than I am, you will see the gaps. That is useful. The contact page is there if a sentence is wrong.
Notes from building Kinetica, a browser design and animation editor: one canvas renderer for editor, previews and exports, timeline keyframes and undo.
Read note
Describe the JSON once in Zod, send z.toJSONSchema() to Gemini as responseJsonSchema, then validate the reply with safeParse and retry once with the errors.
Step by step: a Gemini key from Google AI Studio in .env.local, a server-only helper, a Next.js route handler, Vercel environment variables and a leak test.
A small offline habit tracker in plain HTML and JavaScript: habits saved as JSON in localStorage, streaks from local dates, a 7-day row and a JSON backup.
A simple PHP math captcha in two functions: store the answer in the session, check it once with ctype_digit and ===, then add a honeypot and time check.
How I send contact form emails with PHP's built-in mail(): a fixed recipient, Reply-To, header injection checks, a UTF-8 subject and a fake sendmail.
A beginner async/await tutorial: async functions, try/catch, fetch with response.ok, Promise.all for parallel work, retries, and the forEach mistake to avoid.
// 02 · sample
If a card says Sample, it is layout practice. I wrote it so the blog has a real article page to open: a title, a date, a reading time, and a body. It is not a published tutorial and it is not proof that I have mastered the topic.
Sample notes are marked noindex and they are left out of the sitemap. A search engine should not treat them as articles I stand behind. On the article page itself, a warning sits above the writing so the label is not only a small badge on the list.
// 03 · shape
What does this tag do, or why did this layout break. If the note needs two questions, it is two notes.
A few lines I actually ran. Code that I have not tried does not go in the post.
What I still do not understand. That sentence keeps the note from sounding like a course.
// 04 · drafts
A draft never appears on this list. I can leave a half-written note in the admin area until the example works. Categories group the subject, such as learning notes or practice. Tags are the smaller words I might want to find later.
Search looks at the published titles and text you are allowed to see. It will not surface a draft, and it is not a way to find sample posts that have been kept out of the index. If a filter is empty, the page says so instead of inventing a result.
// 05 · later
The next honest notes are the bugs I actually hit: a heading that overflowed a card, a form that accepted an empty message, a query that returned the wrong row because I forgot a condition. Those are better posts than a rewritten manual of HTML.
Reading time is an estimate from the length of the body. It is there so you know the note is short. It is not a promise that the note is dense. If you want the projects instead of the notes, they live on their own page.