This week I came across a few things that I think will make being a front end developer a lot easier. Nothing that’s going to change the world but just some things that will make your job simpler and allow you to use less external tools.
DocumentFragment
I came across a post by David Walsh about the DocumentFragment object. This is one of those powerful things in JavaScript that hasn’t been getting as much attention as it should be. What does it do? Simply, it allows you to create a parent to add some child items into before you add them to the DOM. The real advantage of this is speed because it will lower the amount of interaction with the DOM your code needs and that is one of the best ways to speed up your code.
How does it work? First we create the documentFragment:
1 | var df = document.createDocumentFragment(); |
Now let’s create some content to add to our page:
1 2 3 4 | var headline = document.createElement('h1'); headline.innerHTML = 'This is the headline'; var text = document.createElement('p'); text.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; |
And we’ll add them to our fragment:
1 2 | df.appendChild(headline); df.appendChild(text); |
So we’ve created this content and added it to our fragment but we haven’t touched the DOM yet. Now imagine if this was a more complex app or a huge website, we can get all the content we want to add to the page ready without touching the DOM and slowing everything down. Finally, let’s add it to the page:
1 | body.appendChild(df); |
Pretty simple and something I think I’ll be using a lot now that I know about it. The great thing is this even works in IE 7.
@supports
I’m sure if you’ve worked with any CSS3 or HTML5 cutting edge feature, you’ve used Modernizr. Modernizr is great and I use it all the time but I also have a rule, if I can do it with CSS instead of JavaScript then I’ll do it with CSS. And it’s seems soon we’ll be able to feature check with CSS. @support only works in Opera and Firefox Aurora according to this post on Dev Opera. And like most CSS, if the browser doesn’t support it, it just passes it by.
The great thing about @supports is how easy it is to use:
1 2 3 | @supports (transform: rotateX(0deg)) { // CSS goes here } |
It’s pretty much an if statement right in your CSS.So why this over Modernizr? One reason, you don’t have to load a Modernizr JS file anymore and since most of the time, and I’m guessing most other devs are like this, I’m using Modernizr to check for CSS support, it makes sense to turn that over to CSS. Adding a few lines to your stylesheet is going to be faster than loading an external JavaScript file. Hopefully the Webkit browsers add this soon so we can really start using it. And I’m sure it will be in IR 11 in 2014.
What’s coming in JavaScript
Addy Osmani has a great post on his blog about some interesting things that are coming to the next version of JavaScript. There are a lot of features being added to JavaScript that are really going to help when developers are building complex apps.