Bhawan Singh

Whoa! Google Chrome has crashed

Whoa! Google Chrome has crashed

Its only because of the browsers a web developer is able to show what he coded or web designer can show what he designed. Browsers are in fact quite complicated piece of softwares. With the advent of new standards HTML5, CSS3 and multi tabs and number of plugins they have to handle a lot of things. When the things get this complicated bugs are bound to be there. Although companies like Firefox, Google, Safari actively releases updates and fixes.Recently a developer found a bug in Google chrome

Here is the pretty straight forward description on Chromium bug reporting forum.

What steps will reproduce the problem?
1. Any page with [Removed so this article loads for everyone] will crash the Chrome tab on a Mac
2. Just create any dummy page with the unicode characters, and the Mac Chrome tab will crash hard

What is the expected result?
Expect it not to crash

What happens instead?
It crashes

Meanwhile google hasn’t provided any specific time frame to fix the issue, but it anyone who knows the bug can crash your chrome by sending them to you on Gmail,Hangouts, Facebook or any other way. All though many of online services renders the text differently to chrome might not crash on all but in the end google should quickly release the fix for this issue.

Simple web form validation in PHP

Simple web form validation in PHP

PHP Validation
A few you of may know that I’m a currently enrolled in Web development program at Humber. Last week we were assigned a task to make a simple web form validation in PHP in OOP style,So we had to make use of couple of classes. I tried to made validation classes as generic and as straight forward as possible. In this sample of code ,there are 4 classes for required fields, Regular expression, Range and length. I’ll explain briefly all of them, please keep in mind this code is only for educational purpose and not meant to be used in production environment.

Required fields

Starting with our first class is required which has only function valid that takes a variable as an parameter and return false if empty and true in else case.For checking the value of variable i could have used  empty() function but this function return true if variable has 0 value and in few other cases. You may head up to and read more about this function. I ended simply comparing $var with empty quotes, which served my purpose quite gracefully.


My second class deals with checking length of values in fields. Initially I started fondling with string length function of PHP but then I took the simple approach and used regular expression to check for minimum length. length class has 1 function lengthCheck and it takes 2 parameters a value and a second one for length.


For pattern matching I made a class pattern with number of functions.alphaOnly and numericOnly are generic function that can be used in conjunction with required and length according to logic required. Others email,phone url can be used as their name suggest.Apart from this I created a custom function which accepts Regex pattern and value to be compared for validating any customs values in form.


Initially I intended to make check range in 1 function but then I kept it simple and divided the logic in three parts.


Here is code snippet of form I used to test all these validation classes.I create objectects of all classes and called their respective member function and validated my form.There are many ways this code can be improved, if you have any suggestion feel free to leave it in the comments.

Mobile optimized Vs responsive design websites

Mobile optimized Vs responsive design websites

Responsive Web Design for Desktop, Notebook, Tablet and Mobile Phone

Recently I was working on responsive website design and while testing load time of the pages, I started wondering about something, but before I get down to it lets start with basics of responsive design websites and mobile optimized websites

What are responsive design websites?

In common perception, You resize your browser window and magically everything seems to adjust to the size is a responsive design website. Having a responsive design will give the website a consistent look and feel. A couple of things may not be there on mobile which was on desktop or tablet design, but in all its the same websites.

What’s wrong with that?

So, your website responses to screen sizes and changes its layout all by itself, What’s wrong with that? Well, Main problem with responsive design is not its definition but implementation. With the majorityof responsive design loads all the resources at the back like JS files, images, Other framework’s files and then adjust the layout according to screen size. You may hide certain part of a website using CSS displaynone but that doesn’t stop it from loading, it’s still loaded in the browser just hidden. Loading all these files and data which are not required, is a complete waste of network resources. Additionally, if one doesn’t own a high end smartphone or is on a slow network, your responsive site will take much more time and thus your conversion rate will decrease.

What are mobile optimized websites?

A mobile optimized websites are to load “mobile” version of the page. Oh Wait, that’s like going back 5 years in time  and loading a mobile version of website  m.* version websites are long dead with social sharing, SEO taking front row, providing same page with different URL surely going to impact your analytics.


There are many ways you can have a mobile optimized responsive design, thus giving your visitors a better UI experience. One of the easiest ways is to conditionally load the stylesheet required for the deviceYou may consider using Javascript multimediainstead of CSS media Queries. Use adaptive-images which delivers device appropriate re-scaled versions of your web page’s embedded HTML images. Similar to CSS, load only the JS file needed for the device and after the page onload event.

There are few server side solutions like WURFL and Device Atlas are available too and adding a serversize layer will make your responsive design smarter, faster and have better usability. But this kind of approach requires constant nudging between front end designer and back end developers. A full stack developers will be better suited for this approach.


Responsive designs are here to stay, and having a responsive design is better than having nothing. Most of the site visitors don’t give shit about responsivedesign all they want to fast loading and easy to use website. So before sit back and relax thinking you have got yourself a responsive website, consideroptimizing the it for devices. People will visit your website more often if it opens faster on 3G/4G networks than if it just responses to screen sizes and takes ages to load.




How are large screen mobile devices effecting responsive design ?

How are large screen mobile devices effecting responsive design ?


For a long time I was used to 3.5″ devices, first it was iPhone 4 and then  iPhone 4s. Both 3.5″ Devices were perfect for one hand use (So does the Apple used to say). Admittedly, I have never owned an android device or matter of fact any large screen mobile device. A couple of months ago I decided to jump on large screen devices wagon, So I bought myself 4.7″ iPhone 6.

First couple of days I was like “WOW, So much largerscreen area for web pages”, I can see more content websites (and Apps as well) surfing websites was now easy to eyes and all of a sudden that “Perfect 3.5inches screen” was beyond usable. Over a couple of more weeks I was constantly being bugged by one thing “Hamburger icon”, the 3 short horizontal lines icon used in responsive designs for the menu. On most of the websites you will find this icon on either Top-Left or Top-Right corner or website.

Why was I bugged by that little icon? Here’s why – My shiny new iPhone (Yes! I bought the golden one) with 4.7″ screen wasn’t actually one hand device. I found myself constantly fondling with my iPhone in my hand to click on a hamburger icon or I had to use my other hand, which was clearly not an option while I’m cooking food or doing some other tasks alongside.

The future of mobile device sizes doesn’t look to be getting smaller, So as a web developer (or designer) it becomes our responsibility to fix this issue and improve the user experience of responsive designs. There are several alternatives to using a hamburger icon menu, but if you need to have one, a possible solution is to place it near the bottom left corner of the web page. For an even better user experience you can have a tabbed menu at bottom of web page and give your responsive design more look-feel of an app.

How to access child element(s) of parent element using jQuery?

How to access child element(s) of parent element using jQuery?

jquery logo

jQuery provides with quite a handful of useful functions to traverse through child elements in different ways.
I’ll summarize few important of them


This method will return all the direct children of Parent element.


This method returns parent element of current child element



This method is similar to parent() except it return all the parent elements that is to say parent,grand parent, great grand parent element till body element.


This method will search for element in descendants of Parent element.


This first() method returns the first element of the selected elements.


This method works opposite to first(). It will return last element of the selected elements


This method will returns through all the elements having same parent.


This method is used to traverse thorough sibling elements

Why img element has space below?

Why img element has space below?


If you notice closely enough, you will know that an img tag always* has space below it. Only in cases where you may be using a CSS reset or other frameworks, You may not encounter this issue. If you need to check it, try including an image inside a div with border and you will see height of DIV is larger then img.

Reason for this is by default img is rendered as inline element, just like characters
which make vertical alignment of img is same as for a,b,c. space below is actually the space for descenders that you may find in letters like p,q.

Easiest solution is to render your images as block elements.

HTML5 standards are here and this time they are official

HTML5 standards are here and this time they are official

HTML5 logo

After years of vendor specific css, W3C has finally set the standards for HTML5. These  standards are follow up to 17 year old HTML4 standards. In the mean time world wide web has seen tremendous growth beyond the imagination of Tim Berners Lee or any person living or dead on this planet. HTML5 standards were the need of time since the day former Apple CEO Steve Jobs made flash obsolete. History  for HTML5 standards had begun as early as 2004 by  Mozilla foundation and Opera software but officially W3C started work on HTML5 in 2008. It took working group 45,000 messages and 4,000 errors, ambiguities, and controversies to come up with HTML5 standards as noted by  (W3C HTML Working Group co-chair )


Whats in for you as Web Developers?

Guess what? Christmas has come early this year and Santa Claus(only if you were good developer!) has bag full of presents. No surprises there, as we all knew whats in Santa’s bag but at least now its official standard and next revision is due in 2016, Yes! we are already talking about next version. HTML5 is more semantic then HTML4 and tags now actually mean what they consists. Few of new semantic tags in HTML5 are

article, aside, audio, figcaption, figure, footer, header, nav, section, summary, time , video.

More or less they render same as DIVs. I’m sure you have probably used couple or more of these tags in your projects. To check all the standards head over to W3C’s official page for HTML5 Standards. HTML5 will be able to run  audio and video without requiring any plugin which is the final nail in the coffin of flash. HTML5 also supports many APIs for location services, offline caching, Drag and Drop support which is another major milestone towards W3C open web platform


Whats in for you as web users?

As a web user you don’t need to worry about anything. In most likely cases your browser already supports HTML5 (partially at least) except if you work in some government offices stuck with decade old computers using browser not be named (Yes IE but shhhhh) on windows XP. If you are in later case its way past the high time you should have upgraded your system. Most of the new features are invisible to end user but surely world wide web is going towards better future.

Quick guide to using SCSS – Handy code snippets

Quick guide to using SCSS – Handy code snippets

Sassy CSS

Sassy CSS

Perhaps if you are reading this post I assume, you have heard about couple of these SASS, LESS, and SCSS and by this time probably decided to use SCSS for your next project. So, I am not going to waste any time pointing out which one is better and why.


You can use variables to store information you may want to resuse like colors, typefaces, width or any other you want.Sytanx is same as PHP using $ sign in front.


As you may know code in HTML is clearly nested and follows hierarchy. While in CSS there’s no nesting but SASS/SCSS has over come this problem. You can now nest classes/IDs as in HTML. Look at the example


To use Pseudo-classes like :hover, :visited, ::before ,you can nest it inside main class and use & followed by Pseudo-classes. This makes much more logical sense then CSS.


Mixins are like code snippets or methods as you can pass values to them.They are quite helpful for vendor specific prefixes. Consider this example where you can set border radius of elements without writing all the code and pass the value of radius as well.


SASS/SCSS supports following operators + , - , / , * , % using which you can perform any mathematical operations in code. They are useful in many situation you may not think of now. Consider this example, here we calculate width in percentage using value in px.


If you know about Object oriented programming, you have probably heard about inheritance. Inheritance or extending lets you reuse CSS properties. If you love idea of don’t repeat yourself(DIY) type of coding, you’ll love this feature.

How to absolute position an element relative to a div?

How to absolute position an element relative to a div?


An element with position:absolute will be positioned relative to entire page or relative closest positioned ancestor. Later part of last sentence is really helpful if you want to absolute position an element inside its parent block.

This is quite handy trick and once you have mastered basic CSS, Tricks like these will make you an experienced with CSS.Below code will position child-div in top right corner of parent-div.

Quick Tip

if you want absolute positioned div to fill its parent div use the following code and Child div will have same height and width as Parent Div.

Make Parent div expand to content

Make Parent div expand to content

If you are new to CSS(or maybe  not) you would have encountered a problem where a Parent div containing floated elements does not expand to height of child elements.

There are couple of solutions for this problem

  • Using an empty Div with clear:both  : Non semantic  way
  • Putting couple of  <br> :  again non semantic way
  • Using div with  overflow:hidden or auto  Semantic way if not using another div

but the modern and more semantic approach is to use Pseudo element :after

Either you can assign .clearfix to a div or just add CSS with div-class- name:after with the above code