If you have a form designed to handle file uploads which is failing due to file size then you might like this:

$arrayMaxes = array(
    'upload_max_filesize' => intval(ini_get('upload_max_filesize')),
    'post_max_size' => intval(ini_get('post_max_size')),
    'memory_limit' => intval(ini_get('memory_limit'))
);
$maxUploadSize = min($arrayMaxes);
foreach ($arrayMaxes as $key => $value) {
    if ($value == min($arrayMaxes)) {
        $minimumOfThree = $key;
        break;
    }
}

echo "The maximum file size you can upload is $maxUploadSize, this is due to the php.ini setting $mininimumOfThree";

This will calculate the smallest value that will be allowed based upon php.ini settings.

You can then incorporate this into your form logic and display so that users have a clear understanding of how large a file they can upload.

If you are at all involved or exposed to the world of web design and web development then you have no doubt heard of the phrase “responsive” web design. If you browse the popular theme sites for themes for platforms like WordPress and Magento then you can see responsive themes becoming more popular.

So what does it mean and how does it work?

What does Responsive Web Design Mean?

Responsive designs change the layout and visible content on a page depending on the width, height and other factors of the device or window rendering the page. You can generally test out responsive designs by simply unmaximising a browser window and then resizing it down to smaller sizes such as 320 pixels wide. On a normal design you would be quite lucky if the site still rendered in a readable way at that width. More than likely you will only be able to see a fraction of the page and would have to sideways scroll to see the rest of it.

On a responsively designed site, the layout would change as the screen width gets smaller. It might hide certain elements such as side columns and may make things rearrange in a more vertical way to allow them to be displayed without the need for side scrolling.

In a nutshell, this is what responsive web design means.

How Does Responsive Web Design Work?

Responsive web design works by using a CSS3 technique called Media Queries.

CSS has had the concept of media specific style sheets for quite some time. Traditionally though this was limited to print and screen, allowing for example to remove background images from a page when printing and perhaps adjust font family and size for better printing results.

The media queries functionality extends this concept significantly, allowing custom style rules to be applied based upon a range of differnt media options. The most commonly used of these for responsive web design are width and height.

The full list of properties that can be utilised with media queries include:

width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

Get Your Web Site Working Responsively

If you want to upgrade your web site to use responsive design techniques to better support the wide range of internet devices in use today then get in touch with Edmonds Commerce today to discuss how we can help you.

Some Useful and Interesting Links

http://www.w3.org/TR/css3-mediaqueries/
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
http://reference.sitepoint.com/css/mediaqueries
http://mediaqueri.es/
http://mac-blog.org.ua/css-3-media-queries-cheat-sheet/

If you need to do some HTML parsing, scraping etc then you generally have the choice of using the DOM approach to parse the HTML or using regex to pull bits out. I quite like both approaches, there are pros and cons to both so having both options available is the best to ensure you use the right tool for the job on a case by case basis.

Recently though I discovered Simple HTML Dom. This makes the DOM based approach almost ridiculously easy, especially if you are comfortable with jQuery like selectors for pulling out specific DOM nodes.

You can read all about it here:
http://simplehtmldom.sourceforge.net/manual.htm

First impressions are really good, its very easy and the lead in time from installation to using is really fast. I like that, never been much of a fan of having to RTFM for everything!

A lot of concern has been caused by the “Cookie Law” which says you must tell people that you use cookies if you do, and 99% of sites do!

Well here’s a very simple jQuery bolt-on that deals with that, and although visitors need javascript enabled to see it, you have made “best efforts” to inform them, and on any eCommerce site you’re going to have a “this site requires javascript message” anyway.

The file to download is from github (isn’t opensource great?) here and is as simple to implement as add the script file to the head and somewhere on the page insert the following :

<script type="text/javascript">
    $(document).ready(function() {
      $.cookieBar();
    });
</script>

The example page is also on github : http://carlwoodhouse.github.com/jquery.cookieBar/.

If you are having performance issues with your Magento store and you are running on a dedicated or VPS server that you think should be up to the task of running your store properly but you continue to have performance problems then this post is for you.

Having decent server specification is only the first step on the road to having a high performance Magento store. Without proper configuration your server is not going to make the best use of its resources and that could make the difference of literally seconds or even tens of seconds of page load time.

The first and most important thing to check is that you are running a PHP opcode cacher such as APC. Opcode caching takes your PHP source code and compiles it to opcodes and then stores this in a cache. This opcode is actually what is run when people visit your store and the process of creating it, especially if you have a very large application with lots of file (like Magento), can be a real performance bottleneck. This problem is easily resolved by having APC installed and configured. If you are not sure, ring your hosting company and find out and if you don’t have it running, ask them to set it up for you.

The next thing to check is MySQL configuration. The standard MySQL configuration defaults were set when server hardware and memory was a tiny fraction of what it is today and that means that the configuration is generally way too sparse with allocation of memory for caching and other optimisations. Tweaking MySQL can be a little tricky, its definitely not something you should do if you are not sure, but it is well worth getting someone to optimise your MySQL configuration.

After that, the next major performance gain with Magento is to make proper use of block caching. Magento has a brilliant built in feature where every block (page section) can be cached so that next time someone visits the page, the logic used to generate that section of page (for example a best sellers list) does not have to be run, we simply redisplay the cached copy of that block’s HTML.

Beyond these three steps there are still many more things that can be done to improve the performance of your Magento store. If you would like professional help getting the best out of your server and Magento with a view to getting the lowest possible page load speeds then get in touch with Edmonds Commerce today.

Having issues with javascript dependencies or awkwardly structured html defining objects you need before run?

This is a little trick I used combined with csnover’s roundrect.js to provide IE versions < 9 with border-radius rounded corners.

Create a separate source file e.g. mylateloader.js and in it include the following code :-

function myInArray(needle, haystack) {
    var length = haystack.length;
    for(var i = 0; i < length; i++) {
        var str = jQuery(haystack[i]).attr(‘src’);
        if(typeof(str) != ‘undefined’ && str.search(‘.*’+needle+’.*’) > -1) return str;
    }
    return false;
}

jQuery(document).ready(function(){
    var script = document.createElement(‘script’);
    url = myInArray(‘mylateloader.js’, document.getElementsByTagName(‘script’));
    script.src = url.replace(‘mylateloader.js’,'mycoolminifiedfile.min.js’);
    document.getElementsByTagName(‘head’)[0].appendChild(script);
    setTimeout("mycoolobject.run()",2000);
})

That way, at document.ready(), mycoolminifiedfile.min.js is loaded from the same directory on the server as the late loader js and 2 seconds later, the mycoolobject.run() is called.

Okay, this is hacky but it really works, and saves a lot of time!

To copy the css selector of an element in chrome, you need your developer tools open popped-out of chrome, not docked but here is the trick :-

Inspect the element that you want, be sure it’s selected in developer tools, then press F12. This will open a second developer tools window inspecting the first developer tools.

Then, insert the following two lines of javascript magic, one at a time – the first pulls jQuery into the developer tools and the second runs a function to build the css path and output it into the console!

First jQuery :

var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Then the path :

path=""; function addtopath(str) { if(typeof(str) != 'undefined') {path = str+' '+path} } jQuery('.crumbs span').each(function(){addtopath(jQuery(this).attr('title'))}); path;

You can try stringing them together into one command, but sometimes jQuery doesn’t seem to load fast enough.

When creating use input forms in Magento it’s important to do as much validation on the client side as possible to make the user experience as smooth as possible.

When validating that one of a group of radio buttons is selected all you should need to do is add the class “validate-one-required-by-name” to one or more of your radio buttons. The message “Please select one of the options.” will appear under every radio button that has the class on it if one of them is not selected, so use it strategically.

Often you will see SSL warnings or errors related to insecure content being displayed on a secure page.

This could be as simple as one javascript file or image that is being included via http rather than https, though some times this can be a bit tricky to track down.

The easiest solution is to hit this site:

http://www.whynopadlock.com/

This will give you a clear report of the problems and should help you quickly find and fix them.

Alternatively if you use Chrome you may see the details in the Javascript console.

Once you know what elements are being called by http as opposed to https, you simply need to make them use https or remove them altogether.

Ever need to quickly test some HTML that you copied from some where?

If you have Firebug installed, you can open a new tab, go the the HTML tab in Firebug, click edit and paste your HTML and Firefox will render it. This is faster than having to open a text editor, paste the contents and save the file, but JavaScript on load events won’t fire.