Bren's Blog

iGoogle Replacement

2013-01-23T15:21:00.001-08:00

I decided to start working on an iGoogle replacement since iGoogle is going to die.

Here's some early code. Its far from done, and on the backburner at the moment, but, here's a link

https://github.com/bren1818/iGoogle_Static

Dynamically configure Viewport (ios/android) meta tag

2013-01-05T12:39:00.002-08:00

In the head of your page include this:
//jquery

<meta name="HandheldFriendly" content="True" />
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

$(function(){

var minSiteWidth = 480; /*Anything Less than or Equal to this will be in 'phone' view*/
var maxSiteWidth = 1024; /*Anything between this and min width will be tablet, anything greater will be Desktop*/

var previousOrientation = 0;
var checkOrientation = function(){
if(window.orientation !== previousOrientation && window.orentation != undefined){
previousOrientation = window.orientation;
$(function(){
//get proper width
var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width;
//get proper width
var wh = ( $(window).height() < window.screen.height ) ? $(window).height() : window.screen.height;
var o = ( ww > wh) ? "Landscape" : "Portait";
$('body').removeClass('Landscape');
$('body').removeClass('Portait');
$('body').addClass(o);
});
}
};

function isMobile(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
return true;
}else{
return false;
}
}

/*Add on the resize and orientation events for Mobile*/
if( isMobile() ) {
window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
}

function setViewPort(mw){
if( isMobile() ) { //Only care about setting the view ports on mobile devices
$('body').addClass('mobileDevice');
if( mw == undefined ){
mw = minSiteWidth;
}

var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
var ratio = ww / mw; //calculate ratio
if( ww <= mw){ /*Phone Layout*/

$('body').addClass('phone');
$('body').removeClass('tablet');

$('.siteSection').width( mw );
$('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + ww);

}else{ /*Tablet / Desktop Layout */
$('body').addClass('tablet');
$('body').removeClass('phone');

$('.siteSection').width( ww );

$('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=no, width=' + ww);

if( ww >= maxSiteWidth ){
$('body').addClass('desktopDevice'); /*Optional */
}
}
}else{
$('body').addClass('desktopDevice');
}
}

/*Function to allow a delayed re-size trigger event*/
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();

if( !isMobile() ) { /*This is for desktops, don't need it done on both*/
$(window).resize(function () { /*so that we don't have to coninuously call functions on a resize*/
waitForFinalEvent(function(){
var w = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width;
if( w <= minSiteWidth ){
$('body').addClass('phone');
$('body').removeClass('desktopDevice');
$('body').removeClass('tablet');
log( "Gone to phone View");
}else if( w > minSiteWidth && w < maxSiteWidth ){
$('body').addClass('tablet');
$('body').removeClass('phone');
$('body').removeClass('desktopDevice');
log("Gone to Tablet View");
}else{
$('body').removeClass('phone');
$('body').removeClass('tablet');
$('body').addClass('desktopDevice');
log("Gone to Desktop View");
}
}, 500, "WindowResize");
});
}

setViewPort(minSiteWidth); //viewport for mobile devices

});

Simple Web-App for Android and iOS

2012-09-08T13:20:00.001-07:00

So as of late, I have been working on websites which function on mobile devices. Its often easier to make code changes and updates when creating applications out of html,css and javascript. If you want a really easy jumping off point, I have created a super simple little web app which will play nicely on Android and iOS devices including tablets.

To create this package I use the following libraries:
-jQuery - to abbreviate javascript
-iScroll - to help with cross device scrolling
-less.js - cause its a nifty way of styling with css
-touchSwipe - help with swipes

This web app (at the present time) is one screen with scroll-able content and swipe zones, along with scroll-able and inner scroll-able zones. I wrote some javascript to tie the libraries all together and create a nice and responsive application.

At the bottom of this page I'll have a link to the files, He're is a brief over view of the html, js and css/less.

HTML Template:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="theme/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="theme/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="theme/touch-icon-iphone4.png" />

<link rel="apple-touch-startup-image" href="theme/startup.jpg" media="screen and (min-device-width: 200px) and (max-device-width: 480) and (orientation:portrait)"> 
<link rel="apple-touch-startup-image" href="theme/startup-iPad-portrait.jpg" media="(device-width: 768px) and (orientation: portrait)" /> 
<link rel="apple-touch-startup-image" href="theme/startup-iPad-landscape.jpg" media="(device-width: 768px) and (orientation: landscape)" /> 

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />

<meta name="HandheldFriendly" content="true" />
<title>Cross Device Example</title>
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/iscroll.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/less-1.3.0.min.js"></script>
<script type="text/javascript" src="js/brenFunctions.js"></script>
</head>
<body>
<div id="wrap">
<div id="main" class="clearfix"> <div id="header">
<h1>Bren's App</h1>
</div>
<div id="displayRegion">
<div id="displayContent">
<div id="swipeRegionLeft">
<div id="leftContentScroller" class="iScrollWrapper">
<div class="iScrollScroller">
<div style="padding:5px 10px;">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="iScrollWrapper" class="iScrollWrapper">
<div class="iScrollScroller">
<div style="padding:15px 30px;">

<div class="smallContentBlockRight">
<div id="wrapperNestedRight" class="iScrollWrapper inneriScroll">
<div class="iScrollScroller">
<div style="padding:5px 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisi nulla, molestie nec vestibulum et, molestie eget lectus. Nam imperdiet gravida sapien eu tincidunt. Curabitur pellentesque nibh orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus nunc vel massa pharetra rutrum. Donec pellentesque augue eget tortor pellentesque consequat. Nam molestie consectetur metus, non tristique neque pretium venenatis. Mauris id massa eu ligula sagittis facilisis consectetur et augue. Cras ullamcorper blandit massa, quis vestibulum felis ornare et. Sed quis lorem a mauris tristique ullamcorper. Etiam ultricies gravida dolor, non imperdiet ligula dapibus nec. Nulla lacinia bibendum massa eget porttitor.</p>
<p>Vivamus eros massa, varius sit amet venenatis at, malesuada sit amet quam. Praesent massa nunc, suscipit nec ullamcorper a, ullamcorper et nibh. Morbi vel sapien quis turpis mattis volutpat et vitae velit. Suspendisse imperdiet nisi ac augue ullamcorper vehicula. Morbi vel diam eget risus faucibus pharetra. Phasellus posuere mauris ut diam tristique id aliquet lacus condimentum. Fusce pharetra tempus felis, in sollicitudin velit ullamcorper sed.</p>
</div>
</div>
</div>
</div>
<h1>Chapter Bren</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisi nulla, molestie nec vestibulum et, molestie eget lectus. Nam imperdiet gravida sapien eu tincidunt. Curabitur pellentesque nibh orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus nunc vel massa pharetra rutrum. Donec pellentesque augue eget tortor pellentesque consequat. Nam molestie consectetur metus, non tristique neque pretium venenatis. Mauris id massa eu ligula sagittis facilisis consectetur et augue. Cras ullamcorper blandit massa, quis vestibulum felis ornare et. Sed quis lorem a mauris tristique ullamcorper. Etiam ultricies gravida dolor, non imperdiet ligula dapibus nec. Nulla lacinia bibendum massa eget porttitor.</p>
...
<div class="smallContentBlockLeft">
<div id="wrapperNestedLeft" class="iScrollWrapper inneriScroll">
<div class="iScrollScroller">
<div style="padding:5px 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisi nulla, molestie nec vestibulum et, molestie eget lectus. Nam imperdiet gravida sapien eu tincidunt. Curabitur pellentesque nibh orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus nunc vel massa pharetra rutrum. Donec pellentesque augue eget tortor pellentesque consequat. Nam molestie consectetur metus, non tristique neque pretium venenatis. Mauris id massa eu ligula sagittis facilisis consectetur et augue. Cras ullamcorper blandit massa, quis vestibulum felis ornare et. Sed quis lorem a mauris tristique ullamcorper. Etiam ultricies gravida dolor, non imperdiet ligula dapibus nec. Nulla lacinia bibendum massa eget porttitor.</p>
<p>Vivamus eros massa, varius sit amet venenatis at, malesuada sit amet quam. Praesent massa nunc, suscipit nec ullamcorper a, ullamcorper et nibh. Morbi vel sapien quis turpis mattis volutpat et vitae velit. Suspendisse imperdiet nisi ac augue ullamcorper vehicula. Morbi vel diam eget risus faucibus pharetra. Phasellus posuere mauris ut diam tristique id aliquet lacus condimentum. Fusce pharetra tempus felis, in sollicitudin velit ullamcorper sed.</p>
</div>
</div>
</div>
</div>

.... <p>Proin auctor feugiat quam at tempor. Duis est nulla, interdum porta laoreet non, faucibus vitae sem. Suspendisse in semper lorem. Ut ante arcu, varius ac rutrum in, faucibus in mauris. Etiam condimentum diam eu nisi porttitor a varius mauris eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel quam odio, sit amet facilisis nulla. Nullam faucibus ipsum eget leo mattis non volutpat odio vehicula. Mauris vestibulum, enim vel eleifend aliquam, est neque commodo nibh, nec dignissim arcu dolor a mi. Integer non odio quis ipsum pulvinar venenatis. Cras ac nibh at tellus ornare consequat. Etiam cursus libero vitae ante venenatis non auctor libero gravida.</p>
</div> 
</div> 
</div> 

</div>
</div> 
</div>
</div>
<div id="footer">
</div>
</body>
</html>

style.css

* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
display: none;

overflow: hidden;
height: 100%;
width: 100%;
background-color: #ddd; /* Background color */
color: #222; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;

-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

Style.less

@headerHeight: 43px;
@footerHeight: 43px;
@borderlistRadius: 10px;

.boxModel{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#main { padding-bottom: @footerHeight; .boxModel; } /* must be same height as the footer */

#displayRegion{
position: relative;
height: 100%;
width: 100%;
display:block;
overflow: hidden;

.boxModel;
}

#displayContent{
position: relative;
background-color: #fff;
display:block;
clear: both;
overflow: hidden;
width: 100%;
height: 100%;
.boxModel;
}

#swipeRegionLeft{
max-width: 100%;
width: 0%;
display: none;
position: absolute;
z-index: 1000;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
border-right: 1px solid #000;

background-image: url('../images/pinstripes.png');
background-repeat: repeat;
background-color: #C5CCD4;

.boxModel;
}

#header{
position: relative;
clear: both;
height: @headerHeight;
width: 100%;
display:block;
}

#header h1{
width: 100%;
color: #fff;
line-height: @headerHeight;
font-size: @headerHeight - 18px;

font-weight: normak;
margin: 0px;
height: @headerHeight;
text-align: center;
text-decoration: none;
display:inline-block;
}

#leftContentScroller ul li{
margin: 0px;
padding: 0px;
min-height: 42px;
}

.border-radius-top (@radius) {
-webkit-border-top-left-radius: @radius;
-webkit-border-top-right-radius: @radius;
-moz-border-radius-topleft: @radius;
-moz-border-radius-topright: @radius;
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}

.border-radius-bottom (@radius) {
-webkit-border-bottom-right-radius: @radius;
-webkit-border-bottom-left-radius: @radius;
-moz-border-radius-bottomright: @radius;
-moz-border-radius-bottomleft: @radius;
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}

#swipeRegionLeft ul { margin:5px 0 15px 0; padding:0; list-style:none; -webkit-border-radius:0; border-width:0; background-color:transparent; }

#swipeRegionLeft ul > li { margin:0; padding:0; border-width:0; }

#swipeRegionLeft ul > li a { text-align:left; padding:11px 0 9px 10px; background:url('../images/listArrow.png') center right no-repeat;
display:block; text-decoration:none; overflow:hidden; text-overflow:ellipsis; color:#000; font-weight:bold; font-size:17px;
margin:0; border:1px solid #aaa; border-bottom-width:0 !important; margin-top:-1px; background-color:#fff; }

#swipeRegionLeft ul > li:first-child a { .border-radius-top (10px); }
#swipeRegionLeft ul > li:last-child a { .border-radius-bottom (10px); border-bottom-width:1px !important; }

p{
margin: 0 8px;
font-size: 15px;
line-height: 20px;
font-family: Helvetica, arial;
}

#footer {
position: relative;
margin-top: -@footerHeight; /* negative value of footer height */
height: @footerHeight;
clear:both;
}

/* CLEAR FIX*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */

.gradient{
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

#footer,
#header{
.gradient;
.boxModel;

width: 100%;
display:block;
position: relative;
border: 1px solid #000;
}

.defaultSmallBlockContent{
position:relative;
width: 40%;
height: 200px;
margin-top: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}

brenFunctions.js

var viewportWidth = 0;
var viewportHeight = 0;

var portrait = 0;
var landscape = 0;
var previousOrientation = 0;

var minMove = 50; //minimum swipe movement to trigger event

var minSize = 480;

var headerFooterHeight = 43; //header + footer height

var iScrolls = new Array(); //array of iscrolls
var scrollInit = 0; //flag for scroll bar initilization
var sideBarOpen = 0; //flag for if side bar is open

var firstRun = 1;
//function to refresh each iscroller on change
function refreshiScrolls(){
if( !firstRun ){ //flag for when body will be visible
for( var s = 0; s < iScrolls.length; s++){
iScrolls[s].refresh();
}
}
}

//function called after screen rotation, used for applying necessary classes and resetting sizes
function updateScreen(){
viewportWidth = $(window).width();
viewportHeight = $(window).height();

if( viewportWidth < minSize ){
$('body').addClass('smallView');
}else{
$('body').removeClass('smallView');
}

if( window.orientation != undefined){
if( window.orientation == 0 || window.orientation == 180){
portrait = 1; landscape = 0;
$('body').addClass('portrait'); $('body').removeClass('landscape');
}else{ //90 || -90
portrait = 0; landscape = 1;
$('body').removeClass('portrait'); $('body').addClass('landscape');
}
}

$('#displayRegion').css({'width' : viewportWidth + 'px', 'height' : viewportHeight - (headerFooterHeight * 2) + 'px'});

console.log( 'width ' + viewportWidth + 'px ' + 'height ' + viewportHeight + 'px');
console.log( 'landscape : ' + landscape + ' portrait : ' + portrait );

refreshiScrolls();
}

//function to open the 'options' side bar
function animateSideBar(){

var slideDuration = 50;

if( sideBarOpen ){

$('#swipeRegionLeft').css({'display' : 'none', 'width' : '0%'});

if( ! viewportWidth < minSize){
$('#iScrollWrapper').animate({
left: '0%',
width: '100%'
}, slideDuration, function() {
// Animation complete.
refreshiScrolls();
});
}

sideBarOpen = 0;

$('#displayContent').removeClass('optionsOpen');

}else{

sideBarOpen = 1;
$('#displayContent').addClass('optionsOpen');

$('#swipeRegionLeft').css('display', 'block');

if( viewportWidth < minSize){
$('#swipeRegionLeft').animate({
width: '100%'
}, slideDuration, function() {
// Animation complete.
refreshiScrolls();
});
}else{
$('#swipeRegionLeft').animate({
width: '300px'
}, slideDuration, function() {
// Animation complete.
refreshiScrolls();
});

$('#iScrollWrapper').animate({
width:(viewportWidth - 300) + 'px',
left: '300px'
}, slideDuration, function() {
refreshiScrolls();
});
}
}
}

//just for triggering the rotation event
var checkOrientation = function(){
if(window.orientation !== previousOrientation){
previousOrientation = window.orientation;
updateScreen();
}
};

function loaded()
{
$(function(){
$('.iScrollWrapper').each(function(index){ //get collection of iScrolls
if( $(this).hasClass('inneriScroll') ){
iScrolls[index] = new iScroll( $(this).attr('id').toString() ,{
onBeforeScrollMove: function (e) {
e.preventDefault();
e.stopPropagation();
}
});
}else{
iScrolls[index] = new iScroll( $(this).attr('id').toString() );
}

if( index = $('.iScrollWrapper').length -1){
scrollInit = 1;
}
});

updateScreen();

//Add Swipe Handlers for the various regions of the screen
$("#iScrollWrapper").touchwipe({
wipeLeft: function() { animateSideBar() },
wipeRight: function() { animateSideBar() },
min_move_x: minMove,
preventDefaultEvents: false
});

$('#swipeRegionLeft').touchwipe({
wipeLeft: function() { animateSideBar() },
min_move_x: minMove,
preventDefaultEvents: false
});

$("#footer").touchwipe({
wipeUp: function() { alert("down"); },
wipeDown: function() { alert("up"); },
preventDefaultEvents: false
});

/*fix for internal links on iOS*/

$.expr[':'].external = function(obj){ return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname) && (obj.hostname != ''); };

$('a').not('a:external').each(function(){ //grab all the local links
if( typeof $(this).attr('href') !== 'undefined' && $(this).attr('href') !== false){ //check that there is a href
if( $(this).attr('href') != "#"){ //check the href is not an anchor
$(this).addClass('internalAppLink');
}
}
});

/*Check if IOS*/
$('a.internalAppLink').click(function(event){
event.preventDefault();
window.location.href = $(this).attr('href');
});

if( scrollInit == 1 ){
$('body').css('display', 'block');
firstRun = 0;
refreshiScrolls(); //body must be displayed to work
}

});
}//end loaded

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

//Use this for iDevice only
//document.addEventListener('DOMContentLoaded', loaded, false);

//Use this if nothing else works
//window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);

window.addEventListener("resize", updateScreen, false);
window.addEventListener("orientationchange", checkOrientation, false);
if(/Android/i.test(navigator.userAgent) ){ //Android Doesnt seem to always pick up on it, so force a check. This can affect battery performance only use if people experience issues
// setInterval(checkOrientation, 1000);
}

*Note swipe right to trigger side menu

Here are the files. mobileApp v1.zip

Hope it helps someone - I'll extend on this further and post updates!

Some Powerful Object Oriented Javacript

2012-07-31T20:28:00.001-07:00

So here is some code I wrote to 'make' javascript classes a little bit easier. In essence what the code below does is, you create an object like so:

var aPerson = myObjWrap("Name, Age, Gender");

from there, my code creates the 'aPerson' object so you can perform functions on it like so:

aPerson.setName("Brendon");
aPerson.setAge("24");
aPerson.setGender("Male");

And then if you want to see what the object contains you can do something like this:

console.log("Name: " + aPerson.getName() + " Age:" + aPerson.getAge() + " Gender: " + aPerson.getGender() );

Which would spit out: Name: Brendon Age:24 Gender: Male

So here's the code

//code for trim
if (!String.prototype.trim) {
    String.prototype.trim = function () {  
        return this.replace(/^\s+|\s+$/g,'');  
    };  
}

$(document).ready(function() {
    function AddGettersAndSetters(object) {
        for (var field in object) {
            if (typeof(object[field]) != 'function') {
                if (typeof(object[field]) == 'object') {
                    for (var f = 0; f < object[field][0].length; f++) {
                        AssignFunctions(object, object[field][0][f].trim() );
                    }
                } else {
                    AssignFunctions(object, field);
                }
            }
        }

        function AssignFunctions(object, field) {
            object['get' + field] = function() {
                return this[field];
            };

            object['set' + field] = function(value) {
                this[field] = value;
            };
        }
    }

    var myObjWrap = function(fields) {
        var functions = new Array(fields.split(","));
        var theObj = {
            fields: functions
        };
        var gs = new AddGettersAndSetters(theObj);
        return theObj;       
    }

    var aPerson = myObjWrap("Name, Age, Gender");

    console.log( aPerson );
    
    aPerson.setName("Brendon");
    aPerson.setAge("24");
    aPerson.setGender("Male");

    console.log( aPerson );

    
    console.log("Name: " + aPerson.getName() + " Age:" + aPerson.getAge()

 + " Gender: " + aPerson.getGender() );
   
});

Getting started with creating Mobile App like websites, quickly and Easily

2012-05-17T16:13:00.000-07:00

So, I am assuming if you have come across this posting, you're looking to create a mobile friendly website of your current website or from scratch. Well, you've come to the right place. I am going to assume you have at least some familiarity with things like CSS, HTML, jQuery & Javascript, and we'll go from there.

So how do we begin? Step one. Have a design, well at-least in mind. To create something mobile friendly, your content is going to have to be presented in a mobile friendly fashion. In alot of cases, these changes can be made very easily and I'll outline a few examples. So without further ado, Lets start.

Step 1.

Start with the correct html structure and doctype.

In this case, there are two doctypes you should look into using, the mobile doctype like so:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

or the standard HTML5 doctype like so:

<!DOCTYPE html>

Using one of theses doctypes will help your application render better in Mobile devices.

Step 2.

Add in the appropriate "meta tags"

<meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="user-scalable=no" /> <meta name="viewport" content="width=480" />

The meta tags above are going to give you much better cross device look and consistency. As you can see, in my example, I am assuming the viewport should be 480px wide (I have found this yields nice results on most devices).

Add in the optional "Meta tags"

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
These are i-Device specific meta tags (see apple documenation

And lastly, add some polish (note file paths will be unique and you'll have to change).

<link rel="shortcut icon" href="/GetSiteFile/favicon.ico" />

These are all Apple specific items

<link rel="apple-touch-icon" href="/GetSiteFile/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/GetSiteFile/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/GetSiteFile/touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="/GetSiteFile/startup.png">
Step 3.

We have our doctype, we have our meta tags and other tid bits setup, now how about actually displaying content. This goes back to having a design in mind, and designing in mind for mobile.

Mobile Layouts have to be tuned to work with less real-estate, which means, cut the crap, and only show what is relevant. This can be a bit challenging when scaling from a Desktop website to a Mobile site, but its not impossible.

A typical Menu on a website may look something like this:

[Option 1][Option2][Option3][Option4][Option5]

but in a mobile site, that should be re-structured to something like this:

[Option 1]
[Option 2]
[Option 3]
[Option 4]
etc...

Step 4.

Consider implementing touch gestures (where applicable). Not everything, or everyone will require swipe gestures for items, but in some instances it makes sense to include it. To keep this posting short, I'll leave you with a nice little jQuery plugin which I have found most useful and easy to use.

http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Step 5.

The rest is for you, this is very quick list of things to create a mobile website quickly.

Other things to investigate if you haven't
-Using a mobile framework like Sencha Touch
-Using a framework like Less.js to make styling changes easier

I will post more relevant items when I think of them.

View this: http://bren1818.blogspot.ca/2012/09/simple-web-app-for-android-and-ios.html (A newer post)

Magento

2011-06-08T17:31:00.000-07:00

If any of you work on E-stores, you probably have come across, or developed a store using Magento. Magento is a powerful php e-store, which is flexible, configurable, fairly easy to style and nice to work with. The other thing I really like about Magento is the community. It is rare that you run into an issue in Magento which you can't fix with a quick Google. There are plenty of forums and websites devoted to Magento help. Seeing as how I have now developed a few Magento sites, this time around decided to document the problems one will typically run into. I have layed some of this out, and with luck, it will help someone out.

Remove Components (hide em)
System > Cofiguration > Advanced and disable ex: Mage_Newsletter

Change Layout
Open the \app\design\frontend\nameofProj\default\layout\catalog.xml
find:

eg: one-column.phtml

File Locations

Product View Template
\app\design\frontend\YourPath\default\template\catalog\product\view.phtml

Image Maginifcation for product
\app\design\frontend\YourPath\default\template\catalog\product\view\media.phtml

Varients Code Location
\app\design\frontend\YourPath\default\template\catalog\product\view\options\wrapper.phtml

Bottom of product Code Location
\app\design\frontend\YourPath\default\template\catalog\product\view\options\bottom.phtml

Menu for Categories
\app\design\frontend\YourPath\default\template\catalog\navigation\top.phtml

-simply add list items here with custom links which may not be in the categories by default
<?php echo $_menu ?>
<li id="storeHome" class="level0 nave-1 level-top first parent">
<a class="level-top" href="/index.php">
<span>HOME</span>
</a>
</li>

Header of Site
\app\design\frontend\YourPath\default\template\page\html\header.phtml
/*This is where you can change the logo, modify the top links etc*/

Footer of Site
\app\design\frontend\YourPath\default\template\page\html\footer.phtml
-comment out <?php echo $this->getCopyright() ?> replace with your own code etc

Grid/List view Code
\app\design\frontend\YourPath\default\template\catalog\product\list.phtml
-This is where you can chane image sizes and which details are shown on the home page

toolbar for pages
\app\design\frontend\YourPath\default\template\catalog\product\list\toolbar.phtml

page numbers in pagination - you can change your divider ~line 94
\app\design\frontend\YourPath\default\template\page\html\pager.phtml

breadcrumbs
\app\design\frontend\YourPath\default\template\page\html\breadcrumbs.phtml
/*change formatting of breadcrumbs*/

Login Page

\app\design\frontend\YourPath\default\template\customer\form\login.phtml

Register
\app\design\frontend\YourPath\default\template\customer\form\register.phtml

Shopping Cart
\app\design\frontend\YourPath\default\template\checkout\cart.phtml

Dashboard
\app\design\frontend\YourPath\default\template\customer\account\dashboard.phtml

Sub Categories Page
\app\design\frontend\YourPath\default\template\catalog\category\view.phtml

Tricks

Use JQuery on pages:

Links to Sitemap

/catalog/seo_sitemap/product/ -product sitemap
/catalog/seo_sitemap/category/ -category sitemap

Hide index.php in the store view:

In admin, System>Configuration>Web Tab. Under Search Engine Optimization, change User Webserver rewrites to Yes.

Check if a user is logged in:

$this->helper('customer')->isLoggedIn()

<?php
if( $this->helper('customer')->isLoggedIn() ){
?>
<li class="level0 nav-cat1"><a href="/customer/account/login/"><span>logout</span></a></li>
<?php
}else{
?>
<li class="level0 nav-cat1"><a href="/customer/account/login/"><span>login</span></a></li>
<?php } ?>

Display Product Skus: (for product page)

<p class="itemSku">Item #<?php echo $this->htmlEscape($_product->getSku()) ?></p>

Change the number of displayed products in list/grid view:

Admin -> System > Catalog > frontend
and: app/design/frontend/default/default/layout/catalog.xml

Embed Contact form in CMS page:

{{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/form.phtml"}}

Get the Sub-Category Page to display Images: (replace your

\app\design\frontend\YourPath\default\template\catalog\category\view.phtml with below code)

<?php
$_category = $this->getCurrentCategory();
$collection = Mage::getModel('catalog/category')->getCategories($_category->entity_id);

$rootcat = $_category->entity_id;
$cat = Mage::getModel('catalog/category')->load($rootcat);
$child = $cat->getChildren();
//echo $child;

if($child)
{
$helper = Mage::helper('catalog/category');
$_helper = $this->helper('catalog/output');
?>
<div class="category-custom-products">
<table>
<tr>
<td valign="top" width="405">
<h1 class="page-title"><?php echo $_helper->categoryAttribute($_category, $_category->getName(), 'name') ?></h1>
<?php
$_imgUrl = $_category->getImageUrl();
echo '<img id="ProductCategoryImage" src="'.$_imgUrl.'"/>';
?>

</td>
<td width="40">

</td>
<td valign="top">
<div class="products-grid categories-grid">

<?foreach ($collection as $cat):?>
<?php if($_category->getIsActive()):?>
<?php
$cur_category = Mage::getModel('catalog/category')->load($cat->getId());
$_imgUrl = $cur_category->getImageUrl();
?>
<div class="categoryItem">
<a class="categoryImageLink" href="<?php echo $helper->getCategoryUrl($cat);?>"><?php echo '<img class="categoryImg" width="216" height="180" id="ProductCategoryImage" src="'.$_imgUrl.'"/>'; ?></a>
<a class="categoryProductLink" href="<?php echo $helper->getCategoryUrl($cat);?>"><?php echo $cat->getName();?></a>
<a class="viewDetailsLink" href="<?php echo $helper->getCategoryUrl($cat);?>">view details</a>
</div>

<?php endif?>
<?php endforeach;?>
</div>
</td>
</tr>
</table>
</div>
<?php
}
else
{
?>
<?php echo $this->getProductListHtml() ?>
<?php
}
?>

Hope this helps someone out. I'll try to add to it if I learn something interesting.

Advanced Image Scaling & Preloading - Jquery

2011-05-28T18:54:00.000-07:00

Hi All, this is my second jQuery plugin I have written, and again want to contribute to the world. Feel free to use in any fashion you like, but please leave my name, link to blog, and email in the source code.

This plugin is called "imgResizer" and it is for pre-loading and scaling images.

You can configure it with the following options:
height : integer (defaults to 300)
width : integer (defaults to 300)
loadingImage : string (defaults to "images/loading.gif")
failImage: string (defaults to "images/fail.png")
autoCenterImage: string (defaults to "true")

**note the autoCenterImage uses relative & absolute position. If it is set to true, the image will always sit within a box with the height and width as specified. If it is set to false, the image will just be scaled to the dimensions and pre-loaded.

***you will need to create or find a loading image and fail image, and place them in your images folder.

(function($){
$.fn.imgResize = function(options)
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 24th 2011

//set defaults
var defaults = {
height: "300",
width: "300",
loadingImage: "images/loading.gif",
failImage: "images/fail.png",
autoCenterImage: "true"
};

var options = $.extend(defaults, options);
//If there are one or more elements, return them
return this.each(function() {
$(this).wrap('<div class="loader" style="height: ' + options.height + '; width: ' + options.width +'; overflow: hidden; position: relative; background-image: url(' + options.loadingImage + '); background-position: center; background-repeat: no-repeat; "/>');
$(this).css({'display':'none'});
//load the image
$(this).load(function(){
$(this).css({'display':'none'});
$(this).css({'background-image' : 'url(' + options.loadingImage + ')', 'background-position' : 'center', 'background-repeat' : 'no-repeat'});
},function(){
//load complete, begin scaling
var maxWidth = options.width; // Max width for the image
var maxHeight = options.height; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height

// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}

// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}

if(height == maxHeight)
{
$(this).css("top", "0px");
}

if(options.autoCenterImage == "true")
{
$(this).css('position', 'absolute');
//center left
if( width <= options.width){
var lef= ( (options.width- parseInt(width) ) / 2 ) + 'px';
$(this).css('left', lef);
}else{
$(this).css('left', '0px');
}

//center top
if( height < options.height) {
var top = ( (options.height - parseInt(height) ) / 2 ) + 'px';
$(this).css('top', top );
}

if(height == options.height){
$(this).css('top', '0px' );
}
}else{ //No Auto-Centering
var w, h;
h = $(this).height() + 'px';
w = $(this).width() + 'px';
$(this).parent().css('height' , h );//, $(this).width() + 'px' });
$(this).parent().css('width' , w );
}

//Fade image in
$(this).fadeIn(5000, function() {
$(this).css({'display':'block'});
$(this).parent().css({'background-image' : 'url(none)'});
});//end fadeIn function

});// end load function

$(this).error(function() {
$(this).attr('src' , options.failImage);
$(this).load(function(){ $(this).css({'display':'none'}); },function(){
//fade image in
$(this).fadeIn(5000, function() {
$(this).css({'display':'block'});
$(this).css({'background-image' : 'url(none)'});
});//end fadeIn
});//end load
});//end error

});// endeach function

};//end function resize
})(jQuery);//end function deceleration

Simple Slider jQuery component

2011-05-28T18:02:00.000-07:00

Hi All, I am sure if you're a web developer, you have used jQuery, or a jQuery plugin. I sure know I have, but now, I want to contribute one.

I have written a jQuery plugin which I call the "Sliderizer".

To use it, simply create an un-ordered list like such:

<ul class="someList">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>

then select it, and call the Sliderizer like so:

$('.someList').sliderize({ height: 200, width: 200, direction : "vertical" });
$('#toSliderize').sliderize({ height: 200, width: 200, direction : "horizontal", speed: "2000" });

You can configure it with the following options:
height : integer (defaults to 300)
width : integer (defaults to 300)
speed : integer (defaults to 1000) -This is milliseconds for animation, 1000 = 1 second
direction : string (default to horizontal) -This can be horizontal or vertical

Below is some code I have written. Feel free to copy and paste it into a js file and use in a project. Please leave my name and link to my blog. Cross Browser friendly, just needs some CSS. If you have any questions or reccommendations, please feel free to email me. Enjoy!

(function($){
$.fn.sliderize = function(options)
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 28th 2011

//Helper function for animating
function slideTheSlide(slider, direction, distance, speed){
var theDistance = 0;
speed = parseInt(speed);
var theId = '#' + slider;
if( direction == "left" || direction == "up" ){
theDistance = (distance * -1);
}else if( direction == "right" || direction == "down" ){ //right or up
theDistance = distance;
}

if( direction == "left" || direction == "right"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
left: (thisPos.left + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();

if( first.left == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}

if( last.left == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}

if( direction == "up" || direction == "down"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
top: (thisPos.top + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();

if( first.top == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}

if( last.top == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}
}//end slideTheSlide

//set defaults
var defaults = {
height: "300",
width: "300",
speed: "1000",
direction: "horizontal"
};

var options = $.extend(defaults, options);
//If there are one or more elements, return them
return this.each(function(index) {
//check if item has an id, if not give it one
var thisId = "";
var listID ="";

if ($(this).attr('id')) {
thisId = $(this).attr('id') + '_sliderized';
listID = $(this).attr('id');
} else {
thisId = "sliderList_" + index + '_sliderized';
listID = "sliderList_" + index;
$(this).attr('id', listID );
}

$(this).wrap('<div id="' + thisId + '" class="sliderized" />');
$(this).wrap('<div class="sliderizedContainer"/>');

$('#' + thisId + ' .sliderizedContainer').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px', 'overflow' : 'hidden'});

$(this).find('li').each(function(index){
$(this).css({'position' : 'absolute','float' : 'left', 'height' : options.height + 'px', 'width' : options.width + 'px', 'display' : 'block'});
if( options.direction == "horizontal"){
$(this).css({'left' : (index * options.width) + 'px'});
}else{
$(this).css({'top' : (-1 * (index * options.height)) + 'px'});
}
$(this).wrapInner('<div class="sliderizedSlide"/>');
});

$('#' + listID + ' .sliderizedSlide').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px'}); //size the slide

$('#' + thisId).css({'height' : options.height + 'px', 'width' : options.width + 'px'});
$('#' + thisId).append('<div class="sliderized_controls" id="' + thisId + '_controls"/>');

$('#' + thisId + '_controls').append('<button class="prevClick">Previous</button>');

$('#' + thisId + '_controls .prevClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "right", options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "up", options.width, options.speed );
}
});

$('#' + thisId + '_controls').append('<button class="nextClick">Next</button>');
$('#' + thisId + '_controls .nextClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "left", options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "down", options.width, options.speed );
}
});

$('#' + thisId + '_controls .prevClick').attr("disabled", true); //disable previous at start

});// endeach function

};//end function sliderize
})(jQuery);//end function decleration

Mac Vs PC - An informed Choice - Yet another Rant

2011-05-26T19:45:00.000-07:00

Before you get all charged up for an epic show down followed by a 'fanboy' flame war, let me tell you, this post will not be that. In fact, when it comes to Mac (OSX ) or PC (Windows) I use both and have for quite some time. The reason I am posting this 'rant' is because I am often asked what I use and which I prefer, or which the person asking should purchase. The only 'right' choice is an informed one, so here goes.

First things first, the title of this post is wrong. MAC vs PC is all wrong, even though you know exactly what I am talking about. A 'MAC' is a 'PC' also known as a personal computer. It is simply the same thing as any other pc, except it is made by Apple. Since Apple's adoption of Intel parts, this is more true than ever. The distinction you are referring to is the operating system being used. OSX vs Windows. Now the reason why there is even a distinction is because OSX will not run on non-Apple hardware, at least not without hacking it or using some sneaking tools. Windows however will run on pretty much anything, including Macs.

Now that that is out of the way, lets begin our comparison. The first thing you need to assess, is, what are your needs. Do you need to use OSX? If you need to run Apple software, which will only run on OSX, you may as well give up reading now and go with the Mac. Unless you want to make yourself a Hackintosh (which will take some work but is do-able) that is.

If you are only using the computer for standard programs eg: web browsing, simple word processing and image tools lets continue. For this option you could use Window, OSX or any flavor of Linux.

Budget. Lets face it, money talks. If you're looking to compare any Mac, to any pc, you will find there is a large price discrepancy. Apple products cost much more then their equivalent specked non apple counter part. You can get almost any pc with the same or better specs at often half the price of the Apple. Does this mean something? Yes. Although the immediate assumption is that Apple is a rip off, there is some sense in the "You get what you pay for category". When it comes to purchasing a new computer, company's such as Acer or Gateway will attract a lot of customers with their rock bottom prices, however, by achieving these rock bottom prices, they typically are produced with flakier components which will fail much sooner than the more expensive ones, or not perform as reliably as they should. Keeping this in mind though, if a rock bottom computer is $400 and lasts you a year, you can buy between 3-4 new computers for the price of one Mac, and with that in mind also, this means you could buy a new computer each year, continually upgrading to the newer features. I personally would still go for a mid range Dell/Toshiba/Lenovo(IBM) computer. They're not rock-bottom prices, but they perform very well. Score one for PC.

Upgrade-ability - Between Mac an PCs, upgrading in almost all instances is much easier then upgrading or changing components on a Mac. Macs are built so they are not easy to tamper with. This is good as it keeps people from modifying their components and inadvertently breaking the machine, however it also means typically if you want to upgrade your Mac, you're almost stuck buying a new one. PCs on the other hand (while it be laptop or desktop) are very easy to swap parts on, and an upgrade can be cheap. Score one for PC.

Reliability - This is a tough one to rank as in all of my years (using both) I have never had an issue with either system which I couldn't resolve easily, but both have crashed on more than one occaision. Having said that, realistically Windows is susceptible to more virus's and more prone to problems, but why is this? The reason is simple. Numbers. Windows has a much larger user base than any other OS, and because of this, it is the target for more attacks. If you're going to write a virus to try to steal information, you're going to write it to target the most amount of people, and thus, Windows. The other reason is, Windows simply runs a lot more programs than OSX, and is used by many corporations. Also If you have kids, or worked on a computer used by kids, you will often find they have installed something they shouldn't have and that is the source of the problem. Apple applications are fewer in number, and the majority of their widely used programs have written Windows based counter parts which are written by reputable authors. So for now, Score one for MAC, however I don't know how this will change in the future as Apple's popularity and number increases. There are viruses for Mac, they're simply less common.

Usability - This is another tough one to rank, as both have their pros and cons and a number of similarities. For example:

Expose = Windows flip (windows key + tab)
Command tab = Alt tab (same application Switcher)
Stacks = Same as Start menu
Dock = Quick launch bar (or install a dock tool like RK Launcher )
Finder = Windows Search (admittedly both suck and its best to use alternatives like Quick Silver / Google Desktop)
Safari = Internet Explorer (admittedly both suck and its best to use alternatives like Firefox / Chrome)

But when it comes to core usage, I do have to admit I prefer Windows. Things you take for granted in Windows (like copying and pasting a file) is not so easy in OSX. Additionally Programs such as Skype, MSN Messenger, etc work much better in Windows. I have also fallen in love with the Aero Snap and program thumbnails feature (which can be given to Mac by using either Clinch or HyperDock ).

Since this comes down to software choice, and Windows can be run on a Mac, Score 1 for both.

Form Factor - This is tie. Mac has some beautiful looking hardware, but there are many PC manufactures who create just as nice equipment. It comes down to preference. Score 1 for both.

The Verdict - MAC : 3 | PC: 5

Again this is trying to be an unbiased comparison, but PC / Non-Apple hardware wins this round.

Rant - A Web 'presence', advertising, Facebook, Twitter, etc

2011-05-26T17:32:00.000-07:00

If you know me personally, you are well aware of my disdain for Facebook and Twitter, yet my devotion to Google and all of its wonderful products and services. The majority of people who do not like Facebook or other social media outlets is due to "information sharing" or privacy issues. While I am not saying identity theft is not a concern, to these people I do think you should look at yourself in the mirror and realize... You're really not that important, and really, I doubt anyone outside of your social circle really cares about you in the least, unless of course you're someone famous.

While, I can see the value in using social media like Facebook and Twitter, to gain followers and really, free promotion/advertising, I still can't say I like it. I am likely coming off hypocritical seeing as how I have an account for each, but I rarely use either. It does frustrate me though, that now every single client I have seems to 'need' a Facebook page and 'Twitter' yet never want to update or set it up themselves. Worse is clients who think there is no point to having a webpage, and think they only need a Twitter or Facebook page. I for one, have never and will never go to a stores Facebook page before searching for their webpage. That said, if the company is of sufficient size (eg not a mom & pop shop) and doesn't have a webpage, I'll probably give up the search before looking for them on Facebook.

Now back to the original contention that the reason why people typically don't like these services is because of lack of privacy/selling of information. Most people feel strongly opposed to this, however, I think it is great!

Sit there, and scratch your head for a moment, but allow me to explain my reasoning. In life, by now, I am sure you have realized, nothing is free. Or most things at least have a price associated with them. With a lot of online resources, there is no price, because the cost is paid for by advertising. Now as much as advertising kind of sucks, at least you're getting what you want for free, so its a win-lose scenario.

Now that sounds ok, but, it gets better. Since these services typically know enough about you, they can and typically do, only show you with 'targetted' advertising, or things which are relevant to you. If I am going to look at an ad, I wont mind as much if it is at least something relevant to me, so its really not all that bad.

Final thoughts, although this wasn't covered, I don't like Facebook/Twitter, is because it never shows the 'real' person, it more shows who that person wants to be portrayed as. Typically I find I often loose respect for people after seeing their Facebook page. Some, not all, but enough for me to not like it. My Facebook wall has more or less become a glorified RSS feed with links to articles I have read of interest.

Lastly, if you read the middle section of the post, and still hate ads, do yourself a favor, and get Firefox/Chrome and install adblock plus as an extension. Or use Spybot Search and Destroy to block ads.

Cheers,

Brendon

Design Hints - Sticky footer

2011-05-26T16:07:00.000-07:00

If you're a constant web surfer, there are things you have likely come to either expect or like to see. One particular attribute I like and develop most sites to use, is a 'sticky footer'. A sticky footer is simply when the footer is at the bottom of the page (as usual),but even if there isn't a lot of content, it sits at the bottom of the page. I think this looks much better then having the footer of the website show up half way up the page if there isn't enough content.

There are two typical methods you can use / find on the net, see links below, but I will paraphrase the method I like and show you the CSS/HTML layout for it. The method I use is pretty much identical to Method one, so quick it out after. Feel free to copy and paste the CSS/HTMl below.

<html>
<head>
<title>Page with a sticky footer</title>

</head>
<body>
<style> /*The CSS, Im using inline styling for the sake of showing you*/
* {
margin: 0;
}
html, body {
height: 100%;
}

#header, #footer, #pageContent{
width: 1024px;
margin: 0 auto; /*who doesn't like a center aligned page?*/
}

#pageContent{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
/* Note the spacer must be the same height
as your footer. If too small it will not sit
properly, or if too large you will have overlap
*/
}
#footer, #spacer {
height: 150px;
}
</style>
<div id="header">
<p>Your Header Content</p>
</div>

<div id="pageContent">
<p>Your page content.</p>

<div id="spacer"></div>
</div>

<div id="footer">
<p>Your footer Content</p>
</div>
</body>
</html>

Method 1 (preferred)
Method 2

Hope this is useful!

Cross Browser Compatibility, A rant, Some tips, Some thoughts.

2011-05-26T15:17:00.000-07:00

If you're reading this posting, and you're using IE6. Please just stop. Do yourself, and every web developer a favor. Download a new browser, whether it be the most up to date Internet Explorer, Firefox or Chrome, just do it.

Since that is out of the way, lets discuss this. If you're a web developer, I am sure you have developed pages where you are given a design, you implement it, it looks great, everyone is happy, and then the 'Client's client' is un happy because your .png graphics are not working and the page looks a skew. Why? They're on IE6.

This has happened on more then one occasion where I work, and even if you know ahead of time, working cross browser, and with out-dated browsers can be a pain in but. However, I do have some tips and tricks for you which may make your life a little easier.

If the website is already built, and there are only a few things wrong, ex: pngs are not transparent, and the odd div is out of place, there are two quick and easy solutions.

Solution 1. Using a png fix. There are many png fixes available, and they can be a real life saver. They typically require you to have jQuery included, but if you're a web developer and dont know about jQuery perhaps you shouldn't be one.

Solution 2. CSS Hacks. Although I try not to endorse CSS Hacks, they can be a real life saver for saving time. Essentially, they allow you to target specific elements' attributes depending on the browser.
For example:
<style>
p{
color: #000000; /*Black Color Text All Browsers*/
_color: #ff0000; /*Red Color Text in IE6*/
*color: #00ff00; /*Green Color Text in IE7 and below */
color:#0000ff\9; /*Blue Color Text in IE8 and blow*/
}
</style>

/*IE = 8:*/ property: value\9;
/*IE = 7: */ *property: value;
/*IE6:*/ _property: value;

Alternatively, you can use if conditionals such as:






Within the 'Code' Section you can include Stylesheets or use plain css. I personally prefer the first method as I find it less messy.

A more comprehensive guide can be found here, here or here.

The Best Method, however is to be using the right tools, to help find the problems and see what is going on. I strongly recommend any web developer worth their salt to use:

Firebug (can be used in most browsers, however it is certainly best used in Firefox)
IE Tester - Handy application to view your pages in various versions of IE. Of course there is no substitute for the real thing, but this will certainly help.

Welcome to my blog

2011-05-25T18:20:00.000-07:00

Hello there, and welcome to my blog.

This is my first entry of my first blog. I typically dont have much to say about myself, as I am not the most interesting of people, however in this blog, I will try to post either humorous, relevant, or things of interest, to myself and the general public.

I am a computer oriented type of person, so the majority of my posts will revolve around that subject. I have a website, however it is currently under construction, and I only work on it in my limited free time. It can be viewed here: bren1818.kicks-ass.net when my server is online that is until I decide to actually pay for hosting and host it properly.

I can also be followed/ tweeted to on twitter. My username is @bren1818 I think...

Anyways, thanks for stopping by my blog and reading through. Hope you find something interesting/useful.

Cheers, Bren1818