Atomic Mobile

Atomic Mobile provides businesses and agencies with mobile technology based solutions. So naturally, they’d better have a snappy mobile website right? Well you guessed it… that’s what we’re working on!

Atomic Mobile Website Screenshots
Project Details:

  • UI/UX Design
  • Mobile Design & Development

Q:Regarding WordPress:
I was wondering if you knew how to display the excerpt for next and previous posts in the side bar if you are on a blog page?

Anonymous

WordPress has a get_previous_post() and a get_next_post() function that return most of the information pertaining to the next/prev posts.

<?php
$prev_post = get_previous_post();
if ($prev_post) {
echo '<a href="' . get_permalink($prev_post->ID) . '">&larr; '. $prev_post->post_title . '<br />' . $prev_post->post_excerpt . '</a>';
}

$next_post = get_next_post();
if ($next_post) {
echo '<a href="' . get_permalink($next_post->ID) . '">'. $next_post->post_title . ' &rarr;<br />' . $next_post->post_excerpt . '</a>';
}
?>

Social Media is all dorky dudes pretending to be attractive and attractive chicks pretending to be dorks.
Alex Blagg via bajillionhits

Source: bajillionhits

CSS Keyframe Animation Flicker

Just for the record (since I couldn’t find any help on this issue), if you are animating a translateX, translateY, translate3d, or opacity CSS attribute by way of a webkit keyframe animation you may notice a flicker at the end of its iteration. It is very noticeable on Android 2. The flicker is caused by the animation resetting to the beginning keframe for just a split second. This happens even if you have styled the animated CSS class to stay where it is and inherit the last keyframe’s styles upon completing the animation. The only solution I could come up with is to use more than 2 keyframes. Don’t ask me why, but it just works. For example, if the following code flickers:

@-webkit-keyframes 'slide-in' {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}

changing it to the following will fix the problem

@-webkit-keyframes 'slide-in' {
from { -webkit-transform: translateX(100%); }
99% { -webkit-transform: translateX(0); }
to {}
}

It would probably be better to use “from”, “50%”, and “to” keyframes and assign them all a value. But if your transitions are easing in and/or out - a 50% value can make it look jerky.

I hope this post found you in time before you wasted hours like I did.