Richard Cook
Mar 4

Responsive Web Design Tester

Test all your responsive design here. It works and you can scroll through each size and device.

James Muspratt
Mar 2

Web Ahead with Eric Meyer

Take a listen to this episode of the Web Ahead podcast, where Jen Simmons interviews Eric Meyer. The podcast takes a little while to get going, but once it does you’ll hear some great stories and perspective on the history of the web and his ideas of its long-term future a medium. Eric Meyer was influential in the promotion of CSS as a legitimate web design tool in the early 2000s, and he’s continued to develop some very smart coding techniques since then while working on large projects.

Eric Andre
Mar 1

Paper.js

You might be interested in this if you like interactive design and animation. Otherwise, you may just not want to click this link

Note that you can click the button in the top right corner and edit the, very short, code right there.

James Muspratt
Feb 29

Cheat Sheet: a Wordpress archive page

Here’s a demo of a relatively simple archive page. (You might want to delete the page-archive.php file that came with your theme, since it uses a different function than the one we’ve discussed.

This method uses the function called get_posts(), described in the post about Wordpress Loops to work, you would do the following:

In your theme folder, find page.php, duplicate it, and rename the copy to page-archive.php.
Open the new page.archive.php file in Textwrangler and change the comment at the top to read exactly as it does in the example below. The crucial part is “Template Name: Archive page”, which Wordpress will use to recognize this file as a new page template.
Copy the loop portion of the code below into your page-archge.php, save it, and upload it to your theme directory.
In Wordpress, choose Pages > Add New. Title the new page “Archive” or something similar. In the Page Attributes pane, click the Template pop-up and choose your new template name (“Archive page” or similar). If you don’t see it listed, make sure you matched the comment syntax exactly as in the example below.
Click Publish (or Update) and then View Page to view your archive.

Here’s an example of a straightforward archive template that lists all your posts in reverse chronological order. You can of course use different arguments for get_posts(). Refer to the Wordpress Codex to see how.

<?php
/**
 * Template Name: Archive Page
 *
 * @package WordPress
 * @subpackage My Theme
 */
include('header.php'); ?>
<body id="page">
	<?php include('nav.php'); ?>
	<section id="main" role="main" class="cf">
	<h1>Awesome Archive Page</h1>
	<ul class="post-list">
     <?php 
        // 1. store our loop preferences in an array
        $args = array('numberposts'     => 999, // notice this has to be "numberposts", not "posts_per_page"
       'order'           => 'DESC', // the other option is ASC
       'orderby'         => 'post_date', 
	   'post_type'       => 'post',
       'post_status'     => 'publish'
        );
        // 2. Run get_posts() on the $args array and store the result in $myposts  
        $myposts = get_posts( $args );
        // 3. Run a foreach loop on $myposts to access our content, combined with the annoying-but-necessary setup_postdata function.
        foreach( $myposts as $post ) :  setup_postdata($post); ?>    
      <?php include('snippet-post-link.php'); ?>
        <?php endforeach; ?>
        </ul>
<?php include('footer.php'); ?>

James Muspratt
Feb 27

Starter Kit bugs

It looks like category.php has a mistake in it. There’s an extra wrapping div around the nav include that shouldn’t be there.

So change these lines….

<div id="nav">
<?php include('nav.php'); ?>
</div><!-- #nav -->

to just this:

<?php include('nav.php'); ?>

Watkins Web 3: Blog

Richard Cook Mar 4