Always Twisted

{ Slightly Bizarre Ramblings Of A Front-End Developer }

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.

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.

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.

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

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.


Resources Responsive Web Design accessibility Did you like this post? Hire me.
blog comments powered by Disqus