<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Dereleased &#187; Design Considerations</title>
	<atom:link href="http://www.dereleased.com/category/web-development/design-considerations/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.dereleased.com</link>
	<description>Information Saturation</description>
	<lastBuildDate>Sat, 10 Sep 2011 20:41:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Arrays of Objects and __get: Friends Forever</title>
		<link>http://www.dereleased.com/2010/01/11/arrays-of-objects-and-__get-friends-forever/</link>
		<comments>http://www.dereleased.com/2010/01/11/arrays-of-objects-and-__get-friends-forever/#comments</comments>
		<pubDate>Mon, 11 Jan 2010 22:51:13 +0000</pubDate>
		<dc:creator>Clark</dc:creator>
				<category><![CDATA[Design Considerations]]></category>
		<category><![CDATA[PHP Development]]></category>
		<category><![CDATA[PHP Quirks]]></category>
		<category><![CDATA[The Internet]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[ArrayObject]]></category>
		<category><![CDATA[class]]></category>
		<category><![CDATA[object]]></category>
		<category><![CDATA[object-array]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[visibility]]></category>

		<guid isPermaLink="false">http://www.dereleased.com/?p=138</guid>
		<description><![CDATA[In PHP, an object is always passed around as a reference, which allows one to deal with objects in a very transparent manner, since the only way to deal with a by-value copy instead of the real deal is to explicitly use the clone operator. Recently, I came upon a situation in which it was [...]]]></description>
			<content:encoded><![CDATA[<p>In PHP, an object is always passed around as a reference, which allows one to deal with objects in a very transparent manner, since the only way to deal with a by-value copy instead of the real deal is to explicitly use the <strong>clone</strong> operator.  Recently, I came upon a situation in which it was very useful for me to have an array of objects inside an object; the scenario was somewhat simple, a parent object can contain an indefinite number of children, and in order to have easy access to them I created a lazy loading property to contain them all as an array, indexed by their unique IDs.  Of course, setting the stage for that is a bit more complicated than is needed for this example, so here is an extremely minimal example:</p>
<div class="wp_syntax">
<div class="code">
<pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> foo <span style="color: #009900;">{</span>
	<span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$bar</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __construct<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #009900;">[</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">]</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> stdClass<span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __get<span style="color: #009900;">(</span><span style="color: #000088;">$n</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
<span style="color: #009900;">}</span></pre>
</div>
</div>
<p>So now we have a simple object with an array whose single element is an instance of PHP&#8217;s default object, stdClass.  In reality you&#8217;d likely have more than just one element to the array, but it&#8217;s not necessary here to prove the point.  Now, since objects are always returned by reference, accessing the first index of the array returned by __get when you try to access any member will allow you unfettered access to the contents of the object, to do with what you will (or rather, what the object will allow you to do).</p>
<p>With that in mind, let&#8217;s examine this:</p>
<div class="wp_syntax">
<div class="code">
<pre class="php" style="font-family:monospace;"><span style="color: #000088;">$foo</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> foo<span style="color: #339933;">;</span>
<span style="color: #000088;">$foo</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #009900;">[</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">]</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">baz</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'I am a test'</span><span style="color: #339933;">;</span></pre>
</div>
</div>
<p>This code is pretty easy to follow, and in fact does exactly what you&#8217;d expect: the stdClass object sitting in the first element of the &#8220;bar&#8221; array has a new member, &#8220;baz&#8221;, defined and assigned.  Viewing the contents of the object will show that this is exactly what happened:</p>
<div class="wp_syntax">
<div class="code">
<pre class="php" style="font-family:monospace;">  <span style="color: #009900;">[</span><span style="color: #0000ff;">"bar"</span><span style="color: #339933;">:</span><span style="color: #0000ff;">"foo"</span><span style="color: #339933;">:</span><span style="color: #000000; font-weight: bold;">private</span><span style="color: #009900;">]</span><span style="color: #339933;">=&gt;</span> <span style="color: #009900;">{</span>
  <span style="color: #990000;">array</span><span style="color: #009900;">(</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
    <span style="color: #009900;">[</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">]</span><span style="color: #339933;">=&gt;</span>
    object<span style="color: #009900;">(</span>stdClass<span style="color: #009900;">)</span><span style="color: #666666; font-style: italic;">#2 (1) {
</span>      <span style="color: #009900;">[</span><span style="color: #0000ff;">"baz"</span><span style="color: #009900;">]</span><span style="color: #339933;">=&gt;</span>
      string<span style="color: #009900;">(</span><span style="color: #cc66cc;">11</span><span style="color: #009900;">)</span> <span style="color: #0000ff;">"I am a test"</span>
    <span style="color: #009900;">}</span>
  <span style="color: #009900;">}</span>
<span style="color: #009900;">}</span></pre>
</div>
</div>
<p>However, there&#8217;s a problem.  Somewhere along the line, we generated a notice:</p>
<blockquote><p>Notice: Indirect modification of overloaded property foo::$bar has no effect in &#8230;</p></blockquote>
<p>While the notice certainly won&#8217;t halt the script&#8217;s execution, and the expected (and desired) action has taken place with no other apparent side effects, we are left with the conundrum of what to do with this notice (Note: While <a href="http://bugs.php.net/bug.php?id=41641">this issue has been brought to the attention of the PHP team</a>, no word of a fix has yet surfaced).  Since I am a firm believer that Notices and Warnings are potentially more dangerous than Fatal Errors, I won&#8217;t simply turn off error reporting; indeed, since the errors are still raised that doesn&#8217;t completely fix the small performance hit of generating the error, either.</p>
<p>In order to address this issue, it is important to understand what the notice is trying to tell us.  Once upon a time, __get was a return-by-reference function by default.  Of course, this doesn&#8217;t really help with wanting to prevent the modification of an object&#8217;s internal data, so __get was corrected to always return by value; in fact, even objects are &#8220;returned by value&#8221; in this case, since the value of the member variable is being returned (which just happens to also be a reference to an object), whereas the old __get would have returned a reference to the member variable itself; while the difference may seem subtle, it is monumental.  Since this change occurred, it was important to notify coders that if they attempted to modify the contents of an array element which came from an overloaded array, this action would have no effect, as the modified element would only exist in the copy returned from __get.</p>
<p>Armed with this knowledge of history, we have a few obvious options for solving this problem</p>
<ol>
<li><span style="font-weight:bold;font-family: 'Courier New',courier,mono;">public function &#038; __get($n)</span>.  This will technically prevent the warning from coming up, but if you&#8217;re going to go this route you might as well just declare all your member variables as public anyway, as this is what it will effectively cause __get to do.  It opens the door to such dangerous situations as:
<div class="wp_syntax">
<div class="code">
<pre class="php" style="font-family:monospace;"><span style="color: #000088;">$foo</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">3</span><span style="color: #339933;">;</span></pre>
</div>
</div>
<p>That&#8217;s right, if you return by reference explicitly in __get, then you will circumvent any rules you&#8217;ve set for assignment via __set.  Even objects are not immune to this, as a reference to the member variable (itself containing a reference) will be returned.  This option removes the efficacy of even having visibility operators for anything you intend to provide overloaded access to.</li>
<li><strong>Assign a variable to the contents of the array element</strong>.  Again, technically, this works, but it is messy, inelegant, and is nowhere near the ideal.  Here are two examples:
<div class="wp_syntax">
<div class="code">
<pre class="php" style="font-family:monospace;"><span style="color: #000088;">$bar</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$foo</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$bar</span><span style="color: #009900;">[</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">]</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">baz</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'This works'</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">###
</span><span style="color: #000088;">$bar</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$foo</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #009900;">[</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$bar</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">baz</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'This also works'</span><span style="color: #339933;">;</span></pre>
</div>
</div>
<p>Again, though, this is not the clean, simple approach we were looking for to begin with.
</li>
<li><strong>Just turn off notices</strong>.  Nah, we ain&#8217;t doin&#8217; that.</li>
</ol>
<p>So what&#8217;s left to consider?  After thinking about the problem for a little while, I realized that this problem wouldn&#8217;t even exist if I could just store the array as an object instead, but objects don&#8217;t allow numerical indices, so it would take a little jimmy-rigging to get it to work.  Here was the first version:</p>
<div class="wp_syntax">
<div class="code">
<pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> arrayReference <span style="color: #009900;">{</span>
	<span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$_</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __set<span style="color: #009900;">(</span><span style="color: #000088;">$n</span><span style="color: #339933;">,</span> <span style="color: #000088;">$v</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_<span style="color: #009900;">[</span><span style="color: #000088;">$n</span><span style="color: #009900;">]</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$v</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __get<span style="color: #009900;">(</span><span style="color: #000088;">$n</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span><span style="color: #990000;">array_key_exists</span><span style="color: #009900;">(</span><span style="color: #000088;">$n</span><span style="color: #339933;">,</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_<span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_<span style="color: #009900;">[</span><span style="color: #000088;">$n</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">}</span>
		<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_<span style="color: #009900;">[</span><span style="color: #000088;">$n</span><span style="color: #009900;">]</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_<span style="color: #009900;">[</span><span style="color: #000088;">$n</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __call<span style="color: #009900;">(</span><span style="color: #000088;">$n</span><span style="color: #339933;">,</span> <span style="color: #000088;">$a</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span><span style="color: #000088;">$n</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">'array'</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">}</span>
	<span style="color: #009900;">}</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> _<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_<span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
<span style="color: #009900;">}</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">class</span> foo <span style="color: #009900;">{</span>
	<span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$bar</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __construct<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> arrayReference<span style="color: #339933;">;</span>
		<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">-&gt;</span><span style="color: #009900;">{</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">}</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> stdClass<span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __get<span style="color: #009900;">(</span><span style="color: #000088;">$n</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
<span style="color: #009900;">}</span>
&nbsp;
<span style="color: #000088;">$foo</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> foo<span style="color: #339933;">;</span>
<span style="color: #000088;">$foo</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">-&gt;</span><span style="color: #009900;">{</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">}</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$foo</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$foo</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">-&gt;</span><span style="color: #009900;">{</span><span style="color: #cc66cc;">99</span><span style="color: #009900;">}</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> stdClass<span style="color: #339933;">;</span>
<span style="color: #000088;">$foo</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">-&gt;</span><span style="color: #009900;">{</span><span style="color: #cc66cc;">99</span><span style="color: #009900;">}</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">baz</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">33</span><span style="color: #339933;">;</span></pre>
</div>
</div>
<p>Which, for the adjusted syntax, actually worked out pretty well.  It might take more than an instant glance from your average PHP coder for what&#8217;s going on to make sense, or even seem syntactically correct, but it certainly worked; it even allowed for loop-based iteration by doing something like so:</p>
<div class="wp_syntax">
<div class="code">
<pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">foreach</span><span style="color: #009900;">(</span><span style="color: #000088;">$foo</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">array</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$k</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$v</span><span style="color: #009900;">)</span></pre>
</div>
</div>
<p>While that isn&#8217;t ideal, it&#8217;s fairly transparent about what it&#8217;s doing.</p>
<p>I wish there were a more climactic way to put this, but there isn&#8217;t: The next step involved me trying to combine the SPL&#8217;s ArrayObject built in class to allow natural array access to my wrapper class, and after a few minutes playing with my new hideous child-beast amalgamate and its Reflection, I finally settled on this for the final version of the class:</p>
<div class="wp_syntax">
<div class="code">
<pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> foo <span style="color: #009900;">{</span>
	<span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$bar</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __construct<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> arrayObject<span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> __get<span style="color: #009900;">(</span><span style="color: #000088;">$n</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
		<span style="color: #b1b100;">return</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">bar</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">}</span>
<span style="color: #009900;">}</span></pre>
</div>
</div>
<p>No more messy syntax, no compromises, no hideous amalgamate beasts, and no figuring out how to mangle my behemoth class this lesson actually needed to be applied to in order to extend ArrayObject for the purposes of accessing just one property, as I saw <a href="http://weierophinney.net/matthew/archives/131-Overloading-arrays-in-PHP-5.2.0.html">advocated elsewhere during the googleing portion of my problem solving routine</a>.  The example I first gave?  Works just fine, and no error since the property being returned is an object, not an array.  Sometimes the best solution is fiendishly simple; the only real consideration I had to make here was that, in its actual application, the array in question was declared null so it could be lazy loaded, and since you can&#8217;t use the &#8220;new&#8221; keyword or even type-hinting in class member declarations, I had to be careful to make sure the lazy loading mechanism would still work, but I was never declaring a traditional array either: all in all, a 5 minute job to implement and test.</p>
<p>Five minutes that made the past day or so of work seem rather silly indeed.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dereleased.com/2010/01/11/arrays-of-objects-and-__get-friends-forever/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript Abuse #2,463,981: Centering Content</title>
		<link>http://www.dereleased.com/2009/09/24/javascript-abuse-2463981-centering-content/</link>
		<comments>http://www.dereleased.com/2009/09/24/javascript-abuse-2463981-centering-content/#comments</comments>
		<pubDate>Thu, 24 Sep 2009 21:38:09 +0000</pubDate>
		<dc:creator>Clark</dc:creator>
				<category><![CDATA[Design Considerations]]></category>
		<category><![CDATA[The Internet]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[layout]]></category>

		<guid isPermaLink="false">http://www.dereleased.com/?p=105</guid>
		<description><![CDATA[Another quick rant/post about the wonderful world of abusing javascript. Consider the following code: function moveScreen() { var myWidth = 0, myHeight = 0; if (typeof(window.innerWidth) == 'number') { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if (document.documentElement &#38;&#38; (document.documentElement.clientWidth &#124;&#124; document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight [...]]]></description>
			<content:encoded><![CDATA[<p>Another quick rant/post about the wonderful world of abusing javascript.  Consider the following code:</p>
<div class="wp_syntax">
<div class="code">
<pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> moveScreen<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
    <span style="color: #003366; font-weight: bold;">var</span> myWidth <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
    myHeight <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">(</span>window.<span style="color: #660066;">innerWidth</span><span style="color: #009900;">)</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'number'</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
        <span style="color: #006600; font-style: italic;">//Non-IE</span>
        myWidth <span style="color: #339933;">=</span> window.<span style="color: #660066;">innerWidth</span><span style="color: #339933;">;</span>
        myHeight <span style="color: #339933;">=</span> window.<span style="color: #660066;">innerHeight</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">}</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>document.<span style="color: #660066;">documentElement</span> <span style="color: #339933;">&amp;&amp;</span>
		<span style="color: #009900;">(</span>document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">clientWidth</span> <span style="color: #339933;">||</span> document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">clientHeight</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
        <span style="color: #006600; font-style: italic;">//IE 6+ in 'standards compliant mode'</span>
        myWidth <span style="color: #339933;">=</span> document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">clientWidth</span><span style="color: #339933;">;</span>
        myHeight <span style="color: #339933;">=</span> document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">clientHeight</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">}</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>document.<span style="color: #660066;">body</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">(</span>document.<span style="color: #660066;">body</span>.<span style="color: #660066;">clientWidth</span> <span style="color: #339933;">||</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">clientHeight</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
        <span style="color: #006600; font-style: italic;">//IE 4 compatible</span>
        myWidth <span style="color: #339933;">=</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">clientWidth</span><span style="color: #339933;">;</span>
        myHeight <span style="color: #339933;">=</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">clientHeight</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">}</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">var</span> marginLeft <span style="color: #339933;">=</span> Math.<span style="color: #660066;">max</span><span style="color: #009900;">(</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> Math.<span style="color: #660066;">floor</span><span style="color: #009900;">(</span><span style="color: #009900;">(</span>myWidth <span style="color: #339933;">-</span> <span style="color: #CC0000;">995</span><span style="color: #009900;">)</span> <span style="color: #339933;">/</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
    $<span style="color: #009900;">(</span><span style="color: #3366CC;">"screen"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">marginLeft</span> <span style="color: #339933;">=</span> marginLeft<span style="color: #339933;">;</span>
    $<span style="color: #009900;">(</span><span style="color: #3366CC;">"sidebarElements"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">left</span> <span style="color: #339933;">=</span> marginLeft <span style="color: #339933;">+</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">;</span>
<span style="color: #009900;">}</span>
&nbsp;
Event.<span style="color: #660066;">observe</span><span style="color: #009900;">(</span>window<span style="color: #339933;">,</span> <span style="color: #3366CC;">"resize"</span><span style="color: #339933;">,</span>
    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
        moveScreen<span style="color: #009900;">(</span><span style="color: #009900;">)</span>
    <span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre>
</div>
</div>
<p>For the love of all that is good and pure, if you ever find yourself writing something like this just calm down, take a deep breath, and remind yourself that you can accomplish the same thing by:</p>
<ol>
<li>Create for your content a parent all-encompassing container div, with an id like &#8220;parentContainer&#8221;</li>
<li>In your stylesheet,
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#parentContainer</span> <span style="color: #00AA00;">{</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">955px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span></pre>
</div>
</div>
</li>
</ol>
<p>That is all, keep on truckin&#8217;.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dereleased.com/2009/09/24/javascript-abuse-2463981-centering-content/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Versus Tables: The War Continues</title>
		<link>http://www.dereleased.com/2009/07/23/css-versus-tables-the-war-continues/</link>
		<comments>http://www.dereleased.com/2009/07/23/css-versus-tables-the-war-continues/#comments</comments>
		<pubDate>Fri, 24 Jul 2009 01:56:37 +0000</pubDate>
		<dc:creator>Clark</dc:creator>
				<category><![CDATA[Design Considerations]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[IE 6]]></category>
		<category><![CDATA[internet explorer 6]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[tables]]></category>

		<guid isPermaLink="false">http://www.dereleased.com/?p=4</guid>
		<description><![CDATA[Unfortunately, there's a very ugly side to this debate.  If you've actively been on either side of it, then you might hold the opinion that there is no pretty side to the debate, but in a relative sense, there is.  The pretty side is about vertical alignment issues, low resolution displays, and the trauma of floats gone wrong.  The ugly side is, without question, the unholiest member of the family that is CSS-supporting (however loosely the term need be applied) browsers: IE 6.]]></description>
			<content:encoded><![CDATA[<p>A year ago this wouldn&#8217;t have even been an issue to me.  In fact, a year ago, I&#8217;d probably have <strong>started</strong> with a table.  Of course, like everyone who intends to stay in this business without becoming a dinosaur of a maintenance programmer, something I just can&#8217;t afford to do at my age, I&#8217;ve moved up with the times.  And, it seems, I&#8217;ve moved out, too.  Smaller HTML, but bigger attached stylesheets; longer development times, but (usually) more pleasing form-factors, and, let&#8217;s face it, some of the things you can do with CSS are just downright fun.</p>
<p>Unfortunately, there&#8217;s a very ugly side to this debate.  If you&#8217;ve actively been on either side of it, then you might hold the opinion that there is no <strong>pretty side</strong> to the debate, but in a relative sense, there is.  The pretty side is about vertical alignment issues, low resolution displays, and the trauma of floats gone wrong.  The ugly side is, without question, the unholiest member of the family that is CSS-supporting (however loosely the term need be applied) browsers: IE 6.</p>
<p>When I got back a QA document showing how my beautiful layout had become a mangled mess in IE 6, I was stunned.  I&#8217;m used to typical IE 6 problems, such as PNG transparency, weird box model rendering, the occasional extra broken line, or borders rendering in the wrong place.  What I was simply not prepared for, though, was the carnage that sat before me.  Entire paragraphs were somehow invisible until highlighted, even though they were a contrasting color.  Form elements drooped off of the carefully sculpted round box.  Text was interrupted in the name of a submit button.  And to top it all off, the PNGs weren&#8217;t even transparent.</p>
<p>I immediately did what any sane developer would do: I called over the guy who gave me the specs and said, <q>&#8220;Who cares if it doesn&#8217;t work in IE 6?&#8221;</q></p>
<p><q>&#8220;The client does,&#8221;</q> came the reply; <q>&#8220;They still have 20% of the browser market share.&#8221;</q></p>
<p>20% is a pretty big number, considering we support <a class="bodylink" title="TG Daily - Browser Market Share Update" href="http://www.tgdaily.com/content/view/43106/113/" target="_blank">chrome at 1/10th of that usage</a>.  Even if the <a class="bodylink" title="w3schools Browser Statistics" href="http://www.w3schools.com/browsers/browsers_stats.asp" target="_blank">data from w3schools</a> is accurate, even if IE 6 is down to a paltry 14.9%, they&#8217;re still not falling out of the realm of active use.  When you look at the numbers, it&#8217;s not really much of a mystery why: According to <a class="bodylink" title="Households With a Computer and Internet Use: 1984 to 2007 (Excel 19k)" href="http://www.census.gov/population/socdemo/computer/2007/Appendix-TableA.xls" target="_blank">Appendix Table A (xls)</a> from the U.S. Census Bureau report <a class="bodylink" title="U.S. Census Bureau - Computer and Internet Use in the United States: October 2007" href="http://www.census.gov/population/www/socdemo/computer/2007.html">Computer and Internet Use in the United States: October 2007</a>, in-home saturation of computers with internet access is only about 11% more now than there were in 2001, when IE 6 was released.  With the amount of people still using ancient beige-box monstrosities, it&#8217;s little wonder how that browser continues to tread water 8 years later.  Unfortunately, it&#8217;s not the IE 6 users who pay the price for their lack of knowledge.</p>
<p>And this leaves us again in the same old place: The War.  All of the arguments over whether tables are bad design or CSS is too complicated are practically rendered moot when you consider that at least 1-in-7 people are using an antiquated piece of technology that will choke, cough, sputter, and finally leave users entirely displeased and demotivated.  And since there&#8217;s no real stopping it, short of using <a class="bodylink" href="http://ie6update.com/" target="_blank">extreme guerilla tactics</a>, let me give my final opinion on the matter: Just use whichever one works.  Tables and Divs can be equally messy, so it&#8217;s more important that you just keep your code clean, rather than trying to favor or scorn a particular tag.  And, if you&#8217;re one of those designers who has become so entrenched in the anti-table battlefield that you refused to use tables to display tabular data, I have 5 words for you: <a class="bodylink" title="Give Up And Use Tables" href="http://www.giveupandusetables.com" target="_blank">Give Up And Use Tables</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dereleased.com/2009/07/23/css-versus-tables-the-war-continues/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

