Thursday, May 30, 2013

Create An Animated CSS Box Menu

Animated CSS Box Menu

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes and when the mouse hovers over a box this will grow and shrink the other boxes. We can even add an icon to animate into the box to represent the page on the navigation.

Thursday, May 30, 2013

3D Button Parallax

3D Button Parallax

The introduction of CSS3 resulted in the explosion of beautiful and interesting buttons, styled with gradients, shadows and borders - often to achieve a 3D effect. The problem with such 3D buttons is a static perspective. The 3D is not always very convincing when you can only see its front and perhaps a bit from an edge or two - even when the page moves and the position of the button on the page moves.

Thursday, May 30, 2013

5 HTML5 Features you need to know

5 HTML5 Features you need to know
HTML5 has been around for a while now, it introduces lots of new and exciting new JavaScript and HTML APIs for both mobile and desktop, so in this post you will discover some HTML5 features that will enhance your web apps and will save you a lot of time.

Thursday, May 30, 2013

Sass Style Guide

Sass Style Guide
With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass.

Here are some ideas that I've been gravitating toward. Perhaps they are useful to you or help you formulate ideas of your own.

Thursday, May 16, 2013

Promise-Based Validation

Promise-Based Validation

The concept of "Promises" has changed the way we write asynchronous JavaScript. Over the past year, many frameworks have incorporated some form of the Promise pattern to make asynchronous code easier to write, read and maintain. For example, jQuery added $.Deferred() and NodeJS has the Q and jspromise modules that work on both client and server. Client-side MVC frameworks, such as EmberJS and AngularJS, also implement their own versions of Promises.

Monday, May 13, 2013

Make Client Side Data Available Server Side

Make Client Side Data Available Server Side

That would be pretty useful, right? Right now it's very common to User Agent "sniff" when you want to make a server-side decision about what to give the client. But UA sniffing has always sucked and sucks more every day. What you really want to know is stuff like "how big is the screen I'm serving to?" or "does the device I'm serving to have touch events?" - that way you can serve resources that are appropriate to those questions. Is there a way to get accurate client side information on the server side?

Monday, May 13, 2013

43 Ways to Optimize your PHP Code

Optimize your PHP Code
  1. If a method can be static, declare it static. Speed improvement is by a factor of 4.
  2. echo is faster than print.
  3. Use echo's multiple parameters instead of string concatenation.
  4. Set the maxvalue for your for-loops before and not in the loop.
  5. Unset your variables to free memory, especially large arrays.
  6. Avoid magic like __get, __set, __autoload
  7. require_once() is expensive

Friday, May 10, 2013

Removing an element with the plain JavaScript remove() method

JavaScript remove() method
As you might know, the DOM does not supports removing an element directly. When removing an element with JavaScript, you must go to its parent first instead. This was always odd and not so straightforward.

Friday, May 10, 2013

A Beginner's Guide to HTTP Cache Headers

HTTP Cache Headers

This article offers an exploration into HTTP caching headers and associated CDN behaviour. If you're looking to understand how caching headers fit into the modern web, or are just curious about what everyone is talking about around you, this resource is for you.

If you already understand the benefits of cache headers and are looking to extend your knowledge further, I'd recommend referring to the W3 documentation.

Friday, May 10, 2013

Vertical Timeline

Vertical Timeline
This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list.