DEV Community: Arnold Gunter

Stop Using :valid in Your Forms — Try This New CSS Feature Instead

Arnold Gunter — Sat, 17 May 2025 15:36:43 +0000

If you’re a web developer like me, you’ve probably styled a form before.

And if you’re anything like me, you’ve tried to be helpful — maybe you added some color changes with input:valid or input:invalid, outlined fields, maybe even threw in a little transition effect.

But then this came to your mind: Wait, why is this field showing up as valid before the user even typed anything? 🤦

Want smart web dev tips like this delivered straight to your inbox?
JavaScript, CSS, HTML tricks and tools that actually make your life easier.
→ Follow 300+ webdevs, join the newsletter and get your CSS selector cheat sheet for free

The problem

You try to be nice to users. Give them visual cues. Maybe you change the border color on a valid input, or show a message when they make a mistake.

You think you’re doing a good thing.

But then someone opens your form and sees green borders before they’ve even clicked a thing.

Valid already? They didn’t even type! It’s wrong. It feels broken. And worse: it actually is misleading.

Let’s not even talk about accessibility. Using just colors for feedback? That’s a hard “no” if you care about users with color blindness.

Here’s the deal

CSS pseudo-classes like :valid and :invalid don’t wait for the user to interact.

If the input field meets the required rules on page load (or fails them), the styles apply instantly.

That’s why your untouched email field might already look like a success story. Not cool.

But the real solution? It’s brand new:

Say hello to :user-valid and :user-invalid.

These two pseudo-classes work exactly how you always wanted :valid and :invalid to behave:

*They wait for user interaction.
*
Nothing changes until the user actually types, blurs, or otherwise engages with the input. Now that’s user-friendly feedback.

What It Means For You

If you’re still using :valid/:invalid on untouched fields, you're frustrating users. They’re seeing red borders before they’ve even typed anything. Or worse—green borders that falsely imply their input is good.

By switching to :user-valid and :user-invalid, your forms become:

...

Read the full article here

How the NEW Temporal API Finally Fixed JavaScript’s 30-Year Time Problem

Arnold Gunter — Fri, 09 May 2025 14:48:56 +0000

Hello folks, I think it was time for this update.

I mean, you could work with Date, but it sucks. A lot.

Time zone handling was limited and inconsistent
Parsing behavior was unreliable across browsers
Mutability. Methods like setDate() or setMonth() modified the original object
Months were zero-based (0 for January), resulting in off-by-one errors
No support for durations or date arithmetic
Formatting and localization were inconsistent across browsers
Calendar systems were not supported… and so on and so forth

Want smart web dev tips like this delivered straight to your inbox?
JavaScript, CSS, performance, best practices, and tools like Temporal that actually make your life easier.
→ Follow 300+ webdevs and join the newsletter

Introducing the New Temporal API

Temporal is a new API introduced in ECMAScript 2022 designed to replace the broken Date — completely.

In comparsion to the Date it is not a Constructor. Temporal is a namespace, like Intl, which means, you cannot use it with the new operator or call it as a function as well.

This provides you with:

Immutable data structures
Precise time zone and calendar control
Consistent parsing and formatting
An API design based on value objects

It doesn’t mutate. It doesn’t guess. It doesn’t surprise you.

Temporal has a complicated but extremely powerful API. It provides over 200 methods across multiple classes, so it can seem very complex.

But I am here to break down what you really need.

Continue reading the full article here

Framework wars are just tech’s version of sports fans arguing over teams they don’t play for.

Arnold Gunter — Thu, 08 May 2025 13:41:38 +0000

You don't need TypeScript. You need to stop writing code like a maniac. Start there.

Arnold Gunter — Thu, 08 May 2025 13:40:24 +0000

How The NEW HTML Element Changes Selects Forever

Arnold Gunter — Wed, 07 May 2025 18:44:32 +0000

Hello, fellow web dev

If you’ve ever built a <select> element in HTML, you know the pain: only plain, lifeless text shows up.

It’s a UI crime, honestly.

Not only does it look awful, but the user experience suffers as well.

All you see is plain text and with icons or extra styling, users could scan options faster — but that’s not possible.

And exactly this functionality is what developers have been asking for for decades.

Boom, it’s finally here.

We can customize our <select>!

So let's have a look

How it works
How to style it
Real world examples
Browser support

I go deeper into new HTML features like this in my weekly newsletter. If you liked this post, you shouldn't miss this weeks edition.

How It Was Before

If you wanted a rich dropdown — icons, HTML, maybe even interactive content — you needed to fake the dropdown using a combination of:

<div> or <ul> for the options,
custom styling,
a little JavaScript to handle opening, closing, and selection.
If you would try to nest HTML code inside the <option> tag, any browser that seems to render it is either ignoring your inner HTML or treating it as text. You’re stuck with plain text there — no structure, no icons, no nothing.

The New Way

Normally a <select> would look like this:

<label for="language">Choose a programming language:</label><br>
<select id="language" name="language">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="ruby">Ruby</option>
</select>

We have our basic tag with nested options.

It’s just a standard <select> with some <option>s—nothing fancy. And when it’s closed, all you see is the plain text label.

So… let’s style this up and not make it look like we are stuck in 1996!

In the first step we insert the new <selectedcontent> just before the first <option> tag, wrapped in a <button>. Just like this:

<label for="language">Choose a programming language:</label><br>
<select id="language" name="language">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="ruby">Ruby</option>
</select>

Everytime the selected option changes, HTML creates in the background a clone of the entire HTML inside the <option> tag via cloneNode().

Then it gets displayed in the closed <select> element.

Hold up — this won’t work yet. First, we need to unlock the new styling engine...

Read the full article here

Responsive design is not hiding content on mobile. That’s just bad UX wearing skinny jeans.

Arnold Gunter — Tue, 22 Apr 2025 15:14:45 +0000

HTML is already a component system. You just hate how simple it is.

Arnold Gunter — Mon, 21 Apr 2025 14:14:17 +0000

If your site needs JavaScript to render basic content, you’ve already lost. Fight me.

Arnold Gunter — Mon, 21 Apr 2025 14:13:01 +0000

Tailwind is the new jQuery. Overused, misunderstood, and masking deeper CSS issues. Change my mind.

Arnold Gunter — Sat, 19 Apr 2025 18:27:52 +0000

7 JavaScript Interview Questions to Test How Smart You Really Are

Arnold Gunter — Sat, 19 Apr 2025 15:37:57 +0000

JavaScript is everywhere. It runs in your browser, your phone apps, maybe even your fridge.

But do you really understand it? Or are you just copying code from ChatGPT and hoping it works?

Well… Here are 7 questions interviewers love to ask to find out how smart (or sneaky) you really are.

Some look easy. Some are traps (the easy ones too). Let’s go!

👉 Join 200+ web developers already learning smarter HTML, CSS & JavaScript — weekly and free forever.

Get bite-sized tips, rare tricks, and tools you won’t find in tutorials. Subscribe to the Weekly Web Dev Digest now.

1. Can you count to 10… the JavaScript way?

Interviewers love this one:

“Write a function that counts from 1 to 10, logging one number per second.”

Easy? Try it.

Many candidates write a for loop with setTimeout() inside. Like this:

for (let i = 1; i <= 10; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

But guess what? That doesn’t work.

A working solution:

for (let i = 1; i <= 10; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000 * i);
}

Here’s the deal:

setTimeout() doesn’t repeat an action. It waits once, then runs your function.
The second parameter is the delay in milliseconds — how long to wait before running the function.

So if we just wrote:

setTimeout(() => console.log(i), 1000);

It would log all numbers after 1 second, all at once. Why? Because every timeout runs after the same delay.

But with:

setTimeout(() => console.log(i), 1000 * i);

Each i gets its own unique delay:

When i = 1, delay = 1000 * 1 = 1 second
When i = 2, delay = 1000 * 2 = 2 second
When i = 10, delay = 1000 * 10 = 10 seconds

So you’re telling JavaScript:

“Hey, log 1 after 1 second, 2 after 2 seconds, ..., 10 after 10 seconds."

Boom — counting!

2. Can you handle async like a pro, or just panic?

You’re asked to:

“Fetch data from 3 APIs, then do something after they all finish.”

This tests if you understand asynchronous code.

In JavaScript, things like fetch() or setTimeout() don’t happen instantly. They start and finish later. If you try to use the result right away, it won’t be there yet.

Bad approach: nested callbacks.

Good approach:

Promise.all([fetchA(), fetchB(), fetchC()])
  .then(([resA, resB, resC]) => {
    // All done, now do stuff
  });

Or better:

const data = await Promise.all([fetchA(), fetchB(), fetchC()]);

Promise.all() waits for all promises to finish. Only when everything is done, it gives you the results. No callback hell, no confusion. Just clean and smart.

3. What is ‘this’? (No, really.)

this in JavaScript is tricky. It changes depending on how you call a function.

If you write:

const person = {
  name: 'Sam',
  greet() {
    console.log('Hi, I am ' + this.name);
  }
};
person.greet(); // “Hi, I am Sam”

this refers to person.

But if you do:

const greet = person.greet;
greet(); // Uh-oh... “Hi, I am undefined”

Now this doesn’t point to person anymore. It points to the global object (or undefined in strict mode).

Arrow functions are different — they don’t have their own this. They use the this from the place where they were created.

4. What are closures, and can you use them without Googling?

Closures are what happen when a function “remembers” variables from the place where it was created.

Example:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const counter = outer();
counter(); // 1
counter(); // 2

Even though outer() has finished running, inner() still remembers the count variable. That’s a closure. It lets functions keep state. Super useful for things like counters, timers, or private variables.

5. Do you even ‘bind’, bro?

Here’s the deal:

doThis('foo', something.doThat);

This passes a reference to doThat. But:

doThis('foo', () => something.doThat());

This calls doThat() right away and passes the result.

If doThat depends on this, passing it directly might break it. That’s where .bind() helps:

doThis('foo', something.doThat.bind(something));

Now the function will always use the correct this.

Knowing when to pass a function vs. call it, and how this behaves, is key to writing clean, working code. If you pass a function and it loses its context, weird bugs show up.

6. Is a function a first-class citizen?

In JavaScript:

You can put a function in a variable.
You can pass it to another function.
You can return it from a function.

That’s what first-class means.

Example:

function greet(name) {
  return 'Hello ' + name;
}

function welcome(fn) {
  console.log(fn('Alice'));
}
welcome(greet); // Hello Alice

Why it works:
JavaScript treats functions like any other value. This lets you build higher-order functions, callbacks, and more powerful patterns.

7. Can you explain prototypal inheritance without sweating?

JavaScript doesn’t use class-based inheritance like Java or C++.

It uses prototypes.

Every object can point to another object — its prototype. When you try to access a property that doesn’t exist, JavaScript looks up the prototype chain.

Example:

const animal = {
  speak() {
    console.log('Animal sound');
  }
};

const dog = Object.create(animal);
dog.speak(); // Animal sound

Why it works:
dog doesn’t have a speak() method. But its prototype (animal) does. JavaScript finds it up the chain and uses it. This is how inheritance works under the hood.

Final Thoughts
JavaScript is a fun language, but it’s full of little traps. If you can answer these questions without copying from ChatGPT (wait a minute…), you’re well on your way to JavaScript mastery.

Just remember: knowing what works is good. Knowing why it works is even better.

Good luck!

5 HTML Tricks to WOW Your Users

Arnold Gunter — Wed, 09 Apr 2025 15:25:07 +0000

We all want to create that website that stands out, right? With that great buttery smooth user experience! Right?

Well, let me help you with 5 HTML tricks you never knew existed!

— Join hundreds of web developers leveling up their skills with my weekly newsletter — it is FREE —

1. Use the Camera on Mobile Devices

Did you know you can let users take pictures directly from your website? No need for third-party apps or special permissions — just a simple HTML attribute.
How It Works

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Capture</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; padding: 20px; }
        input { margin-top: 20px; padding: 10px; }
    </style>
</head>
<body>
    <h2>Say Cheese! 📸</h2>
    <p>Click below to take a photo using your camera. (Only on mobile devices)</p>
    <input type="file" accept="image/*" capture="environment">
</body>
</html>

The <input type="file"> element allows users to upload files.
Adding capture="environment" tells the browser to use the back camera.
Using capture="user" opens the front camera instead. This is great for profile pictures, document uploads, or even just taking quick snapshots.

2. Add a Built-in Color Picker

Instead of making users type out hex codes, why not let them choose a color with a simple, built-in tool?
How It Works

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Picker</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; padding: 20px; }
        input { margin-top: 20px; padding: 10px; }
    </style>
</head>
<body>
    <h2>Pick a Color! 🎨</h2>
    <p>Select your favorite color below:</p>
    <input type="color">
</body>
</html>

The <input type="color"> element opens a color picker when clicked.
Users can select a color, and the browser returns the hex code (like #ff5733). This is perfect for themes, design customization, or any feature that requires color selection.

3. Block Right-Clicking

If you want to prevent people from easily copying your content or saving images, you can disable right-clicking with a simple trick.
How It Works

<body oncontextmenu="return false">
    <h2>Try Right-Clicking! 😏</h2>
    <p>Oops! It’s disabled!</p>
</body>

It won’t stop determined users, but it adds a small layer of protection against casual content theft.

4. Let Users Talk Instead of Type

Typing can be slow, so why not let users speak instead? With a single attribute, you can enable voice input in your forms.
How It Works

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voice Input</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; padding: 20px; }
        input { padding: 10px; width: 80%; }
    </style>
</head>
<body>
    <h2>Talk to Me! 🎤</h2>
    <p>Click the mic icon and start speaking.</p>
    <input type="text" x-webkit-speech>
</body>

Adding x-webkit-speech to an <input> field enables speech-to-text in Chrome on mobile devices.
A microphone icon appears inside the input box.
Users click it, speak, and the text appears automatically. This is especially useful for search bars, chat applications, or accessibility features.

5. Refresh or Redirect a Page Automatically

Sometimes, you want a page to refresh itself or redirect users after a few seconds. You don’t need JavaScript for this — just a simple meta tag.

How It Works

<meta http-equiv="refresh" content="5"> refreshes the page every 5 seconds.
<meta http-equiv="refresh" content="5; url=https://example.com"> redirects after 5 seconds. This is useful for live updates, countdown pages, or guiding users to the right content.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Refresh & Redirect</title>
    <meta http-equiv="refresh" content="5; url=https://example.com">
</head>
<body>
    <h2>Hold Tight! ⏳</h2>
    <p>You will be redirected in 5 seconds...</p>
</body>
</html>

Final Thoughts
These small HTML tricks can improve your website’s user experience with minimal effort. They work across most browsers and don’t require any extra libraries or scripts.

Try them out, and happy coding!

If You Can Answer These 7 Questions Correctly You’re Decent at JavaScript

Arnold Gunter — Mon, 07 Apr 2025 14:45:58 +0000

This article was originally published here

JavaScript can be a little tricky sometimes, even when you’re dealing with simple-looking problems.

Here are seven questions that test different parts of JavaScript.

They look easy, but they can catch you off guard! If you can answer these, you’ve got a good handle on JavaScript!

JOIN MY FREE WEEKLY WEBDEV NEWSLETTER!

Question 1: What’s the Result of 0.1 + 0.2 === 0.3?

console.log(0.1 + 0.2 === 0.3);

Answer:
The result is false.

Explanation:
In JavaScript, numbers with decimals (called floating-point numbers) don’t always add up the way we expect.

Due to how floating-point numbers are represented in JavaScript, 0.1 + 0.2 doesn’t exactly equal 0.3. Instead, it results in 0.30000000000000004, leading to the comparison being false. This issue comes from the binary approximation of decimal numbers in JavaScript.

Question 2: What’s the Result of "5" + 3 and "5" - 3?

console.log("5" + 3);
console.log("5" - 3);

Answer:
"5" + 3 results in "53".
"5" - 3 results in 2.

Explanation:
"5" + 3: When you use the + sign with a string and a number, JavaScript treats the number like a part of the string. So instead of adding 5 and 3 as numbers, it sticks them together as text, resulting in "53".

"5" - 3: The - operator doesn’t work with strings, so JavaScript converts "5" to a number and subtracts 3, resulting in 2.

Question 3: What’s the Value of typeof null?

console.log(typeof null);

Answer:
The result is "object".

Explanation:
This is a weird part of JavaScript. The typeof operator should tell you what kind of value you have.

But when you check typeof null, JavaScript mistakenly says it’s an object, even though null is actually a special value that means "nothing."

This is a bug that has been around for a long time and hasn’t been changed to keep old code from breaking.

Question 4: How Does a Closure Work?

function outerFunction() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const closure = outerFunction();
closure(); // ?
closure(); // ?

Answer:
The output will be:

1
2

Explanation:
A closure happens when a function remembers the variables around it, even after the outer function has finished running.

In this example, the inner function still has access to the count variable inside outerFunction. Each time you call closure(), it increases count and shows it.

Question 5: What’s the Result of true + false and [] + {}?

console.log(true + false);
console.log([] + {});

Answer:
true + false gives 1.
[] + {} gives "[object Object]".

Explanation:
true + false: In JavaScript, true is treated as 1 and false as 0. Adding 1 + 0 gives 1.

[] + {}: When you add an empty array [] to an empty object {}, JavaScript changes them to strings. The empty array becomes an empty string "", and the empty object becomes "[object Object]". So, adding them gives "[object Object]".

Question 6: What Does [] == ![] Mean?

console.log([] == ![]);

Answer:
The result is true.

Explanation:
This is tricky! Here’s what happens:

![] means "not an empty array." An empty array is a "truthy" value, so ![] is false.
Now, the expression is [] == false.
JavaScript tries to compare [] and false. It changes [] into an empty string "" and false into 0.
Then, "" == 0 is true because JavaScript changes the empty string to 0 when comparing.

Question 7: What’s the Output of console.log(a) in the Following Code?

console.log(a);
var a = 5;

Answer:
The output is undefined.

Explanation:
This happens because of something called hoisting. When JavaScript reads your code, it moves all variable declarations to the top of their scope.

So, in this case, JavaScript sees var a; at the top, but the value 5 hasn’t been assigned yet. So when you try to log a, it’s declared but still undefined.

Conclusion

How did you do?
These questions mix JavaScript’s odd behavior with some important concepts like closures and hoisting.

Knowing these will help you avoid common mistakes and better understand how JavaScript handles different operations.

Happy coding!