What's in my bookmarks bar
On This Page:
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.
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.
