No joke, this is an entirely new site, new installation of ExpressionEngine, new design, new everything. I did import all the old entries of course, dating all the way back to just a couple months before I married my beautiful wife. It feels so good to have a clean system, untainted from all my messing around and not knowing what I was doing with ExpressionEngine over the years.
<h2>Merge</h2>
The first thing to note is that I have merged by personal blog that has always resided on this website, with my tech blog from <a href="http://buzzingpixel.com">BuzzingPixel.com</a>. The reason for this is having a movie blog, a tech blog, and a personal blog felt a bit disjointed. I wanted to consolidate and try to refresh my personal "brand" so to speak. So, all non-movie related items that I want to write about go here. That means you're going to get all kinds of stuff on this blog and if you look back through the entries, you'll find all the old entries from BuzzingPixel as well as the old entries from my personal blog. No more distinction.
<h2>Design</h2>
I think it's important for me, as a <a href="http://www.caddis.co/team/tj-draper">professional web developer</a> to have a slick, good looking website. When I rolled out design iteration four (the previous design) of this site a few years ago, I received a fair number of compliments. But since that time, mobile devices have become ubiquitous, retina screens have become more prolific — I got a retina MacBook Pro and boy did that old, non-retina design look hideous — and the design in general had become quite dated. I wanted a new design that was super clean, lent itself more to reading, was retina and mobile friendly, and in general would make me proud of my own website. In addition, there was not much of a focus on the site for telling the world about me or my family. For the redesign, I wanted to address all those issues.
So, for starters, go ahead and grab the edge of your browser (if you’re reading this on a Mac or PC), and squeeze that window down small. You'll see that the site responds to the browser size (made possible by <a href="http://weepower.com/">Wee</a>!). If you're already reading this on a mobile device, then you'll see that the site looks great on your device. And I paired down the design to a few essential elements. It's clean, it's sharp (to me at least), and I like it.
<h2>Frequency</h2>
I really doubt this means that I'll post much more often — most of my free time is consumed by <a href="http://moviebyte.com/">MovieByte</a>. But I'm going to try to write something here at least once every couple of weeks (go ahead and mark down my failure prediction).
Well, that's pretty much it. It's new, it's shiny, and I like it. I worked hard on it with late nights and weekends and if you think it looks cool, feel free to let me know. If you don't like it, well, remember how hard I worked on it and keep your opinions to yourself! (Kidding... kind of).

I Burned Down the Old Site, Here's The New One


Yes, this is me linking to a link post, and I certainly encourage you to <a href="http://asserttrue.blogspot.se/2013/01/the-serif-readability-myth.html">read the post</a> Marco also linked to, but what Marco had to say is what I'm interested in.
<blockquote>
In my anecdotal experimentation, serifs are more readable in some contexts, and sans-serifs are more readable in others. I like Lyon Text (serif) on Retina iPad, Elena (serif) on iPad Mini, and Ideal Sans on iPhone. I don’t like dark backgrounds with light text anywhere except on iPhone, and only with sans-serifs.
</blockquote>
Personally though, I don't like dark backgrounds with light text in any regular reading context — not on my iPhone, not on my computer, not on paper (obviously) not anywhere. It hurts my eyes something terrible when reading for more than a few seconds.

Marco Arment

Serif Readability Myth

Jacqui Cheng has a nice gallery of pictures showing the evolution of SoundJam MP iTunes.
Apple purchased SoundJam in the year 2000, and thus iTunes was born. Looking at those screen shots of SoundJam, I wonder if this was the first, or one of the first interfaces to sport Brushed Metal before it was cool pervasive. I honestly don't know where Brushed Metal started for sure, but this is certainly the oldest app I have seen to sport Brushed Metal.
<img src="/images/blog/2013/01/10/soundjammp_ipodobserver.jpg" alt="soundjammp_ipodobserver">
Click through for the full gallery.

Jacqui Cheng writing on Ars Technica

iTunes Turns 12 - Picture Gallery

<blockquote>
Apple understands timeless design and that’s part of what makes them such an iconic and successful company. Believe me when I tell you, the Galaxy SIII’s design will be laughable in 10 years*.
-
*I think it’s laughable right now, but that’s a post for another day.
</blockquote>
I couldn't agree more.

Alex Arena

It Looks the Same

I have not yet watched the <a href="http://www.apple.com/apple-events/september-2012/">video of the event</a>, and it’s starting to look like with all the things I have going on I just won’t have the time. But I did follow the live-blogging of the event and I know what went on, and of course I know all the details about the iPhone 5. My geek card is intact.
<h2>Six, or Five?</h2>
Apple has by all appearances lost the ability to count and put a 5 in the name of their sixth generation iPhone. Yes, that’s right, the iPhone 5 is really the iPhone 6. The math works like this:
<ul>
<li>iPhone (first generation)</li>
<li>iPhone 3G (second generation)</li>
<li>iPhone 3GS (third generation)</li>
<li>iPhone 4 (fourth generation)</li>
<li>iPhone 4S (fifth generation)</li>
<li>iPhone 5 (sixth generation) (huh???)</li>
</ul>
So what gives? As much as it annoys the ever living stuffing out of me, sometimes Apple just rolls with the punches so to speak. Everyone and their mother and brother and… well everyone but a handful of us nerds have been referring to the phone that comes after the iPhone 4S as the iPhone 5. Everyone was disappointed that the 4S wasn’t the iPhone 5. Everyone assumed that the next iPhone would be the iPhone 5. So I think Apple really just figured it would be way too much trouble to convince everyone that iPhone 6 was a logical name. They didn’t want to deal with everyone who would be talking about how Apple skipped a generation. Everyone was already calling it the iPhone 5 and anticipating it, they had the mindshare and the expectation. So: <a href="http://www.apple.com/iphone/">iPhone 5</a>.
<h2>Lanky Teenager</h2>
With the iPhone 5, iPhone is now in that awkward teenage growth stage where it suddenly shoots up but doesn’t put on any weight. Well okay the analogy starts to break down because I don’t know that I want it wider. The truth be told I’m not jazzed about it being taller either. I am very happy with the size of my 4S. These big boat Android phones are really uncomfortable to use frankly, and I don’t want a big iPhone.
But I think that, again, Apple has to make a phone that others want. No, Apple doesn’t cave to the demands of what people think they want as a general rule. But on the other hand, they do have to strike a balance here — make a good phone, make a marketable phone. For some reason people have it in their heads that bigger is better <a href="#fn:notaste">1</a> and it was getting to the point where the iPhone was the smallest smartphone on the market. So to some extent, I think Apple felt that they needed to make the phone bigger.
Another problem with the perception of people is that most think they need change for the sake of change. When the new iPhone comes out, there’s always irritation from various people that it is essentially the same phone with slightly better internals. The problem of course is that the iPhone is the best phone it can be, how do you make it better? Not by changing it for the sake of change, that’s for sure. So this time, Apple has changed the form factor slightly — they’ve made it taller.
One more angle on the taller design. I think Apple is running up against the limitations of the battery technology available today. We all, including me, gripe and moan about the battery life of our iPhones, but this is the fact of the matter, iPhone is very battery efficient. Apple has squeezed out every bit of battery they can, but they want to make a faster, better phone. They upgraded the internals and they need a bigger battery to power those internals for the same amount of time. A taller iPhone allows for a bigger battery.
<h2>Design Language</h2>
Coming back to my point about not changing for the sake of change, one of the things that is remarkable about the iPhone 5 is how much like the iPhone 4 and 4S it actually is. Just glancing at it, you may not immediately identify it as a different model of iPhone than the iPhone 4 and 4S. Of course it wouldn’t take long to fix that perception with just a slight study of the phone, but at a glance it looks a lot like the previous two phones. It is, in many ways a more refined version of the iPhone 4/4S design language. Though of course I have yet to get my hands on one, it looks like they’ve gone to the next level with the fit and finish, slightly beveling the edges of the antenna band and things like that.
And they did fix one important thing that I have always thought was just a little odd about the iPhone 4 design: they changed the back of the phone to something a little less breakable. Making both the front and the back of the phone out of glass may look cool, but why make parts of the phone that don’t need to be glass out of glass when that makes it more breakable? When I first saw the leaks of the aluminum back with glass top and bottom <a href="#fn:radiotransparency">2</a>, I was not at all sure I liked it, but the design has grown on me. And I certainly favor the idea of a less breakable back on the iPhone, though I have never cracked one myself.
<h2>The Long Term Evolution</h2>
iPhone 5, as expected, is a 4G LTE capable phone. This is not surprising since the iPad came out earlier this year with the capability as well. Apple has done well here too in that the iPhone 5 battery life is not worse than the iPhone 4S. This is a rarity in the emerging radio technology world. Anyone who keeps up with cellular radio technology knows that in the early stages of new cellular radio technology development, those new radios are power-hungry and big. Yet Apple has managed to cram all the radio technologies they need onto one chip. This is a huge feat and they did it at a slight cost. Though Apple does and will do it’s best to make this process transparent to the user, there are actually <a href="http://appleinsider.com/articles/12/09/12/apple_to_sell_3_variants_of_iphone_5_for_international_lte_coverage">3 variants of the iPhone 5</a>. This is necessary because of the divergent radio technologies and frequencies among carriers. Those three models are as follows:
<ul>
<li>AT&#x26;T and Canada Version (GSM model A1428)
This model supports UMTS/HSPA+/DC-HSDPA on 850, 900, 1900, and 2100 MHz, GSM/EDGE on the same frequencies, and LTE bands 4 and 17.</li>
<li>Verizon and Sprint (CDMA Model A1429)
This model supports CDMA EV-DO Rev. A and Rev. B on 800, 1900, and 2100 MHz, UMTS/HSPA+/DC-HSDPA on 850, 900, 1900, and 2100 MHz), GSM/EDGE on 850, 900, 1800, and 1900 MHz, and LTE bands 1, 3, 5, 13, 25.</li>
<li>Europe and Asia (GSM model A1429)
This model supports UMTS/HSPA+/DC-HSDPA on 850, 900, 1900, and 2100 MHz, GSM/EDGE on 850, 900, 1800, and 1900 MHz, and LTE bands 1, 3, 5.</li>
</ul>
As you can see the primary discrepancy is the LTE bands each phone supports (though the CDMA version certainly seems crammed with radio technology). You know it had to kill Apple to do this, but if they didn’t support LTE I suspect there would have been a bit of backlash. And the 3 models seems the be the price paid for supporting LTE. And really, in the long run, this is fine. Most people buy carrier specific phones and sign two year contracts so it works out fine.
<h2>Making Connections</h2>
The iPhone 5 features an all new Dock <a href="http://www.macworld.com/article/1168555/what_apples_new_lightning_connector_means_for_you.html">Lightning connector</a>. It is far smaller and it’s reversible (yes!). Contrary to what some people love to spout off, I do not believe Apple did this because they could, or because they like changing one proprietary standard for another. I think they did it because they needed to. Those opposed to this connector are divide into two camps. The first think that Apple should have just gone to, yea, should have always just used the Micro USB standard <a href="#fn:micro">3</a>. The second camp grumble that Apple didn’t need to change the connector and they’re just doing it to be mean and sell a lot of adapters and a lot of new accessories.
But the fact of the matter is the iPhone has been using borrowed technology in this department since it’s inception. The iPod Dock connector has been around since 2003. It’s nine-year-old technology, it’s big and bulky and un-Apple like at this point. And it was getting in the way of designing a smaller, thinner, and better iPhone. The Dock connector had a good run and long life. It was time for retirement.
<h2>Pods</h2>
Another thing that the new iPhone will be coming with is the redesigned set of headphones they are calling EarPods. This is another area where I am glad to see Apple doing something. I have made do with the earbuds Apple previously included with their iPhones but they have never been great. And I have always had trouble keeping those things in my ears. While I have not yet used these new EarPods, they look like they will be far better. Those that have had a chance to play with Apple’s new EarPods say the quality of both the build, and the sound are far better.
<h2>Evolution</h2>
The iPhone 5, while sporting perhaps the most radical design change yet in changing the dimensions of the screen, is still an evolutionary upgrade to the best smart phone on the planet. And that is not a knock against it. I remember having this type of conversation with people about the Unibody MacBook Pro. “Hey TJ, do you think next year they will redesign the MacBook Pro?” “No.” “Well they need to do something, it’s got to look new and better and shiner!” “Why?” And that’s the question isn’t it? Why? More to the point, why would you redesign something that is already the best? That’s why, when the retina MacBook Pro came out, it looked like a Unibody MacBook Pro. There’s nothing to redesign, it’s already as good as it can be with the technology available. The same holds true for the iPhone in my opinion. What would you change about the design language? Those minor things that I would have wanted changed did change. But since I think the overall design language of the iPhone is top of its class, why change it?
<h2>So Will I Put My Money Where My Mouth Is?</h2>
Well, no. See I upgraded to the 4S just a little less than a year ago. I upgrade my phone every two years. And even if I were eligible for AT&#x26;T’s midway point subsidy <a href="#fn:subsidy">4</a>, I really am not interested in signing another contract with AT&#x26;T right now. I have the itch to jump to Verizon again, a real bad itch to do so. I’m hoping it will be feasible next year when my contract is up with AT&#x26;T.
Interesting side note, it’s anecdotal, but almost every single person I follow on Twitter who is getting an iPhone 5 is switching from AT&#x26;T to Verizon. It makes me wonder if the mass exodus from AT&#x26;T predicted when Verizon got the iPhone was just delayed. I really think it’s because AT&#x26;T is so far behind on their LTE roll out <a href="#fn:behind">5</a>. It will be interesting to watch what happens on that front.
The iPhone 5 is a good phone and if I were in the market to upgrade, the iPhone 5 would certainly be the phone I would get.
<hr>
<ol>
<li>
These people have no taste, but that’s another story for another day. <a href="#fnref:notaste">↩</a>
</li>
<li>
Presumably for radio transparency. <a href="#fnref:radiotransparency">↩</a>
</li>
<li>
The question being, <a href="http://en.wikipedia.org/wiki/Universal_Serial_Bus#Mini_and_Micro_connectors">which one</a>. <a href="#fnref:micro">↩</a>
</li>
<li>
I’m not as far as I know right now. <a href="#fnref:subsidy">↩</a>
</li>
<li>
Just like they were with their 3G roll out. Anyone else seeing a pattern here? <a href="#fnref:behind">↩</a>
</li>
</ol>

The iPhone 5

<blockquote>
The Photoshop and Lightroom teams are pleased to announce we will provide support for HiDPI displays in the coming months, including the Retina Display available on the new MacBook Pro. Supporting this new technology requires significant work by our product teams and we’re committed to provided a free update to all Photoshop CS6 customers this Fall and Lightroom 4 as soon as the work is complete.
</blockquote>
Way to server your customers quickly Adobe. Your Pro customers aren’t likely to be interested in this gorgeous display anyway, right?
Procrastinate much?

9to5Mac

Retina Support for Photoshop? This Fall

<blockquote>
Before beginning our journey to learn HTML and CSS it is important to understand the differences between the two languages, their syntax, and some common terminology.
</blockquote>
This is a great resource, even for those of us who already know all this stuff.

Learn to Code HTML & CSS

HTML and CSS Terminology and Syntax Intro

I saw someone link to a YouTube video that got me to thinking. Now, understand I couldn’t make it through all the utter stupidity in the linked video. I think I got about five minutes in before I shut it off. Here it is if you want a dose of the stupidity that sparked my writing here: <a href="http://www.youtube.com/watch?v=wFeC25BM9E0">Has Apple Really Ever Invented Anything?</a>
To be clear, I don’t think this video (the first 5 minutes) was way off base, just enough to really irritate me. But enough about that, I just want to address the question.
First, let’s define the idea of inventing things. <a href="http://www.merriam-webster.com/dictionary/invention">Merriam-webster.com says</a>:
<blockquote>
<ol>
<li>discovery, finding</li>
<li>productive imagination : inventiveness</li>
<li>a : something invented: as (1) : a product of the imagination; especially : a false conception (2) : a device, contrivance, or process originated after study and experiment b : a short keyboard composition featuring two- or three-part counterpoint</li>
<li>the act or process of inventing</li>
</ol>
</blockquote>
Does Apple fit here? Discover, finding, productive imagination… I’d argue yes. Did Apple invent the personal computer? No. Did Apple invent the concept of the graphical user interface we use and love on the Macintosh? No. Did Apple invent the modern computer Operating System? No. Did Apple invent the Smart Phone? No. I could go on but you get the idea.
Okay so what am I saying here? Let’s look at the Operating System. Anybody with programing knowledge and sufficient skill can create an Operating System. I mean, Linux is an Operating System. What’s the difference? The difference is that Apple took the concept of Operating System and built upon it. They invented many of the ideas and conventions that all Operating Systems now use today. They didn’t invent the original concept, but they allowed the original concept to spark their imagination and spur them on to build upon and invent greater things.
Apple did not invent the smart-phone by any means, nor did they invent the components that make the iPhone possible. But the question is, did they invent the iPhone? I would say, and I think anyone with an ounce of sense would agree, that they did indeed. Sure, anyone could have made the iPhone. But the fact is Apple did, everyone else did not.
And where I’m differing with the video is the idea of invention. They even said Apple is a technology ‘recipe’ company — that they know how to take technologies and make good products out of them. No argument here. But why is that disqualified from invention and innovation?
Did Henry Ford invent the ‘Horseless Carriage’? <a href="http://en.wikipedia.org/wiki/History_of_the_automobile">No</a>. Would anyone say he did not invent the Model A? I think not. Henry Ford was an innovator, and an inventor. He is largely responsible for the automobile boom. Frankly I put The Ford Motor Company in the same category as Apple in terms of invention and innovation. Ford made cars for people. The technologies were already out there, Ford took them and improved upon them, iterated, innovated. Apple does the same thing with consumer electronics.
Yes, Apple invents things.

Does Apple Invent Things?

<blockquote>
<img src="/images/uploads/lg_iphone5_021.jpg" alt="iphone">
</blockquote>
That back looks ugly if you ask me. I really hope this is wrong.

Mark Gurman writing on 9to5Mac

The 6th Generation iPhone?

Yeah, pretty much. Because it’s geeky, and I’m geeky so I’m going to talk about it.
You might recall that I <a href="/blog/2011/12/14/just-how-flexible-is-expressionengine">talked about it when I first redesigned Apple User Pro</a>. It turned out I was using way too much PHP and making things hard on myself. So I <a href="/article/2012/02/ee-url-shortener">followed up and talked about how to do it the easy way with all native EE code</a>, and one plugin (<a href="http://devot-ee.com/add-ons/http-header">HTTP Header</a>).
But when I went for the rebrand to BuzzingPixel I wanted to simplify further from the end user perspective. One thing I never liked with any version of the URL shortener is that I had to include the template group in the URL like this:
<pre><code>http://aupro.us/s/1219
</code></pre>
Where “s” is the template group and the index template of the “s” template group is used by default. But who wants that template group in the URL? It’s extra. The entry ID is the only thing I want in the URL, that silly template group is just an annoyance. The only reason I ever included it was because as much as I love ExpressionEngine, and as flexible as it is in most ways, it can be hard to wrestle with it’s URL structure. URL structure is part of the design in my opinion, and I have been able to design the URL structure pretty well in most areas of this site, but I have never been happy with the URL shortener structure.
I have tried unsuccessfully in the past to remove the template group from the URL with htaccess re-writes but I have been unsuccessful. I even spent several hours trying to figure it out when designing the current BuzzingPixel design. I finally gave up on htaccess in disgust and went and watched a movie. But the next day I had a brain wave and I solved it! You will notice that short URLs no longer include the template group. Here’s how:
We still need to copy the index.php file from the main site root to the short URL site root. And you’ll need to remove index.php with htaccess. I’m actually removing www and trailing slashes as well. Here’s what my htaccess file looks like:
<pre><code>## remove www
 RewriteCond %{HTTP_HOST} ^www.bzpxl.us [NC]
 RewriteRule ^(.*)$ http://bzpxl.us/$1 [L,R=301]

## remove trailing slash
 ## check if file or directory exists first
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 ## if not file or directory remove the slash
 RewriteCond %{HTTP_HOST} !^\.bzpxl\.com$ [NC]
 RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

## remove index.php
 ## check if file or directory exists first
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 ## if not file or directory remove index.php
 RewriteRule ^(.*)$ /index.php/$1 [L]
</code></pre>
It’s probably not necessary to check for files and directories on my short URL site since nothing else lives there, but this is actually a pretty typical htaccess file for me, I copied and pasted then modified the main URL.
As I talked about in the previous articles, you need to modify the index.php file with some custom variables. But this is where I made the critical change that allows me to remove the template group from the URL altogether. Normally, ExpressionEngine requires a template group in the URL. But if there isn’t one in the URL then ExpressionEngine presents the 404 page. This was my “eureka” moment. I should create a new template group called anything I want (I called it shortener), and then using the custom config variable in index.php, override the default 404 page and assign my custom template as 404.
<pre><code>$assign_to_config['site_404'] = 'shortener/index';
</code></pre>
Now when the short URL with Entry ID is used, it’s sent to the 404 template. The 404 template has the appropriate code magic to redirect to the full URL.
<pre><code>{exp:http_header status="301"}

{exp:channel:entries entry_id="{segment_1}" disable="categories|category_fields|member_data|pagination"}
{if no_results}{redirect="/"}{/if}

{if channel_id=="9"}{redirect="/article/{entry_date format='%Y/%m'}/{url_title}"}{/if}

{if channel_id=="13"}{redirect="/linkedlist/{entry_date format='%Y/%m'}/{url_title}"}{/if}

{/exp:channel:entries}
</code></pre>
That’s not very much code at all. And for a lot of uses, you won’t even need to detect the Channel ID. I have to because I have two channels with two different URL structures, the Linked List, and the Article Channel.
So what’s going on. Well, first I’m using the HTTP Header plugin to change the header status to 301 instead of 404.
<pre><code>{exp:http_header status="301"}
</code></pre>
Next I’m opening the channel entries tag and instead of assigning a Channel or Channels, I’m telling the tag to use the first URL segment as the entry ID.
<pre><code>{exp:channel:entries entry_id="{segment_1}" disable="categories|category_fields|member_data|pagination"}
</code></pre>
Then I’m redirecting to the site homepage if there are no results (this is just in case someone visits the short URL without the entry ID or some such thing).
<pre><code>{if no_results}{redirect="/"}{/if}
</code></pre>
Next, in my case, I need to determine which channel the entry is in and redirect appropriately.
<pre><code>{if channel_id=="9"}{redirect="/article/{entry_date format='%Y/%m'}/{url_title}"}{/if}

{if channel_id=="13"}{redirect="/linkedlist/{entry_date format='%Y/%m'}/{url_title}"}{/if}
</code></pre>
And finally, I close the channel entries tag.
<pre><code>{/exp:channel:entries}
</code></pre>
If in the future I want to add channels and sections to the site that use short URLs, it’s as simple as adding another conditional line of code to detect the channel ID and redirect appropriately to the correct URL.
And that is a really simple URL shortener based on the Channel Entry ID with no template group in the url.

You're going to talk about the URL shortener again?


<a href="/images/blog/2012/06/21/tweetbot-for-mac.jpg"><img src="/images/blog/2012/06/21/tweetbot-for-mac.jpg" alt="EW4C2408"></a>
<blockquote>
Can’t speak about future apps, but here’s a higher res image so you can see the details of the Retina MBP screen. <a href="http://d.pr/i/4FVg">d.pr/i/4FVg</a>
</blockquote>
PLEASE! Take my money! Please! Tell me it’s true!

Mark Jardine on Twitter

Tweetbot for Mac

This is a beautiful page. This is how you sell computers. I particularly like the magnifying glass display comparison. And guess what, this is all done with HTML and CSS, no Flash anywhere on that page. It’s beautiful.

Posts tagged “Design” from the blog