These are not the widths you were looking for – CSS media query max-width

Today I encountered something very unexpected. I was using basic CSS media queries.

@media (max-width:1205px) {

[role=main] > .row
    {
        padding-left: 8px;
    }
}

And I have Firebug open because my rows do not have padding-left applied. Firebug is clearly telling me the width of HTML is 1199px well under 1205px.

At this point I’m outright stumped. I copy my CSS outside the media query thinking my selector usage is somehow faulty, and it works fine.

I take to the googles and locate issue with CSS media queries(scrollbar) on stackoverflow. This question acknowledges that browsers treat the scrollbar differently for whether it’s included in the width of the viewport. So when Firebug was reporting 1199px for the width of <html> it was not adding 15px for the scrollbar for a total of  1214px greater than my max-width.

these are not the widths you were looking for

The solution to this problem is mqGenie. Effectively this is a polyfill that normalizes browsers behavior in regards to scrollbars and updates your media queries to account for the scrollbar width if neccessary. It likely has the caveat that it will only work on stylesheets that are served inside the same origin policy.

jQuery Trunk8

Have you written an app where you have an unknown length text block that’s going to go into a grid layout. Perhaps the description to an event? You expect most descriptions to be 1 or 2 lines max, but then someone goes and copy-pastes a word document into your description field.

A great solution to this problem is a jquery plugin Trunk8. You can checkout the demos or view the source on github.

Ultimately trunk8 takes a very long textblock and based on configurable settings will truncate it to … ellipses. The great thing about trunk8 is that it actually analyzes the element that contains the text and bases it’s calculations on actual screen space. It doesn’t do a naive attempt based on number of characters. It also supports html, this was key for me. Using it to truncate a long markdown description block when in general it will consistent of 1 or 2 lines.

jQuery ScrollUp plugin

I wanted to add a scroll to top button to my website. I didn’t want it to rely on being random buttons in the middle of the html. A button like this makes way more sense to be affixed to the UI. It also shouldn’t be visible when you can’t actually scroll up.  Mark Goodyear wrote a great (and simple) jQuery plugin to do this: ScrollUp it is MIT licensed and you can check out the source on github.

View the live demo

$(function () {
    $.scrollUp();
});

Is literally all the source it takes after you include jquery and jquery.scrollup.js files to your page.

It is also highly configurable. Definitely worth a look.

jQuery on click is raised by text selection

So today I was building some basic toggle capabilities into a web page. Everything is working well, then I test selecting the text. Of course this causes the element to collapse on mouse up.

After some googling Stackoverflow of course had the answer…

$('h4').on('click', function() {
    if (getSelection() == "") {
        //do stuff
    }
});

All it took was wrapping my code in a single if statement using getSelection().

dynamitey and dynamic MVC models

So today I’m building out my new MVC application and get to writing this small block of code

  return View(new { Items = model });

ANDDD

Server Error in ‘/’ Application.


‘object’ does not contain a definition for ‘Items’

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: ‘object’ does not contain a definition for ‘Items’

Apparently what I want to do is literally impossible. Ironically I had already commented on one of these answers.

Eventually the rabbit hole leads me to dynamitey (github)   and now I can do:

  return View(Build<ExpandoObject>.NewObject(Items: model });

 

Recent learns for Javascript / Web Development

File this in the unusual category, XHTML which likely all of us have used, never officially supported target=_blank for hyperlinks. XHTML Strict 1.0 – target=“_blank” not valid? is a more detailed discussion of this on StackOverflow. Ultimately it was only ever incorporated into the transitional specification. I just find it really ironic how something all of us take for granted wasn’t even in the official language specification.

Douglas Crockford knows how to troll. Straight from Code Conventions for the JavaScript Programming Language

Avoid conventions that demonstrate a lack of competence

Straight up says don’t do stuff just because it’s easier. Do stuff right. Or you suck.

Well said Crockford, well said.

At the bottom of his conventions I actually found out that JavaScript has a comma operator. I did a serious WTF when I read that. Of course it says to not use it. I did a little bit of digging to find out what is a comma operator Comma operator(,) Where it can “really” be useful.

Taking the best real world example from StackOverflow:

A Fibonacci generator:

for (
    var i=2, r=[0,1];
    i<15;
    r.push(r[i-1] + r[i-2]), i++
); 
// 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377

That’s some crazy stuff there. It certainly looks cool at how you just 1 lined the Fibonacci sequence, but it certainly doesn’t add readability to code. I’m sure this is why Crockford advises against it.

Code that your first thought looking at it is #WTF does not belong in your codebase. The only exceptions to this are extreme performance optimized codeblocks that were deemed necessary by actual profiling. Optimizing without a profiler is the ultimate exercise in futility. You will most likely just make your application slower, harder to understand, and never touched the original problem.

Polly Transient Fault handling

So I started reading about Paramore Brighter CommandProcessor, didn’t get far and started reading about the packages it uses. This called out Polly (github)  this project takes the voodoo out of writing retry handling. In the past I’ve raised comments on .NET discussions expressing my desire for this to be built directly into the BCL. That never really seemed to go anywhere.

 
really seemed to face the same dilemma and decided to roll his own. I haven’t used it yet, but from reading the markdown readme it has a beautiful fluent interface. I will definitely be using this in the future. Some usage examples:

// Retry multiple times, calling an action on each retry 
// with the current exception, retry count and context 
// provided to Execute()
Policy
    .Handle<DivideByZeroException>()
    .Retry(3, (exception, retryCount, context) =>
    {
        // do something 
    });

Just awesome.

MOAR BLOGZ

So it’s been a somewhat rather long time since I’ve posted. Numerous times I’ve said to myself I need to dedicate time and post some real blogs. Clearly that didn’t work out. Since that hasn’t absolutely occurred. I’m going to do some pseudo-micro-blogging and talk about some stuff I’ve learned recently. Each post will likely be short, but I’ll have new stuff! Finally!

Also I’ll have an elaborate bookmark for myself. I’m self serving, what can I say.

MySpace releases a new version, and a lesson in the worst things you can do to your users

Below is a screen shot of the new myspace:


what myspace does wrong in their new release

First the most blatant and unacceptable thing to do to your users is throw out all of their existing content. Not only did it seem to not carry over one single shred of my profile other than name and location, it does not even seem to have carried over my friends list. That is just unbelievably silly.

Next up is the primary input box is nearly entirely off the page. I run 1920×1200 resolution and do not browse with my window full screen. It seems that they just assume you have your viewport to be the same size as your resolution.

For some reason this layout uses horizontal scrolling, i think this is more related to buggy design than actual intent. Next to the text input and where it says my “stream is empty” is a gigantic void that goes over some 1000+ pixels off screen. (Did it erroneously calculate resolution based on the fact I’m using dual monitors?)

When you get the mouse anywhere near the bottom of the page, that hideous gigantic thing pops up, I don’t even know what it is. I assume it’s a track list for listening to music on myspace. This thing pops up incredibly easily and then stays there. When it’s there you can no longer across the horizontal scroll bar so depending where you are you might actually be blocked from interacting with the site altogether until you trigger a hover out to make it go away. (I really hope it doesn’t function like this on a tablet/phone)

I could point out alot of things they got right with the new myspace, but these flaws are just so gigantic and so gaping there is no room for discussion of improvement when you drop a nuclear bomb on your users and delete all of their created content. [Naysayers hush, yes I know the content likely exists still on old myspace somewhere, somehow, but i'm speaking in terms of how a user would feel about their usage and their experience].

Comcast Metro Ethernet and How much does it cost?

Comcast has been advertising a new line of service for business users called Comcast Metro Ethernet. This is really just standard fiber to the premises. They do a good job of not making any information available online to figure out pricing.

Recently I was involved with discussions about this service. These figures are loose numbers for the Central PA region. I cannot be certain whether the prices are wildly different across the country. These prices also assume Comcast does not need to incur very significant costs for running fiber to your premises. These costs also expect a multiple year commitment.

Comcast Metro Ethernet is unmetered fiber to the building. You purchase it per megabit and as a symmetric connection. There is no option for asymmetric speed, and there is no option for metered traffic. Basically they expect you to purchase a line that sits idle for a significant portion the month as opposed to selling you service based on actual usage. This is very disappointing.

On to the numbers!

10 mbps – $800/month

20mbps – $1100/month

50mbps – $1500/month

70mbps – $1800/month

100mbps – $2300/month

Not very impressive.

Edit: Apparently my not very impressive remarks are for US high speed internet industry as a whole. Comcast’s pricing was competitive compared against Level 3 and lower cost than most other providers in our region. It’s still disappointing to see that apparently no provider offers a plan along the lines of 500mbps or 1000mbps metered pay as you go. Or even sold with XXXX GB allocated upfront and then per use fees afterwards.