Net Tuts

1. Installing WordPress in the Amazon Cloud – Tuts+ Code Tutorial

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.


2. Cascading SVG Fill Color | CSS-Tricks

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.

Dev Opera

3. Dev.Opera — Everything You Need to Know About the CSS will-change Property

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.


4. Sharing Data Between Sass and JavaScript with JSON | Viget

For those unable to easily import JSON into their JavaScript enviroment, Andy Matthews has come up with a gist for how to include it using grunt-contrib-concat. Also checkout grunt-json.

Traditionally stylesheets describe the majority of the presentation layer for a website. However as JavaScript becomes necessary to present information in a stylistically consistent way, it becomes troublesome to keep these mediums in sync. Data visualizations and break-point based interaction are prime examples of this; something I bumped into on my most recent project.

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).


5. Harry Roberts – What Is A CSS Framework Anyway? on Vimeo

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.

Harry Roberts – What Is A CSS Framework Anyway? from Industry Conf on Vimeo.

Net Tuts

6. A Beginner’s Introduction to CSS Animation – Tuts+ Web Design Tutorial

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.

Digging Into WordPress

7. Backup and Restore Theme Options | Digging Into WordPress

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.

8. Free HTML 5 WordPress Theme | Digging Into WordPress

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).

9. Disable Default Dashboard Widgets | Digging Into WordPress

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.

Net Tuts

10. Optimizing Contact Form 7 for Better Performance – Tuts+ Code Article

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.

With this large of an audience, optimizing the usage of Contact Form 7 seems like optimizing a significant number of WordPress users. If you don’t know it already, Contact Form 7 includes its CSS & JavaScripts files on each and every page of your site.