Tiffany B. Brown » General

XHR2 + CORS Slides, some AppCache-fu, OpenWebCamp, and Opera News

tiffany — Fri, 01 Jul 2011 01:00:49 +0000

For the June meeting of the HTML5 & CSS3 LA User Group, I spoke about XMLHttpRequest, Level 2 and Cross-Origin Resource Sharing headers. It’s always tough to present code. That goes double when you are sleep deprived, yet caffeinated and tongue-tied.

In any case, the slides — which is really just one really long, really heavy HTML file with inline CSS, JS, and images (thanks, data URIs!) — are now available.

Data URIs have been available for quite a while now, though Internet Explorer versions 5-7 don’t support them. They are string representations of file data, typically base-64 encoded. When used as an img or url() source, they reduce the number of HTTP requests. And as we know, making fewer HTTP requests is the number 1 rule of web site optimization … except y’know when it creates a 1.8MB HTML file .

It’s simple enough to convert files to a base64 encoded string with a few lines of code. Let’s assume we want to convert a file named “cars.png.” In PHP it might looks like this:

$filename = 'cars.png';
$ext = pathinfo($filename,PATHINFO_EXTENSION);
switch($ext){
     case 'gif':
          $type = 'image/gif';
          break;
     case 'png':
          $type = 'image/png';
          break;
     case 'jpeg':
          $type = 'image/jpeg';
          break;
}
$fileHandler = fopen($filename,"r");
$data = fread($fileHandler, filesize($filename));
print 'data:'.$type.';base64,'.base64_encode($data);

Despite the ginormous HTML file, I still think it’s useful for it to be a single-file package. After all, you only have to save and keep track of that one HTML file.

Application Cache

Bonus: you can view it offline because I took advantage of Application Cache.

Application Cache is an awesome technique that can speed up load times by caching data locally. But it also ensures that if connectivity is lost or unavailable, you can still visit that URL and have access to the content. This assumes, of course, that you’re using a browser that supports AppCache. The latest versions of most major browsers, including Opera 11+, do.

Application Cache is also quite simple — at least the basics of it are. First, add a manifest attribute to your element.

Then create a manifest file. It’s a simple, plain text file that must be sent with a Content-type: text/cache-manifest header. Typically the file name should have an .appcache extension, though it will work (for now, at least) if it’s named foo.manifest provided you send the correct content type header.

A basic manifest — the one I’ve used for the slides in fact — looks like this:

CACHE MANIFEST

CACHE:
index.html

That’s it. We have told our browser to cache this page. You can also specify which files the browser should always retrieve from the server with NETWORK, or which files to use if you need to fall back. It’s fascinating stuff. For more, check out HTML5 Doctor’s post, Go offline with application cache.

I’ll be at Open Web Camp!

I’ll be speaking more about AppCache and other things at Open Web Camp July 16 at Stanford University in Palo Alto. Come say hi.

Opera news, in case you missed it:

Opera 11.50 was released Tuesday
Opera Mini 6.1 and Opera Mobile 11.1 were released yesterday (6/29)

I’m most excited that the Opera Mobile rendering engine is now running Presto 2.8 which means it now supports multi-layouts (we run on tablets too!), session history and navigation, and the File API (among other things).

Co-Working in (and near) Los Angeles

tiffany — Tue, 17 May 2011 08:00:27 +0000

A running list that I will update as I learn about new spaces.

BlankSpaces (Mid-Wilshire)
Boxaplex (WeHo)
Coloft (Santa Monica)
Indie Desk
Next Space (Culver City)
Office & Company (Pasadena)

Slides from BarCampLA

tiffany — Tue, 03 May 2011 02:45:57 +0000

I did two ~15-minute talks at BarCampLA8: one on HTML5 Forms, and one impromptu, sorta half-a**ed talk on Opera Mini.

I took some time to update and correct the Opera Mini slides based on some notes I had, but couldn’t get to (no WiFi at this year’s camp ) and questions I received during the talk.

I also corrected a clarified an item in the HTML5 Forms talk.

View the slides for both:

On the rape of men

tiffany — Fri, 08 Apr 2011 16:54:12 +0000

“The way I make sense of that is that women, for better or worse, live their lives with this idea that they might experience sexual assault at some point. There are public models of how to recover from rape. Men don’t have any expectation that this might happen to them. It’s very difficult to figure out how those experiences fit into your sense of self as a man.”

That’s VA psychologist Amy Street in a Newsweek piece about male-on-male rape in the military.

Come to BarCampLA April 30 – May 1, 2011

tiffany — Fri, 08 Apr 2011 13:00:53 +0000

I’m going, and because of the nature of a BarCamp — show up, sign up, give a talk — I will also be speaking. What’s BarCampLA?

Barcamp is a ad-hoc technology conference where attendees are the speakers. Got something cool to share with your fellow tech geeks? Been working on a neat side project? Come to barcamp and meet others with your passion while sharing yours. The agenda is created each morning of the event, so while you won’t know exactly what the topics will be, you can be sure it will be engaging and interesting. Past sessions have ranged from Richard Stallman talking about the Free Software Foundation to an introduction to Tactical Corsets.

You should come hear me blab about HTML5 Forms, which will be an updated version of the talk I gave at the LA HTML5 / CSS user group.

If there’s more than one free slot, I may also share the little bit I know about web storage and offline web applications or CSS3 transitions and transforms.

Sounds good, right? Well that’s why you should come. Go ahead and register. It’s only $35 before April 18th. The price jumps to $55 after.

Thoughts on practices for CSS Gradients

tiffany — Wed, 06 Apr 2011 23:35:48 +0000

Examples of CSS gradients are cropping up in the wild, and with good reason. CSS gradients:

don’t require the additional HTTP request of an image file.
are easier to modify than image files.
“weigh less” than most image files.

That’s the ideal, at least. In their current state, gradients are actually a hot mess. The reality?

The specification is still in flux.
Full gradient support is not available in all modern browsers. (For now, Opera 11 only supports linear gradients.)
Many older, though relatively recent versions of browsers (Internet Explorer 8 & 9, Opera 10 Desktop, Opera Mobile, and Opera Mini, for example) don’t suport CSS gradients at all.

So, how can developers take advantage of gradients and still support older browsers? Let’s look at some approaches.

Set a background color

Take a look at the following CSS:

#linear{
    width:400px;
    height:300px;
    background-image: -moz-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#f60), to(#fc0), color-stop(0.5,#c09) );
    background-image: -o-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
}

This is a fairly common scenario. The developer (*cough*me*cough*) covered most of her bases, but forgot one: browsers that don’t support gradients at all. You can see what this looks like in Internet Explorer 9 (see Figure 1).

Figure 1. Internet Explorer 9 doesn’t yet support CSS gradients. This is what it looks like if you don’t supply a background color.

Now look at the following CSS:

#linear{
    width:400px;
    height:300px;
    background-color: #333;
    background-image: -moz-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#f60), to(#fc0), color-stop(0.5,#c09) );
    background-image: -o-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
}

Here we’ve set a background image, but we’ve also set a background color. Browsers that don’t support CSS gradients will ignore the last three lines. (Note: each browser also ignores the other browsers’ vendor-specific prefixes.)

Setting a background color is the easiest fall back for older / less modern browsers.

Set a background image using an external file

Consider the following CSS.

#linear{
    width:400px;
    height:300px;
    background-image: url(migas.jpg);
    background-image: -moz-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#f60), to(#fc0), color-stop(0.5,#c09) );
    background-image: -o-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
}

In this example, we’re taking advantage of how browsers apply the cascade. As it turns out, Opera 11, Chrome whatever-the-heck-version-it’s-up-to, and Firefox 4 will not make the HTTP request for the external file. Safari, however, does (see Figure 2). Internet Explorer 9 (and less-modern browsers) will only load the external file. Depending on your audience, this may be an acceptable alternative.

Figure 2. Safari downloads all images. Click to embiggen.

Note: I have just barely tested this in mobile browsers. (Opera Mobile 11 doesn’t support gradients. Users will see the external image).

Use SVG gradients to create a background image

Internet Explorer 9 and Opera 10 (including Mobile) do not support CSS gradients. They do, however, both support the use of SVG images as background images. Another alternative to using external images, then, is to use an SVG file.

#linear{
    width:400px;
    height:300px;
    background-image: url(gradient.gif);
    background-image: url(gradient.svg);
}

This example works in all current desktop browsers, and most mobile browsers. Safari 5, again, will download both images. Most others will download the latter SVG image. The advantages here are clarity and (arguably) ease of maintenance. Want a different gradient? Change the images.

You should be aware, though, that some recent(-ish) versions of mobile WebKit — such as the T-Mobile myTouch 4G browser — don’t support SVG backgrounds. You’ll still need to add a linear gradient for those browsers, or set a background color.

Or keep doing what we’ve been doing

Of course, the growth of SVG and CSS gradients support doesn’t preclude using GIF, PNG or JPG gradients. The biggest point in favor of using bitmap images is that they still work in older browsers and current ones.

As with any aspect of web development, the right approach should balance concerns of maintainability, file size, and the browser distribution of your audience.

You left out `linear-gradient`!

I left it out of the examples above for two reasons: (1) simplicity; and (2) the syntax could change (though if I had to predict, it won’t change by much). Be forward-thinking! There are very few reasons not to include the proposed linear-gradient syntax in your code.

Opera blog roundup

tiffany — Mon, 28 Mar 2011 08:00:10 +0000

Want to learn more about Opera Desktop, Mobile and Mini? Follow along with the official company product blogs. (Posted here as much for my benefit as for yours).

Core: Core is where all of the magic is made. Features and support get added to core and then make their way to Desktop, Mobile, Mini and the SDK.
Desktop: News and updates for our desktop product, including the occasional development snapshot.
Dragonfly: Learn what you can do with our kick-ass debugging tool, Dragonfly.
Opera Mobile: Find out more about what’s happening with our smart-phone browser, including news about new features and releases.
Opera Mini: News and updates about the Opera Mini web browser and compression service.
Opera DevRel Team: My team . Find out about recent talks, new Opera features, new Dev.Opera articles and more.
Labs: Want to find out what’s coming next in Opera? Find experimental builds and news on the Opera Labs blog.
Opera Unite: Learn more about Opera’s built-in server feature.

How to reach key people at big companies

tiffany — Tue, 15 Feb 2011 04:52:55 +0000

This isn’t definitive, of course. But it’s certainly one of the methods I use to find people on the internet.

Start with a LinkedIn search. Enter the name of a company and watch what happens. You’d be surprised by how connected you are.
Identify people who are in your network. You will be able to see their names. If they are 2nd degree connections, use one of your friends to get in touch. If they are 3rd degree connections, continue to the next step 3.
Turn to Google or Bing and run a search for their first name, last initial, company and position. LinkedIn reveals a full first and last name to Google. Google will also reveal any personal web sites, Facebook and Twitter accounts. Depending on how high up in the organization this person is, you may also find an e-mail address. If you don’t find an e-mail address, proceed to the next step.
Look at the company’s press section. This step is optional, really. The reason to look at a company’s press or about us section is this: there will often be quotes from company big-wigs in their press releases. You can find the names of key contacts, but just as valuable, you can find out the company-wide email address format. Once you know that, you can e-mail at will. Or, do the next step.
If you can’t find it, guess at it — the e-mail address, I mean. Most companies use firstname.lastname@domainname.com. Many use flastname@domainname.com or firstnamel@domainname.com. Guess and send. It works!

Why use LinkedIn instead of Facebook?

LinkedIn is widely accepted as a way for professionals to connect with other professionals. Because many people also interact with their family and friends via Facebook, they may not take so kindly to you using it for business reasons. Go with LinkedIn. That’s why it’s there.

On the lasting effects of the Great Migration

tiffany — Wed, 15 Dec 2010 16:27:25 +0000

“New York is among a group of metropolitan where the Great Migration created large black ghettos, and where very high levels of segregation have proved very resistant to change.”

That’s John R. Logan of Brown University as quoted in the New York Times article Region Is Reshaped as Minorities Go to Suburbs (log in required).

The Great Migration is on my mind because I recently finished reading Isabel Wilkerson’s fantastic book, The Warmth of Other Suns: The Epic Story of America’s Great Migration.

My family was part of that Great Migration, my maternal side moving north about 20 years before my paternal side. One of the little-known or lesser-discussed bits of history is how whites — eastern and southern European and Irish immigrants, mostly — in northern cities reacted to black migrants from the south: by moving out en masse.

On marriage and civil unions

tiffany — Fri, 10 Dec 2010 19:40:47 +0000

Instead of being tempted to limit marriage, let us extricate the government entirely from the business of marriage. Let it be a civil union for all, and let marriage be a personal matter between you and your faith. That way there is room for gay marriage, Wiccan handfastings, and yes, traditional Christian marriage between one man, and one woman. The way to fight marriage obsolesce is to make it innovative and flexible, not to cast it in irons.

That’s Jason Pitzl-Waters in his column Marriage must innovate, not stagnate.

I would like to see this. Redefine marriage as an exclusively extra-legal commitment defined by religious institutions. But make civil unions — with all of the legal benefits that we now accrue to marriage — open to all.

Let’s expand the definition of civil unions to include heterosexual couples and leave marriage to religion.

Reverb 10: Beautifully Different

tiffany — Wed, 08 Dec 2010 19:44:26 +0000

giggles. photo by misterjt. found on Flickr.

Think about what makes you different and what you do that lights people up. Reflect on all the things that make you different — you’ll find they’re what make you beautiful.

I’m awesome. The end.

That’s a bit of a Mims-like tautology, isn’t it?

What really makes me beautiful? I think it’s my perspective on life.

I’m sure that’s hilarious to anyone who knows me; I am Anxiety Girl. But in my periods of sanity and normalcy, my guiding principles are:

Everything is impermanent.
Our past shapes our present.
Sometimes life is too absurd to do anything besides laugh.
That Yin and Yang shit is real, son!

(Oh, there’s also that thing where I amuse myself by mixing high-brow, intellectual and philosophical concepts with low-brow language and profanity.)

This plays out most often in the counsel I give friends and family. “Acknowledge your pain. “Accept where you are now.” “Learn to get as well as give.” “Recognize your patterns so you can break them.” “This too shall pass.” “You tried that already and decided it was a bad idea.” “Everyone has the capacity to do wrong; imagine how you might react under similar circumstances.”

I think that my perspective is different from most people, most Americans at least. These principles are very much inline with most schools of Buddhism and Taoism. Accepting that things change, few people are inherently good or bad, this moment is a blip on the continuum of forever, but that we (re)act based on what we’ve been taught is, I suspect, part of the key to happiness. And happiness is beautiful.

On the new New Orleans

tiffany — Tue, 07 Dec 2010 17:00:22 +0000

Black Men of Labor Second Line 2010 by offbeatmagazine. Found on Flickr

Soon, this area will be flat as a prairie. Everything that once was Lower Mid-City is being dismantled, including the streets, lampposts, curbs, electric lines, and sidewalks. On a day in early November, empty lots tramped by heavy machinery surrounded remaining homes. Although the homes’ roofs were removed and windows and doors dismantled, they had signs of a former life – a lone bottle of dish soap on the kitchen counter, a ruby-colored sofa sitting crookedly against a wall.

From the Christian Science Monitor article New Orleans makeover: economic boost or loss of a historical legacy? . (Via rufuspolk)

The piece is about Lower Mid-City, but I think it is emblematic of the city as a whole. When I first visited New Orleans in 2002, the city was gritty, seedy, unmistakably black (as in both people and mood), mysterious, and sexy in a nasty way. I loved it immediately. Only the lack of jobs in my industry kept me at bay.

Since Katrina and the rebuilding still under way, New Orleans feels classier, sanitized, way less black (yes, still in both people and mood), and sexy in a cliched, roses-and-candlelight sort of way. I still love it, but now the kinky underbelly that seemed to be there at every turn feels so vanilla.

Reverb 10: Community

tiffany — Tue, 07 Dec 2010 12:36:19 +0000

Royal Street in the Faubourg Marigny, New Orleans.

Where have you discovered community, online or otherwise, in 2010? What community would you like to join, create or more deeply connect with in 2011?

New Orleans. And I mean that in both physical and virtual terms. I have visited the city three times in 12 months. I am getting married there in May of 2011. My soul has been in love with that place since my first visit in 2002.

On Twitter, the only online space in which I really engage and connect with people, I follow close to a dozen New Orleanians. I follow almost that many NOLA blogs. And I check the Times-Picayune site about nice a week. I have even started rooting for the Saints.

In 2011, I want to get to know Los Angeles, particularly its artists and its black people. I love the sense of warmth and familiarity that comes from being around people who share your history. I hope to make at least a partial living by making art one day. Feeling emotionally rooted to a place is so important. Cultivating those roots will be my top priority.

On Jim Crow

tiffany — Tue, 07 Dec 2010 04:14:47 +0000

I wasn’t invited to shake hands with Hitler, but I wasn’t invited to the White House to shake hands with the President either. I came back to my native country and I could not ride in the front of the bus. I had to go to the back door. I couldn’t live where I wanted. Now, what’s the difference?

That’s Jesse Owens in his autobiography as quoted by Isabel Wilkerson in her awesome book, The Warmth of Other Suns.

Reverb 10: Let Go

tiffany — Mon, 06 Dec 2010 12:34:16 +0000

What (or whom) did you let go of this year? Why?

The obvious answers are: my job and my home. Well, I haven’t full given either of those up just yet, but it’s coming. I gave notice to my job. I plan to list my house for sale within the next week. Then I will pack up the house and move to Los Angeles to get an early start on forever with my fiance, Jason.

But what I am really letting go — or losing my grip on, at least — is fear*.

Anxious is my default. I usually don’t believe that things will work out. And yet, in this case, they have. My life is about to turn upside down, and yet I feel more excited than afraid.

Why? For the first time in my adult life, I have someone who loves me unconditionally and always has my back.

*Kinda sorta