Forem: Ryan VerWey

What AI Overviews Mean for Your Small Business Website in 2026

Ryan VerWey — Mon, 13 Apr 2026 12:31:00 +0000

Google's search results page looks different than it did two years ago. In many cases, the first thing a visitor sees when they search is not a list of websites to click through. It is a generated summary: a paragraph or two crafted by Google's AI that pulls from multiple sources, answers the question directly, and often satisfies the reader without a single click.

This feature, called AI Overviews (formerly Search Generative Experience), launched broadly across the United States in 2024 and has since expanded to over 100 countries. It now appears on a significant share of informational and research queries. The businesses that appear as sources inside those summaries get a citation and a link. The businesses that do not appear lose traffic they do not even know they are losing.

For small business owners, this shift raises practical questions. Which searches trigger AI Overviews? Is your site's traffic declining because of this? And what can you actually do about it? This post walks through each of those questions with direct answers.

What AI Overviews Are and Where They Show Up

AI Overviews are generated summaries that appear at the top of certain Google search results pages, above the traditional organic link list. They are produced by a large language model trained on web content and constructed in real time based on the user's query. The AI retrieves relevant content from across the web, synthesizes it into a coherent response, and cites the sources it drew from.

Not every query triggers an AI Overview. Google's systems favor them for informational queries: "how does X work," "what is the difference between A and B," "what should I do when Y happens." They appear less consistently on navigational queries (someone searching for a specific brand or website) and on highly transactional queries (someone ready to buy a specific product). Local queries, like "best plumber near me" or "divorce attorney in Tampa," tend to show the local pack and traditional results more than AI summaries, though that is beginning to change.

How This Affects Small Business Websites

The impact of AI Overviews is uneven, and that matters.

If your business lives almost entirely on transactional or local queries, your Google Search traffic has probably held up better than sites that depend heavily on informational or educational content. A roofing company ranking for "roof repair Jacksonville FL" is less exposed to AI Overview displacement than a marketing blog or a financial planning site answering broad research questions.

But the line is blurrier than it seems. Here is why:

Many small businesses published educational blog content specifically to attract customers researching before they buy. That content is precisely what AI Overviews are summarizing and displacing clicks from.
AI Overviews are expanding into more query types over time, including some local and service-based queries.
Even when AI Overviews appear on transactional queries, they push the traditional organic results further down the page, reducing click-through rates even for high-ranking pages.

The businesses most affected combine two characteristics: they rely on blog or resource content for a meaningful share of organic traffic, and they have not yet optimized that content to be cited rather than bypassed by AI systems.

The real risk for small businesses is not that AI Overviews exist. It is that competitors who understand how to get cited in them will start owning the answer to every question your customers ask before they ever reach your website.

The Opportunity Hiding Inside the Shift

Before treating AI Overviews as purely negative, it is worth understanding the other side of the equation. When your content is cited inside an AI Overview, your business name and a link appear at the top of the search results page, above every traditional organic result, for what could be a high-intent query.

Early data from SEO researchers tracking AI Overview citation behavior suggests that appearing as a primary cited source generates meaningful referral traffic and, more importantly, brand recognition from users who may not click but do absorb the source name. Being the business cited in the answer to "what should I look for when hiring a web design agency" or "how do I know if my Facebook ads are working" builds authority in a way that is difficult to quantify but impossible to ignore.

The goal is not to resist the shift. The goal is to position your content as the source the AI reaches for.

Structured Data: Give AI Systems a Map of Your Business

Structured data is Schema.org markup added to your website that describes your content in a machine-readable format. It tells search crawlers and AI retrieval systems not just what your page says, but what your business is, who operates it, what services you offer, where you serve customers, and what questions your page answers.

For small businesses, the most important schema types to implement are:

LocalBusiness (or a more specific subtype like Plumber, LegalService, or HealthAndBeautyBusiness): includes your business name, address, phone number, hours of operation, and service areas
FAQPage: marks up question-and-answer content in a format that AI systems retrieve with high accuracy for informational queries
Article or BlogPosting: describes authored content with publication date, author credentials, and topic signals
Service: describes specific services you offer, including pricing ranges when applicable
Person or Organization: establishes your brand identity and links to authoritative profiles like Google Business Profile and LinkedIn

None of these require a developer to implement if your site runs on a modern platform. Many can be added through plugins or CMS fields. What matters is accuracy and completeness. Partial or inaccurate structured data can confuse retrieval systems, so verify your markup using Google's Rich Results Test after every implementation.

FAQ Content: The Format AI Overviews Favor Most

Of all the content formats that AI systems retrieve reliably, FAQ sections are the most consistently favored. The reason is structural: a question followed immediately by a direct, complete answer is exactly the format a generative AI is trying to produce. When your page provides that structure explicitly, it reduces the work the AI has to do to extract and use your content.

For small businesses, this means building FAQ sections into service pages, not just into dedicated FAQ pages. Each major service you offer should include a section that addresses the questions your customers actually ask: what it costs, how long it takes, what is included, what sets you apart, and what happens after they contact you. Blog posts should include a FAQ section at the end or integrated throughout, covering the secondary questions that readers bring to the topic.

Use precise, specific language in your FAQ answers. "It typically costs between $1,500 and $4,000 depending on the number of service pages and complexity of the design" is far more citable than "pricing varies based on your needs." AI systems and the users they are answering prefer specific, verifiable information over vague, uncommitted language.

Apply FAQPage schema markup to these sections so search systems can identify and parse them without ambiguity.

E-E-A-T Signals: Demonstrating That You Are the Real Expert

Google's quality framework for evaluating content is called E-E-A-T: Experience, Expertise, Authoritativeness, and Trustworthiness. These were designed to help human quality raters assess content, but they also describe the signals that AI retrieval systems use when selecting which sources to cite. Content that signals genuine expertise and real experience is surfaced more reliably than generic content that covers the same topic without demonstrating who is behind it.

For a small business website, building E-E-A-T signals means several concrete things:

Author attribution on every blog post, with a bio that details the author's credentials, years of experience, and specific areas of expertise
A robust About page that tells the real story of your business, including the founder's background, the team's qualifications, and any relevant certifications, licenses, or professional memberships
Case studies or portfolio pages that document real results with specific, verifiable outcomes
Third-party validation in the form of reviews, press mentions, directory listings, and industry association memberships
Named experts speaking in your content, not just a generic brand voice

The businesses that get cited in AI Overviews consistently are the ones that make it easy for AI systems to verify who is behind the content and why that person or organization should be trusted on this topic. Anonymity is the opposite of citable.

For a deeper look at how these same signals apply to AI-powered search tools like ChatGPT, Perplexity, and Google Gemini, the generative engine optimization guide covers the full framework in detail.

What to Do This Month

If you want to start acting on this, prioritize in this order:

Audit your service pages for FAQ sections. Add at least five questions and direct answers to each major service page, and apply FAQPage schema markup to each set.
Check your structured data. Run your homepage and top service pages through Google's Rich Results Test. Fix any errors or missing fields in your LocalBusiness and Article schema.
Update your About page and author bios. Make sure every piece of authored content on your site names a real person with real credentials. Thin or absent author information is one of the most common E-E-A-T gaps we find on small business sites.
Rewrite your top blog posts for question-answering structure. Pick your three highest-traffic posts and rewrite the opening so the first paragraph directly answers the core question the post addresses. Then add a FAQ section at the bottom.
Build citations. Reach out to local publications, industry directories, and partner businesses to earn links and mentions. Each external citation of your business name and website is a signal that AI systems register when deciding whether you are an authoritative source.

None of this requires a new website or a new strategy. It requires making your existing content cleaner, more specific, and more clearly attributable to a real business run by real experts.

The Axios Supply Chain Attack: What Happened, How to Check, and What to Do Next

Ryan VerWey — Mon, 06 Apr 2026 14:09:00 +0000

Two malicious versions of Axios were published to npm on March 31, 2026, hiding a dependency that deployed a Remote Access Trojan to developer machines and CI/CD servers. Here is what happened, how the attacker covered their tracks, and exactly what to do if your environment was exposed.

On March 31, 2026, two versions of Axios were pulled from npm after security researchers confirmed they contained a hidden dependency that deployed a Remote Access Trojan to any machine that ran npm install during a window of under three hours. Axios, a JavaScript HTTP client with over 100 million weekly downloads, had been poisoned. The malicious code inside Axios itself was zero lines. The weapon was a dependency that nobody invited, delivered through a mechanism every JavaScript developer trusts: the npm install lifecycle.

What a Supply Chain Attack Is

A supply chain attack targets the tools and dependencies developers use to build software rather than the deployed application itself. Instead of trying to exploit a production server directly, the attacker inserts malicious code into a package that developers install as part of their normal workflow. Every npm install runs with implicit trust that the resulting dependency tree is safe. Supply chain attacks exploit that trust by corrupting a link in the chain well before the code reaches any deployment environment. Because the attack executes at install time on the developer's own machine or CI/CD runner, it can access secrets, credentials, and file system contents that production servers would never expose.

Axios became a target because of its reach. A package downloaded 100 million times per week appears in frontend frameworks, backend services, and enterprise codebases across every industry. A successful compromise of even a two-hour window touches hundreds of thousands of installs. The axios attack was not the first npm supply chain incident, but the scale of the target, the operational sophistication of the execution, and the completeness of the self-cleanup make it one of the most significant ever documented.

How the Attack Was Staged: A Timeline

The operation shows clear evidence of deliberate preparation. Forensic analysis by StepSecurity traced the groundwork back more than 18 hours before any malicious Axios version appeared on npm. The attacker executed each step in sequence, with each one making the next harder to detect.

March 30, 2026, early morning: An attacker-controlled account published a package called plain-crypto-js@4.2.0 to npm. This version was a clean, bit-for-bit copy of the legitimate crypto-js library. No malicious code was present. Its sole purpose was to establish publishing history for the account so it would not trigger "brand-new account" warnings in security scanners during later steps.
Later that same day, late evening: The same account published plain-crypto-js@4.2.1. This version introduced two new files: an obfuscated JavaScript dropper named setup.js, and a pre-staged clean replacement file used for anti-forensic cover after execution. It also added a postinstall hook to the package manifest pointing to setup.js. Socket's automated scanner flagged this version as malicious within six minutes of publication.
March 31, 2026, 12:21 AM UTC: The primary Axios maintainer account, which the attacker had compromised, published axios@1.14.1 to npm. The only difference from the previous clean version (1.14.0) was a single addition to package.json: plain-crypto-js listed as a runtime dependency. No corresponding commit or release tag exists in the Axios GitHub repository for this version. Every legitimate Axios release uses npm's OIDC Trusted Publisher mechanism, tying each publish cryptographically to a verified GitHub Actions workflow. The malicious version had no such verification.
39 minutes later: axios@0.30.4 was published using the same method. Both the 1.x and 0.x release branches were now compromised. Any project using a caret range on either branch would pull the poisoned version on its next npm install.
Approximately 3:15 AM UTC: npm unpublished both malicious Axios versions and placed a security hold on plain-crypto-js. Between the first malicious publish and the removal, less than three hours elapsed.

What the Dropper Did Once Installed

When a developer ran npm install and resolved either malicious Axios version, npm automatically installed plain-crypto-js@4.2.1 as a transitive dependency, then executed the postinstall hook, launching setup.js. The dropper used a two-layer obfuscation scheme to hide its strings from static analysis tools: module names, the command-and-control server address, shell commands, and file paths were all encoded behind a combination of reversed Base64 and an XOR cipher keyed to a string embedded in the script.

Once the strings were decoded at runtime, the dropper detected the operating system and routed to a platform-specific payload delivery path. On macOS, it wrote an AppleScript to a temporary file, executed it silently, and instructed it to download a compiled binary to /Library/Caches/com.apple.act.mond, a path deliberately constructed to resemble a legitimate Apple system daemon. On Windows, it located PowerShell, copied it to a path inside Program Data under the name wt.exe (mimicking Windows Terminal), then used a hidden VBScript wrapper to fetch and run a PowerShell payload without opening any visible window. On Linux and other Unix-like systems, it fetched a Python script, saved it to the /tmp directory, and launched it as a background process orphaned from the npm process tree.

Supply chain attacks insert malicious code at the dependency level, where it runs before reaching any production environment.

All three platform payloads contacted the same command-and-control server at sfrclak.com on port 8000. The server returned a second-stage Remote Access Trojan tailored to each platform. The macOS RAT was captured and reverse-engineered by researchers before the server went offline. It was a fully functional C++ binary that fingerprinted the victim system, collected running processes and directory listings, executed arbitrary shell commands, deployed further payloads, and beaconed back to the attacker every 60 seconds. Each platform variant sent a distinct identifier in its POST body so the server could route the correct second-stage payload.

“There are zero lines of malicious code inside Axios itself. Both poisoned releases inject a fake dependency whose sole purpose is to run a postinstall script that deploys a cross-platform remote access trojan.”

StepSecurity, March 2026

After launching the platform-specific payload, setup.js performed three cleanup steps in sequence: it deleted itself, deleted the malicious package.json (which contained the postinstall hook), and replaced it with the pre-staged clean version that reported version 4.2.0 rather than 4.2.1. Running npm audit after the fact would raise no flags. Inspecting the package directory in node_modules would show what appeared to be a clean, ordinary package. The only forensic indicator that survived the cleanup was the presence of the plain-crypto-js directory itself, because that package has never appeared as a dependency in any legitimate Axios release.

The Windows payload left one additional persistent artifact: the copied PowerShell binary at %PROGRAMDATA%\wt.exe. This file would survive dependency reinstalls and system reboots. Even after removing plain-crypto-js and installing a clean version of Axios, wt.exe would remain on the machine as long as the operating system was not reformatted.

How to Determine Whether You Were Affected

The malicious versions were live between approximately 12:21 AM and 3:15 AM UTC on March 31, 2026. Any environment where npm install ran during that window and could have resolved axios@1.14.1 or axios@0.30.4 through a caret or wildcard range warrants a full investigation. Work through the following checks in order.

Search your dependency lockfiles. Open package-lock.json, yarn.lock, or pnpm-lock.yaml in every project that uses Axios and search for references to axios 1.14.1, axios 0.30.4, and the string plain-crypto-js. Any match in a lockfile means the compromised version was resolved during an install. If your repositories live on GitHub, the code search interface lets you scan your entire organization's lockfiles at once.
Check the installed node_modules directory. In any project where you suspect the package was installed, look inside node_modules for a folder named plain-crypto-js. Its presence confirms the dropper ran, regardless of the version number reported inside the folder. Because the dropper replaces the manifest with a downgraded version number as part of its cleanup, the folder's existence is a more reliable indicator than any version string.
Review CI/CD pipeline logs. Identify every npm install or npm ci run that executed between 12:21 AM and 3:15 AM UTC on March 31. Search those logs for plain-crypto-js appearing in the dependency resolution output. If you have outbound network monitoring on your CI runners, look for connections to the domain sfrclak.com or the IP address 142.11.206.73 on port 8000.
Check developer machines for RAT artifacts. The dropper writes a payload file at a predictable location on each operating system. On macOS, look for a file named com.apple.act.mond inside the Library/Caches directory. On Windows, look for a file named wt.exe inside the Program Data directory. On Linux, look for a file named ld.py inside the tmp directory. Finding any of these files confirms that the dropper reached its second stage and established a RAT on the machine.
Search corporate network and DNS logs. If your organization runs DNS filtering, a proxy, or a firewall with logging, search for any queries or connections to the domain sfrclak.com. A hit from a developer machine or CI runner in the early hours of March 31 confirms that the RAT dropper contacted the attacker's server successfully.

What to Do Based on What You Found

The Compromised Version Appeared Only in Source Files

If you found the version in a lockfile or branch that was never actually installed in a live environment, the exposure is limited to source. Update your version specification to a known-safe release: axios@1.14.0 for 1.x projects, or axios@0.30.3 for 0.x projects. Add an overrides or resolutions block to your package.json to prevent future installs from resolving to the compromised versions through a transitive dependency. Delete the node_modules/plain-crypto-js directory if it exists, run a clean install, and regenerate your lockfile. Review any open pull requests that reference the compromised versions and close them without merging, even if CI passed. The CI runner may have executed the dropper on those branches.

The Package Was Installed on an Ephemeral CI Runner

GitHub-hosted runners and similar ephemeral environments are destroyed after each job executes, so the runner itself is not a persistent threat. The concern is the credentials that were accessible to the workflow during the compromised run. Rotate every secret that was injected into that environment: npm tokens, cloud provider access keys and session tokens for AWS, GCP, and Azure, SSH keys, API keys stored as environment variables, and any values sourced from the repository's secrets store. After rotating, review the access logs for each service those credentials could reach and look for activity in the window following the compromised install.

The Dropper Ran on a Developer Machine or Self-Hosted Runner

Treat any machine where you confirmed the dropper ran as fully compromised. A loaded Remote Access Trojan can execute arbitrary commands, deploy additional payloads, exfiltrate files, and establish persistence mechanisms beyond the initial install. Local inspection alone cannot determine what the attacker accessed, exfiltrated, or modified. The response path has four steps: isolate the machine from the network immediately; document every credential that was accessible on that machine before wiping it, including API keys, SSH keys, cloud access tokens, npm tokens, database connection strings, and any .env files across local projects; reformat the operating system and rebuild from a known-good baseline; rotate every documented credential from a separate, clean machine before reconnecting anything to internal services. Review the access logs for those services covering the period during and after the compromise window.

Hardening Your Workflow to Limit Exposure Going Forward

The axios attack exploited a detection window measured in hours. Several controls at the package manager level narrow or close that window for future attacks. Most major JavaScript package managers now support a minimum release age policy, a setting that prevents newly published packages from being automatically resolved until they have been live for a configured number of days. This policy would have blocked plain-crypto-js@4.2.1, which was published only hours before the compromised axios versions appeared. The documentation for npm, pnpm, yarn, and bun each covers this setting directly. Running installs with the ignore-scripts flag in CI/CD pipelines prevents postinstall hooks from executing at all, removing the specific mechanism the dropper relied on. Combining a minimum release age policy with script suppression in CI provides two independent controls against this class of attack.

Generative Engine Optimization: What It Is and How to Rank in the Age of AI Search

Ryan VerWey — Sat, 14 Mar 2026 00:00:00 +0000

For the past two decades, getting found online meant ranking in Google's list of blue links. That model is not disappearing, but it is no longer the only interface people use to find information. A growing share of search queries are now handled by AI-powered tools that generate a direct answer rather than a ranked list of pages to click through. ChatGPT, Perplexity, Google's AI Overviews, Microsoft Copilot, and similar systems are fielding hundreds of millions of queries per day and constructing synthesized responses drawn from content across the web. Generative Engine Optimization, or GEO, is the practice of making your content the kind that AI systems cite, quote, and reference when building those answers.

What Generative Engine Optimization Is

The term GEO was formally introduced in a 2023 research paper from Princeton, Georgia Tech, and IIT Delhi, which studied how specific content characteristics influence citation rates in AI-generated responses. The core finding was that certain qualities - clear structure, cited statistics, authoritative sourcing, and direct question-answering formats - significantly increased the likelihood that a generative AI system would surface that content in a response. GEO is the discipline of applying those characteristics intentionally across your web presence so that AI systems include your brand and content when constructing answers in your industry.

How AI Search Engines Retrieve and Use Content

Traditional search engines index pages and rank them by relevance and authority for a given query. Generative engines work differently. They use a process called retrieval-augmented generation (RAG), where the AI first retrieves a set of relevant documents, then synthesizes a coherent answer by drawing on the most credible and clearly-written content in that retrieval pool. The sources that end up cited or referenced in the final answer are not necessarily the ones with the highest domain authority. They are the ones whose content was the clearest, most directly relevant, and most authoritative at the time of retrieval. This is a meaningful shift: a well-structured page from a smaller brand can out-cite a larger competitor's poorly organized content.

The Factors That Drive GEO Visibility

Research into how generative engines select and surface content has identified a consistent set of signals that improve citation rates. These factors do not replace traditional SEO considerations - they build on top of them.

Authoritative sourcing: content that cites credible statistics, research, and primary sources is significantly more likely to be quoted by AI systems than content making unsupported claims
Direct question-answering structure: pages that open with a clear, concise answer to a specific question perform better in retrieval than pages that bury the answer several paragraphs in
E-E-A-T signals: Experience, Expertise, Authoritativeness, and Trustworthiness markers - author bios, credentials, original case studies, named experts - are evaluated by both Google and generative AI systems
Structured data and schema markup: Schema.org markup helps AI systems understand what your content represents and the entities it describes, improving accurate retrieval
Brand mentions and backlinks: citations from credible third-party sources signal to AI systems that your brand is a recognized authority in your space
Content freshness: AI systems retrieval-augmented with recent content deprioritize outdated statistics and stale information
Content depth and specificity: comprehensive answers to narrow, specific questions consistently outperform shallow coverage of broad topics
Clean, readable prose: AI systems parse and synthesize content more effectively when it is written in clear language with a logical heading structure

The content that AI systems cite most is not necessarily the content that ranks highest on Google. It is the content that most clearly and credibly answers the exact question the user is asking.

5 Ways to Improve Your GEO Visibility Right Now

You do not need to rebuild your entire content strategy to improve your visibility in AI-generated responses. These five actions work across virtually any business type and can be applied to existing content as well as new content going forward.

Structure content to directly answer questions: identify the specific questions your customers ask most often and build dedicated sections that answer each one concisely and completely. An H2 heading that mirrors a user query followed immediately by a direct answer is the structure generative engines retrieve most reliably. FAQ sections, in particular, carry significant weight in AI retrieval systems.
Add statistics and cite your sources: unsupported claims are treated as lower-quality by both Google and AI systems. Back every significant claim with a specific statistic, study, or data point and link to the original source. Multiple studies have confirmed that content with cited data is surfaced by AI systems at measurably higher rates than content making the same points without evidence.
Build brand mentions and authoritative backlinks: being referenced by established publications, industry directories, local news outlets, and credible websites signals to AI systems that your brand is a recognized authority. A consistent local PR strategy, guest contributions to relevant industry publications, and placement in authoritative directories all build the citation profile that generative engines weigh heavily.
Complete and optimize your structured data: implement Schema.org markup appropriate to your business type - LocalBusiness, Article, FAQPage, Service, Person, or Organization. This gives AI systems a machine-readable understanding of who you are, what you offer, and where you operate. Pages with complete structured data are retrieved and represented more accurately in AI-generated responses.
Publish original research, data, or documented expertise: AI systems give significant weight to content presenting original insights, proprietary data, or clearly documented professional experience. A case study showing specific results you achieved for a client, a survey with original findings, or a detailed walkthrough based on real work you have completed is far more citable than a generically written overview that dozens of other sites have already published.

GEO and Traditional SEO Are Not in Conflict

A common question when businesses first encounter GEO is whether optimizing for AI means doing something different from or contrary to their existing SEO strategy. In practice, the two approaches are highly compatible. The factors that improve visibility in AI-generated responses - authoritative content, clear structure, credible sourcing, schema markup, E-E-A-T signals, and backlink quality - are the same factors that improve traditional search rankings. A business already investing in strong technical SEO and high-quality content is building the foundation for GEO at the same time. The additions GEO specifically requires are mostly about content format: being more explicit in answering questions, being more rigorous about citing evidence, and being more deliberate about building citation-worthy expertise and brand authority.

The Business Case for Acting Now

AI search is not a niche use case. Google's AI Overviews appear on the majority of informational queries in the United States. Perplexity crossed 100 million monthly active users in 2025. ChatGPT Search is actively indexing the live web. The businesses building GEO-optimized content libraries today are positioning themselves to be the sources AI systems default to when answering questions in their industry. The window to establish that authority before the competitive landscape fully catches on is open - but it is narrowing quickly.

Echo Effect builds content strategies designed for visibility in both traditional search and AI-generated responses. From structured data implementation to content audits to full editorial calendars built around GEO principles, we help businesses become the authoritative source their industries should be citing. Schedule a discovery call to talk through what a GEO strategy looks like for your business.

Why Next.js and Vercel Are the Best SEO Investment Your Business Can Make in 2026

Ryan VerWey — Thu, 05 Mar 2026 00:00:00 +0000

Search engine optimization in 2026 is not just about keywords and backlinks. Google's algorithm has been weighting technical performance aggressively since the Core Web Vitals rollout, and the gap between a fast website and a slow one is now reflected directly in rankings. The businesses winning in organic search are increasingly the ones whose websites load instantly, are structurally clean for crawlers, and deliver a seamless experience on every device. Next.js combined with Vercel's global edge network is the most complete answer to all of those requirements that exists in the modern web stack.

Core Web Vitals Are a Hard Ranking Factor - And Most Business Websites Fail Them

Google's Core Web Vitals measure three things: how fast your largest piece of content loads (Largest Contentful Paint, or LCP), how quickly your page responds to the first user interaction (Interaction to Next Paint, or INP), and how much your layout shifts around as the page loads (Cumulative Layout Shift, or CLS). Sites that score in the Good range on all three receive a measurable ranking boost in competitive search results. The majority of business websites built on drag-and-drop builders or older WordPress themes fail at least one of these metrics, often multiple. Next.js is architected from the ground up to make good Core Web Vitals scores achievable without heroic developer effort.

How Next.js Renders Pages Gives You a Structural SEO Advantage

Traditional single-page applications built in plain React send an almost empty HTML document to the browser and rely on JavaScript to render the content. Googlebot can execute JavaScript, but it introduces indexing delays and creates situations where your content is crawled later or less reliably than a statically or server-rendered page. Next.js solves this by rendering HTML on the server before it ever reaches the browser or a crawler. Googlebot receives a fully populated HTML document the moment it crawls your URL - every heading, paragraph, and link is immediately visible and indexable with no JavaScript execution required. This is a structural advantage that is simply not available to businesses on most website builders.

Next.js App Router Features That Google Directly Rewards

Built-in Metadata API: define page titles, descriptions, Open Graph tags, and structured data with type-safe TypeScript objects - no plugin required
Automatic sitemap generation: export a sitemap.ts file and Next.js builds and serves a dynamic XML sitemap that updates as you add content
Image optimization: the next/image component automatically serves WebP or AVIF formats, resizes images to the viewport, and uses lazy loading by default - directly improving LCP scores
Font optimization: next/font eliminates layout shift from web fonts loading by inlining font CSS and preloading font files automatically
Route-level code splitting: each page only loads the JavaScript it actually needs, keeping bundle sizes minimal and Time to Interactive fast
React Server Components: pages built with RSC ship zero client-side JavaScript for static content, dramatically reducing bundle size and improving all performance metrics

Vercel's Edge Network: The Speed Advantage Your Competitors Don't Have

Page speed is not just about code quality - it is about proximity. When a user in Miami requests your website and your server is in Virginia, the round-trip time adds latency to every single request. Vercel operates a global edge network with nodes on six continents. Your website's pages are cached and served from whichever node is physically closest to each visitor. A user in Los Angeles gets your site from a California edge node. A user in London gets it from a European node. The result is that your Time to First Byte (TTFB) - one of the earliest signals Google measures - stays fast for every visitor regardless of geography. This is infrastructure that used to require a dedicated CDN contract and significant engineering work. With Vercel it is the default.

Automatic Image Optimization That Directly Improves Your LCP Score

Images are the single most common reason a page fails its Largest Contentful Paint score. An unoptimized JPEG uploaded straight from a camera is typically 3 to 8 megabytes and forces the browser to download and decode an enormous file before rendering. The next/image component solves this automatically: it converts images to modern WebP or AVIF formats (30 to 50% smaller than JPEG at equivalent quality), resizes the image to match the screen size requesting it, and adds lazy loading so images below the fold do not block the initial page render. The hero image on your homepage - almost always the LCP element - gets a priority hint that tells the browser to fetch it before anything else. These are optimizations that many web development agencies implement manually and inconsistently. In Next.js they are the default behavior.

Structured Data and the Metadata API: How Next.js Makes Schema Easy

Structured data (Schema.org markup) tells Google exactly what your content represents - whether it is a local business, a blog article, a product, a FAQ, or a review. Rich results in Google Search - the star ratings, FAQ dropdowns, and knowledge panels you see on certain results - are only available to pages that implement structured data correctly. In older web stacks, adding Schema.org markup meant maintaining raw JSON-LD scripts scattered across template files. Next.js lets you export typed metadata objects from each page and generate structured data programmatically from your content. For a business with a blog, every article page can automatically generate Article schema. Every service page can generate Service schema. This level of structured data coverage, done consistently across every page, is a meaningful signal to Google about the quality and organization of your site.

The businesses that will dominate search in 2026 are not the ones with the most content - they are the ones with the fastest, most technically correct websites. Next.js and Vercel make that achievable for businesses of any size.

What These Performance Gains Actually Mean for Your Rankings

The performance advantages of Next.js and Vercel are not theoretical. Businesses that migrate from WordPress or a website builder to a properly built Next.js site typically see LCP drop from the 3 to 5 second range into under one second, Core Web Vitals go from Needs Improvement or Poor to fully Good, and organic click-through rate improve because fast-loading pages rank higher and earn more impressions. Combined with clean semantic HTML that search engines can parse without JavaScript, a full sitemap that updates automatically, and properly structured metadata on every page, a Next.js site built correctly gives you a technical SEO foundation that most small business websites simply do not have. That foundation compounds over time - every piece of content you add lands on a platform that Google trusts and rewards.

Echo Effect builds all client websites on Next.js deployed to Vercel - because it gives our clients a technical SEO advantage from day one. If your current website is slow, hard to update, or failing its Core Web Vitals, schedule a discovery call and we will show you exactly what a rebuild would do for your search rankings and conversion rate.

7 Things Every Local Business Website Must Have in 2025

Ryan VerWey — Tue, 20 Jan 2026 00:00:00 +0000

Most local business websites are built backward. They lead with the company history, bury the contact information, and assume visitors will scroll to find a reason to care. In 2025, the average visitor decides within three seconds whether to stay or leave - and that decision happens almost entirely above the fold. These seven elements are what separate a website that generates business from one that just occupies a domain.

1. A Clear Value Proposition Above the Fold

Your homepage headline should answer one question immediately: what do you do and who do you do it for. "Full-Service HVAC in Tampa Bay - Same-Day Service Available" tells a visitor exactly what they need to know in under five seconds. Vague headlines like "Committed to Excellence" or your company tagline tell visitors nothing actionable. If a new visitor cannot determine your core service and location within three seconds of landing on your site, you are losing business to competitors whose sites communicate more clearly.

2. Responsive, Mobile-First Design

Over 65% of local search traffic now comes from mobile devices. Google has used mobile-first indexing since 2019, which means Google primarily crawls and evaluates your site based on how it appears on a phone - not a desktop. A site that looks polished on a laptop but breaks on a phone is actively hurting your search rankings and sending your highest-intent traffic straight to competitors. Every element - navigation, buttons, forms, images, font sizes - must be designed for a 375px screen first.

3. Page Load Speed Under 3 Seconds

Google uses Core Web Vitals as a direct ranking factor, and 53% of mobile visitors abandon a page that takes longer than three seconds to load. For local businesses competing in search results, a slow site is a double penalty: you rank lower and you lose the visitors who do find you. Most speed issues trace back to unoptimized images, unused JavaScript, and low-quality hosting. These are all solvable problems that have an outsized impact on your bottom line.

4. Trust Signals Throughout

Trust signals are the elements that answer a visitor's unspoken question: "Why should I choose this business over everyone else?" This includes Google review snippets, industry certifications and licenses, before-and-after photos, named testimonials with photos, and any press mentions or awards. Professional photography of real work, real team members, and real job sites builds trust far more effectively than stock images. Every page where a visitor might be deciding whether to contact you should have at least one trust element visible.

People do not buy from businesses they found online. They buy from businesses that felt trustworthy when they got there.

5. One Primary CTA on Every Page

The surest way to kill conversions is to give visitors too many options. When someone arrives on your service page, they should see one prominent action: "Get a Free Quote," "Schedule a Call," or "Book Now." Secondary links - to other services, to your blog, to your About page - are fine to include, but there should be one action that visually dominates the page. Confusion is the enemy of conversion, and a page with five competing calls to action generates fewer contacts than a page with one clear path.

6. Contact Information and Location Everywhere

Your phone number should appear in the header of every page - clickable on mobile - and again in the footer. Your physical address (if you have one) or service area should be visible without scrolling on your Contact page. A Google Maps embed on your Contact page is a minor addition with significant trust and SEO value. Visitors who have to hunt for your contact information leave. Put it everywhere.

7. Local Schema Markup

Schema markup is structured data embedded in your page code that tells Google precisely what your business is, where it operates, its hours, its reviews, and its services. Google uses this data to populate rich results in search - star ratings, service areas, and business details that appear directly in the search results page before a visitor even clicks your link. For local businesses this markup is a competitive advantage that most DIY websites and even many agencies overlook entirely.

Echo Effect builds conversion-optimized websites for local businesses from the ground up - mobile-first design, Core Web Vitals performance, local SEO structure, and all seven of these elements built in from day one. Contact us for a free website audit.

Building an Intelligent Portfolio Filtering System with Next.js and React Context

Ryan VerWey — Sun, 23 Nov 2025 23:25:59 +0000

The Challenge: Helping Recruiters Find What Matters

When building a portfolio website, one of the biggest challenges is information overload. You want to showcase everything you've built - your full-stack capabilities, data projects, UI/UX work, project management experience - but recruiters and hiring managers often have specific interests.

A front-end recruiter doesn't need to sift through your database optimization projects, and a data science manager shouldn't have to scroll past your Angular components.

The solution? An intelligent filtering system that asks visitors what they're interested in and quietly highlights the most relevant content throughout the entire portfolio.

Design Goals and UX Principles

Before writing a single line of code, I established clear design goals based on fundamental UX principles:

1. Progressive Disclosure

Don't overwhelm users with all filtering options at once. Start with high-level interests (Full Stack, Web Development, Data, etc.) and let the system handle the complexity behind the scenes.

2. Persistence Without Friction

Filter selections should persist across page navigation and browser sessions, but users should be able to adjust them at any time without going through a complex flow.

3. Subtle Over Aggressive

Visual highlighting should guide attention without screaming. Instead of hiding non-matching content (which feels restrictive), use subtle visual cues - lighter borders, reduced opacity - to naturally draw the eye to relevant items.

4. F-Pattern Optimization

Leverage the natural F-shaped reading pattern by placing filter controls at the top of each page and using horizontal layouts that align with how users scan content.

5. First-Time User Experience

Show a welcome modal only once per session, making it feel like a helpful concierge rather than an annoying popup.

6. URL-Based Context Setting

Enable direct linking to filtered views through URL parameters, allowing users to share specific portfolio contexts or bookmark their preferred view.

Technical Architecture

Technology Stack

Next.js 14 with App Router for server-side rendering and optimal performance
React Context API for global state management
TypeScript for type safety across the entire filtering system
localStorage and sessionStorage for different persistence needs
Tailwind CSS for responsive, utility-first styling

Core Components

The system is built around four key architectural pieces:

1. Central Filter Configuration (`lib/filters.ts`)

The heart of the system is a centralized configuration file that maps high-level interest categories to specific technology tags:

export const filterPresets: Record<InterestCategory, FilterPreset> = {
  'full-stack': {
    id: 'full-stack',
    label: 'Full Stack Development',
    description: 'End-to-end application development with modern frameworks',
    tags: [
      'React', 'Angular', 'Vue', 'Next.js',
      'Node.js', 'Express', '.NET', 'C#',
      'JavaScript', 'TypeScript', 'Python',
      'SQL', 'SQL Server', 'MongoDB',
      'REST APIs', 'CI/CD', 'Docker', 'Kubernetes'
    ]
  },
  // ... more presets
}

This approach follows the Single Source of Truth principle - all filtering logic stems from this one configuration, making it easy to add new categories or adjust mappings.

The file also includes helper functions for matching logic:

export function matchesFilters(itemTags: string[], activeFilters: string[]): boolean {
  return activeFilters.some(filter => itemTags.includes(filter))
}

export function getFilterStrength(itemTags: string[], activeFilters: string[]): number {
  if (activeFilters.length === 0) return 1
  const matches = itemTags.filter(tag => activeFilters.includes(tag)).length
  return matches / activeFilters.length
}

The getFilterStrength function is crucial - it returns a 0-1 score indicating how strongly an item matches active filters, enabling nuanced visual highlighting.

2. Global State Management (`contexts/FilterContext.tsx`)

React Context provides global state without prop drilling. The FilterContext manages:

activeFilters: Array of currently active technology tags
selectedInterest: The high-level category chosen by the user
hasSeenWelcome: Whether the user has dismissed the welcome modal

The implementation uses lazy initialization to avoid hydration mismatches, a common gotcha in Next.js:

const [activeFilters, setActiveFilters] = useState<string[]>(() => {
  if (typeof window !== 'undefined') {
    const stored = localStorage.getItem('portfolioFilters')
    return stored ? JSON.parse(stored) : []
  }
  return []
})

This pattern ensures localStorage is only accessed on the client, preventing server/client render discrepancies.

URL Parameter Integration

A powerful feature of the filtering system is the ability to set filters directly through URL parameters. This enables shareable links and bookmarkable views:

const loadInitialInterest = (): InterestCategory | null => {
  if (typeof window === 'undefined') return null

  // Check URL parameter first
  const urlParams = new URLSearchParams(window.location.search)
  const urlInterest = urlParams.get('interest')

  if (urlInterest && urlInterest in filterPresets) {
    return urlInterest as InterestCategory
  }

  // Fall back to stored preference
  const stored = localStorage.getItem('portfolioInterest')
  return stored ? (stored as InterestCategory) : null
}

This creates several powerful use cases:

Direct Links: Share https://www.ryanverwey.dev/?interest=full-stack to showcase full-stack work
Resume Integration: Add filtered links to your resume for role-specific portfolios
Job Applications: Send ?interest=web-development to a front-end position
Social Media: Tweet different filtered views for different audiences

The URL parameter takes precedence over stored preferences, ensuring shared links always display the intended context. After initial load, the selection is persisted to localStorage for subsequent navigation.

The context also provides methods for manipulating filters:

const applyPreset = useCallback((interest: InterestCategory) => {
  const preset = filterPresets[interest]
  setSelectedInterest(interest)
  setActiveFilters(interest === 'browse-all' ? [] : preset.tags)
}, [])

3. Welcome Modal (`components/WelcomeModal.tsx`)

First impressions matter. The welcome modal appears once per session, presenting six interest options in a clean, scannable grid:

<div className="fixed inset-0 z-50 flex items-center justify-center p-4 
     bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
  <div className="relative w-full max-w-lg bg-white dark:bg-zinc-900 
       rounded-xl shadow-xl">
    {/* Interest options in a 2-column grid */}
  </div>
</div>

Key UX decisions:

Backdrop blur creates depth and focuses attention
Max-width constraint ensures readability on large screens
Skip option respects user autonomy, no forced interaction
sessionStorage (not localStorage) means the modal returns in new sessions, gently reminding return visitors they can customize their view

4. Filter Bar (`components/FilterBar.tsx`)

The FilterBar appears consistently at the top of filtered pages, providing both context and control:

<div className="bg-white/80 dark:bg-zinc-950/80 backdrop-blur-sm 
     border-b border-zinc-200 dark:border-zinc-800 mb-8">
  <div className="container mx-auto max-w-6xl px-4 py-4">
    {/* Interest selector buttons */}
    {/* Active filters display */}
  </div>
</div>

The semi-transparent background with backdrop blur creates a modern, elevated feel while maintaining visual hierarchy.

Implementation Patterns

Highlighting Strategy

The highlighting system uses a three-tier approach based on match strength:

const getHighlightClass = (tags: string[]) => {
  if (activeFilters.length === 0) return ''
  const strength = getFilterStrength(tags, activeFilters)

  if (strength >= 0.5) {
    return 'ring-1 ring-zinc-400 dark:ring-zinc-600'
  } else if (strength > 0) {
    return 'ring-1 ring-zinc-300 dark:ring-zinc-700'
  } else {
    return 'opacity-40'
  }
}

This creates a visual hierarchy:

Strong matches (50%+ tags match) get a noticeable but subtle ring
Partial matches get a lighter ring
Non-matches are dimmed but still visible

This follows the Recognition Over Recall principle - users can see all content but immediately recognize what's most relevant.

Type Safety Throughout

TypeScript ensures compile-time safety across the entire system:

export type InterestCategory = 
  | 'full-stack'
  | 'web-development'
  | 'back-end'
  | 'data'
  | 'project-management'
  | 'browse-all'

interface FilterPreset {
  id: InterestCategory
  label: string
  description: string
  tags: string[]
}

Union types for categories prevent typos and enable autocomplete. Every filter interaction is type-checked, reducing runtime errors.

Performance Considerations

Several optimizations ensure the filtering system doesn't impact performance:

Memoization with useCallback: Filter operations are memoized to prevent unnecessary re-renders
Lazy initialization: State is initialized once, not on every render
Selective filtering: Projects page doesn't apply filtering logic (only highlighting) to avoid jarring layout shifts
Static generation: Pages remain statically generated, filtering happens entirely client-side

Accessibility

The system incorporates several accessibility features:

Semantic HTML: Buttons use proper <button> elements, not divs
Focus management: Keyboard navigation works naturally through filter options
Color contrast: All text meets WCAG AA standards
Reduced motion: Animations respect prefers-reduced-motion
Screen reader labels: Filter buttons clearly announce their state

Page-Specific Implementations

About Page

The About page uses highlighting on both experience cards and skill buttons:

const renderSkillButton = (skill: string) => {
  const isFiltered = activeFilters.includes(skill)
  return (
    <button
      className={`block w-full px-3 py-2 text-sm rounded-lg border transition-all ${
        isFiltered
          ? 'border-zinc-400 bg-zinc-100 dark:bg-zinc-800 font-medium'
          : 'border-zinc-200 dark:border-zinc-700 hover:border-zinc-300'
      }`}
    >
      {skill}
    </button>
  )
}

This creates a cohesive experience where skills relevant to the selected interest are subtly emphasized.

Projects Page

Projects showcase a unique challenge - they have both category filters (Web Apps, Websites, Tools) and global filters. The solution:

const filteredProjects = projects.filter(p => {
  const categoryMatch = selectedCategory === 'All' || p.category === selectedCategory
  // Don't filter by activeFilters - only highlight
  return categoryMatch
})

Projects remain visible regardless of global filters (avoiding confusing disappearing content), but the highlighting guides attention to relevant tech stacks.

Experience Page

The Experience page combines a collapsible skill sidebar with the global FilterBar:

const toggleSkill = (skill: string) => {
  if (activeFilters.includes(skill)) {
    removeFilter(skill)
  } else {
    addFilter(skill)
  }
}

This allows granular control - users can click individual skills to add them to filters, creating a dynamic, exploratory experience.

Blog Page

The blog integrates with existing category/tag filters while syncing with global state:

useEffect(() => {
  if (currentTag && !activeFilters.includes(currentTag)) {
    addFilter(currentTag)
  }
}, [currentTag, activeFilters, addFilter])

This creates continuity - selecting a tag in the blog updates global filters, so navigating to the Experience page automatically highlights related skills.

UI/UX Principles in Action

Visual Hierarchy

The entire system leverages Gestalt principles of perception:

Proximity: Related controls are grouped together
Similarity: Matching tags share visual styling
Continuity: The FilterBar maintains consistent positioning across pages
Figure-Ground: Highlighted items naturally pop against dimmed content

Cognitive Load Reduction

Rather than forcing users to understand tag taxonomies, the system presents intent-based presets:

"I'm interested in Full Stack Development" → System applies 20+ relevant tags
User never needs to know the underlying complexity
Follows Don Norman's principle of mapping mental models to system models

Feedback and Affordances

Every interaction provides clear feedback:

Hover states signal clickability
Active states show current selection
Transition animations create continuity (but are subtle, 150ms or less)
Read-only badges (active filters) provide context without inviting accidental interaction

Mobile Responsiveness

The system adapts to smaller screens:

.flex-col sm:flex-row sm:items-center

On mobile, filter buttons stack vertically. On desktop, they flow horizontally. This maintains usability across all viewport sizes.

Lessons Learned

What Worked Well

Central configuration: Having one source of truth made the system easy to extend and debug
Subtle highlighting: Users report the filtering feels "helpful, not pushy"
Browse All as default: Starting unfiltered respects user agency and prevents confusion
Type safety: TypeScript caught numerous bugs during development

What I'd Do Differently

Analytics integration: Tracking which interests users select would inform content strategy
Fuzzy matching: Currently, matching is exact - "React" vs "ReactJS" won't match. A fuzzy matcher would be more forgiving
A/B testing: Test different highlight intensities to optimize for conversion
Filter combinations: Allow multiple interest selections simultaneously for hybrid roles

Performance Metrics

After deployment:

First Contentful Paint: < 1.2s
Largest Contentful Paint: < 2.0s
Cumulative Layout Shift: 0.01 (excellent)
Time to Interactive: < 2.5s

The filtering system adds negligible overhead - most logic is simple array operations, and React's reconciliation handles updates efficiently.

Conclusion

Building an intelligent filtering system isn't just about functionality - it's about understanding user intent and creating an interface that feels anticipatory rather than reactive. By combining thoughtful UX principles, modern React patterns, and performant architecture, we created a system that helps visitors find exactly what they're looking for without feeling restrictive.

The key insights:

Start with user research: Understand why people visit your portfolio
Map intents to implementations: High-level categories → specific tags
Prioritize subtlety: Guide, don't force
Maintain consistency: Same patterns across all pages
Enable shareability: URL parameters make filtered views shareable
Test on real users: Assumptions ≠ reality

This system demonstrates that sophisticated features don't require complex UIs. By leveraging fundamental design principles and modern web technologies, we created an experience that feels effortless - the hallmark of great design.

Real-World Application

The URL-based filtering has proven particularly valuable in job applications. Instead of sending recruiters to a generic portfolio, I can now send role-specific links:

Full-Stack Position: ?interest=full-stack - Highlights end-to-end development work
Front-End Role: ?interest=web-development - Emphasizes UI components and React expertise
Backend Position: ?interest=back-end - Showcases API development and database work
Data Role: ?interest=data - Features analytics, ETL, and visualization projects

This targeted approach increases engagement by showing recruiters exactly what they're looking for, without making them hunt through unrelated content.

Technologies Used: React, Next.js 14, TypeScript, Tailwind CSS, React Context API

Methodologies: User-Centered Design, Progressive Enhancement, Mobile-First Development, Accessibility-First

UI/UX Principles: Progressive Disclosure, Recognition Over Recall, F-Pattern Layout, Gestalt Principles, Visual Hierarchy

Why Utility Classes in CSS Make Modern Front-End Development Faster, Cleaner, and More Scalable

Ryan VerWey — Sat, 15 Nov 2025 18:20:10 +0000

A practical guide to why “utility-first” CSS is winning; and how to use it effectively.

Introduction: The War Against Bloated Stylesheets

Every front-end engineer eventually hits the same wall; a stylesheet so massive and disorganized that every update feels like defusing a bomb. Overrides pile up, class names drift, and the entire CSS layer becomes a fragile maze.

Utility-first CSS emerged as a response to these long-standing pain points; it’s not a fad; it’s a pragmatic architectural pattern that shifts how modern teams write, scale, and maintain UI code. Recent industry reflections highlight that developers are increasingly turning to utility-first approaches because they offer a more predictable and maintainable styling model (Pickering, 2024).

The Problem: Traditional CSS Scales Poorly

For decades, CSS has favored “semantic class names,” which promise clarity but often backfire in large systems.

1. Naming Complexity

Endless debates over .btn-primary vs. .button--primary
Inconsistent naming conventions across teams
Cognitive load introduced by abstract class semantics

2. CSS That Only Grows

Stylesheets rarely shrink.
Apps accumulate years of cruft, unused selectors, legacy overrides, and specificity battles.

3. Cascading Side Effects

Changing the styling of one class often has unpredictable ripple effects across the application.

4. Slow Iteration

Developers bounce between HTML/JSX and CSS files; wasting time and mental energy on context switching.

Academic comparisons confirm that traditional CSS approaches often lead to inflated stylesheets and maintainability issues; especially in larger UI systems (Nandan et al., 2024).

The Solution: Utility-First CSS

Utility-first CSS replaces named abstractions with small, single-purpose classes that directly represent styling intent.

Example:

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">
  Save
</button>

Instead of describing what an element “is,” utility classes tell the browser exactly what to do.

Why This Model Works

Predictable: Every utility does one thing, consistently.
Local: Styles live next to the markup they affect.
Explicit: No hunting through CSS files to understand design decisions.
Fast: Less cognitive overhead; fewer naming decisions.

Industry practitioners argue that this model leads to dramatically faster development cycles and significantly fewer styling regressions (Wolff, 2019).

Core Benefits of Utility Classes

1. Faster Development Through Composability

Utilities act as UI “lego blocks,” allowing rapid assembly of interfaces without external CSS files.

2. Smaller, More Performant CSS Bundles

Utility-first frameworks like Tailwind purge unused classes; often producing production bundles under 10 KB.

3. Style Consistency at Scale

Shared spacing scale
Unified color tokens
Consistent typography
Predictable responsive behavior

4. Fewer Global CSS Conflicts

Utility classes avoid deep cascading rules; refactoring becomes safer and more reversible.

5. Perfect Fit for Component Architectures

React, Vue, Svelte, and modern design systems thrive on locality; styles stay close to logic and markup.

Real-World Use Cases

1. Design Systems

Utility-first CSS works as a low-level foundation for tokens and primitives; spacing, color, typography, grid utilities, and more.

2. Rapid Prototyping

Teams can sketch entire pages in minutes using existing utility classes.

3. Large Engineering Teams

Utility classes level the playing field; senior and junior devs can build consistent UI without deep CSS expertise.

4. High-Churn UI Work

Startups and product teams shipping daily benefit from the agility utility classes provide.

Nandan et al. (2024) found that several utility-first frameworks significantly improved iteration speed and reduced styling-related defects when compared to traditional CSS methodologies.

Common Pitfalls and How to Avoid Them

❌ “Utility classes make HTML messy.”

Solution: Group utilities logically, use formatters, and extract components only when patterns stabilize.

❌ “It feels like inline styles.”

Utilities differ from inline styles in key ways:

They support responsive variants
They work with tokens
They respect global design constraints
They are reusable and compositional

❌ “Too many classes on a single element.”

Good component architecture keeps utility usage manageable; extract components only when repetition naturally emerges.

Actionable Best Practices

✔ Build a stable design token foundation

Spacing scales, color palettes, type ramps, and layout primitives ensure consistent output.

✔ Keep your components granular

Utility-first CSS thrives when components are focused and coherent.

✔ Extract only meaningful abstractions

Avoid over-engineering; let patterns emerge organically.

✔ Document your utility usage

Enhance discoverability and consistency across teams.

Conclusion: Utility-First CSS Is a Practical, Scalable Evolution

Utility classes are not just a stylistic preference; they solve long-standing structural problems in CSS architecture. They improve predictability, speed up development, reduce regressions, and align perfectly with component-driven interfaces.

Modern teams adopting utility-first CSS benefit from:

Smaller CSS bundles
Faster delivery cycles
Fewer styling bugs
Cleaner and more maintainable UI codebases

As both practitioners and researchers have observed, utility-first CSS isn’t just viable; it’s practically superior for many contemporary front-end workflows (Pickering, 2024; Nandan et al., 2024; Wolff, 2019).

Key Takeaways

Utility classes reduce naming overhead and improve velocity.
They shrink CSS bundle sizes through aggressive pruning.
They enforce design consistency and reduce regressions.
They integrate naturally with component-based frameworks.
They help large teams move faster with fewer styling conflicts.

References

Nandan, S., Usha Sree, R., & Mohan, P. (2024). Comparison of Utility-First CSS Frameworks. Journal of Innovation and Technology, 2024(32). https://eprints.intimal.edu.my/2069/2/610

Pickering, H. (2024, February 19). What is Utility-First CSS? HeydonWorks. https://heydonworks.com/article/what-is-utility-first-css/

Wolff, S. (2019, May 26). Utility-first CSS: Ridiculously fast front-end development for almost every design. Medium. https://medium.com/@sascha.wolff/utility-first-css-ridiculously-fast-front-end-development-for-almost-every-design-503130d8fefc

Process Mapping Tool

Ryan VerWey — Sat, 15 Nov 2025 05:12:31 +0000

ProcessMapper: Visualize, Document, and Improve Team Workflows

Demo:

👉 https://ryanverwey.github.io/ProcessMapper/

Excerpt

ProcessMapper is a modern web app for building professional process maps and workflow diagrams. With an intuitive drag-and-drop editor, customizable node types, animated edges, background templates, and client-side image export, ProcessMapper turns tribal knowledge into shareable, actionable diagrams.

Try the live demo above.

Why Process Mapping Matters

Work really happens in processes — onboarding, incident response, release handoffs, customer journeys, and support escalations. When those processes live in scattered notes or institutional memory, teams lose time and make avoidable mistakes.

Visual process maps improve:

Ownership clarity
Handoff visibility
Onboarding speed
Bottleneck discovery
Automation opportunities

ProcessMapper is designed to make creating those maps fast, intuitive, and enjoyable.

Product Overview

ProcessMapper is a browser-based process mapping tool built for clarity, speed, and shareability. Its interface is clean and minimal — perfect for non-designers and technical users alike.

Use it to create maps for presentations, documentation, training, or process improvement work.

Feature Breakdown

Core Editing

Drag & drop canvas: Add and position nodes with mouse or touch.
Multiple node shapes: Rectangle, circle, diamond, hexagon.
Customizable appearance: Per-node color, title, and content fields.

Connections & Edges

Animated edges: Smooth visual flow indicators.
Edge labels: Add triggers, conditions, or SLAs.
Connection handles: Intuitive directed linking between nodes.

Node Metadata & Editing

Modal-based editing: Titles, descriptions, owners, colors.
Owner + notes fields: Reduce ambiguity by assigning responsibility.
Inline quick edit: Fast adjustments without leaving the canvas.

Backgrounds & Templates

Custom backgrounds: Upload or link background images (brand templates, diagrams, etc.).
Background-aligned templates: Build consistent visuals quickly.

Export & Sharing

Client-side PNG export: Ideal for slide decks, wikis, SOPs, and reports.
Shareable live demo: Let teammates interact with maps instantly.

UX & Performance

Responsive layout: Works across screen sizes.
Smooth animations: Clean transitions improve readability.

Quick User Walkthrough (5 Minutes)

Open the live demo.
Use the toolbar to add a node shape.
Click a node → open the edit modal → add title, description, owner.
Hover a node, drag from its handle to another to create a connection.
Add a label to describe the transition.
Add a background image or template.
Export the completed map as PNG for documentation or presentations.

Who Benefits Most

Product Managers & Engineers: Visualize release flows and validation steps.
DevOps / SRE: Turn runbooks and incident playbooks into stepwise diagrams.
Customer Success & Onboarding: Map customer journeys and team handoffs.
Process Improvement Teams: Compare “current vs. ideal” flows and find automation gaps.

Technical Highlights (High-Level)

ProcessMapper uses a lightweight, modern front-end architecture with:

Interactive node/edge canvas system
Modal-driven editing UI
Client-side export (no server round-trips)
Smooth animations and responsive rendering

The result is a low-friction experience built for both quick drafts and polished diagrams.

Best Practices for Creating Useful Process Maps

Start with outcomes: Define the end goal first.
Assign owners: Make responsibility explicit.
Include SLAs or timing: Add timing data where delays matter.
Use short labels: Keep transitions clear and scannable.
Iterate with stakeholders: Review maps with people involved in the process.

Website Speed and SEO: Why Slow Sites Lose Business Every Day

Ryan VerWey — Tue, 14 Oct 2025 00:00:00 +0000

Core Web Vitals: What They Measure and Why It Matters

Google's Core Web Vitals are three specific performance metrics that measure the real-world experience of using your website. LCP (Largest Contentful Paint) measures how quickly the main content of a page loads - Google's target is under 2.5 seconds. INP (Interaction to Next Paint) measures how quickly the page responds to user input like clicks and taps - target is under 200 milliseconds. CLS (Cumulative Layout Shift) measures visual stability: whether page elements jump around as the page loads, which causes users to accidentally click the wrong thing. These three metrics have been incorporated into Google's ranking algorithm and are now a direct factor in where your site appears in search results.

The Real Business Cost of a Slow Website

Performance is not a technical vanity metric - it is directly tied to revenue. Amazon measured that a 100-millisecond delay in page load time cost them 1% in sales. Google found that 53% of mobile visitors abandon a page that takes longer than 3 seconds to load. For a local business generating $50,000 per year from its website, a site that runs at 6 seconds instead of 2 seconds could realistically be losing 20 to 30% of potential inbound leads before those visitors ever see your offer. A slow site is not just an inconvenience - it is a daily, invisible revenue leak.

A 1-second delay in page load time results in a 7% reduction in conversions. That is not a technical problem - it is a revenue problem that looks like a technical one.

The Fixes That Deliver the Most Impact

Optimize and compress all images - serve WebP format instead of PNG or JPG, use lazy loading for below-the-fold images, and never upload images larger than their display size
Eliminate unused CSS and JavaScript - most WordPress and website builder installs load dozens of scripts for features you are not using; auditing and removing these dramatically reduces load time
Enable browser and server-side caching - returning visitors should load your site from their browser cache, not from the server, for every non-dynamic page
Upgrade your hosting - shared hosting at $5/month is often the single biggest performance bottleneck; managed hosting or a quality VPS is not optional for high-converting sites
Implement a Content Delivery Network (CDN) - serves your static assets from servers geographically close to your visitors instead of a single origin server
Minimize third-party scripts - every analytics tool, chat widget, and social plugin adds load time; audit regularly and remove everything that is not delivering value

Images: The Most Common Culprit

In our experience auditing hundreds of small business websites, unoptimized images are a contributing factor in over 80% of performance issues. The typical pattern looks like this: a business owner takes a high-resolution photo on their phone, uploads the original 8MB file to their website, and the page is now loading an image that is 15x larger than it needs to be at its display size. The fix is straightforward: compress images before upload, convert to WebP format, set explicit width and height attributes to prevent layout shift, and use lazy loading for images that appear below the initial viewport.

Hosting Quality Is Not Optional

There is a significant and measurable performance gap between shared hosting at the lowest price tier and managed hosting or a quality VPS. Shared hosting puts your website on a server alongside hundreds or thousands of other sites, competing for the same resources. During peak traffic periods - which often coincide with your highest-value business hours - your site slows to a crawl while the resources are spread thin. For a business that relies on its website to generate leads, treating hosting as the smallest line item in the budget is a false economy.

Echo Effect builds websites that score green on Core Web Vitals out of the box - not as an afterthought. Every project includes performance optimization, image compression pipelines, CDN configuration, and hosting recommendations tailored to your expected traffic. Request a free audit of your current site's performance.

My First JavaScript Web App: Interactive Image Coordinate Finder

Ryan VerWey — Wed, 06 Nov 2024 22:36:19 +0000

After completing my first JavaScript course at Full Sail University, I was eager to dive into a project that would put my new skills to the test. My goal was to create something functional, intuitive, and practical. This led to the development of my first JavaScript web application: the Interactive Image Coordinate Finder.

The app allows users to upload a map image, click to record coordinates, and save these as layers with unique names and optional URLs. With this tool, anyone can map or annotate custom images, making it especially handy for visual projects that involve identifying specific regions or landmarks on a web page. In this post, I'll walk you through the app's features, setup, and usage.

Before we begin, I think its an important caveat that this was also a work project. At my place of business, we work on closed networks meaning I'm not able to use APIs or other libraries so this project may be re creating the wheel or taking an old approach that more modern and advanced developers have improved upon. I can't wait to get there myself, for now lets get into it!

Leading off we've got a simple web page that displays a map of the middle east.

I thought to myself, how can we make this useful..ish? Maybe some simple interactions.. But how? After a few hours of searching google, code pen, and a few other sites I realized a low level method is to use coordinates on the image. How do I find them? google sent me to paint which made me face palm in the middle of a quiet office. So I decided to create a tool that can help me grab them.

I wanted to make a very simple UI that focused on utility. The app will allow users to browse for an image then display it on screen. The users is prompted for a Layer Name and optional link. They then click a bounding box around the area of the image they want to target, in the example I selected Egypt.

Once the users clicks save, the results will be below in the Layers Log where the user is able to copy just the coordinates, copy a line of code that works with the test page linked to the GitHub repo, Edit the layer, or delete the layer all together.

The end result for the demo is a map of the middle east where the user is able to click on a country and visit its Wikipedia page! I've got a lot of other use cases that I'd like to try out with the tool.

Thank you for reading!

Contrasting UX Design Methods

Ryan VerWey — Sat, 25 Nov 2023 20:06:02 +0000

Understanding the intricacies of the User Experience (UX) Design process is fundamental to creating products that not only meet but exceed user expectations. I want to delves into the nuanced steps of this process, emphasizing the importance of thorough testing and iteration in crafting exceptional user experiences. This model is taught by Google. I hope that readers will share their processes and experience in the comments so we can grow and learn together!

Brainstorm: Embracing Empathy and Definition
The journey of UX design begins with empathy, where understanding the user's needs, challenges, and aspirations is paramount. This stage involves extensive research to gather insights about the target audience. User interviews, surveys, and observation are key tools in this endeavor. The gathered data is then analyzed to create user personas, representing the typical users of the product. These personas guide the design process, ensuring that the product aligns with the real needs and wants of its users.

Define. Here, the focus is on distilling the research into a clear problem statement. This stage is critical as it sets the direction for the design process. The problem statement should be user-centric, specific, and actionable, providing a clear framework for ideation.

Design: Unleashing Creativity and Ideation
With a solid understanding of the user and a clearly defined problem statement, the design team moves into the ideation phase. This stage is all about creativity and exploring a wide array of solutions. Techniques like brainstorming, sketching, and mind mapping are employed to generate diverse ideas. The goal is to think broadly without constraints, considering even the most outlandish solutions, as these can sometimes lead to innovative breakthroughs.

Prototype: Bringing Ideas to Life
The transition from ideation to prototype is where concepts begin to take tangible form. Prototyping is about creating a preliminary version of the product, which can be a simple paper model or a more sophisticated digital prototype. The key is to develop something that can be tested and iterated upon. This stage is less about perfection and more about learning. It's a critical step in understanding how the theoretical ideas perform in practical scenarios.

Test: Refining through Feedback
Now, we arrive at the cornerstone of the UI UX Pro methodology: the testing phase. This stage is where the rubber meets the road. Testing involves putting the prototype in the hands of actual users and gathering feedback. The methodologies can vary from usability testing, A/B testing, to more in-depth interviews. The selection of test participants is crucial; they should represent the actual user base of the product.

The feedback gathered is then meticulously analyzed. This phase is not just about identifying what users like or dislike, but also about understanding why they feel a certain way. The insights gained from testing are invaluable in refining the design. It's a process of iteration, where the design is continuously improved based on user feedback.

Conclusion: Iteration as a Pathway to Excellence
In UX design, one principle stands out: the process is never truly complete. Even after a product is launched, the cycle of feedback and iteration continues. This ongoing process ensures that the product evolves with the changing needs and preferences of its users.

The UX Design process is a comprehensive and user-centric approach. It emphasizes the importance of empathy, clear definition, creative ideation, tangible prototyping, and rigorous testing. By adhering to these principles, designers can create products that are not only functional but also delightful to use, ultimately leading to experiences that users love and cherish.

Is the process you use at home or at work similar?

Hi! I'm new here..

Ryan VerWey — Sun, 19 Nov 2023 04:12:57 +0000

I’m Ryan VerWey, a mid-level developer with a burgeoning passion in the fields of web development and UI/UX design. With my roots firmly planted in SharePoint and Microsoft Power Platform, I've decided to venture into the dynamic world of web development and the creative realm of UI/UX design.

My journey into this new domain is not just a career shift, but a quest to deepen my understanding and skills in a rapidly evolving digital landscape. Through this blog, I aim to share my experiences, challenges, and the valuable lessons learned along the way.

I believe that growth comes from stepping out of our comfort zones. This transition marks a significant leap for me, from a specialized focus to a broader and more inclusive perspective in technology. My goal is to not only enhance my technical capabilities but also to develop a keen eye for design and user experience.

Stay tuned as I navigate through this exciting phase of my career, where every day is a learning opportunity. I look forward to connecting with fellow enthusiasts, exchanging ideas, and growing together in this journey.