WordPress plugins, JavaScript tutorials and code wrangling - getButterfly_Travel & Tourism

getButterfly Bots 10 Years JavaScript JS Learn JavaScript Learn JavaScript in simple and easy steps. JavaScript Tutorials Tutorials, code snippets and examples. tail.select.js Beautiful, functional and extensive multiselect. RoarJS A zero-dependency, alert/confirm replacement. DragonflyJS Vanilla JavaScript sorting, dragging and dropping. WordPress WordPress WordPress Plugins Professional, high-quality plugins for WordPress. Blog Knowledge Base More More Image Compressor Compress and optimize your PNG/JPG images. NEW LegacyLooking for something specific? Try here. Privacy Policy LighthouseWordPress Performance PluginTrack your website performance over time and keep track of how it’s doing and get tips on what to improve — no coding required.NEW: SpeedFactor is now part of Lighthouse!Unlimited automated page speed monitoring & tracking.View FeaturesBuy Now? Quick Links Read the Blog Why, how-to & code snippets and tutorials Find a WordPress Plugin Free and premium WordPress plugins Learn JavaScript Learn JavaScript by example ? Featured CanvasFeatured New Canvas: An Awesome Introduction Tuesday, April 12, 2022 — 135 Views This is a Canvas programming introductory series: Canvas Part 1: IntroductionCanvas Part 2: Transforms and TransparencyCanvas Part 3: Shadows and Gradient FillCanvas Part 4: Inserting Images and TextCanvas Part 5: Interactive ShapesCanvas Part 6: Animation TheCanvas APIprovides a means for drawing graphics viaJavaScriptand theHTMLelement. Among other things, it can be used for animation, game graphics, […] [...] Featured JavaScript Articles How to create a simple JavaScript percentage graph (or chart) This small JavaScript snippet creates percentage graphs out of raw (array) data. Just input the name/value pairs of the involved graph elements, and leave the rest to the snippet. The values can… Learn more JavaScript shortcuts for TRUE and FALSE Here’s a neat trick if you’re into micro-optimization. JavaScript compressors and minifers are used to make JavaScript code smaller and, usually, unreadable. Compressing JavaScript Code Compressing this JavaScript code: Results in this… Learn more How to create time constants in JavaScript in a performant way A recent project of mine required time constants, and instead of opting for an additional library for just 10 or 20 lines of code, I wrote my own. Here is the first… Learn more How to create a minimal JavaScript slider with CSS transitions A JavaScript Slider in 8 Lines 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. This… Learn more Vanilla JavaScript table date sorting Say we have a table with dates, in the following format: We want to sort this table dynamically based on the date column. Here is the table structure (we’ll keep it simple):… Learn more Tiny confirmation modal dialog in Vanilla JavaScript A new addition to my Thin UI library, a much needed modal dialog, this script is tiny and it works with anything you can throw at it. It’s written in Vanilla JavaScript… Learn more How to add a top bar countdown for your next product sale You can (probably) see this top bar right now, with a nice 30% off sale for my WordPress Lighthouse plugin. And this is how I built it, without using any eCommerce plugin.… Learn more How to Create a Draggable Carousel using Vanilla JavaScript A few months ago I added a new, fancy JavaScript carousel to my homepage. It looked and behaved great, but it caused a massive CLS (Cumulative Layout Shift) score and Google was… Learn more Canvas JS: Big Ball of Particles For a while now, I had this animated, constantly exploding ball of particles on one of my landing pages. Built using JavaScript and Canvas, it was a nice addition (read eye-candy) to… Learn more JavaScript Drag & Drop Here’s a nice list of plain JavaScript dragging and dropping solutions. They are minimal, as they serve as proof of concept, and they can be easily extended. Solution #1: JavaScript Card Sorting… Learn more ️‍Featured PluginActive Analytics (WordPress 5+, PHP 7+, Automatic Updates)WordPress Plugin€29,99€19,99Buy PluginMore Free & Premium WordPress PluginsProfessional, high-quality plugins for WordPress, WooCommerce, Analytics, Site Speed and more. Page speed optimization plugins, SEO plugins, image gallery plugins, eCards, Lighthouse and more.See the PluginsPopular Articles Generate HTML List From JavaScript Array Client-Side JavaScript Pagination How to show an outdated browser alert on Internet Explorer 11 How to Get and Set Query Parameters From URL How to Create a Price Range Slider Using Vanilla JavaScript How to Build a Vanilla JavaScript Slider in Less Than 100 Lines The Ultimate Post-Launch Checklist for Your New WordPress Website How to Change Page Title Using JavaScript Google Sans How and why I added a circle following my mouse pointer Canvas Tuesday, April 12, 2022 Canvas: Animation This is a Canvas programming introductory series: Canvas Part 1: Introduction Canvas Part 2: Transforms and Transparency Canvas Part 3:… Canvas Tuesday, April 12, 2022 Canvas: Interactive Shapes This is a Canvas programming introductory series: Canvas Part 1: Introduction Canvas Part 2: Transforms and Transparency Canvas Part 3:… Canvas Tuesday, April 12, 2022 Canvas: Inserting Images and Text This is a Canvas programming introductory series: Canvas Part 1: Introduction Canvas Part 2: Transforms and Transparency Canvas Part 3:… Canvas Tuesday, April 12, 2022 Canvas: Shadows and Gradient Fill This is a Canvas programming introductory series: Canvas Part 1: Introduction Canvas Part 2: Transforms and Transparency Canvas Part 3:… Canvas Tuesday, April 12, 2022 Canvas: Transforms and Transparency This is a Canvas programming introductory series: Canvas Part 1: Introduction Canvas Part 2: Transforms and Transparency Canvas Part 3:… CanvasFeatured Tuesday, April 12, 2022 Canvas: An Awesome Introduction This is a Canvas programming introductory series: Canvas Part 1: Introduction Canvas Part 2: Transforms and Transparency Canvas Part 3:… JavaScript Monday, April 11, 2022 How to create a simple JavaScript percentage graph (or chart) This small JavaScript snippet creates percentage graphs out of raw (array) data. Just input the name/value pairs of the involved… JavaScript Friday, April 8, 2022 JavaScript shortcuts for TRUE and FALSE Here’s a neat trick if you’re into micro-optimization. JavaScript compressors and minifers are used to make JavaScript code smaller and,… JavaScript Thursday, April 7, 2022 How to create time constants in JavaScript in a performant way A recent project of mine required time constants, and instead of opting for an additional library for just 10 or… Blog Friday, April 1, 2022 Grizzy: How to create a Grid Gallery using modern CSS In this article, we are going to create a grid gallery using CSS only, more precisely Flexbox CSS. In the… BlogFeaturedJavaScript Thursday, March 31, 2022 How to create a minimal JavaScript slider with CSS transitions A JavaScript Slider in 8 Lines In this post we’ll build a minimal JavaScript slider, with no dependencies. The smallest,… BlogFeatured Thursday, March 24, 2022 Deep Dive into CSS Grid This tutorial will dive deep into the CSS Grid Layout exploring almost all properties and features. In the end, you… Canvas Thursday, March 24, 2022 Canvas: Strange, Creepy Cables A while ago I was playing with some basic trees drawn in Canvas using JavaScript. The longer I played, the… Canvas Thursday, March 24, 2022 Canvas: Pathfinding Breadth First Search (BFS) Algorythm Breadth First Search (BFS)is an algorithm for traversing an unweighted Graph or a Tree. BFS… Canvas Monday, March 21, 2022 Canvas: Circles & Optical Illusions Here is another experiment in my Canvas series. This time, I have 2 sets of circles being generated, one set… Canvas Monday, March 21, 2022 Canvas: 2D Waves This is the second Canvas visualization I’m experimenting with. The first one was a Julia fractal animation. Here’s some simple… Canvas Monday, March 21, 2022 Canvas: Julia Fractal Animation While working on my Canvas Bots project, I experimented a lot with Canvas generative art. There’s a lot of potential… BlogJavaScript Tuesday, March 8, 2022 Vanilla JavaScript table date sorting Say we have a table with dates, in the following format: We want to sort this table dynamically based on… BlogFeaturedJavaScript Tuesday, March 8, 2022 Tiny confirmation modal dialog in Vanilla JavaScript A new addition to my Thin UI library, a much needed modal dialog, this script is tiny and it works… BlogWordPress Tuesday, March 8, 2022 How to completely remove Post SMTP logged emails How to completely remove Post SMTP logged emails and session transcripts Post SMTP is an awesome WordPress plugin, but I… BlogFeaturedWordPress Thursday, January 6, 2022 Lighthouse: Rapidfire Updates This year brought one major update and one minor update for my Lighthouse WordPress plugin. The entire codebase has been… BlogJavaScript Thursday, November 25, 2021 How to add a top bar countdown for your next product sale You can (probably) see this top bar right now, with a nice 30% off sale for my WordPress Lighthouse plugin.… Blog Tuesday, November 9, 2021 Active Analytics Update: v2.1.0 I have just released an update version of the Active Analytics WordPress plugin to fix 2 issues: Issue #1: Data… Blog Monday, November 8, 2021 How to scrape content from Meetup.com using PHP One of my recent projects involved creating WordPress posts from Meetup.com events. As the API is in beta state and… getButterfly is a personal web development blog in Dublin, Ireland. Privacy Policy Terms of Service Support JavaScript Legacy About getButterfly.com Knowledge Base Buy me a coffee @CodeCanyon @WordPress @Jetpack Image Compressor NEW — Compress and optimize your PNG/JPG images. Copyright ©2005-2022 getButterfly. All Rights Reserved. .wp-container-1 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;align-items: center;}.wp-container-1 > * { margin: 0; }.wp-container-2 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;align-items: center;}.wp-container-2 > * { margin: 0; }.wp-container-3 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;align-items: center;}.wp-container-3 > * { margin: 0; }