W-Shadow.com

I wanted to familiarize myself with the much-touted canvas element, so I used it to build an interactive celtic knot generator/editor. Give it a try.

Launch the celtic knot generator.

Note: Requires a fairly modern browser.

Instructions

When you first load up the knot generator, you will see a 10×10 grid filled with the default cross-hatch pattern. Click on one of the red or blue control nodes to select it. Then click on another node of the same color to make a cut between those nodes. Click the same nodes again to remove the cut. Note that you can only create horizontal and vertical cuts, not diagonal ones.

Keep making more cuts to create your own celtic knot. Experiment with the cell size, string color and other settings. Once you’ve found a combination you like, you can download the resulting knot by clicking the “Download as PNG” button.

If you want to start over, click the “Reset pattern” button to go back to the default cross-hatch pattern. Alternatively, click “Randomize” to create a random symmetrical knot with the current settings.

Screenshots

A screenshot of the knot editor interface:

A basic example knot:

A more complex knot:

Setting the stroke color to white produces a different visual style:

Browser Compatibility

Tested in:

• Chrome 19
• Opera 11.62
• Firefox 11.0 (no HTML5 sliders)
• Internet Explorer 9 (no HTML5 sliders)

Somewhat surprisingly, Firefox turned out to have better canvas rendering performance than Chrome. On my system, setting the grid size to 40×20 and quickly dragging the hue selector in the color picker produced noticeable lag in Chrome, but was perfectly smooth in Firefox. Of course, that’s hardly a scientific test.

Possible Improvements

• Optimization.  Right now, the script is not optimized at all and can sometimes spike the CPU even on a relatively powerful system. It should be possible to improve the rendering speed considerably by, for example, caching and re-using identical image tiles instead of drawing the entire knot from scratch every time. Another thing you could do is limit how often the knot is regenerated when the user drags the size slider(s). Right now, dragging a slider can generate hundreds of image updates and cause massive lag.
• Add the ability to save/load knot patterns and link to saved knots. Should  be easy enough – just stick the pattern data in the URL #anchor.
• Add export to SVG.
• Refactor the renderer. For example, the tile drawing functions could be made simpler by treating cell size as a constant and scaling-up to the actual size with canvasContext.scale().

Final Thoughts

Overall, the canvas element turned out to be rather pleasant to work with.  The API makes sense and is reasonably intuitive. It also reminds me of Processing, which I have used several times before. The MDN canvas tutorial was very helpful for learning the basics.

Credit goes to Yusuke Kamiyamane  for the color picker icon and Anton Lopyrev for the Java-based knot generator that served as an inspiration for the UI.

You’ve probably seen the small notification bubble that shows up in the Dashboard menu when a new update is available. Here’s how you can add a menu bubble to your own custom menu:

function add_menu_with_notification_bubble() {
	$bubble = sprintf(
		' <span class="update-plugins"><span class="update-count">%d</span></span>',
		42 //bubble contents
	);
	add_dashboard_page(
		'Example Menu',
		'Example Menu' . $bubble,
		'read',
		'example-menu-item'
	);
}
add_action('admin_menu', 'add_menu_with_notification_bubble');

The resulting menu will look like this:

Plugins are usually loaded and executed along with the rest of WordPress. However, since each plugin is physically just set of .php, .css and .js files, it is also possible for someone to bypass the normal load order and execute the plugin files directly.  They just need to type the right URL in the address bar.

Security-wise, this is dangerous for two reasons:

• Most plugins are not designed to be accessed in this way and will simply crash. The error message, if any, can disclose sensitive information about your site.
• Most plugin developers don’t expect anyone to access the plugin .php files directly. Doing so may trigger a dangerous bug or vulnerability that they haven’t tested for.

While the chances of either happening are admittedly fairly slim, it doesn’t hurt to safe-guard your site from this type of attack. Luckily, disabling direct browser access plugin .php files is very easy. Just create a text file named “.htaccess” in your /wp-content/plugins directory and place this code in the file:

<FilesMatch "\.php$">
	Order deny,allow
	Deny from all
</FilesMatch>

Now anyone who tries to load a plugin PHP file in their browser will now get a “Forbidden” error.

A word of warning

This will break some plugins. While most plugins only need their CSS, JS and image files to be accessible via the web browser, a handful also rely on .php files being directly accessible (e.g. for AJAX or dynamically generated CSS).

If you find out that one of your plugins doesn’t work, create a .htaccess file in that plugin’s directory and place the following code in the file:

<FilesMatch "\.php$">
	Order deny,allow
	Allow from all
</FilesMatch>

This will re-enable browser access to .php files for just that directory.

WordPress transients are very similar to DB options but they also support expiration times. The Transients API documentation states:
Our transient will die naturally of old age once $expiration seconds have passed since we last ran set_transient()
What you might not know if you haven’t explored the source code of the [...] Continue Reading…

Now that spring has arrived (at least in the Northern Hemisphere), it is an excellent time to clean up and decruft your WordPress site. In this post I will show you a number of plugins and techniques that you can use to do just that.

Note: Back up your database [...] Continue Reading…