Three tips to make your CSS more manageable

12.07.11Posted by in Web1 Comment       

As we grow our web team at Pulse, we’ve begun to document a lot of our common practices in web development. This goes beyond a general style guideline and includes commonly used code to solve everyday problems. When it comes to CSS, there are many approaches to fairly simple problems. However, when collaborating on large projects it’s important that these problems are documented and the solution reused instead of having code written more than once.

1. CSS Reset

Whenever we start something, we always use a CSS reset stylesheet. This has become necessary since many browsers render elements differently. We patched ours from multiple projects and cut it down to suit our needs. This is of course done on purpose in order to minimize the size of the css file. Remember that every byte counts on mobile devices! There is no point in including resets for elements that will not be used in the particular project. If you’re starting off with a new project, we recommend either the Eric Meyer CSS Reset or Normalize CSS. Below is an example CSS reset snippet of that we use in some of our projects.

 

2. Centering a block

One of the questions I get asked all the time by my developer friends (not front-end) is how to center a block in the page. “But why doesn’t text-align: center work?” It’s not text… Generally, the more information you have about the block you’re trying to center, the easier it is to center it. The following code is for a foolproof solution to horizontally centering DIVs. This method works if the block has a set width or height. I recently came across Chris Coyier’s solution for “centering a block in the unknown”. He does a great job of explaining how to center a block with unknown width or height. You can find 2 solutions in the post here. http://css-tricks.com/14745-centering-in-the-unknown/

CSS:

3. Working with floating blocks

I find that the biggest problem developers struggle with when using CSS is the float property. It isn’t explained well and a lot of devs end up falling back to tables. Tables are gross and should only be used for presenting tabular data. Floats are magical and can be mastered rather easily. The main problem experienced when floating blocks is the parent height not adjusting to its children’s heights. This is easily mediated by the following 2 methods.
CSS:

HTML:

Preview:
floating blocks

Some other recommended sources for CSS tips are CSS-Tricks and RedTeamDesign. We read those everyday. Happy Styling!

Using jQuery Data for Easy Data Associations

07.21.11Posted by in Web1 Comment       

One of my favorite but often overlooked features of jQuery is the data method, which allows you to associate specific data to a DOM element. This is particularly useful when dealing with a list of elements which have a lot of metadata. Without the data method, you could do this by storing everything in an array or adding funky attributes to an element, but that can get fairly convoluted. Not a lot of developers are aware of the power of jQuery data, so this post will cover a basic use case.

Let’s say we have a site which has a list of blog posts on the left-hand side. When one is clicked, the right side is populated with the blog post contents. The interaction is very similar to what we’ve done on the pulse.me site, where we use jQuery data for storing information about a story. The template fields in the HTML below would be populated using a templating framework.

HTML:

    <ul id="blog-posts">
        <li id="blog-post-0" class="blog-post-item">
            <h1>{{ post_title }}</h1>
            <h2>{{ post_date }}</h2>
            <h3>{{ post_author }}</h3>    
            <p>{{ post_snippet }}</p>
        </li>
    ...
    </ul>
   
    <article id="blog-post">
        <section id="blog-post-header">
            <h1>{{ post_title }}</h1>
            <h2>{{ post_date }}</h2>
            <h3>{{ post_author }}</h3>
            <h4>{{ post_category }}</h4>
        </section>
        <section>
            <img alt="{{ post_image_caption }}" src="{{ post_image }}"
           <p id="blog-post-content">{{ post_content }}</p>
            <span id="blog-post-tags">{{ post_tags }}</span>
        </section>
    </div>

Once we have the json object with the post data, we can save it. An association is made to the <body> and the <li> id in the DOM. The id is used as a key to reference the post’s data.

JavaScript:

Update: Thanks to the Hacker News community (Xurinos, rimantas) for some tips on improving performance. See commented out lines for old and less optimal code.

    // Post data
    var post = {
        'post_title' : '125 Days at a Startup',
        'post_date' : '2011/06/21 10:00:00 -0700',
        'post_author' : 'Filip Mares',
        'post_category' : 'Pulse',
        'post_tags' : 'experience, startups, updates'
        'post_image' : 'http://posterous.com/getfile/files.posterous.com/temp-2011-06-20/koJbhHJJHJgDmpxbrshCjdDoFsktnbmoJspkkIJgBoDJqyFwcxIFpIGgHsti/IMG_0385.JPG.scaled1000.jpg',
        'post_image_caption' : '125 Days at a Startup',
        'post_content' : 'This is the content...',
        'post_snippet' : 'This is the snippet...',
        'post_url' : 'http://filipmares.com/125-days-at-a-startup'
    }

    $(document).ready(function ()
    {
        // id of &lt;ul&gt; node
        var blog_post_id = 'blog-post-0';

        //Saving the incoming data in association to the
        //$('body').data(blog_post_id, post);
        $.data(document.body, blog_post_id, post)
       
        // Function for appending post data to list of posts
        PopulatePostsList(post);
    });

In order to query the post from memory we bind a click event function to retrieve the contents for the <li> id in question. Afterwards, we call a function that uses a templating framework to populate the DOM according to the HTML above. The ‘DeletePost()’ method is an example of how to delete the data from memory.

JavaScript:

Update: Thanks to the Hacker News community (Xurinos, rimantas) for some tips on improving performance. See commented out lines for old and less optimal code.

// Retrieve posts data on list element click
$('.blog-post-item').click(function(){

    //var id = $(this).attr('id');
    var id = this.id;
    var post = $.data(document.body, blog_post_id, post);
   
    // Function that outputs post data to article on DOM
    PopulatePost(post);
    });
   
    // Delete post with id passed
    DeletePost(blog_post_id){
    try{
        // Remove post from memory and terminate association
        //$('body').removeData(id);
        $.removeData(document.body, id)
    }catch(err){
        console.error('Post does not exist')
    }
}

Although this is fairly straightforward, please keep a few things in mind; this is not an alternative to local storage and can potentially lead to memory leaks when dealing with a lot of stored data. Be responsible when using the call and remove data that isn’t being used anymore. Furthermore, storing data takes a certain amount of time, so you might get a null exception if you are planning on retrieving it right after storage. There are currently no plans to add a callback to the jQuery data that I’m aware of.

Happy coding,

Filip

We are hiring! Check out our current openings - we would love to hear from you!

Categories