DEV Community: Ciprian Popescu

10+ years building WordPress plugins at getbutterfly.com — Some reflections & stats

Ciprian Popescu — Thu, 18 Sep 2025 16:05:40 +0000

Hey everyone — I run getbutterfly.com, where I build & sell WordPress plugins. It’s been over a decade in this business now, and I wanted to share some thoughts + data (because I love numbers) on the WordPress/plugin ecosystem, what’s changed, and why I’m still bullish. Would love to hear others’ experiences too.

A bit about me
I’ve been developing WordPress plugins for 10+ years, covering various niches (security, optimization, UX, etc.).

Over time I’ve seen major shifts: in how people build sites, what they expect from plugins (performance, compatibility, security), how they buy, etc.

Changes over the past 10 years & things I’ve learned
Here are a few patterns I’ve noticed, plus what they mean for someone building plugins:

Expectations on performance & compatibility have escalated

What was acceptable 10+ years ago in terms of speed, code design, plugin conflicts, etc., is no longer working. Users expect lean, well-architected, fast plugins that don’t bog down a site.

Security matters more than ever

With so many sites running WordPress, and so many plugins in play, vulnerabilities (in plugins/themes) are a big risk. Keeping up with security best practices, regular maintenance, and good support is essential, not optional.

Plugin visibility is harder

With tens of thousands of plugins out there, standing out is tough. Good documentation, clean UX, solid marketing, responsive support — all of that makes a big difference.

Freemium / licensing models have become standard

Many plugin users expect at least a free version; premium or paid upgrades must justify their cost clearly (features, stability, support). Licenses, update frequency, add-ons: these all play into what people will pay for.

User expectations around updates / compatibility

WordPress core evolves, PHP versions evolve, hosting environments evolve. Plugins must maintain compatibility and be tested across environments.

What makes getbutterfly.com different / what I focus on

Here are a few things I try to do to stay relevant and deliver value:
I aim to make plugins that are modular and lightweight, so users can activate only the features they need, avoiding “feature bloat.”

Rigorous testing (especially with WP core updates, PHP version changes, conflicts with popular themes/plugins).
Good support/documentation — reducing friction for users.
Transparency on updates and roadmap.
Listening to user feedback & using it to shape future features.

Challenges & what I’m working on

No startup/plugin business is without its struggles. Some of the ones I’ve faced:

Discoverability: Being found in a huge plugin market is hard. Good SEO, marketplace relationships, content & marketing help, but it’s a long game.
Maintenance vs innovation trade-off: spending time fixing bugs, ensuring compatibility takes away from new features sometimes.
Pricing pressures: Many customers are price-sensitive; some expect a lot for free. Balancing what you offer for free vs premium, without devaluing the product, is tricky.
Fragmentation: different hosting, different environment setups, PHP versions, themes — ensuring broad compatibility is tough.

Why I’m still bullish (10 years in & counting)

The massive install base of WordPress means there will always be demand. Even as things evolve, new plugin needs emerge (e.g. performance, SEO, AI, security).

New challenges = new opportunity: as hosting improves, as users demand better speed / mobile performance / security / AI integrations — plugin makers who adapt well can thrive.

The barrier to entry (at least for basic-level plugins) is relatively low compared to building a full app; but the upside (if you build something good, well-supported, and with a loyal user base) remains high.

Community matters: WordPress has a big user/developer community. WordCamps, forums, groups — those help spread the word and improve best practices.

Open question / for the community

What are your go-to strategies for plugin discovery (especially in the crowded free + freemium space)?
How do you balance pricing vs value vs free version limitations?
Anyone else with decade-long plugin experience: what has changed the most for you (in dev tools, user expectations, marketing, etc.)?

Lighthouse Performance Tips & Tricks for Your Website

Ciprian Popescu — Mon, 22 Apr 2024 17:14:16 +0000

This is an exhaustive list of technical tips and tricks that will help improve your page speed and increase your performance score.

DNS Lookup & Connection

Check your DNS records and remove any that you don’t need. Use a DNS server, such as Cloudflare, to improve the DNS lookup speed.

TTFB (Time To First Byte)

Upgrade your server software (Apache, Nginx, Litespeed, IIS) to the latest available version.
Upgrade your server PHP to the latest available version (8+).
Upgrade your server database engine (MySQL, MariaDB, Percona, SQLite) to the latest available version.
Create a static robots.txt file to avoid WordPress initializing every time a bot requests it.
Create a static favicon.ico file to avoid slowdowns every time the browser requests it.
Set up a backup server before taking the steps below.

Response Time, Page Speed & Performance

Upgrade your WordPress plugins to the latest available version.
Upgrade your WordPress CMS to the latest available version.
Upgrade your WordPress theme to the latest available version.
Do not use a redirection plugin, if possible. Set your redirects server-side, in your .htaccess file or your Nginx configuration file.
Make sure your database engine is InnoDB.
Make sure your database encoding/collation is utf8mb4.
Increase your WordPress memory constant to 128M+.
Consider disabling revisions – WP_POST_REVISIONS.
Consider disabling the trash – MEDIA_TRASH and EMPTY_TRASH_DAYS.

See code samples inside your Lighthouse plugin → Tips & Tricks tab.

Assets & Resources

Reduce the number of JavaScript resources – use Google Tag Manager to load all external tracking snippets, analytics and more.
Optimize your theme to load all JavaScript resources in the footer.
Reduce the number of JavaScript resources and CSS stylesheets by cleaning up your plugins, refactoring your website’s functionality or finding alternative plugins.
Reduce the number of JavaScript resources and CSS stylesheets by combining them (either by refactoring your theme/plugins or by programmatically concatenating them).
Minify your JavaScript resources and CSS stylesheets, either manually or by using Cloudflare.
Load your custom fonts locally.
Get rid of all unnecessary font subsets (based on your target audience’s language).
Get rid of all font versions, except for WOFF2.
Use resource hints and early hints.
Use server caching (OPcache, XCache, Varnish, Redis, etc.).
Use a caching plugin.

Prefetching

Because dns-prefetch resolves only the domain name but doesn’t preconnect to the remote server or preload the resource, it requires little bandwidth. However, it can significantly improve DNS latency — the total request-response time between the DNS server and the user’s browser.

You’ll only need to use dns-prefetch when the resource is hosted on a different domain, since you don’t need to resolve your own domain name. dns-prefetch is typically recommended when prefetching domain names for: web fonts, such as Google Fonts or custom CDN fonts, analytics scripts, scripts coming from third-party resources, social media widgets or any widget that loads third-party content via the script tag, resources hosted on a CDN.

Preconnecting

For the most part, you can use the preconnect resource hint for the same things as dns-prefetch. You should choose it only if you are sure the user will request the script, font, stylesheet, or other resource from the third-party server.

Since preconnect exchanges more data, it also needs more bandwidth. So you have to be more careful with it to avoid slowing down the page and wasting your user’s bandwidth with redundant data.

Be careful to not add too many resource hints, as they could quite easily negatively impact performance, especially on mobile.

Check the Using Resource Hints to Optimize WordPress Performance guide.

Content

Get rid of your current page builder or reconsider its usability. Use the native WordPress block editor instead.
Make sure all your images are lazy loaded.
Replace your vector images and/or icons with inline SVG.
Resize and compress your JPEG images.
Use a third-party service (not a plugin) to optimize your images before uploading them.
Remove (or disable) your lazy-loading plugin (or script). Modern browsers now include native lazy-loading.
Check the WordPress Native Settings Optimization guide to squeeze even more speed from your WordPress site.

Error Logging

Stay on top of errors, warnings, and notices as they occur.

See all errors, warnings, and notices in a file generally called debug.log in wp-content folder. If Apache does not have write permissions, you may need to create the file first and set the appropriate permissions (e.g. 0666).

In order for errors to be logged, you need to edit your wp-config.php file.

See code samples inside your Lighthouse plugin → Tips & Tricks tab.

Find your error log (in document root or in wp-content directory):

Example #1: /home/user/example.com/debug.log
Example #2: /home/user/example.com/wp-content/debug.log

Other

The suggestions below might not apply to your website.

Remove Google Analytics and replace it with a lighter solution, such as Active Analytics.
Remove Google reCAPTCHA and replace it with Akismet or a lighter solution.

What do you think of my new website design?

Ciprian Popescu — Tue, 26 Mar 2024 16:40:40 +0000

I have recently updated my website design, and I would like some feedback. What do you think?

https://qbf.ie/

tail.select 1.0.0 Released: Vanilla JavaScript Library for Stylish and Functional (Multi) Select Fields

Ciprian Popescu — Thu, 14 Dec 2023 16:51:22 +0000

The tail.select library is making a comeback, now rewritten in pure, vanilla JavaScript. Say goodbye to complex dependencies and welcome a simple yet powerful tool for enhancing your HTML <select> fields. Version 1.0.0 is here, and it brings a host of features to streamline and beautify your website's (multi) select fields.

What's New?

Vanilla JS, Plain JS, ES6, Modern Browsers: Embrace simplicity with a library that works seamlessly with vanilla JavaScript, plain JS, and is fully compatible with ES6 in modern browsers.

Beautiful (Multiple) Select Field: Elevate the aesthetic appeal of your HTML fields effortlessly.

Awesome Search Function: Enhance user experience with an intuitive search bar that makes finding options a breeze.

Move Selected Options Wherever You Want: Tailor your UI by moving selected options to the desired location.

Over 30 Options & 5 Themes: Customize to your heart's content with a wide array of options and themes, ensuring a perfect fit for your website's design.

Extendable and Translatable Environment: tail.select provides an extendable and translatable environment, allowing for flexibility in your projects.

Hackable with 3 Callbacks & 3 Events: Dive into the library's core functionalities with callbacks and events, making tail.select a versatile tool.

Notable Options

The library comes with an initial set of options, allowing you to fine-tune tail.select according to your project's requirements:

multiTags: Enable or disable tags based on your preference.

multiCounter: Keep track of selected options with the multiCounter feature.

theme: Choose between the 'light' or 'dark' themes to seamlessly integrate with your website's design.

classNames: Add custom classes to tailor the appearance to your liking.

strings: Customize the user interface by modifying strings like "All," "None," "Select an option...," and "Type in to search..."

Search, Descriptions, Tags, Themes, Custom Classes, and Translation

Search: A search field is included in the custom dropdown by default, enhancing the discoverability of options.

Descriptions: Display custom descriptions by adding a data-description attribute to your <select> field <option> elements.

Tags: Enable tags for a more organized and visually appealing selection experience.

Themes: Choose between light and dark themes to match your website's overall aesthetic.

Custom Classes: Add custom classes using the classNames parameter for a tailored appearance.

Translation: Translated strings can now be added directly into the caller function, offering greater control over the language used in the UI.

Conclusion

tail.select is back, and it's still free to use with an MIT License. Upgrade your (multi) select fields with the simplicity and elegance of pure, vanilla JavaScript. Check out the documentation and get started with tail.select 1.0.0 today!

SpeedFactor moves to WP Lighthouse!

Ciprian Popescu — Wed, 19 Oct 2022 17:05:48 +0000

SpeedFactor, as initially developed 3 years ago, is no more. But 90% of the code has been transferred to my WP Lighthouse plugin (due to the fact that 90% of the existing websites were powered by WordPress).

The code has been simplified, open-sourced and integrated into the plugin. The business model has also changed, and it's now easier to pay for updates and support (or not). The plugin is automatically kept up-to-date from a private GitHub organization.

From a business point of view, I feel like this is a good change. Less code maintenance gives me more time for feature updates and client support.

Why less maintenance?

Because WP Lighthouse uses the #WordPress infrastructure - WPaaF (WordPress As A framework).

If you are interested in migrating to WP Lighthouse or giving the plugin a test-drive, check out the link below:

https://getbutterfly.com/

BOTS: Mischievous Pixel Avatars

Ciprian Popescu — Mon, 26 Sep 2022 14:57:23 +0000

This year I have coded and launched a small app (available on Google Play Store and as a PWA), where you can generate an avatar (looking like a square bot), and give it a name, a rarity/probability and a class. The name is BOTS.

It started small, mostly in JavaScript and Canvas. Later, a database has been added, but things didn’t go according to plan, and I switched from PouchDB to SQLite3 to SleekDB and then back to PouchDB. When the number of bots grew from a few to a few hundreds, I decided to go with a proper PHP/MySQL implementation and a membership system. This is how BOTS 2 came to life – a user-generated Bot app, with no constraints, no microtransactions, no time limit.

I am not looking to keep the Google Play Store app any more, so I will turn this into a website (also PWA-ready), with full membership capabilities, user ranks, badges, points, profiles and more.

The logic behind the main Bot generation is based on random settings, while some of them are linked. There are custom eyes, custom textures, custom colours, random elements and items, random names, random classes and random rarities.

This is how BOTS started. We moved all the code into a Canvas element and started building everything in there, with zero HTML or CSS. BOTS evolved, and we got around 10 different parameters to play with and randomize their values. As my son wanted to be able to play with these parameters, I exposed them all as HTML checkboxes and dropdowns.

Fast-forward a few weeks, I had a fully working PWA and a native Google Play app on my phone. As the “requirements” evolved, I needed to save the generated Bots in a small database. So, as I was saying in my previous article, I switched from PouchDB to SQLite3 to SleekDB and then back to PouchDB. When the number of Bots grew from a few to a few hundreds, I decided to go with a proper PHP/MySQL implementation and a membership system.

Fast-forward this week, I have a fully working website with a membership system and a dynamic Bot generation system. There are badges, texture packs, and upcoming trading and collection features.

One of the features under heavy development is a parameter-based generation system with lots of variables. And I mean lots.

So, finally, here it is, the BOTS website – Iron Carnival: BOTS.

I wrote more about the process here – BOTS v2: Development Update.

Code Golfing Tips & Tricks: How to Minify your JavaScript Code

Ciprian Popescu — Tue, 09 Aug 2022 14:22:16 +0000

If you are into JavaScript code golfing or just looking to minify your code, here’s a collection of tips and tricks to help you understand JavaScript intricacies and make your code shorter.

What is Javascript Golfing?

JavaScript golfing is the process of writing the smallest amount of JavaScript code to do something awesome. It tests your ability to reduce, reuse, and recycle for the purpose of achieving the tiniest footprint possible.

Why and when should minified code be used?

The purpose of code golfing is to test one’s abilities, during challenges. That said, you should not use techniques like this in your normal code, as it compromises readability. Ideally, you should only use these tricks during a challenge.

As the article is way too long, here's a link to the original article:

Code Golfing Tips & Tricks: How to Minify your JavaScript Code

Quick tutorial: JavaScript Form Validation

Ciprian Popescu — Mon, 04 Jul 2022 15:55:42 +0000

JavaScript Form Validation

This JavaScript code snippet adds inline validation to any form field (input, select and textarea).

Match an element against a given pattern and add a visual hint:

function cgPatternMatch(element, pattern) {
    if ((element.value).match(pattern)) {
        cgToggleError(element, 'valid');
    } else {
        cgToggleError(element, 'invalid');
    }
}

Match an element against a given value:

function cgValueMatch(e) {
    return (e.value !== '') ? true : false;
}

Check if email and email confirmation elements match and add a visual hint:

function cgEmailValidate(e1, e2) {
    let pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    if (
        e1.value === e2.value &&
        pattern.test(e1.value) &&
        pattern.test(e2.value)
    ) {
        cgToggleError(e2, 'valid');
    } else {
        cgToggleError(e2, 'invalid');
    }
}

Match an element against a given pattern (based on validation type) and add a visual hint:

function cgFormValidate(element, type) {
    if (type === 'alpha') {
        let pattern = /^[a-zA-Z\-'.\s]+$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'numeric') {
        let pattern = /^[0-9]{1,10}$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'alphanumeric') {
        let pattern = /^[,'a-zA-Z0-9\-\s]+$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'date') {
        let pattern = /^[,'0-9\/\s]+$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'email') {
        let pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'dropdown') {
        if (element.value === '') {
            cgToggleError(element, 'invalid');
        } else {
            cgToggleError(element, 'valid');
        }
    }
}

Next, custom data validation needs some additional HTML parameters and an onload() event.

Read more about custom JavaScript form validation and implementation on my development blog.

Quick tip: How I optimized my WordPress website using 6 lines

Ciprian Popescu — Mon, 04 Jul 2022 14:47:51 +0000

I optimized my WordPress website using 6 lines in my .htaccess file.

This will only work with HTTP/2 websites (I suppose most of them are in 2022).

Having tested my website with WebPageTest and GTMetrix, I noticed the same render-blocking behaviour for 6 files:

2 CSS files (one mine, one WordPress')
1 JavaScript file
3 font files (.woff2)

The solution was to use early hints (only available in Chrome 103, which is the bulk of my audience).

Here's what I put in my .htaccess file, in the root of my website:

H2PushResource /wp-content/themes/my-theme/base.css?ver=6.6.2
H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=6.0
H2PushResource /wp-content/themes/my-theme/js/whiskey-functions.js?ver=6.6.2

H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-regular.woff2
H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-medium.woff2
H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-bold.woff2

The only caveat here, and the most important one, is that I needed to put the links exactly the way they are loaded, and that is including the version parameter.

That means that whenever I want to update my theme (or WordPress), I need to update my .htaccess file and change the version number.

If you want to see how fast it is, check out https://getbutterfly.com/ and browse a few pages. Everything loads almost instantly.

Question: How can I improve views on my ad networks (CPM)?

Ciprian Popescu — Mon, 04 Jul 2022 14:31:08 +0000

I have a developer blog with lots of technical articles – the code to text ratio is 4 to 1. I have a pretty low CTR rate, and I have 90% desktop visits vs 10% mobile visits. I have always assumed that my website's audience is more “desktop-inclined” as the mobile version is highly optimized.

I currently use CarbonAds and Ethical Ads, both with similar earnings (so I can't quit one over the other).

What are my options here (other than just to increase my traffic)?

If relevant, here is a link to my website – getButterfly.com

A JavaScript Slider in 8 Lines

Ciprian Popescu — Thu, 31 Mar 2022 21:52:43 +0000

In this post we’ll build a minimal JavaScript slider, with no dependencies. The smallest, actually, without the actual slides’ HTML content: 8 lines of JavaScript.

Building a slider or a text rotator shouldn't use an insane amount of JavaScript and it should leverage modern CSS as much as possible.

The trick in this tutorial is matching CSS animation timing with the JavaScript setInterval() value.

This is what we’ll build:

Let’s start with the HTML code, which, in this case, is one <div> element:

<div id="slider--text"></div>

We will populate this element later using JavaScript.

Styling is optional, but, for the sake of this tutorial, I styled the slider to center align the content, both vertically and horizontally. I have also used a basic animation where I added opacity and a transform property.

.fade-in {
    animation: fade 4s infinite;
}

Note how my 4 second animation will match the 4000 milliseconds in the code below.

Next, we add the JavaScript "sliding" functionality by checking if the element exist, and, if it does, we create an array of strings to slide. Note that you can use HTML.

Next, we create the slider by looping through the slides, and replacing the HTML inside the #slider--text element with the slide content. That is all!

Next, we call the slider so that it runs immediately, and then we call it every 4 seconds using a setInterval() function.

The gist of the JavaScript code is below:

const slider = () => {
    document.getElementById("slider--text").innerHTML = slides[i];
    document.getElementById("slider--text").classList.add('fade-in');

    (i < slides.length - 1) ? i++ : i = 0;
};

setInterval(slider, 4000); // Slide every 4 seconds

Check out the JavaScript code for a full breakdown and a slider demo.

I created a draggable carousel with momentum scrolling and mobile support using Vanilla JavaScript

Ciprian Popescu — Thu, 21 Oct 2021 11:24:27 +0000

A few weeks ago I saw a really nice carousel on the Stripe blog. So I decided to replicate it and integrate it with WordPress. Here are my steps.

See a demo on my homepage here - https://getbutterfly.com/

The WordPress Loop

I am getting the last 10 posts in the JavaScript category, I am setting up a counter and changing background colours based on this counter.

<?php
function whiskey_carousel() {
    $args = [
        'post_status' => 'publish',
        'post_type' => 'post',
        'posts_per_page' => 10,
        'category_name' => 'javascript'
    ];

    $featuredQuery = new WP_Query($args);

    $colours = [
        '#02bcf5', '#0073e6', '#003ab9', '#635bff', '#002c59', '#09cbcb',
        '#02bcf5', '#0073e6', '#003ab9', '#635bff', '#002c59', '#09cbcb',
    ];
    $i = 0;

    $data = '<div class="whiskey-cards">';

        if ($featuredQuery->have_posts()) {
            while ($featuredQuery->have_posts()) {
                $featuredQuery->the_post();

                $postID = get_the_ID();
                $excerpt = html_entity_decode(wp_trim_words(get_the_excerpt(), 32));

                $data .= '<div class="whiskey-card" style="background-color: ' . $colours[$i] . ';">
                    <h3><a href="' . get_permalink($postID) . '">' . get_the_title($postID) . '</a></h3>
                    <p class="whiskey-card--content">' . $excerpt . '</p>
                    <p class="whiskey-card--link"><a href="' . get_permalink($postID) . '">Learn more <svg class="HoverArrow" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><g fill-rule="evenodd"><path class="HoverArrow__linePath" d="M0 5h7"></path><path class="HoverArrow__tipPath" d="M1 1l4 4-4 4"></path></g></svg></a></p>
                </div>';

                $i++;
            }
        }

    $data .= '</div>';

    return $data;
}

add_shortcode('whiskey-carousel', 'whiskey_carousel');

The JavaScript Code

The JavaScript features momentum scrolling (mouse wheel) and (almost) native HTML dragging behaviour. The dragging is also available to mobile devices, as the content is overflowing horizontally.

document.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('.whiskey-cards')) {
        // Slider dragging
        const slider = document.querySelector('.whiskey-cards');
        let isDown = false;
        let startX;
        let scrollLeft;

        slider.addEventListener('mousedown', (e) => {
            isDown = true;
            slider.classList.add('active');
            startX = e.pageX - slider.offsetLeft;
            scrollLeft = slider.scrollLeft;
            cancelMomentumTracking();
        });

        slider.addEventListener('mouseleave', () => {
            isDown = false;
            slider.classList.remove('active');
        });

        slider.addEventListener('mouseup', () => {
            isDown = false;
            slider.classList.remove('active');
            beginMomentumTracking();
        });

        slider.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - slider.offsetLeft;
            const walk = (x - startX); //scroll-fast
            var prevScrollLeft = slider.scrollLeft;
            slider.scrollLeft = scrollLeft - walk;
            velX = slider.scrollLeft - prevScrollLeft;
        });

        // Momentum 
        var velX = 0;
        var momentumID;

        slider.addEventListener('wheel', (e) => {
            cancelMomentumTracking();
        });

        function beginMomentumTracking() {
            cancelMomentumTracking();
            momentumID = requestAnimationFrame(momentumLoop);
        }

        function cancelMomentumTracking() {
            cancelAnimationFrame(momentumID);
        }

        function momentumLoop() {
            slider.scrollLeft += velX * 2;
            velX *= 0.95;
            if (Math.abs(velX) > 0.5) {
                momentumID = requestAnimationFrame(momentumLoop);
            }
        }

        // Scroll
        const scrollContainer = document.querySelector(".whiskey-cards");

        scrollContainer.addEventListener("wheel", (evt) => {
            evt.preventDefault();

            window.requestAnimationFrame(() => {
                scrollContainer.scrollTo({ top: 0, left: scrollContainer.scrollLeft + (evt.deltaY * 2), behavior: "smooth" });
            });
        });
    }
});

The CSS Style

And finally, there are lots of opinionated styles below, so make sure you get what you need.

.whiskey-cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;

    padding: 48px 48px 0 48px;

}
.whiskey-cards::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
}
.whiskey-cards::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgba(0, 0, 0, .5);
    background: linear-gradient(90deg, #02bcf5, #0073e6, #003ab9, #635bff);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    border-radius: 16px;
    opacity: .5;
}
.whiskey-cards:hover::-webkit-scrollbar-thumb {
    opacity: 1;
}

.whiskey-card {
    display: flex;
    flex-direction: column;
    min-width: 244px;
    flex-basis: 244px;
    border-radius: 16px;
    margin: 8px;
    padding: 16px;
    box-shadow: 0 -16px 24px rgb(0 0 0 / 5%);
    color: #ffffff;

    transition: all 150ms cubic-bezier(0.215,0.61,0.355,1);
}
.whiskey-card:hover {
    background-color: #0a2540 !important;
    transform: scale(1.04) translateY(-16px);
    box-shadow: 0 -16px 24px rgb(0 0 0 / 10%);
}
.whiskey-card h3 {
    padding-top: 0;
    line-height: 1.35;
}
.whiskey-card .whiskey-card--content {
    line-height: 1.5;
    font-size: 15px;
    font-weight: 300;
}
.whiskey-card .whiskey-card--link {
    line-height: 1.5;
    font-size: 15px;
    font-weight: 700;
    opacity: .7;
    margin: auto 0 0 0;
}
.whiskey-card h3 a,
.whiskey-card .whiskey-card--link a {
    color: #ffffff;
}
.whiskey-card .whiskey-card--link a svg {
    --arrowSpacing: 5px;
    --arrowHoverTransition: 150ms cubic-bezier(0.215,0.61,0.355,1);
    --arrowHoverOffset: translateX(3px);
    --arrowTipTransform: none;
    --arrowLineOpacity: 0;
    position: relative;
    top: 1px;
    margin-left: var(--arrowSpacing);
    stroke-width: 2px;
    fill: none;
    stroke: currentColor;
}
.HoverArrow__linePath {
    opacity: var(--arrowLineOpacity);
    transition: opacity var(--hoverTransition,var(--arrowHoverTransition));
}
.HoverArrow__tipPath {
    transform: var(--arrowTipTransform);
    transition: transform var(--hoverTransition,var(--arrowHoverTransition));
}
.whiskey-card:hover .HoverArrow__linePath {
    --arrowLineOpacity: 1;
}
.whiskey-card:hover .HoverArrow__tipPath {
    --arrowTipTransform: var(--arrowHoverOffset);
}

I wrote about this and other JavaScript carousels and sliders here.