Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Mockup Generator in HTML5 with Matrix3D Transforms

free mockup generator

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

internet archive js10k links

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

List Posts by Recently Updated in WordPress

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

how to add new attributes to 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

background processing sample WP plugin for async tasks

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?

replace into versus insert on duplicate key update

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

How to Convert a Bookmarklet to a Chrome Extension

Converting Bookmarklet to 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

EAV to relational model pivot with mysql query

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

FastPivot – Process and Shift JSON data with JavaScript

FastPivot, pivot data with JavaScript

Imagine a table of data, perhaps car data with columns: ID, Model, Make, Color, Age, etc. How do you process this data so that you can answer some simple questions or visualize it with JavaScript charts? Some questions, like “how many cars are red?” can be processed by looking at a count of rows that meet your criteria (rows where column color is red).

Other questions, like “what is the distribution of colors in your data set?”, requires shifting or pivoting the data, as you want to evaluate a specific column instead of rows. Charting will often need this data pivot and doing it optimally is crucial if you are working with a large amount of data on the client side.
Read more

Repeatable Field Creation and Inline Edit with Fromidable Forms

Formidable Forms Repeatable Field PHP

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