Slack Chats Between Lemonly Devs Are Solid Gold

Sometimes our conversations in the Devs Slack channel amaze me. Sometimes they scare me. Still not sure what to make of this one. I really appreciate them not banning me from the channel for life.

Me:
http://salvattore.com/ No jquery dependency.
THE FUTURE IS NOW

Ryan:
-1 Not enough jQuery

Michael:
Someone should start a rap group for you called jQuery and cover J-Kwon songs, but use techy lyrics.

Me:
Baby girl be rubbin on me
Heard that I dispell the myth that jquery
is necessary, for proper code chemistry
Time to bury it in the framework cemetery,
and get with comtemporary use of my 2K DOM pessary

(silence)

Me:
I wish I would’ve posted that so someone else could see it.

Normalizing addEventListener and event Between Modern Browsers and IE9

Modern browsers make using event listeners very easy. The API is normalized across all modern browsers (Chrome, Firefox, Safari, IE10+, iOS, Android), but if you’re stuck supporting IE9 on a project like I am right now, some elbow grease is needed to make your event listeners work the same across browsers.

Functions/Snippets For IE9

//Add an event listener to an element
function listen(element, event, callback) {
    if(element.attachEvent) {
        element.attachEvent("on" + event, function() {callback.call(element);});
    } else if(this.addEventListener) {
        element.addEventListener(event, callback, false);
    }
}

//If you prefer adding this function to the element prototype, use this syntax
Element.prototype.listen = function(event, callback) {
    if(this.attachEvent) {
        this.attachEvent("on" + event, function() {callback.call(this);});
    } else if(this.addEventListener) {
        this.addEventListener(event, callback, false);
    }
};

//Doing this allows you to add it to the NodeList prototype too
NodeList.prototype.listen = function(event, callback) {
    for(var i = 0, l = this.length; i < l; i++) {
        this[i].listen(event, callback);
    }
};

Inside the callback function, some more work needs to be done:

function callback(event) {
    //Get the event in both IE9 and modern browsers
    var event = event ? event : window.event;
    
    //Get the target of the event (in listeners like click)
    var target = event ? event.target : window.event.srcElement;
}

Finally, you can use the event to stop propagation using this function:

function stopPropagation(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.returnValue = false;
    }
}

Calculating an Element’s Distance From the Top of the Document

For the times that I need to know how far an element is from the top of the DOM, not the top of it’s parent, I use this helper function.

//Loops through all parent nodes of an element to get it's distance from the top of the document
function getDistanceFromTop(element) {
    var yPos = 0;

    while(element) {
        yPos += (element.offsetTop);
        element = element.offsetParent;
    }

    return yPos;
}

This function returns the number of pixels the top of the element is from the top of the DOM.

Interviewing Recruiters

I get emails and messages from recruiters two or three times a week. On top of that, I help lead the local developer meetup, so I get contacted by recruiters to help introduce them to the appropriate developers for their open positions.

I don’t mind being contacted by recruiters, and if I can help them, I love to. I know enough developers that I can usually point them toward at least one prospect.

That said, I ask something in return. I’ve built a list of 11 questions that I ask them to answer before I pass the request on to developers in our community. Read More…

Wasted Moments, Missed Opportunities

You will only become yourself in the surrender to zero. Not zero things. Toys, people, friends, lovers, jobs, titles, commodities. A greater zero.

Zero moments wasted. On anything less than love, passion, dreams, suffering, nobility, greatness, wonder, grief, joy. Zero moments wasted. On anything less than what is incandescent, searing, unthinkable, laughable, hopeless, dangerously noble, impossible, daunting, unreasonably beautiful, senselessly noble.

Time isn’t wasting away. We are.

From Umair Haque’s essay, The Highest Score

My Thoughts on ‘Frozen’ Wrapped Up in One Perfect Sentence

I’ve watched the newest Disney movie, “Frozen”, about 1,000,000,000,000 times since it was released on DVD a month ago. I could never quite put into words my feelings about it. Luckily, Heather Armstrong put it perfectly:

…we, you and I, we deserve a cookie for not flinging whatever device they are using to watch that movie ONE MORE DAMN TIME out a two-story window, shrugging our shoulders and calmly explaining, “She did just tell me to let it go.”

So yeah. Being a parent comes with many amazing things, many awful things, and Frozen. #*@&!$(% Frozen…

More thoughts on Frozen later, but until then, hattip to Chris Ford for the link.

A Bad Rock…

Eric Meyer is living through my worst nightmare.

“Are you scared, Rebecca?”

A nod through tears, her jaw quivering again.

“Can you tell us what you’re scared of?”

She wept again, unable or unwilling to say the words. Kat and I choking on our pain and her pain as Rebecca sobbed with renewed terror, clinging to Kat and squeezing my hand in hers.

We asked her again, as gently as we could through our anguish. And again, later, when we had all recovered enough. And again.

Finally: “Baby, can you whisper it to one of us?”

She nodded, miserably.

“Who do you want to whisper it to?”

She pointed at Kat. Shifted her head up and around. Whispered, her voice so tiny and full of pain and fear and breaking into another wail: “Of dying.”

I will never know how long we wept with her. What we said to try to soothe her pain even a tiny bit. How we tried to comfort and protect her. I will always remember how utterly helpless and wounded and shattered I felt, the sick ache in the center of my chest.

After I read his post, I went to my 3 year old, hugged her tightly, and cried. She didn’t understand why I was crying. That’s OK. I didn’t want her to. She shouldn’t have to. She’s too young, but so are Eric’s daughters.

Absolute Positioning and Horizontal/Vertical Centering

Horizontal centering of an element is something that we, as web developers, do every day. It’s often an integral part of our designs. It’s easy with text and with relatively positioned block and inline-block elements. The problem arises when we try to center an element (horizontally or vertically) that is absolutely positioned. When I teased this post on Twitter, I received at least 10 replies saying that’s easy if you know the width of the child element. But that isn’t a limitation. Even if you don’t know the width, fear not! It’s actually really easy. *gasp* Read More…

Coding Music: The Hooten Hallers

Story time! When I spoke at OpenWest last summer, a friend and I were walking around downtown Provo and stumbled across a local establishment called ABG’s. There was a crowd overflowing out into the street, so being bored, we decided to see what was happening. We paid our cover charge, went in, and there was a live band playing. It was amazing, but as we left, I forgot to ask what the band’s name was.

Recalling the night six months later, I emailed ABG’s booking manager to see who was playing, and he introduced me to the Hooten Hallers. They’ve been in my regular rotation since and there’s little chance of them leaving it any time soon. They’re great to code to as their music blends into the background as you work. Read More…

Hooking Up to the window.onscroll Event Without Killing Your Performance

Waterfall and FPS chartThis week was my one-month anniversary at Lemonly, and in that month, I’ve used more onscroll event hooks than I have in the last 15 years of development, and for good reason. It’s a great way to add flair, track progress, or get parallax-y. If you don’t do it right, it’ll crush your site’s performance and irritate your users. So what’s the best way to hook up to the window.onscroll event and still maintain a reasonable frame-per-second rate when scrolling? Read More…