jQuery Goodies!

I started a new GitHub repo to fill with jQuery utilities and behaviors.

The initial commit is filled with viewport sizing utilities.  The utilities make it easy to use viewport-relative sizing in situations where browsers do not support VW and VH.

Something that I use a lot is the Letterboxing module.  Simply by adding .jq-letterbox, you can strictly enforce an element to have a widescreen aspect ratio.  This is very handy for sites that show lots of YouTube movie trailers.

Grab the Repo

https://github.com/bradkovach/jqUtilities

Installation

1. Import a recent version of jQuery

Note: script tags do not need type="text/javascript" when using HTML5.

2. Import the utilities AFTER jQuery

 Usage

Full usage information is available at the head of the jqUtilities.viewport.js file.

Help

By default, these utilities log errors to the console.

Known Limitations

  • Mixed markup and style information.  Style information is hard-coded into HTML markup.  This might be undesirable.
  • This is not a polyfill.  It is a workaround.  Nice polyfills exist, and that might be a better option for you.

 

#vinevortex: Consuming My Life 6 Seconds A Time

I just thought I should point out, publicly, that Vine is consuming my life.  Vine is the trendy new social network from Twitter that allows you to create and publish short, looping 6-second videos.  The creation controls are primitive, but the results have been extremely creative.

Your available options for editing include touching the screen to record, and not touching the screen to not record.

It’s pretty basic, but it’s hopelessly addictive.  iPhone only; for now.

http://vine.co

The Developer’s New Struggle: Data Caps

These past 10 years have hosted a huge evolution in our data distribution technology. Since 2000, we’ve watched household broadband speeds move from about 0.5 mbps to somewhere around 20 mbps on average. This is awesome.

We have new LTE networks that are capable of pushing around 50 mbps over the air. Please note: this is faster than most household connections.

We live in an era of increasing bandwidth, and this is good news for web developers. This allowed sites like YouTube to become popular, because they finally had customers that could enjoy their product.

But developers have new struggles! Now, developing truly mobile applications (both native apps and web apps) must account for the new obstacle: carrier data caps.

How annoying. We’ve finally been given a trove of bandwidth (both low latency and high capacity), and we have to start using it very carefully–dare I say responsibly…

It’s food for thought. We have better networks and more ubiquitous access but increasingly more consumers have charted courses for the edge of a bandwidth cliff every single month.

So we must continue to adapt.

Things That Are Concerning

  • Popular development frameworks can be rather bloated.  Twitter Bootstrap (minified) is 101kb and another 17kb if you want the responsive tweaks. .
  • Responsive images are not really taking off. Even Apple does not have a decent implementation for responsive image serving that doesn’t involve convoluted Javascript.
  • Developers that don’t pay attention to client-side caching techniques.  Make browsers get changes by using ?ver=[autoincrement] to force browsers to reload only when content changes.
  • Everybody wants “apps” and these apps need data. Lots of these apps send a lot of data (either as JSON or XML) without implementing a cache mechanism.  Twitter uses a neat trick to keep data transfer down: the since_id query parameter.  This minimizes payload by ignoring content that the client probably already has.
  • XML has too much data overhead on structure to be considered efficient, yet it is hailed as a great data interchange format–NOT FOR THE WEB!  Typically ever XML tag is matched by a closing version of the tag.  Look at the overhead here: <strong>this is bold text</strong>.  The strong tag and its closing tag take up 17 characters, which is equal to the length of the content it formats.  This is a massive overhead!  Mobile clients shouldn’t rely on XML for updating content (like a timeline of continuously updating information).

This was merely a brief rant about implications about data load.  This doesn’t even consider some of the changes that occur with data throttling, and packet shaping.

Worrying about data overhead is the new black.

Brewing Iced Tea Properly

From http://www.starbucks.com/menu/drinks/tazo-tea/black-shaken-iced-tea

Picture: Starbucks Black Shaken Iced Tea.  More info at Starbucks’ Website.

Subtle. Suave. Sophisticated. Our premium black tea gets a snappy little splash of citrus, and then is shaken – not stirred – with ice. We’d tell you more, but the details must remain classified. Still, you do have license to enjoy.

Tazo® Black Shaken Iced Tea, Starbucks.com

Bitch, please.  Classified?  Ha!  Iced tea isn’t hard…

Why the hell am I blogging about this?  Because I see a lot of fools trying to make tea, and they all suck at it.  It’s not hard, but there is a way to do it right to get the crystal-clear, refreshing tea you’re used to seeing/drinking at Starbucks or McAllister’s.

Black Iced Tea, Proper

  1. Boil 1 liter of water.
  2. Cover 4 cup-sized black tea bags (Lipton will do just fine; Starbucks uses Tazo Awake tea, FYI) with 1 liter of boiling water.
  3. Steep for four minutes.
  4. If you love sweet tea, add 2 cups of sugar to the liter of strongly-brewed tea and stir until dissolved appropriately.* (note: this is how McAllister’s Sweet Tea is made)
  5. Add 1 liter of cold water.  Do not refrigerate.  Refrigeration causes tea to go cloudy.  Cloudy iced tea is bad tea.
  6. Pour a glass as follows
    1. Add equal parts tea and water
    2. Add ice
    3. Shake or stir
  7. Drink that tea.

I prefer 1/3 tea, water, and ice.  Adjust to suit your tastes.

EXCITING FISCAL NOTE: this is roughly 12 cents per pitcher and pennies per serving, even if you buy Tazo Brand tea from Starbucks.

* Never assume that everyone likes black iced tea.  Sweeten your own tea with sugar or simple syrup.

I made Twitter work yesterday.

Matt Jolley is an openly-gay high school senior from Worland High School (Worland, Wyoming).  This photo is being rejected from his yearbook because it is "too political."

Matt Jolley is an openly-gay high school senior from Worland High School (Worland, Wyoming). This photo is being rejected from his yearbook because it is “too political.”

I saw a petition on change.org that troubled me greatly.  The petition is from Matt Jolley, a high school senior from Worland High School.  Mr. Jolley is an openly-gay senior, and his senior photo was reflection of that.

But, unfortunately for Matt, his school board denied him the right to publish his senior portrait in the yearbook.  They reasoned that the photo was too political, and he must pay for the publication, since it was “an advertisement.”

Please view and sign Matt Jolley’s Petition.

So I did what I always do when I get mad: I got on Twitter, and I made shit happen.

I started watching for celebrities to tweet.  When a celebrity would tweet, I would send them a plea to retweet a link to Matt’s survey.

I sent these to dozens of celebrities.  And it worked.  In total, the tweets were shown to at least 300,000 people.  It cost me nothing, and earned Matt a lot of petition signers.

Here’s the first successful tweet, sent to LGBT icon/MTV personality Dan Savage…

Dan Savage retweeted it almost immediately, and then the petition started getting signed a little bit faster.  So I kept tweeting.  I follow a few celebrities, and I paid careful attention to them.  When they would tweet, I would tweet.  Within a few minutes, BAM! another retweet, this time from Chef Anne Burell.

I kept this up for the greater part of yesterday.  Got a lot of traction by tweeting @adamlambert.  He didn’t personally respond, but his fans did.

And then one final tweet, from @ChelseaVPeretti released a swath of new petition signers.

Twitter is full of free publicity, and it’s especially full of well-followed people that are willing and able to help.  Had I worked harder, or had a team of people to help me, and used a hashtag to organize the campaign, this would have had an even greater effect.

Regardless, this was a very fun use of a Sunday afternoon.  I learned a lot.  I received hundreds of retweets yesterday.  Not bad, considering I was in pajamas drinking wine all day.

BTW, I’m still mad at @RuPaul for not retweeting.  He was on Twitter ALL. DAMN. DAY. and he didn’t retweet me once.

Find Your Contrahobby

We’ve all been there: you’ve indulged in something you love so much that you get sick of it.  This something you love is your passion.  Hopefully this passion is your life’s work.  Maybe you’re a scientist working to find a cure.  Maybe you’re really into Dungeons and Dragons.  Perhaps you knit, or craft something with your hands.  You genuinely love it.  You love it so much that it is your hobby.

You love it, but now, unfortunately, you’ve overindulged.  You’re looking at something you love and you’re JUST. FUCKING. SICK. OF. IT.

So what do you do?  You’re experiencing burn out.  This happens to college students every semester.  And unfortunately, this happens to the best of us on occasion.  Well, it’s my opinion that you need to find your contrahobby.  Don’t bother Googling this word, because I made it up.

Let me first explain my personal etymology of this word.  It’s composed of a familiar word with a familiar prefix:

Hobby – An activity done regularly in one’s leisure time for pleasure.
Contra – against, in opposition or contrast to.

So what I’m proposing is you find a hobby that is in opposition or contrast to your regular hobby.

I think of the word contra because of a simple concept in Discrete Mathematics: the contrapositive.  A contrapositive is a statement crafted in such a way that it is equally valid to another statement, but entirely different.  Formally, the definition states

If P, then Q;
If not Q, then not P;

For example, take a look at this contrapositive:

If Socrates is man, then Socrates is human;
If Socrates is NOT human, then Socrates is NOT man.

They’re both equally true.  Both say the exact same thing about Socrates, just differently.

The contrahobby has a similar purpose.  It uses a different approach to arrive at the same solution (the solution being that my mind is occupied with something that helps me unwind, relax, and enjoy myself).

Now, the proof of this won’t work out mathematically, but it does make sense topically.

My hobby (and my work) is web development.  I like reading about web development in my spare time, and I like playing around with many new techniques to make something work better, faster, or more intuitively.

But when that gets old, and my mind won’t take anymore, I turn to my contrahobby: cooking.  Yes, cooking.  It doesn’t make sense.  It doesn’t seem related to my interests–and that’s what makes it a contrahobby.  It is a very NOT computer way to solve a problem that normally takes a computer to solve.

So, hopefully I’ve illustrated the contrahobby concept to you adequately and I’ve given you some insight into another way to solve your problems.

Do you have a contrahobby?  Are you burnt out?  Let’s talk about it.  Leave a comment, or send me a tweet @bradkovach.

 

Pick up the slack, Beats by Dre.

I’ve never condoned the purchase of Beats by Dre before.  And I never will.

But, I do own a pair.  I received them as a gift.  I was taken aback to receive a $200 pair of Beats headphones as a gift, but that’s neither here nor there.

Beats by Dre headphones are a well-marketed and incredibly mediocre pair of headphones that promise to restore your faith in audio with a price tag that will restore your faith in credit cards.  They’re expensive, and they only sound ok.

A terrible way to spend $200.

A terrible way to spend $200.

Regardless, I own a pair of these headphones.  Almost immediately I notice that they are comfortable (I expect this–they retail for $200).  They interface well with my iPhone with a microphone and have a cable remote (I expect this–they retail for $200).  They have surprisingly sturdy hinges and the case is of very high build quality.  I expect all of these things–they retail for $200.

But, also almost immediately notice that there is a flabbing piece of plastic in the right earpiece.  It is noticeable in extremely high-bass situations, and when you readjust the earpiece (for comfort or whatever reason), the piece of plastic clicks and flaps as the vacuum between your ear and the cuff changes.

This isn’t a huge inconvenience, for a typical product.  This is a prestige product and a luxury good!  For $200, I should have no qualms about the product for years to come.  I have found an annoying flaw within minutes of using it.

So I email Beats by Dre.  I want this fixed, naturally.

Beats by Dre’s email support offers to fix/replace my headphones even though I don’t have the receipt (that’s nice).  But when I sent them my information for them to setup the RMA (Returned Merchandise Authorization), it took them 15 days to send the RMA.

I do not get a new pair of headphones.  I will be without headphones for anywhere between 2 and 4 weeks.  I have to pay to ship the headphones back to the service center.  I have to print my own labels.

You might be sitting in your chair thinking “Brad, you are a whiny asshole.”

But this product isn’t a normal product, governed by supply and demand of a normal product.  This is a prestige product, and the demand for the product gets higher as the price gets higher.

Notice that the demand for prestige products still rises as the price does.

Notice that the demand for prestige products still rises as the price does.

Beats by Dre headphones share the prestige classification with other prestige brands like Coach and Mercedes-Benz and Cole Hahn.

Cole Hahn’s prestige shoes have free replacement shoelaces for life.  Coach leather is warrantied for life.  Any flaw in workmanship for a Mercedes-Benz will be fixed for 2 years or 50,000 miles.

A flaw in workmanship that I discovered literally minutes into owning the product qualifies me for a refurbished product, with no effort made to ease the transition.

Prestige distinction comes with an obligation: cherish me as a customer.  Take care of me and make me tell others about my experience.

So now, I have to budget my money (I’m not kidding–I have $20 right now), so I can UPS or FedEx these stupid headphones back to whence the came, so I can have the privilege of waiting two-to-four weeks for like-new headphones.  Are you kidding me?

If you had asked me “Would you buy Beats by Dre headphones?” before, I would have said no.  If you ask me today, I say “Hell no.”  Spend your money on some good headphones (that won’t need repair) by Klipsch or Sennheiser.