DEV Community: Mark Yu

Premium micro-interactions in React 19 (without the jank)

Mark Yu — Thu, 04 Jun 2026 03:31:22 +0000

There's a specific kind of bad animation I notice immediately: the count-up stat that stutters as it ticks, the progress bar that lags a frame behind your scroll, the "active" tab underline that snaps instead of glides. None of it is broken, exactly. It just feels cheap. And nine times out of ten, the cause is the same — the animation is being driven through React state, so every frame triggers a re-render, and the main thread can't keep up.

I build motion-heavy interfaces for a living, mostly in Next.js 16 and React 19, and I've landed on a small set of patterns that stay smooth because they bypass React's render loop entirely. They lean on Motion — the library formerly known as Framer Motion. It went independent and got renamed in 2025, so the package is now motion and the import you want is motion/react, not framer-motion (the APIs are identical, only the import path changed).

Here are three I reach for constantly, plus the reduced-motion discipline that should wrap all of them.

The mental model: MotionValues over state

The single idea that fixes most jank: a MotionValue is a value Motion tracks outside of React. When it changes, Motion updates the DOM directly via transform or opacity — it does not call setState, so your component doesn't re-render. That's the whole trick. A number ticking from 0 to 4,200 should touch the DOM ~60 times a second and re-render React zero times.

If a value changes every frame, it should live in a MotionValue, not in useState. State is for things that change when a user does something; MotionValues are for things that change continuously.

Keep that line in your head and the rest of this falls out naturally.

1. A reading-progress bar with `useScroll` + `useSpring`

The bar at the top of an article that fills as you read. The naive version listens to scroll events and sets state — which is exactly the re-render trap. Motion's useScroll hands you scroll position as a MotionValue already, so there's nothing to re-render.

useScroll returns scrollYProgress, a MotionValue clamped to 0–1. Pipe it straight into scaleX and you have a bar. But raw scroll progress tracks your finger 1:1, which reads a little mechanical. Wrapping it in useSpring adds just enough weight that it feels like it has momentum.

"use client";

import { motion, useScroll, useSpring } from "motion/react";

export function ReadingProgress() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 120,
    damping: 30,
    restDelta: 0.001,
  });

  return (
    <motion.div
      aria-hidden
      style={{ scaleX, transformOrigin: "0%" }}
      className="fixed inset-x-0 top-0 z-50 h-1 bg-foreground/80"
    />
  );
}

Two details that matter. transformOrigin: "0%" makes it grow from the left instead of the center — easy to forget, very obvious when wrong. And aria-hidden because this is pure decoration; a screen reader announcing "progress bar, 14 percent" on every scroll tick is noise, not information.

This one is safe under reduced motion, and I'll come back to why. It reflects something the user is physically doing. It isn't animating on its own.

2. A count-up that animates only when you scroll to it

This is the pattern people get wrong most often, so it's worth doing carefully. You want a stat — "4,200 projects shipped" — that counts up, but only when it scrolls into view, and without hammering React with 60 re-renders a second.

Four hooks compose here:

useInView tells you when the element is on screen (returns a plain boolean).
useMotionValue holds the live number, off to the side of React.
animate drives that MotionValue from 0 to the target.
useTransform formats the raw number into a rounded, comma-grouped string — also as a MotionValue.

The number lands in the DOM through <motion.span>, which subscribes to the formatted MotionValue and patches textContent directly. React renders this component once.

"use client";

import { useEffect, useRef } from "react";
import {
  animate,
  motion,
  useInView,
  useMotionValue,
  useReducedMotion,
  useTransform,
} from "motion/react";

export function CountUp({ to, suffix = "" }: { to: number; suffix?: string }) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.6 });
  const prefersReduced = useReducedMotion();

  const count = useMotionValue(0);
  const rounded = useTransform(count, (v) =>
    Math.round(v).toLocaleString(),
  );

  useEffect(() => {
    if (!inView) return;

    // Reduced motion: skip the tween, just show the final number.
    if (prefersReduced) {
      count.set(to);
      return;
    }

    const controls = animate(count, to, {
      duration: 1.4,
      ease: [0.16, 1, 0.3, 1], // expo-out: fast start, soft landing
    });
    return () => controls.stop();
  }, [inView, prefersReduced, to, count]);

  return (
    <span ref={ref} className="tabular-nums">
      <motion.span>{rounded}</motion.span>
      {suffix}
    </span>
  );
}

A few things I learned the hard way:

amount: 0.6 means "fire when 60% of the element is visible." With once: true, it animates a single time and then stops observing — no replay every time the user scrolls back up, which gets annoying fast.
tabular-nums (Tailwind's font-variant-numeric: tabular-nums) keeps each digit the same width. Without it, the number visibly jitters left and right as digits change width mid-count. This is the difference between "premium" and "why is it twitching."
Always return controls.stop() from the effect. If the component unmounts mid-animation, you don't want a dangling tween writing to a dead node.

The reduced-motion branch is doing real work here: instead of a 1.4s tween, it snaps straight to the final value. The user still gets the information — they just don't get the autonomous movement.

3. A shared-layout active indicator with `layoutId`

The gliding pill or underline behind the active nav item. The temptation is to measure each item's position and animate left/width by hand. Don't. Motion's shared layout animations do it for you: give an element a layoutId, render it inside whichever item is active, and when "active" moves, Motion animates the element from its old box to its new box automatically. It's measuring getBoundingClientRect and tweening the delta under the hood — you just declare intent.

"use client";

import { useState } from "react";
import { motion, useReducedMotion } from "motion/react";

const tabs = ["Work", "Notes", "Games", "Shop"] as const;

export function TabRail() {
  const [active, setActive] = useState<(typeof tabs)[number]>("Work");
  const prefersReduced = useReducedMotion();

  return (
    <nav className="flex gap-1 rounded-full bg-muted p-1">
      {tabs.map((tab) => {
        const isActive = tab === active;
        return (
          <button
            key={tab}
            onClick={() => setActive(tab)}
            className="relative rounded-full px-4 py-1.5 text-sm font-medium"
          >
            {isActive && (
              <motion.span
                layoutId="tab-pill"
                className="absolute inset-0 rounded-full bg-background shadow-sm"
                // Skip the glide for reduced motion; the pill still
                // moves, it just teleports instead of sliding.
                transition={
                  prefersReduced
                    ? { duration: 0 }
                    : { type: "spring", stiffness: 380, damping: 32 }
                }
              />
            )}
            <span className="relative z-10">{tab}</span>
          </button>
        );
      })}
    </nav>
  );
}

The pill (layoutId="tab-pill") is rendered inside whatever button is active. Click another tab, and because only one element in the tree owns that layoutId, Motion treats it as the same element moving and springs it across. The label sits at z-10 so the pill slides behind the text, not over it. Note the pill is position: absolute inside a position: relative button — layoutId animates layout boxes, so both elements need to participate in positioning for the measurement to be correct.

Reduced motion is a feature, not a fallback

You'll have noticed useReducedMotion() threading through all three. This is the part I care about most, because "premium" and "accessible" are the same goal, not competing ones. Roughly one in three people has some motion sensitivity setting engaged, and for some of them, the wrong animation is genuinely nauseating.

The principle I follow:

Scroll-reflective motion is fine under reduced motion. Autonomous motion is not.

If the user is driving it — scrolling, dragging, hovering — keeping the motion is honest feedback. The progress bar in §1 stays. But anything that moves on its own — a number tweening up, a pill springing sideways, a parallax drift — should be cut or made instant when prefers-reduced-motion: reduce is set. That's why the count-up snaps to its value and the tab pill teleports.

Pattern	Driven by	Under reduced motion
Reading progress bar	User scroll	Keep it (reflective)
Count-up number	Time / autoplay	Snap to final value
`layoutId` pill	State change	Teleport, no glide

For pure-CSS bits, lean on Tailwind's built-in variants rather than re-checking the media query in JS. motion-safe: only applies the class when motion is allowed; motion-reduce: only when it's reduced. They map directly to the prefers-reduced-motion media feature.

<button
  className="
    transition-transform
    motion-safe:hover:-translate-y-0.5
    motion-reduce:transition-none
  "
>
  Hover me
</button>

Here the lift only happens for users who want motion, and the transition is fully disabled (no fade either) for users who don't. Pairing useReducedMotion() for the JS-driven MotionValue work with motion-safe: / motion-reduce: for the CSS-driven hover and focus states covers both halves cleanly.

One more thing worth saying out loud: respect the OS setting; don't add your own "disable animations" toggle as if it's a substitute. People already set prefers-reduced-motion once, at the system level. Reading it is the whole contract.

What actually makes it feel premium

It's not the spring physics or the easing curve, in the end. It's three quieter decisions: animate transforms and opacity so the work stays off the main thread, route per-frame values through MotionValues so React never re-renders during the animation, and treat reduced motion as a real design state instead of an afterthought. Get those right and even a plain fade feels deliberate.

Start with the count-up — it's the one that most visibly separates a polished UI from a janky one, and it's maybe twenty lines. Steal it, drop in your own numbers, and turn on reduced motion in your OS to watch it do the right thing.

Cover photo by Liana S on Unsplash.

11 Free 3D Asset Sites for Games, Blender, and WebGL

Mark Yu — Thu, 04 Jun 2026 02:05:21 +0000

Finding good 3D assets is one of those tasks that sounds easy until you actually need them.

You search “free 3D model,” open ten tabs, and suddenly you are trapped in a maze of:

weird licenses
broken downloads
models with 900k polygons
missing textures
.max files you cannot open
“free” assets that somehow cost $19.99
characters rigged like they just survived a horror movie

Very normal. Very indie dev.

Whether you are building a game, a WebGL experience, a Three.js landing page, a Blender scene, or just a fast prototype, the right asset library can save hours or even days.

This guide breaks down some of the best places to find free 3D assets, what each site is good for, and what you should check before using those assets in a real project.

First: “Free” Does Not Always Mean “Use Anywhere”

Before downloading anything, check the license.

This is the boring part, but it matters.

A free model can still have restrictions. Some assets are free for personal use but not for commercial use. Some require attribution. Some can be used in a game but cannot be redistributed as raw files. Some AI-generated or marketplace assets may have extra usage rules.

Before using an asset in a public project, check:

Question	Why it matters
Can I use it commercially?	Important for games, SaaS, client work, and paid apps
Do I need attribution?	Some Creative Commons licenses require credit
Can I modify it?	You may need to optimize, recolor, rig, or remix it
Can I redistribute it?	Important if your app lets users download/export assets
What format is provided?	GLB/GLTF is easier for web, FBX is common for game engines
Are textures included?	Missing textures can turn your model into gray sadness

My personal rule:

If the license is unclear, do not ship it.

For prototypes, you can be a little more flexible.
For production, be strict.

Future-you will appreciate it.

Best Overall Free 3D Asset Sites

1. Sketchfab

Sketchfab is one of the biggest places to find 3D models online.

It has everything:

characters
props
architecture
scanned objects
vehicles
animals
historical artifacts
stylized assets
realistic assets

The best feature is the online 3D preview. You can rotate the model, inspect the materials, and check if it actually looks usable before downloading.

That saves a lot of pain.

Use Sketchfab when you need:

a wide variety of models
online preview before download
realistic scans
museum-style assets
GLTF/GLB, FBX, OBJ, and other common formats

The main thing to watch is licensing. Sketchfab has many different license types, so do not assume every downloadable model is safe for commercial use.

Good for:

WebGL projects
Three.js scenes
Blender references
AR/VR prototypes
Historical or scanned objects

2. Poly Pizza

Poly Pizza is excellent for low-poly models.

The style is clean, lightweight, and very friendly for browser-based 3D projects. If you are building a cozy game, stylized portfolio, WebGL toy, or fast prototype, this site is a really nice starting point.

Use Poly Pizza when you want:

low-poly style
small file sizes
quick downloads
GLB/GLTF-friendly assets
models that feel consistent together

This is especially useful for Three.js projects because GLB and GLTF are usually the smoothest formats for the web.

Good for:

Three.js
React Three Fibre
Web games
Low-poly prototypes
Stylized environments

3. Quaternius

Quaternius is one of my favourite sources for free game-ready low-poly assets.

The assets are simple, clean, and often organized into packs. That makes them much easier to use than grabbing random models from ten different sites with completely different art styles.

You can find things like:

fantasy characters
sci-fi props
modular buildings
weapons
creatures
vehicles
animated assets
environment packs

The biggest advantage is style consistency.

If you are building a game prototype, consistency is more important than a single perfect, high-detail model. A simple art style that feels unified will usually look better than a chaotic mix of random “free” assets.

Good for:

Unity
Godot
Unreal Engine
Low-poly RPGs
Game jams
Prototype worlds

4. Kenney Assets

Kenney is basically the holy grail for game prototyping.

The site includes a huge range of assets:

2D sprites
3D models
UI kits
audio
textures
game icons
starter kits

Kenney assets are especially useful when you want to build fast without getting blocked by art.

For example, instead of spending three days making placeholder UI buttons, you can use a clean UI pack and focus on gameplay.

That is a massive productivity win.

Good for:

Game jams
Indie game prototypes
UI mockups
Educational projects
Godot/Unity experiments

If you are a solo dev, Kenney is the kind of resource folder you keep bookmarked forever.

Best for Realistic Rendering and Blender Scenes

5. Poly Haven

Poly Haven is amazing if you care about realistic rendering.

It provides:

HDRIs
textures
3D models

The HDRIs alone are worth bookmarking. Good lighting can instantly make a Blender render look more professional.

Poly Haven is especially useful for:

product renders
Blender scenes
architectural visualization
realistic materials
VFX-style workflows
lighting experiments

For example, if your 3D model looks flat and boring, the problem might not be the model. It might be the lighting.

Adding a good HDRI can turn “student project at 3 AM” into “okay wait this actually looks expensive.”

Good for:

Blender
Cycles rendering
Product visualization
Realistic environments
Material studies

6. TurboSquid Free Section

TurboSquid is more marketplace-style, but it has a free model section.

You can find high-quality assets, especially for:

architecture
furniture
vehicles
props
industrial objects
realistic scenes

The quality can be strong, but always check the format and license.

Some models may be built for professional DCC software such as 3ds Max or Maya, which might not directly fit your workflow.

Good for:

Architecture visualization
Product mockups
Realistic props
Blender scenes
Commercial-looking renders

Watch out for:

Huge file sizes
Complex materials
Software-specific formats
Unclear texture paths
High polygon counts

7. CGTrader Free Models

CGTrader is another large marketplace with a free model section.

It is useful when you need something specific, like:

furniture
vehicles
human anatomy
electronics
machinery
decorative props
printable models

The quality varies a lot because it is a marketplace. Some models are production-ready, and some need cleanup.

Use it when you have a specific search target.

Good for:

Specific props
Hard-surface models
Architecture details
Product visualization
3D printing references

8. Free3D

Free3D is a straightforward directory of free 3D models.

It is not always as polished as some newer asset sites, but it can be useful when you need basic models quickly.

You will find a lot of common formats:

OBJ
FBX
3DS
BLEND
STL

Free3D is best treated as a search-and-filter resource. Download carefully, inspect the files, and check whether textures are included.

Good for:

Basic props
Learning projects
Blender practice
Quick placeholder assets

Best for Game Art Communities

9. OpenGameArt

OpenGameArt is a community-driven library for game assets.

It includes:

2D art
3D models
textures
music
sound effects
UI elements

The main strength is variety. The main weakness is consistency.

Because it is community-based, assets can vary widely in style, format, and license. You need to read the asset page carefully.

OpenGameArt is great for game jams, learning projects, and prototypes that require more than just 3D models.

Good for:

Game jams
Open-source games
Prototype sound/music
Pixel art + 3D mixes
Small indie projects

Important:

Always check each asset's individual license.

Best for AI-Generated or Experimental 3D

10. Meshy

Meshy differs from traditional asset libraries in that it focuses on AI-generated 3D content.

Instead of only searching for existing models, you can generate assets from prompts or images depending on the available tools and plan.

This can be useful when you need:

concept models
fast idea exploration
rough props
stylized prototypes
unique objects

But AI-generated 3D still needs careful review.

Check for:

messy topology
broken UVs
strange geometry
inconsistent textures
licensing terms
commercial usage rules

AI 3D is powerful, but it is not magic. Sometimes it gives you a beautiful object. Sometimes it gives you a chair with the spiritual energy of a crab.

Still useful, though.

Good for:

Concept exploration
Prototype props
Fast ideation
Stylized experiments

Best for Online Editing

11. Clara.io

Clara.io is an online 3D modeling and editing platform with community assets.

It can be useful if you want to inspect or edit models without immediately opening Blender or another full desktop app.

The quality of free models varies, but the browser-based editing angle makes it interesting.

Good for:

Online 3D editing
Quick model inspection
Learning workflows
Browser-based experiments

Quick Recommendation Table

Site	Best For	Style	Watch Out For
Sketchfab	Huge variety, scans, web preview	Mixed	License varies
Poly Pizza	Lightweight low-poly assets	Low-poly	Limited realism
Quaternius	Game-ready low-poly packs	Low-poly	Stylized only
Kenney	Game prototypes and UI	Clean/simple	Not always high-detail
Poly Haven	HDRIs, textures, realistic models	Realistic	Fewer stylized game packs
TurboSquid	Professional free models	Realistic/mixed	Heavy files, license checks
CGTrader	Specific marketplace assets	Mixed	Quality varies
Free3D	Basic free model search	Mixed	Cleanup may be needed
OpenGameArt	Game art community	Mixed	License varies per asset
Meshy	AI-generated 3D	Mixed/AI	Topology and license review
Clara.io	Online editing/community models	Mixed	Quality varies

Which Site Should You Use?

Here is the simple version.

For Three.js / React Three Fiber

Start with:

Poly Pizza
Sketchfab
Quaternius
Kenney

Prioritize:

GLB
GLTF
Low polygon count
Small texture sizes
Clear license

WebGL performance matters. A beautiful 500 MB model is not a vibe if your landing page turns into a space heater.

For Unity / Godot / Unreal Prototypes

Start with:

Kenney
Quaternius
OpenGameArt
Sketchfab

Prioritize:

FBX
GLB
Animation support
Consistent style packs
Commercial-friendly licenses

For game prototypes, matching art style is usually more important than ultra-high fidelity.

For Blender Rendering

Start with:

Poly Haven
Sketchfab
TurboSquid
CGTrader
Free3D

Prioritize:

BLEND
OBJ
FBX
High-quality textures
HDRI lighting
Good material setup

If you are rendering still images or product shots, file size is less of a concern than in real-time WebGL.

For Architecture or Product Visualization

Start with:

TurboSquid
CGTrader
Sketchfab
Poly Haven

Prioritize:

Scale accuracy
Clean materials
Realistic textures
OBJ/FBX/BLEND support

A Practical Asset Download Checklist

Before adding a free 3D model to your project, check this:

[ ] Is the license clear?
[ ] Can I use it commercially?
[ ] Is attribution required?
[ ] Does the model include textures?
[ ] Is the polygon count reasonable?
[ ] Does it use a web-friendly/game-friendly format?
[ ] Does it match my project's art style?
[ ] Does it need cleanup in Blender?
[ ] Is the file size acceptable?
[ ] Can I optimize it without breaking the asset?

This checklist saves pain.

Trust me, nothing ruins your flow like importing a “simple chair” and discovering it has 1.2 million triangles and 47 missing texture files.

Basic Three.js GLB Import Example

For web projects, GLB is usually the cleanest format.

Here is a simple Three.js example:

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const scene = new THREE.Scene();

const loader = new GLTFLoader();

loader.load(
  "/models/character.glb",
  (gltf) => {
    const model = gltf.scene;

    model.position.set(0, 0, 0);
    model.scale.set(1, 1, 1);

    scene.add(model);
  },
  (event) => {
    const progress = (event.loaded / event.total) * 100;
    console.log(`Loading: ${progress.toFixed(2)}%`);
  },
  (error) => {
    console.error("Failed to load model:", error);
  }
);

If the model appears too large, too small, rotated, or invisible, that is normal.

3D assets from different sources often use different:

scales
origins
rotations
material setups
unit systems

This is why Blender cleanup is often part of the workflow.

React Three Fiber Example

If you are using React Three Fiber, the import can be cleaner:

import { useGLTF } from "@react-three/drei";

type ModelProps = {
  url: string;
};

export function Model({ url }: ModelProps) {
  const gltf = useGLTF(url);

  return <primitive object={gltf.scene} />;
}

Usage:

<Model url="/models/tree.glb" />

For production, you may want to preload the model:

useGLTF.preload("/models/tree.glb");

This helps when you know the model will be needed soon.

Optimize Models Before Shipping

A free model is rarely ready for production as-is.

Common cleanup steps:

Open it in Blender.
Check scale and rotation.
Remove hidden objects.
Reduce unnecessary geometry.
Compress textures.
Export as GLB.
Test loading time.
Test on a slower device.

For web, you can also use tools like gltf-transform.

Example:

npx @gltf-transform/cli optimize input.glb output.glb

This can reduce file size and improve runtime performance.

For web projects, optimization is not optional. It is the difference between “cool interactive 3D experience” and “my laptop fan is filing a complaint.”

Suggested Folder Structure for Web Projects

For a Next.js or Vite project, I like keeping models organized like this:

public/
  models/
    characters/
      robot.glb
      robot-preview.webp
      robot-license.txt
    props/
      desk.glb
      desk-license.txt
    environments/
      low-poly-room.glb
      low-poly-room-license.txt

Do not just throw everything into /models.

Future-you will suffer.

Also keep a license file beside the asset when possible.

That makes it easier to track attribution and commercial usage later.

My Personal Ranking

If I were starting a new project today, this is how I would choose:

For a fast indie game prototype

1. Kenney
2. Quaternius
3. Poly Pizza
4. OpenGameArt

For a WebGL portfolio or Three.js landing page

1. Poly Pizza
2. Sketchfab
3. Poly Haven
4. Quaternius

For a Blender render or cinematic scene

1. Poly Haven
2. Sketchfab
3. TurboSquid
4. CGTrader

For specific object hunting

1. Sketchfab
2. CGTrader
3. TurboSquid
4. Free3D

Final Thoughts

Free 3D assets are not just “free stuff.”

They are a serious productivity tool.

The right asset pack can help you:

prototype faster
test gameplay earlier
improve visual quality
avoid placeholder fatigue
build stronger demos
learn 3D workflows faster

But the key is not just downloading more assets.

The key is choosing assets that match your project’s:

license needs
art direction
technical constraints
engine format
performance budget

For me, the best starter stack is:

Kenney for game prototypes
Quaternius for low-poly game worlds
Poly Pizza for lightweight WebGL
Poly Haven for realistic lighting/materials
Sketchfab when I need variety

That setup covers most projects without drowning you in asset chaos.

Use free assets wisely, keep your license notes organized, optimize before shipping, and your prototype will feel way more polished without requiring a full art department.

Tiny budget. Big upgrade. Very legal. We love that.

Zero-CLS Images in Next.js 16: LQIP Blur-Up Done Right

Mark Yu — Thu, 04 Jun 2026 01:52:51 +0000

You scroll, start reading the headline, and then the hero image finally loads.

Boom.

The whole paragraph gets shoved down half a screen.

You lose your place, your brain sighs, and your website suddenly feels like it was assembled with duct tape and hope.

On slow connections, there is another version of the same pain: the layout stays still, but the image goes from a dead gray box to a sharp photo with a harsh visual pop. No easing. No warmth. Just vibes getting absolutely tackled.

I have shipped both bugs before.

They look related, but they are actually two different image-loading problems:

Layout shift
The browser did not know how much space to reserve before the image loaded.
Abrupt image pop-in
The space was reserved, but the transition from placeholder to final image felt rough.

The first one is a correctness issue.
The second one is a polish issue.

In this post, I’ll show how I handle both in Next.js 16, using next/image, LQIP blur-up placeholders, and remote image data from a real app-style setup with React 19, Tailwind v4, and Supabase.

Why This Matters for Core Web Vitals

Layout shift is measured by Cumulative Layout Shift, usually called CLS.

Google’s guidance is simple: a good CLS score is 0.1 or less, measured at the 75th percentile of page visits. Anything above 0.25 is considered poor.

A single unreserved hero image can blow through that budget by itself because CLS is based on:

how much visible content moved
how far it moved
how unexpected the movement was

The image “pop” is a different problem. That one is more closely tied to perceived loading quality and often affects your Largest Contentful Paint, or LCP, especially when the image is your above-the-fold hero.

You cannot make a large remote image magically arrive instantly. Sadly, npm install faster-internet is still not real.

But you can make the wait feel intentional.

That is the job of a Low-Quality Image Placeholder, or LQIP.

Reserving space is correctness.
Blur-up is polish.
Do the correctness part even if you skip the polish.

Reserve the Image Box Before the Image Loads

The root cause of image-related CLS is simple:

The browser does not know the final image dimensions early enough, so it cannot reserve the correct space.

The fix is also simple:

Give the browser enough information to calculate the image’s aspect ratio before the image bytes arrive.

With next/image, that usually means passing the intrinsic width and height.

import Image from "next/image";

export function Figure({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={1600}
      height={900}
      sizes="(max-width: 768px) 100vw, 768px"
      style={{ width: "100%", height: "auto" }}
    />
  );
}

The important part is this pair:

width={1600}
height={900}

That tells the browser the image has a 16:9 aspect ratio.

Then this part makes it responsive:

style={{ width: "100%", height: "auto" }}

Do not forget height: "auto".

If you set a responsive width but accidentally force the height, you can fight the intrinsic aspect ratio and introduce weird stretching or layout instability.

Not very slay.

When You Do Not Know the Image Dimensions

Sometimes you do not have reliable dimensions available.

Common examples:

user uploads
CMS images
Supabase Storage images
S3 images
third-party remote URLs

In those cases, fill can be a better fit.

But with fill, the image does not reserve space by itself. The parent container owns the layout.

import Image from "next/image";

export function FillImage({ src, alt }: { src: string; alt: string }) {
  return (
    <div style={{ position: "relative", aspectRatio: "16 / 9" }}>
      <Image
        src={src}
        alt={alt}
        fill
        sizes="(max-width: 768px) 100vw, 768px"
        style={{ objectFit: "cover" }}
      />
    </div>
  );
}

For fill, the parent needs:

position: "relative"

And to prevent CLS, the parent also needs a reserved shape:

aspectRatio: "16 / 9"

So your two stable layout patterns are:

<Image width={1600} height={900} />

or:

<div style={{ position: "relative", aspectRatio: "16 / 9" }}>
  <Image fill />
</div>

Both can produce zero image-related CLS when used correctly.

Now we can talk about the blur.

Static Imports Get Blur Automatically. Remote Images Do Not.

This is the part that trips up a lot of people.

In Next.js, placeholder="blur" behaves differently depending on where the image comes from.

Image source	Automatic `blurDataURL`?	What you do
Static import	Yes	Add `placeholder="blur"`
Remote URL	No	Generate and pass `blurDataURL` yourself
Dynamic CMS/Supabase/S3 URL	No	Store and render your own `blurDataURL`

For a bundled local image, this is enough:

import Image from "next/image";
import hero from "@/assets/hero.jpg";

export function Hero() {
  return (
    <Image
      src={hero}
      alt="Studio desk at dusk"
      placeholder="blur"
      sizes="100vw"
      style={{ width: "100%", height: "auto" }}
    />
  );
}

Because hero is a static import, Next.js can inspect the image at build time and generate the blur data automatically.

But real apps usually do not live in static-import paradise.

Real apps have:

user uploads
remote image URLs
database-driven content
CMS assets
product images
avatars
galleries

For those, Next.js does not see the image file at build time.

So if you want blur-up for remote images, you need to generate the LQIP yourself.

The cleanest time to do that is usually when the image is uploaded.

Generate a Tiny LQIP at Upload Time

A LQIP is just a very small version of the image, usually encoded as a base64 data URL.

The image can be tiny — around 10 to 20 pixels on the long edge — because next/image will enlarge and blur it anyway.

Here is a browser-side helper that uses a canvas to generate a small base64 JPEG:

// lib/lqip.ts

/**
 * Downscale an image File into a tiny base64 LQIP.
 *
 * The result is designed for next/image's blurDataURL prop.
 */
export async function makeLqip(file: File, maxEdge = 16): Promise<string> {
  const bitmap = await createImageBitmap(file);

  const scale = maxEdge / Math.max(bitmap.width, bitmap.height);
  const width = Math.max(1, Math.round(bitmap.width * scale));
  const height = Math.max(1, Math.round(bitmap.height * scale));

  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext("2d");

  if (!ctx) {
    throw new Error("2D canvas context unavailable");
  }

  ctx.drawImage(bitmap, 0, 0, width, height);

  bitmap.close();

  /**
   * Low JPEG quality is fine here.
   * The image will be blurred, so compression artifacts are not visible.
   */
  return canvas.toDataURL("image/jpeg", 0.5);
}

A few details matter here.

First, createImageBitmap() is nicer than manually creating an <img> element and waiting for onload.

Second, keep the output tiny.

For a blur placeholder, you are not trying to preserve detail. You are trying to preserve the rough color composition while the real image loads.

You can sanity-check the output size like this:

const lqip = await makeLqip(file);

console.log(`${(lqip.length / 1024).toFixed(2)} KB`);

For a 16px JPEG placeholder, I usually expect the string to be comfortably under 1 KB.

If your placeholder is multiple kilobytes, it is too big. At that point, the placeholder starts becoming its own performance problem, which is very “we fixed the bug by adding a new bug.”

Store the LQIP Beside the Image

The placeholder belongs with the same row that owns the image.

If you are using Supabase/Postgres, you can add a nullable column:

alter table public.photos
  add column blur_data_url text;

I also like adding a constraint so an accidentally huge placeholder cannot sneak into the database:

alter table public.photos
  add constraint blur_data_url_len check (
    blur_data_url is null or char_length(blur_data_url) <= 2048
  );

This keeps the column flexible but protected.

Nullable matters because older images may not have placeholders yet. Your UI should degrade gracefully instead of crashing because one legacy row is missing blur data.

You should also store the image’s natural dimensions:

alter table public.photos
  add column width integer,
  add column height integer;

Then, during upload:

const blurDataURL = await makeLqip(file);

const { error } = await supabase.from("photos").insert({
  storage_path: path,
  width: naturalWidth,
  height: naturalHeight,
  blur_data_url: blurDataURL,
});

if (error) {
  throw error;
}

Now each image row has the three things your frontend needs:

{
  width: number;
  height: number;
  blur_data_url: string | null;
}

The dimensions prevent CLS.

The blur data improves perceived loading.

Separate responsibilities. Clean mental model.

Render Remote Images Safely

Now the payoff.

When you render the image, only enable placeholder="blur" if a valid blurDataURL exists.

import Image from "next/image";

type Photo = {
  url: string;
  alt: string;
  width: number;
  height: number;
  blurDataURL: string | null;
};

export function PhotoCard({
  url,
  alt,
  width,
  height,
  blurDataURL,
}: Photo) {
  return (
    <div
      style={{
        position: "relative",
        aspectRatio: `${width} / ${height}`,
      }}
    >
      <Image
        src={url}
        alt={alt}
        fill
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        placeholder={blurDataURL ? "blur" : undefined}
        blurDataURL={blurDataURL ?? undefined}
        style={{ objectFit: "cover" }}
      />
    </div>
  );
}

This conditional is important:

placeholder={blurDataURL ? "blur" : undefined}
blurDataURL={blurDataURL ?? undefined}

Do not do this blindly:

placeholder="blur"

If the image is remote and blurDataURL is missing, you are asking Next.js to blur something that does not exist.

The safe version means:

images with LQIP get blur-up
old rows without LQIP still load normally
layout remains stable either way

That last point is the real win.

The parent’s aspectRatio reserves the space, so your CLS stays stable whether the blur placeholder exists or not.

Again:

CLS prevention should not depend on LQIP.
LQIP is visual polish, not layout correctness.

Do Not Skip `sizes`

This is the sneaky performance footgun.

When using responsive images, sizes tells the browser how wide the image will be at different viewport widths.

For example:

sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

This means:

phones: image is full viewport width
tablets/small laptops: image is half viewport width
desktop: image is one-third viewport width

That matches a common responsive gallery layout.

If you skip sizes, the browser may assume the image renders at 100vw. That means a small grid thumbnail can accidentally download a much larger image than needed.

Your page still works, but it wastes bandwidth.

Classic “it works on my machine” energy.

For a single article image, this might be fine:

sizes="(max-width: 768px) 100vw, 768px"

For a three-column gallery, this is better:

sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

Match sizes to the actual rendered layout.

That is the rule.

The LCP Image: Use `preload`, Not `priority`

In older Next.js projects, you might see this:

<Image priority />

In Next.js 16, priority is deprecated in favor of preload.

For your above-the-fold hero image, use:

import Image from "next/image";
import hero from "@/assets/hero.jpg";

export function HeroImage() {
  return (
    <Image
      src={hero}
      alt="Studio desk at dusk"
      placeholder="blur"
      preload
      sizes="100vw"
      style={{ width: "100%", height: "auto" }}
    />
  );
}

preload tells Next.js to inject a preload link so the browser can start fetching the image earlier.

Use this carefully.

You usually want it on one image: the image most likely to be your LCP element.

Do not put preload on every image in a gallery.

That is like inviting 30 people through one doorway at the same time and wondering why nobody is moving.

For below-the-fold images, let lazy loading do its job.

One More Next.js 16 Detail: Image Qualities

In Next.js 16, if you use custom image quality values, make sure your next.config.ts allows them.

For example, if you pass:

<Image quality={90} />

Then your config should include that quality:

// next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    qualities: [75, 90],
  },
};

export default nextConfig;

If you do not need custom quality values, the default is fine.

Most of the time, I leave images at the default unless I have a specific reason to change them.

Full Example: Remote Supabase Image With Zero CLS and Blur-Up

Here is the complete pattern in one place.

import Image from "next/image";

type Photo = {
  id: string;
  url: string;
  alt: string | null;
  width: number;
  height: number;
  blurDataURL: string | null;
};

type PhotoGridProps = {
  photos: Photo[];
};

export function PhotoGrid({ photos }: PhotoGridProps) {
  return (
    <section className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
      {photos.map((photo) => (
        <article key={photo.id} className="overflow-hidden rounded-2xl">
          <div
            className="relative w-full"
            style={{
              aspectRatio: `${photo.width} / ${photo.height}`,
            }}
          >
            <Image
              src={photo.url}
              alt={photo.alt ?? ""}
              fill
              sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
              placeholder={photo.blurDataURL ? "blur" : undefined}
              blurDataURL={photo.blurDataURL ?? undefined}
              className="object-cover"
            />
          </div>
        </article>
      ))}
    </section>
  );
}

This gives you:

reserved layout space
responsive image loading
optional blur-up
safe fallback for old rows
no dependency on static imports
no server-side image processing required

Very clean. Very adult. Very “I actually care about performance.”

Testing It

After implementing this, test it like a user on a cursed coffee shop Wi-Fi connection.

Open Chrome DevTools:

Go to the Network tab.
Enable throttling.
Pick Slow 4G.
Reload the page.
Watch the image areas before the final images load.

You want to see:

the layout stays still
image boxes are reserved immediately
blur placeholders appear quickly
final images fade in without a harsh visual jump

Then check Lighthouse or your real-user monitoring data for CLS.

The goal is not just passing a synthetic test. The goal is making the page feel stable while real humans use it.

Common Mistakes

Mistake 1: Using `placeholder="blur"` on remote images without `blurDataURL`

This will not work reliably.

Remote images need your own placeholder.

placeholder={blurDataURL ? "blur" : undefined}
blurDataURL={blurDataURL ?? undefined}

Mistake 2: Thinking LQIP fixes CLS

It does not.

LQIP improves the loading transition.

Dimensions or aspect-ratio prevent layout shift.

Different bugs. Different fixes.

Mistake 3: Using `fill` without reserving parent space

This is unstable:

<div style={{ position: "relative" }}>
  <Image fill src={src} alt={alt} />
</div>

This is stable:

<div style={{ position: "relative", aspectRatio: "16 / 9" }}>
  <Image fill src={src} alt={alt} />
</div>

Mistake 4: Skipping `sizes`

If the image is responsive, write a real sizes string.

Otherwise, the browser may download bigger images than necessary.

Mistake 5: Preloading too many images

Only preload the likely LCP image.

Everything else can lazy-load.

Preloading a whole gallery is not optimization. It is network chaos in a nice jacket.

The Takeaway

Image loading has two separate problems:

The page shifts
The image appears too abruptly

Fix the first one by reserving layout space.

Use either:

<Image width={1600} height={900} />

or:

<div style={{ position: "relative", aspectRatio: "16 / 9" }}>
  <Image fill />
</div>

Fix the second one with a tiny LQIP blur placeholder.

For remote images, generate that placeholder yourself at upload time, store it beside the image, and render it conditionally:

placeholder={blurDataURL ? "blur" : undefined}
blurDataURL={blurDataURL ?? undefined}

Then add a real sizes string, preload only your LCP image, and test the page on a throttled connection.

That is the difference between a page that feels broken and one that feels deliberate.

The True Cost of Poor Data Quality: Why It Matters and How to Improve It

Mark Yu — Wed, 16 Oct 2024 02:19:45 +0000

In today’s fast-paced, data-driven world, businesses have more access to data than ever before. However, simply accumulating vast amounts of data is not enough. Through my experience, I've learned that poor data quality can be more harmful than having no data at all, leading to costly mistakes, lost revenue, and missed opportunities.

According to Gartner, poor data quality costs organizations an average of $12.9 million annually—a staggering figure that emphasizes just how critical accurate data is for success.

The Hidden Costs of Poor Data Quality

Misguided Decision-Making

One of the most damaging consequences of poor data quality is incorrect decision-making.

Example: Consider a retail company that uses sales data to decide which products to restock. If inaccurate inventory records suggest that a popular item isn’t selling well, the company might discontinue it, unknowingly cutting off a key revenue stream. The mistake could lead to lost sales and frustrated customers.

In my own experience, my team once launched a product feature based on incomplete data. We believed we understood our customers' needs, but key data segments were missing. As a result, the feature missed the mark, leading to wasted resources and lost revenue. This illustrates how crucial it is to validate the accuracy and completeness of data before making strategic decisions.

Delayed Problem Detection

Poor data quality can delay the recognition of issues, exacerbating the damage.

Example: A marketing team could launch a campaign based on flawed demographic data. If the target audience is inaccurately represented—say, due to duplicate records or outdated information—the campaign might underperform, and the team may not realize the error until weeks later. By that time, the campaign's budget and time have already been wasted.

Since business strategies often take time to yield results, the lag in identifying the underlying problem can further harm multiple areas before corrective measures are taken.

Missed Opportunities

Data quality issues don't just result in bad decisions; they can also cause businesses to overlook growth opportunities.

Example: A SaaS company may analyze user engagement metrics to identify which features need improvement. If data collection errors prevent the company from seeing certain user interactions, they might miss out on improving high-potential features that could significantly boost customer satisfaction and retention.

Opportunities that are missed due to inaccurate data can give competitors a critical advantage, potentially leaving a company in the dust.

Damaged Reputation and Low Morale

Errors stemming from poor data quality can damage a company’s reputation—both internally and externally.

Example: A financial institution may release inaccurate earnings reports due to data errors, shaking stakeholder confidence in the company’s leadership. Internally, employees may become frustrated if their hard work is undercut by unreliable data, leading to low morale and declining productivity.

When leadership consistently makes decisions based on faulty data, trust erodes within the organization, impacting everything from employee motivation to investor confidence.

Common Causes of Poor Data Quality

Human Error

Human error is a common cause of data inaccuracies.

Example: In data entry, a simple typo in a customer’s address can result in failed deliveries, frustrated customers, and additional shipping costs. In the healthcare industry, a wrong entry for medication dosage can have life-threatening consequences.

Even with automation, manual data input often remains necessary at some stages. In my team, a small copy-paste error led to duplicate CRM entries, skewing customer counts and impacting sales projections.

Lack of Data Standardization

Data inconsistencies arise when there’s no standard format for data entry and storage.

Example: A global company might use different variations for country names, such as "UK," "U.K.," and "United Kingdom." When consolidating data, these inconsistencies can distort analyses, leading to inaccurate reports about key markets.

Inconsistent data formats hinder accurate reporting and decision-making.

Poor Data Governance

As organizations grow, data governance becomes essential to maintaining data quality.

Example: Without clear policies, different departments may update customer data without synchronizing with others, leading to multiple versions of the same information. Inconsistent data can result in costly errors, such as sending out marketing materials to incorrect addresses or making flawed business forecasts.

Without proper governance, data becomes fragmented, inconsistent, and less reliable for decision-making.

Ineffective Data Integration

Merging data from multiple sources can introduce errors if the data isn’t cleaned and standardized beforehand.

Example: A company might integrate e-commerce data, CRM records, and social media analytics. However, if each system uses different categories for tracking customer behavior, the integrated data could paint an incomplete or misleading picture.

External data sources, especially those scraped from the web, often require extensive cleaning and transformation to avoid errors during integration.

How to Improve Data Quality

Improving data quality requires more than just fixing errors as they arise. It involves establishing processes and cultivating a culture that prioritizes data accuracy and integrity.

Define Clear Data Use Cases

Start by defining how your data will be used to focus on improving the most critical data sets.

Example: If a company is developing a machine learning model for customer churn prediction, knowing which attributes—such as transaction history or customer service interactions—are important will guide efforts to ensure the accuracy of those key data fields.

Understanding the purpose of the data helps prioritize what needs the most attention.

Implement Data Standardization

Standardizing how data is recorded and stored can reduce errors and inconsistencies.

Example: Using ISO country codes and adopting a consistent date format like YYYY-MM-DD minimizes discrepancies and confusion when consolidating or analyzing data.

Automation tools can assist in ensuring that data is standardized across the board.

Strengthen Data Governance

Establish robust data governance policies to ensure consistency in how data is collected, stored, and maintained.

Example: Appointing a dedicated data governance team responsible for setting data quality standards, managing access controls, and conducting regular audits can help ensure that data remains accurate and secure.

Clear roles, standards, and procedures help maintain data integrity throughout the organization.

Automate Data Entry and Processing

Automation can significantly reduce the likelihood of human error in data collection and processing.

Example: Using barcode scanners for inventory management eliminates manual entry errors. In customer interactions, automated forms with built-in validation rules ensure that data is entered in the correct format.

Automation boosts both accuracy and efficiency in data handling.

Conduct Regular Data Audits

Perform routine data audits to identify and address quality issues before they snowball into bigger problems.

Example: A quarterly audit of customer data may reveal outdated contact information or duplicate records. Addressing these discrepancies early helps maintain strong communication with customers and ensures compliance with privacy regulations.

Regular audits ensure that data remains clean, reliable, and useful over time.

Real-World Success Stories

Case Study: Improved Sales Forecasting

A manufacturing company struggled with inaccurate sales forecasts due to inconsistent data entry by the sales team across regions.

Solution:

Implemented a standardized CRM system with consistent data fields.
Trained the sales team on data entry best practices.
Performed regular data quality checks.

Result:

Sales forecast accuracy improved by 25%.
Inventory management became more efficient, reducing stockouts and excess inventory.

Case Study: Enhanced Customer Satisfaction

An e-commerce retailer faced high rates of shipping errors due to incorrect customer address entries.

Solution:

Introduced address verification software at checkout.
Automated the data entry process with validation rules and autofill features.

Result:

Shipping errors decreased by 40%.
Customer satisfaction and repeat purchase rates significantly improved.

Conclusion

High-quality data is fundamental for effective decision-making, building trust, and driving business success. Poor data quality, on the other hand, can silently damage a company through lost revenue, missed opportunities, and a tarnished reputation.

By focusing on data governance, standardization, automation, and regular audits, organizations can unlock the true potential of their data and position themselves for sustained growth and innovation. In my experience, treating data as a strategic asset has profound benefits, enabling smarter decisions and fostering a data-driven culture.

Key Takeaways

Data quality is crucial for business outcomes. Poor data leads to flawed decisions and missed opportunities.
Common causes include human error and lack of standardization. Identifying and addressing these root causes is the first step toward improving data quality.
Robust data governance and automation mitigate risks. Implementing these strategies enhances accuracy and efficiency.
Regular data audits are essential for proactive data management. Periodic checks help maintain data reliability and prevent long-term damage.

Feel free to share your thoughts and experiences with data quality in the comments below. Let’s continue learning from one another!

How to Determine the Network Address from a Known IP Address

Mark Yu — Wed, 16 Oct 2024 02:09:35 +0000

Ever wondered how devices communicate within a network? Or perhaps you've come across terms like "IP address" and "network address" and felt a bit lost? Don't worry—I've been there too! In this post, I'll walk you through how to figure out the network address when you know an IP address. It's a fundamental concept in networking that's easier to grasp than you might think.

Understanding the Basics

Before we dive into calculations, let's get clear on some fundamental concepts.

What is an IP Address?

An IP address is like the mailing address for your device on a network. It's a 32-bit number usually written in dotted decimal notation, such as 192.168.1.1. It consists of two parts:

Network Part: Identifies the specific network.
Host Part: Identifies the specific device (host) on that network.

What is a Network Address?

The network address identifies an entire network segment. Think of it as the street name in your mailing address, indicating the general area without specifying the exact house. It's crucial for routing data to the correct network.

The Role of the Subnet Mask

To determine the network address, we need to understand the subnet mask.

What is a Subnet Mask?

A subnet mask is a 32-bit number that separates the IP address into the network and host portions. It does this by masking the IP address with a series of 1s for the network part and 0s for the host part.

Common subnet masks:

255.0.0.0 for Class A networks
255.255.0.0 for Class B networks
255.255.255.0 for Class C networks

Step-by-Step Guide with Examples

Let's get hands-on with an example. Grab a calculator or open your favorite calculator app!

Example 1: Determining the Network Address

Given:

IP Address: 192.168.1.100
Subnet Mask: 255.255.255.0

Step 1: Convert IP Address and Subnet Mask to Binary

IP Address in Binary:

Octet	Decimal	Binary
1	192	11000000
2	168	10101000
3	1	00000001
4	100	01100100

So, the IP address is:

11000000.10101000.00000001.01100100

Subnet Mask in Binary:

Octet	Decimal	Binary
1	255	11111111
2	255	11111111
3	255	11111111
4	0	00000000

So, the subnet mask is:

11111111.11111111.11111111.00000000

Step 2: Perform a Bitwise AND Operation

Perform the AND operation on each corresponding bit:

IP Address:     11000000.10101000.00000001.01100100
Subnet Mask:    11111111.11111111.11111111.00000000
---------------------------------------------------
Network Address:11000000.10101000.00000001.00000000

Step 3: Convert the Result Back to Decimal

Convert each octet back to decimal:

Octet	Binary	Decimal
1	11000000	192
2	10101000	168
3	00000001	1
4	00000000	0

So, the network address is:

192.168.1.0

Example 2: Another Scenario

Given:

IP Address: 10.0.5.25
Subnet Mask: 255.255.0.0

Step 1: Convert to Binary

IP Address in Binary:

Octet	Decimal	Binary
1	10	00001010
2	0	00000000
3	5	00000101
4	25	00011001

Subnet Mask in Binary:

Octet	Decimal	Binary
1	255	11111111
2	255	11111111
3	0	00000000
4	0	00000000

Step 2: Bitwise AND Operation

IP Address:     00001010.00000000.00000101.00011001
Subnet Mask:    11111111.11111111.00000000.00000000
---------------------------------------------------
Network Address:00001010.00000000.00000000.00000000

Step 3: Convert Back to Decimal

Octet	Binary	Decimal
1	00001010	10
2	00000000	0
3	00000000	0
4	00000000	0

So, the network address is:

10.0.0.0

Why is This Important?

Understanding how to calculate the network address helps in:

Network Planning: Efficiently allocating IP addresses.
Troubleshooting: Identifying network issues more effectively.
Security: Setting up proper network segmentation and access controls.

Tips and Tricks

Binary Conversion Tools: Use online converters to save time.
Memorize Common Subnet Masks: It'll speed up your calculations.
Practice: The more you do it, the more intuitive it becomes.

Conclusion

Determining the network address from a known IP address is a fundamental networking skill. It might seem a bit technical at first, but with a bit of practice, it becomes second nature. Whether you're a budding network engineer or just curious about how networks work, understanding this process is incredibly valuable.

Feel free to share your thoughts or ask questions in the comments below. Happy networking!

Advanced Java: Simplifying Object Property Copy and Manipulation with BeanUtil

Mark Yu — Sun, 26 May 2024 11:06:48 +0000

In Java programming, the BeanUtil utility class is a powerful and convenient tool for simplifying the process of copying properties and manipulating objects. This article will introduce the basic functionalities of BeanUtil, demonstrate its application through detailed code examples, and compare it with other similar tools. Additionally, we will explore the advantages and usage scenarios of BeanUtil in real-world development to help developers better understand and utilize this utility class.

Introduction to the BeanUtil Utility Class

1. Overview of BeanUtil

BeanUtil is a widely used Java utility class that provides a series of methods to simplify property copying and manipulation between JavaBean objects. It primarily addresses complex object operations and property handling issues, significantly improving code readability and maintainability.

Shallow Copy vs. Deep Copy:

Shallow Copy: BeanUtil performs shallow copying, meaning it copies values for primitive data types and references for object types. This means that while the values of primitive types are directly copied, the references to objects are copied instead of the objects themselves. As a result, changes to these objects in one instance will affect the other.
Deep Copy: In contrast, deep copying involves creating new objects for referenced types and copying their content. This ensures that the objects in the new instance are entirely independent of those in the original instance.

2. Core Features of BeanUtil

The core functionalities of BeanUtil include:

Feature	Description
`copyProperties`	Copies property values from one object to another
`setProperty`	Sets the value of a specified property of an object
`getProperty`	Gets the value of a specified property of an object
`cloneBean`	Clones an object, creating a duplicate
`populate`	Populates an object's properties using data from a `Map`
`describe`	Converts an object's properties and values into a `Map`

These features make BeanUtil incredibly versatile, enabling developers to handle complex property manipulations with minimal code.

3. Comparison with Similar Libraries

In addition to BeanUtil, there are several other tools and libraries available for object property copying and manipulation:

Apache Commons BeanUtils: Provides utility methods for JavaBean operations, including property copying and setting. It's an open-source library widely used in Java projects.
Spring BeanUtils: A utility class from the Spring Framework that offers simple property copying and manipulation methods, commonly used within the Spring ecosystem.
Dozer: A Java Bean mapper that supports deep copying and complex mapping configurations. It allows for custom mapping configurations, suitable for complex object conversions.
ModelMapper: An intelligent object mapping framework designed to simplify the mapping between objects. It offers powerful mapping capabilities and handles complex object relationships and type conversions.
MapStruct: A compile-time code generator that automatically generates type-safe, high-performance Bean mapping code. It uses annotation-driven mapping definitions, reducing runtime overhead.
Orika: A Java Bean mapper focused on providing fast and simple object mapping capabilities. It supports complex mapping configurations and multiple mapping strategies, making it ideal for high-performance mapping needs.

Comparison Table:

Tool Class	Property Copy	Property Set/Get	Type Conversion	Performance	Configuration Complexity
BeanUtil	Yes	Yes	Yes	Medium	Low
Apache BeanUtils	Yes	Yes	Yes	Low	Low
Spring BeanUtils	Yes	Yes	No	High	Low
Dozer	Yes	No	Yes	Low	Medium
ModelMapper	Yes	No	Yes	Medium	Medium
MapStruct	Yes	No	Yes	High	High
Orika	Yes	No	Yes	Medium	Medium

These tools each have their unique features, and developers can choose the most suitable one based on project requirements. For instance, Apache Commons BeanUtils and Spring BeanUtils are ideal for simple property copying, while Dozer and ModelMapper are better suited for complex object mapping needs. MapStruct and Orika excel in performance and type safety.

Using BeanUtil: Code Examples

1. Property Copying

Property copying is one of the most common functions of BeanUtil, allowing you to copy all property values from one object to another.

Example Code:

import org.apache.commons.beanutils.BeanUtils;

public class BeanUtilExample {
    public static void main(String[] args) {
        try {
            SourceObject source = new SourceObject("John", 30);
            TargetObject target = new TargetObject();

            BeanUtils.copyProperties(target, source);

            System.out.println("Target Object: " + target);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

class SourceObject {
    private String name;
    private int age;

    public SourceObject(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // getters and setters
}

class TargetObject {
    private String name;
    private int age;

    @Override
    public String toString() {
        return "TargetObject [name=" + name + ", age=" + age + "]";
    }

    // getters and setters
}

In this example, the copyProperties method copies the property values from the source object to the target object.

2. Setting and Getting Properties

BeanUtil also provides methods for dynamically setting and getting object properties.

Example Code:

import org.apache.commons.beanutils.BeanUtils;

public class PropertyExample {
    public static void main(String[] args) {
        try {
            MyBean myBean = new MyBean();
            BeanUtils.setProperty(myBean, "name", "Alice");
            BeanUtils.setProperty(myBean, "age", 25);

            String name = BeanUtils.getProperty(myBean, "name");
            String age = BeanUtils.getProperty(myBean, "age");

            System.out.println("Name: " + name);
            System.out.println("Age: " + age);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

class MyBean {
    private String name;
    private int age;

    // getters and setters
}

In this example, setProperty is used to set the name and age properties of myBean, and getProperty is used to retrieve these values.

3. Object Cloning

BeanUtil can also clone objects, creating duplicates.

Example Code:

import org.apache.commons.beanutils.BeanUtils;

public class CloneExample {
    public static void main(String[] args) {
        try {
            MyBean original = new MyBean("Bob", 40);
            MyBean clone = (MyBean) BeanUtils.cloneBean(original);

            System.out.println("Original: " + original);
            System.out.println("Clone: " + clone);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

class MyBean {
    private String name;
    private int age;

    public MyBean() {}

    public MyBean(String name, int age) {
        this.name = name;
        this.age = age;
    }

    @Override
    public String toString() {
        return "MyBean [name=" + name + ", age=" + age + "]";
    }

    // getters and setters
}

In this example, the cloneBean method creates a copy of the original object.

Conclusion

The BeanUtil utility class provides Java developers with a straightforward method for manipulating JavaBean object properties. By using BeanUtil, developers can reduce repetitive code, increase development efficiency, and enhance code readability and maintainability. Although there are many similar tools and libraries, BeanUtil remains a popular choice in many projects due to its simplicity and powerful functionality. Choosing the right tool should depend on the specific needs and complexity of the project. For simple property copying and operations, BeanUtil is an excellent choice, while more complex mapping needs may require other powerful mapping tools. This article, with detailed introductions and example code, aims to help developers better understand and utilize the BeanUtil utility class to improve development efficiency and code quality.

References

RedisJSON: Enhancing JSON Data Handling in Redis

Mark Yu — Fri, 24 May 2024 13:41:34 +0000

Introduction

JSON has become the standard format for data exchange in modern applications. However, traditional relational databases may face performance challenges when handling JSON data. To address this issue, Redis introduced the RedisJSON module, which allows developers to store, query, and manipulate JSON data directly within the Redis database. This article will delve into RedisJSON's working principles, key operations, performance advantages, and usage scenarios.

Introduction to RedisJSON
How RedisJSON Works
Installing RedisJSON
Basic Operations with RedisJSON
- Storing JSON Data
- Retrieving JSON Data
- Getting JSON Data Type
- Modifying JSON Data
- Deleting JSON Data
- Adding or Updating JSON Fields
- Adding Elements to a JSON Array
- JSONPath Queries
- Getting JSON Array Length
- Retrieving All Keys from a JSON Object
- Deleting Fields in JSON
- Complex Queries
Performance Advantages
Use Cases
Conclusion

1. Introduction to RedisJSON

RedisJSON is an extension module for Redis that provides native support for JSON data. With RedisJSON, developers can store JSON documents in Redis and perform efficient queries and operations on them. This module simplifies data processing workflows and significantly enhances the performance of JSON data handling.

2. How RedisJSON Works

Data Storage Format

RedisJSON stores data in an optimized binary format rather than simple text. This binary format allows for fast serialization and deserialization of JSON data, improving read and write performance.

Serialization and Deserialization

Before storing data in Redis, JSON data is serialized into a compact binary string. When reading data, this binary string is deserialized back into its original JSON format for easy use by applications.

Internal Data Structure

RedisJSON uses a tree-like structure, known as a Rax tree (Redis tree), to manage JSON data. This ordered dictionary tree allows for efficient key sorting and quick insertion, deletion, and lookup operations.

Query and Operation Optimization

RedisJSON supports JSONPath syntax for complex queries, enabling developers to filter and sort JSON data efficiently. All operations on JSON data are atomic, ensuring data consistency and integrity in high-concurrency environments.

Integration with Redis Ecosystem

RedisJSON seamlessly integrates with other Redis features and tools, such as transactions, pub/sub, and Lua scripting, providing a comprehensive solution for managing JSON data.

Performance Characteristics

Despite adding support for JSON data, RedisJSON maintains Redis's high performance. Optimized internal representation and efficient query algorithms ensure fast response times even with large datasets.

3. Installing RedisJSON

Prerequisites

Ensure that Redis is installed with a version of 6.0 or higher.

Downloading RedisJSON Module

Download the RedisJSON module from the Redis website or GitHub repository. Choose the version suitable for your operating system.

Loading RedisJSON Module

In the Redis configuration file (redis.conf), add a line to load the RedisJSON module using the loadmodule directive, followed by the module file path.

Example:

loadmodule /path/to/module/rejson.so

Verifying Installation

Start the Redis server and ensure there are no errors. Connect to the Redis server using the redis-cli tool and run MODULE LIST to verify that RedisJSON is loaded successfully.

4. Basic Operations with RedisJSON

Storing JSON Data

Use JSON.SET to store JSON data.

JSON.SET user $ '{"name":"HuYiDao","age":18}'

Retrieving JSON Data

Use JSON.GET to retrieve JSON data.

JSON.GET user

Getting JSON Data Type

Use JSON.TYPE to get the type of JSON data.

JSON.TYPE user

Modifying JSON Data

Use JSON.NUMINCRBY to modify numeric fields in JSON data.

JSON.NUMINCRBY user $.age 2

Deleting JSON Data

Use the DEL command to delete a key storing JSON data.

DEL user

Adding or Updating JSON Fields

Use JSON.SET with a path to add or update fields in a JSON object.

JSON.SET user $.address '{"city": "Beijing", "country": "China"}' NX

Adding Elements to a JSON Array

Use JSON.ARRAPPEND to add elements to a JSON array.

JSON.SET user $.hobbies '["reading"]'
JSON.ARRAPPEND user $.hobbies '"swimming"'

JSONPath Queries

Use JSONPath syntax to query JSON data.

JSON.GET user '$.name'

Getting JSON Array Length

Use JSON.OBJLEN to get the length of a JSON array.

JSON.OBJLEN user $.hobbies

Retrieving All Keys from a JSON Object

Use JSON.OBJKEYS to get all keys in a JSON object.

JSON.OBJKEYS user

Deleting Fields in JSON

Use JSON.DELPATH to delete specific fields in a JSON object.

JSON.DELPATH user $.address

Complex Queries

Use JSON.QUERY for advanced querying.

JSON.QUERY user '$[?(@.city=="Beijing")]'

5. Performance Advantages

RedisJSON offers several performance advantages:

In-Memory Storage: Storing data in memory ensures fast read and write speeds, outperforming traditional relational databases.
Tree Structure Storage: The tree structure enables quick access to sub-elements, enhancing query and operation efficiency.
Atomic Operations: All operations on JSON data are atomic, ensuring data consistency and preventing conflicts in concurrent environments.

6. Use Cases

RedisJSON is ideal for applications requiring real-time performance, such as:

Content Management Systems: Efficiently store and retrieve complex content structures and metadata.
Product Catalogs: Manage and search product attributes and SKU combinations effectively.
Mobile Applications: Synchronize data across client applications in real-time.
Session Management: Manage user session data efficiently in web applications.

Conclusion

RedisJSON provides a powerful solution for directly storing, querying, and manipulating JSON data within Redis. By leveraging RedisJSON's capabilities, developers can efficiently handle complex JSON data structures and meet the diverse needs of modern applications. Whether for content management, product catalogs, or mobile app development, RedisJSON offers a flexible and high-performance data storage and processing solution.

By understanding and utilizing RedisJSON, developers can take full advantage of Redis's speed and efficiency while working with JSON data.

References:

Key Considerations for Effective Database Table Design

Mark Yu — Fri, 24 May 2024 13:32:14 +0000

Introduction

In database design, the structure of tables is a critical element that significantly impacts the functionality, efficiency, and performance of a system. A well-designed database table structure supports system requirements effectively, optimizes data storage and retrieval, and ensures data integrity and security. However, achieving an optimal table design is not straightforward and requires careful consideration of various factors, including data types, constraints, and indexing. This article outlines 18 key points to consider when designing database tables, with examples to help you understand the essential aspects of table design.

Key Considerations

1. Define the Purpose of the Table

Ensure that the table design aligns with the system requirements. For example, if you are designing a table to store student information, it should include all relevant fields for student data.

Example: Creating a Student Information Table

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50),
    LastName VARCHAR(50),
    Age INT
);

2. Choose Appropriate Data Types

Select data types that best represent the nature of the data. For example, use an integer type for age.

Example: Choosing Appropriate Data Types

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50),
    LastName VARCHAR(50),
    Age INT
);

3. Enforce Uniqueness Constraints

Identify fields that require uniqueness, such as a student’s email address.

Example: Adding Uniqueness Constraint

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    Email VARCHAR(100) UNIQUE,
    FirstName VARCHAR(50),
    LastName VARCHAR(50)
);

4. Design the Primary Key

Select an appropriate primary key for each table, such as using the student ID as the primary key.

Example: Specifying Primary Key

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50),
    LastName VARCHAR(50)
);

5. Define Foreign Key Relationships

Create foreign key relationships to link related tables. For instance, linking the student ID in the grades table to the student ID in the student table.

Example: Adding Foreign Key Relationship

CREATE TABLE Grades (
    GradeID INT PRIMARY KEY,
    StudentID INT,
    Grade DECIMAL(3, 2),
    FOREIGN KEY (StudentID) REFERENCES Students(StudentID)
);

6. Design Indexes

Design indexes based on query requirements to improve performance, such as creating an index on the last name for faster searches.

Example: Creating an Index

CREATE INDEX idx_student_lastname ON Students(LastName);

7. Define Constraints

Add appropriate constraints to ensure data integrity, such as not allowing null values in certain fields.

Example: Adding Constraints

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50) NOT NULL,
    LastName VARCHAR(50) NOT NULL
);

8. Normalize the Database

Follow normalization principles to avoid redundancy and ensure data integrity, such as separating student information and course information into different tables.

Example: Normalizing Tables

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50),
    LastName VARCHAR(50)
);

CREATE TABLE Courses (
    CourseID INT PRIMARY KEY,
    CourseName VARCHAR(100)
);

9. Denormalize When Necessary

In cases where performance is critical, consider denormalization, such as adding a calculated field for average grades in the student table.

Example: Denormalization

ALTER TABLE Students
ADD COLUMN AverageGrade DECIMAL(3, 2);

10. Use Descriptive Field Names

Choose clear and descriptive field names to enhance readability and maintainability.

Example: Using Descriptive Field Names

CREATE TABLE Students (
    Student_ID INT PRIMARY KEY,
    First_Name VARCHAR(50),
    Last_Name VARCHAR(50)
);

11. Follow Table Naming Conventions

Adopt consistent naming conventions for tables to reflect their purpose clearly.

Example: Naming Convention for Tables

CREATE TABLE student_info (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50),
    LastName VARCHAR(50)
);

12. Set Default Values

Define default values for fields to ensure consistency and avoid null values where appropriate.

Example: Setting Default Values

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50),
    LastName VARCHAR(50),
    EnrollmentDate DATE DEFAULT CURRENT_DATE
);

13. Implement Partitioning

For large tables, consider partitioning to improve query performance, such as partitioning by student ID.

Example: Partitioning Table

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50),
    LastName VARCHAR(50)
)
PARTITION BY RANGE (StudentID) (
    PARTITION p0 VALUES LESS THAN (1000),
    PARTITION p1 VALUES LESS THAN (2000),
    PARTITION p2 VALUES LESS THAN MAXVALUE
);

14. Add Audit Fields

Include audit fields to track data changes, such as creation and update timestamps.

Example: Adding Audit Fields

CREATE TABLE Students (
    StudentID INT PRIMARY KEY,
    FirstName VARCHAR(50),
    LastName VARCHAR(50),
    CreatedAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UpdatedAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

15. Optimize Performance

Create indexes based on query patterns to enhance performance.

Example: Creating Index to Optimize Performance

CREATE INDEX idx_lastname ON Students(LastName);

16. Ensure Security

Implement proper permissions and encryption to protect sensitive data.

Example: Restricting Access to Sensitive Data

GRANT SELECT ON Students TO 'public';

17. Plan for Backup and Recovery

Establish a strategy for regular backups to ensure data can be restored in case of failure.

Example: Backing Up Database

BACKUP DATABASE MyDatabase TO 'backup_path';

18. Document the Design

Thoroughly document the table design, including field meanings, constraints, and relationships.

Example: Documenting Table Structure

COMMENT ON TABLE Students IS 'This table stores information about students.';
COMMENT ON COLUMN Students.FirstName IS 'First name of the student.';

Summary

This article has outlined 18 crucial points to consider in database table design. From defining the purpose of the table to documenting the design, each step plays a vital role in creating an efficient and reliable database structure. By choosing appropriate data types, enforcing constraints, normalizing data, and considering performance and security, you can design robust database tables that support your system's needs. Properly designed tables not only ensure data integrity and security but also enhance the overall performance and maintainability of the database system.

☕Understanding `final`, `finally`, and `finalize` in Java

Mark Yu — Fri, 24 May 2024 13:15:51 +0000

Java programming involves a myriad of keywords, each serving distinct purposes to enhance the functionality and robustness of the code. Among these, final, finally, and finalize often cause confusion due to their similar nomenclature. However, they serve entirely different purposes. This article will elucidate the differences between these keywords, their uses, and practical examples to clarify their roles in Java programming.

Introduction

In Java, final, finally, and finalize are keywords with distinct functions:

final: A keyword used in variable, method, and class declarations to denote constants, prevent method overriding, and inheritance.
finally: A block used in exception handling to execute code regardless of whether an exception is thrown or not.
finalize: A method used to perform cleanup operations before an object is garbage collected.

Understanding the differences and applications of these keywords is crucial for writing effective Java code.

The `final` Keyword

Purpose

The final keyword is versatile and can be applied to variables, methods, and classes.

Use Cases

Final Variables: When applied to a variable, the final keyword makes it a constant, meaning its value cannot be changed once assigned.
Final Methods: When applied to a method, it prevents the method from being overridden by subclasses.
Final Classes: When applied to a class, it prevents the class from being subclassed.

Code Examples

Final Variables

public class Constants {
    public static final int MAX_USERS = 100;
    public static final String APP_NAME = "MyApp";
}

In this example, MAX_USERS and APP_NAME are constants that cannot be changed.

Final Methods

public class Parent {
    public final void display() {
        System.out.println("This is a final method.");
    }
}

public class Child extends Parent {
    // This will cause a compile-time error
    // public void display() {
    //    System.out.println("Attempting to override a final method.");
    // }
}

Here, the display method in the Parent class cannot be overridden by the Child class.

Final Classes

public final class Utility {
    public static void performTask() {
        System.out.println("Performing a task.");
    }
}

// This will cause a compile-time error
// public class AdvancedUtility extends Utility {
// }

The Utility class cannot be subclassed due to the final keyword.

The `finally` Block

Purpose

The finally block is used in exception handling to execute code that must run regardless of whether an exception is thrown or caught.

Use Cases

Resource Management: Ensuring resources like files and database connections are closed properly.
Cleanup Operations: Performing necessary cleanup actions after try-catch blocks.

Code Example

public class FileOperations {
    public void readFile(String filePath) {
        FileReader fileReader = null;
        try {
            fileReader = new FileReader(filePath);
            // Perform file operations
        } catch (IOException e) {
            System.out.println("An error occurred: " + e.getMessage());
        } finally {
            if (fileReader != null) {
                try {
                    fileReader.close();
                } catch (IOException e) {
                    System.out.println("Failed to close the file: " + e.getMessage());
                }
            }
        }
    }
}

In this example, the finally block ensures that the FileReader resource is closed regardless of whether an exception occurs.

The `finalize` Method

Purpose

The finalize method is invoked by the garbage collector before an object is reclaimed. It is used to perform cleanup operations, such as releasing resources.

Use Cases

Cleanup Operations: Performing cleanup before an object is garbage collected.

Code Example

public class ResourceHolder {
    private FileReader fileReader;

    public ResourceHolder(String filePath) throws FileNotFoundException {
        this.fileReader = new FileReader(filePath);
    }

    @Override
    protected void finalize() throws Throwable {
        try {
            if (fileReader != null) {
                fileReader.close();
            }
        } finally {
            super.finalize();
        }
    }
}

Here, the finalize method ensures that the FileReader is closed before the ResourceHolder object is garbage collected. However, it's important to note that the finalize method is deprecated in recent Java versions due to unpredictability and better alternatives like try-with-resources and explicit resource management.

Summary

In summary, final, finally, and finalize are three distinct keywords in Java with different purposes:

final: Used to declare constants, prevent method overriding, and inheritance.
finally: A block used in exception handling to execute necessary code regardless of exceptions.
finalize: A method used for cleanup operations before an object is garbage collected (now largely deprecated).

Understanding these keywords helps in writing more robust, maintainable, and efficient Java code. By using final, you can create immutable variables and secure methods and classes. The finally block ensures resource management and cleanup, while finalize (despite its deprecation) shows the historical approach to object cleanup before garbage collection.

References:

Understanding the `throw` and `throws` Keywords in Java

Mark Yu — Wed, 22 May 2024 15:46:32 +0000

Exception handling is a crucial aspect of Java programming, allowing developers to manage and respond to runtime errors effectively. Two keywords, throw and throws, are integral to this process but are often confused. This article provides a detailed explanation of these keywords, their usage, differences, and practical examples.

Introduction

In Java, handling exceptions properly ensures the robustness and reliability of applications. The throw and throws keywords serve distinct purposes in exception handling. While throw is used to explicitly throw an exception, throws is used to declare the potential for an exception within a method. Understanding their roles and differences is essential for writing clean, maintainable code.

The `throw` Keyword

Purpose

The throw keyword is used within a method to explicitly throw an exception. When an exception is thrown, the normal flow of the program is disrupted, and the exception is passed to the nearest enclosing try-catch block.

Use Cases

Violating Business Logic: When a condition that violates business logic is detected.
Custom Exceptions: When creating and using custom exception classes.

Code Example

public void checkAge(int age) {
   if (age < 0) {
     throw new IllegalArgumentException("Age cannot be negative");
   }
}

In this example, if the age parameter is less than 0, an IllegalArgumentException is thrown, interrupting the method execution and signaling an error condition.

The `throws` Keyword

Purpose

The throws keyword is used in a method signature to declare that the method might throw one or more exceptions. This declaration informs the method callers that they need to handle these potential exceptions.

Use Cases

Method Exception Declaration: When a method might cause exceptions that it does not handle internally.
Exception Propagation: When you want to propagate an exception to be handled by the method's caller.

Code Example

public void readFile() throws IOException {
   // Code that might throw IOException
}

Here, the readFile method declares that it might throw an IOException, signaling to the caller that they must handle this potential exception.

Differences and Connections

Usage: throw is used within a method to throw an exception, while throws is used in the method signature to declare possible exceptions.
Functionality: throw triggers an exception immediately, interrupting the current flow, whereas throws indicates that a method can potentially throw exceptions that must be handled by the caller.
Multiple Exceptions: throw can only throw one exception at a time. throws can declare multiple exceptions separated by commas.
Flow Interruption: throw disrupts the current method flow and looks for an exception handler. throws does not disrupt the flow but informs callers about the need to handle specified exceptions.

Comprehensive Example 1

public class Example {
    public void divide(int a, int b) {
        if (b == 0) {
            throw new ArithmeticException("Division by zero");
        }
        int result = a / b;
        System.out.println("Result: " + result);
    }

    public static void main(String[] args) {
        Example example = new Example();
        try {
            example.divide(10, 0);
        } catch (ArithmeticException e) {
            System.out.println("Caught exception: " + e.getMessage());
            example.divide(10, 2);
        }
    }
}

In this example, the divide method throws an ArithmeticException if the divisor is zero. The main method catches and handles this exception, then proceeds with a valid division.

Comprehensive Example 2

public class Example {
    public void divide(int a, int b) throws ArithmeticException {
        if (b == 0) {
            throw new ArithmeticException("Division by zero");
        }
        int result = a / b;
        System.out.println("Result: " + result);
    }

    public void process(String name) throws NullPointerException {
        if (name == null) {
            throw new NullPointerException("Name cannot be null");
        }
        System.out.println("Name: " + name);
    }

    public static void main(String[] args) {
        Example example = new Example();
        try {
            example.divide(10, 2);
        } catch (ArithmeticException e) {
            System.out.println("Caught exception: " + e.getMessage());
        }

        try {
            example.process(null);
        } catch (NullPointerException e) {
            System.out.println("Caught exception: " + e.getMessage());
        }
    }
}

In this example, the divide method declares that it might throw an ArithmeticException. The process method similarly declares that it might throw a NullPointerException. Both exceptions are handled appropriately in the main method.

Summary

This article explored the throw and throws keywords in Java, explaining their purposes, differences, and appropriate use cases. By using throw, you can explicitly throw exceptions, ensuring that your code handles error conditions robustly. The throws keyword helps in declaring potential exceptions, promoting better exception handling practices in calling methods. Understanding and using these keywords effectively will lead to more robust and maintainable Java applications.

References:

In-depth Analysis of JavaScript Memory Model and Lifecycle

Mark Yu — Wed, 22 May 2024 15:24:46 +0000

Introduction

Efficient memory management is crucial for writing high-performance JavaScript applications. Understanding the JavaScript memory model and lifecycle helps developers create optimized, memory-leak-free code. This article explores the fundamental concepts and advanced techniques related to JavaScript memory management, providing a comprehensive guide for developers.

Basic Data Types and the Intricate Operation of Stack Memory

JavaScript's memory management is rooted in the dual architecture of stack memory and heap memory. Stack memory is known for its quick access speed and rigorous lifecycle management. It primarily handles lightweight members of the program—basic data types including numbers, strings, booleans, and special identifiers like undefined and null. Another crucial role of stack memory is recording temporary residents—local variables and execution contexts during function calls, ensuring that once a function completes or a variable goes out of scope, the occupied memory space is swiftly released, maintaining high efficiency and rapid turnover of memory usage.

let age = 25; // Allocates space in stack memory for age and stores the number 25
function greet() {
    let message = "Hello!"; // Allocates temporary space for message in stack memory during greet execution
}
greet(); // Upon function execution completion, the stack memory space occupied by message is released

The Vast World of Complex Data Types and Heap Memory

Compared to the instantaneous nature of stack memory, heap memory is like a vast expanse, providing fertile ground for complex data types like objects, arrays, and functions (which essentially exist as objects). Here, data "homes" need to be explicitly created through constructors or literals. Due to the possibility of these complex structures being shared among multiple variables, or containing references within themselves, their lifecycle management becomes intricate. This is where the garbage collection mechanism comes into play, identifying and cleaning up memory areas no longer referenced by any variable.

let person = { name: "Alice" }; // Builds a house for person in heap memory and keeps a map to that address in stack memory

The Wisdom and Practical Strategies of Lifecycle Management

A deep understanding of the lifecycle management mechanisms of stack and heap memory is crucial for writing efficient, memory-leak-free JavaScript code.

The automatic cleaning mechanism of stack memory ensures the swift release of instantaneous data, showcasing automated efficiency.
The dynamic nature of heap memory requires developers to have a good awareness of memory management, designing and releasing object references appropriately to work alongside the garbage collection mechanism to prevent memory leaks.

Principles to Remember:

Release object references that are no longer in use to avoid unnecessary memory occupation.
Use tools like browser developer tools for memory analysis to regularly check and locate memory leaks.
Handle event listeners and timers carefully, ensuring they are cleaned up when no longer needed.
Understand and use WeakMap and WeakSet, which hold weak references that can reduce the risk of memory leaks.

By implementing these strategies, developers can enhance application performance, ensuring efficient use of resources and smooth user experiences.

Introduction to WeakMap and WeakSet

WeakMap and WeakSet are special collection types introduced in ES6, similar to Map and Set but different in memory management. They store weak references to their objects, meaning if an object is only referenced by a WeakMap or WeakSet, it can be garbage collected even if it still exists in the WeakMap or WeakSet.

WeakMap

A WeakMap is a collection of key-value pairs where keys must be objects, and values can be of any type. It is suitable for storing private data or metadata about objects, without preventing the garbage collection mechanism from reclaiming the objects.

let user = { name: "Alice" };

// Create a WeakMap
let userMetadata = new WeakMap();

// Add data to the WeakMap
userMetadata.set(user, { role: "Admin", joined: new Date() });

console.log(userMetadata.get(user)); // Outputs: { role: "Admin", joined: Thu May 08 2024 11:55:35 GMT+0800 (China Standard Time) }

// If the user object is no longer referenced elsewhere, the garbage collection mechanism can reclaim the user object and its metadata in the WeakMap
user = null;

WeakSet

A WeakSet is a collection that only accepts objects as members, holding weak references to these objects. When objects are no longer referenced elsewhere, they can be garbage collected even if they still exist in the WeakSet.

class Node {
  constructor(id) {
    this.id = id;
  }
}

let nodeA = new Node(1);
let nodeB = new Node(2);

// Create a WeakSet
let processedNodes = new WeakSet();

// Add objects to the WeakSet
processedNodes.add(nodeA);
processedNodes.add(nodeB);

console.log(processedNodes.has(nodeA)); // Outputs: true

// If nodeA is no longer referenced elsewhere
nodeA = null;

// The garbage collection mechanism can reclaim nodeA, and its representation in the WeakSet will also be removed
console.log(processedNodes.has(nodeA)); // After garbage collection, outputs: false

These examples demonstrate how WeakMap and WeakSet store associative data or track object collections without preventing garbage collection. They are useful tools for managing object lifecycles and avoiding memory leaks.

In-depth Exploration of Garbage Collection (GC)

Reference Counting

As the most intuitive garbage collection strategy, reference counting assigns each object a reference counter to track the number of times it is referenced. Every time a new reference is created, the counter increases by 1; when the reference is released (e.g., a variable is reassigned or the scope ends), the counter decreases by 1. Once an object's reference count drops to 0, it indicates it is no longer referenced by any variable and is marked as collectible.

function referenceCountingExample() {
    let obj1 = new Object(); // obj1's reference count is initialized to 1
    let obj2 = obj1;         // obj1's reference count increases to 2 due to obj2's reference
    obj1 = null;            // obj1's reference is released, but the count remains 1 due to obj2
    obj2 = null;            // The last reference is released, making the reference count 0, ready for collection
}

Note:

Despite being simple and direct, reference counting falls short in handling cyclic references, potentially causing memory leaks where two or more objects reference each other. Even if they are no longer used externally, their counts will not drop to 0.

Mark-and-Sweep

To overcome the limitations of reference counting, the mark-and-sweep algorithm was developed. This algorithm recycles memory through a two-phase process:

Marking Phase: Starting from root objects (e.g., global objects), it traverses all reachable objects, marking them as "alive" or "reachable."
Sweeping Phase: It traverses the heap memory, treating all unmarked objects as garbage, reclaiming their occupied memory space.

function markAndSweepExample() {
    let objA = {}; 
    let objB = {}; 
    objA.ref = objB; // Forms a cyclic reference
    objB.ref = objA;
    objA = null; 
    objB = null;
    // Mark-and-sweep mechanism can identify and handle such cyclic references, ensuring useless objects are collected
}

Generational Collection

Given the short lifespan of most objects, modern JavaScript engines employ generational collection strategies, dividing heap memory into young and old generations. Newly created objects first enter the young generation, and those surviving one or more garbage collection cycles are promoted to the old generation. This strategy's advantage lies in frequent low-cost collection for the young generation and less frequent but more thorough collection for the old generation, significantly enhancing overall GC efficiency.

Young Generation: Frequent, fast collections for short-lived objects.
Old Generation: Less frequent, but thorough collections for long-lived objects.

By comprehensively applying these mechanisms, JavaScript's garbage collection system can maintain efficient memory usage while minimizing program pauses due to garbage collection, ensuring smooth and efficient application operation.

Smart Evolution of Garbage Collection: Incremental Marking and Concurrent/Parallel Collection

Incremental Marking: Small Steps to Reduce Pauses

Imagine garbage collection as a thorough house cleaning. If you clean all the rooms at once, it might take a long time, and the family can't use the living room during this period. Incremental marking breaks down the major cleaning tasks into many smaller tasks, like cleaning one corner at a time, taking short breaks to allow the family to continue using other areas, and then moving on to the next corner. This way, although the total cleaning time might be longer, the family almost doesn't feel the disturbance.

In the JavaScript world, incremental marking breaks down the potentially long garbage collection process into a series of small steps executed during code execution gaps. This way, even during garbage collection, the application doesn't suddenly "freeze," resulting in a smoother user experience.

Conceptual Example:

While we can't directly control garbage collection, we can simulate understanding its underlying logic:

// Simulate application logic: performing some operations during which garbage collection might be incrementally marking in the background
function simulateAppLogic() {
    for(let i = 0; i < 10; i++) {
        // Simulate performing some operations like processing data, rendering pages, etc.
        console.log(`Processing step ${i} data...`);

        // Simulate the "gap" for incremental marking, actually managed automatically by the engine
        // But we can imagine the GC might be working quietly during this period
    }
    console.log("All operations completed!");
}

Concurrent/Parallel Collection: Multi-tasking for Efficiency

Concurrent collection is like having two people cleaning the house at the same time—one sweeping the floor, the other wiping the table—getting the chores done faster. Parallel collection is like having multiple rooms in the house, each being cleaned simultaneously,

with everyone working together to quickly complete the entire house cleaning.

In JavaScript engines, concurrent collection means that garbage collection can run in a separate thread from the main thread, with both not interfering with each other. Parallel collection allows different parts of garbage collection to run simultaneously on different CPU cores, significantly increasing collection speed.

Conceptual Example:

Continue using the previous simulation to understand the concept of concurrent or parallel collection:

// Hypothetical example of concurrent/parallel collection concept
function imagineConcurrentParallelGC() {
    console.log("Starting concurrent/parallel GC...");
    // Actually controlled by the engine, but we can understand it as GC efficiently running in the background
    // Concurrently, GC alternates with application code; in parallel, multiple CPU cores work simultaneously
    console.log("GC tasks quietly proceeding in the background without affecting application logic...");
}

Summary

By leveraging incremental marking and concurrent/parallel collection techniques, modern JavaScript engines can efficiently manage memory while maintaining smooth application operation. Although developers cannot directly control these mechanisms, understanding their principles is crucial for writing more efficient and responsive code. Just as reasonable household chores arrangement keeps the house always clean without noticeable cleaning, JavaScript's garbage collection mechanism silently creates a smooth digital environment for us.

Memory Leak Prevention Guide: Best Practices

1. Timely Release of References — Clean Up Unused Objects

When objects no longer serve any purpose, setting their references to null can help the garbage collection mechanism quickly identify and release the memory occupied by the objects.

function processData(data) {
    let heavyObject = createHeavyObject(); // Create a large object
    // ...use heavyObject...
    heavyObject = null; // Release reference when no longer needed
}

2. Attention to DOM References — Remove Event Listeners and Element Associations

Dynamically added elements to the DOM and their event listeners, if not properly handled, may form memory leaks. When removing elements, ensure to remove associated event listeners.

let button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);

button.addEventListener('click', handleClick);

// Properly remove elements and listeners when no longer needed
button.removeEventListener('click', handleClick);
document.body.removeChild(button);

3. Timer and Callback Management — Control Asynchronous Resources

When using setTimeout or setInterval, ensure to clear the timers when no longer needed to avoid endless waiting and memory occupation.

let intervalId = setInterval(updateUI, 1000);

function cleanup() {
    clearInterval(intervalId); // Clear unneeded timers
}
// Call cleanup function appropriately, such as during component unmount

4. Variables in Closures — Precise Scope Management

Closures can maintain the lifecycle of variables but may also lead to unintended memory leaks. Ensure closures only retain necessary variables and release unneeded ones when possible.

function createClosure() {
    let tempArr = []; // Potential source of memory leak
    return function() {
        // Clear leaking variables if possible
        // ...
    };
}

5. Modules and Singletons — Appropriate Use of Global Scope

Misusing global variables increases the risk of memory leaks, especially in large applications. Adopt module patterns or ES6 modules to limit scope and reduce global pollution.

// Use ES6 modules to avoid global variables
export function someFunction() {
    // ...
}

// Or use an IIFE to wrap modules
(function() {
    var privateVar; // Private variable
    window.myLibrary = { // Public interface
        publicMethod: function() {
            // Use privateVar...
        }
    };
})();

Following these best practices can significantly reduce the risk of memory leaks, making your JavaScript applications more robust and responsive. Memory management is an area every developer should continuously focus on and optimize, as it directly impacts application performance and user experience.

Interview Focus Points

In interviews, questions about JavaScript garbage collection mechanisms often revolve around core concepts and practices. Here are some common questions and brief example answers:

1. What are the basic principles of JavaScript garbage collection mechanisms?

Answer: JavaScript's garbage collection mechanisms automatically manage memory to prevent memory leaks. They are based on two main algorithms: reference counting and mark-and-sweep. Reference counting tracks the number of times an object is referenced to determine if it should be collected, while mark-and-sweep traverses all reachable objects from root objects, marking them and collecting unmarked ones. Modern JavaScript engines also use generational collection and incremental marking, concurrent collection strategies to improve efficiency.

2. What is reference counting? What are its drawbacks?

Answer: Reference counting tracks the number of references to an object to determine its collectability. When an object's reference count drops to 0, it is collected as garbage. Its drawback is the inability to handle cyclic references, leading to memory leaks where two or more objects reference each other, preventing their reference counts from dropping to 0.

3. How does the mark-and-sweep algorithm work? Why can it handle cyclic references?

Answer: The mark-and-sweep algorithm works in two steps: starting from root objects, it traverses all reachable objects and marks them as alive. Then, it traverses the heap, treating unmarked objects as garbage and collecting them. It handles cyclic references because objects in a cycle, if unreachable from the root, are marked as unreachable and collected.

4. What is generational collection? How does it improve garbage collection efficiency?

Answer: Generational collection divides heap memory into young and old generations. Newly created objects are placed in the young generation, and those surviving one or more collections are promoted to the old generation. This approach assumes most objects are short-lived and collects young generation objects frequently and quickly, while the old generation is collected less frequently but thoroughly. This reduces the need to frequently scan long-lived objects, improving efficiency.

5. How can memory leaks be avoided in JavaScript?

Answers:

Release unused object references by setting them to null.
Manage DOM references by removing event listeners when elements are removed.
Clear timers and callbacks when they are no longer needed.
Avoid unnecessary variables in closures.
Limit global variable usage by using modules or local variables.

These questions cover basic concepts, advantages, and disadvantages of garbage collection algorithms, and practical strategies for avoiding memory leaks, commonly assessing the understanding of JavaScript memory management in interviews.

Summary

This article delves deeply into the core principles and practical strategies of JavaScript garbage collection, paving the way for developers to achieve efficient memory management. Key points are summarized below:

Memory's Dual World: Explains the division of memory in JavaScript into stack memory for basic types and heap memory for complex data structures, laying the foundation for understanding garbage collection.
Philosophy of Recycling: Introduces two main garbage collection strategies—reference counting and mark-and-sweep. Reference counting directly tracks object references, while mark-and-sweep distinguishes reachable and unreachable objects, addressing cyclic reference issues.
Wisdom of Generational Collection: Describes the modern generational collection strategy adopted by JavaScript engines, dividing heap memory into young and old generations, and tailoring collection strategies to different object lifespans for efficiency.
Optimization and Challenges: Discusses advanced techniques like incremental marking and concurrent collection, optimizing garbage collection processes to minimize performance impact and ensure smooth application operation.
Developer Practices: Emphasizes the importance of avoiding memory leaks in practice, providing methods to identify and resolve memory management issues, and encouraging developers to use tools for detection and write more robust code.
Inspirational Conclusion: Concludes with encouraging words, motivating developers to continuously explore JavaScript's depth and breadth, master memory management, and pursue code excellence and ultimate application performance.

In summary, mastering JavaScript garbage collection is not just a technical improvement but a commitment to application quality. In the endless exploration of programming, may you use this knowledge to open up more efficient and stable technical fields.

Create a Heart Shaped Animation with CSS3

Mark Yu — Wed, 22 May 2024 08:02:45 +0000

Introduction

Creating a personalized love confession page can be a fun and heartfelt way to express your feelings. By using HTML5, CSS3 animations, and a touch of JavaScript, you can create a beautiful page with an animated heart effect. In this tutorial, we will walk you through a simple example to get you started.

Step-by-Step Guide

1. HTML Structure

First, we need to set up our HTML structure. This includes a div for the heart shape and a div for the text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>520 Confession</title>
    <style>
        @keyframes heartBeat {
            0% { transform: scale(1); }
            25% { transform: scale(1.1); }
            50% { transform: scale(1); }
            75% { transform: scale(0.9); }
            100% { transform: scale(1); }
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0e0d8;
            margin: 0;
            overflow: hidden;
        }

        .heart {
            position: relative;
            width: 100px;
            height: 90px;
            animation: heartBeat 1s infinite;
        }

        .heart:before,
        .heart:after {
            content: "";
            position: absolute;
            width: 50px;
            height: 80px;
            background-color: red;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
            top: 0;
            left: 50px;
        }

        .heart:after {
            left: 0;
            transform: rotate(45deg);
        }

        .text {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="heart"></div>
    <div class="text">520 I Love You</div>
</body>
</html>

2. CSS Styling

In this example, we use CSS3 animations to create a heartbeat effect. The @keyframes rule defines the animation named heartBeat, which scales the heart shape at different intervals.

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0e0d8;
    margin: 0;
    overflow: hidden;
}

.heart {
    position: relative;
    width: 100px;
    height: 90px;
    animation: heartBeat 1s infinite;
}

.heart:before,
.heart:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 80px;
    background-color: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    top: 0;
    left: 50px;
}

.heart:after {
    left: 0;
    transform: rotate(45deg);
}

.text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 24px;
    font-family: Arial, sans-serif;
}

3. Detailed Explanation

To help you understand each part of the code, let's break it down:

HTML Structure:

The <!DOCTYPE html> declaration defines the document type as HTML5.
The <html lang="en"> tag sets the language of the document to English.
Inside the <head> tag, we define the character encoding with <meta charset="UTF-8"> and the title of the page with <title>520 Confession</title>.

CSS Styling:

@keyframes heartBeat: Defines the keyframe animation sequence for the heart. The heart scales up and down to create a beating effect.
- 0% and 100%: Scale at normal size.
- 25%: Scale up to 1.1 times the original size.
- 75%: Scale down to 0.9 times the original size.
body: Styles the body of the document to center the content both horizontally and vertically.
- display: flex; justify-content: center; align-items: center;: Uses Flexbox to center the items.
- height: 100vh;: Sets the height to 100% of the viewport height.
- background-color: #f0e0d8;: Sets the background color.
- margin: 0;: Removes the default margin.
- overflow: hidden;: Hides any overflow content.
.heart: Styles the heart container.
- position: relative;: Positions the element relative to its normal position.
- width: 100px; height: 90px;: Sets the size of the heart.
- animation: heartBeat 1s infinite;: Applies the heartbeat animation with a 1-second duration, running infinitely.
.heart:before, .heart:after: Styles the pseudo-elements to create the heart shape.
- content: "";: Adds content for the pseudo-elements.
- position: absolute;: Positions the elements absolutely within the .heart container.
- width: 50px; height: 80px; background-color: red;: Sets the size and color of the pseudo-elements.
- border-radius: 50px 50px 0 0;: Rounds the top corners to form the top of the heart.
- transform: rotate(-45deg); top: 0; left: 50px;: Rotates and positions the left half of the heart.
- .heart:after: Rotates and positions the right half of the heart.
.text: Styles the text element.
- position: absolute; top: 50%; transform: translateY(-50%);: Centers the text vertically within the heart.
- color: #fff;: Sets the text color to white.
- font-size: 24px; font-family: Arial, sans-serif;: Sets the font size and family.

Conclusion

This example demonstrates how to create a simple, yet visually appealing love confession page with an animated heart effect using HTML5 and CSS3. You can further customize the styles and animations to suit your needs and make your confession page even more special.

Feel free to experiment with different colors, sizes, and animation timings to create a unique and personalized experience.

I hope this helps you create your own beautiful and animated love confession page!

DEV Community: Mark Yu

Premium micro-interactions in React 19 (without the jank)

The mental model: MotionValues over state

1. A reading-progress bar with useScroll + useSpring

2. A count-up that animates only when you scroll to it

3. A shared-layout active indicator with layoutId

Reduced motion is a feature, not a fallback

What actually makes it feel premium

11 Free 3D Asset Sites for Games, Blender, and WebGL

First: “Free” Does Not Always Mean “Use Anywhere”

Best Overall Free 3D Asset Sites

1. Sketchfab

2. Poly Pizza

3. Quaternius

4. Kenney Assets

Best for Realistic Rendering and Blender Scenes

5. Poly Haven

6. TurboSquid Free Section

7. CGTrader Free Models

8. Free3D

Best for Game Art Communities

9. OpenGameArt

Best for AI-Generated or Experimental 3D

10. Meshy

Best for Online Editing

11. Clara.io

Quick Recommendation Table

Which Site Should You Use?

For Three.js / React Three Fiber

For Unity / Godot / Unreal Prototypes

For Blender Rendering

For Architecture or Product Visualization

A Practical Asset Download Checklist

Basic Three.js GLB Import Example

React Three Fiber Example

Optimize Models Before Shipping

Suggested Folder Structure for Web Projects

My Personal Ranking

For a fast indie game prototype

For a WebGL portfolio or Three.js landing page

For a Blender render or cinematic scene

For specific object hunting

Final Thoughts

Zero-CLS Images in Next.js 16: LQIP Blur-Up Done Right

Why This Matters for Core Web Vitals

Reserve the Image Box Before the Image Loads

When You Do Not Know the Image Dimensions

Static Imports Get Blur Automatically. Remote Images Do Not.

Generate a Tiny LQIP at Upload Time

Store the LQIP Beside the Image

Render Remote Images Safely

Do Not Skip sizes

The LCP Image: Use preload, Not priority

One More Next.js 16 Detail: Image Qualities

Full Example: Remote Supabase Image With Zero CLS and Blur-Up

Testing It

Common Mistakes

Mistake 1: Using placeholder="blur" on remote images without blurDataURL

Mistake 2: Thinking LQIP fixes CLS

Mistake 3: Using fill without reserving parent space

Mistake 4: Skipping sizes

Mistake 5: Preloading too many images

The Takeaway

The True Cost of Poor Data Quality: Why It Matters and How to Improve It

The Hidden Costs of Poor Data Quality

Misguided Decision-Making

Delayed Problem Detection

Missed Opportunities

Damaged Reputation and Low Morale

Common Causes of Poor Data Quality

Human Error

Lack of Data Standardization

Poor Data Governance

Ineffective Data Integration

How to Improve Data Quality

Define Clear Data Use Cases

Implement Data Standardization

Strengthen Data Governance

Automate Data Entry and Processing

Conduct Regular Data Audits

1. A reading-progress bar with `useScroll` + `useSpring`

3. A shared-layout active indicator with `layoutId`

Do Not Skip `sizes`

The LCP Image: Use `preload`, Not `priority`

Mistake 1: Using `placeholder="blur"` on remote images without `blurDataURL`

Mistake 3: Using `fill` without reserving parent space

Mistake 4: Skipping `sizes`