What's in my bookmarks bar

I decided to spend some time this evening tidying up my bookmarks in Chrome.

Along with clearing out what I've bookmarked over the years I thought I'd tidy up my bookmarks bar as well.

image of bookmarks bar

I save my bookmarks bar for predominantly handy JS bokmarklets. After tidying these up I thought it'd be something good to share.

So here goes...

Window Size Bookmarklet
A simple bookmarklet that gives a pixel value for the width and height of the browser viewport. As I convert px to em with Sass I find this easy and quick to understand

New 'iPhone' Window
This opens what ever page you're on into a new window with reduced browser chrome to a size relative to an iPhone. This is good when using with Crhomes Dev Tools but I don't open it often anymore.

Print Preview
Without wasting paper until you really have to, here's a quick way to show how the page would look if printed.

deCSS3
From Dave Rupert, this strips out any and all CSS3 so that you can have a quick look to make a guess at what older browsers would potentally render the page like.

HTML_codesniifer
A nice accessibility checker giving you a traffic light system of what's not right and how to fix it.

RWD multiple pages
A bookmarklet that loads the current site into several mobile/tablet sizes iframes for quick checking. I don't open this one often.

Diagnostic.css
This gives a visual indication of where your site would be inaccessible and where you have invalid markup.

Resizer
This gives you a little menu to makes the page your on resize to various preset viewport widths

Media Query Bookmarklet
From the fine people of Sparkbox this gives you a ruler, it also outputs where your cursor is in X/Y but the beauty is that it shows you all the media queries being called at whatever size the browser is set at.

I've also got a bookmarklet for Sassmeister and to create a new pen on CodePen and that's it. Some handy little bookmarklets helping me make, test, break and fix websites every day.