Reporting Core Web Vitals With The Performance API

Reporting Core Web Vitals With The Performance API

Reporting Core Web Vitals With The Performance API

Geoff Graham

2024-02-27T12:00:00+00:00
2025-06-20T10:32:35+00:00

This article is sponsored by DebugBear

There’s quite a buzz in the performance community with the Interaction to Next Paint (INP) metric becoming an official Core Web Vitals (CWV) metric in a few short weeks. If you haven’t heard, INP is replacing the First Input Delay (FID) metric, something you can read all about here on Smashing Magazine as a guide to prepare for the change.

But that’s not what I really want to talk about. With performance at the forefront of my mind, I decided to head over to MDN for a fresh look at the Performance API. We can use it to report the load time of elements on the page, even going so far as to report on Core Web Vitals metrics in real time. Let’s look at a few ways we can use the API to report some CWV metrics.

Browser Support Warning

Before we get started, a quick word about browser support. The Performance API is huge in that it contains a lot of different interfaces, properties, and methods. While the majority of it is supported by all major browsers, Chromium-based browsers are the only ones that support all of the CWV properties. The only other is Firefox, which supports the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) API properties.

So, we’re looking at a feature of features, as it were, where some are well-established, and others are still in the experimental phase. But as far as Core Web Vitals go, we’re going to want to work in Chrome for the most part as we go along.

First, We Need Data Access

There are two main ways to retrieve the performance metrics we care about:

  1. Using the performance.getEntries() method, or
  2. Using a PerformanceObserver instance.

Using a PerformanceObserver instance offers a few important advantages:

  • PerformanceObserver observes performance metrics and dispatches them over time. Instead, using performance.getEntries() will always return the entire list of entries since the performance metrics started being recorded.
  • PerformanceObserver dispatches the metrics asynchronously, which means they don’t have to block what the browser is doing.
  • The element performance metric type doesn’t work with the performance.getEntries() method anyway.

That all said, let’s create a PerformanceObserver:

const lcpObserver = new PerformanceObserver(list => {});

For now, we’re passing an empty callback function to the PerformanceObserver constructor. Later on, we’ll change it so that it actually does something with the observed performance metrics. For now, let’s start observing:

lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

The first very important thing in that snippet is the buffered: true property. Setting this to true means that we not only get to observe performance metrics being dispatched after we start observing, but we also want to get the performance metrics that were queued by the browser before we started observing.

The second very important thing to note is that we’re working with the largest-contentful-paint property. That’s what’s cool about the Performance API: it can be used to measure very specific things but also supports properties that are mapped directly to CWV metrics. We’ll start with the LCP metric before looking at other CWV metrics.

Reporting The Largest Contentful Paint

The largest-contentful-paint property looks at everything on the page, identifying the biggest piece of content on the initial view and how long it takes to load. In other words, we’re observing the full page load and getting stats on the largest piece of content rendered in view.

We already have our Performance Observer and callback:

const lcpObserver = new PerformanceObserver(list => {});
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

Let’s fill in that empty callback so that it returns a list of entries once performance measurement starts:

// The Performance Observer
const lcpObserver = new PerformanceObserver(list => {
  // Returns the entire list of entries
  const entries = list.getEntries();
});

// Call the Observer
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

Next, we want to know which element is pegged as the LCP. It’s worth noting that the element representing the LCP is always the last element in the ordered list of entries. So, we can look at the list of returned entries and return the last one:

// The Performance Observer
const lcpObserver = new PerformanceObserver(list => {
  // Returns the entire list of entries
  const entries = list.getEntries();
  // The element representing the LCP
  const el = entries[entries.length - 1];
});

// Call the Observer
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

The last thing is to display the results! We could create some sort of dashboard UI that consumes all the data and renders it in an aesthetically pleasing way. Let’s simply log the results to the console rather than switch gears.

// The Performance Observer
const lcpObserver = new PerformanceObserver(list => {
  // Returns the entire list of entries
  const entries = list.getEntries();
  // The element representing the LCP
  const el = entries[entries.length - 1];
  
  // Log the results in the console
  console.log(el.element);
});

// Call the Observer
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

There we go!

Open Chrome window showing the LCP results in the DevTools console while highlighting the result on the Smashing Magazine homepage.

LCP support is limited to Chrome and Firefox at the time of writing. (Large preview)

It’s certainly nice knowing which element is the largest. But I’d like to know more about it, say, how long it took for the LCP to render:

// The Performance Observer
const lcpObserver = new PerformanceObserver(list => {

  const entries = list.getEntries();
  const lcp = entries[entries.length - 1];

  entries.forEach(entry => {
    // Log the results in the console
    console.log(
      `The LCP is:`,
      lcp.element,
      `The time to render was ${entry.startTime} milliseconds.`,
    );
  });
});

// Call the Observer
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

// The LCP is:
// 

// The time to render was 832.6999999880791 milliseconds.

Reporting First Contentful Paint

This is all about the time it takes for the very first piece of DOM to get painted on the screen. Faster is better, of course, but the way Lighthouse reports it, a “passing” score comes in between 0 and 1.8 seconds.

Showing a timeline of mobile screen frames measured in seconds and how much is painted to the screen at various intervals.

Image source: Source: DebugBear. (Large preview)

Just like we set the type property to largest-contentful-paint to fetch performance data in the last section, we’re going to set a different type this time around: paint.

When we call paint, we tap into the PerformancePaintTiming interface that opens up reporting on first paint and first contentful paint.

// The Performance Observer
const paintObserver = new PerformanceObserver(list => {
  const entries = list.getEntries();
  entries.forEach(entry => {    
    // Log the results in the console.
    console.log(
      `The time to ${entry.name} took ${entry.startTime} milliseconds.`,
    );
  });
});

// Call the Observer.
paintObserver.observe({ type: "paint", buffered: true });

// The time to first-paint took 509.29999999981374 milliseconds.
// The time to first-contentful-paint took 509.29999999981374 milliseconds.

DevTools open on the Smashing Magazine website displaying the paint results in the console.

(Large preview)

Notice how paint spits out two results: one for the first-paint and the other for the first-contenful-paint. I know that a lot happens between the time a user navigates to a page and stuff starts painting, but I didn’t know there was a difference between these two metrics.

Here’s how the spec explains it:

“The primary difference between the two metrics is that [First Paint] marks the first time the browser renders anything for a given document. By contrast, [First Contentful Paint] marks the time when the browser renders the first bit of image or text content from the DOM.”

As it turns out, the first paint and FCP data I got back in that last example are identical. Since first paint can be anything that prevents a blank screen, e.g., a background color, I think that the identical results mean that whatever content is first painted to the screen just so happens to also be the first contentful paint.

But there’s apparently a lot more nuance to it, as Chrome measures FCP differently based on what version of the browser is in use. Google keeps a full record of the changelog for reference, so that’s something to keep in mind when evaluating results, especially if you find yourself with different results from others on your team.

Reporting Cumulative Layout Shift

How much does the page shift around as elements are painted to it? Of course, we can get that from the Performance API! Instead of largest-contentful-paint or paint, now we’re turning to the layout-shift type.

This is where browser support is dicier than other performance metrics. The LayoutShift interface is still in “experimental” status at this time, with Chromium browsers being the sole group of supporters.

As it currently stands, LayoutShift opens up several pieces of information, including a value representing the amount of shifting, as well as the sources causing it to happen. More than that, we can tell if any user interactions took place that would affect the CLS value, such as zooming, changing browser size, or actions like keydown, pointerdown, and mousedown. This is the lastInputTime property, and there’s an accompanying hasRecentInput boolean that returns true if the lastInputTime is less than 500ms.

Got all that? We can use this to both see how much shifting takes place during page load and identify the culprits while excluding any shifts that are the result of user interactions.

const observer = new PerformanceObserver((list) => {
  let cumulativeLayoutShift = 0;
  list.getEntries().forEach((entry) => {
    // Don't count if the layout shift is a result of user interaction.
    if (!entry.hadRecentInput) {
      cumulativeLayoutShift += entry.value;
    }
    console.log({ entry, cumulativeLayoutShift });
  });
});

// Call the Observer.
observer.observe({ type: "layout-shift", buffered: true });

Given the experimental nature of this one, here’s what an entry object looks like when we query it:

Tree outline showing the object properties and values for entries in the LayoutShift class produced by a query.

(Large preview)

Pretty handy, right? Not only are we able to see how much shifting takes place (0.128) and which element is moving around (article.a.main), but we have the exact coordinates of the element’s box from where it starts to where it ends.

Reporting Interaction To Next Paint

This is the new kid on the block that got my mind wondering about the Performance API in the first place. It’s been possible for some time now to measure INP as it transitions to replace First Input Delay as a Core Web Vitals metric in March 2024. When we’re talking about INP, we’re talking about measuring the time between a user interacting with the page and the page responding to that interaction.

Timeline illustration showing the tasks in between input delay and presentation delay in response to user interaction.

(Large preview)

We need to hook into the PerformanceEventTiming class for this one. And there’s so much we can dig into when it comes to user interactions. Think about it! There’s what type of event happened (entryType and name), when it happened (startTime), what element triggered the interaction (interactionId, experimental), and when processing the interaction starts (processingStart) and ends (processingEnd). There’s also a way to exclude interactions that can be canceled by the user (cancelable).

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Alias for the total duration.
    const duration = entry.duration;
    // Calculate the time before processing starts.
    const delay = entry.processingStart - entry.startTime;
    // Calculate the time to process the interaction.
    const lag = entry.processingStart - entry.startTime;

    // Don't count interactions that the user can cancel.
    if (!entry.cancelable) {
      console.log(`INP Duration: ${duration}`);
      console.log(`INP Delay: ${delay}`);
      console.log(`Event handler duration: ${lag}`);
    }
  });
});

// Call the Observer.
observer.observe({ type: "event", buffered: true });

Reporting Long Animation Frames (LoAFs)

Let’s build off that last one. We can now track INP scores on our website and break them down into specific components. But what code is actually running and causing those delays?

The Long Animation Frames API was developed to help answer that question. It won’t land in Chrome stable until mid-March 2024, but you can already use it in Chrome Canary.

A long-animation-frame entry is reported every time the browser couldn’t render page content immediately as it was busy with other processing tasks. We get an overall duration for the long frame but also a duration for different scripts involved in the processing.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 50) {
      // Log the overall duration of the long frame.
      console.log(`Frame took ${entry.duration} ms`)
      console.log(`Contributing scripts:`)
      // Log information on each script in a table.
      entry.scripts.forEach(script => {
        console.table({
          // URL of the script where the processing starts
          sourceURL: script.sourceURL,
          // Total time spent on this sub-task
          duration: script.duration,
          // Name of the handler function
          functionName: script.sourceFunctionName,
          // Why was the handler function called? For example, 
          // a user interaction or a fetch response arriving.
          invoker: script.invoker
        })
      })
    }
  });
});

// Call the Observer.
observer.observe({ type: "long-animation-frame", buffered: true });

When an INP interaction takes place, we can find the closest long animation frame and investigate what processing delayed the page response.

Long animation frames data the Chrome DevTools Console

(Large preview)

There’s A Package For This

The Performance API is so big and so powerful. We could easily spend an entire bootcamp learning all of the interfaces and what they provide. There’s network timing, navigation timing, resource timing, and plenty of custom reporting features available on top of the Core Web Vitals we’ve looked at.

If CWVs are what you’re really after, then you might consider looking into the web-vitals library to wrap around the browser Performance APIs.

Need a CWV metric? All it takes is a single function.

webVitals.getINP(function(info) {
  console.log(info)
}, { reportAllChanges: true });

Boom! That reportAllChanges property? That’s a way of saying we only want to report data every time the metric changes instead of only when the metric reaches its final value. For example, as long as the page is open, there’s always a chance that the user will encounter an even slower interaction than the current INP interaction. So, without reportAllChanges, we’d only see the INP reported when the page is closed (or when it’s hidden, e.g., if the user switches to a different browser tab).

We can also report purely on the difference between the preliminary results and the resulting changes. From the web-vitals docs:

function logDelta({ name, id, delta }) {
  console.log(`${name} matching ID ${id} changed by ${delta}`);
}

onCLS(logDelta);
onINP(logDelta);
onLCP(logDelta);

Measuring Is Fun, But Monitoring Is Better

All we’ve done here is scratch the surface of the Performance API as far as programmatically reporting Core Web Vitals metrics. It’s fun to play with things like this. There’s even a slight feeling of power in being able to tap into this information on demand.

At the end of the day, though, you’re probably just as interested in monitoring performance as you are in measuring it. We could do a deep dive and detail what a performance dashboard powered by the Performance API is like, complete with historical records that indicate changes over time. That’s ultimately the sort of thing we can build on this — we can build our own real user monitoring (RUM) tool or perhaps compare Performance API values against historical data from the Chrome User Experience Report (CrUX).

Or perhaps you want a solution right now without stitching things together. That’s what you’ll get from a paid commercial service like DebugBear. All of this is already baked right in with all the metrics, historical data, and charts you need to gain insights into the overall performance of a site over time… and in real-time, monitoring real users.

DebugBear Largest Contentful Paint dashboard showing overall speed, a histogram, a  timeline, and a performance breakdown of the most popular pages.

(Large preview)

DebugBear can help you identify why users are having slow experiences on any given page. If there is slow INP, what page elements are these users interacting with? What elements often shift around on the page and cause high CLS? Is the LCP typically an image, a heading, or something else? And does the type of LCP element impact the LCP score?

To help explain INP scores, DebugBear also supports the upcoming Long Animation Frames API we looked at, allowing you to see what code is responsible for interaction delays.

Table showing CSS selectors identifying different page elements that users have interacted with, along with their INP score.

(Large preview)

The Performance API can also report a list of all resource requests on a page. DebugBear uses this information to show a request waterfall chart that tells you not just when different resources are loaded but also whether the resources were render-blocking, loaded from the cache or whether an image resource is used for the LCP element.

In this screenshot, the blue line shows the FCP, and the red line shows the LCP. We can see that the LCP happens right after the LCP image request, marked by the blue “LCP” badge, has finished.

A request waterfall visualization showing what resources are loaded by a website and when they are loaded.

(Large preview)

DebugBear offers a 14-day free trial. See how fast your website is, what’s slowing it down, and how you can improve your Core Web Vitals. You’ll also get monitoring alerts, so if there’s a web vitals regression, you’ll find out before it starts impacting Google search results.

Smashing Editorial
(yk)

Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering

Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering

Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering

Frederik Dohr

2024-02-22T18:00:00+00:00
2025-06-20T10:32:35+00:00

In his seminal piece “The Market For Lemons”, renowned web crank Alex Russell lays out the myriad failings of our industry, focusing on the disastrous consequences for end users. This indignation is entirely appropriate according to the bylaws of our medium.

Frameworks factor highly in that equation, yet there can also be good reasons for front-end developers to choose a framework, or library for that matter: Dynamically updating web interfaces can be tricky in non-obvious ways. Let’s investigate by starting from the beginning and going back to the first principles.

Markup Categories

Everything on the web starts with markup, i.e. HTML. Markup structures can roughly be divided into three categories:

  1. Static parts that always remain the same.
  2. Variable parts that are defined once upon instantiation.
  3. Variable parts that are updated dynamically at runtime.

For example, an article’s header might look like this:

«Hello World»

«123» backlinks

Variable parts are wrapped in «guillemets» here: “Hello World” is the respective title, which only changes between articles. The backlinks counter, however, might be continuously updated via client-side scripting; we’re ready to go viral in the blogosphere. Everything else remains identical across all our articles.

The article you’re reading now subsequently focuses on the third category: Content that needs to be updated at runtime.

Color Browser

Imagine we’re building a simple color browser: A little widget to explore a pre-defined set of named colors, presented as a list that pairs a color swatch with the corresponding color value. Users should be able to search colors names and toggle between hexadecimal color codes and Red, Blue, and Green (RGB) triplets. We can create an inert skeleton with just a little bit of HTML and CSS:

See the Pen [Color Browser (inert) [forked]](https://codepen.io/smashingmag/pen/RwdmbGd) by FND.

See the Pen Color Browser (inert) [forked] by FND.

Client-Side Rendering

We’ve grudgingly decided to employ client-side rendering for the interactive version. For our purposes here, it doesn’t matter whether this widget constitutes a complete application or merely a self-contained island embedded within an otherwise static or server-generated HTML document.

Given our predilection for vanilla JavaScript (cf. first principles and all), we start with the browser’s built-in DOM APIs:

function renderPalette(colors) {
  let items = [];
  for(let color of colors) {
    let item = document.createElement("li");
    items.push(item);

    let value = color.hex;
    makeElement("input", {
      parent: item,
      type: "color",
      value
    });
    makeElement("span", {
      parent: item,
      text: color.name
    });
    makeElement("code", {
      parent: item,
      text: value
    });
  }

  let list = document.createElement("ul");
  list.append(...items);
  return list;
}

Note:
The above relies on a small utility function for more concise element creation:

function makeElement(tag, { parent, children, text, ...attribs }) {
  let el = document.createElement(tag);

  if(text) {
    el.textContent = text;
  }

  for(let [name, value] of Object.entries(attribs)) {
    el.setAttribute(name, value);
  }

  if(children) {
    el.append(...children);
  }

  parent?.appendChild(el);
  return el;
}

You might also have noticed a stylistic inconsistency: Within the items loop, newly created elements attach themselves to their container. Later on, we flip responsibilities, as the list container ingests child elements instead.

Voilà: renderPalette generates our list of colors. Let’s add a form for interactivity:

function renderControls() {
  return makeElement("form", {
    method: "dialog",
    children: [
      createField("search", "Search"),
      createField("checkbox", "RGB")
    ]
  });
}

The createField utility function encapsulates DOM structures required for input fields; it’s a little reusable markup component:

function createField(type, caption) {
  let children = [
    makeElement("span", { text: caption }),
    makeElement("input", { type })
  ];
  return makeElement("label", {
    children: type === "checkbox" ? children.reverse() : children
  });
}

Now, we just need to combine those pieces. Let’s wrap them in a custom element:

import { COLORS } from "./colors.js"; // an array of `{ name, hex, rgb }` objects

customElements.define("color-browser", class ColorBrowser extends HTMLElement {
  colors = [...COLORS]; // local copy

  connectedCallback() {
    this.append(
      renderControls(),
      renderPalette(this.colors)
    );
  }
});

Henceforth, a element anywhere in our HTML will generate the entire user interface right there. (I like to think of it as a macro expanding in place.) This implementation is somewhat declarative1, with DOM structures being created by composing a variety of straightforward markup generators, clearly delineated components, if you will.

1 The most useful explanation of the differences between declarative and imperative programming I’ve come across focuses on readers. Unfortunately, that particular source escapes me, so I’m paraphrasing here: Declarative code portrays the what while imperative code describes the how. One consequence is that imperative code requires cognitive effort to sequentially step through the code’s instructions and build up a mental model of the respective result.

Interactivity

At this point, we’re merely recreating our inert skeleton; there’s no actual interactivity yet. Event handlers to the rescue:

class ColorBrowser extends HTMLElement {
  colors = [...COLORS];
  query = null;
  rgb = false;

  connectedCallback() {
    this.append(renderControls(), renderPalette(this.colors));
    this.addEventListener("input", this);
    this.addEventListener("change", this);
  }

  handleEvent(ev) {
    let el = ev.target;
    switch(ev.type) {
    case "change":
      if(el.type === "checkbox") {
        this.rgb = el.checked;
      }
      break;
    case "input":
      if(el.type === "search") {
        this.query = el.value.toLowerCase();
      }
      break;
    }
  }
}

Note:
handleEvent means we don’t have to worry about function binding. It also comes with various advantages. Other patterns are available.

Whenever a field changes, we update the corresponding instance variable (sometimes called one-way data binding). Alas, changing this internal state2 is not reflected anywhere in the UI so far.

2 In your browser’s developer console, check document.querySelector("color-browser").query after entering a search term.

Note that this event handler is tightly coupled to renderControls internals because it expects a checkbox and search field, respectively. Thus, any corresponding changes to renderControls — perhaps switching to radio buttons for color representations — now need to take into account this other piece of code: action at a distance! Expanding this component’s contract to include
field names could alleviate those concerns.

We’re now faced with a choice between:

  1. Reaching into our previously created DOM to modify it, or
  2. Recreating it while incorporating a new state.

Rerendering

Since we’ve already defined our markup composition in one place, let’s start with the second option. We’ll simply rerun our markup generators, feeding them the current state.

class ColorBrowser extends HTMLElement {
  // [previous details omitted]

  connectedCallback() {
    this.#render();
    this.addEventListener("input", this);
    this.addEventListener("change", this);
  }

  handleEvent(ev) {
    // [previous details omitted]
    this.#render();
  }

  #render() {
    this.replaceChildren();
    this.append(renderControls(), renderPalette(this.colors));
  }
}

We’ve moved all rendering logic into a dedicated method3, which we invoke not just once on startup but whenever the state changes.

3 You might want to avoid private properties, especially if others might conceivably build upon your implementation.

Next, we can turn colors into a getter to only return entries matching the corresponding state, i.e. the user’s search query:

class ColorBrowser extends HTMLElement {
  query = null;
  rgb = false;

  // [previous details omitted]

  get colors() {
    let { query } = this;
    if(!query) {
      return [...COLORS];
    }

    return COLORS.filter(color => color.name.toLowerCase().includes(query));
  }
}

Note:
I’m partial to the bouncer pattern.
Toggling color representations is left as an exercise for the reader. You might pass this.rgb into renderPalette and then populate with either color.hex or color.rgb, perhaps employing this utility:

function formatRGB(value) {
  return value.split(",").
    map(num => num.toString().padStart(3, " ")).
    join(", ");
}

This now produces interesting (annoying, really) behavior:

See the Pen [Color Browser (defective) [forked]](https://codepen.io/smashingmag/pen/YzgbKab) by FND.

See the Pen Color Browser (defective) [forked] by FND.

Entering a query seems impossible as the input field loses focus after a change takes place, leaving the input field empty. However, entering an uncommon character (e.g. “v”) makes it clear that something is happening: The list of colors does indeed change.

The reason is that our current do-it-yourself (DIY) approach is quite crude: #render erases and recreates the DOM wholesale with each change. Discarding existing DOM nodes also resets the corresponding state, including form fields’ value, focus, and scroll position. That’s no good!

Incremental Rendering

The previous section’s data-driven UI seemed like a nice idea: Markup structures are defined once and re-rendered at will, based on a data model cleanly representing the current state. Yet our component’s explicit state is clearly insufficient; we need to reconcile it with the browser’s implicit state while re-rendering.

Sure, we might attempt to make that implicit state explicit and incorporate it into our data model, like including a field’s value or checked properties. But that still leaves many things unaccounted for, including focus management, scroll position, and myriad details we probably haven’t even thought of (frequently, that means accessibility features). Before long, we’re effectively recreating the browser!

We might instead try to identify which parts of the UI need updating and leave the rest of the DOM untouched. Unfortunately, that’s far from trivial, which is where libraries like React came into play more than a decade ago: On the surface, they provided a more declarative way to define DOM structures4 (while also encouraging componentized composition, establishing a single source of truth for each individual UI pattern). Under the hood, such libraries introduced mechanisms5 to provide granular, incremental DOM updates instead of recreating DOM trees from scratch — both to avoid state conflicts and to improve performance6.

4 In this context, that essentially means writing something that looks like HTML, which, depending on your belief system, is either essential or revolting. The state of HTML templating was somewhat dire back then and remains subpar in some environments.
5 Nolan Lawson’s “Let’s learn how modern JavaScript frameworks work by building one” provides plenty of valuable insights on that topic. For even more details, lit-html’s developer documentation is worth studying.
6 We’ve since learned that some of those mechanisms are actually ruinously expensive.

The bottom line: If we want to encapsulate markup definitions and then derive our UI from a variable data model, we kinda have to rely on a third-party library for reconciliation.

Actus Imperatus

At the other end of the spectrum, we might opt for surgical modifications. If we know what to target, our application code can reach into the DOM and modify only those parts that need updating.

Regrettably, though, that approach typically leads to calamitously tight coupling, with interrelated logic being spread all over the application while targeted routines inevitably violate components’ encapsulation. Things become even more complicated when we consider increasingly complex UI permutations (think edge cases, error reporting, and so on). Those are the very issues that the aforementioned libraries had hoped to eradicate.

In our color browser’s case, that would mean finding and hiding color entries that do not match the query, not to mention replacing the list with a substitute message if no matching entries remain. We’d also have to swap color representations in place. You can probably imagine how the resulting code would end up dissolving any separation of concerns, messing with elements that originally belonged exclusively to renderPalette.

class ColorBrowser extends HTMLElement {
  // [previous details omitted]

  handleEvent(ev) {
    // [previous details omitted]

    for(let item of this.#list.children) {
      item.hidden = !item.textContent.toLowerCase().includes(this.query);
    }
    if(this.#list.children.filter(el => !el.hidden).length === 0) {
      // inject substitute message
    }
  }

  #render() {
    // [previous details omitted]

    this.#list = renderPalette(this.colors);
  }
}

As a once wise man once said: That’s too much knowledge!

Things get even more perilous with form fields: Not only might we have to update a field’s specific state, but we would also need to know where to inject error messages. While reaching into renderPalette was bad enough, here we would have to pierce several layers: createField is a generic utility used by renderControls, which in turn is invoked by our top-level ColorBrowser.

If things get hairy even in this minimal example, imagine having a more complex application with even more layers and indirections. Keeping on top of all those interconnections becomes all but impossible. Such systems commonly devolve into a big ball of mud where nobody dares change anything for fear of inadvertently breaking stuff.

Conclusion

There appears to be a glaring omission in standardized browser APIs. Our preference for dependency-free vanilla JavaScript solutions is thwarted by the need to non-destructively update existing DOM structures. That’s assuming we value a declarative approach with inviolable encapsulation, otherwise known as “Modern Software Engineering: The Good Parts.”

As it currently stands, my personal opinion is that a small library like lit-html or Preact is often warranted, particularly when employed with replaceability in mind: A standardized API might still happen! Either way, adequate libraries have a light footprint and don’t typically present much of an encumbrance to end users, especially when combined with progressive enhancement.

I don’t wanna leave you hanging, though, so I’ve tricked our vanilla JavaScript implementation to mostly do what we expect it to:

See the Pen [Color Browser [forked]](https://codepen.io/smashingmag/pen/vYPwBro) by FND.

See the Pen Color Browser [forked] by FND.
Smashing Editorial
(yk)

10+ Design Tools and Resources for 2024

The number of design resources and tools available on the market is increasing at a pace faster than one can count to 100. This makes it increasingly challenging to find the tools or resources you want and need to stay ahead of the competition.

To lend a helping hand, we’ve evaluated numerous free and premium resources and tools for designers and small business owners.

The variety of web design tools and resources featured in our list includes:

  • Website Builders – which you can use to quickly and easily create landing pages and multi-page websites, all without the frustration of hitting your head against the desk.
  • WordPress Themes – which allow you to build complex websites and e-stores known for their high conversion rates.
  • WordPress Plugins – which enable the incorporation of otherwise challenging-to-develop functionalities, helping your websites stand out.
  • Vector Illustrations – which can transform a dull website into a captivating one.
  • Font Identifiers – which help you identify appealing fonts used by brands like Nike or Hilton, allowing you to incorporate them into your own web projects.

More than half of the web design resources and tools listed here are either free or offer a free version or trial. They are presented in order of discussion:

BrizyTrafftWpDataTablesLayerSliderAmelia
UncodeSlider RevolutionGetIllustrationsMobirise AIWhatFontIs
BlocksyTotal ThemeEssential GridWoodmartXStore

Common Features of These Design Tools

  • They Exude Quality. The moment you install or download and begin using any of them, you’ll notice there’s something distinctively premium about them. This “special” quality is reflected in how effortless each interaction with the tool or resource feels.
  • They Are User-Friendly. From installation to downloading, using, or editing, all interactions and features are thoughtfully placed and designed.
  • They Deliver Value. Utilizing these tools will enable you to complete web design projects more quickly and enhance the aesthetics of your deliverables. By incorporating them into your workflow, you’re likely to secure higher-paying projects.

Top 15 Web Design Tools & Resources

To simplify your search, we have meticulously compiled essential information about these products, including key features, ratings, user reviews, and access to immediate customer support resources.

Let’s dive right in.

1. Brizy Builder



Click on the video to get a firsthand look at one of Brizy’s most popular templates in action.

Notably, its standout feature is the white label option that allows your clients to build websites using a builder that you own, which prominently showcases your brand.

There’s much more to appreciate about Brizy. Highlights include:

  • Brizy’s intuitiveness: each tool or option is readily available precisely when and where you need it.
  • The capability to directly edit text, images, or any content in place.
  • The elimination of the need to deal with content creation through a disjointed sidebar, a common inconvenience with many other builders.

Brizy Builder also presents its users with a commendable array of demo/template/prebuilt websites. The “Natural Beauty” pre-built website, for instance, is attractive and inspirational, offering a robust foundation for websites aimed at beauty parlors, spas, and other service-oriented businesses.

Agencies and resellers will find value in the marketing integrations, reseller client management, and billing features.


2. Trafft – Booking Software



Click on the video for a firsthand look at one of Trafft’s most popular templates in action.

A highly valued feature among website building or enhancement tools is their adaptability; in this instance, the capability to operate in multiple languages. 70% of Trafft users highlight its powerful multilingual notifications system as the top feature.

The extensive library of prebuilt websites significantly contributes to the enjoyable experience of working with Trafft. The Trafft Barbershop template demonstrates the seamless integration of scheduling and marketing.

Exploring Trafft’s capabilities is a rewarding journey. Key features you’ll appreciate when you start using Trafft include:

  • The backend and frontend interface’s ease of use and innovative design.
  • The strength of the customization options available.
  • The versatility of the white label option.

The white label option is particularly advantageous for digital design agencies and web developers servicing clients. Another key user group includes individuals who require immediate confirmation for their appointments and schedules.


3. wpDataTables -The Best Tables & Charts WordPress Table Plugin



Click on the video for a firsthand look at one of WpDataTables’ most popular uses in action.

The WordPress table plugin’s standout feature, its Multiple Database Connections, marks a significant advance in data management, transforming every table into a comprehensive data hub that can gather information from various databases and servers.

Aside from this, WpDataTables offers numerous features that facilitate the creation of custom, responsive, and easily editable tables and charts, streamlining data management processes. For instance, a financial team could effectively utilize the responsive top mutual fund template.

With WpDataTables, you will quickly realize you have access to:

  • A rich assortment of useful and practical functionalities within an intuitive interface.
  • Unmatched data management capabilities.
  • The expertise to adeptly handle complex data structures.

WpDataTables serves a broad spectrum of client needs effectively.

  • Separate database connections for engaging with specialized database systems.
  • Chart engines for visualizing data trends and comparisons, useful in marketing, finance, and environmental contexts.

4. LayerSlider – Best WordPress Slider Builder Plugin



Click on the video for a firsthand look at one of LayerSlider’s most popular templates in action.

It’s common for a newly added tool or feature to quickly become a favorite among users.

The scroll effect in LayerSlider has become the plugin’s standout feature, prominently featured in the most recently released templates, including full-size landing pages and entire websites. Experience the Parallax City template to see the potential of these designs.

The versatility of LayerSlider contributes to its popularity, enabling the creation of simple sliders or slideshows as well as the integration of complex animated content.

You will appreciate:

  • The customizable interface, making LayerSlider feel like it was tailored specifically for you.
  • The access to connected online services, providing a plethora of visual content creation possibilities.
  • The Project Editor, simplifying the use of this plugin significantly.

LayerSlider particularly excels in creating content for marketing, offering astonishing effects for engaging customers through popups and banners.


5. Amelia – WordPress Booking Plugin for Appointments and Events



Click on the video for a firsthand look at one of Amelia’s most popular templates in action.

Amelia’s automated notification system stands out as its prime feature. Users appreciate the simplicity with which they can categorize appointments as pending, approved, cancelled, rejected, or rescheduled. Additionally, sending birthday greetings or notices for upcoming events helps enhance client engagement and loyalty.

Amelia offers a variety of templates that are easily customizable. The massage therapist template, for instance, exemplifies a stylish and contemporary design.

Engaging with Amelia, you will notice:

  • The seamless navigation and innovative design of both the frontend and backend interfaces, highlighting its functionality and user-friendly approach.
  • The extensive customization options Amelia provides, along with its straightforward pricing plans.

The Amelia plugin is beneficial for any service-oriented business, including ticket sales agencies and event organizers. Developers and programming agencies will also find value in incorporating Amelia into their design toolsets.


6. Uncode – Creative & WooCommerce WordPress Theme



Click on the video for a firsthand look at one of Uncode’s most popular templates in action.

The extensive range of website building tools and options offered by this creative WooCommerce theme certainly contributes to its popularity. However, most users highlight the demo library as its standout feature. The demos exhibit remarkable attention to detail and can serve as significant sources of inspiration.

Choosing a single best feature would be difficult, so it’s best not to attempt it. The Portfolio Video Cover template from Uncode is among its most downloaded. Consider what possibilities it could open up for you.

You will quickly appreciate Uncode’s customization capabilities, the value of its demos and wireframes, and the exceptional customer support provided.

Uncode’s main user base includes:

  • Shop business owners who praise Uncode’s innovative WooCommerce features.
  • Agencies and freelancers who value the advanced customization options available.

7. Slider Revolution – More than just a WordPress Slider



Click on the video for a firsthand look at one of Slider Revolution’s most popular templates in action.

Slider Revolution’s premier feature is its capability to create visually stunning animated effects for WordPress sites without the need for additional effort or coding skills.

But the Slider Revolution plugin’s utility extends beyond just sliders. It allows you to:

  • Design home pages that immediately capture the attention of visitors.
  • Create visually appealing portfolios that demand a closer look.
  • Develop striking website sections that stand out.

If you’re seeking inspiration, explore Slider Revolution’s extensive library of over 250 templates. Many feature unique special effects not found on other websites and are fully optimized for various screen sizes. For instance, the Generative AI WordPress template is nothing short of revolutionary.

Slider Revolution is ideally suited for individual web designers, e-commerce sites, and small agencies.


8. Getillustrations – Creative Stock Illustrations Library



Click on the video for a firsthand look at one of GetIllustrations’ most popular icons in action.

Is GetIllustrations’ top feature its collection of 21,500 vector illustrations, the free updates for one year, or the addition of new illustration packs every week? In fact, it’s the combination of all three.

With over 40 categories to explore, each filled with dozens, hundreds, and even up to 1,200 captivating illustrations, finding the perfect one for your needs is effortlessly easy. The illustrations are so well organized that browsing through them is a breeze.

Designed to cater to a wide range of clients, from students to businesses and developers, the collection includes pencil and basic ink illustrations, several 3D illustration categories, and specific themes like fitness, logistics, and eco illustrations, among others.

Exclusive to GetIllustrations, these illustrations enable users to craft truly unique projects.

Packs are available for purchase, with the Essential Illustrations pack being the most comprehensive. It includes Scenes, Avatars, and Elements, boasting a vast collection of one-color vector illustrations renowned for their depth and timeless appeal.


9. Mobirise AI Website Builder



The Mobirise AI website builder’s premier feature allows for the generation of a website from a single prompt.

Provide a detailed description of your envisioned website, your offerings, and your target audience. The AI website builder leverages your input and intelligent algorithms to automatically create customized, aesthetically pleasing websites. This makes it an excellent choice for those without technical expertise or anyone in search of straightforward, efficient design solutions.

So advanced is Mobirise AI that it can understand instructions in Swahili, showcasing its impressive language capabilities.

  • Once the AI has generated a basic layout, you can use prompts to select a style, color scheme, typography, and more. Pre-generated text and content can also be edited to meet your specific requirements without the need for coding.
  • Important: The AI facilitates website creation but does not claim ownership of the final product.
  • Concerned about optimization for Google or mobile devices? Mobirise AI addresses all such concerns as well.

10. WhatFontIs




There is a 90%+ chance that WhatFontIs will identify any free or licensed font you wish to find.

No other system matches this level of accuracy. WhatFontIs boasts a database of nearly 1 million free and commercial fonts, which is at least five times more than any other font identifier tool.

Users turn to WhatFontIs for various reasons, whether it’s to identify a specific font requested by a client or simply because they’ve encountered an appealing font and wish to know its name and where to find it. The search can be conducted regardless of the font’s publisher, producer, or foundry.

Just drag, drop, and upload a clear font image.

  • An AI-powered search engine swiftly identifies the font along with over 50 similar options.
  • The results will indicate where to download the free font and where to purchase a commercial one.

For the tool to accurately identify your font, the submitted image must be of high quality, and letters in cursive fonts should be separated. If these conditions are not met, the tool may not correctly identify the font.


11. Blocksy – Premium WooCommerce WordPress Theme



Click on the video for a firsthand look at one of Blocksy’s most popular templates in action.

Blocksy’s leading feature is evenly split among its user-friendly header and footer builder, WooCommerce integration with its extensive features, Gutenberg compatibility, and the advanced hooks system equipped with display conditions.

In other words, there’s hardly anything that you won’t find utterly impressive. (The high customer rating supports this assertion).

You’ll quickly come to realize that Blocksy:

  • Leverages the latest web technologies.
  • Delivers exceptional performance.
  • Seamlessly integrates with the most popular plugins.

Blocksy is versatile enough to create any type of website across any niche.

The demos of Blocksy are not just visually appealing but also highly useful for website building. The Daily News creative demo ranks among the top 5 most utilized.


12. Total WordPress Theme



Click on the video for a firsthand look at one of Total’s most popular templates in action.

Total’s versatility is undoubtedly its standout feature, making it a comprehensive toolkit of design options, which justifies its name perfectly. Additionally, its exceptional support distinguishes Total from many other themes.

Engaging with Total will quickly reveal:

  • That Total is optimized for speed, with possibilities for further optimization to enhance performance.
  • An abundance of settings, numerous page builder element options, a font manager, custom post types, and more.
  • Support for dynamic templates for posts and archives.

The prebuilt sites offered by Total are of superior quality. Bolt, known for its minimalistic design, is among the top 5 most downloaded and utilized, adaptable to a variety of purposes.

Total is designed to meet the needs of beginners, developers, DIY enthusiasts, and essentially anyone in need of a flexible and powerful website solution.


13. Essential Grid – WordPress Gallery Plugin



Click on the video for a firsthand look at one of Essential Grid’s most popular grid skins in action.

The hallmark of Essential Grid, its array of over 50 unique grid skins, is undoubtedly its standout feature.

This plugin offers significant value, as few web designers or developers would choose to create a gallery from scratch when such alternatives are available.

Using an Essential Grid gallery skin, you can easily achieve the desired gallery layout, and you might even find yourself enamored with a layout you hadn’t anticipated. For instance, the Funky Instagram cobbled layout social media grid might present an entirely new perspective on gallery design.

You’ll quickly appreciate Essential Grid’s ability to save time and effectively organize content streams.


14. WoodMart – WordPress WooCommerce Theme



Click on the video for a firsthand look at one of WoodMart’s most popular templates in action.

A quick visit to the WoodMart website immediately highlights its standout feature: the custom layouts for shop, cart, and checkout pages are so impressively designed and realistic that you might momentarily forget you’re viewing a demo and attempt to place an order.

WoodMart is distinguished by numerous appealing aspects:

  • A vast array of options available for customization.
  • The ease with which layouts can be customized to add necessary branding, despite their near-perfect initial design.
  • The Theme Settings Search function and performance optimization features significantly save time.
  • Options like “Frequently Bought Together,” “Dynamic Discounts,” and social media integrations are highly favored by store owners and marketers.

Additionally, WoodMart offers a White Label option for further customization.

Identifying the most popular demos can be challenging, as many enjoy widespread usage. However, the Event Agency demo stands out as one of the top 5 most downloaded for clear reasons.


15. XStore – Best WooCommerce WordPress Theme



Click on the video for a firsthand look at one of XStore’s most popular pre-built websites in action.

XStore is clearly designed for shop owners and those aspiring to be, with its range of ready-made stores (pre-built websites) having long been a popular feature. However, the newly introduced selection of Sales Booster features has rapidly become the most celebrated aspect.

You’ll quickly come to value the Builders Panel and the intuitive XStore Control Panel, both of which offer extensive flexibility for building and customizing your store.

The immediate advantage provided by the pre-built websites is evident from the start. Opting for a pre-built website like the XStore Grocery Store, you’ll see how swiftly you can have an e-store operational.

Beyond the ready-to-use layouts, XStore grants you immediate access to the Single Product Builder, Checkout Builder, Cart Builder, Archive Products Builder, and 404 Page Builder, enriching your site-building toolkit.


Summary

The best web design tools & resources all share several things in common.

  • They’re easy to use and set up.
  • They give a finished website a competitive edge in terms of both design and functionality.
  • They have excellent customer support.

Many of them have a free version, or as a minimum come with a lot of information so that you won’t suspect that you bought a completely different product from the one they described.

Tool/ResourceSummaryStandout Feature
BrizyThe most intuitive Website Builder for Agencies & SaaS EnterprisesWhite Label Option
TrafftThe Best Free Booking Scheduling Solution for BusinessesMultilingual notification system
WpDataTablesBest WP plugin for tables and charts with huge amounts of complex dataMultiple database connectivity to disparate sources
LayerSliderTop WP plugin for quickly making simple slidersCool scroll effects for sliders and hero images
Amelia#1 WP plugin for automating an appointment and events booking systemMultilingual notifications system
Uncode#1 WP and WooCommerce go-to solution for creative designers and agenciesDetailed and inspirational demo designs
Slider RevolutionBest WP plugin for creating jaw-dropping sliders, pages, and websitesAnimated WOW effects for WordPress
GetIllustrationsHuge selection and variety of world class illustrationsUniqueness & superior attention to detail
Mobirise AI Website BuilderCreate full page websites with just prompt commandsAI generated layouts and content
WhatFontisThe largest and most accurate free font identifierAI powered search and huge font database
BlocksyThe #1 free WordPress theme for building engaging lightweight websitesGutenberg Support and WooCommerce integration
Total ThemeTop WP theme for crafting websites from scratch or from templatesMaximum website building flexibility
Essential Grid#1 WP Gallery plugin for creating unique and breathtaking gallery layouts50+ unique grid skins
WoodmartIdeal WordPress theme for creating niche eCommerce storesLayouts builder for custom shop and product pages
XStore#1 WooCommerce theme for building engaging customer-centric online storesLarge selection of Sales Boosters

This article is a good place to start looking for design resources and tools for small businesses and designers.

The post 10+ Design Tools and Resources for 2024 appeared first on Hongkiat.

26 Best Classified WordPress Themes (Free and Premium)

Are you looking to create a WordPress-powered website that serves as a classified platform? If so, you’re in the right place. This article showcases more than 20 WordPress themes, carefully selected to cater to a variety of classified site needs. Whether you’re a budding entrepreneur, a small business owner, or simply someone keen on setting up an efficient online classifieds portal, these themes are just what you need.

Classified WordPress Themes

Our list includes both free and premium options, ensuring there’s something for every budget and requirement. Each theme is designed with user-friendliness in mind, making your site not only visually appealing but also easy to navigate and use.

Dive in and find the ideal WordPress theme to launch or enhance your classified website.

Free WordPress Themes for Classified

Best Listing

Best Listing WordPress Theme

Best Listing is designed for professional directory websites. It offers a straightforward directory builder, making it easy to manage different types of directories. You’ll find features like a multi-directory system, unlimited custom fields, and ranked featured listings. Importing data is simple with CSV import capabilities.

Additionally, it includes classified ads functionality, perfect for starting a classified listing business. The responsive design ensures your site looks great on all devices, making it a great choice for launching a directory listing business.

Preview theme


Classified Ads

Classified Ads WordPress Theme

The Classified Ads theme is notable for its striking red, multi-purpose HTML5 layout. It’s effective for classified ad websites, providing a responsive 2-column layout. Customize it with your own ad button text, header, and background https://assets.hongkiat.com/uploads/classified-wordpress-themes/colors.

The premium version includes PayPal integration for paid ads, Adsense JavaScript code, customizable user form fields, and various payment gateways. It’s browser-friendly and offers a user-friendly platform for classified ad listings.

Preview theme


Classified Ads Directory

Classified Ads Directory WordPress Theme

For those looking to build a diverse range of sites, from Yellow Pages to real estate agencies, the Classified Ads Directory Theme is a perfect choice. It includes Open Street Maps support, making it ideal for real estate and location-based services. Check out its versatility in the demo at wpdirectorykit.com.

This theme serves various purposes, whether for realtors, brokers, hotels, or rental services, offering a comprehensive solution for directory-based websites.

Preview theme


Classified Listings

Classified Listings WordPress Theme

Classified Listings is dynamic, suitable for a wide range of online classified ads platforms. Whether for real estate, jobs, or products, it offers an easy-to-use interface for posting and searching ads. The front-end submission system is user-friendly, perfect for a community-driven marketplace.

Its advanced search and filtering help users find listings easily. Customizable templates provide a unique look for each listing, and monetization options are available for revenue generation. It’s responsive, ensuring a smooth experience across devices.

Preview theme


CLClassified

CLClassified WordPress Theme

CLClassified reinvents the classified ad website experience. Suitable for both beginners and experienced users, it focuses on the essentials of a classified ads site. This theme supports multiple revenue streams, including ad promotions and a store facility. It offers extensive customization, with Gutenberg compatibility for easy editing and unlimited color options.

Features like the WordPress Live Customizer and One-Click Demo Importer make setup a breeze. User-friendly elements like Ajax filters and autocomplete search enhance the overall experience. This fully responsive, mobile-friendly theme is also cross-browser compatible and supports unlimited custom fields.

Preview theme


Listdomer

Listdomer WordPress Theme

Listdomer is tailored for listing, directory, and classified websites, adaptable to various industries like events and real estate. Integrated with the Listdom plugin, it offers diverse views such as grid, list, and masonry.

This theme is easy to use, requiring no technical knowledge, and features a powerful, customizable search form. Designing pages is effortless with Elementor’s drag-and-drop functionality. Its mobile compatibility and SEO-friendly design make it a top performer in search engine rankings.

Preview theme


ListingHive

ListingHive WordPress Theme

ListingHive serves as a multipurpose theme for any directory or listing website. Ideal for a business directory, job board, or a classifieds site, its flexibility accommodates various listing types.

The theme’s user-friendly design simplifies site building and management, making it an efficient choice for diverse projects.

Preview theme


NexProperty

NexProperty WordPress Theme

NexProperty is designed for real estate directory listings, suitable for agencies, realtors, and classified ads. It’s tailored for Elementor, allowing visual customization across the board.

The theme includes features for managing listings, categories, and fields, multimedia integration, and messaging support. Fully compatible with Elementor, it offers a visually appealing, customizable experience. Open Street Maps support enhances its real estate listing capabilities. With demo data for real estate and car dealerships, NexProperty provides a complete solution for classified directory or listing businesses.

Preview theme


TerraClasic

TerraClasic WordPress Theme

TerraClasic is the first free theme for the TerraClassifieds plugin, ideal for classified ads. It emphasizes user-friendly ad posting and uses a classic contact form for advertiser communication. Future updates are set to include various payment methods and auction features.

This theme is a great starting point for those new to classified ads, offering a straightforward, functional solution.

Preview theme


Premium Themes for Classified

AdForest

AdForest WordPress Theme

AdForest distinguishes itself as a premium Classified Ads WordPress theme with a modern front-end UI. It offers various color options and WordPress functionalities, including Google Map integration.

Built for the modern era, AdForest is quick to set up and easy to customize. Constructed with HTML5, CSS3, Bootstrap 5, and JQuery 3.1, it promises a robust and responsive design. Extensive documentation is provided for easy setup.

AdForest is designed to meet all classified ad posting needs, making it an excellent choice for those aiming to elevate their classified business.

Preview theme


Adifier

Adifier WordPress Theme

Adifier transforms the classified ads marketplace with its comprehensive and user-focused design. It’s built from the ground up to provide essential features, such as multiple ad types, advanced custom fields, and various monetization options.

Users can choose from a range of payment methods, enjoy a custom messaging and reviews system, and participate in auctions. A standout feature is the ad comparison based on custom fields, elevating the user experience.

Adifier also integrates social login and a user dashboard, making it a complete solution for a sophisticated classified ads marketplace.

Preview theme


Avtorai

Avtorai WordPress Theme

For car dealership businesses, Avtorai emerges as the top pick. Tailored specifically for Car Dealer, Dealership, Car Listing, Classified, and Car Rental sites, this theme is responsive, retina-ready, and built on Bootstrap 4.

With features like 4 Home Page layouts, WPBakery Page Builder, and WooCommerce readiness, it’s highly functional. Avtorai supports one-click installation, touch-enabled carousels, Slider Revolution, and includes a variety of listing features like paid listings, a Trim Cars Database, and multiple layout options.

The frontend dashboard, shortcode elements, and compatibility with Google fonts, WPML, and Contact Form 7, make it versatile for car dealership websites.

Preview theme


Buyent

Buyent WordPress Theme

Buyent stands as a fast and modern option for classified ads and directory websites. Its integration with the Elementor page builder makes homepage customization straightforward.

The theme shines with its monetization features, such as selling ads and ad banner slots. For a classified business looking to stand out, Buyent offers a user-friendly design and efficient monetization capabilities, making it an excellent choice.

Preview theme


CarSpot

CarSpot WordPress Theme

CarSpot, a robust theme for car dealerships, caters to all sizes of automotive businesses. It includes key ad posting features, a modern gallery, a review system, and a car comparison feature.

With 6 premade demos, a one-click demo importer, and various customization options, CarSpot is ideal for creating a feature-rich website. Its exceptional vehicle search functionality and ad features are designed to boost business sales, making it a comprehensive choice for anyone in the car dealership industry seeking a strong online presence.

Preview theme


Clasifico

Clasifico WordPress Theme

Clasifico offers a clean and modern solution for classified advertising and online listing sites. It’s highly responsive and customizable, featuring three homepage layouts, two header styles, and over 15 inner page variations. This flexibility allows for extensive personalization and design choices, making Clasifico a versatile choice for various advertising or online listing sites.

Preview theme


Classiads

Classiads WordPress Theme

Classiads stands as a top choice in the classified ads website arena, thanks to its status as the best-selling theme on ThemeForest. Renowned for its flexibility and feature-rich environment, it offers a user-friendly interface that makes it a reliable choice for building a classified ads platform.

Ideal for those seeking an efficient and trusted solution, Classiads is a standout in its category.

Preview theme


Classiera

Classiera WordPress Theme

Turning to Classiera, this theme is known for its modern and responsive design, making it a popular choice for classified ads websites. It’s SEO optimized and offers a range of features including various ad types and pricing plans.

With its ability to cater to diverse classified ad needs, Classiera is a versatile and professional option for creating classified ads websites.

Preview theme


ClassifiedPro

ClassifiedPro WordPress Theme

ClassifiedPro, using the CubeWP Framework, offers unique versatility with support for three specific post types: General items, Automotive, and Real Estate. This theme suits both local classified websites for cash transactions and pickup, and re-commerce sites that support online transactions and shipping.

ClassifiedPro stands out for its dual functionality, enhancing revenue generation opportunities and making it a top choice for diverse classified ad requirements.

Preview theme


Classifieds

Classifieds WordPress Theme

The Classified Ads WordPress Theme provides a comprehensive solution for classified ads websites. It’s designed to be both beautiful and powerful, with a fast performance that aims to meet all classified ad needs. Their team offers free installation of the latest version and demo content within 48 hours, providing a hassle-free setup and making it an attractive option for a user-friendly classified ads website.

Preview theme


Classify

Classify WordPress Theme

Classify is a responsive and SEO-optimized Classified Advertising Theme for WordPress. Developed using Bootstrap, HTML5, and CSS3, it promises a modern and durable framework.

It’s versatile, particularly excelling in Directory and Classified listings, and integrates social media logins for enhanced user convenience. With lifetime support, free installation, and updates, Classify is a sustainable choice for long-term website development.

Preview theme


Classima

Classima WordPress Theme

Classima, created with creativity and modern design, is ideal for classified listing and directory websites. Optimized for Gutenberg and built with Elementor Page Builder, it offers customizable features like multiple homepages and header styles. It supports various ad layouts, Ajax filters, and autocompletion for searches, making it a comprehensive and user-friendly theme.

Classima is responsive, mobile-friendly, and supports multiple payment options, ensuring it meets the needs of classified ads websites.

Preview theme


Hourty

Hourty WordPress Theme

Hourty Complex Tower, designed for real estate agents and agencies, excels in showcasing single properties and apartment complexes. Its design is both attractive and functional, meeting a variety of real estate needs such as rentals, sales, and commercial projects.

With four homepage demos, Hourty is efficient for creating quality real estate websites. Its comprehensive functionalities and plugins are time-savers, making it a versatile choice for realtors, investors, and construction companies.

Preview theme


Knowhere Pro

Knowhere Pro WordPress Theme

Knowhere Pro is a diverse directory WordPress theme, ideal for a city portal or specialized directories like restaurants, cafes, hotels, job boards, or classified ads. Its flexibility caters to a range of directory styles, from property listings to job portals.

With its diverse page blocks and sections, Knowhere Pro offers a universal solution for any directory-based website.

Preview theme


Lisfinity

Lisfinity WordPress Theme

Lisfinity focuses on classified ads, offering a streamlined platform specifically for this niche. Its design and functionality are tailored to enhance classified listings, providing a focused solution for this sector.

Preview theme


Motodeal

Motodeal WordPress Theme

Motodeal is a multipurpose theme for vehicle dealerships. It suits a variety of vehicles, from luxury cars to bikes, trucks, yachts, and even agricultural vehicles. This theme’s versatile design makes it an excellent platform for any vehicle dealership, providing an attractive and functional website.

Preview theme


Trade

Trade WordPress Theme

Trade stands out for its customization and flexibility. It incorporates the Visual Composer Drag & Drop Page Builder and an extensive options panel. Built on Bootstrap 3.x, it offers a responsive, mobile-first experience. With unlimited color choices, Google Fonts, and cross-browser compatibility, Trade is user-friendly. Its detailed documentation and child theme inclusion simplify customization.

Additionally, it’s translation ready and WPML compatible, appealing to a broad audience.

Preview theme


The post 26 Best Classified WordPress Themes (Free and Premium) appeared first on Hongkiat.

60 Best Responsive WordPress Themes (Free and Paid)

The shift towards mobile browsing has made responsive website design more important than ever. As most people now surf the web on their smartphones, websites must adapt seamlessly to different screen sizes to ensure a user-friendly experience. This is where responsive WordPress themes come into play, offering flexibility and optimal viewing across various devices.

To help you stay ahead in this mobile-first world, we’ve compiled an extensive list of 60 WordPress themes that excel in responsiveness. This collection features a mix of both free and paid options, providing choices for every need and budget. Whether you’re launching a business site, a creative portfolio, or an online store, our selection is designed to help your website not only look fantastic but also perform exceptionally on any device. Explore our carefully curated list and find the perfect responsive WordPress theme to boost your online presence.


Alpus

Alpus stands out with its range of features, perfectly blending with drag & drop page builders and plugins. It excels with unique widgets like Animated Text and Price Table, and advanced tools including Contact Form 7. The theme offers versatile chart options and practical features like Sticky Navigation. Users appreciate its user-friendliness, support, and professional design.

Alpus WordPress Theme

Sydney

Sydney transforms business websites with its free, customizable design. Its array of headers, colors, and typography aligns with any brand. The inclusion of Sydney Studio and layout options enhances its appeal. With Sydney Pro, you get extra WooCommerce features and more Elementor widgets. It’s recognized for its speed and flexibility.

Sydney WordPress Theme

Corporate Moderna

Corporate Moderna, ideal for corporate websites, boasts a modern design and essential features like a portfolio filter. This Bootstrap template is also great for startups and blogs, offering Google fonts and a multi-column footer. Its built-in code editor simplifies customization, and users love its professional look and user-friendly interface.

Corporate Moderna WordPress Theme

Activello

Activello’s clean, minimal design is perfect for various blogs. Built with Bootstrap, it’s responsive and features custom widgets and a fullscreen slider. It supports major plugins and is SEO friendly. Its flexibility and speed make it a favorite among free WordPress themes.

Activello WordPress Theme

Shapely

Shapely’s one-page design is ideal for businesses and blogs. It offers flexibility with customizable homepage widgets and compatibility with major plugins. This theme suits a wide range of websites, boasting SEO optimization and a responsive design.

Shapely WordPress Theme

Blocksy

Blocksy, known for its performance with Gutenberg and WooCommerce, offers a blend of speed and innovative features. Its lightweight design, live preview customizations, and layout options cater to a wide range of projects. Its balance of aesthetics and functionality makes it a versatile choice.

Blocksy WordPress Theme

Free Minimalist WordPress Theme

The Free Minimalist WordPress Theme offers a simple, clean design for designers and bloggers. Its responsive design, custom background options, and SEO optimization make it ideal for those seeking simplicity. It supports major browsers and offers unlimited domain usage.

Free Minimalist WordPress Theme

Hello Theme

Hello Theme by Elementor is a blank canvas for design, tailored for Elementor’s tools. It’s fast, responsive, and SEO-friendly, supporting a variety of languages and widgets. This theme is perfect for any website, from portfolios to eCommerce, thanks to its fast loading time.

Hello Theme WordPress Theme

Futurio

Futurio caters to speed and performance, ideal for professional websites. Its compatibility with Elementor and WooCommerce readiness enhances its appeal for online stores. It’s responsive, supporting various header styles and page builders, suitable for blogs to eCommerce sites.

Futurio WordPress Theme

Kadence

Kadence stands out with its ultra-fast performance and flexibility. Its drag-and-drop header builder and global color palettes offer extensive customization. SEO-optimized and featuring a responsive design, it’s compatible with popular plugins, making it a top choice for diverse websites.

Kadence WordPress Theme

SociallyViral

SociallyViral boosts social shares and viral traffic for WordPress sites. Built for engagement and speed, it’s optimized for social media and includes features that promote sharing on major platforms. With performance enhancements like lazy loading and advanced typography options, it’s a top choice for those seeking to amplify their social media impact and search rankings.

SociallyViral WordPress Theme

Qi Theme

The Qi Theme impresses with its collection of 150 site demos, each rich in features and functionalities. Enhanced by Qi Addons, it offers an extensive range of Elementor widgets, ensuring high performance and reliability. From portfolios to eCommerce, it’s an all-encompassing theme that’s easy to use, even for beginners.

Qi Theme WordPress Theme

Suki

Suki caters to a variety of websites with its flexibility and lightweight design. With over 1000 customization options, it allows full control over design elements. Optimized for speed, Suki integrates seamlessly with page builders like Elementor and offers WooCommerce features, perfect for creating fast, beautiful websites.

Suki WordPress Theme

Ample

Ample, ideal for businesses and portfolios, combines simplicity with performance. It loads swiftly, offers easy customization, and integrates effortlessly with WooCommerce and popular page builders. With its focus on speed and SEO, Ample is a go-to for businesses and portfolios seeking a blend of performance and ease of use.

Ample WordPress Theme

ColorMag

ColorMag, tailored for news and magazine sites, offers extensive customization with Elementor compatibility. Known for its performance and SEO optimization, it provides unique post systems and multiple starter sites. It’s perfect for creating engaging, well-organized magazine-style websites.

ColorMag WordPress Theme

Hestia

Hestia brings a modern touch with its focus on material design. Offering a range of features from WooCommerce integration to page builder compatibility, it’s known for its speed and sleek design. Suitable for various website types, Hestia combines a full-width header and simple footer with efficient design tools.

Hestia WordPress Theme

Neve

Neve’s design focuses on speed and accessibility, offering a mobile-first approach. Compatible with popular page builders, it offers a range of customizable options for different website types. Optimized for speed, SEO, and mobile devices, Neve is a versatile choice for blogs to business sites.

Neve WordPress Theme

CTLG

CTLG, a free WordPress block theme, is perfect for lists, directories, and catalogs. Featuring pre-designed templates and style variations, it showcases content efficiently with a user-friendly interface. CTLG’s emphasis on ease of use and customization makes it ideal for managing content-heavy sites.

CTLG WordPress Theme

Heiwa

Heiwa presents a clean and elegant design, ideal for businesses with a visual focus. It offers sophisticated typography and minimalist design, with full site editing capabilities. Suitable for various website types, Heiwa ensures a clean, professional online presence.

Heiwa WordPress Theme

Masu

Masu brings a modern, light aesthetic to blog themes, inspired by traditional Japanese culture. Ideal for beauty and lifestyle blogs, it features custom colors, block editor styles, and full site editing. Masu combines cultural elegance with modern web design, perfect for a range of blogging niches.

Masu WordPress Theme

Remote

Remote combines a dark, minimal design with easy reading features, perfect for bloggers. It uses a sans-serif font against a dark background, ensuring comfort for readers. Standout elements include large post lists and bordered categories. Its key aspects are customizable colors, support for right-to-left languages, and comprehensive site editing capabilities.

Remote WordPress Theme

Vivre

Moving to Vivre, this theme takes inspiration from fashion and lifestyle magazines, offering a bold and refined look. It’s a perfect match for fashion-focused or modern lifestyle blogs, featuring a mix of heavy sans-serif and elegant serif fonts. Like Remote, it offers customizable colors, right-to-left language support, and full editing options.

Vivre WordPress Theme

Accelerate

Accelerate, in contrast, is a multipurpose theme, great for everything from portfolios to corporate sites. It offers a clean, premium look and supports various post formats. Notably, it allows customization of backgrounds, colors, headers, logos, and menus, and is e-commerce ready.

Accelerate WordPress Theme

Appointment

Appointment stands out for its responsiveness and suitability for diverse fields like law, travel, and art. Developed with Bootstrap 3, it ensures a mobile-friendly experience. Its features range from customizable headers and logos to various widgets, catering to a wide range of needs.

Appointment WordPress Theme

Auberge

For those in the food industry, Auberge is an ideal choice. This retina-ready theme supports popular plugins like Beaver Builder and Jetpack, perfect for restaurants and recipe blogs. It offers a header slideshow, customizable colors, and layout options.

Auberge WordPress Theme

Awaken

Awaken offers an elegant solution for magazine or news sites, with a magazine layout and widget areas. Its responsiveness, powered by Twitter Bootstrap, and its variety of post display styles make it a versatile choice. Additional features include social media integration and a YouTube video widget.

Awaken WordPress Theme

Biography

For personal branding, Biography Theme brings simplicity and elegance. It’s optimized for personal information display, with features like text sliders and various sections including Service and Testimonial. It’s also WooCommerce ready and responsive.

Biography WordPress Theme

Clean Box

Clean Box offers a grid-based design that adapts smoothly to any screen size. Relying on HTML5 and CSS3, it enables real-time customization and is translation-ready. It’s an excellent choice for those prioritizing simplicity and cleanliness in design.

Clean Box WordPress Theme

ColorMag

ColorMag excels in creating modern, elegant websites for news and magazines. With multiple starter demos and ad spaces, it’s tailored for news portals and online magazines. It’s SEO optimized, translation and RTL ready, and features a responsive design with custom widgets.

ColorMag WordPress Theme

Customizr

Customizr is designed to attract and engage, known for its simplicity and effectiveness on smartphones. Powering a vast number of sites, it’s highly rated for its user experience and is smartphone friendly.

Customizr WordPress Theme

Dispatch

Dispatch stands out with its fast-loading, retina-ready design, tailored for a wide array of sites from photography to business. It offers flexible layouts, including Full Width Stretched and Boxed, alongside HTML and image sliders, color customization, and various widgets. Notably, it’s SEO friendly and mobile-optimized.

Dispatch WordPress Theme

Esteem

For a versatile option, Esteem caters to businesses, portfolios, and blogs with its clean, responsive design. It supports custom features like headers and backgrounds and is compatible with essential plugins. Translation readiness is a key aspect, making it accessible for a global audience.

Esteem WordPress Theme

Evolve

Evolve by Theme4Press appeals to those who value minimalism and flexibility. Built on Twitter Bootstrap and Kirki frameworks, it boasts varied header layouts, widget areas, and sliders. Key features include a custom front page builder, blog layouts, and WooCommerce support, ensuring both attractiveness and functionality.

Evolve WordPress Theme

Hueman

Hueman excels in speed and mobile-friendliness, a top choice for blogs and magazines. With custom color options, a flexible header, and various post formats, it’s a theme that powers over 70,000 websites worldwide.

Hueman WordPress Theme

I-Excel

The I-Excel theme combines beauty and flexibility, ideal for creating visually appealing pages. It supports WooCommerce and is multilingual, including RTL languages, making it a versatile choice for diverse needs.

I-Excel WordPress Theme

Interface

Interface offers a simple, flat design, perfect for business sites. Its numerous theme options, layouts, widget areas, and social icons cater to a variety of preferences. Compatibility with WooCommerce and bbPress adds to its versatility.

Interface WordPress Theme

JupiterX Lite

Jupiter X redefines power and speed in WordPress themes. Every aspect is customizable through a visual editor, using WordPress Customizer and Elementor. It’s ideal for all kinds of websites, offering ready-made templates and being developer-friendly.

JupiterX Lite WordPress Theme

MH Magazine Lite

For magazine-style sites, MH Magazine lite offers a free, responsive solution. It’s SEO friendly and suitable for a range of topics, with more features available in the premium version.

MH Magazine Lite WordPress Theme

Modern

Modern focuses on accessibility, making it perfect for personal portfolios and blogs. Optimized for search engines and high-resolution displays, it supports multilingual setups and features like a featured posts slideshow.

Modern WordPress Theme

Newsmag

Newsmag brings a clean, modern feel to magazine, news, and blog sites. Responsive and SEO-friendly, it adapts well to mobile devices and offers a range of customization options, including various blog page styles and a dynamic front page.

Newsmag WordPress Theme

Olsen Light

Olsen Light offers a stylish, elegant solution for bloggers in lifestyle, food, fashion, and more. Its clean, minimal design is responsive and SEO-friendly, with RTL language support. Key features include customizable blog layouts, social icons, and a footer Instagram carousel.

Olsen Light WordPress Theme

Optimizer

The Optimizer stands out as a versatile, multi-purpose theme with live customization. It provides full-width and boxed layouts, an image slider, and a variety of fonts and colors. Fully responsive and SEO-friendly, it supports WooCommerce and other popular plugins, prioritizing speed and clean code.

Optimizer WordPress Theme

Owner

Owner is tailored for business use, offering a powerful yet easy-to-use design that adapts to all screen sizes. It’s highly customizable and well-suited for various business applications, backed by strong customer support.

Owner WordPress Theme

Phlox

Phlox caters to a wide range of websites, from blogs to WooCommerce storefronts. It’s a modern, lightweight theme offering professional portfolio features, 30 exclusive widgets, and compatibility with major page builders. It’s responsive, translation-ready, and GDPR compliant.

Phlox WordPress Theme

Receptar

Receptar presents a unique, split-screen book-like design, ideal for blogs that emphasize imagery and typography. It supports Beaver Builder and Jetpack, is translation-ready, and features a front-page slideshow.

Receptar WordPress Theme

Rowling

Rowling is a simple, elegant magazine theme with great typography and responsive design. Ideal for magazines, it supports gallery post formats and editor styles, focusing on simplicity and ease of use.

Rowling WordPress Theme

Smartline Lite

Smartline Lite is perfect for news, magazine websites, and blogs, offering a responsive design with bold colors. Its flexible, widgetized front page template allows for a magazine-styled homepage, adaptable to any device.

Smartline Lite WordPress Theme

Tracks

Tracks is a bold and minimalist theme, great for personal blogs, magazines, and photography websites. Features include a logo uploader, social media icons, and premium layouts. It’s WooCommerce compatible and suits both text and image-based content.

Tracks WordPress Theme

Vantage

Vantage is a flexible multipurpose theme that works well with powerful plugins for responsive layouts and online selling. Fully responsive and retina ready, it’s suitable for business sites, portfolios, or online stores, and offers free forum support.

Vantage WordPress Theme

Vega

Vega offers a clean, minimal design for one-page business sites, personal blogs, or creative websites. Built on Bootstrap, it’s responsive with animated content, pre-built color choices, and basic WooCommerce support. It’s also suitable for multilanguage websites.

Vega WordPress Theme

Vertex

Vertex presents a sleek and modern look, ideal for portfolio, photography, and blog websites. Its design is clean and contemporary, perfect for highlighting images and content. The responsive layout ensures a great viewing experience on all devices.

Vertex WordPress Theme

Wallstreet

Shifting to Wallstreet, this theme caters to a range of business needs, from corporate to freelance websites. Built on Bootstrap 3, it’s adaptable across devices. Its key features include a featured banner, social icons, and a variety of page templates. The premium version adds more color options and an enhanced slider.

Wallstreet WordPress Theme

Yummy

Yummy offers a specialized platform for restaurants to showcase and sell their offerings online. Customizable through a live preview customizer, it supports various layouts, widgets, and is WooCommerce ready. Its focus is on effective exposure for food and beverage businesses.

Yummy WordPress Theme

Astra

Astra stands out for its speed and customization capabilities. It’s a performance-oriented theme, SEO-friendly, and compatible with major page builders. With features like pre-built demos and extensive layout settings, it’s versatile for various website types.

Astra WordPress Theme

TrueNorth

TrueNorth, a free theme, is designed for showcasing creative work elegantly. Its block-based design facilitates easy page building. Flexible color customization and a real-time preview make it ideal for professionals and creatives to display their skills.

TrueNorth WordPress Theme

Ember

Ember, tailored for creative agencies and freelancers, offers a one-page design that’s responsive and mobile-friendly. It includes parallax support, adding a dynamic dimension to the website.

Ember WordPress Theme

Simple

Simple, from Nimbus Themes, delivers a modern and minimal design. It offers diverse frontpage layouts and is customizable in color, layout, and typography. It’s a blend of quality and flexibility, ensuring a modern web presence.

Simple WordPress Theme

Phlox Pro

Phlox Pro, a free Elementor theme, is perfect for crafting elegant websites. It’s customizable, fast, and SEO-friendly, featuring exclusive elements for Elementor, ready-to-use templates, and online store capabilities.

Phlox Pro WordPress Theme

Bulan

Bulan, ideal for bloggers at any level, provides a clean and modern blogging experience. It includes multiple homepage layouts and custom widgets, enhancing interactivity and engagement.

Bulan WordPress Theme

Zakra

Lastly, Zakra is a versatile, highly-rated theme suitable for various website types. With over 80 templates, it’s friendly with all page builders and includes features like starter templates and extensive customization options. It’s optimized for performance and SEO.

Zakra WordPress Theme

The post 60 Best Responsive WordPress Themes (Free and Paid) appeared first on Hongkiat.

Web Development Is Getting Too Complex, And It May Be Our Fault

Web Development Is Getting Too Complex, And It May Be Our Fault

Web Development Is Getting Too Complex, And It May Be Our Fault

Juan Diego Rodríguez

2024-02-07T13:00:00+00:00
2025-06-20T10:32:35+00:00

Front-end development seemed simpler in the early 2000s, didn’t it? The standard website consisted mostly of static pages made of HTML and CSS seasoned with a pinch of JavaScript and jQuery. I mean, who doesn’t miss the cross-browser compatibility days, right?

Fast forward to today, and it looks like a parallel universe is taking place with an overwhelming number of choices. Which framework should you use for a new project? Perhaps more established ones like React, Angular, Vue, Svelte, or maybe the hot new one that came out last month? Each framework comes with its unique ecosystem. You also need to decide whether to use TypeScript over vanilla JavaScript and choose how to approach server-side rendering (or static site generation) with meta-frameworks like Next, Nuxt, or Gatsby. And we can’t forget about unit and end-to-end testing if you want a bug-free web app. And we’ve barely scratched the surface of the front-end ecosystem!

But has it really gotten more complex to build websites? A lot of the frameworks and tooling we reach for today were originally crafted for massive projects. As a newcomer, it can be frightening to have so many to consider, almost creating a fear of missing out that we see exploited to sell courses and tutorials on the new hot framework that you “cannot work without.”

All this gives the impression that web development has gotten perhaps too complex. But maybe that is just an exaggeration? In this article, I want to explore those claims and find out if web development really is that complex and, most importantly, how we can prevent it from getting even more difficult than we already perceive it to be.

How It Was Before

As someone who got into web development after 2010, I can’t testify to my own experience about how web development was from the late 1990s through the 2000s. However, even fifteen years ago, learning front-end development was infinitely simpler, at least to me. You could get a website started with static HTML pages, minimal CSS for styling, and a sprinkle of JavaScript (and perhaps a touch of jQuery) to add interactive features, from toggled sidebars to image carousels and other patterns. Not much else was expected from your average developer beyond that — everything else was considered “going the extra mile.” Of course, the awesome native CSS and JavaScript features we have today weren’t around back then, but they were also unnecessary for what was considered best practice in past years.

Large and dynamic web apps certainly existed back then — YouTube and Facebook, to name a couple — but they were developed by massive companies. No one was expected to re-create that sort of project on their own or even a small team. That would’ve been the exception rather than the norm.

I remember back then, tend to worry more about things like SEO and page optimization than how my IDE was configured, but only to the point of adding meta tags and keywords because best practices didn’t include minifying all your assets, three shaking your code, caching your site on edge CDNs, or rendering your content on the server (a problem created by modern frameworks along hydration). Other factors like accessibility, user experience, and responsive layouts were also largely overlooked in comparison to today’s standards. Now, they are deeply analyzed and used to boost Lighthouse scores and impress search engine algorithms.

The web and everything around it changed as more capabilities were added and more and more people grew to depend on it. We have created new solutions, new tools, new workflows, new features, and whatever else new that is needed to cater to a bigger web with even bigger needs.

The web has always had its problems in the past that were worthy of fixing: I absolutely don’t miss tables and float layouts, along with messy DOM manipulation. This post isn’t meant to throw shade on new advances while waxing nostalgic about the good days of the “old wild web.” At the same time, though, yesterday’s problems seem infinitely simpler than those we face today.

JavaScript Frameworks

JavaScript frameworks, like Angular and React, were created by Google and Facebook, respectively, to be used in their own projects and satisfy the needs that only huge web-based companies like them have. Therein lies the main problem with web complexity: JavaScript frameworks were originally created to sustain giant projects rather than smaller ones. Many developers vastly underestimate the amount of time it takes to build a codebase that is reliable and maintainable with a JavaScript framework. However, the alternative of using vanilla JavaScript was worse, and jQuery was short for the task. Vanilla JavaScript was also unable to evolve quickly enough to match our development needs, which changed from simple informative websites to dynamic apps. So, many of us have quickly adopted frameworks to avoid directly mingling with JavaScript and its messy DOM manipulation.

Back-end development is a completely different topic, subject to its own complexities. I only want to focus on front-end development because that is the discipline that has perhaps overstepped its boundaries the most by bleeding into traditional back-end concerns.

Stacks Getting Bigger

It was only logical for JavaScript frameworks to grow in size over time. The web is a big place, and no one framework can cover everything. But they try, and the complexity, in turn, increases. A framework’s size seems to have a one-to-one correlation with its complexity.

But the core framework is just one piece of a web app. Several other technologies make up what’s known as a tech “stack,” and with the web gaining more users and frameworks catering to their needs, tech stacks are getting bigger and bigger. You may have seen popular stacks such as MEAN (MongoDB, Express, Angular, and Node) or its React (MERN) and Vue (MEVN) variants. These stacks are marketed as mature, test-proofed foundations suitable for any front-end project. That means the advertised size of a core framework is grossly underestimated because they rely on other micro-frameworks to ensure highly reliable architectures, as you can see in stackshare.io. Besides, there isn’t a one-size-fits-all stack; the best tool has always depended — and will continue to depend — on the needs and goals of your particular project.

This means that each new project likely requires a unique architecture to fulfill its requirements. Giant tech companies need colossal architectures across all their projects, and their stacks are highly engineered accordingly to secure scalability and maintenance. They also have massive customer bases, so maintaining a large codebase will be easier with more revenue, more engineers, and a clearer picture of the problem. To minimize waste, the tech stacks of smaller companies and projects can and should be minimized not only to match the scale of their needs but to the abilities of the developers on the team as well.

The idea that web development is getting too complex comes from buying into the belief that we all have the same needs and resources as giant enterprises.

Trying to imitate their mega stacks is pointless. Some might argue that it’s a sacrifice we have to make for future scalability and maintenance, but we should focus first on building great sites for the user without worrying about features users might need in the future. If what we are building is worth pursuing, it will reach the point where we need those giant architectures in good time. Cross that bridge when we get there. Otherwise, it’s not unlike wearing Shaquille O’Neal-sized sneakers in hopes of growing into them. They might not even last until then if it happens at all!

We must remember that the end-user experience is the focus at the end of the day, and users neither care about nor know what stack we use in our apps. What they care about is a good-looking, useful website where they can accomplish what they came for, not the technology we use to achieve it. This is how I’ve come to believe that web development is not getting more complex. It’s developers like us who are perpetuating it by buying into solutions for problems that do not need to be solved at a certain scale.

Let me be really clear: I am not saying that today’s web development is all bad. Indeed, we’ve realized a lot of great features, and many of them are thanks to JavaScript frameworks that have pushed for certain features. jQuery had that same influence on JavaScript for many, many years.

We can still create minimum viable products today with minimal resources. No, those might not make people smash the Like button on your social posts, but they meet the requirements, nothing more and nothing less. We want bigger! Faster! Cheaper! But we can’t have all three.

If anything, front-end development has gotten way easier thanks to modern features that solve age-old development issues, like the way CSS Flexbox and Grid have trivialized layouts that used to require complex hacks involving floats and tables. It’s the same deal with JavaScript gaining new ways to build interactions that used to take clever workarounds or obtuse code, such as having the Intersection Observer API to trivialize things like lazy loading (although HTML has gained its own features in that area, too).

We live in this tension between the ease of new platform features and the complexity of our stacks.

Do We Need A JavaScript Framework For Everything?

Each project, regardless of its simplicity, desperately needs a JavaScript framework. A project without a complex framework is like serving caviar on a paper plate.

At least, that’s what everyone seems to think. But is that actually true? I’d argue on the contrary. JavaScript frameworks are best used on bigger applications. If you’re working on a smaller project, a component-based framework will only complicate matters, making you split your website into a component hierarchy that amounts to overkill for small projects.

The idea of needing a framework for everything has been massively oversold. Maybe not directly, but you unconsciously get that feeling whenever a framework’s name pops in, as Edge engineer Alex Russell eloquently expresses in his article, “The Market For Lemons”:

“These technologies were initially pitched on the back of “better user experiences” but have utterly failed to deliver on that promise outside of the high-management-maturity organisations in which they were born. Transplanted into the wider web, these new stacks have proven to be expensive duds.”

— Alex Russell

Remember, the purpose of a framework is to simplify your life and save time. If the project you’re working on is smaller, the time you supposedly save is likely overshadowed by the time you spend either setting up the framework or making it work with the rest of the project. A framework can help make bigger web apps more interactive and dynamic, but there are times when a framework is a heavy-handed solution that actually breeds inefficient workflows and introduces technical debt.

Step back and think about this: Are HTML, CSS, and a touch of JavaScript enough to build your website or web application? If so, then stick with those. What I am afraid of is adding complexity for complexity’s sake and inadvertently raising the barrier to entry for those coming into web development. We can still accomplish so much with HTML and CSS alone, thanks again to many advances in the last decade. But we give the impression that they are unsuitable for today’s web consumption and need to be enhanced.

Knowing Everything And Nothing At The Same Time

The perceived standard that teams must adopt framework-centered architectures puts a burden not only on the project itself but on a developer’s well-being, too. As mentioned earlier, most teams are unable to afford those architectures and only have a few developers to maintain them. If we undermine what can be achieved with HTML and CSS alone and set the expectations that any project — regardless of size — needs to have a bleeding edge stack, then the weight to meet those expectations falls on the developer’s shoulders, with the great responsibility of being proficient in all areas, from the server and database to front end, to design, to accessibility, to performance, to testing, and it doesn’t stop. It’s what has been driving “The Great Divide” in front-end development, which Chris Coyier explains like this:

“The divide is between people who self-identify as a (or have the job title of) front-end developer yet have divergent skill sets. On one side, an army of developers whose interests, responsibilities, and skillsets are heavily revolved around JavaScript. On the other, an army of developers whose interests, responsibilities, and skillsets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, and so on.”

— Chris Coyier

Under these expectations, developers who focus more on HTML, CSS, design, and accessibility rather than the latest technology will feel less valued in an industry that appears to praise those who are concerned with the stack. What exactly are we saying when we start dividing responsibilities in terms of “full-stack development” or absurd terms like “10x development”? A while back, Brad Frost began distinguishing these divisions as “front-of-the-front-end” and “back-of-the-front-end”.

Mandy Michael explains what impact the chase for “full-stack” has had on developers trying to keep up:

“The worst part about pushing the “know everything” mentality is that we end up creating an industry full of professionals suffering from burnout and mental illness. We have people speaking at conferences about well-being, imposter syndrome, and full-stack anxiety, yet despite that, we perpetuate this idea that people have to know everything and be amazing at it.”

— Mandy Michael

This isn’t the only symptom of adopting heavy-handed solutions for what “vanilla” HTML, CSS, and JavaScript already handle nicely. As the expectations for what we can do as front-end developers grow, the learning curve of front-end development grows as well. Again, we can’t learn and know everything in this vast discipline. But we tell ourselves we have to, and thanks to this mentality, it’s unfortunately common to witness developers who may be extremely proficient with a particular framework but actually know and understand little of the web platform itself, like HTML semantics and structure.

The text in the picture reads ‘Do I need to learn JavaScript first?’, and the answer is the following: ‘You might be asking whether you need to learn JavaScript before you dive into React. In 2024, I would personally say, no, you don't really need to.’

(Large preview)

The fact that many budding developers tend to jump straight into frameworks at the expense of understanding the basics of HTML and CSS isn’t a new worry, as Rachel Andrew discussed back in 2019:

“That’s the real entry point here, and yes, in 2019, they are going to have to move on quickly to the tools and techniques that will make them employable, if that is their aim. However, those tools output HTML and CSS in the end. It is the bedrock of everything that we do, which makes the devaluing of those with real deep skills in those areas so much more baffling.”

— Rachel Andrew

And I want to clarify yet again that modern Javascript frameworks and libraries aren’t inherently bad; they just aren’t designed to replace the web platform and its standards. But we keep pushing them like we want them to!

The Consequences Of Vendor Lock-In

“Vendor lock-in” happens when we depend too deeply on proprietary products and services to the extent that switching to other products and services becomes a nearly impossible task. This often occurs when cloud services from a particular company are deeply integrated into a project. It’s an issue, especially in cloud computing, since moving databases once they are set up is expensive and lengthy.

Vendor lock-in in web development has traditionally been restricted to the back end, like with cloud services such as AWS or Firebase; the front-end framework, meanwhile, was a completely separate concern. That said, I have noticed a recent trend where vendor lock-in is reaching into meta-frameworks, too. With the companies behind certain meta-frameworks offering hosting services for their own products, swapping hosts is increasingly harder to do (whether the lock-in is designed intentionally or not). Of course, companies and developers will be more likely to choose the hosting service of the company that made a particular framework used on their projects — they’re the experts! — but that only increases the project’s dependency on those vendors and their services.

A clear example is the relationship between Next and Vercel, the parent cloud service for Next. With the launch of Next 13, it has become increasingly harder to set up a Next project outside of Vercel, leading to projects like Open Next, which says right on its website that “[w]hile Vercel is great, it’s not a good option if all your infrastructure is on AWS. Hosting it in your AWS account makes it easy to integrate with your backend [sic]. And it’s a lot cheaper than Vercel.” Fortunately, the developers’ concerns have been heard, and Next 14 brings clarity on how to self-host Next on a Node server.

Another example is Gatsby and Gatsby Cloud. Gatsby has always offered helpful guides and alternative hosting recommendations, but since the launch of Gatsby Cloud in 2019, the main framework has been optimized so that using Gatsby and Gatsby Cloud together requires no additional hosting configurations. That’s fantastic if you adopt both, but it’s not so great if all you need is one or the other because integrating the framework with other hosts — and vice versa — is simply harder. It’s as if you are penalized for exercising choice.

And let’s not forget that no team expected Netlify to acquire Gatsby Cloud in February 2023. This is a prime case where the vendor lock-in problem hits everybody because converting from one site to another comes at a cost. Some teams were charged 120% more after converting from Gatsby Cloud to Netlify — even with the same plan they had with Gatsby Cloud!

What’s the solution? The common answer I hear is to stop using paid cloud services in favor of open-sourced alternatives. While that’s great and indeed a viable option for some projects, it fails to consider that an open-source project may not meet the requirements needed for a given app.

And even then, open-source software depends on the community of developers that maintain and update the codebase with little to no remuneration in exchange. Further, open source is equally prone to locking you into certain solutions that are designed to solve a deficiency with the software.

There are frameworks and libraries, of course, that are in no danger of being abandoned. React is a great example because it has an actively engaged community behind it. But you can’t have the same assurance with each new dependency you add to a project. We can’t simply keep installing more packages and components each time we spot a weak spot in the dependency chain, especially when a project is perfectly suited for a less complex architecture that properly leverages the web platform.

Choosing technology for your stack is an exercise of picking your own poison. Either choose a paid service and be subject to vendor lock-in in the future, or choose an open-source one and pray that the community continues to maintain it.

Those are virtually the only two choices. Many of the teams I know or have worked on depend on third-party services because they cannot afford to develop them on their own; that’s a luxury that only massive companies can afford. It’s a problem we have to undergo when starting a new project, but one we can minimize by reducing the number of dependencies and choosing wisely when we have to.

Each Solution Introduces A New Problem

Why exactly have modern development stacks gotten so large and complex? We can point a finger at the “Development Paradox.” With each new framework or library, a new problem crops up, and time-starved developers spend months developing a new tool to solve that problem. And when there isn’t a problem, don’t worry — we will create one eventually. This is a feedback loop that creates amazing solutions and technologies but can lead to over-engineered websites if we don’t reign it in.

This reminds me of the famous quote:

“The plain fact is that if you don’t have a problem, you create one. If you don’t have a problem, you don’t feel that you are living.”

— U.G. Krishnamurti

Let’s look specifically at React. It was originally created by Facebook for Facebook to develop more dynamic features for users while improving Facebook’s developer experience.

Since React was open-sourced in 2013 (and nearly re-licensed in 2017, if it weren’t for the WordPress community), hundreds of new utilities have been created to address various React-specific problems. How do you start a React project? There’s Create React App and Vite. Do you need to enhance your state management? There is Redux, among other options. Need help creating forms? There is a React Hook Form. And perhaps the most important question: Do you need server-side rendering? There’s Next, Remix, or Gatsby for that. Each solution comes with its own caveats, and developers will create their own solutions for them.

It may be unfair to pick on React since it considers itself a library, not a framework. It’s inevitably prone to be extended by the community. Meanwhile, Angular and Vue are frameworks with their own community ecosystems. And this is the tip of the iceberg since there are many JavaScript frameworks in the wild, each with its own distinct ideology and dependencies.

Again, I don’t want you to get the wrong idea. I love that new technologies emerge and find it liberating to have so many options. But when building something as straightforward as a webpage or small website — which some have started referring to as “multi-page applications” — we have to draw a line that defines how many new technologies we use and how reliable they are. We’re quite literally mashing together third-party code written by various third-party developers. What could go wrong? Please don’t answer that.

Remember that our users don’t care what’s in our stacks. They only see the final product, so we can save ourselves from working on unnecessary architectures that aren’t appreciated outside of development circles. It may seem counterintuitive in the face of advancing technology, but knowing that the user doesn’t care about what goes behind the scenes and only sees the final product will significantly enhance our developer experience and free you from locked dependencies. Why fix something that isn’t broken?

How Can We Simplify Our Codebases?

We’ve covered several reasons why web development appears to be more complex today than in years past, but blaming developers for releasing new utilities isn’t an accurate portrayal of the real problem. After all, when developing a site, it’s not like we are forced to use each new technology that enters the market. In fact, many of us are often unaware of a particular library and only learn about it when developing a new feature. For example, if we want to add toast notifications to our web app, we will look for a library like react-toastify rather than some other way of building them because it “goes with” that specific library. It’s worth asking whether the app needs toast notifications at all if they introduce new dependencies.

Imagine you are developing an app that allows users to discover, review, and rate restaurants in their area. The app needs, at a bare minimum, information about each restaurant, a search tool to query them, and an account registration flow with authentication to securely access the account. It’s easy to make assumptions about what a future user might need in addition to these critical features. In many cases, a project ends up delayed because we add unnecessary features like SSR, notifications, offline mode, and fancy animations — sometimes before the app has even converted its first registered user!

I believe we can boil down the complexity problem to personal wishes and perceived needs rather than properly scoping a project based on user needs and experiences.

That level of scope creep can easily turn into an over-engineered product that will likely never see the light of launching.

Three-panel comic strip titled ‘The UX Designer Paradox.’

Image source: @rspective via X. (Large preview)

What can we do to simplify our own projects? The following advice is relevant when you have control over your project, either because it’s a personal one, it’s a smaller one for a smaller team, or you have control over the decisions in whatever size organization you happen to be in.

The hardest and most important step is having a sense of detection when your codebase is getting unnecessarily complicated. I deem it the hardest step because there is no certainty of what the requirements are or what the user needs; we can only make assumptions. Some are obvious, like assuming the user will need a way to log into the app. Others might be unclear, like whether the app should have private messaging between users. Others are still far-fetched, like believing users need extremely low latency in an e-commerce page. Other features are in the “nice to have” territory.

That is regarding the user experience, but the same questions emerge on the development side:

  • Should we be using a CSS preprocessor or a CSS framework, or can we achieve it using only CSS modules?
  • Is vanilla JavaScript enough, or are we going to add TypeScript?
  • Does the app need SSR, SSG, or a hybrid of the two?
  • Should we implement Redis on the back end for faster database queries, or is that too much scope for the work?
  • Should we be implementing end-to-end testing or unit tests?

These are valid questions that should be considered when developing a site, but they can distract us from our main focus: getting things done.

“Done is better than perfect.”

— Sheryl Sandberg

And, hey, even the largest and most sophisticated apps began as minimal offerings that iterated along the way.

First versions of Amazon, Facebook, Google and Twitter

First versions of Amazon, Facebook, Google and Twitter. (Large preview)

We also ought to be asking ourselves what would happen if a particular feature or dependency isn’t added to the project. If the answer is “nothing,” then we should be shifting our attention to something else.

Another question worth asking: “Why are we choosing to add [X]?” Is it because that’s what is popular at the moment, or because it solves a problem affecting a core feature? Another aspect to take into consideration is how familiar we are with certain technologies and give preference to those we know and can start using them right away rather than having to stop and learn the ins and outs of a new framework.

Choose the right tool for the job, which is going to be the one that meets the requirements and fits your mental model. Focus less on a library’s popularity and scalability but rather on getting your app to the point where it needs to scale in the first place.

Conclusion

It’s incredibly difficult to not over-engineer web apps given current one-size-fits-all and fear-of-missing-out mentalities. But we can be more conscious of our project goals and exercise vigilance in guarding our work against scope creep. The same can be applied to the stack we use, making choices based on what is really needed rather than focusing purely on what everyone else is using for their particular work.

After reading the word “framework” exactly 48 times in this article, can we now say the web is getting too complex? It has been complex by nature since its origins, but complexity doesn’t translate to “over-engineered” web apps. The web isn’t intrinsically over-engineered, and we only have ourselves to blame for over-engineering our projects with overly-wrought solutions for perceived needs.

Smashing Editorial
(gg, yk)