Easy Screenshot Hack?

The custom dimensions drop down in Google Chrome

We have just launched Budget and needed to do a final review to improve all the content and update all the images, whilst doing so, I discovered a screenshot hack that would have made things go faster.

Before the screenshot hack

In the past I would either screen grab the bit I wanted, or screen grab the entire page and crop the section I wanted in my editor of choice.

Deciding on the focus for the screenshot was always tough. You know what part of the page you want in focus but it’s tough deciding how much extra you need to include in the image to keep it consistent with other images on the page.

Screenshot Hack?

OK, so what is the hack? Well, Chrome.

I was testing the responsive layout on one of my Apps and saw the “Edit” menu item in the “Dimensions” dropdown.

I set up a couple of custom options, 400 * 400 and 390 * 725 and boom! I have a nice frame for screenshots and can decide on the focus as well as ensure all the screenshots are the same size.

Late to the Party

To anyone that is a designer or discovered this “hack” a decade ago, I’m sure this revelation is laughable! However, if you are a developer first like me and need to take consistent screenshots. I’d suggest giving this a go.

I accept that very few people will learn anything from this hack; I’m obviously not adding anything to any developer’s toolkits. However, as much as this doesn’t add anything useful, you might be interested in reading about the project setup I’ve settled on which has been working well for years.

Multiple computers, the benefit

Multiple computers can help you find more bugs in your Apps

I have a few computers that I use, most people would say too many, for me though, it works. Having multiple computers gives me the freedom to work in more than one location. I have my main desktop in my office, my old still usable desktop in my wife’s office space and two laptops, a Surface Book and a Macbook Pro. Both the Macbook Pro and Surface Book are a little long in the tooth, but they still work well enough for when I need to take a machine onsite for freelance or contract work.

Why am I mentioning I have a use multiple PCs, well, there are a whole host of development problems that you solve because you use multiple machines. Additionally, because I use multiple machines, I tend to make fewer changes to my setup than I used to. Other than my IDE of choice and Docker, my setup is simple, this makes it easier to replicate across my computers.

What is the gain?

So, what is the gain? Well, you can only use multiple PCs if your Apps are setup on each of them, this is the benefit, because you have to setup each App more than once you quickly get to spot any issues, if you added an extension when you developed a feature, boom, you’ll notice, if it isn’t easy to get your tests to run, boom you’ll notice. It also gives you the opportunity to test the first install process for your Apps, you’ll quickly notice the necessary data you added outside of a migration or the path that isn’t mapped.

Yes, having multiple computers is a luxury, the thing is though, keep your old stuff, it is more functional than you realise.

If you don’t have multiple machines, you can always use someone else’s, add an account to your partner, child’s, siblings, or parents’ computer, with their permission of course. Even if you only rarely setup one of your projects on another machine, you are bound to spot an issue you didn’t know existed.

Simpler than years ago

These days tools like Docker have solved a lot of the problems we used to experience but I still think you will find an issue or two when you setup an App fresh on another computer, especially if that App has been in development for a while or moved beyond basic functionality.