Category: Web Stuff

Alien Quest CSS Animation Test

Alien Quest(2)

Alien Quest(4)

Alien-Quest(3)

Alien Quest

Alien Quest is a website I worked up with CSS & Javascript animations in order to learn how to use them in web development. It is a simple test in movement. The quest starts at the bottom of the page and scrolls up as you click on specific triggers throughout the quest. Start with the launch button and move on with the continue button.

The same techniques could be used to make a browser game, to tell a story using moving characters, or to simply show a user how to navigate a website. Scrolling could be done up or down, in this case I started at the bottom and have the space ship launching up into outer space.

You can see it in action in the video below:

Or visit the site in your browser. (Should work in most modern browsers)

Mike’s Pick: Free WordPress Themes Jan 2014

I am going to try out something for the new year, a monthly list of cool looking free WordPress themes.

This is the first one for January 2014

MiniMagazine

MiniMagazine

MiniMagazine Blog is free responsive Magazine WordPress theme, perfect for a personal blog.

Find MiniMagazine Here


Elucidate

Elucidate

Elucidate: A simple, clean theme with an emphasis on typography and white space. Elucidate is a fully responsive, mobile first theme based on Underscores.

Find Elucidate Here


Journal Box

JournalBox

Journal Box is a flexible and fashionable theme for blog. It features two color options, allowing you to easily change it to a different style. It’s also quite interactive, with profile box on the foot and share buttons for each post.

Find Journal Box Here


Writr

WRITR

Writr is a minimalist, content-oriented tumblelog theme perfect for your personal blog. It comes packed with 6 different color schemes: turquoise (default), blue, green, grey, purple, and red. With it’s modern look and attention to crisp typography, Writr lets your readers focus on the content.

Find Writr Here


Fruitful

Fruitful

Fruitful – A WordPress theme with powerful theme options panel and simple clean front end design. Ability to modify styles and options to your needs. Easily edit logo, background image, menu, slider, fonts, social icons, footer, custom css and much more.

Find Fruitful Here


Kickstarter: Constraints a Practice Challenge for Web Developers

Constraints1

Constraints is a deck of cards to improve the way you tackle web design problems. If you are involved in creating websites as a designer, coder, producer, content strategist, creative director or conference hound – you need Constraints.

Each card asks you to do something, to consider something, or to avoid something. Sometimes it’s very direct, sometimes it’s more ambiguous. In all cases the objective is to shift your perspective on your problem. Shifting your perspective is often all that is required to see the better solution.

All of the cards are aimed squarely at challenging the way you work, pushing you to find new, often better techniques and ways of thinking about design problems. Sometimes by taking something away, by adding something new, sometimes simply by making you focus on one specific area.

This kind of practice will have a direct impact on how you think, design and build.

Everybody needs practice in their fields and these cards seem like a great way for web developers and designers to keep their skills up to par. Take up a challenge and see what you can do under a few Constraints.

Having Trouble Viewing the Video? Visit the Kickstarter Project Page by Clicking Here

A Fix For WordPress Photo Captions On Responsive Themes

Code

My current WordPress Theme is Responsive and most images work correctly with the CSS, but I was having an issue with photos with captions breaking the responsive designs. I tried a few CSS fixes and didn’t see any change in how the images were being handled on my iPhone.

I came across this function code which works for me. It helps to resize the captioned photos in WordPress when using responsive themes.

https://gist.github.com/jentanbernardus/3023022

add_filter( 'img_caption_shortcode', 'dap_responsive_img_caption_filter', 10, 3 );
 
function dap_responsive_img_caption_filter( $val, $attr, $content = null ) {
  extract(shortcode_atts( array(
    'id' => '',
    'align' => '',
    'width' => '',
    'caption' => ''
    ), 
  $attr));
  
  if ( 1 > (int) $width || empty($caption) )
    return $val;
 
  if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
 
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="max-width: 100% !important; height: auto; width: ' . (10 + (int) $width) . 'px">'
  . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
									

Required+ Foundation Full Search Results

Code

Want Full Search Results in a Required+Foundation child theme? Here is how to do it.

This is for Required+ Foundation version 1.0.10

Find and remove or comment out the lines marked remove below in Content.php:

Original file with comments saying what to remove:

<?php
/**
 * The default template for displaying content single/search/archive
 *
 * @package required+ Foundation
 * @since required+ Foundation 0.3.0
 */
?>
  <!-- START: content.php -->
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
      <?php if ( is_single() ) : ?>
      <h1 class="entry-title"><?php the_title(); ?></h1>
      <?php else : ?>
      <?php the_post_thumbnail(); ?>
      <h1 class="entry-title">
        <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'requiredfoundation' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
      </h1>
      <?php endif; // is_single() ?>
    </header><!-- .entry-header -->
    <?php if ( 'post' == get_post_type() ) : ?>
    <div class="entry-meta">
      <?php required_posted_on(); ?>
      <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
      <span class="label radius secondary"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'requiredfoundation' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php _ex( 'Featured', 'Post format title', 'requiredfoundation' ); ?></a></span>
      <?php endif; ?>
    </div><!-- .entry-meta -->
    <?php endif; ?>

<!-- Remove From Here -->

    <?php if ( is_search() ) : // Only display Excerpts for Search ?>
    <div class="entry-summary">
      <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
    <?php else : ?>

<!-- To Here -->

    <div class="entry-content">
      <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'requiredfoundation' ) ); ?>
      <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'requiredfoundation' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->

<!-- Remove From Here -->

    <?php endif; ?>

<!-- To Here -->

    <footer class="entry-meta">
      <?php if ( 'post' == get_post_type() ) : ?>
      <?php get_template_part('entry-meta', get_post_format() ); ?>
      <?php endif; ?>
    </footer><!-- #entry-meta -->

  </article><!-- #post-<?php the_ID(); ?> -->
  <!-- END: content.php -->
									

New file with excerpts for search coce removed.

<?php
/**
 * The default template for displaying content single/search/archive
 *
 * @package required+ Foundation
 * @since required+ Foundation 0.3.0
 */
?>
  <!-- START: content.php -->
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
      <?php if ( is_single() ) : ?>
      <h1 class="entry-title"><?php the_title(); ?></h1>
      <?php else : ?>
      <?php the_post_thumbnail(); ?>
      <h1 class="entry-title">
        <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'requiredfoundation' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
      </h1>
      <?php endif; // is_single() ?>
    </header><!-- .entry-header -->
    <?php if ( 'post' == get_post_type() ) : ?>
    <div class="entry-meta">
      <?php required_posted_on(); ?>
      <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
      <span class="label radius secondary"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'requiredfoundation' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php _ex( 'Featured', 'Post format title', 'requiredfoundation' ); ?></a></span>
      <?php endif; ?>
    </div><!-- .entry-meta -->
    <?php endif; ?>

    <div class="entry-content">
      <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'requiredfoundation' ) ); ?>
      <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'requiredfoundation' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->


    <footer class="entry-meta">
      <?php if ( 'post' == get_post_type() ) : ?>
      <?php get_template_part('entry-meta', get_post_format() ); ?>
      <?php endif; ?>
    </footer><!-- #entry-meta -->

  </article><!-- #post-<?php the_ID(); ?> -->
  <!-- END: content.php -->