stoimen.com/blog
web developing
Change the Viewport, be Ready for the iPhone!
Author: Stoimen10 Mar
Sites for mobile
Have you ever noticed that once you start designing a site for mobile, as iPhone and Nexus One from Google are, the site is looking really ugly! These two devices in particular, as may other using Opera Mini for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.
This is nice because news sites as cnn.com or lemonde.fr are full of text & image information and once zoomed in they fit the screen – very nice feature of the browsers. However if you’d like to design a site for mobile the bad part comes here. Yeah you know how to detect the browser, that was a topic of one of my previous posts, but even than you fully functional, but less decorated site is scaled again and looks more ugly than the full version of the site.
How to make a site visible in mobile …
Look at the http://mobile.twitter.com – the problem is that if you open this link with a normal browser, not from mobile, you’ll get redirected to the twitter.com and you cannot see the difference.
You can see how it’s made on …
The digg’s mobile version. Look at http://m.digg.com. This time you can see the different approach just by looking at the source code. Pay attention to meta tag in the head – it simply says – “don’t scale”. Nice thing to notice!
Don’t scale my site anymore:
<html> <head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> </head> ... </html>
PHP if-else-endif Statements
Author: Stoimen10 Mar
PHP: if
A typical web developer knows exactly how a PHP if statement looks like:
if ( expression ) { // if the expression was true proceed here } else { // there was a false expression }
HTML mess with PHP
When it comes to merge PHP and HTML the things are becoming ugly. Indeed most of the template systems as Smarty are improved and developed to overcome this issue, however when working with a native PHP code with no template system or with template system where the PHP code is allowed the things are really bad.
Let me show this in a breve example. Image you have to show different formatted HTML depending on a PHP expression. Something like that
<?php if (expression) { ?> <div class="message">OK. Your registration is successful</div> <?php } else { ?> <div class="error">Something went wrong! Please try again later! </div> <?php } ?>
Now you can see how difficult to maintain this code is when it doesn’t make use of only one code of HTML markup. Imaging you’ve to print differently formatted tables! Indeed the PHP curly brackets are different to follow.
PHP: the different IF syntax
So there is a PHP syntax that tries to help you manage this. You can write more human readable code like this:
<?php if ( expression ) : ?> <div>message goes here</div> <?php endif ?>
Thus you get the ENDIF instead of only one curly bracket. That’s indeed readable enough. In fact you can use this syntax with any conditional or loop statement in PHP:
<?php foreach($array as $key => $val) : ?> <div class="message"><?php echo $val ?></div><br /> <?php endforeach ?>
To return in the previous example the code above should be transformed in that:
<?php if ( expression ) : ?> <div class="message">some message here!</div> <?php else : ?> <div class="error">some error here!</div> <?php endif ?>
PHP: detecting mobile device
Author: Stoimen9 Mar
HTTP_USER_AGENT
Beside that most of the responses of $_SERVER['HTTP_USER_AGENT'] may return, it appears that this is the most reliable way to track down a user agent with PHP. It is weird that most of the clients, i.e. Safari and Chrome will return something with Mozilla in it’s strings, but however it’s enough to track the “chrome” or “safari” sub strings.
All the examples bellow are from Mac OS X:
Firefox 3.6:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6
Note: there are both Mozilla and Firefox sub strings!
Safari 4:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; bg-bg) AppleWebKit/531.21.8 (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10
Chrome:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/532.9 (KHTML, like Gecko) Chrome/5.0.307.11 Safari/532.9
Note: Here they are Mozilla, Chorme and Safari!!!
Opera:
Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.10
The day of mobile
Nowadays it’s normal to make a site with the presumption it will be visible from mobile. The war between Nexus One from Google and iPhone from Apple is just beginning and with all those devices with wide screens everything’s becoming more complicated.
User agent strings from Nexus One and iPhone
Both are weird, but both contain the keyword – “mobile” and that may help you make a check with something like this PHP snippet:
<?php $mobile = !!(FALSE !== strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobile')); ?>
What make JavaScript closures work?
Author: Stoimen9 Mar
Closures again
Most of the JavaScript developer don’t even know what a JS closure is and that’s why Crockfrod is so angry. Yes, it’s true, most of the “developers” just copy and paste the code without even know how it works. OK, just in breve the closure is an anonymous function, which thus helps you define a pseudo namespace, as you may know that in a function everything is visible inside it and only there.
function myFunc() { var a = 10; }
The code above makes the variable a to be visible only inside the function. But as you know there must be a function call to make “all this code work”.
myFunc();
However you can make an anonymous function – or a closure, where the function is with no name and is called once the code has been processed. The right syntax is like so:
(function() { var a = 10; })();
Why and how?
The question is: why and how that works? Why this syntax is correct?
Hint
A tiny hint is that you can make the following line working:
var myFunc = function(){ var a = 10; }();
Pay attention to this syntax and the assignment is what makes all this working.
CSS right to left direction & floating elements
Author: Stoimen8 Mar
direction:rtl
When developing a website for Arabic one of the most common questions is how to get it work with a reverse direction. Actually there is the CSS property direction:
.my-class { direction:rtl; }
which makes the page right aligned.
Floating elements …
However sometimes there are elements on the page which are absolutely positioned and the direction property doesn’t do the job. The solution is something like combining the two settings. Both direction and float. So something like:
.my-class { float:left; }
becomes something like:
.my-class { float:right; direction:rtl; }
and of course if you’ve something like margin-left it should become margin-right!
