Watkins Web 3: Blog

Hardware Pixels vs Reference (Optical) Pixels

I saw this really interesting article on A List Apart. I thought it was a really good read. It has lots of information if you're planning on making responsive sites that look consistent on many devices. It talks about the difference between how pixels are rendered on different devices and how to target them better. It suggests using ems as the measurement for everything you would have previously used a pixel for. This way the whole site will be viewed properly no matter the device, zooming, etc. Informative read.

example 1: standard
example 2: normalized
"A developer might look up information on these two devices and think that if the screens are the same and they both use the Webkit rendering engine their website will look the same. Sadly this is not the case; as far as a website is concerned, the Galaxy Tab is 400px × 683px and the Kindle Fire is 600px × 1024px "

Pea.rs

This is pretty cool: Pea.rs is a set of “design patterns” with sample HTML and CSS for you to borrow. So if you’re making a thumbnail grid or other common design element, take a look here to see if it will speed up your process.

The whole site is a Wordpress theme, so you could take it and construct your own set of design patterns that you use often or want to share.

Exercise 7 (Blog Loop and Stylesheet)

This exercise requires you to loop through some provided blog posts and write a quick stylesheet to lay the content out on the page. As usual, you’ll need to create a new directory on your server space and upload your files there each time you make a change.

Exercise 7

CSS selecting: nth-child()

Found this other CSS selector for targeting children. It's called nth-child() and it's pretty cool. Inside the parenthesis you can put a 2 or 3 or whatever you like. To target the child. Also, some mathematical formulas can go inside the parenthesis for targeting multiple children. nth-child(3n+0) would target children that are a multiple of 3. Even using nth-child(odd) and nth-child(even) works. Just thought that was pretty interesting and handy.

CSS: nth-child()

Cheat Sheet: PHP Loops

Loops are probably the final fundamental programming concept we’ve covered. Here’s a quick review of the syntax for the three primary varieties:

While Loops

while loops execute the code inside the curly braces repeatedly, and don’t stop until the “while condition” stops being true. The typical trick is to use a $counter variable that increments each time the loop is run. (The loop remembers variable values from the previous iteration of the loop, so eventually the while condition will stop being true and the loop will stop running.)

<?php
	$counter = 1;  	 
	while ( $counter <= 6 ) { 
		echo ("<p>Now the counter is at $counter.</p>");
		$counter = $counter + 1 ; 
		}
?>

This will produce the following HTML:


	<p>Now the counter is at 1.</p>
	<p>Now the counter is at 2.</p>
	<p>Now the counter is at 3.</p>
	<p>Now the counter is at 4.</p>
	<p>Now the counter is at 5.</p>
	<p>Now the counter is at 6.</p>

For Loops

for loops are similar to while loops but have slightly more elaborate setups. Rather than create and increment the $counter variable inside the loop alongside the code to be repeated, it all gets set up at the beginning. The setup is strict: you have to specify the starting value of the $counter variable, then the “while” condition, then the incrementing statement, all separated by semicolons.

<?php
	for ($counter = 0; $counter <= 6;  $counter = $counter + 1) { 
	echo ("<p>Now the counter is at $counter.</p>");
	}
?>

(This code produces the same HTML as the while loop above.)

Foreach Loops

A foreach loop is exclusively for looping through the elements of an array. As usual, an example explains this best:

foreach for Indexed Arrays

Very often we have an indexed array and want to output the values of each element. We can’t simply run echo($array_name) — that will throw an error because we haven’t specified which element we want echoed. If we want to echo each element in turn, we run a loop:

<?php
	// create indexed array of users
	$users[0] = "joe";
	$users[1] = "jane";
	$users[2] = "jill";
	$users[3] = "jeff";
	// loop through each element
	foreach $users as $each_user { // notice we create a temporary scalar variable ($each_user) for the purposes of accessing each element value in the foreach loop
		echo ("<p>A user is named $each_user.</p>");
		} 	

which will produce the following HTML:

<p>A user is named joe.</p>
<p>A user is named jane.</p>
<p>A user is named jill.</p>
<p>A user is named jeff.</p>

foreach for Associative Arrays

Associative arrays get a little more complicated, because you may want to access both the key and the value of each element within the loop. Note the $key=>$value syntax.

<?php
	// create associative array of user joe
	$user[name] = "Joseph Schmoe";
	$user[age] = 25;
	$user[nickname] = "Joe";
	$user[catname] = "Esmerelda";
	// run the loop
	foreach ($user as $key=>$value) {
		echo ("<p>This array has a key $key with a corresponding value $value</p>");
		} 	
?>

… which will produce the following HTML:

<p>This array has a key name with a corresponding value Joseph Schmoe</p>
<p>This array has a key age with a corresponding value 25</p>
<p>This array has a key nickname with a corresponding value Joe</p>
<p>This array has a key catname with a corresponding value Esmerelda</p>