Mockup Generator in HTML5 with Matrix3D Transforms

A while ago, I played around with a cool Perspective Transformation using SVG and matrix3d CSS transform. It made sense to turn it into a mockup generator like Magic Mockups or PLaceIt. But, I ran into some issues when overlaying an SVG with matrix3d transforms on HTML5 canvas. I found an JSfiddle example of just using HTML5 CANVAS and transformed it into a full mockup generator.
Read more

Rediscover Great Content with Internet Archive

Sometimes I go to my saved links and the website is no longer there or it has been parked, sold, or transformed into another project. This has recently happened when I wanted to revisit a neat air traffic controller game called Air Strike (notice the link goes to Wayback Machine). This game was submitted to the 10K Apart competition where participants show off some amazing web experiences written in under 10k of JavaScript code. It looks like the competition is happening again but the old demos are all gone.

Thanks to the Internet Archive, you can find a lot of static content that once existed and today I want to show 20 amazing JavaScript projects from the older JS10k competition that you can still check out (Some of these require clicking “Load Unsafe Scripts”):
Read more

Sort WordPress Posts by Modified Date using a URL Param

After updating a few older articles on this blog I have realized that it would be useful to provide a display where all my posts are sorted by last modified date instead of created date. I imagine it would just be a link that someone can click and it would change the WP query so that recently updated posts are displayed in descending order. Everything else stays the same. You can see it in action on my homepage and today I will cover how you can do that with two simple WordPress functions.
Read more

Managing and Displaying New Fields for WordPress Users

WordPress provides a lot of different hooks that allow you to expand on user management capabilities. You can easily add a new field or attribute for any user and make it editable in the user profile. You can restrict the edit mode to only Administrators and you can visualize any of these new user data points in the main Admin Users table.

So, today, I will write a quick WP Plugin that adds a new user field called credits to all users, which can be updated by Admins in the user profile. The WordPress plugin will also display that field in the Users table along with a new read only field that captures users last login date and time.
Read more

WordPress Plugin with Background Process, Queue, and Debugging

WordPress Plugins are often used to run a large process in the background like importing, exporting, bringing data from other APIs, pushing data out, and other tasks that should run asynchronously. How do you do that? TechCrunch came out with wp-async-task and WP Background Processing extended that by adding the ability to queue tasks. The author already included a good sample plugin and article but I wanted to see if I can write a more basic example. So, today, I will create a WordPress plugin that uses WP Background Process to queue and run PHP tasks in the background.
Read more

How to insert or update multiple items in MySQL and WordPress?

You have a table with some data, lets say it is user information with emails, names, ages, etc. Now you need to insert 10 more rows of data but you don’t know if the 10 new rows are for new users or if they are attributes for users you already have in the database. This is a very common scenario where you need to figure out if you should update or insert.
Read more

World Map with D3 Microlibraries and rotated to contain Russia

It has been a while since I released the D3 Map Starter Kit and a lot has changed. The 4.0 version of D3 is modular, decentralized, and split into small libraries that you can use independently. It has changed some of the APIs so I have updated the World Map Template to work with D3 version 4, but how do we build a map with just the D3.js micro-libraries?
Read more

How to Convert a Bookmarklet to a Chrome Extension

Bookmarklets, or the ability to execute your own JavaScript code on any page, allows you to customize your browsing experience in many ways. A while ago I wrote some JS code that would simply remove all content from any page and only show images with zoom on click functionality. It works well as a bookmarklet but I wanted to see how easy it is to package this into a Chrome Extension. I am doing this for fun but there are some strong reasons like access to cross domain resources, access to network requests, and ability to share with others via the Chrome Store.

Here are some simple steps that show how to convert JavaScript code into a Chrome Extension
Read more

Using MAX and CASE to pivot MySQL data stored in EAV Model

Last week, I covered pivoting tabular data in JavaScript. But, often times, data is not stored like a CSV or excel sheet in a database. When flexibility is needed to cover potential future changes, like adding many new columns or removing old ones, we often see the EAV model being used to store data.

Consider the previous example of storing car data in rows with columns: id, make, color, and age. If you are just adding more rows, this works well. But, if you will be adding an uncertain number of new columns in the future (model, size, etc), or removing columns, it might make sense to use the EAV model.
Read more

Repeatable Field Creation and Inline Edit with Fromidable Forms

Last year I wrote an article on Gravity Forms and now I want to follow up with something on Formidable Forms. Instead of doing a comparison between these two WordPress plugins, I will write about two problems that I have encountered with FormidableForms and explain how I have resolved them. The first one is based on the backend, PHP code that will create repeatable fields inside a form and the second one goes into the front end, JavaScript code that helps hooking into “in-place” edit.
Read more