Its been a while since my last post. More like a couple of years, time does fly. I am returning to blogging but this is going to be more of a personal blog related to my various hobbies and geeky activities (don’t worry there is still going to be plenty of coding and developments). I am currently redeveloping the website giving it a brand new look and cleaning up the previous posts. You can expect to see the first major post with in the next week which is quite exciting. (more…)
Category: The Void
-
CSS: Useful CSS Selectors
There is a range of fancy stuff you can do with HTML and CSS but a lot of developers are not aware of the little tricks you can do with CSS which results in developers using alternatives such as JavaScript or PHP when CSS can achieve the same results, sometimes even better as its less code to be written and downloaded by the client.
Time after time I notice websites which have used JavaScript to achieve something like a menu when most of the time simple CSS selectors such as :hover could have been used resulting in a 100% CSS menu which works the same.
Here is a must read article which outlines some of those hidden CSS selectors which make development a lot easier and faster. Did you know you could use regular expressions in CSS as I didn’t.
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
-
Making Internet Explorer development easier
Internet Explorer (IE) also known to some as Internet Exploder or the worst browser on the internet causes headaches for a lot of us developers. IE has what I would call a lack of tools or features, IE7 lacks the abilities to show images with a alpha channel which is something we take for granted these days, this is just one of many features used on modern websites which us developers have to combat against due to IE limitations.
The main issue is that people are still using IE7 and IE8 which are very out dated, both of these versions of IE don’t support many of the new technologies meaning us developers have to be careful which normally results in hours of extra time writing code specific for each browser version so that the pages render correctly.
Thank fully people have realized these issues and have written some JavaScript libraries we can use to try and fix / add features to IE to make development a lot easier.
HTML5Shiv
A great library I use often which adds HTML5 support to IE8 and below.
http://code.google.com/p/html5shiv/
IE7-JS
Tries to fix various issues with IE7 so you can spend a considerable amount less making sure your website renders correctly in IE7.
-
PHP: Get Page URLs / Directoy Listings
A simple function to easily process a website or file and return an array of all the URLs found. The main purpose I created this was to make it easy to process “Directory Listings Pages” which is a page which shows all the files and folders in a websites directory if there inst a default/index page or the directory listings is enabled.
I have used it to find images on another website (which has directory listings enabled) and display the found URLs / Images on another website. It it up to you how you use it but I am not sure what its limit are in terms of URLs per page.
12345678910111213function sr_get_urls($url){$file = file_get_contents($url);$regexp = “<a \s[^>]*href=(\”??)([^\” >]*?)\\1[^>]*>(.*)< \/a>”;if(preg_match_all(“/$regexp/siU”, $file, $matches)) {$return_array = array();for($a=1; $a < sizeof($matches[2]); $a++){if(!strpos($matches[2][$a], ‘/’)) $return_array[] = urldecode($matches[2][$a]);}if(sizeof($return_array) <= 0) return false;return $return_array;}return false;} -
PHP: Compare floats & why its different to a normal comparison
Comparing two bits of data in PHP is quite simple but there are special occasions when a simple comparison of data needs to be slightly different. One of the common issues is comparing float numbers, a common mistake is comparing two float numbers the same way in which you would compare two integers or two strings.
What does float, double or real number look like?
1.234
1.2e4
7E-10This is due to how PHP stores float numbers (also known as doubles or real numbers) which gives this type of data a very limited precision resulting in numbers being slightly off, for a more in-depth explanation please read the following article http://php.net/manual/en/language.types.float.php.
This issue only occurs once a calculation is performed on a float number.
The best way of comparing two floats to get an accurate comparison is to convert the value to an alternative data type such as a integer, string or use “bccomp” which allows you to compare 2 float data types together up to the precision you specify (bccomp can also be used to determine which of the two floats is higher or lower).
Read up on bccomp: http://php.net/manual/en/function.bccomp.php
Is Match Comparison
12345if ( bccomp( 12.498500003 , 12.49850011 , 4 ) == 0 ){die(‘These numbers match 100% as we are only using a precision of 4’);die(‘It compares 12.4985 with 12.4985 and forgets the rest of the number.’);die(‘A value of 0 was returned by bccomp as the numbers match.’);}Greater or Lower Comparison
123456789if ( bccomp( 12.482015642 , 12.4895512 , 4 ) == –1 ){die(‘bccomp returns -1 because number1 (12.4820) is lower than number2 (12.4895).’);die(‘Remember a precision of 4 is being used so the rest of the number is ignored.’);}if ( bccomp( 12.4895512 , 12.482015642, 4 ) == 1 ){die(‘bccomp returns -1 because number1 (12.4895512) is greater than number2 (12.482015642).’);die(‘Remember a precision of 4 is being used so the rest of the number is ignored.’);} -
Redirect requests for files & folders which dont exist with .htaccess
Normally if a visitor requests a file or folder which doesn’t exist your web server will respond with a 404 file not found error message, this isn’t the best looking error message and so it’s common to setup a redirect so instead of the web server showing the default page you can use a custom page which normally fits in with your websites template.
The htaccess is a powerful file and any modifications can stop a website from working correctly. If you receive 500 error messages after modifications you have done something wrong and should revert to a backup.
For example if you go to the following URL on my website you will receive a 404 error message but it is within the normally style of my website, if the redirect wasn’t present you would receive an empty white page with text telling you the file wasn’t found.
We will be using the .htaccess file which is part of the Apache web server to setup this redirect. You can read about this file here.
http://shanerutter.co.uk/2011/07/31/apache-htaccess-file/
HTaccess
The follow code needs to be placed into your .htaccess file there is two versions of this code please see the differences below. These redirects will only occur if the requests file or folder doesn’t exist. Simply replace http://newdomain.com with the domain you want to redirect to.
Example 1
Domain: http://origionaldomain.com/moo
Redirects to: http://newdomain.com/moo123456<ifmodule mod_rewrite.c>RewriteEngine onRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule (.*) http://newdomain.com/$1 [R=301,L]</ifmodule>Example 2
Domain: http://origionaldomain.com/moo
Redirects to: http://newdomain.com123456<ifmodule mod_rewrite.c>RewriteEngine onRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule (.*) http://newdomain.com/ [R=301,L]</ifmodule>Extra
The two examples above require specifying the domain you wish to redirect to but in some occurrences you may not want this especially if you’re installing on multiple domains as the two examples above will need adjusted on a per domain basis to work correctly. The following is the same as example 2 but it redirects to the websites root directory and so you don’t have to specify a domain.
123456<ifmodule mod_rewrite.c>RewriteEngine onRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule (.*) / [R=301,L]</ifmodule>For example this will redirect any requests to http://domain.com/my_fake_file.txt to http://domain.com/ as long as my_fake_file.txt doesn’t exist.
Remove Query String
It has come to my attention that the redirects will still contain the query string so a request to http://mydomain.com/fake_file.php?action=123 would redirect to http://mydomain.com/action=123, to remove the query string simply add a ? to the end of the redirect location. Below is an example using the example code above.
123456<ifmodule mod_rewrite.c>RewriteEngine onRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.*)$ /? [R=301,L]</ifmodule> -
CSS & Javascript Minify / Compression
Optimization is a key part of any website we need to keep it loading quickly for the sake of keeping visitors and also for lowering server stress. With internet connections becoming faster most developers skip optimization but mobile broadband and phones are growing rapidly which still have a relatively slow connection when compared to the common household internet connection.
Even if a website has a quick loading speed why not try to shave of half a second loading speeds it might not seem allot but it is noticeable especially on a mobile connection.
Minify (also known as compacting or compression but its not true compression) is a method used to lower the file size of text based files by removing unneeded white space, line breaks, comments and placing the code as compact together without disruption functionality. This can turn those 100KB files into 2KB files and it’s the simplest thing to do it could take your 5 minutes.
CSS Compression
I use the following website to compress my CSS files its simple and quick to use.
You simply copy your CSS into the big text field and selection the options you want for best compression I would suggest ticking all boxes and changing compression mode to greatest. Here is a comparison of my websites main style.css file on the left we have the uncompressed version and then the compressed version.
Its only 12,310 bytes difference but that’s now 12,310 bytes less each of my visitors need to download, 12,310 bytes less bandwidth I use each time then download this file and a speed increase especially for mobile devices.
JavaScript Compression
I use the following website to compress all my JavaScript files its simple and quick to use just like the css compression website.
http://javascriptcompressor.com/
This works very similar to the CSS compression website you simply paste your JavaScript into the top text field click compress and then your new code appears bellow. There isn’t any options but it does exactly what I need which is strip all white spaces, line breaks, comments and compact it together. Here is an example of one of my Javascript files, uncompressed on the left and compressed on the right.
As you can see there is a 12,000 bytes difference.
Issues
The only issues I have found is due to programming errors such as missing “;” characters, due to all the code being compressed onto one line you must make sure that at the end of all CSS and JavaScript lines you have a “;” character which you should be doing already.
You should always keep a copy of the uncompressed file but for those who lose this file you can always uncompress it using the following websites.
-
Capitalise the first letter of a group of words quickly & easily
Sometimes as a web developer I have to capitalise the first letter of each word normally for title and header tags but I don’t want to have to sit there manually capitalising each letter. HTML and CSS don’t have a native feature which allows you to quickly capitalise the first letter automatically so we have to look at using JavaScript to achieve this.
This example uses jQuery a JavaScript library which extends the capabilities of JavaScript.
It is best to place this code in the <head></head> tags after the jQuery library include link.
The following code will capitalise the first letter of each word which is in a header tag. A header tag looks like the following h1, h2, h3, h4, h5 and h6.
12345678910$(document).ready(function() {$(“:header”).each(function(){html = ”;words = $(this).text().split(‘ ‘);$.each(words, function(){html += ‘<span style=”text-transform: uppercase;”>’ + this.substring(0,1) + ‘</span>’ + this.substring(1) + ‘ ‘;});$(this).html(html);});});You can change the elements which are capitalised by adjusting the following line.
1$(“:header”).each(function(){If you want to capitalise the first letter of each word within a “h1” tag change it to the following.
1$(“h1”).each(function(){If you want to capitalise the first letter of each word which is within a element with a class of “title” change it to the following.
1$(“.title”).each(function(){ -
jQuery: Using prototype and jquery together
JavaScript is a powerful tool for a website but to extend the capabilities and functionality extra libraries can be included, the most commonly used libraries are jQuery and Prototype. Normally a website will choose either of these libraries but sometimes both libraries are required, if this is the case a small change needs to be performed to stop the two libraries conflicting.
Both jQuery and Prototype try to bind to the $ character for easy and quick referencing but due to this bind both libraries conflict leading to one loading incorrectly.
Resolving the conflict
Jquery has a noConflicts() function which when used stops it binding to the normal “$” character we can still access jQuery simply by replacing “$” with jQuery. This is how we call the noConflicts() function.
1jQuery.noConflicts();It must be placed straight after the line of code which includes the jQuery library. After that the following code will no longer work due to jQuery not binding to “$” but this will resolve all compatibility issues between the two libraries.
1$(‘#maincontent’).css(‘background’, ‘red’);The above can still be achieved by using the following instead.
1jQuery(‘#maincontent’).css(‘background’, ‘red’);You can read into this more from the official documentation found at:
http://api.jquery.com/jQuery.noConflict/Bind jQuery to another character
Typing jQuery every time we want to reference jQuery can be long winded so we can rebind jQuery to another variable for quick and easy referencing. The following will bind jQuery to “$j”.
1var $j = jQuery;Now we can type the commands used above like so
1$j(‘#maincontent’).css(‘background’, ‘red’);It has come to my attention that if call the noConflicts function and assign the output to a variable it will perform both the unbinding and new binding in one step.
1var j = jQuery.noConflicts();The example above will unbind from the normal “$” character and rebind to the new character which in this case is “j”.
I would recommend that when you include the jQuery library files that you called the noConflicts() function immediately after and then perform your binding.
Extra / Advanced
Unbinding and rebinding is probably the easiest but it’s still possible to use the “$” character even when you have unbound jQuery using the noConflict function. JQuery offers the ability to continue using the “$” character in specific instances normally with in a function or call back, this allows us to continue using “$” for all are jQuery referencing at a specific point but it will not cause conflicts between other libraries. Below is an example of code which allow you to continue using “$”.
1234jQuery(document).ready(function($) {// Code that uses jQuery’s $ can follow here.});// Code that uses other library’s $ can follow here.By providing the “$” character in the function arguments we tell jQuery that we want to temporally bind jQuery to “$” but only for the code during this function and straight after jQuery lets go of the binding and the other libraries doesn’t even know. Here is more examples.
1234jQuery(document).ready(function($) {// Code that uses jQuery’s $ can follow here.});// Code that uses other library’s $ can follow here.123456(function($) {$(function() {// more code using $ as alias to jQuery});})(jQuery);// other code using $ as an alias to the other libraryConclusion
It may not be the solution you’re looking for but it works, I prefer jQuery so would like to rebind Prototype and leave jQuery bound to “$” but Prototype doesn’t have this ability so the only solution to using both of the libraries is to rebind jQuery.
After writing this I found out about the ability to temporarily continue using jQuery alias “$” within certain instances, I have update this post and you can read these changes in the Extra / Advanced section. Using these methods gives you all your normal operation of jQuery if used correctly.
