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)

Attending the VIP WordPress conference held by Automatic in Napa, California. Great presentations with high level topics ranging from security, plugin architecture, performance to debugging and wp-cli.

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;
}

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/

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;
}

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.

So, I have had two websites running concurrently for the better part of a year. My old website, which can still be found here: www.trybuch.com/5 has not been updated in a very, very long time.

Well, I finally had some time to myself, and what better way, then to bring my new website to the forefront, and out of the closet. All I had to do was modify the .htaccess file to perform some re-directs, which made my subdomain ‘elan’ my base. You can view the new website by either clicking my ‘PORTFOLIO’ to the right, or here.

My new website is very bright and clean which is the complete oposite of my old site which was dark and gloomy. I also wanted to try a new technique for a portfolio site, namely, no navigation and ultra modern and minimal. (more on my navigation theory in a later post) You will notice that it is just a scrolling list of thumbnails, and rolling over and clicking, a lightbox appears indicating what my role on that specific project was.

I really hope you enjoy it as much as I do, there is still some work to be done and I plan on making it 100% HTML5, as well as adding microdata, and re-writing alot of the jQuery and JavaScript for a leaner cleaner and faster website.
Let me know your thoughts!

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.

I came across a great web-utility while looking through my twitter feed. It’s called: ‘If This Then That’ www.ifttt.com. This little website can assist you and even run macros across your social network. You can create actions with a seamless and easy to use GUI. I recommend checking it out.

I came across a situation where I needed to target an element on a page. Not having the ability to modify the JavaScript, nor the ability to add a class to the element I looked around for ways to really get specific and target a single element on the page. What I found: ‘E[foo=”warning”]’ that’s right, brackets in the CSS.

Let’s break it down. In the above example E represents the element you are targeting. This can be a class, id or tag. Example:
#myElement[foo=”warning”] – id
.myElement[foo=”warning”] – class
div[foo=”warning”] – tag

The second part of this statment is two part, the first ‘foo’ represents an attribute (height, width, title, rel, etc..) the second is the value for which you are matching so let’s say we are looking to target an img(s) on the page whose width is 1px and apply a pink border to it you could do something like:

img[width="1"]{
    border: 1px solid #f09;
}

Questions? Leave a comment.