Don’t Use height or width for img in Responsive Layouts

When you add an img to a page, you normally enter the width height of the image to your HTML markup. If you want your image to be responsive, you’re not supposed to do that anymore.
As mentioned before, you need to forget about the height and width of the image you’re using and so your HTML code would look like the following:

<img src=”image-source” alt=”image-alt-text”>

Next step in CSS:

img { 
max-width: 100%; 
height: auto; 
}

With the CSS rules defined for the image, the image will scale up and down always matching your viewport proportionally.

JavaScript Methods

Properties in JavaScript are sets of pairs of named values inside an object.

For example,

var person {firstName: “first-name”, lastName: “last-name”, age: 36, id: 45};

Every pair of named value in the object above is a property of the object. As an example, we could mention,

firstName: “first-name”

Every property has a value. For example in this case, the value of the property is “first-name”.

A JavaScript method is a property containing function definition. For example we could add a new property to the object above as follows:

var person {firstName: “first-name”, lastName: “last-name”, age: 36, id: 45, fullName: function() {return this.firstName + ” ” + this.lastName;}};

In other words, methods are functions stored as object properties.

Now, in order to access the object method created above, you need to write a line of code something like the following:

person.fullName();    //Pay attention to the set of parentheses added to the end.

So you could say that fullName is a property of the object person and fullName() -same name having a set of parentheses- is a method of that object. This also means that the property fullName will function as a function when you add the pair of parentheses to the end.

 

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.