DEV Community: Zoe

Liveness vs Readiness in Kubernetes: The Truth for Frontend Apps

Zoe — Wed, 03 Sep 2025 23:44:23 +0000

What I Used to Think

When I first started working with Kubernetes, I took the textbook advice at face value: "Always split your readiness and liveness probes." It made sense:

Readiness: tells the load balancer when your app is ready to serve traffic
Liveness: tells Kubernetes when your app is stuck or dead and should be restarted

So naturally, I assumed they always had to be different.
Spoiler: they don't.

What I Actually Learned

If your app is a frontend app with no external dependencies (no DB, no Redis, nothing fancy) then you can totally use the same endpoint for both liveness and readiness.
And that's okay.
Usually, you'll have some kind of /health or /ping endpoint that just returns 200 OK if the server is alive. That's enough.
Because in this case:

There's nothing to warm up
No connection pools to wait for
No race conditions between booting and serving traffic

Just a server that says "I'm alive," and that's all you need.

💡 TL;DR: If your frontend just needs to be "up", you don't need fancy health check logic.

When You Should Actually Separate Them

There are cases when you absolutely want them to be different. For example:

Your app connects to a DB or other service and needs time to become "ready"
Your app could freeze or hang over time and needs to be restarted
You want different failure thresholds (e.g. retry readiness more often than liveness)

In those cases:

Readiness: returns 200 only when all dependencies are ready
Liveness: returns 200 unless the app is completely hung or stuck

Think of readiness as "Can I take requests?" and liveness as "Am I still breathing?"

Infra-Side Example: One Path, Two Probes

If you're working on a static frontend or a lightweight SSR app, this setup is totally fine:

readinessProbe:
  httpGet:
    path: /health/readiness
    port: 3000
  initialDelaySeconds: 3
  periodSeconds: 10
livenessProbe:
  httpGet:
    path: /health/liveness/
    port: 3000
  initialDelaySeconds: 10
  periodSeconds: 30

App-Side Example

// Fastify or Express-style handler
app.get('/health/liveness/', (_, reply) => {
  reply.code(200).send({ status: 'READY' })
})

app.get('/health/readiness/', (_, reply) => {
  reply.code(200).send({ status: 'READY' })
})

No extra logic. No retries. No checks. Just a 200 if the app is alive.

Final Thoughts

🚫 Don't overengineer health checks.

If you're deploying a frontend-only app with no infra dependencies, a single /health endpoint is enough for both probes.
But as your app grows and gains more infra complexity (e.g. connecting to databases, caches, or async queues ) then it's time to revisit and split them accordingly.
Knowing when it matters is the real win. 🧠

When Major GC Strikes: Why Your JVM App Suddenly Freezes

Zoe — Mon, 25 Aug 2025 03:58:47 +0000

Introduction

My Java application was experiencing performance issues, and I suspected it was related to how the JVM was managing memory. To optimize performance, I needed a clear understanding of how garbage collection (GC) works in the JVM 💭

This post breaks down how Garbage Collection works, the difference between Minor and Major GC, and why Full GC can freeze your whole app. Learn what to watch in your metrics so you can spot memory issues before your users feel the lag.

⚠️ TL;DR - Watch out for Major GC!

Major GC (a.k.a. Full GC) causes your whole app to pause - and not in a chill way 😵
Major GC itself isn't bad, but if the pause time is above miliseconds, your users might feel the lag.
We saw memory usage spike, GC old gen size grow, and major GC run more frequently
The root cause? The service that was newly released had a bug that was consuming too much memory
Always keep an eye on major GC metrics to catch issues early before users feel the lag!

How Java Applications Use Memory

First things first, we need to understand how Java applications utilize memory to fully understand garbage collection.
Java splits memory into multiple areas:

1. Heap Memory - Our Focus Area For This Post

Stores: Objects and arrays.
Managed by: Garbage Collector.
Subdivided into: Young Generation (Eden + Survivor spaces) and Old Generation(Where long-lived objects are promoted)

Example: new User() allocates memory in the heap.

2. Stack Memory

Stores: Local variables and method call info.
Per-thread stack.
Cleared automatically on method return.

Example: int count = 5 goes on the stack.

3. Metaspace (Java 8+)

Stores: Class metadata.
Native memory (not heap).
Grows dynamically but can OOM.

Example: Defining a class like class Product.

4. Code Cache

Stores: JIT-compiled native bytecode.

5. Native Memory

Includes: Thread stacks, DirectByteBuffer, JNI memory.
Not managed by -Xmx.

What Is the Heap?

Since we'll be focusing on garbage collection in this post, we'll dig a bit deeper here, which is where the garbage collection happens.

Dynamic memory allocation area.
Where new Object() lives.
Operated on by the GC.

Heap Structure

Young Generation: New objects go here (Eden + Survivor)
Old Generation: Long-lived objects gets promoted here
Metaspace(Not technically heap): Class metadata lives here.

GC Lifecycle Example

User user = new User(); → Eden
Survives GC → Survivor → Old Gen
Becomes unreachable → Collected by GC

Heap Management Tips

Too small → OutOfMemoryError
Too large → Long GC pauses
Monitor and tune with -Xms, -Xmx

Minor GC vs Major GC

There are two types on garbage collection in Java.
The main difference between Java GC Minor and Major collections comes down to which part of the heap they operate on and how heavy the operation is.

Minor GC

Operates On: Young Generation
Frequency: Frequent (seconds)
Performance: Low
Pause Time: Short
Purpose: Clean short-lived objects

Major GC

Operates On: Old Generation
Frequency: Rare (minutes+)
Performance: High
Pause Time: Long
Purpose: Clean long-lived objects

Full GC

Operates On: Entire Heap + Metaspace
Frequency: Emergency
Performance: Very High
Pause Time: Longest
Purpose: Full memory cleanup

GC Spikes: What Do They Mean?

So what does it mean when the frequency of GC spikes?
For minor GC, it's usually not a problem, but major GC can be problematic depending on the time consumed.

Minor GC Spikes
Heavy creation and destruction of objects
Eden space fills up quickly
High frequency leads to increased CPU load and latency

Countermeasures (Infra perspective):

Increase Young Gen size using -Xmn
Utilize object pools

Countermeasures (App perspective):

Check if temporary objects are being created excessively (e.g., overuse of new String())
Review whether cache and buffer designs are appropriate
Improve code to reuse unnecessary objects

Major GC Spikes ← Watch Out!

Pressure on Old Gen
Potential memory leaks
Long application pauses
Major GC itself isn't bad, but if it takes too long, your application might become laggy

Countermeasures (Infra perspective):

Analyze memory state with heap dumps
Increase heap size (adjust -Xmx)
Continuously monitor Old Gen usage with tools like Datadog

Countermeasures (App perspective):

Work with the dev team to identify which processes or classes are holding large amounts of memory
Detect memory leaks or objects living longer than expected
Review object lifecycle management and release unnecessary references
Check if usage of finalize() or caches is appropriate

How Heap Size Is Determined

Heap does not grow with system memory by default. Typically, for a memory with 2GB limit, the max heap size is around 512MB~1GB.
To customize the heap size, use:

-Xms: Initial heap
-Xmx: Max heap

GC Metric Analysis

Well, now we know that it can be bad if major GC happens frequently. So how do we look out for it?
Here are some datadog queries that might help you analyze the metrics related to garbage collection.

Minor Collection Count

exclude_null(avg:jvm.gc.minor_collection_count{...})

Minor Collection Time

exclude_null(avg:jvm.gc.minor_collection_time{...})

Major Collection Count

exclude_null(avg:jvm.gc.major_collection_count{...})

Major Collection Time

exclude_null(avg:jvm.gc.major_collection_time{...})

Old Gen Size

exclude_null(avg:jvm.gc.old_gen_size{...})

My Personal Experience

This is what I observed after the initial release of a new service:

Minor GC spiked right after release.
Major GC occurred days later (still microseconds, so not too bad).
Old Gen size steadily increased.
Memory usage jumped 40%.

Root Cause

Since it seemed to be caused by the release of a new service, We asked the devs to dig into the app to identify memory-heavy objects. Turns out, the bug was basically about constructor misuse ! The original code accidentally created a full copy of a collection 🫠
But I was able to learn a lot about garbage collection and memory management thanks to this incident.

Final TL;DR

GC manages Java memory automatically.
Minor GC = Young Gen; fast and frequent.
Major GC = Old Gen; slow and heavy.
Heap structure (Eden → Survivor → Old Gen) determines GC behavior.
Watch for GC spikes: Minor = churn, Major = leaks.
Tune with -Xms, -Xmx, and monitor GC metrics.

Thank You!

Thanks for reading! ✨
I also post on my personal blog, where I share notes and experiments.
If you'd like to connect, you can find me on GitHub or LinkedIn. 🚀

Scaling Node.js (Next.js) in Kubernetes: Lessons from a CPU Bottleneck

Zoe — Mon, 25 Aug 2025 03:22:30 +0000

Intro

When one of my Node.js (Next.js) apps started hitting CPU limits under load, I assumed it'd scale across the two cores I gave it in Kubernetes. It didn't.

Turns out, Node.js is single-threaded - but more importantly, it doesn't automatically scale across cores.

This wasn't news to me. It's well-known that JavaScript is single-threaded after all. But seeing it bite in production? That hit different.

Here's a quick breakdown of how I fixed it using the cluster module, what trade-offs come with it (multi-process ≠ multi-thread), and why matching infra config with your app's process model really matters.

Step 1: Enable Multi-CPU in Node.js

The trick is to fork multiple processes using Node's built-in cluster module - one for each core.

import cluster from 'node:cluster'
import os from 'node:os'

const defaultProcessCount = os.cpus().length
const clusterSize = process.env.PROCESS_COUNT ?? defaultProcessCount

if (cluster.isPrimary) {
  for (let i = 0; i < clusterSize; i++) {
    cluster.fork()
  }

  cluster.on('exit', (worker) => {
    console.log(`worker ${worker.process.pid} died`)
  })
} else {
  // Your app logic here (e.g. HTTP server)
}

Each fork() spawns a brand-new process - they'll all listen on the same port and magically share traffic thanks to Node's internal load balancing.

Step 2: Actually Give It More CPU in Kubernetes

Your app can only use the CPU cores you give it.
In your deployment YAML:

resources:
  limits:
    cpu: "2"
    memory: "2048Mi"

Careful! Forking 4 processes inside a pod with only 1 core = they'll just take turns fighting for it! So always match your infra to your process count.

But This Isn't Multithreading

This setup = multi-process, not multi-threaded.
Each worker is its own process - they don't share memory. That means:

More memory usage overall
No shared global state between workers
Still works great for I/O-heavy apps (APIs, SSR apps, etc.)

If you're coming from Java or Go, this is different. Those languages handle threads inside the same process and share memory, which is generally more efficient.

Why JS Is Single-Threaded (and That's Okay)

"JavaScript was designed to be single-threaded so that developers could write code without worrying about race conditions and thread safety."
- MDN Web Docs

JavaScript was born in the browser, where multiple threads would've made DOM access a nightmare.

Instead, async behavior is handled with an event loop - which is why Promise, async/await, and even setTimeout feel intuitive and race-condition-free.

TL;DR

Node.js is single-threaded, so you only get one core unless you fork more
Use cluster.fork() to spin up one process per core
Update your Kubernetes manifest to assign enough CPUs
This isn't true multithreading (Java or Go apps will still outperform) but for many use cases, it's good enough!

Thank You!

Thanks for reading! ✨
I also post on my personal blog, where I share notes and experiments.
If you'd like to connect, you can find me on GitHub or LinkedIn. 🚀

Getting Familiar with GSAP ScrollTrigger 🌱

Zoe — Fri, 11 Aug 2023 02:17:05 +0000

Is it just me, or does anyone else find GreenSock's ScrollTrigger documentation confusing? It took me some time to fully understand how each properties of ScrollTrigger work.
This article simplifies some common properties of ScrollTrigger, in case anyone has the same issue 🌱

Let's break down the following code one by one.

gsap.to(".element-to-animate", {
  scrollTrigger: {
    trigger: ".trigger-element",
    start: "top bottom",
    end: "bottom top",
    scrub: true,
    pin: true,
    toggleActions: "play none none none",
    toggleClass: "active",
    ease: "power2"
  }

Trigger

gsap.to(".element-to-animate", {
  scrollTrigger: {
    trigger: ".trigger-element",
  }

Breakdown

The position of .trigger-element will trigger the animation.

Start

start: "top bottom",

Breakdown

when the top of the .trigger-element reaches the bottom of the viewpoint, the animation will start.
In this case, this means it will start as soon as the element comes into view when you're scrolling down.

But for example, if we set it as

start: "top 90%",

The animation will start once 10% of the element becomes visible from the bottom of your screen.

End

end: "bottom top",

Breakdown

Similar to start, this means the animation will end once the target element's bottom reaches the top of the screen
In this case, this will be once the element becomes completely invisible from the screen.

pin: true

Breakdown

This one is pretty self-explanatory, it allows you to "pin" the .trigger-element.

Scrub

scrub: true

Breakdown

This allows smooth animation. So scrub: 1 means the animation will take 1 second to "catch up" to the scrollbar.

ToggleActions

toggleActions: "play none none none"

toggleActions sets how the animation will act during the following events - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. So

toggleActions: "play none none none"

is equivalent to

onEnter: "play",
onLeave: "none",
onEnterBack: "none",
onLeaveBack: "none"

Breakdown

The animation will 1. play when the target element comes into view, 2. do nothing when it leaves the view, 3. do nothing when it comes back into view, and 4. do nothing when it leaves the view again.

The possible options for these are:

play
pause
resume
reverse
restart
reset
complete
none

If you want your animation to restart every time the trigger element comes into view, you should opt for restart rather than play, as the following:

toggleActions: "restart none none none"

There is an awesome codepen demo by GreenSock for this, in case you want to see more options!

Ease

ease: "Power2"

Breakdown

Also self-explanatory, the animation's ease option.
There is a great visualizer by GreenSock for this here

ToggleClass

toggleClass: "active"

Breakdown

You can also add/remove classes with ScrollTrigger!
.active class will be added to the .element-to-animate while the ScrollTrigger is active, and removed otherwise. It is equivalent to document.querySelector('.element-to-animate').classList.add('.active') and document.querySelector('.element-to-animate').classList.remove('.active')

And That's It!

I hope this article will be helpful in case anyone else found ScrollTrigger's documentation confusing as I did.

Thanks for reading, and happy coding!

Create a Dark/Light Mode Toggle using JavaScript & LocalStorage 💫

Zoe — Sun, 23 Jul 2023 03:25:36 +0000

Hi There! 👋

In this Article, I want to show you how you can create a simple light / dark mode toggle using JavaScript and LocalStorage.

Here is one example made using Toggle; Try Clicking the top right icon to see the themes change!

(Just a friendly reminder that you can also check the pure HTML / CSS code by clicking "view compiled" on CodePen!)

Let's get started!

The HTML

<!-- dark theme toggle -->
<label id="theme-switch" class="theme-switch" for="checkbox_theme">
  <input type="checkbox" id="checkbox-theme">
  <label for="checkbox-theme" class="fas"> </label>
</label>
<!-- Some general elements -->
<div class="wrapper">
  <h1>Dark Theme Toggle</h1>
  <p>Click the top right icon to switch modes</p>
</div>

We will be using the checkbox property and Font Awesome Icons for the toggle switch. Basically, we will set a different icon if the checkbox is checked using CSS!

CSS

Let's first set up the document color scheme using CSS variables;
One for light mode (default), and another for dark mode.
Feel free to adjust the colors to your own preference!

/* light mode */
:root {
  --background: #f6f6f6;
  --card: #ffffff;
  --border: #cccccc;
  --table-header: #e6e6e6;
  --primary-text: #000000;
  --secondary-text: #212121;
}

/* dark mode */
[data-theme="dark"] {
  --background: #121212;
  --card: #181818;
  --border: #212121;
  --table-header: #212121;
  --primary-text: #f6f6f6;
  --secondary-text: #9ca3af;
}

Now let's add some styles to the checkbox!
the content: "\f186"; will show the moon icon on Font Awesome, which we will be using for dark mode. Similarly, we will use the lightbulb icon for light mode.

#checkbox-theme {
  display: none;
}

/* light mode icon */
#checkbox-theme + label:before {
  content: "\f186";
  font-size: 20px;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
}

/* dark mode icon */
#checkbox-theme:checked + label:before {
  content: "\f0eb";
  font-size: 20px;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
}

And here are some general stylings you can add to your page for testing purposes 😁

body {
  font-family: "Roboto", sans-serif;
  background-color: var(--background);
  color: var(--primary-text);
  text-decoration: none;
}

a {
  text-decoration: none;
  color: var(--primary-text);
}

a:hover {
  text-decoration: none;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper h1 {
  font-size: 50px;
}

.wrapper p {
  font-size: 17px;
  margin-top: 0;
}

JavaScript

Now let's write some JavaScript!
The following code will be the main part of our code; It will call the switchTheme function when the user checks/unchecks the checkbox!

Listen for change in checkbox

//listener for changing themes
toggleSwitch.addEventListener('change', switchTheme, false);

We want the switchTheme() function to do 3 main things :

One, Change the data theme to light or dark

document.documentElement.setAttribute('data-theme', 'dark');

Two, Switch the checkbox icon

toggleSwitch.checked = true;

And finally, save the theme to local storage.

localStorage.setItem('theme', 'dark');

Strictly speaking, the third part (localStorage) is not really necessary to achieve this, but we don't want the users to have to switch the theme every time they refresh the website right? So let's utilize localStorage to save the user's preference! We will get back to this on the next part.

Getting back, here is what the complete switchTheme() function looks like :

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
    toggleSwitch.checked = true;
    localStorage.setItem('theme', 'dark');
  } 
  else {
    document.documentElement.setAttribute('data-theme', 'light');
    toggleSwitch.checked = false;
    localStorage.setItem('theme', 'light');
  }    
}

Saving User's Preference to LocalStorage

Let's get back to LocalStorage. To improve user experience, we want to

Check the user's OS settings to automatically preset the theme
Check localStorage to save user's preference if the user changed the theme

So let's add another function named detectColorScheme() to achieve this!

1. Checking the user's OS settings

This will do the trick!

if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
  //OS theme setting detected as dark
  var theme = "dark";

However, some browsers do not support matchMedia method (Click here to check browser support), so let's consider that as well.

if(!window.matchMedia) {
  // matchMedia method not supported
  return false;
}
else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
  //OS theme setting detected as dark
  var theme = "dark";
}

So for example, if you are using dark mode on your mac, the website will automatically switch the display to dark mode.

Checking LocalStorage to override OS theme settings

But what if a dark mode user wants to see the website in light mode, and changes it? Let's also save this preference to LocalStorage!

if(localStorage.getItem("theme")){
  if(localStorage.getItem("theme") == "dark"){
    var theme = "dark";
  }
}

Here is the complete code for detectColorScheme()!

function detectColorScheme(){

  //default is set to light mode
  var theme="light"; 

    //local storage is used to override OS theme settings
    if(localStorage.getItem("theme")){
      if(localStorage.getItem("theme") == "dark"){
        var theme = "dark";
            }
        } 
      else if(!window.matchMedia) {
        // matchMedia method not supported
        return false;
      } 
      else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
        //OS theme setting detected as dark
        var theme = "dark";
        }

        // if dark theme is preferred, set document with a `data-theme==dark` attribute
        if (theme=="dark") {
            document.documentElement.setAttribute("data-theme", "dark");
        }
    }

And here is the complete JS code 🎉

$(document).ready(function () {
  const toggleSwitch = document.querySelector(
    '#theme-switch input[type="checkbox"]'
  );

  function detectColorScheme() {
    var theme = "light"; 

    //local storage is used to override OS theme settings
    if (localStorage.getItem("theme")) {
      if (localStorage.getItem("theme") == "dark") {
        var theme = "dark";
      }
    } else if (!window.matchMedia) {
      return false;
    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      var theme = "dark";
    }

    if (theme == "dark") {
 document.documentElement.setAttribute("data-theme", "dark");
    }
  }
  detectColorScheme();

  function switchTheme(e) {
    if (e.target.checked) {
      localStorage.setItem("theme", "dark");
      document.documentElement.setAttribute("data-theme", "dark");
      toggleSwitch.checked = true;
    } else {
      localStorage.setItem("theme", "light");
      document.documentElement.setAttribute("data-theme", "light");
      toggleSwitch.checked = false;
    }
  }

  toggleSwitch.addEventListener("change", switchTheme, false);

  if (document.documentElement.getAttribute("data-theme") == "dark") {
    toggleSwitch.checked = true;
  }
});

That's it! 🥳

Thanks for reading, and happy coding! ❤️
If you have any thoughts or questions, feel free to leave a comment! 😊

Create a Copy-Pasteable Color Palette to Simplify Your Workflow 🚀

Zoe — Sat, 20 May 2023 09:02:28 +0000

Have you ever experienced the frustration of having to repeatedly copy and paste the same color code every time you start a new project? Trust me, I feel your pain.

That's why I came up with a brilliant solution: A project that brings all my frequently used color codes in one place, and automatically copies the color code to the clipboard, saving you time and effort.

Try Clicking the colors to see what happens!

Sounds great, right? Let me show you how you can achieve this convenient trick for yourself.

Step 1 : Find Commonly Used Colors

First off, let's find the colors you're always using in your projects. You know, the ones that make your brand pop, add some extra oomph, or just show up everywhere. In this case, we'll take a peek at Bootstrap's color codes for a little inspiration.

Step 2 : HTML

This will be the building block for each color. It's made up of two parts: one to display the color (.color-palette) and another to show the color code (.color-palette-hex-code).

<div class="color-palette" style="background: #0275d8;" title="Primary">
    <span class="color-palette-hex-code">#0275d8</span>
  </div>

Let's add some more colors!
To keep things organized, we'll create a parent div named color-palette-wrapper that brings all these colors together in one place.

<div class="color-palette-wrapper">
  <div class="color-palette" style="background: #0275d8;" title="Primary">
    <span class="color-palette-hex-code">#0275d8</span>
  </div>
  <div class="color-palette" style="background: #5bc0de;" title="Info">
    <span class="color-palette-hex-code">#5bc0de</span>
  </div>
  <div class="color-palette" style="background: #5cb85c;" title="Success">
    <span class="color-palette-hex-code">#5cb85c</span>
  </div>
  <div class="color-palette" style="background: #f0ad4e;" title="Warning">
    <span class="color-palette-hex-code">#f0ad4e</span>
  </div>
  <div class="color-palette" style="background: #d9534f;" title="Danger">
    <span class="color-palette-hex-code">#d9534f</span>
  </div>
  <div class="color-palette" style="background: #292b2c;" title="Inverse">
    <span class="color-palette-hex-code">#292b2c</span>
  </div>
  <div class="color-palette" style="background: #f7f7f7;" title="Faded">
    <span class="color-palette-hex-code">#f7f7f7</span>
  </div>
</div>

Step 2 : CSS

Now let's add some styles.

.color-palette-wrapper {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.color-palette {
    width:65px; 
    height: 75px;
    display: flex;
    justify-content: start;
    align-items: flex-end;
    font-size: 12px;
    cursor: pointer;
}
.palette-title {
    font-size: 25px;
    text-transform: capitalize;
}

.color-palette-hex-code {
    background: rgba(255, 255, 255, 0.31);
    color: rgb(18, 18, 18);
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
    padding-left: 2px;
}

Applying the styles above will get us here :

Step 3 : JavaScript

Now the only thing left to do is add some JavaScript magic for the copy-paste functionality! Here's what we need :

$(".color-palette").click(function (e) {
  // copy the code to clipboard
  var copyText = $(this).find(".color-palette-hex-code").text();
  navigator.clipboard.writeText(copyText);
});

But hey, we don't want to keep it a secret! We want to make sure the user knows when we've successfully copied the color code, right? So, let's add a little something extra to make that alert message appear and give us a little high-five moment.

Step 4 : Create an alert message

Here's the HTML & CSS for the alert message.

<div id="alertMessage">Copied to Clipboard!</div>

#alertMessage {
  z-index: 1000;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #0275d8;
  color: #d1d5db;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

Put these together and we'll get a simple alert message looking like this :

I went ahead and fixed the position of the alert message to the bottom right corner. However, feel free to tweak it and make it work exactly the way you want!

Step 5 : Make the alert message pop up

Since the alert message is hidden by default, we need to start by adding this line of code to hide it:

$("#alertMessage").hide();

Now, we will make the alert message visible for 3 seconds (but feel free to change that duration to your choice) whenever the user clicks on the .color-palette element.

var copyText = $(this).find(".color-palette-hex-code").text();
  navigator.clipboard.writeText(copyText).then(() => {
    // Alert the user that the action took place.
    $("#alertMessage").show();
    // hide the alert message
    setTimeout(function () 
      $("#alertMessage").hide();
  }, 3000);

Now, when we bring all of these pieces together, we've got our final JavaScript code, ready to rock and roll:

$(document).ready(function () {
  // Hide the alert message by default
  $("#alertMessage").hide();

  // when the user clicks the color palette
  $(".color-palette").click(function (e) {
    // copy the code to clipboard
    var copyText = $(this).find(".color-palette-hex-code").text();
    navigator.clipboard.writeText(copyText).then(() => {
      // Alert the user that the action took place.
      $("#alertMessage").show();
      // hide the alert message
      setTimeout(function () {
        $("#alertMessage").hide();
      }, 3000);
    });
  });
});

And That's It!

Thanks for reading, and happy coding!

DEV Community: Zoe

Liveness vs Readiness in Kubernetes: The Truth for Frontend Apps

What I Used to Think

What I Actually Learned

When You Should Actually Separate Them

Infra-Side Example: One Path, Two Probes

App-Side Example

Final Thoughts

When Major GC Strikes: Why Your JVM App Suddenly Freezes

Introduction

⚠️ TL;DR - Watch out for Major GC!

How Java Applications Use Memory

1. Heap Memory - Our Focus Area For This Post

2. Stack Memory

3. Metaspace (Java 8+)

4. Code Cache

5. Native Memory

What Is the Heap?

Heap Structure

GC Lifecycle Example

Heap Management Tips

Minor GC vs Major GC

Minor GC

Major GC

Full GC

GC Spikes: What Do They Mean?

GC Metric Analysis

Minor Collection Count

Minor Collection Time

Major Collection Count

Major Collection Time

Old Gen Size

My Personal Experience

Root Cause

Final TL;DR

Thank You!

Scaling Node.js (Next.js) in Kubernetes: Lessons from a CPU Bottleneck

Intro

Step 1: Enable Multi-CPU in Node.js

Step 2: Actually Give It More CPU in Kubernetes

But This Isn't Multithreading

Why JS Is Single-Threaded (and That's Okay)

TL;DR

Thank You!

Getting Familiar with GSAP ScrollTrigger 🌱

Let's break down the following code one by one.

Trigger

Breakdown

Start

Breakdown

End

Breakdown

Pin

Breakdown

Scrub

Breakdown

ToggleActions

Breakdown

Ease

Breakdown

ToggleClass

Breakdown

And That's It!

Create a Dark/Light Mode Toggle using JavaScript & LocalStorage 💫

The HTML

CSS

JavaScript

Listen for change in checkbox

Saving User's Preference to LocalStorage

1. Checking the user's OS settings

Checking LocalStorage to override OS theme settings

That's it! 🥳

Create a Copy-Pasteable Color Palette to Simplify Your Workflow 🚀

Step 1 : Find Commonly Used Colors

Step 2 : HTML

Step 2 : CSS

Step 3 : JavaScript

Step 4 : Create an alert message

Step 5 : Make the alert message pop up

And That's It!