Monday, 30 September 2013

PHP mathmatical assignment operators

This is another post on some basic PHP stuff which isn't so obvious to new PHP developers, even some people who've been coding for a while didn't know this just because it hasn't been brought to their attention.

What are they?

They are just short cut ways of taking a variable and performing either an addition, subtraction, multiplication or division on them with less code. I've put examples below including what they do and what the 'long hand' way of doing it would've been.

Mathematical operationLong handShort hand
Addition$var1 = $var1 + 2$var1 += 2
Subtraction$var1 = $var1 - 2$var1 -= 2
Multiplication$var1 = $var1 * 2$var1 *= 2
Division$var1 = $var1 / 2$var1 /= 2


One more

There is one more which is the modulo assignment operator. I've put this separately as it's not as obvious as the the ones above (unless you know your maths of course). This divides the first number (called first operand) by the second number (called second operand) and the result would be the remainder of the division (called modulus).

Mathematical operationLong handShort hand
ModuloN/A$var1 %= 2


Further reading

Monday, 23 September 2013

PHP empty(), what is empty?

Using the PHP empty(); function can be really helpful in development but also is one of the functions which cause a lot of errors, especially when starting out with PHP, as what PHP considers to be empty isn't as obvious as it should be.

What does empty(); consider to be empty?

Here's a list of what the PHP empty(); function considers to be empty:
  • "" - An empty string
  • 0 - The integer 0, this can catch people out.
  • 0.0 - The floating point 0.0
  • "0" - The string 0
  • false - Boolean false value
  • array() - An empty array
  • null - A null value

Common mistakes

Probably the most common one that catches people out is either the integer 0 or string 0 being considered empty, even though it looks like there's a value in there. Possibly one of the most common places developers get caught out with this is validation, if you're validating a form field with a question like "How many cars are in your household," and the user enters "0" when you validate with PHP to check that they've answered the question by using only the empty(); function on the value of that field then it'll tell you it's empty even though the user has entered a value.

How to use empty();

I thought I'd also give a quick example of how to use empty(); encase someone reading this hasn't heard of this function before. It's really simple.

$val_field = empty($form_name); // $val_field will either be true or false depending on if $form_name is considered to be empty or not

Further reading

Friday, 20 September 2013

PHP double quotes vs single quotes

This is something I've been unsure about for quite a while but as it's such a minor thing really I haven't actually looked into it or given it much thought. Generally when using quotes to output a string in PHP should you use single quotes or double quotes?

Turns out in my opinion double quotes are best used most of the time, here's why.

Double quotes

With these you can put variables directly into your string and it'll display the value of that variable without the use of any concatenation. I've noticed that generally in my PHP programming when I'm putting variables in a string to be output to the browser I want the actual value of it to be displayed, not the name of the variable itself.

Single quotes

Every thing contained within these is basically displayed as it's written, for example if you put a variable in the middle of the string (without any concatenation) this'll output the name of that variable to the browser but not the value of the variable.

Examples

I thought rather than writing to much above about them I'd have a table of examples instead as trying to explain it would require some 'jargon' and depending on how well you understand programming it could become hard to understand what's going on.

For this example $test = 'Neil'; and $test[0] = 'Nand';
PHP codeOutput
Single quote
echo '$test is so, so great';$test is so, so great
echo '$testArray[0] is so, so great';$testArray[0] is so, so great
Double quotes
echo "$test is so, so great";Neil is so, so great
echo "$testArray[0] is so, so great";Nand is so, so great

Something to note

Something some of you may have noticed in my examples table that when using double quotes if you tried to echo out the string "$tests so, so great"; then PHP would look for the variable $tests (which doesn't exist) rather than $test.

Stopping this happening is easy, when you put a variable in the string surround it with {}, to correct the example about it'd be echo "{$test}s so, so great";

What is concatenation?

I mentioned concatenation earlier on in this post, encase anyone wasn't sure what it means I've put two examples below. The first is without concatenation (which will display the variable name and not its value) and the second is the same statement written with the variable & string concatenated so it'll display the variables value.
echo '$test is so, so great";
echo $test . 'is so, so great';

Wednesday, 21 August 2013

REM units explained


Been a while since I last posted, there just isn't enough time in a day!

What is a rem
This is a unit of measurement used by CSS but I've noticed a few places where people have been a little confused about what it is, how to use it and if it's supported well enough to even be used. I'm not 100% certain of this but I think rem stands for Root EM, the em refers to the em measurement used in CSS and it's a method of using the em unit measurement relative to the root font size rather than it's direct parent.

Overview of the em measurement units
Firstly I'll give a quick break down of how the em unit of measurement works, it is basically a measurement size that is relative to it's parents. That basically means if you have your body text set to 16px then for any direct child elements 1em will be equal to 16px0.5em will be equal to 8px and so on.

Now that's all great and has many advantages over the pixel (px) based measurement which I won't go into here but a problem can occur when things get nested.

For example if you have the body of your site set to 16px and then have a list nested within another list with the font size for list items set to 0.5em what happens is the list items in the top level list have a text size equal to 8px but because the em unit is relative to its parent the nested lists list items will have a font size of 4px.

How rem units solve the em nesting problem
The rem unit of measurement solves this by basing its calculations of size on the root (html / body element) text size of the document rather than it's direct parent.

Using the example above both the top level lists list items & the nested lists list items would have a text size of 8px.

That's basically all I wanted to say on this, there's plenty of more resources out there on rem units but I wanted to keep this explanation short and simple which will hopefully make it easier to understand. If anything is unclear here feel free to leave a comment and I'll get back to you.

Further reading

Tuesday, 25 June 2013

Why sitemap.xml files are important

Before starting this post I just wanted to say I'm really sorry about not having posted in quite some time, I've just bee really, really busy at work. Still am but will hopefully be making time to make more regular posts here.

Introduction

I've done a bit of reading recently about why sitemap.xml files can be useful for Google to index your sites, they can actually make a huge difference. I should point out that sitemap.xml isn't only used by the Google search crawler (AKA Google Bot) but they are basically the main 'player' in search engines.

Why have sitemap.xml?

Well for a lot of sites like a 'standard blog' or a lot of other sites where pages link to each other it isn't a massive issue because the Google bot can get to & index every page pretty easily through the links within the site. A problem can occur if you have a site with dynamically generated pages, it might get so large that it is no longer even be possible to have links to every page and as a result the Google bot may never find those pages. An example of a site of this size would be StackOverflow.com.

In those situations it takes the Google bot a lot longer to find every page (if it finds them at all) so a sitemap.xml file really helps to get those pages found and indexed by Google, if you want a good example of this happening in real life read this post by Jeff Atwood on Coding Horror about Stack Overflow not being indexed well by Google without sitemap.xml. Of course I'm sure even if you are running a smaller site where all the pages are discoverable 'naturally' by the Google bot then it still might help you but not to the same degree and if you left sitemap.xml out all together on a smaller site you might not even notice.

Sitemap.xml limits

There are limits to the size of this file, it cannot be any bigger than 50M and can contain no more than 50,000 links according to a Google webmaster support article, with such large limits this generally isn't a problem but I don't know about other search crawler restrictions.

The other limit (which is actually more of a scope issue) is that links in the sitemap.xml file can only be related to other files in the same directory as the sitemap.xml file or its subdirectories, you can go as many directories deep as you like, so it won't work with any files which are in a parent directory or anywhere further up the tree structure. Google's reasoning for this is that they can be pretty certain that all the content in the directory and sub-directories to where you've placed the sitemap.xml file are controlled by you but further up or across than that could be outside of your control. For example on a shared hosting server you could have several sites all on the same 'level' and if sitemap.xml could go to any directory that isn't one of its descendants you'd be having Google index everyone else's site on that server.

What to do when you reach the sitemap.xml limits

At this point you'll need to split the file into multiple ones, which is just fine according to the Google webmaster blog. The best methods of splitting them up isn't to just start a new one each time you reach either the 50M or 50,000 links limits but to split them in an organised fashion. There are various ways of doing this and it really depends on your site and how the content has been structured, for some ideas check out the Google webmaster blog post about having multiple site maps & a post on SEOmoz on having multiple site maps.

How to make a sitemap.xml file

Well if you are making one 'by hand' or making a script which will generate them for you check out this support article by Google webmasters which gives a good overview of how the XML file should be structured.

If you are basing your website on a CMS which supports plugins then there's a good chance one already exists for creating sitemap.xml files, for example this is one I use for generating sitemap.xml files in WordPress sites.

Tuesday, 16 April 2013

The Non-Designer's Design Book review


Introduction

I'm planning on reviewing books related to web design & development that I read and this is my first, hopefully they'll give other people a good idea on what to (and not) read.

So what is this book about? Well it's aim is to teach design principles to non-designers who don't naturally have that 'creative eye' or whatever you want to call it, personally I think it does an amazing job! The way it has been written makes all the principles it teaches very easy to comprehend and read and due to the fact that a lot of the book is images used to illustrate what she's talking about you quickly go through the whole book, strangely I actually found myself wanting to read the book. That doesn't often happen with books I read, although that's probably because most of them are quite technical.

Review

Well the main part of this book goes on about the main principles of design layout and gets you to understand them so you can spot and name each one. The reason for this is based on the thinking that if you can name the principles and explain them in clear definitive words then you have 'power' over them and can implement them knowingly to make great designs.

I think this is a great approach to teaching design to a non-designer like myself as it gives me clear and definitive principles to think about when creating a design and to stick to them until you get a lot of practise and know when to break away from them. One of the key things is to follow the design principals taught in this book and only ever deviate from them when you can clearly describe the reasons why you are doing it. Design to me isn't about making things pretty but about basically about usability which in turn makes a site look much better than anything I'd naturally come up with. These principals will aid usability a lot, much more than the book states.

So what are these principles? Well I've listed them below but you'll need to read the book for a good explanation of them as I don't think I could do it any where near as well.

  • Proximity
  • Alignment
  • Contrast
  • Repetition

After this main section which deals with the layout of pages there's a smallish part of the book dedicated to colour and how to use it which is good at giving the very basics, just what I need but there's not a large amount on the subject. I'll probably need to read up more on the subject to get a better understanding though.

Then onto the next large section of the book which deals with typography, which for the life of me never really seemed worth bothering about before. After reading this however I can see just how typography really can make a difference and how to tell what is best suited to your needs, I have to admit though I need a lot more practise and to read more on the subject to really understand it but this does give a good grounding and opened my eyes to its actual importance.

Concluding thoughts

If you're like me and are a developer who is far more into the technical side, then buy this! Even if you're not looking to move into design I personally feel that not only understanding your main subject area really well but everything around it is what makes you a great developer (or anything else). Which is why I'm starting to learn more design and know a lot about how networks work (as the World Wide Web is built on a network of networks) and learning many other subjects.

Where to buy

I'm not going to lie, here's my Amazon affiliate link to buy the "The Non-Designer's Design" book which I get money for if you buy the book by clicking it. That's not the reason why I've written such a good review though, I genuinely think this is a great book. I'd be grateful if you clicked it if you are going to buy from Amazon anyway, doesn't cost you any extra.

Friday, 12 April 2013

isset() or array_key_exists() ?


Introduction

Firstly I wanted to say I'm sorry for not posting much recently, unfortunately they've been a few personal emergencies which have come up recently so I've not been able to get anything written.

Recently a work colleague asked a really good question, what the difference between isset() and array_key_exists() when seeing if a specific key exists inside an array?

The answer

Well the main difference is that isset() returns false if the array key exists but the value is NULL where as array_key_exists() will return true.

The other difference is that isset() seems to be faster, I've put a link below to a comment on the PHP manual which states this and there are other posts on the Internet if you Google it but I've not tested it out myself.

What do I think?

If you know for certain that they array key will not have the value NULL then use isset() as it's quicker but it's only slightly quicker so if you're not certain then use array_key_exists() as it's far better lose that tiny bit of speed (probably unnoticeable in most cases) rather than get a false positive.

Further reading

http://www.php.net/manual/en/function.array-key-exists.php#82867
http://stackoverflow.com/questions/700227/whats-quicker-and-better-to-determine-if-an-array-key-exists-in-php

Tuesday, 5 March 2013

PHP function with a variable number of arguments

Introduction

If you have ever needed to make a function in PHP and have it accept any number of arguments (rather than a fixed number) then this is the post you've been looking for.

Now I should point out this is probably bad coding practise and you should structure your functions as methods in a class with clearly defined roles within the class so they don't need to accept a varying number of arguments. Really what you should be doing is re-thinking the way that class is working / architected, this isn't always possible though due to business / time constraints and working with someone else's code which is why I've written this post.

The code

function foo(){
    $args = func_get_args();

    var_dump($args);
}

foo('bar');

Code Explanation

This block of code is pretty simple, there is a defined function which doesn't have any parameters set and inside of it the func_get_args (a pre-defined PHP function) is called which gets all the arguments passed to this function and puts them as an array in the $args variable. All of these arguments are then displayed to the screen using var_dump.

This function is called and has the argument "bar" passed to it which will be displayed to the screen with var_dump despite the function having no defined parameters.

That's it. Remember you should avoid using this but if you ever really need to use it, that's how.

Monday, 18 February 2013

Responsive design - em or px for breakpoint measurements


Introduction

As I stated in an earlier post this year (actually my first post of the year) I'm going to be writing posts on responsive design as I'll be building my first site using it this year. This is about what I've learnt through trial & error about what measurement to use when defining breakpoints.

Using em measurements for breakpoints

I read a few posts on Google basically stating that defining your breakpoints in em measurements instead of pixels has the benefit that if a user increases the browser text size then the page will switch between responsive breakpoint designs as well as switching at different screen / browser window sizes.

This sounded great to me as I'm sure people have the text size permanently increased on their browser / operating system, I personally do on my mobile phone and giving them a design which best suited the larger text size and not just the browser window size seemed like a great idea. I started to have problems though while actually trying to implement this in a HTML & CSS wireframe I was making (I got a bit carried away with that wireframe and pretty much made the site, but that's for another post), mainly with mobile phones.

My problem with using em for breakpoints

I had the problem that some mobiles phone browsers have the default font size larger than 100% to compensate for the smaller size text the user will see on a website designed for desktop browsers. This in-turn would show a page layout that I had designed for a smaller screen size and as a result I didn't feel the user was getting as good as an experience as they could.

Here's and example of what I mean, I had a layout designed for large screen phones like the Galaxy Nexus but when using the default browser that comes with Android it would showed the design made for the really small Android phones. So I had one of the biggest screened phones on the market displaying a design for one of the smallest phones on the market, this confused me for a long time as I couldn't see why it was doing this but other browsers were fine on the same phone. Then I worked out the default browser text size for the Android browser is larger than 100%.

This was looking ridiculous to me and I really thought people were losing out on a large part of the experience, after all the text wasn't getting so big that it would've broken my design for large screen phones anyway

So I switch back to pixel measurements for breakpoints

In the end I decided using pixel based measurements for breakpoints would certainly be the better way to go as using em had caused me so many problems and when I actually used it, it didn't seem to work as well as I'd hoped or imagined.

I however still had to take into consideration that some people use text zoom on their browsers and some browsers have the text zoomed in by default so I used the same method I've been using for years which is to make sure the design of the site is fluid enough to take text size changes into account. Also to help mitigate this potential problem is to make sure your responsive breakpoints for smaller screens are designed so that text size isn't an issue and users won't have to zoom in or increase text size anyway.

Concluding thoughts

If anyone reading this has had different results when using em measurements for breakpoints please let me know as part of the reason I gave up on them was to do with my frustration of not realising some browsers default to a zoomed in state. However I also think using em measurements wasn't very useful and having a fluid design which can cope with various text sizes at the different breakpoints you set for your design is a much better way to go to deliver the best experience to users.

Further reading



Wednesday, 13 February 2013

Opera move to the WebKit rendering engine


Introduction

For those who haven't heard yet Opera will start using the WebKit rendering engine and V8 for its JavaScript engine in future releases of the browsers. They were / currently are using Presto as their rendering engine and Carakan as their JavaScript engine which are both proprietary and developed by Opera.

Why make the change?

If you want to know what they say then read their blog post but I think it really comes down to cost (like most business decisions) and it's just not cost effective to develop their own any longer. Originally they made their own as there wasn't any decent open source alternative, the only two decent rendering engines out there were Internet Explorer's and Netscape's both of which were proprietary at the time.

Developing their own engines I'd guess is no longer setting them apart from the competition either any longer either as they're all pretty standards compliant and quick at rendering.

What does this mean?

Well not much really, you just need to keep developing to standards and testing like normal but it does mean there's one less competitor in the market of rendering engines now.

In one way this is good in that more browsers using the same rendering engine means they'll be less 'quirks' and oddities between them and we'll also have Opera developers contributing and improving both WebKit and V8, they seem like pretty good developers too so that must be a good thing.

On the other hand it means less competition and that never seems to end well, although currently there's still Trident and Gecko out there, both of which are large and certainly make good competitors.

Further reading

Tuesday, 5 February 2013

MediaElement.js loads full video before streaming


Introduction

A few days ago I was using MediaElement.js to put a video on a website, nothing to special.
For those that don't know what MediaElement.js is, it basically turns a HTML5 video tag into a Flash player if the browser doesn't support the video tag or doesn't support the video format(s) your using. See their website for more details, it really looks quite good and is recommended by a lot of people; my first time using it though.

The problem

The .mp4 file I was using (rendered out from Adobe After Effects) loaded fine on the website but before it started playing it had to buffer the whole video, which meant quite a delay between the user clicking play and actually seeing the video. Not ideal.

So what caused this? Well I'm no video expert so can't say for certain but this is what I can gather by reading about a little, although it was really only a little bit of reading I did. It seems to be some h.264 (possibly all?) files have the index saved at the end of the file and to play a video while it's still loading it needs to be at the beginning  What the index file does exactly I haven't looked into but at a guess I'd say it has information about the video and is the video equivalent of a database index.

The solution

How did I solve this? Well with a bit of Googling about, in my situation an Adobe Air program called QTIndexSwapper which you run on your local machine, select the video file & it saves out a new file with the index moved. That's it, works really quick too.

Another solution

Another solution which was suggested on StackOverflow but for a slightly different scenario seems to work according to replies and comments there (I've not tried it myself though).

This is for situations where a user uploads a video and you need the index moved by PHP on the server after it's uploaded rather than doing it manually yourself. There's a class hosted on Google Code called moovrelocator which does exactly this, I haven't used it personally so can't comment much on it.

Sunday, 3 February 2013

Domain & hosting separation


Hello,

Just a quick post, I just read about this myself somewhere else but can't find the link although that post just mentioned it in passing. The basics of it is to keep the company you have your domain hosted with and the place where your website is actually hosted separate as that way if someone hacks one of them they haven't got access to everything.

I've always done this but I've never thought of it from a security perspective, I've always wanted it them separated encase I want to change hosting provider (I've had a few bad ones) that way they have no control over my domain if they get awkward.

I've got another post lined up about Wordpress v3.5.1 which will hopefully be done soon, but researching into all the changes is taking more time than I thought!

Monday, 21 January 2013

Upcoming responsive design posts

Sorry!

Again it's been a while since I last made a post but I'm hoping to make much more of an effort this year to post a lot more as I've been trying for the past few months to manage my time better and be more productive, which has been going well so far.

Also hope everyone has had a great New Year and Christmas!

Introduction

So I thought that I'd write a post about some of the over arching topics I'll be writing about on this blog this year.

Responsive design

Currently I'm re-developing my climbing clubs website so it'll be a better experience for users on smaller screens (like phones) and also for users of larger screens. I'm using responsive design techniques for this and as I'm going through I'll be posting about responsive design related topics, some of which I feel aren't covered in many other blogs or websites.

Once I've finished the website I'll be posting a series of posts about how I started and the process I went through to make the site and a bit about some of the problems I encountered but I'm hoping to cover most of the problems in blogs posts leading up to that series. I'll be waiting until the end of the project so I can write a nice series of posts which all relate to lead onto each other which will be a lot easier once I've finished and know what I'll be writing about from start to finish and I'll be able to post them on a regular schedule as they'll hopefully all be written.

PHP Secure login class

I'm going to finish of my PHP Secure login class soon (I know I've been dragging that out) but I'll be back on it soon, currently working on the wireframe of my climbing clubs website homepage (although I got carried away and have basically built the homepage, so it's not really a wireframe now). I'll only be finishing off the 'version 1' of the project because I want to read up more on OOP and MVC patterns and see what I can learn from those to implement in this project before going much further with it, that's the main reason I've been holding back a little on it.

Following up on previous posts

I've also gone through all my old blog posts recently and corrected a few typos I noticed, added a little bit extra content to some (I've made it obvious in the post what was added & when) and I've also made a list of blog post series which I haven't finished and topics I've stated that I'll write about another time but so far haven't.

Wordpress

The only other thing that I'll be doing is moving this blog over to Wordpress, hoping to get that done this week sometime as I have some really good posts lined up which I hope will generate some comments!