Any good web developer knows that re-purposing old code is a big key to getting stuff done efficiently. With each project, I often find myself going back again and again to the same snippets of code. If you’re a beginner, some of these tricks might be new to you. For a seasoned front-end developer, you might already be copy + pasting these from your existing code, or from somewhere else. Either way, these tiny slices of code are great building blocks for most projects. Nothing here is mind-blowing stuff, but it’s always straight-up useful:
Perfect Full-Page Background Images
This one’s a killer for any responsive site. I probably google this one at least once a week:
.cover {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Full-screen images are trendy as all get out right now. This snippet works across any resolution device.
via http://css-tricks.com/perfect-full-page-background-image/
Javascript Function Suicide
This one’s a neat trick for when you want a javascript function to run once and only once, but is triggered by a common event: have it kill itself. Just pop this code into the end of the function, and it’ll over-write itself with function that doesn’t do anything:
var yourFunction = function () {
// do stuff
yourFunction = function() {return false;}
};
You might wonder why this is useful as all. As an example, I used chart.js and jQuery to display a graph once the user scrolled a certain distance down the page. However, the function that listened in on the scroll event would fire and re-draw every single time the user scrolled, causing the graph to constantly re-draw itself. Now, it runs once and only once, as intended.
jQuery Placeholder Polyfill
The HTML5 Placeholder property is a totally awesome way to label forms, but as a new feature, support for it varies. It’s occasionally difficult to style placeholder text as well. This jQuery function imitates the behavior you’d expect, using the value property of the input tag:
jQuery(document).ready(function() {
jQuery.fn.cleardefault = function() {
return this.focus(function() {
if( this.value == this.defaultValue ) {this.value = “”;}
}).blur(function() {
if( !this.value.length ) {this.value = this.defaultValue;}
});
};
jQuery(“input, textarea”).cleardefault();});
CSS 100% Height
One of the most confusing things to me when I was learning CSS was the height property. Setting height to be 100% almost never works as intended. I later learned that the element’s parent needs to have a defined height for it to work properly. This is true all the way up the DOM – every parent element needs to have an explicit height. This is problematic, since in the responsive world, we often have no idea how our content will be re-sized across devices, and things need to stretch, grow, and shrink accordingly. Luckily, we can fake this using absolute positioning and the top / bottom properties:
.fullheight {
position: absolute;
top: 0;
bottom: 0;
}
When the browser tries to stick the element to the top and bottom at the same time, the result is a perfect box that completely fills its parent’s height. Just like with any absolutely positioned element, its parent needs to be positioned for this to work. If it isn’t already, the simplest way to do this is to set the parent to have position: relative;
This trick also works with width; use the CSS left and right properties instead.
jQuery Scroll Events
Increasingly, developers are spicing up web pages by creating interactive transitions as a user scrolls through a page. You might notice a link to a related article pops up when you finish reading an editorial on the New York Times, or background images shifting as you progress through a page’s sections. Here’s an example to set up an event listener using jQuery that updates sidebar content with a date:
$(window).on(“scroll resize”, function(){
var pos=$(‘#date’).offset();
$(‘.post’).each(function(){
if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) { $('#date').html($(this).html()); return; //break the loop } }); }); $(document).ready(function(){ $(window).trigger('scroll'); // init the value });
This is just one piece of the puzzle. You can check out a full-working demo on jsfiddle.
Bonus: Blink Tag Polyfill
Firefox and Chrome recently stopped supporting the divisive <blink> tag. The tag, which famously started out as a drunken prank, has long been an HTML punchline for designers and developers everywhere. However, sometimes you just gotta have it. Now, you can have it back, with this neat polyfill, using CSS animations. I used this recently to create a retro, VCR feel to a silly video project I’m working on. Check it out on GitHub.
These are just a few simple tricks in my toolbag. What are yours? Post your favorites in the comments.