Categories
JavaScript Web Development

Lightweight Slider / Carousel: Siema

Previously, i lauded a lightweight carousel, Flickity, but on a current project, i inexplicably ran into an image loading issue that i spent about two hours trying to fix. No luck.

So, throwing my hands up in the air — literally — i googled “lightweight slider carousel” and the top hit was Siema.

Siema describes itself aptly as “a simple and very lightweight slider / carousel plugin written in pure vanilla JavaScript without any dependencies.”

Categories
JavaScript WordPress

Inject JavaScript with WordPress data it can reference using wp_localize_script()

Say you have JavaScript files that rely on images that live in your current theme directory — or elsewhere outside of the domain root — and they’re not loading without hard-coding the URL into your code. Or, you may be developing locally and when pushing to a sandbox or production server, tired of changing the file path depending on the server. You must register the script before calling wp_localize_script() then queueing it. This allows you to …

Categories
Email JavaScript Web Development

How to compress + minify MailChimp’s mc-validate.js for faster loading and better PageSpeed Insight Scores

MailChimp has been far from cooperative with helping developers speed up website loading by simply minifying their mc-validate.js file. There’s a growing thread on Twitter started over two — yes, 2! — years ago!

Here’s what i did to stop receiving terrible grades on GT Metrix and Google’s PageSpeed Insights.

Categories
JavaScript

Flickity JavaScript carousel plugin

I was in desperate need for a functioning yet robust, and most importantly, quick-to-install-and-deploy carousel/slider for a large project i was working on for my job. Perusing my job’s rival-of-sorts website, i dove into their code and learned they used Flickity, which i instantly fell in love with after reading its documentation and API. Several ways to install and to call the carousel. With its built-in options and reliance on CSS, it was easy peasy to …