Tags: calculator

I’m at day two of Indie Web Camp Brighton.

Day one was excellent. It was really hard to choose which sessions to go to because they all sounded interesting. That’s a good problem to have.

I ended up participating in:

• a session on POSSE,
• a session on NFC tags,
• a session on writing, and
• a session on testing your website that was hosted by Ros

In that testing session I shared some of the bookmarklets I use regularly.

Bookmarklets? They’re bookmarks that sit in the toolbar of your desktop browser. Just like any other bookmark, they’re links. The difference is that these links begin with javascript: rather than http. That means you can put programmatic instructions inside the link. Click the bookmark and the JavaScript gets executed.

In my mind, there are two different approaches to making a bookmarklet. One kind of bookmarklet contains lots of clever JavaScript—that’s where the smart stuff happens. The other kind of bookmarklet is deliberately dumb. All they do is take the URL of the current page and pass it to another service—that’s where the smart stuff happens.

I like that second kind of bookmarklet.

Here are some bookmarklets I’ve made. You can drag any of them up to the toolbar of your browser. Or you could create a folder called, say, “bookmarklets”, and drag these links up there.

Validation: This bookmarklet will validate the HTML of whatever page you’re on.

Validate HTML

Carbon: This bookmarklet will run the domain through the website carbon calculator.

Calculate carbon

Accessibility: This bookmarklet will run the current page through the Website Accessibility Evaluation Tools.

WAVE

Performance: This bookmarklet will take the current page and it run it through PageSpeed Insights, which includes a Lighthouse test.

PageSpeed

HTTPS: This bookmarklet will run your site through the SSL checker from SSL Labs.

SSL Report

Headers: This bookmarklet will test the security headers on your website.

Security Headers

Drag any of those links to your browser’s toolbar to “install” them. If you don’t like one, you can delete it the same way you can delete any other bookmark.

Clamp calculator | Utopia

Oh, this is a nice addition to the Utopia set of tools: when you don’t need a full-on type scale but you still want to figure out fluid clamp() values, the clamp calculator has you covered.

It’s got permalinks too!

clamp() Calculator · Chris Burnell

Like a little mini Utopia:

Handy little tool for calculating viewport-based clamped values.

Pizza Exchange Rate | FlowingData

This is a story about pizza and geometry.

The interactive widget here really demonstrates the difference between showing and telling.

Fluid Space Calculator | Utopia

Type and space are linked, so if you’re going to have a fluid type calculator, it makes sense to have a fluid space calculator too. More great work from Trys and James!

EStimator.dev: the modern JavaScript savings calculator

Find out how much smaller your JavaScript could be.

Website Carbon Calculator – Calculate your websites carbon emissions

Get an idea of how much your website is contributing to the climate crisis.

In total, the internet produces 2% of global carbon emissions, roughly the same as that bad boy of climate change, the aviation industry.

Web Bloat Score Calculator

Page web bloat score (WebBS for short) is calculated as follows:

WebBS = TotalPageSize / PageImageSize

Yes, this is a tongue-in-cheek somewhat arbitrary measurement, but it’s well worth reading through the rationale for it.

How can the image of a page be smaller than the page itself?

Web Bloat Score Calculator

Here’s an interesting metric for measuring performance: take the overall page weight of a URL and divide it by the file size of the screenshot of that URL.

Performance Budget Builder

A nifty tool from Brad to help calculate and allocate performance budgets. Click around and edit the numbers.

Performance Budget Calculator

A handy little for calculating your performance budget based on how long you want your page to take to load on a particular connection.

Cross-stitch iPhone case #2 - Jane Dallaway

A brilliantly cool handmade iPhone case by Jane.

Grid Calculator

A handy tool for calculating grid and gutter widths although you'll still have to some calculating to get the figures to work in percentages (assuming you're designing for the Web).

The Man in Blue > Experiments > Web Coolness Calculator

Calculate your Web Coolness, courtesy of Cameron. Of course he couldn't resist one more jibe at me in there.

The Graphing Calculator Story

The fascinating story of an application built by ex-employees sneaking into Apple.