Working with PixiJS V4’s DisplacementFilter

PixiJS LogoIf your new to PixiJS, and like me who love to dissect working demos examples, you’ll find that the best demos are the ones by PixiJS on their website. For filters, check out this demo. Most you’ll find out in the wild on the internet are usually for the older pixiJS versions 1 to 3. And if you haven’t really read the docs over there you might be pulling your hair out trying to do certain things with PixiJS.

We’ll I’m here to get you started with one of the cool filters that come with PixiJS V4 called the Displacement Filter. This filter is the same type we’ve used in 3D application material designs. The Displacement filter uses the measurement of white and black variations of the displacement map(image) to determine its offset view. This offset is by “x” and “y”. So what’s really cool about the “DisplacementFilter” in PixiJS V4 is that you can use different displacement graphics to create all types of effects with this one single filter. The most famous effect for the displacement filter is the underwater look as demonstrated below.

Underwater Effect

So here is the code below

And the displacement map image we used for the water filter
Image for Displacement Filter

Now here is where you can have some fun, try changing out the displacement map image for a different tiled background image. Make sure its a tiled image which means it repeats seamlessly. It also has to be black and white. Hope this helps get you started working with filters and PixiJS V4.

You can download the source files here, if this was helpful to you, please give me a like or share on the article. If you have a comment or question, let me know.

statsOmeter – A jQuery odometer style Statistics Counter Plugin

statsOmeter jQuery Plugin ExampleDisplaying statistic numbers on your website has become quite popular and has been trending since mid-year of 2016. You may have seen a section on a site you scroll to with statistic information like “Projects Tackled – 347” or humorous stats like “Cups of Coffee – 2,547”. Some are static and some animated. These type of stats tend to introduce the performance and human factor of the company and lend to some good marketing points of view that align with info-graphics.

While playing around with some stats Ideas lately, I created a few different types of animated stats displays and out of the 3 I created, statsOmeter was one I wanted to share with the web development community. This little jQuery stats plugin will add an odometer type stats bar to a specific div with a specific class name. A plus to this stats counter is that you can use letter characters as well to spell words as well as adding a happy and sad face via characters ” ) ( :”. Adding letters allows you to also add humor to your stats. Very simple to use and you can change its appearance via CSS to match your website theme.

Here are some cool features about statsOmeter:

  • Supports Letter Characters as well as Numeric
  • Mobile Friendly
  • Animates when scrolled in view
  • Multiple stats support
  • Auto-centered
  • Easy to setup

statsOmeter is free to use, if you like it, please give me a like or share. Get more info and instructions on the statsOmeter page here. You can download it here as well.

BusnHours – A Business Hours Plugin for WordPress

Just about every business displays an open and close hours notice in their store front or on their website. Since this is a common task for me and many web developers to create for clients, a few years back I created a JavaScript/jQuery app that not only displayed the hours, but highlighted the current day of the week and showed an animated “open” notice appended next to that particular day based on the current time the page was visited. This gave a polished and professional look to the site and made it easier for customers to acknowledge if your business was currently open or closed.

Business Hours

Since I’ve had an increase in request over the past few years for WordPress websites, I decided it would be beneficial to create a WordPress plugin version that would not only be super easy to add to the site during development, but would allow my clients to easily change and edit their business hours through accessing its settings page.

busnHours works by retrieving your server time and with your location setting configured, displaying an accurate time that your business is opened. If a visitor to your website is viewing the business hours section of your web page minutes before your open or just before your closed, the notice will change immediately when your business hours time matches the current time your opened or closed. I refrained from using multiple Ajax calls every second to the server to constantly update the app since that can weigh in on your servers CPU or even give issues to WordPress. This gets the server time once and runs a JavaScript clock to power the notification. busnHours can be placed on any page or blog with a simple shortcode.

busnHours only supports businesses hours of operation from 6:00am to 10:00pm. Future updates will support Holidays settings and more customizations. This plugin for a limited time is available as a free download. Eventually it will only be available by either a paid one time fee or annual subscription with support and free updates. For details, info and to download, please visit the busnHours plugin page.

Cool Features

  • Non-live server polling powered by a JavaScript clock using first and only server poll to keep track of time, reduces server load
  • Animated Notice when Open
  • 6 Messages, 3 when your open, 3 when closed. Messages are when open = “Almost Open”, “Just Opened” and “Open Now” Messages when Closed = “Almost Closed”, “Just Closed” and “Closed Now”.
    These messages are shown in a frequency of 15 minutes, at 15 to prior/exact time/15 after time

Business Hours Demo Below

  • SUN Closed
  • MON 9:00 AM - 5:00 PM
  • TUE 9:00 AM - 5:00 PM
  • WED 9:00 AM - 5:00 PM
  • THU 9:00 AM - 5:00 PM
  • FRI 9:00 AM - 5:00 PM
  • SAT Closed

Getting and setting image width with jQuery based on their original size

You may be developing a website where a gallery or portfolio application of photos that will be uploaded in various sizes. Creating responsive CSS for images we typically set a width of 100% and then add a max-width of a specific size such as 1900 pixels to allow scaling for mobile devices. However if your image is below 1900 pixels wide, lets say at 1000 pixels wide, you’ll get an upscale to 1900 pixels wide creating a non-pixel perfect blurry image. A solution if needed with jQuery is to use JavaScript’s ability to get the original images size and auto apply it to the image with a max-width of whatever that image size is. Below is an example of code on how to do so within a a container with a class name of “photos”.



As you can see by code this will get all images within the container using jQuery’s “each” loop and apply their max-width size as an inline style on each image. Of course you’ll need your CSS setup like below as example max-width 1900 pixels. I chose this size since I only develop websites to max fit standard HD resolution. Notice its 1900 not 1920 to allow for 10 pixels of padding on left and right sides of the container(“photos”) or your body tag for mobile:


Your image will abruptly change size after loading, that’s why its best to set an opacity on them at “0” and once the page is loaded add the opacity of “1”. You can animate a fade in with jQuery or even take it a step further and add a loader per image. Typically if your building a web photo application these are things you would do.

Speed is King, Introducing AMP HTML

amp example of speedAMP HTML are web pages designed to load near instantaneously. With mobile devices as the leader in internet access today, Google and many other companies have created the AMP project. Google best explains it as quote; ” For many, reading on the mobile web is a slow, clunky and frustrating experience – but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.”

AMP HTML is a subset of HTML for authoring content pages such as news articles, blogs and products in a way that guarantees certain baseline performance characteristics. If you’re looking to optimize your site or client’s websites for speed. AMP is the way to go. For and introduction to AMP HTML see the video below. For more details see the website.

Custom Christmas eCard

Custom Christmas eCard Example
This year I wanted to create a custom eCard to send to family and friends and came up with a 3D pop-up eCard design. To make it work I relied on getting parameters from the URL link I would send out. After designing and building the eCard. I realized I had quite a few to send it too and created a small app page to create the link to make it easier and thought I’d share this with everyone , so you can also use it. Check it out here, and here is the link for customizing it to send to someone: Merry Christmas! 🙂

mobiTable jQuery Plugin, now available for WordPress!

mobiTable is my first free responsive plug-in for WordPress that automatically rearranges your HTML tables into a much easier to navigate format for mobile devices. You can read more about it here on this post. mobiTable will soon be available at the WordPress Plugin Repository. Below is an example of the mobiTable WordPress plugin adjusted for Mobile.

If you like this WordPress plugin, please give me a like or share. If you have any issues or find a bug, please send me an email to

mobiTable Plugin Mobile Example

ID Name Address Phone Number Email Occupation
01 John 4311 SW 21st Street, Miami Florida, 33144 305-2112 Mechanic
02 Samantha 4001 NW 63rd Street, New York NY, 774232 335-6643 Attorney
03 Fernado 6433 NW 93rd Street, Orlando Florida, 44321 325-4883 Police Officer
04 Bill 2022 Oakland Street, Los Angelas California, 99321 699-5532 Doctor
05 Mary 2311 Sunbay Ave, Carlton North Carolina, 118653 966-2211 Executive Managment
06 Maria 1123 Collins Avenue, Miami Beach, 32211 305-3476 Pilot

mobiTable Plugin

mobiTable Plugin HTML Table Code

mobiTable Plugin Settings

MobiTable WordPress Plugin Features:

  • Multiple table support
  • Custom Trigger Width
  • Table Theme Color Settings
  • Color Chart
  • SVG Arrow Icons

Installation and Setup

Download mobiTable for WordPress Plugin here

DemoBox – a jQuery Plugin-Application for Simple Instructions

Lets face it, instructions accompanied by photos makes it easy for us all to understand how to do something. But even then, I’ve seen instructions that are cramped or cluttered and hard to follow because of the layout. Considering today we have mobile devices that most of us use to get to information, I decided to create a mobile friendly little app that uses a jQuery plugin script I wrote. This little app is small in width and showcases instructions step by step by clicking to the next step or previous step. This removes the clutter and keeps the user focused on that specific step. This is a free to use app/script and is best used for simple instructions. If you like it, please give me a like or share.

See a demo of it here | Download it here

Solving the HTML Table Issue with Mobile Devices

HTML Tables are great for displaying data, but when it comes to showing that data on a mobile phone, there becomes usability issues that seem obtrusive even with some of the solutions some of the developers out there on the Internet have created. Some of these solutions where to have the tables scroll to right to show more of the data on long width tables for mobile devices or small screen sizes or toggle and hide specific sections.

My approach to solving this was to use JavaScript and jQuery scripting languages to create a plug-in that would create a two row table and append the tables header titles to the left of the table and append the first row of data to the right of it using a navigation to show the next and previous rows of data, without having to even scroll the screen. This would enable the table to be mobile friendly hence why I called the plugin “mobiTable”. mobiTable speeds up development and simplifies table issues for developers so they can work faster and smarter. For more info on mobiTable, see the plugin page here.

** Please note that mobiTable is only for raw data tables. Meaning it won’t work with tables with images or HTML tags embedded.