Binary Search

Here’s a simple example to understand what binary search in computer science refers to. Let’s say, you had an array of numbers from 1 to 100. You have to choose one of them based on some given criteria and report your answer. You computer tells you whether your entry is too high, too low or correct.

To find the right answer, you can test number 50. If the computer tells you that your entry was too high, you know that the number should be between 1 and 50 but not including 50. So you have practically eliminated half the numbers in one run. Next you could enter 25 for instance which is some number around (1 + 50) /2 and see if your entry was too high, too low or the correct answer and by the same principle, you can eliminate half of the remaining numbers.

And running the test for a few times, you can get to the right answer. This is called binary search in computer science and is used in computer programs and algorithms very widely.

Linear Search


Here’s a simple situation to understand what linear search in computer science refers to. Let’s say you had an array of numbers, say 1 to 100, and were to guess or find the right one in a given situation. Only one of the numbers is the right choice based on some given criteria.

There are different ways to think about finding the answer but one approach would be that you tested each number starting from 1, tested it against the given criteria. If it’s the right answer, stop the search and report the answer, if not, go to the next number and do the test again until you get to the right one.

This approach in computer science is called linear search. Using linear search in our example, numbers from 1 to 100, you could need 100 tests to find the right answer if the right answer were number 100.

An Explanation of the Concept of Hoisting in JavaScript

JavaScript gives you a lot of freedom in programming which in some cases can also be detrimental your own code.

Other programming languages like C, C++ or Java are much more strict. There, you don’t have much freedom but in turn your end results are almost always predictable.

One of those cases in JavaScript is Hoisting. It’s kind of weird that you are allowed to declare a variable anywhere in a block of code and use it anywhere in the code block even before you declared it. That’s because JavaScript “hoists” variables. In other words, it moves all instances of variable declarations to the beginning of the code block before execution. It’s interesting to note that all instances of declarations are hoisted but no instances of initialization is hoisted even when declaration and initialization take place in one line of code. That means if you declare and initialize a variable,

var x = 5;

in the end of your script, anywhere in the script, your variable exists and is declared but JavaScript knows the value 5 only after the line of code that initialized the variable x.

Well, that’s something that you should understand and take note of, to avoid bugs in your scripts. So to avoid any bugs, declare and initialize all of the variables that you plan to use inside the script in the beginning of the block.

Column Layouts and Grid Layouts

Column layouts are those website layouts based on CSS that usually illustrate a website in a few columns in the content area. You could have a left column, a middle column and right column for instance. Usually it’s such that the middle column is the widest one containing the content and the right and the left are sidebars.

In column layouts, every area in the layout can only take up the whole height from the top to the bottom of the content area. That means, the middle column that’s responsible for the content for instance, cannot be broken into different rows, each having their own width, unless you have completely separate columns, each one again taking the whole height of the content area.

Grid layouts are a completely different story. In Grid layouts, you can have columns and rows. Considering our previous example of layout with three different columns, the middle column could then be broken into different rows as well, each row having the width of your choice. Grid layouts are also made with CSS but the CSS rules are much more elaborate and complicated.

One good example of grid layouts is the old popular 960 Grid System.

I’ll add some graphic images to this post to illustrate each of the layouts graphically.

Methods in JavaScript

toString() is an example of a method in JavaScript. It’s a Boolean method and what it does is convert Booleans to Strings. Take a look at the following example:

false.toString();  // Returns “false”.

Please pay attention to have the method has been used here and that’s how methods are used in JavaScript overall. First you have the keyword false then you have a dot and then the method has been added to it. The dot actually shows that toString() is a method.

Responsive Web Design and Media Queries

Responsive Web Design Image
Responsive Web Design Image – Credit

The following line of code is an HTML link element that contains a media query:

<link href=”stylesheet.css” rel=”stylesheet” media=”screen and (min-width:320px)”>

The part that says media=…. is the media query used in this link element. It’s used to define under which circumstances or conditions the browser should use this style sheet.

This media query tells the browser to use the style sheet when the media type is screen, i.e., the HTML code is being rendered on a screen like an LCD display and also if the “viewport” width is greater than or equal to 320px.

Media queries are very often used in responsive web design theses days. Responsive web design is another name for the sum of all the activities and technologies that web designers do or use so that their websites are displayed the way they wanted them to be displayed on all or most screen sizes or screen types, media queries being one of them. Devices range from smart phones like iPhone, Android, etc. going all the way to huge Internet-enabled TVs. So it’s pretty complicated.

Media queries work in all the modern browsers and in IE9+. IE8 doesn’t understand them and simply ignores them. So if you’re designing for IE8 as well, you need to have some strategy so that your content is accessible there too.

There are all kinds of solutions for IE8 and earlier versions and other old browsers. You could use JavaScript, you could use separate style sheets for them or just send a simplified version of your HTML to them. It’s important to understand that IE8 and the earlier versions are actually still being used in many places like libraries, etc. where the user has no control over any aspect of the machine he’s using. So if your content is supposed to reach those demographics, make sure that it happens somehow. It’s not that important that your website looks as glamorous on IE8 or earlier as it does in modern browsers; the only thing that really matters is that your content is well accessible to those browsers as well.

To know more about media queries, you can read Media Queries – W3C Recommendation.


The HTML “picture” Element and Picturefill JavaScript

If you need to use the HTML element <picture> in your HTML markup, you need to help the browsers that don’t understand it yet. Most browsers still don’t support <picture>.

In order to solve the problem, you can use JavaScript to help browsers understand your code. If you did so, you’d be assuming that your users have JavaScript activated in their browser. If not, they’d not be able to understand your <picture> elements.

At any rate, if you decide to use <picture> and want to make sure it’s supported by all/most browsers today, use the Responsive Image Polyfill below to take care of the problem.


Check Your Device Pixel Density Online

If you develop responsive websites or web applications, you definitely need to know what sort of device pixel density you’re dealing with so that you can write your code accordingly. Here’s two tools you can use to find out the device pixel ratio of the device you’re currently working with:

Moreover, if you need to have information about other devices, here’s a list of some common devices you might want to optimize your code for: