I often don't use any framework to do my work unless it is part of the requirement. Often I am accused of trying to reinvent the wheel while someone has already solved the problem. I didn't want to include jQuery to the code, because at the time, I thought I didn't need it at all. Don't get me wrong, jQuery is amazing, and I highly recommend people to use it, after they have learned and mastered JavaScript. But even though I don't always use these libraries, I often steal from them.
I spent an evening trying to make sure my code runs when the DOM is ready. It worked like a breeze on Chrome. I tried it on Firefox, made a few tweaks and it worked just as well. Then I went on Safari and my code was not running at all. This was when you couldn't rely on DOMContentLoaded
. So I spent the whole evening trying to find a way to make it work, and couldn't figure it out. I thought Safari sucked and went to test it on Good Ol' Internet Explorer and my page loaded silently, without ever firing the event.
I had no way of knowing whether this code would work on the multitude of browsers. So I did what any programmer would do and added jQuery to my page. I was confident about all other parts of my code because I don't use browser sniffing anywhere, I use feature detection. But I had to include the whole of jQuery's library just to make use of one feature. Not happy about it.
I slept on it. The next day, I opened the jQuery file and searched for DOM ready
and read the whole section. Then I copied the section and resolved all the variables.
// jQuery 1.4.4
bindReady: function() {
if ( readyBound ) {
return;
}
readyBound = true;
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
return setTimeout( jQuery.ready, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);
// A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready );
// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
}
Around 45 lines of code or a kilobyte uncompressed. Just like that I had the feature that I wanted without downloading the whole library. And the guarantee that it will work across all browsers.
Neat!
I designed my PHP framework from the ground up. I have used it on multiple projects for clients and it is very efficient. However, I borrowed code from a lot of places. I have worked with Symfony, codeignitor, zend, and many more, and whenever I have encountered issues that I couldn't solve, I used those frameworks as reference. For example, when I had edge cases in my router, I looked at Symfony's implementation to fix the problem.
I like to be in control of my code, that's why I have a very hard time using NPM. Instead, I go to the source, read the code and then copy it. My buffet approach might be a slower process but at least I don't have to worry about a left padding issue.
Comments
There are no comments added yet.
Let's hear your thoughts