Monthly Archives: June 2012

jQuery Touchwipe Plugin – iPhone, iPad, Android Wipe Effect

.

Touchwipe is a jQuery Plugin that allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used for example to scroll through an image gallery. Should also work with Android touchscreens. It’s very small, it’s only 1 KB.

Example

$("#target").touchwipe({
    wipeLeft: function() { alert("left"); },
    wipeRight: function() { alert("right"); },
    wipeUp: function() { alert("up"); },
    wipeDown: function() { alert("down"); }
});

jQuery Touchwipe Plugin (iPhone, iPad, iPod Touch Gesten / Gestures, Wischeffekt / Wipe Effect)

Scrolling in IOS 5

.

The CSS property “overflow” lets you made scrollable the content inside an element. It adds the native OS’s scrollbar in almost all browsers except with IOS.
To do it you just need to use these two simple lines:

overflow: scroll;
-webkit-overflow-scrolling: touch;

The scrollable element will have the native IOS scrollbar and scroll easing.

GMaps.js – Google Maps API

.

GMaps.js is a Javascript library that allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code. With a few simple lines of code you can add a map in a minute!

Examples

Basic

var map = new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});

Add marker

map.addMarker({
  lat: -12.043333,
  lng: -77.028333,
  title: 'Lima',
  click: function(e) {
    alert('You clicked in this marker');
  }
});

Draw route

map.drawRoute({
  origin: [-12.044012922866312, -77.02470665341184],
  destination: [-12.090814532191756, -77.02271108990476],
  travelMode: 'walking',
  strokeColor: '#131540',
  strokeOpacity: 0.6,
  strokeWeight: 6
});

All the examples can be found here.

Speed up your site with Caching and cache-control

.

Caching with .htaccess and Apache will take your website and your web skills to the next level. This is some technical and advanced methods condensed to simple htaccess code examples for you. But you must take the time to understand caching with cache-control and other headers and HTTP options before you implement on a production server.

I found this very useful website with an interesting list of examples of htaccess configurations.

Caching with both mod_expires + mod_headers

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0

# Set up caching on media files for 1 year (forever?)

ExpiresDefault A29030400
Header append Cache-Control "public"

# Set up caching on media files for 1 week

ExpiresDefault A604800
Header append Cache-Control "public"

# Set up 2 Hour caching on commonly updated files

ExpiresDefault A7200
Header append Cache-Control "proxy-revalidate"

# Force no caching for dynamic files

ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"

Caching with mod_headers

# 1 YEAR

Header set Cache-Control "max-age=29030400, public"

# 1 WEEK

Header set Cache-Control "max-age=604800, public"

# 3 HOUR

Header set Cache-Control "max-age=10800"

# NEVER CACHE

Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

Caching with mod_expires

ExpiresActive On
ExpiresDefault A0

# 1 YEAR

ExpiresDefault A29030400

# 1 WEEK

ExpiresDefault A604800

# 3 HOUR

ExpiresDefault A10800"

Turn Gzip Compression On

This goes in your root .htaccess file but if you have access to httpd.conf that is better.

This code uses the FilesMatch directive and the SetOutputFilter DEFLATE directive to only target files ending in .js or .css

SetOutputFilter DEFLATE

Random posts