Data, Maps, Usability, and Performance

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

World Map with D3 Microlibraries and rotated to contain Russia

World Map D3 v4 Microlibraries and Russia Alaska not split

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

Top 10 Free Templates for API Documentation

Templates for API documentation

Do you need to create API docs for your RESTful API? Want to automatically generate API documentation? Today, I am going to share some free templates that are designed to showcase your API. Good documentation is really important so start with a good foundation. These API resources are simple, clean, leverage best practices, and will make your API users happy.
Read more

Online Image Editor and Photo Collage Maker

Online Image Editor

CanvasEdit – the HTML5 Photo Editor and Collage Creator

Recently, a few image editors have been created with HTML5 and Canvas. Today, I decided to build by own Photo Editor by using UI Kit for layout, FabricJS for Canvas manipulation, Color Thief for retrieving a color palette from an image, Spectrum for a color picker and other libraries like Say Cheese for integrating pictures from a webcam and noUiSlider for a nice range slider. Since I have previously covered building Instagram photo filters with HTML5, these are also included in the image editor.
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

Grep, Awk, and Sed in bash on OSX

linux bash scripting osx

In the last couple days I have been messing around with huge log files on OSX bash (or command-line). I have used grep, awk, and sed to manipulate and rewrites these log files. Here are some commands that I found useful to document for the future. If you have never used these bash tools, this might be useful, especially if you are trying to mess around with files that are really big. I’m going to consider sample log file and explain a couple different things you can do with these tools. I am using these tools on OSX and these commands or one-line scripts will work with any Linux flavor.
Read more

D3 Map Starter Kit

D3 Map Framework

I have taken another look at my responsive D3 map and had some time today to fix a few issues and make some enhancements. Normally, I would have updated my last post with the changes, but I wanted to take some time to explain the individual upgrades. Previously, I really focused on creating a world map with D3 that can not only be responsive in terms of screen size but also make that responsiveness work with zoom and pan limits. I added country names and colors to the geo data and included a simple tooltip feature for each country. Now, I am expanding on that with many enhancements, cross-browser fixes, and more simplified code.

Check out the new D3 World Map Template
Here is the updated D3.js v4 World Map Template

Read more

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