Monthly Archives: March 2016

Centering technique html css

We can center a section of html in one way by creating a class for the section, say class=”container”.  Then we can set its margin attribute to margin: 0 auto;, this will set margin-top and margin-bottom to 0px and set the left and right margins to auto.  That means the browser will automatically set equal margin sizes on left and right of the container.

All you need now is to provide a width.  This can be a fixed px size like say 600px;, or you can use a percent to be more responsive.  This will center your container.

 

.container { margin: 0 auto; padding-left: 30px; padding-right: 30px; width: 960px; }

Advertisements

HTML CSS

So I have been relearning the right way about html and css.  There are so many rules and edge cases that I never really grasped everything that was going on.  So I took a bottom up approach that was project based because if you don’t work on projects and have any context, what ever book you read about css html design patterns will go one ear and out the other.

I spend most of my time on quora or stackoverflow for fixing edge cases and on forums to see what others have done for centering situations or when containers collapse due to floating content on html block level elements.

Here is a great reference book to learn all the basics of html css and their design patterns.

http://learn.shayhowe.com/

You don’t have to read it back to back.  I would find a project work on it, then as I come across problems or concepts that don’t come clear.  Just refer to the table of contents in this site and have a quick read.  You will find great, clearly written explanations of why things happen the way they do in html/css.

mutating the caller

Explain why the last line in the below code prints “hello world”. What does this demonstrate?


def change(param)
param << " world"
end

greeting = "hello"
change(greeting)

puts greeting

The last line here prints “hello world” because even though the variable greeting is set as “hello”, when the method was run it was given that variable as a parameter and the code in the method mutated the caller. This changed the orignal value of greeting to “hello world”. This demonstrates mutating the caller.

variable pointers

Explain why b is still “hello”.


a = "hello"
b = a
a = "hi"
a << " world"

puts a # hi world
puts b # hello

b is still “hello” because when you declared `b = a`, ruby had that variable b point to the actual memory location of a. It makes sense to save memory and just point to that space.

Once you reassigned `a = “hi”` what happens now is that a is given its own location in memory since a is being reassigned. so now a would give you ‘hi’ and b would give you ‘hello’. notice there are 2 different memory locations now, one holding the value or variable b the other for variable a value. If you check the object ids for each variable you will notice they are different.

Then we did `a << ” world”` this just mutated and appended the string ” world” to a. SO now we get for a, “hi world”, and b gives us “hi”
This is an example of variable pointers.

method scope?

Explain why the following code raises an exception.


str = &quot;hello&quot;

def a_method
puts str
end

This code will raise an exception NameError: undefined local variable or method str for main:Object, because this would be a method call to a_method. Inside this method it asks for ruby to puts str, str variable is initialized outside this method. But on a method call you cannot pass in local variables unless you pass them in as parameters to the method. Methods have their own scope.

So I would pass in the variable to this method like so.


str = 'hello'

def a_method(str)
puts str
end

a_method(str)

 

 

Explain why the last line outputs “hello”. What’s the underling principle in this code example?


str = &quot;hello&quot;

def a_method
str = &quot;world&quot;
end

puts str

The last line outputs “hello” because it was initialized outside the scope of this method, and since the method isn’t passing in the variable str it cannot assess that variable. SO when we do puts str it sees that it was initialized as “hello”, it cannot see what happened inside the method since it cannot access the variable in the method since it wasnt brought in as a parameter.

this is an example of method scope and variable scope. Methods have their own scope. Since the variable str wasn’t brought in as a parameter to the method, inside the method variable str is initialized in its own scope(not accessible outside this method).

Once outside this method, we have no access to the variable str that was initialized inside the method. Instead we have access to the local variable str that was initialized outside our method, in the current scope and the value of str = “hello” .

 

 

ruby scope examples

In the code below, explain why the last line outputs 2.
What’s the underlying principle this example illustrates?


str = 1

loop do
str = 2
break
end

puts str # output is 2`

the output of the last line is 2, because in ruby if a local variable is initialized outside a block with inner scope, the inner scope has access to that variable. The rule in ruby is that “Inner scope can access variables initialized in outer scope but not vice versa”

 

Explain why the code below raises an exception.


loop do
str = 2
break
end

puts str

This code raises an exception of undefined local variable or method for str because loop do..end is a method block invocation thus creating inner scope. The str = 2 was initialized inside this scope and not initialized outside the scope. SO if you try and access that local variable thats create in the scope of this block it will not have access to the variable. If you initialized this variable outside the block above the code you will be able to access the str variable on the outside.

Hashes

Question:  Build me a method that takes a query shown below and returns those products from the array.

</pre>
PRODUCTS = [
{ name: "Thinkpad x210", price: 220 },
{ name: "Thinkpad x220", price: 250 },
{ name: "Thinkpad x250", price: 979 },
{ name: "Thinkpad x230", price: 300 },
{ name: "Thinkpad x230", price: 330 },
{ name: "Thinkpad x230", price: 350 },
{ name: "Thinkpad x240", price: 700 },
{ name: "Macbook Leopard", price: 300 },
{ name: "Macbook Air", price: 700 },
{ name: "Macbook Pro", price: 600 },
{ name: "Macbook", price: 1449 },
{ name: "Dell Latitude", price: 200 },
{ name: "Dell Latitude", price: 650 },
{ name: "Dell Inspiron", price: 300 },
{ name: "Dell Inspiron", price: 450 }
]

query = {
price_min: 240,
price_max: 280,
q: "thinkpad"
}

query2 = {
price_min: 300,
price_max: 450,
q: 'dell'
}

&nbsp;

def hash_getter(query)
PRODUCTS.select do |hsh|
((hsh[:name].start_with? query[:q].capitalize) && ((hsh[:price]) >= query[:price_min]) && (hsh[:price] <= query[:price_max] ))
end
end