5 Essential CSS, Javascript, and HTML Snippets for Front-end Developers

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.

Greg Opperman

greg

More Posts by Greg

9 Responses to “5 Essential CSS, Javascript, and HTML Snippets for Front-end Developers”

  1. Ethan B. Martin

    A tiny tweak suggestion. Instead of writing a new function that returns false to kill itself, you can use jQuery.noop to save some keystrokes. You could also use jQuery.unbind to prevent it from being fired again, in the example you described.

  2. David Miller

    I too have Google’d the full page background thing many…many times…

    I’m bookmarking this page so I don’t have to search anymore.

    And the full height thing is pretty rad too – I’ll be using that for sure. Thanks!

  3. Kevin

    Really helpful stuff! I have a question for you. On the full page background image, any way to transform that code to scroll though 5 or 6 images at 5 second intervals ?

    • Greg Opperman

      I would recommend using a jQuery plugin for that functionality, and then applying the CSS to the right selector is a snap!

  4. Iain

    Thanks! You are so right about the CSS height thing, I will be using your tip.

  5. Michael

    I save all of my snippets in Evernote… that way I can access them easily at work or at home. Plus it’s got great tagging and categorization and search.

  6. Riley

    Pretty cool and useful. I found you via Reddit. I use cover all the time, but I am always unsure how big my images should be. Any suggestions?

  7. Gabriel

    About “Javascript Function Suicide”, why don’t you just remove the listener?!

Comments are closed.