Category Archives: Web Development

Anything web development stuff!

Shims and Polyfills Note

<!–[if lt IE 9]>
<script src=”js/html5shim.js”></script>
<![endif]–>

This is a shim or a way to make html5 work for older browsers. Its more of a work around for browsers who does not support new html5 tags like <article> <section> <header> <footer> <aside> etc.

There are also shims out there that can be used like <canvas> shim, <svg> shim etc.

A polyfill is also a work around or a plugin for features not currently supported by the browsers or technology at hand. For example css3 transform property , or a javascript version not yet updated.

My JQUERY reference

var i = {one:1,two:3,three:[{four:8},2,3]} = Array format access by: i.one, i.two, i.three[0].four returns 8, i.three[2] returns 3.

var i = [‘value’,’value2′,’value3′] = Another way to create array
i.one = To access a variable in an array

$.browser = Is an array that will loop through to find the browser you are using.It also contains the version.
$.support = Contains browser capability. To access it you go. $.support.[name], possible values are:
boxModel:if browser supports w3c box model.
cssFloat:if css float i used to acess css float value.
hrefNormalized: doesnt alter the results of getAttribute(‘href’). htmlSerialize: if properly serialize using inneHTML. leadingWhitespace: if browser preserves whitespace with innerHTML.
noCloneEvent: if does not clone handlers when cloned.
objectAll: if getElementByTagName returns all elements. opacity: If browser supports opacity styling.
scriptEval: if appenchild/createTextnode executes.
style: if getAttribute(‘style’) return the correct inline style.
tbody: if browsers allow table without tbody.

JQuery Selectors

$(‘#id’) = Selector of an element
$(‘p’) = Select all P tag in the page
$(‘p.class1’) = Select P with class1 as the class
$(‘div p.class1’) = Select p class1 inside div
$(‘p’).size() = return number of P in the page
$(‘p:first’) = Select the first occurence of P
$(‘p:last’) = Select the last occurence of P
$(‘p’)[0] = Select the first occurence of P but NOT Jquery element just normal DOM.
$(‘p > strong’) =Select <strong> with direct parent <p>
$(‘#div1 p:even’) = Select :even p elements inside #div
$(‘#div1 p:odd’) = Select :odd p elements inside #div
$(‘#div1 p:not(.class1)’) = Select all p but not p with class1
$(‘#div1 p:eq(0)’) = Select p first index
$(‘#div1 p:gt(5)’) = Select all p with index greater than 5
$(‘#div1 p:lt(5)’) = Select all p with index lower than 5
$(‘#div1 p:empty’) = Select all p with no children.
$(‘#div1 p:contains(text)’)= Select all p that contains specified text.
$(‘#div1 p:has(strong)’) = Select all p that has strong tag.
$(‘#div1 p:visible’) = Select all p that are visible.
$(‘#div1 p:hidden’) = Select all p that are hidden.
$(‘#div1 p:[style]’) = Select all p with style property
$(‘#div1 p:[border=1]’) = Select all p with border=1 property
$(‘#div1 p:first-child’) = Select all p that are first child of parent #div1
$(‘#div1 p:last-child’) = Select all p that are last child of parent #div1
$(‘#div1 :input’) = Select all input inside #div1.
$(‘#div1 :text’) = Select all input text inside #div1.
$(‘#div1 :radio’) = Select all input radio inside #div1.
$(‘#div1 :checkbox’) = Select all input checkbox inside #div1.
$(‘#div1 :enabled’) = Select all elements that are enabled inside #div1.
$(‘#div1 :disabled’) = Select all elements that are disabled inside #div1.
$(‘#div1 :checked’) = Select all elements that are checked inside #div1.
$(‘#div1 :selected’) = Select all elements that are selected inside #div1.
$(‘#div1 p:nth-child(3)’) = Select the 3rd p inside #div1.

Continue reading My JQUERY reference

Bootstrapping – Relative Path trailing slash / (PHP)

When developing a site with bootstrapping in mind, (by the way bootstrapping is a technique in web development when all request gets directed to one page that is usually index.php for example a request to page, http://domain.com/user , http://domain.com/profile/edit etc. is handled by index.php with the help of a mod_rewrite script in the root directory. And creates a slug url for SEO.) when this is done an issue will occur relating to relative path and pointing to static files in your site such as images, css and scripts especially . Imagine this scenario:
Examine the file structure

public_html/index.php
public_html/css/style.css
public_html/images/image1.jpg
css/root.css

When someone request a url from your site eg. “http://domain/user” and in the page your css points to “css/style.css”, your page will come out alright but when they add a slash at the end “/” “http://domain/user/” like so, your browser will interpret the slash as a folder location to “user/” so if your path to your css is “css/style.css”, your browser will look for the file in “user/css/style.css” which in this case the folder doesnt exist and so your website will come out really messed up.

So remember to fix this when you are developing a site based on bootstrapping. You can fix this either by .mod_rewrite or simply via your PHP script by checking the trailing slash at the end from the REQUEST_URI variable.
Until next time.

JQuery Plugin Must haves

As I am currently working on a website right now. And Im using JQuery as my javascript library and its the way to the future when it comes to DHTML and this accompanied with plugins that are useful to make developing easy and fun. Here are the plug ins I use for my reference your and yours.

* JQuery Form Submithttp://jquery.malsup.com/form/
This will let you submit forms via AJAX automatically that can save you time doing AJAX. This also lets you upload files via ajax and its pretty daunting doing file upload via ajax.

*JQuery Text Resizer – http://plugins.jquery.com/project/TextAreaResizer
This allows your text area to be resizeable its pretty easy to set up.

I will update this list regulary once I come across other useful plug-ins.

PHP Header Function – Redirect – Exit

I was developing my site when something weird happened , mostly sessions get UNSET in the end of my php script, but when developing In the middle script a redirect function like the “header(‘location: http://mydomain/etc’);” I assumed once redirected the any script below it wont run anymore but I was wrong.

Then as soon as the header function has been called, the script below it ,has triggered as well while performing redirect. At first I didnt know what was wrong with it until I just unknowingly added EXIT; after the header function and everything works fine.

So for my reference ALWAYS REMEMBER TO PUT an exit function AFTER the redirect function so that there wont be any weird issues developing your site along the way. Especially when your developing using PHP.