Problems were faced

The problem when merging WordPress databases is that you end up having conflicts with the primary keys. Initially I thought this wasn’t a problem since I could just merge the one into the other without specifying the primary key. Mysql would auto-increment this and all my problems would have been solved. I tried this and quickly realised that this would only work for me if I was merging a single table. By auto-incrementing the primary keys in the various tables I was merging, it broke the primary/foreign key relationship between them.
What was the solution?
Simple, increment all primary and foreign keys in one of the databases by X (read: insert number here). X can change depending on how large your database is. I was working on a particularly large one and did an increment of 10 000.

You have db1 and db2. You want db1 to have the extra posts/content types/categories/images included in db2. Do the primary/foreign key increments on db2. Mysqldump the relevant tables from db2 with –no-something-or-other flag and then import that script into db1.

Bash script

The bash script below will export posts, pages, products, images, categories and tags from db2 into db2.sql. Edit it to your needs. I’ve left comments in the bash script.

# WordPress export
# Assuming the db details are:
# db_name = db2
# db_user = root
# db_pass = pass
# =============================================================================

echo "Change all IDs to avoid conflicts"
echo "===================================================="

# wp_posts
mysql --user=root --password= db2 -e "UPDATE wp_posts 
    SET id = REPLACE(
        id, 
        wp_posts.id, 
        wp_posts.id + 10000
    ) 
    WHERE id > 0"

# wp_postmeta
# Increment post_id 
# Increment meta_value fields for post thumbnails to retain reference
mysql --user=root --password= db2 -e "UPDATE wp_postmeta 
    SET post_id = REPLACE(
        post_id, wp_postmeta.post_id, 
        wp_postmeta.post_id + 10000
    ) 
    WHERE post_id > 0"
mysql --user=root --password= db2 -e "UPDATE wp_postmeta 
    SET meta_value = REPLACE(
        meta_value, 
        wp_postmeta.meta_value, 
        wp_postmeta.meta_value + 10000
    ) 
    WHERE meta_key = '_thumbnail_id'"

# wp_terms
mysql --user=root --password= db2 -e "UPDATE wp_terms 
    SET term_id = REPLACE(
        term_id, wp_terms.term_id, 
        wp_terms.term_id + 10000
    ) 
    WHERE term_id > 0"

# wp_term_taxonomy
mysql --user=root --password= db2 -e "UPDATE wp_term_taxonomy 
    SET term_taxonomy_id = REPLACE(
        term_taxonomy_id, wp_term_taxonomy.term_taxonomy_id, 
        wp_term_taxonomy.term_taxonomy_id + 10000
    ) 
    WHERE term_taxonomy_id > 0"
mysql --user=root --password= db2 -e "UPDATE wp_term_taxonomy 
    SET term_id = REPLACE(
        term_id, 
        wp_term_taxonomy.term_id, 
        wp_term_taxonomy.term_id + 10000
    ) 
    WHERE term_id > 0"
mysql --user=root --password= db2 -e "UPDATE wp_term_taxonomy 
    SET parent = REPLACE(
        parent, 
        wp_term_taxonomy.parent, 
        wp_term_taxonomy.parent + 10000
    ) 
    WHERE parent > 0"

# wp_term_relationships
mysql --user=root --password= db2 -e "UPDATE wp_term_relationships 
    SET object_id = REPLACE(
        object_id, 
        wp_term_relationships.object_id, 
        wp_term_relationships.object_id + 10000
    ) 
    WHERE object_id > 0"
mysql --user=root --password= db2 -e "UPDATE wp_term_relationships 
    SET term_taxonomy_id = REPLACE(
        term_taxonomy_id, 
        wp_term_relationships.term_taxonomy_id, 
        wp_term_relationships.term_taxonomy_id + 10000
    ) 
    WHERE term_taxonomy_id > 0"

echo "Now for the dumping"
echo "===================================================="

mysqldump --no-create-info --user=root --password= db2 wp_posts > wp_posts.sql
mysqldump --no-create-info --user=root --password= db2 wp_postmeta > wp_postmeta.sql
mysqldump --no-create-info --user=root --password= db2 wp_terms > wp_terms.sql
mysqldump --no-create-info --user=root --password= db2 wp_term_taxonomy > wp_term_taxonomy.sql
mysqldump --no-create-info --user=root --password= db2 wp_term_relationships > wp_term_relationships.sql

echo "Edit exported files to allow for seamless inserting"
echo "===================================================="

# wp_postmeta id's don't need to be force incremented. Remove all ID inserts
sed -ir "s/[)],[(][0-9]*,/),(/g" wp_postmeta.sql
sed -i "s/INSERT INTO \`wp_postmeta\` VALUES ([0-9]*,/INSERT INTO \`wp_postmeta\` (\`post_id\`, \`meta_key\`, \`meta_value\`) VALUES (/g" wp_postmeta.sql

# Prevents duplicates on wp_terms and wp_users script import
sed -i "s/);/) ON DUPLICATE KEY UPDATE slug = slug;/g" wp_terms.sql

Note: Users have been removed from the above export, therefore db1 users will be untouched.

Once the script has done all of the hard work, it’s time to import db2.sql into db1.

# Import into dummy DB
echo "Import into dummy DB"
echo "===================================================="
mysql -u root -p db1 < wp_posts.sql
mysql -u root -p db1 < wp_postmeta.sql
mysql -u root -p db1 < wp_terms.sql
mysql -u root -p db1 < wp_term_taxonomy.sql
mysql -u root -p db1 < wp_term_relationships.sql

That’s it! Everything should have merged correctly.

If you’re looking for the latter, check out this css-tricks screencast.

Installing

When running Sass/Compass you’ll only need Sass or Compass, but this article will instruct you to install both.

Sass and Compass are Ruby applications, meaning you need to have Ruby installed. Ruby is a programming language.

Install on Windows

Make sure to read this whole section before installing.

Firstly, you need to begin the Ruby installation. It’s probably best to pick the latest version. At the time of writing I would choose Ruby 2.0.0-p481 (x64) since that’s the latest version and I’m running a 64 bit OS.

Important note: While running the installation, there is a checkbox option that is un-ticked by default: Add Ruby executables to your PATH. Make sure that is ticked. This allows for the keyword ruby to be linked to the Ruby installation for your command prompt.

Once this is done it’s time to install Sass and Compass.

Runy the following commands:

gem install sass compass

The above will install both Sass and Compass. It may take a while so just give it time to do it’s thing. Once it’s done, you’re done. Give yourself a high five.

Install on OS X/Linux

By default OS X and Linux have Ruby installed. So this should be very easy. Run the following command:

sudo gem install sass compass

That’s it. Yay for Unix based operating systems.

But… I don’t like the terminal/command prompt

It’s not as complicated as it seems. The feeling of being at home within the terminal is quite a liberating feeling and I suggest you learn it. There are a bunch of Sass/Compass GUIs out there and I’ve tried 3 of them. The following work in Windows, OS X and Linux.

• Compass.app is my favourite because it runs in the background and there is minimal interface.
• Prepros App Is also pretty good. I’ve found some irritating things about it with regards to very specific Compass customization but it’s really easy to use.
• Scout is pretty easy to use. I found it a bit slow and laggy.

This tutorial is for beginners. The method for creating the slider could be done differently, but I feel this way is more simple to understand.

It is important to picture what the HTML and CSS should be doing in order to create the component before actually beginning with the javascript. This way you know exactly what you are working towards. Below is a gif explaining the concept of the slider in terms of HTML and CSS.

Common things that cross my mind before actually jumping into development are:

Where are the hidden elements situated?

Beneath, on top, next to or behind the visible element?

How are they hidden?

Is their display set to none?

Are they outside of the parent element which is set to overflow: hidden?

Are they hidden behind visible element via z-index?

All right, enough of that, let’s get started.

The HTML

Before we create anything, we should try and get an idea of exactly what we are trying to achieve. I’ve drawn up a quick image slider wireframe.

So let’s turn that into HTML.

<div class="gallery-wrap">
  <div class="gallery clearfix">
    <div class="gallery__item">
      <img src="images/image1.jpg" class="gallery__img" alt="" />
    </div>
     <div class="gallery__item">
      <img src="images/image2.jpg" class="gallery__img" alt="" />
    </div>
  </div>
  <div class="gallery__controls clearfix">
    <div href="#" class="gallery__controls-prev">
      <img src="images/prev.png" alt="" />
    </div>
    <div href="#" class="gallery__controls-next">
      <img src="images/next.png" alt="" />
    </div>
  </div>
</div>

.gallery-wrap will be the visible area.
.gallery is the element that contains the list of images.
.gallery__controls contains the next and previous controls.

Generally an image slider would contain more than 2 images but I’ve left out the exact HTML I used in the demo for readability.

The CSS

.gallery-wrap { margin: 0 auto; overflow: hidden; width: 732px; }
.gallery { position: relative; left: 0; top: 0; }
.gallery__item { float: left; list-style: none; margin-right: 20px; }
.gallery__img { display: block; border: 4px solid #40331b; height: 175px; width: 160px; }

.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }

The most important thing here is to set .gallery to ‘position: relative‘ and to set .gallery-wrap to ‘overflow: hidden‘. The CSS is quite straight forward.

The jQuery/Javascript

This is where all the fancy tricks take place.

// Only run everything once the page has completely loaded
$(window).load(function(){

    // Fancybox specific
    $(".gallery__link").fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });

    // Set general variables
    // ====================================================================
    var totalWidth = 0;

    // Total width is calculated by looping through each gallery item and
    // adding up each width and storing that in `totalWidth`
    $(".gallery__item").each(function(){
        totalWidth = totalWidth + $(this).outerWidth(true);
    });

    // The maxScrollPosition is the furthest point the items should
    // ever scroll to. We always want the viewport to be full of images.
    var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();

    // This is the core function that animates to the target item
    // ====================================================================
    function toGalleryItem($targetItem){
        // Make sure the target item exists, otherwise do nothing
        if($targetItem.length){

            // The new position is just to the left of the targetItem
            var newPosition = $targetItem.position().left;

            // If the new position isn't greater than the maximum width
            if(newPosition <= maxScrollPosition){

                // Add active class to the target item
                $targetItem.addClass("gallery__item--active");

                // Remove the Active class from all other items
                $targetItem.siblings().removeClass("gallery__item--active");

                // Animate .gallery element to the correct left position.
                $(".gallery").animate({
                    left : - newPosition
                });
            } else {
                // Animate .gallery element to the correct left position.
                $(".gallery").animate({
                    left : - maxScrollPosition
                });
            };
        };
    };

    // Basic HTML manipulation
    // ====================================================================
    // Set the gallery width to the totalWidth. This allows all items to
    // be on one line.
    $(".gallery").width(totalWidth);

    // Add active class to the first gallery item
    $(".gallery__item:first").addClass("gallery__item--active");

    // When the prev button is clicked
    // ====================================================================
    $(".gallery__controls-prev").click(function(){
        // Set target item to the item before the active item
        var $targetItem = $(".gallery__item--active").prev();
        toGalleryItem($targetItem);
    });

    // When the next button is clicked
    // ====================================================================
    $(".gallery__controls-next").click(function(){
        // Set target item to the item after the active item
        var $targetItem = $(".gallery__item--active").next();
        toGalleryItem($targetItem);
    });
});

I have heavily commented the above code. All lines beginning with // are comment lines.

To recap, the following was done:

• Only run everything once the window (page) loads.
• Calculate the total width of all the images.
• Calculate the maximum scroll position. This is the total images width subtract the viewport (.gallery) width.
• Create the toGalleryItem function. This function will scroll to any item we desire.
  • If the target item exists, continue. Otherwise there is nothing left to run.
  • The new position is the left position of the slide/image, relative to it’s container .gallery.
  • If the new position is less than or equal to the maximum scroll position, toggle active classes accordingly and animate to the new left position.
  • Otherwise animate to the maximum scroll position.
• Set slide container (.gallery) width to the sum of all the images width.
• Set the first image as active.
• When the previous button is clicked, go to the previous slide/image.
• When the next button is clicked, go to the next slide/image.

I will break down the javascript into 2 parts.
I’m going to break the above up into 2 parts. Part explaining the variable declarations and part 2 explaining the rest of the jQuery/javascript.

Summary of javascript/jQuery methods used:

$(".gallery__item").each()

I’ve written an article explaining the various jQuery each methodsa>.

totalWidth = totalWidth + $(this).outerWidth(true);

function toGalleryItem($targetItem)

A function is a bit of javascript that can be run just by calling the function name. Essentially it’s a shortcut. Functions can be made dynamic by allowing the user to pass in variables or parameters such as $targetItem

if($targetItem.length){

I’ve written an article about the if statement you may want to have a look at.

addClass and removeClass

These are self explanetory jQuery functions.

$(".gallery").animate()

This is a magic jQuery function that allows you to animate a wide range of CSS properties.

That’s about it! I hope you’ve found this tutorial useful.

If you have any questions or comments, feel free to leave a comment below.

This article focuses on why you should start using display: inline-block, understanding this value as well as how to make sure it is consistent across all modern browsers and IE7+.

Note: If you don’t yet know the differences between inline and block level elements, check out what css-101 has to say about it.

inline-block is your missing friend

inline-block solves all sorts of problems web-devs run into on a daily basis. I’m going to go through various common scenarios and cover how I would deal with them in a cross-browser fashion. You may notice some odd/hacky CSS included in the following examples – this will be covered in the Browser Compatibility section later in the article.

inline-block vertically center (IBVC) hack

Chris Coyier talks about a “Ghost” IBVC method and he credits Michal Czernow for it’s origin. Chris also mentions how it’s equivalent to the display: table/table-cell method since it also doesn’t support IE7. I’ve been playing around with inline-block and tinkering with vertical centering and I’ve come up with something that seems to be the ‘Ghost’ method (I’d discovered the ‘Ghost’ method after stumbling upon this solution) with a few differences. The two differences being mine supports IE6+ (not that IE6 matters at all anymore, just an FYI) and it doesn’t require pseudo elements to function.

Being able to vertically center an element with a dynamic height is something that has plagued developers (or me at least) for a very long time and the cross-browser solution has been somewhat of a holy grail. I’ve seen many different vertical centering methods, the most popular being the display: table used with display: table-cell. The problem with this is IE7 doesn’t support either of those display values.

I feel this hack is a more simple and easily understandable way of vertically/horizontally centering an element than the previously mentioned table/table-cell/IE7-bug-hack method. I also feel it’s much easier to understand and work with than the Gary Turner method too, but well done to him for coming up with that over 7 years ago. I’m sure other people will feel differently about this being the “best” way, however this is what I prefer..

Problems

vertical-align property

One slight downside to this I’ve noticed is vertical-align: middle vertically aligns the capital letters, so lower case letters or inline-block elements are very slightly off center. I’ve noticed elements being off by about 2px to 4px depending on what size the items are. Although this occurs it’s pretty much negligible for me – especially since I can’t actually notice this unless I actually count pixels.

Space characters

Space characters are handled like a space would be handled within inline-elements. This means that spaces and or tabs will be displayed as a space once the page has rendered. There are a couple of ways to work around this problem but it can be annoying nonetheless.

IE7 hand-holding

The above mentioned ‘space characters’ problem doesn’t take affect in IE7. The problem IE7 does come with is that it requires at least 1 other inline-block element to be present to allow the inline-block to vertically center. To get around this, I’ve added an “invisible” element after the item I’m centering – I’ve added it afterwards incase :first-child is used. This was included in the Ghost method through pseudo elements. Even though I’ve managed to remove pseudo elements, I’ve had to add an equivalent (or worse since it’s actual markup) for IE7. Boo.

Alternative methods

There is an IE7 CSS bug in which you can center an element vertically, and if used along side the table/table-cell method, it can work nicely (However I haven’t used it in practice). This can also be done using the Flexbox layout module – Flexbox is definitely something that will be used much more in future, however as Le Roux pointed out to me, the current Flexbox support right now is a bit flakey – So it may be another 1 or 2 years before we can start using it with absolute confidence.

Centering navigation items

I often come across a navigation design where the amount of items in the navigation should be dynamic, however the navigation itself should remain centered regardless of how many or how wide the items are. Previously I would have centered this with display: table, however, since display: table doesn’t have any IE7 support, I would have probably also used an IE7 javascript fallback (Or just let the navigation appear left aligned in IE7). With display: inline-block, this same result can be achieved with 2 (or 4 including IE7 support) css properties and values.

How simple was that? Seriously?

Article block listings

Generally I solve the following kind of problem differently depending on the exact design and how I feel at the time.

An easy inline-block solution would be:

The design could have been more tricky, though. Typically the height would be dynamic, or possibly both the height and width. As you can see this isn’t exactly a masonry layout since each row starts and ends at the same top-offset. It is still not possible to solve a masonry design in LTE IE9 without javascript. The height of these items are dynamic though, mere floats wouldn’t work correctly. If we used floats would end up with something like this:

To avoid that we could use :nth-child and detect the first item in each row and then clear: left, but that would pose some cross-browser problems itself since :nth-child is only supported by modern browsers. We could add classes to these items via the CMS/backend language, but it would be easier if we could just get this working with CSS alone and without any problems!
Yay, inline-block the the rescue again! You didn’t expect that did you?!

More navigation

Surely there is some limit to the IE7 support? What about an inline-block within an inline-block?!

In the above example I have 3 levels of nested inline-block items and it works perfectly in IE7+.

Browser compatibility

If you’ve read up until this point, you are well aware that an IE7 hack should be used to “enable” the inline-block functionality.

The IE7 hack

.item { display: block; *display: inline; zoom: 1; }

This could be turned into valid CSS if you are using the <html> conditional classes (included in h5bp):

.item { display: inline-block; }
.lt-ie8 .item { display: inline; zoom: 1; }

Why does that work?

IE7 doesn’t support inline-block per se, however you can mimic the functionality by making it be an inline element and triggering hasLayout on the element. The zoom: 1 visually doesn’t change anything. It is applied this way because it is one of the properties that triggers hasLayout.

Conclusion

inline-block is an amazing and underrated and underused property, in my opinion. inline-block is something that can and should be used today with confidence. We fear that which we do not understand – hopefully inline-block is now added to your CSS toolbox.

New Method

Ever since I came across the IE7 inline-block hack, I’ve been using it whenever I can. It works in IE7, why wouldn’t I use it everywhere?

Inline-blocks can be centered with the use of text-align: center. Therefore, a list of inline-blocks can be centered extremely easily. This works absolutely wonderfully for horizontally centered navigations, or anything that doesn’t have block level elements within it.
This is an example of a navigation dynamically centered with the use of inline-block elements and the text-align: center property:

You may have noticed that the HTML doesn’t have spaces between the elements for readability like the previous example does. This is because the elements are treating the spaces/enters/tabs between them as an actual space since they are behaving like inline elements. IE7 doesn’t support inline-block, however an inline element which receives hasLayout behaves as if it were an inline-block. zoom: 1 is one of the properties which forces hasLayout on an element in IE.

Conclusion

This is an extremely simple way of solving a dynamically centered navigation problem with brilliant browser support. It may not be the solution for every display: table that is/was used, but it can definitely help in a bunch of different scenarios.

In the example jsfiddles you may notice HTML IE conditional statements: Usually those conditional statements are applied to the <html> element and I’ve added them to a div to mimic that functionality.

CSS3 text-shadow

I’m sure you’re either aware of, or easily understand how this trick works. Very simply, you give the text a text-shadow and make the it transparent so that only the shadow is visible. This gives a simple and effective blurred text effect. Usually I would detect for IE9 but it’s necessary in this case since IE9 doesn’t support text-shadow.

Problems

• Opera doesn’t currently support the transition to the text-shadow property. The blur works well though!
• I’ve applied a lte-IE8 shadow filter to the text. It looks more like a smudge than a blur, but there you have it – use it, don’t use it.

Fallback

Use Modernizr ( or feature detect manually ) for text-shadow support to apply fallback styles. This is necessary due to the fact that the text has a transparent color and without the shadow, the font is illegible.

SVG blur filter applied to a SVG element

The title may seem superfluous but it’s actually quite important to understand when it comes to SVG filters. SVG supports filters and we can easily and freely apply these filters to all kinds of SVG elements. Note: NOT all kinds of HTML elements, I’ll elaborate a little later.

Problems

• Chrome isn’t currently able to apply a SVG filter if one has already been applied to an element. This means: if a SVG element contains a filter, another filter won’t be applied via class change, hover or any other CSS pseudo class.
• IE6-IE8 doesn’t support SVG within HTML. They see these tags as made up tags and treats them as that. They elements are not able to be styled unless the SVG is wrapped in an element and that wrapper element is styled. Alternatively document.createElement() could be used (This is what the HTML5 shim/shiv makes use of. more about it by Paul Irish).
• No browser supports the transition property being applied to a SVG element

SVG blur filter applied to a SVG image element

Most of us want to apply a blur filter to images so the above example is all well and good, but it probably won’t be of too much assistance since the CSS3 text-shadow blur does the same thing. We’re not able to drop <img> elements into SVG an image, luckily SVG has it’s own way of inserting external images. Suddenly this gives us quite a lot of freedom when it comes to Gaussian blur or other SVG filters.

Most of the above problems apply here as well as a few more:

• Chrome can’t apply a SVG filter if one has already been applied, however there is a work around for this in ChromeCanary. If you apply a filter to a parent SVG element and a hover filter to the child element, the hover effect will take place.
• No browser supports the transition property being applied to an SVG element
• IE9 renders the image (without an applied filter), But lte-IE8 doesn’t display the image whatsoever.

SVG Blur Filter applied to HTML elements

Problems

• Firefox is the only browser that supports this
• The transition property still doesn’t take affect when applied

CSS Blur Filter

This is where it all gets very exciting. A CSS property that fully supports all kinds of filters including the most important one (for this article at least), the blur filter. It is more simple to use than you could ever imagine – element { filter: blur(2px) }

Unfortunately this can’t be applied to SVG elements, however there is a bit of a work around: You can wrap the SVG element within an HTML tag and apply the CSS filter to that. The only draw back is that the entire SVG element will be blurred, and not a single element.

It’s merely a filter property with a blur value applied. Absolutely amazing. On top of everything, since it’s a standard CSS property, the transition property works perfectly. You can transition from a normal image, to a half blurred/half grey scale image if you’d like. It’s all up to your imagination.

Problems

• Not complete browser support. Webkit only, currently.

The “problem” is quite a large set back here. The only browser that supports this is a nightly browser version – This means that we should pretty much stay away from it until at least 2 popular browsers support it… Right?

I think you could use it now actually

• As long as it’s not an absolutely dependant feature, browsers will degrade gracefully – If the property isn’t supported, the image is unaffected.
• It should be supported in Chrome pretty soon
• You could use the CSS filter (webkit only) along with the SVG filter applied to an HTML element (firefox only)

Here is an example of the CSS Filter used alongside the SVG filter.

HTML5Rocks has a cool article and demo about this property – Keep in mind the demo currently only works in Chrome Canary.

Good old fashioned images

This is obviously the most popular at the moment due to the browser support.

Problems

• Increased page size due to extra images
• Increased HTTP requests (if you don’t use a sprite)
• Annoying to manage if something has to change across all images

What was learnt?

Chrome can’t swap SVG filters. This means that an element can’t have a SVG filter applied and then have that filter change on hover. IE9 can’t do much of this which was expected, but what I didn’t expect was for Safari to be almost as bad at it.

Anything else?

• You could blur the images via the HTML5 canvas, but that’s another article.
• I don’t really mention Safari in this article – Most of this doesn’t seem to work in Safari 5.0.1 for Windows.
• The CSS filters are going to be very cool

Article influences

Paul Irish helped me look in the right direction – There is a surprisingly little amount of information about this topic out there.

@jamygolden canary supports CSS filters dvcs.w3.org/hg/FXTF/raw-fi… certainly the shorthands. havent tried the others. you should!
— Paul Irish ◕‿◕ (@paul_irish) March 6, 2012

Paul’s article SVG filters on HTML5 video was quite informative. High Res Browser Icons was a life saver and I now make use of CSS3 Please multiple times a day.

The IE ‘blur’ method which was used originates from a useragentman article. Subsequently Zoltan Hawryluk’s (the owner of the useragentman blog) added some really helpful comments in the comments area and helped achieve a really good looking text-blur effect for IE7+.

Dreamweaver

I started using Dreamweaver’s design mode when I began web-development. I didn’t touch HTML. I started using some of the DW javascript functionality which I thought was quite powerful at the time ( this was literally all done without looking at HTML ), but I was getting frustrated with the tabular layout – It felt like I was fighting it more than working with it. Changing the width of tabular layouts isn’t easy when you have multiple nested tables.

I started seeing all kinds of unbelievable tutorials and javascript plugins online. Things like dragging elements around as if they were windows in an operating system. I slowly started manipulating other people’s code within the DW code view and eventually I was permanently using that view. I felt design mode was for newbies and tabular design was old-school and evil. It was at this time that I started following popular online blogs such as CSS-Tricks and David Walsh, etc.

Dreamweaver features that stood out for me:

• I enjoyed the syntax highlighting colours
• Wrap text in element functionality
• tags closed automatically
• Find/replace throughout open files

Note: It took Dreamweaver 30 seconds to load up so I could take the screenshot. Core2Quad 2.3ghz with 3gb of ram.

Notepad++

I eventually moved over to Notepad++. I enjoyed how quick it was – Lightning quick compared to the bulky Dreamweaver. However it didn’t have most of the things I liked about Dreamweaver and it wasn’t nearly as aesthetically pleasing with regards to icon layout, icons, colours in general and the syntax highlighting. I actually found – and still do find – the toolbar of icons ( including print, copy/cut/paste, find, etc) very insulting. Eventually I was using Notepad++ without turning back to Dreamweaver for anything, but still I didn’t feel completely comfortable with it, something was missing.

Note: I probably didn’t use this editor to it’s full potential.

E-TextEditor

I began noticing how many people were talking about TextMate but I could not use it since it was/is a Mac specific application. After some googling I noticed there was a ‘Windows’ version of TextMate called ‘E-TextEditor’.

I found the syntax highlighting very pleasing and it had almost everything I could want, including FTP built into the app – This felt much more simple to get going than the Dreamweaver FTP functionality. One thing it didn’t have was ‘Find/replace throughout open files’. This was something I had missed since Dreamweaver.

Without a doubt, this became my text-editor of choice.

GEdit

I was getting fed up with Windows for various reasons and I couldn’t afford a Mac, so Linux ( Ubuntu ) was my next logical step. GEdit was/is the default text editor for Ubuntu and I was surprised that the default text editor that was so ‘advaced’ compared to other default OS text editors. This mainly included pleasing syntax highlighting and tabbed functionality. GEdit didn’t have the ‘Find/replace throughout open files’ functionality and something about it didn’t feel great when using it for larger projects. As far as features went, it didn’t have too many that I was aware of. For small HTML/CSS/JS projects or tests it was perfect though.

Scite

By default Scite has ( or my default installation at the time ) the line numbers disabled. This is/was highly annoying and on top of that, it wouldn’t ‘remember’ my option to keep line numbers enabled. Small things like this can really get to me – I want to feel completely at ease, comfortable and happy with my tools.

I didn’t really like the icons and the general look and feel of the editor, however, it was definitely much more advanced and nicer to use than GEdit – with options like “Convert selection to lowercase” to regular expression searches. By this time I had decided Scite was the Linux text editor for me, however as much as I liked it I preferred E-TextEditor, but I had completely moved away from Windows – apart from my virtual machine with PhotoshopCS3 and IETester. It’s difficult using a text editor when I would have switched it for E-TextEditor or TextMate in a heartbeat.

Coda

I began using a Mac at work and it had Coda pre-installed. I had heard almost as much about Coda as I had about TextMate, mainly from Chris Coyier and a co-worker/friend. I enjoyed Coda – It had extremely simple and intuitive FTP support and was very nice to use. Coda had random nuggets I hadn’t seen in editors, like a wildcard character within searches. This could be achieved with regular expressions in other text editors, but the simple option was nice. The lack of functionality I was used to got to me. Coda was nice for larger PHP projects or smaller HTML projects.

TextMate

I was really eager to try out TextMate. I had heard so much about it and E-TextEditor was based on it.

TextMate was very different from other editors – especially since I was new to OSx. It was pretty much just a window of text. All the options could be accessed via keyboard-shortcuts or by the options panel. It took me a couple of minutes to get used to it but I really loved it.

Komodo Edit

As much as I liked TextMate, I could never get completely used to it because at the time I was working on 2 operating systems – OSx ( work ) and Ubuntu ( home/dev ). I was also sure I would end up using Windows for some or other reason in future due to work or somewhere else I was forced to. This meant that I would be using a different text editor on each operating system. This made me feel uncomfortable and I didn’t want to learn to use something I’d end up not using. It felt like a waste of time investment. I definitely wanted to get used to an editor that worked across all platforms. I wanted a text editor I would use for the rest of my life.

My seeking continued until I had found KomodoEdit. It was great. It had a couple of things I wasn’t ecstatic about, but the fact that it was cross platform made me forget about those quickly. KomodoEdit was definitely a very powerful text editor. I was referred to the application by a hardcore PHP backend friend and that made me feel good since I felt that I could grow with the editor if I needed to.

KomodoEdit is a light-weight and free version of KomodoIDE. I had found pretty much everything I had wanted.

• Light-weight – Check
• Multiple language support – Check
• Plenty of options – Check
• Powerful – Check
• Cross-Platform compatible – Check
• Aesthetically pleasing – No
• Find/replace throughout open tabs – No

Sublime Text 2

Finally I stumbled upon Sublime Text 2. And it was good.

It had everything I could ever want and more, this went from Multi-select to distraction free mode. It had all the above checks, it was aesthetically pleasing and had an unbelievable find functionality. The Mac text editors ( TextMate and Coda ) look and feel far better to use than applications on other operating systems – It’s like they’re just made better. SublimeText2 has kept this feeling, even on different operating systems. The fact that text editors had to look ugly in Linux and Windows had been something I had wondered about on and off for a long time – Finally there was one editor that broke my perception.

I had never used a dark theme before but the default SublimeText2 was perfect. It had Chrome styled tabs, you could record macros, create your own snippets very easily and it had a visual map of document on the side of the editor ( this seemed like it could get old quickly, but I find it very useful in spotting patterns in larger documents).

The options worked differently compared to any other application I had used before. An options page was a text page in a sort of object/array layout. At first I thought this was temporary and it would be updated in a future version, but I finally realized how brilliant it was. You could search for options via the text editor. Search results appear in another default text-editor tab and it’s all consistent. You don’t ever leave tabs and text, brilliant.

The best part is, it’s only a beta. That’s right, until the time of this writing ST2 is a beta and it gets updated VERY often. New features, functionality and bug fixes come out with every update. ST2 has always been expensive for a text-editor, atleast $59 is expensive for one to me, but ST2 allows you to trial the software for as long as you’d like. On the site it says:

Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use.

The license comes with a bunch of perks, the most noticable includes a per-user license, not per-install or per-machine. This means you can use the registered version on whatever operating system and machine you’re using. After running and using it on all operating systems I decided to purchase it and I would urge anyone who loves it half as much as I do to support the development.

On top of all of this, I’ve subsequently began to learn Ruby and it’s got a Ruby build system installed – along with a bunch of other builds, including ant build. ST2 supports a vast amount of languages ( more than just syntax highlighting ), has plugin support and it supports Textmate snippets. The community is also pretty great.

As you may possibly know, I develop HTML, CSS, Javascript, PHP and Ruby. I’ve got friends who I’ve convinced to permanently use ST2 and they use languages ranging from Python to C++.

According to me, it is by far the best text-editor around.

tldr;

Sublime Text 2 is awesome.

Disclaimer

I don’t own any of the icons used, they belong to the text-editor/operating system.
I may have unfairly moved on from some of the text editors due to lack of specific functionality (or perceived lack of), aesthetics and cross-OS support. I may have been a bit unfair and some of you may disagree with me, but for me ST2 wins in every field. Also, if I’ve misrepresented any text-editor above, please correct me by with a comment.

Images can stretch nicely as long as the proportion remains constant, otherwise the image looks stretched. This is an example of what someone might consider a perfect full page background-image:

As you can see, the scale remains constant and this works with the perfect full page background-image.

Problem 1

The background in the previous example contains the width/height of the viewport. If the second viewport didn’t have the same dimension ratio, that very same background could look something like this:

That is clearly an example of a ‘failed’ full page background.

Problem 2

A typical and easy way to fix it would be to set the background-image width to be equal to the viewport’s width, but leave the height a dynamic size. This would give you something that looks like this:

Obviously the problem here is that the entire bottom area of the image is currently not visible… Unless you scroll down, which defeats the purpose of a full-page background-image.

Problem 3

You could very well set the height to fit the viewport’s height and have a dynamic width. With this example, the output would now look something like this:

This seems like the perfect full page background image solution right? Well… Not really. If we used the exact same technique with an image that has a larger width than it does height, it would look like this:

So, what is the solution?

The perfect solution exists, as long as you don’t feel that ‘perfect’ implies every image should look great with the specific solution. As long as you have background images with similar layouts ( All have width > height or visa versa ) you could use a solution to work with them all.

I have seen a static image used as a centered background image which worked well for that situation.

Conclusion

When it comes to full page background images and dynamic backgrounds, make sure you understand how the dimensions work and pick the right solution for your needs.

li { background: url(images/bullet.png) no-repeat left top; list-style: none; }

This gives us the ability to move the ‘list-item‘ around as we please without problems. Great solution! right?! No, there are three very annoying (however, small) problems with this method:

• You can’t effectively include the list item in a sprite, as you’d run into problems displaying areas of the sprite you wish to remain hidden.
• An image obviously can’t work with ordered lists as the numbered list-style-type would require a different image for each list item. This is possible but not very effective as it would require a lot of images and it wouldn’t be ever-expanding – It would have static amount of numbered images.
• Adds to HTTP requests – this is especially annoying if you’ve got a couple of different lists all using this method

Those are my two problems I have with the background-image, but I have managed to find a way around it.

Standard background-image method

Before I get started on the way I usually do this, let me show you what I did before and what I think most people do.

The HTML necessary

<ul class="first-example">
	<li>SEO</li>
	<li>Content Management System</li>
	<li>Social Network Integration</li>
	<li>Another list item for emphasis</li>
</ul>

The CSS necessary

.first-example li { background: url(../i/tick.png) no-repeat left 8px; }
.first-example li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; }

You can see what’s going on, no explanation needed. The only thing to note here is the list items contain a background image and that image is a single file separate from the sprite which adds to http requests.

Make use of pseudo elements

Pseudo elements are our friends. They are that extra bit of gas in the tank. When everything looks dull and there is no easy way to do what it is you want to do, look towards pseudo elements.

We could use pseudo elements as the ‘bullets’. This would solve the problem of showing more sprite than we’d like since we can set the pseudo-element’s width and height and give it the sprite background.

The HTML

The HTML is exactly the same as the first example with. The only difference is the class selector used for us to target.

<ul class="second-example">
	<li>SEO</li>
	<li>Content Management System</li>
	<li>Social Network Integration</li>
	<li>Another list item for emphasis</li>
</ul>

li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; position: relative; }

ul.second-example li:before {
	content: '';
	background: url(../i/sprite.png) no-repeat left top;
	height: 20px;
	width: 20px;
	position: absolute;
	left: 0;
	top: 8px;
}

ul.second-example li:nth-child(2n):before {
	background-position: -21px 0;
}

Why exactly are we giving every second example a different list item image? For two reasons:

• It gives me an excuse to use a sprite in this example
• We’re just retro and hip like that

Le’s see what would have happened if we gave the first example the sprite as the background.

List item with the sprite as a background-image

List item with pseudo element using the sprite as a background image – Preferred method

Make use of CSS counters

What exactly are CSS counters? A CSS counter is a function that is accepted by the content property of a pseudo element. You can count whatever it is you like. The amount of <section> elements in an article, the amount of <h2> elements, etc. In this case we’re going to be counting the amount of <li> elements. This way we can dynamically give the :before/:after pseudo elements a numerical value which will help to number our list items.

The CSS counter property is within the CSS 2.1 spec. So this means that it has support down to IE8. I understand that it won’t work in IE7 & IE6, but I don’t really care too much — I’d probably just give them the default numerical list-item-type.

Bring on the CSS

Some of CSS following will be the same as the previous CSS, but that’s because the list is styled in a similar fashion.
li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; position: relative; }
li:first-child { border-top: 1px solid #eee; }

ul.first-example li { content: ”; background: url(../i/tick.png) no-repeat left 8px; }

ol.third-example { counter-reset: li; }

ol.third-example li { position: relative; }

ol.third-example li:before { 
	content: counter(li); 
	counter-increment: li; 
	background: #f692bb; 
	color: #333;
	font: bold 14px/20px sans-serif; 
	height: 20px; 
	text-align: center; 
	width: 20px; 
	position: absolute; 
	left: 0; 
	top: 8px; 
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	        border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
	   -moz-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
		box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
}

Before I continue, thanks paulirish and jon_neal for CSS3 Please – Quite a helpful tool.

Note: the position relative on the list item is very necessary since you’ll be absolutely positioning the pseudo elements within each item.

To use the counter() function properly, 3 things need to ne done.

• The counter of the specific element needs to be reset — Or as I like to think of it, enabled
• The counter-increment needs to be told what to count, and by how much. (the increment could be by 2, or 10, in this example we’re going to leave it on 1 by default)
• The counter() function needs to be passed into the content property and then told what to count

Ok so first thing to do is to add the counter-reset property to the parent/ancestor container of the item you wish to count. You then give the counter-reset value the element type of the element to count. If you’d like to count the amount of paragraphs in the article element, you could reset the counting by adding the following CSS to your document:

body { counter-reset: p; }
/* Or */
article { counter-reset: p; }

It cascades, so any container will do.

You would then add the counter-increment property to the pseudo element, this tells the pseudo element which element to count and by how much.

li { counter-increment: li 5; }

That example would count in increments of 5 starting on that value, so: 5, 10, 15, etc. If you leave that value out it defaults to 1.

Finally, you would then add the counter() function to the content property of the pseudo element. This literally tells the pseudo element to contain the incremented value.

Conclusion

I find this extremely useful and consider it one of my better CSS tricks.
Browser support isn’t horrible, but not brilliant either — The inclusion of IE7 would make it brilliant. Never the less, it’s completely usable in every day scenarios since I use it fairly often and I give IE7 the deafult numbered styling.

To recap: counter-reset: element, counter-increment: element num, content: counter(element).

Note: I actually make use of the custom bullets via pseudo elements on my unordered list items within my current website design.

How is it not user friendly? tl;dr – Take me to the tutorial already

Placeholder text can be very helpful and can save a lot of page space while also being aesthetically pleasing. With this great feature, however, comes a problem: If the placeholder text is being used in place of a label, it can become very confusing when you focus on the field and the ‘label’ disappears.

It’s important for users to know:

• What field they are currently on
• What field they have filled in

Typical input placeholder problem

Based on the image above, it’s impossible to tell what the first/focused field is. It is relatively simple to deduce it’s either a ‘username‘ or ‘email‘ field. The only way to find out which field you’re on would be to remove all the text in the field and blur (lose focus). I have personally been caught by this dozens and dozens of times and I find it very annoying.

One method that websites, such as Twitter, have been adopting is to have the placeholder text fade out slightly on focus, but only disappear once the user inputs some text. This is arguably the way that the HTML5 placeholder should work by default.

An improved version

1. Normal Placeholder text
2. Placeholder text fades out slightly on focus
3. The input field is unknown once text has been added
4. The title attribute is used to add information

The method that the Twitter login system uses is a big step up from the problem in fig.1, however the same problem still exists once the user has added text.

The title attribute has been used here so a user can see the placeholder text by hovering over the input field which is a great addition. Unfortunately in general, I still don’t feel this is as very user friendly as it could be.

The solution

I would like all of the bonuses of both the placeholder method and the standard label method. I’ve decided there is one basic way to achieve this: Have either the label of the input field or an appropriate icon appear to the right of the field after the field has received focus.

So that’s it, in this tutorial I’m going to show you how you can make a form with placeholder text that is semantic, user-friendly and degrades gracefully for legacy browsers.

The HTML

The following HTML is normal <form> markup. It’s what we do with the CSS that really matters.

<form id="login">
    <ul>
        <li>
            <input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
            <label for="email">Your Email</label>
        </li>
        <li>
            <input id="password" name="password" placeholder="Your Password" title="Your Password" type="password" required />
            <label for="password">Your Password</label>
        </li>
        <li>
            <input id="submit" name="submit" type="submit" value="Login">
        </li>
    </ul>
</form>

The CSS

#login{font-size: 12px; margin: 0 auto; width: 700px;}
#login li{float: left; list-style: none; margin-left: 30px; position: relative;}
#login li:first-child{margin-left: 0;}

label{line-height: 40px; position: absolute; right: 120px; top: 0; bottom: 0;
    -moz-transition: 0.3s right ease;
    -ms-transition: 0.3s right ease;
    -o-transition: 0.3s right ease;
    -webkit-transition: 0.3s right ease;
    transition: 0.3s right ease;
 	z-index: 0}

input{color: transparent; font-size: 12px; height: 35px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
    -moz-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;}

input[type="email"], input[type="password"]{border: 1px solid #ccc; height: 35px; padding: 0 10px; width: 240px; position: relative; 
	-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	box-shadow: inset 0 0 10px rgba(0,0,0,.06);
	z-index: 2;}

input[type="email"]{color: rgba(47,130,194,.8);}
input[type="password"]{color: rgba(237,28,112,.8);}

/* Placeholder */
input[type="email"]:-moz-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]:-ms-input-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]::-webkit-input-placeholder{color: rgba(47,130,194,.6);}

input[type="password"]:-moz-placeholder{color: rgba(237,28,112,.6);}
input[type="password"]:-ms-input-placeholder{color: rgba(237,28,112,.6);}
input[type="password"]::-webkit-input-placeholder{color: rgba(237,28,112,.6);}

/* Label */
input[type="email"] + label{color: rgb(47,130,194);}
input[type="password"] + label{color: rgb(237,28,112);}

input:focus + label{right: 10px;}

input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}

/* Submit */
input[type="submit"]{
	background-color: #333;
	background: -moz-linear-gradient(bottom, #333, #444);
	background: -ms-linear-gradient(bottom, #333, #444);
	background: -o-linear-gradient(bottom, #333, #444);
	background: -webkit-linear-gradient(bottom, #333, #444);
	background: linear-gradient(bottom, #333, #444);
	border: 1px solid #222; color: #fff; cursor: pointer; height: 35px; width: 110px;
}

input[type="submit"]:hover{color: #ff6937;text-shadow: 0 0 1px rgba(255,255,255,.2);}

The CSS mostly consists of general styling, I’d say the most important two lines are:

input:focus + label{right: 10px;}
input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}

So the label is absolutely placed behind the input field. On focus the label moves to the right while the input’s background fades to a lower opacity. This gives the illusion of the label sliding right while fading in.

That’s pretty much all there is to it. I think it’s a neat little trick.

Let’s give IE a bit of love

As always, IE spoils the party, but as always Modernizr is here to save the day. We can get the form to act almost identically (sans animations) on IE8 and functionally on IE 6 and 7. Firstly, make sure you’ve given either the <html> or the <body> tag IE specific styles. For example:

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6 ie" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <script src="../../../js/libs/modernizr-2.0.6-min.js"></script>

Also, notice I’ve included Modernizr. I make use of Modernizr on pretty much every project I work on. It allows me to feature detect with javascript and I can make some pretty cool fallbacks with that.

Once we’ve got that set up we can easily start fixing up IE.

IE specific CSS

.ie input{line-height: 35px;}
.ie input[type="email"]{color: #2F82C2;}
.ie input[type="password"]{color: #ED1C70;}
.ie label{right: 10px;}

.ie input[type="email"]:focus, .ie input[type="password"]:focus{
    background:transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
    zoom: 1;
}
.ie7 label, .ie6 label{display: none;}

The CSS just makes things work in IE. Nothing special really. The weird -ms-filter is to add opacity to the background in IE.

Placeholder functionality fallback – jQuery with Modernizr

if(!Modernizr.input.placeholder) {
    $("input[placeholder]").each(function() {
        var placeholder = $(this).attr("placeholder");

        $(this).val(placeholder).focus(function() {
            if($(this).val() == placeholder) {
                $(this).val("")
            }
        }).blur(function() {
            if($(this).val() == "") {
                $(this).val(placeholder)
            }
        });
    });
}

This little snippet does the following:

1. Detects for the placeholder attribute support. If no support is found, it continues
2. It then looks for all input elements with the placeholder attribute
3. It then takes the placeholder value and puts that within the ‘value’ attribute
4. When focus is given to the element the value is set to none
5. When blurred, if the value attribute isn’t nothing, it leaves the text alone
6. If the value attribute is nothing, it replaces it with the placeholder text again

Foreseeable problems

The user can’t see the text if the input is full of characters.

True story, but the opacity of the label is so low that it doesn’t really interfere with the readability of the text itself. A way around this would be to add padding-right which covers the length of the label. The only downside to this would be the input field having to be very long.

In general I think this is fine, but if you’re very worried about this, I’d say add padding-right to the label and use icons instead of text. This will save a lot of space.

Conclusion

I think it’s a pretty solid technique that will leave your website visitors — or me at least — happier and less confused while logging in.