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.