DEV Community: Koichi Kimura

JSX Curly Braces {} Got Your Back Behind the Scenes

Koichi Kimura — Sat, 10 May 2025 19:29:48 +0000

Have you ever wondered what `<h1>{title}</h1>` really does?

At first glance, it looks like just a way to inject JavaScript variables into JSX.

But there's more to it.
It’s not just syntax.

It’s security.

JSX Escapes by Default 🛡️

React automatically escapes any content inside JSX curly braces before rendering it to the DOM.

That means special characters like <, >, and & are safely converted, preventing malicious HTML or JavaScript from being interpreted.

const title = '<script>alert("XSS")</script>';
// JSX escapes it automatically
return <h1>{title}</h1>;

Output:

<h1>&lt;script&gt;alert("XSS")&lt;/script&gt;</h1>

✅ No script executed. Just safe, visible text.

🔗 By default, React DOM escapes any values embedded in JSX before rendering them.

Why This Matters

Imagine this value came from user input (e.g., a comment form or a URL parameter).

If React didn’t escape it, this line:

<h1>{userInput}</h1>

could become an open door to XSS (Cross-site Scripting) attacks. But thanks to React's design, it's safe by default.

What About `dangerouslySetInnerHTML`?

Now, this is where you need to be careful:

<div dangerouslySetInnerHTML={{ __html: userInput }} />

This bypasses React's escape mechanism.
If you use this, you’re telling React:
"I know what I'm doing. Trust me, this HTML is safe."
Which means... you need to sanitize it yourself using something like DOMPurify.

The Takeaway 🎯

{} in JSX is more than just a way to embed variables.

It’s a safety mechanism that protects your app from script injection.

Unless you explicitly bypass it, JSX makes your rendering safe by default.

So next time you write this:

<h1>{title}</h1>

Remember — React’s got your back. 😉

Tired of losing your cursor when switching tabs in VSCode? Meet Cursorghost 👻

Koichi Kimura — Sun, 23 Mar 2025 22:40:51 +0000

Have you ever switched tabs in VSCode and forgotten where your cursor was?

This happens to me all the time, especially when jumping between multiple files in large codebases.

So… I built a tiny VSCode extension to solve it.

👻 What is Cursorghost?

Cursorghost is a lightweight VSCode extension that remembers your cursor position in each file tab — and restores it automatically when you switch back.

No setup needed. Just install it, and it works.

👉 Marketplace Link

🧠 Why I built this

I got tired of constantly losing my cursor position and manually scrolling back to where I was editing. VSCode doesn’t remember the position across tabs by default, so I decided to write my own solution.

I wanted it to:

Be automatic and seamless
Work across all file types
Require no config
Be easy to install and forget

🛠️ How it works (under the hood)

In short:

It listens for onDidChangeActiveTextEditor
It stores the current cursor line whenever you switch away
When you come back, it restores the last known position

All written in TypeScript. The source is open on GitHub:

👉 GitHub - kupuma-ru21/cursorghost

🚀 How to use it

Open VSCode Extensions and search Cursorghost
Click install
Switch tabs and feel the magic! ✨

No configuration required.

🧩 Ideas for future features

Diff view support
Multi-cursor support
Exclude certain files/types

I’m open to feedback and PRs!

🙏 Final thoughts

Sometimes it’s the little things that make your workflow feel smoother.

I hope Cursorghost saves you some frustration like it did for me.

If you try it and find it helpful, please ⭐️ the GitHub repo and share it with others!

Let me know what you think — and thanks for reading 👋

💻 Built by @kupuma-ru21

Are you still using getYear method in Javascript??

Koichi Kimura — Sat, 25 May 2024 07:25:59 +0000

I've worked as a frontend developer for 4 years.
I mean, I've used getYear method a lot.
But I have to say good bye to it. 😭
Because it's no longer recomended because of "year 2000 problem".
So let's use getFullYear method!!