JavaScript map, filter and reduce Explained
JavaScript map, filter and reduce explained with practical examples: transform, keep and combine array items, chain them, and avoid the classic mistakes.
// 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.
JavaScript map, filter and reduce explained with practical examples: transform, keep and combine array items, chain them, and avoid the classic mistakes.
How to validate and sanitize PHP form input: trim, filter_var, mb_strlen and allow-lists, then escape output with htmlspecialchars, add CSRF and redirect.
Learn PHP PDO prepared statements with MySQL: connect safely, insert, select, update and delete, plus LIKE, IN lists, LIMIT, transactions and SQL injection.
Python list comprehension examples I actually use: basic syntax, filtering with if, if/else, nested loops, dict and set comprehensions, and common mistakes.
Python f-string formatting examples for decimals, thousands separators, percentages, alignment, dates and = debugging, plus what's new in Python 3.12 and 3.14.
HTML semantic tags explained with examples: header, nav, main, article, section, aside and footer, when to use each, and the div mistakes 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.