teravoxel

by Jeremy Collins

Subtle parallax scrolling added

October 5th, 2013 by

I added a subtle scrolling effect of cascading cubes into the website background, so it looks like a lot of little voxels. I’m so clever.

This was done using Prinzhorn’s skrollr script, which is really nifty. This thing is used in a few places, such as KitKat’s homepage.

Here’s the markup used for the page-wrap and header section:

<div id="wrap" class="wrap_pattern" data-0="background-position:0px 0px;background-color:rgba(242, 242, 242, 1);" data-end="background-position:0px -2000px;background-color:rgba(185, 185, 185, 1);">
<header class="wrap_pattern" data-0="background-position:0px 0px;" data-end="background-position:0px -2000px;">

“data-0″ represents page-top, “data-end” is page-bottom. Amazingly easy, though my implementation of this is much more basic than others’. Right-click and inspect element on these things to see the background positions increment and decrement as you scroll.

“Warning: Cannot modify header information – headers already sent by …” error

August 13th, 2013 by

Just saw a scary error when I attempted to load the wordpress login page, and saw no username/pass available.:

"Warning: Cannot modify header information - headers already sent by ..."

The fix is to open up functions.php and remove any empty spaces (un-needed line breaks) at the bottom of the file and save.

New logo (again)

July 21st, 2013 by

I realized that my old logo was too busy, so it’s been redone as a far simpler geometric pattern.

To do:

  • Actually populate the “Work” page with content and a non-generic layout.
  • Do the same for “About”.

Current Sideproject:

  • Learn Objective-C
  • Learn PhoneGap

Fix for google.com/sync redirection

May 16th, 2013 by

For some reason all of Google’s documention on how to change your Google Mail Exchange (Sync) settings say to visit http://m.google.com/sync if you want to change your sync settings. You’ll notice this will redirect you to their general help site, which doesn’t provide any helpful settings.

The correct place to go is http://m.google.com/sync/settings/

This took me a little while to figure out, so there ya go…

CSS3 border-radius property support in popular mail clients

May 11th, 2013 by

There is a lot of incorrect documentation floating around about this. Here is the status of border-radius property support as of today.

Note: This includes all the vendor prefixes as well.

Gmail: Yes (Elsewhere you will see documentation denying this. Perhaps Google changed this recently?)
Outlook.com: Yes
Outlook for Mac: Yes
Apple Mail (Mac and iOS): Yes
Yahoo web mail: No
Outlook for Windows (all versions): No

In non-supported clients, your rounded rectangles and squares will simply be sharp-edged rectangles and squares. Not the end of the world.

The lack of consistency among Outlook versions (Windows vs Mac vs web) is interesting. Outlook for Windows uses the Microsoft Word HTML renderer which is horrible, so I’m glad to see that development decision didn’t make it over to the Mac or web team.

And of course the Apple Mail clients work here. Apple uses their standard WebKit rendering engine for email markup and its so nice — if your newsletter looks good on Safari you can bet it will look good when emailed to Apple’s mail clients.

2X DPI image versions available

May 5th, 2013 by

I’ve replaced the logo and a few other images with “retina” quality resolution versions on qualifying devices.

Currently this is implemented by uploading an asset with twice the needed resolution and then using the CSS height: XXXpx; width: YYYpx; tag to set them at exactly 50% their actual resolution. Hi-DPI devices will fill in the space with the extra pixels their screens allow.

Downside: I realize this is a somewhat inefficient method as far as bandwidth goes and doesn’t scale, but the file sizes are fairly small for just the logo and few other images in this case.

20130505-233132.jpg

View this site on your 2x DPI device (those with “Retina display” in marketing-speak), and the logo should look nice and sharp.

New theme is live!

April 27th, 2013 by

My custom WordPress theme is live as of a minute ago, at last freed from the confines of localhost! It will always be a work in progress, but for the next few days especially…

Please pardon the dust (CSS errors)!

Responsive design with Google mail applications (CSS Media Queries)

December 16th, 2012 by

A unfortunate design choice by Google in their Gmail mobile application which has not been noted elsewhere:

View in Gmail app

(more…)

Fix for collapsed tables in HTML emails sent to Google Mail accounts

December 5th, 2012 by

Here’s a fix for when HTML emails sent to Google Mail accounts entirely omit some table cells during rendering. If you’re like me, you were probably tearing your hair out since your HTML/CSS is  100% valid. The table cells are there — they’re just collapsed and need to be forced to show. It’s a strange fix, so the explanation below is a little lengthy. Bear with me…

Example in Gmail:

Image of message rendering in Google mail

Example in Outlook:

Image of rendering within Outlook 2010

In gmail, the table cells are collapsed around the text. In Outlook (or Apple Mail, or any other clients really) this is not the case.

When this happens:

It occurs only with table cells that contain no content, or text content that does not fill the entire height of the cell. This is why these top and bottom titlebar cells have disappeared, and the center cell (with the title text) contains less vertical space than expected.

Why this happens:

Gmail will collapse table cells with empty space defined only with height. In this case, we have three cells: the top, middle, bottom. The middle contains text, so it has content, but it is still collapsed around the text. The top and bottom have no content and are completely collapsed as a result.

When Gmail does this, it actually changes the code, so it’s nothing caused by the HTML currently in the template. height is changed to max-height, meaning our 10px height becomes a max-height, and thus is actually 0px (since there is no min-height or height to set a low-end).

Proposed fix:

For these collapsed cells, we can trick gmail into displaying them by using line-height. However line-height will *only* work for them if the cells are given content. A single space works fine here. The space forces the table cells to remain non-collapsed, and the line-height attribute defines how much many vertical pixels to associate with the space. Admittedly, this is awkward, but this is basically a hack in the first place.

Bootcamp: “files cannot be moved” error on partition fix

September 27th, 2011 by
files cannot be moved error

If you see this error “files cannot be moved” when partitioning a drive using OS X’s boot camp assistant, here’s the fix:

  1. Boot into Single User mode (hold cmd-s on boot)
  2. Type the following after all the crazy white text is done loading:
    /sbin/fsck -fy
    exit

This works for all modern OS X versions, from my experience.

Previously the only method I knew of was to restore the entire computer via a Time Machine backup, so this saves a solid 4 hours. I hope you find it useful too.

Looking for RSS?. Copywright © 2013 by Jeremy Collins.