While managed WordPress hosting is suitable for most people, I prefer the flexibility of running my own server. One of the more affordable solutions is Amazon’s cloud-based web service (AWS).
But if you don’t have a deep technical background, getting started with AWS can be overwhelming.
When I first installed WordPress on an AWS micro instance, it kept running out of memory and crashing. Then, when I installed a custom, responsive theme on a larger instance, it was still quite slow.
This guide will provide you a detailed, step by step approach to setting up your WordPress blog at AWS in a high performance, economical fashion using an AWS micro (or small) instance running on Apache. A follow up tutorial covers how to optimize its performance with Varnish Cache and the W3 Total Cache plugin. Using these approaches, I’ve successfully run my own site in the Amazon cloud for the past two years and survived many mentions on Slashdot, BoingBoing and other high traffic sites.
One time someone told me their biggest problem with SVG icons is that they didn’t match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG icons they were sticking with icon fonts. I didn’t think of it at the time, but there is a pretty easy solution for this.
If you’ve ever noticed “that flicker” in WebKit-based browsers while performing certain CSS operations, especially CSS transforms and animations, then you’ve most likely come across the term “hardware acceleration” before.
The CPU, GPU, and Hardware Acceleration
In a nutshell, Hardware Acceleration means that the Graphics Processing Unit (GPU) will assist your browser in rendering a page by doing some of the heavy lifting, instead of throwing it all onto the Central Processing Unit (CPU) to do. When a CSS operation is hardware-accelerated, it usually gets a speed boost as the page rendering gets faster.
I should note that this is not an unsolved problem, and there are many interesting examples of this technique in the wild. However I wanted a simpler solution and I’ve been wanting to write a Sass plugin anyway.
The result of this curiousity is sass-json-vars. After requiring it, this gem allows JSON files to be included as valid @import paths; converting the top level values into any of the Sass data types (strings, maps, lists).
CSS frameworks: you either love ’em or you loathe ’em. Whichever side of the fence you’re on, it’s fair to say that CSS frameworks have had a lot of airplay over the years.
In this talk, we’ll look at why people hate them; where—and if—people are justified in their opinions; what is currently wrong with a lot of CSS frameworks; the merits—if any—of developing your own; and how to build them better.
Nowadays, more and more websites are using animations, whether that be in the form of GIFs, SVGs, WebGL, background videos and so on. When used properly, animation on the web brings life and interactivity, adding an extra layer of feedback and experience for users.
In this tutorial I am going to introduce you to CSS animations; a highly performant way of doing things which is becoming more and more popular as browser support improves.
After taking the time to set a whole bunch of theme options, it’s nice to be able to make a quick backup of your theme settings. Many themes have this functionality built-in, but for themes that don’t, here is a plug-n-play snippet to create a “Backup/Restore Theme Options” page. You can see the snippet in action in the shapeSpace theme.
In an effort to inspire more WordPress theme designers to embrace HTML 5, I am releasing the “H5” Theme Template. The H5 Theme Template is a bare-bones WordPress theme built entirely with HTML 5 and styled with CSS 2.1. As you may know, HTML 5 provides greater flexibility and interoperability than previous markup languages, and enables us to build well-structured themes that are more flexible, interactive, and semantically precise.
Download and Demo
For a “live” demo of the H5 Template Theme, check out our newly revamped DiW Theme Playground, where we will be hosting any themes that we release here at Digging into WordPress.
At the DiW Theme Playground you will find a dropdown menu at the top of the browser window that enables you to preview any of our themes, as well as a download link for whichever theme happens to be active (Chris’ excellent WP Typo is the default active theme).
Using WordPress to build sites like http://plugin-planet.com/, it’s usually necessary to customize the Dashboard by removing some default widgets and adding some of my own. No big deal, but the code required to disable the default widgets seems to evolve along with WordPress. So if you have any sites where you’ve disabled default dashboard widgets, it may be worthwhile to check that the code is still working.
Contact Form 7 is one of the most used free contact form plugins. At the time of this article, it has more than 16 million downloads. I think it is just right to consider it the most used contact form plugin.