subtle detour

CSS Media Queries

Sat, 31 Mar 2012 04:49:21 +0000

Media Queries are a powerful feature of CSS 3 because they allow a single page to be readable on a variety of devices (pc, tablet, phone), all through targeted css stylesheets. By using simple rules, media queries will swap css stylessheets dynamically based on attributes like screen size and orientation. A great series of articles written by David Powers over at Adobe discuss how to effectively use media queries. If you want a deep dive, read over the W3C specification for CSS 3 media queries.

Take an example: you want to target a screen size of 640 pixels or smaller. Pay particular attention to the media attribute and the simple rule it contains:

IE 8 and below support

IE 8 and below do not support media queries naively, but they do support conditional stylesheets (this method could be used to conditionally load other things, like javascript files) through the use of special, IE-specific comment tags in HTML code:

If you want to read up more on this, like how to target specific versions of IE, head to this CSS-tricks article.

A real world example

Here is something a bit more complicated: targeting multiple devices and their orientations. Now, I’m not saying that all those min/max widths are exactly correct for those particular devices, but media queries used to target them might look like this (note the highlighted lines):

Issues with mobile browsers

Mobile browsers pull some trickery because they don’t report their true screen dimensions. Android (which hopefully will turn into Chrome for Android), Mobile Safari, and IE Mobile set their widths to ~1000 pixels regardless if the page is smaller (mobile safari is 980 pixels, ie mobile is 1024 pixels). This means you’re not getting an accurate count of their pixel dimensions.

Thankfully there’s a simple solution. Apple created a meta tag to quash the disconnect media queries have between mobile and desktop browsers. Even better, this solution has for the most part been adopted by other mobile device manufacturers and has even been added to the W3C editor’s draft specification.

Add the following meta tag to the of your page:

Media Queries and Javascript

Media queries aren’t exclusive to just stylesheets either. Javascript is fully capable of using media queries like events to execute code once the query rules are met. That opens up a lot of possibilities, but I’ll have to save that discussion for another post.

Web Fonts (@font-face)

Fri, 30 Mar 2012 15:40:57 +0000

I wanted to replace the left hand menu header images with CSS-based fonts (web fonts =
eot, WOFF , ttf and svg) to implement media queries and to follow best practices. In addition, now we can use fonts which aren’t natively on a user’s device, allowing for a more unique feel to the site. To learn about all the new web font standards, head over here and read up on it.

A great resource to find free web fonts is fontsquirrel. They also have a nifty generator to help you get started.

Follow these steps to start taking advantage of the new web fonts standard…

Upload your web fonts to your site
Add @font-face declarations to your stylesheet
Using the @font-face CSS declaration correctly (multiple srcs) allows the various browsers to select the appropriate font without causing you a bunch of headaches or extra code. You can learn more about this syntax by reading the Fontspring blog post on it.

The code for it is as follows:
```
@font-face{
	font-family: 'CoolFont';
	src: url('CoolFont.eot');
	src: url('CoolFont.eot?#iefix') format('embedded-opentype'),
		url('CoolFont.woff') format('woff'),
		url('CoolFont.ttf') format('truetype'),
		url('CoolFont.svg#webfont') format('svg');
}
```
Reference web fonts in your CSS
Now comes the easy part, referencing the new font declaration from above. Just as you would normally define which fonts to use through CSS, you can now reference your custom web font via its font-family attribute.

Example:
```
p { font-family: 'CoolFont', Arial, sans-serif; }
```

Semantics and Structure

Thu, 29 Mar 2012 17:04:31 +0000

The first version of this blog design, done in 2009, was really just a way for me to get familiar with CSS and jQuery (to make cars go up and down the side of the page). As time has gone on, I’ve become more and more interested in HTML 5 / CSS 3 and the huge usability benefits it has brought. Now that I’ve decided to rework the site to take advantage of HTML 5 / CSS 3, peeking at my page structure and stylesheets made me cringe. Organization was messy, not semantic at all and ridden with unused styles. It’s okay…I was younger then and in a period of experimentation.

A very important part of using the new features of HTML 5 is to have a well organized, semantically correct page. You see that menu on the left?…completely reorganized the structure, incorporating the

tag, and then used media queries to change the styles.

You might be asking yourself if web semantics really matter. Well, they do…in my opinion. If you don’t think about the page structure and semantics, then you will end up like me, having to re-work your menu to take advantage of new features you hadn’t even considered back then. Think of it as maintainability and future planning. Once your page is structured semantically and in a meaningful way, you add more context to the content you’re serving (even if the majority of viewers are unaware). The more context you provide, the more possibilities are opened for your content to be used, even in ways you haven’t thought of yet.

HTML 5 has added over 30 tags to play with, which brings the total number to over 100. So go ahead and switch your blog posts to use the

tag or use the

tag for contact information.

Web Semantics and Structure Resources

HTML 5 Doctor – View all the HTML 5 tags and get info on how use them.
Smashing Magazine – HTML5 Semantics article
Adobe – Understanding HTML5 Semantics article

Design conversion with HTML 5 and CSS 3

Thu, 29 Mar 2012 03:33:34 +0000

Detailing the reconstruction of the blog design to take advantage of HTML 5 / CSS 3 techniques.

convert menu headers from images to @font-face (WOFF & eot)
streamline html semantics and structure to be able to take advantage of CSS 3 techniques
implement media queries for desktop / mobile experience
change right hand vehicles from jQuery CSS div animations to canvas/svg animations

Loop through SharePoint Profiles

Thu, 04 Feb 2010 16:54:19 +0000

Simple code sample showing how to retrieve profiles and their properties from a SharePoint site.

Note:

This code is relevant only if you’re running it on the SharePoint box, ie: web part, console app. If you need to access profiles outside of the box, use web services, as detailed by Michael Bowersox’s post.
Microsoft.Office.Server.UserProfiles reference.
Instantiate the UserProfileManager with your site context.
PropertyConstants for retrieval of pre-defined properties. Every profile has a handful of standard properties, but check to make sure the property contains data to avoid a possible null reference exception.
Replace PropertyConstants with custom property name to get your custom properties.

using Microsoft.Office.Server.UserProfiles;

// Code Block for Profile Loop
using (SPSite site = new SPSite(spURL))
{
    try
    {
        // Get our context and the profile manager object
        ServerContext context = ServerContext.GetContext(site);
        UserProfileManager profileManager = new UserProfileManager(context);

        // Define our holder strings
        string firstName = string.Empty, lastName = string.Empty;
        string department = string.Empty, customProperty = string.Empty;

        // Loop through each user in the profile manager
        foreach (UserProfile user in profileManager)
        {
            // grab the first and last name
            firstName = user[PropertyConstants.FirstName].Count > 0 ? user[PropertyConstants.FirstName].ToString() : string.Empty;
            lastName = user[PropertyConstants.LastName].Count > 0 ? user[PropertyConstants.LastName].ToString() : string.Empty;

            // grab the department
            department = user[PropertyConstants.Department].Count > 0 ? user[PropertyConstants.Department].ToString() : string.Empty;

            // grab a custom property
            customProperty = user["Custom Property Name"].Count > 0 ? user["Custom Property Name"].ToString() : string.Empty;
         }
    }
    catch (Exception ex)
    {
        HandleException(ex);
    }
}

Eric C – TripHopHipHop

Tue, 11 Aug 2009 14:58:44 +0000

Here is a little mix that I did, which I plan to expand into a 60 minner…sometime.

Massive Attack – Teardrop Loop

Wed, 08 Apr 2009 04:39:41 +0000

Another loop I made for a ringtone…

MC 900 Ft Jesus – If I Only Had a Brain Loop

Mon, 06 Apr 2009 04:10:44 +0000

Here is a loop I did for my iPhone. All members of triphopclan get this ringtone.

First Loop

Mon, 06 Apr 2009 01:48:31 +0000

Here is a little loop I did back in 1995 when I was messing around with Soundforge 4.5