News for the ‘code’ Category

HTML5 Video and Detection for iOS

I recently was tasked with looking into why an HTML5 video player was not working within application browsers on the iOS platform. There is nothing wrong with the HTML5 video player firing up and working in the native web browsing app, Safari. A co-worker wrote a nice snippet to parse the user agent for key words.

//Regex pattern /iPod|iPhone|iPad/i
/iphone|ipad|ipod/i.test(window.navigator.userAgent)

The above code is doing a few things:

  1. regex pattern: /iphone|ipad|ipod/i where the ‘i’ denotes that it is not case sensitive.
  2. .text(); A method that tests for a match in a string, in this case the regex object seen above.
  3. window.navigator.userAgent; grabbing the userAgent from the window{} in the DOM

This alone is great, and works flawlessly. However this breaks when using an embedded web browser with in and iOS application, such as Twitter, Facebook, Pinterest, Reddit, etc.. Here are 3 examples of the user agent strings that are passed in the headers.

  1. Safari App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A501 Safari/9537.53
  2. Twitter App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11A501 Twitter for iPhone
  3. Facebook App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11A501 [FBAN/FBIOS;FBAV/6.5.1;FBBV/377040;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/7.0.2;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBOP/1]

In the above examples, you will notice some differences. This is a very long string to test against. I have done some research and have seen a few examples of how to properly do iOS detection:

//Another method without using Regular Expressions:
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false ),
    iOSversion = false;

if( iOS ){
    iOSversion = ( !!window.history && !!window.history.pushState ? '4+' : '4-' );
    if( !!window.matchMedia ){ iOSversion = '5+'; }
}


//Similar to what my co-worker did.
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );


All the above work, however they do not work for embedded browsers. I was investigating the navigator object when I saw two that struck out at me:
navigator{}

Navigator {
appCodeName: "Mozilla",
appName: "Netscape",
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36",
cookieEnabled: true,
doNotTrack: null,
geolocation: Geolocation,
language: "en-US",
mimeTypes: MimeTypeArray,
onLine: true,
platform: "MacIntel",
plugins: PluginArray,
product: "Gecko",
productSub: "20030107",
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36",
vendor: "Apple Computer, Inc.",
vendorSub: "",
webkitPersistentStorage: StorageQuota,
webkitTemporaryStorage: StorageQuota,
__proto__: Navigator}


The two objects that struck out at me were:

  • vendor: “Apple Computer, Inc.”
  • platform: “MacIntel”

I had to rule vendor out, because that would be the same when using desktop Safari Browser. The platform however, changes and is specific to the device you are using:

  • platform: “MacIntel”
  • platform: “iPad”
  • platform: “iPod”
  • platform: “iPhone”

So the simple elegant solution to resolve the HTML5 video issues in embedded browsers of iOS applications was to run the test against the platform object and not the userAgent.

//Regex pattern /iPod|iPhone|iPad/i
/iphone|ipad|ipod/i.test(window.navigator.platform)

Posted: October 11th, 2013
Categories: 9-5, code, Info, tutorial
Tags: , ,
Comments: No Comments.

Custom Login Screen for WordPress

Quick an dirty plugin to customize your wordpress admin login screen. Simply install the plugin, activate and upload your logo and background image.
Can download it here: Custom Login Plugin

Adding a custom_login() and defining the paths for the CSS.

function custom_login() {
echo '';
}
add_action('login_head', 'custom_login');

Customizing the CSS:

/* Custom Login Styles */
.background-cover{
        background:url('/wp-content/themes/custom-login/background.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover; 
        -moz-background-size: cover; 
        -o-background-size: cover; 
        background-size: cover; 
        position:fixed; 
        top:0; 
        left:0; 
        z-index:10; 
        overflow: hidden; 
        width: 100%; 
        height:100%;
} 
#login{ z-index:9999; position:relative; }
.login form { box-shadow: 0px 0px 0px 0px !important; border-radius: 10px;}
.login h1 a { background:url('/wp-content/themes/custom-login/logo.png') no-repeat center top !important; display: inline-block; width:130px;} 
input.button-primary, button.button-primary, a.button-primary{ 
        border-radius: 3px !important;
        background:url('/wp-content/themes/custom-login/img/button.jpg'); 
                border:none !important;
                font-weight:normal !important;
                text-shadow:none !important;
        }

.button:active, .submit input:active, .button-secondary:active {
        background:#386CB4 !important; 
        text-shadow: none !important;
        text-decoration: underline !important;
}
input.button-primary, button.button-primary, a.button-primary{ border-color: #ccc;font-weight: bold;color: white;background: #386CB4}
.login #nav a, .login #backtoblog a {
        color:#386CB4 !important;
        text-shadow: none !important;
}
.login #nav a:hover, .login #backtoblog a:hover{
        color:#386CB4 !important;
        text-shadow: none !important;
}
.login #nav, .login #backtoblog{
        text-shadow: none !important;
}
Posted: December 17th, 2012
Categories: code, Design, tutorial
Tags:
Comments: No Comments.

Encoding your files at the server level for faster pages

Have you ever found your self waiting for a web page to load? Often times reminiscent of your AOL dial-up days? If so, look no further. Some simple .htaccess or server modification will allow your site to zip along and load +30% faster!

# DEFLATE by type - html, text, css, xml
AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml
 
# DEFLATE by type - javascript
AddOutputFilterByType DEFLATE application/x-javascript application/javascript text/javascript text/x-js text/x-javascript
 
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml

source:beerpla.net/

Posted: November 26th, 2012
Categories: code, tutorial
Tags: ,
Comments: 1 Comment.

CSS3 variables are the future

A good friend of mine, Dave Collier sent me a highly interesting article that had me all giddy and excited to be a Frontend Engineer. CSS3 is introducing variables, and is already available for use. The only downside, which is sure to be rendered moot soon, is that it is currently supported only by Google Chrome.

Have a read: http://www.aaronlumsden.com/css3/an-introduction-to-css-variables/

here is the code example excerpt from the above link:

:root {
    -webkit-var-brand-color: red;
 
}
h1 {
  color: -webkit-var(brand-color);
}
div {
background-color;
}
Posted: November 13th, 2012
Categories: code, Info
Tags: , , , ,
Comments: No Comments.

FireFox 13 drops -moz- prefix for CSS3 attributes

If you happened to be scratching your head, wondering what happened to your ‘border-radius’ or ‘box-shadow’ in Firefox, you should give this developers page a read:
https://developer.mozilla.org/en/Firefox_13_for_developers

Firefox 13 is dropping the vendor prefix from these two CSS3 properties. This should not affect you if you already are using ‘border-radius’ and ‘box-shadow’. Your CSS3 used to look like this:

div{
    -moz-box-shadow: 0 3px 5px #ccc;
    -webkit-box-shadow: 0 3px 5px #ccc;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    box-shadow: 0 3px 5px #ccc;
}

should now look like this:

    -webkit-box-shadow: 0 3px 5px #ccc;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    box-shadow: 0 3px 5px #ccc;

However if you are uncertain of what browser your traffic is coming in through, it may be a good idea to leave ‘-moz-box-shadow’ and ‘-moz-border-radius’ to support legacy browsers.

Posted: June 14th, 2012
Categories: code, Info
Tags:
Comments: No Comments.

Microdata and Microformating

SEO is taking on a whole new dimension. Sure you can semantically mark up a webpage using proper HTML elements, but how can you semanctically markup the content of a page? Enter Microdata. This is nothing new, but with Google, Bing and Yahoo! collaborating and backing schema.org, advances are starting to be made.

Here is an excerpt straight from their documentation:
Let’s start with a concrete example. Imagine you have a page about the movie Avatar—a page with a link to a movie trailer, information about the director, and so on. Your HTML code might look something like this:

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

To begin, identify the section of the page that is “about” the movie Avatar. To do this, add the itemscope element to the HTML tag that encloses information about the item, like this:

<div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

By adding itemscope, you are specifying that the HTML contained in the <div>…</div> block is about a particular item.

But it’s not all that helpful to specify that there is an item being discussed without specifying what kind of an item it is. You can specify the type of item using the itemtype attribute immediately after the itemscope.

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case http://schema.org/Movie.

Posted: October 31st, 2011
Categories: code, Info, tutorial
Tags:
Comments: No Comments.

@font-face CSS3

While creating my site, I decided to implement my own font, one that is not a generic browser or system font. To achieve this, I decided to use the new CSS3 @font-face property. The simple syntax is as follows:

@font-face {
font-family: 'elanio';
src: url('elanio.eot?') format('tryetype'),

This is great syntax, but I was not done yet. While this will work, it is not ironclad cross browser compliant. Each browser will only recognize certain font types, so you much create backup syntax and fall backs. Take a look at the following:

@font-face {
  font-family: 'Elanio Bro';
  src: url('ElanioBro.eot?') format('eot'), url('ElanioBro.woff') format('woff'), url('ElanioBro.ttf') format('truetype');
}

Let’s take a look at what is going on here: src: url(‘ElanioBro.eot?’) this question mark ‘?’ at the end simply forces a no 404 page in IE. With out it, IE would request the source file as such: …elaniobro.eot’)%20format(‘… which would result in a 404.

This method is credited to the same guy behind font squirrel and via Paul Irish’s blog

Posted: May 31st, 2011
Categories: code, tutorial
Tags:
Comments: No Comments.

Google New York Engineering Open House

Tonight I had the privileged of being one of the select few who was able to secure an invite to the first, of what I hope to be many, installments of an open house at Google Headquarters in New York City.

Highlighting how Front End Engineering and Engineers are impacting some of Google’s most exciting projects was the theme for this first session. Speaking tonight were:

  • Tim Dierks, Software Engineer
  • Fuzzy Khosrowshahi, Director, Software Engineering
  • David Nagle, Director, Software Engineering
  • Elizabeth Hamon Reid, Director, Engineering

Biography backgrounds on the speakers above can be found here.

While I had plenty of good food and drinks at their famous cafeteria, I also came away with insight about some obscure labs programs. While waiting inline to grab some falaffel and a gyro, I met with and talked with a Google employee who enthusiastically turned me onto closure, a Google JavaScript compiler. Here is a brief synopsis of what closure is from their website:

“The Closure tools help developers to build rich web applications with JavaScript that is both powerful and efficient.”

I will give this a whirl and reply with some of my thoughts in a future post.

Posted: February 3rd, 2011
Categories: code
Tags: , , , ,
Comments: No Comments.

Overriding inline CSS

While working on the MLS (Major League Soccer) redesign, I came across an instance where I needed to override an inline style. I did not think this was possible at first, but after doing some research and googling, I came up with this solution. It uses CSS selectors which are very powerful and allow you to target specific elements on a page regardless of an ‘id’ or ‘class’.

Here is an example of inline styles being applied to an element on the page:

<div class="example-page">
    <div class="example-content">
        <div id="picture" style="position:absolute; margin:100px">
            <img src="/img/example.png" height="100" width="100"/>
        </div>
    </div>
</div>


Here is how you can override the inline style:

#picture[style]
{
    position:relative;
    margin:0;
}

Posted: February 2nd, 2011
Categories: code, tutorial
Tags:
Comments: No Comments.

jQuery Error ‘expected identifier, string or number’ in IE7

While working on a site today, I came across an issue where some of my jQuery code was not functioning properly. The code in question was working properly in all the browsers sans IE7. (FireFox, IE8, Chrome, Safari on both mac and PC)

Having to debug it as soon as possible, as it was on a live site, I came across a solution. Take a look at the code in question (small snippet) that was throwing the error.

function performShippingQuote(addr, zipcode, province) {
    if (addr == last_addr && zipcode == last_zip) return;
    last_addr = addr;
    last_zip = zipcode;
    
    $.ajax({
      type: 'GET',
      url: Drupal.settings.basePath,
    success: updateShippingCost,
       dataType: 'json',
      data: {
         q:'addresses/shipping_ajax',
         program:$j('input#edit-program-program-nid').val(),
         address:addr,
         zip:zipcode,
         state:province,
       }
     });
}
  

If you notice on line:16 there is an ‘,’ at the end. This trailing comma was the culprit! Upon removing it presto everything worked like a charm across all browsers!

Posted: January 15th, 2011
Categories: code
Tags: , ,
Comments: No Comments.