How polluted is the air today? Check out the real-time air pollution map, for more than 100 countries.

1. Tagged with
2. japan
3. air quality
4. pollution

Being an independent journalist – or an office worker if you wish – I always reasoned that I needed a decent computer and that I need to pay for quality.

1. Tagged with
2. computing

Sustainability of websites is mostly determined by how much electricity the website consumes. All websites consume electricity 24/7. There's a server powered up, listening for requests. They consume it by proxy transferring bits to the client and they consume it on the visitor's computer by rendering the content.

You can't do much about electricity consumption of a server being online 24/7 beyond simplifying your hosting infrastructure (you don't need a load balancer). What's easier to control is the the number of bits you send to clients who visit your website.

Images are a large source of unnecessary bits. We shouldn't be uploading raw uncompressed 40MB images designed for a poster to display on a smart phone. They'll load slow, chew through our visitor's data plan, and consume unnecessary electricity to transfer and render such a large image. You should resize your images for the web.

Traditionally images are input into a website with a simple image tag like below:

<img src="https://jamesvandyne.com/wp-content/uploads/2020/10/voted.png" alt="Ballot approved" border="0" width="600" >

You tell the browser where the image is, give it some alt text for cases where the image doesn't display / accessibility purposes, and maybe even set a size. Once your browser encounters this tag it will dutifully download and display the image. Life is good.

But what if that image is halfway down the page and completely off screen? Doesn't matter - still downloaded.
It doesn't matter that they may not scroll down far enough to see the image, it's in your markup the browser downloads it. This is a waste of electricity and bandwidth.

There are methods using Javascript to dynamically change the src attributes of your image tags when the user scrolls near, but then your simple image tag now requires Javascript and client side computation just to display. It's not an elegant solution.

Turns out there's a better way without Javascript using the loading attribute on your images. Support is in all major browsers since mid 2019 / early 2020. It works out of the box on Firefox/Chrome, but it must must be enabled in Safari under the Advanced > Experimental Features settings for now.

By simply adding loading="lazy" to our image tags the browser will lazy load our images, i.e. it won't download the image until is nearly in view.

So by modifying the example above to

<img src="https://jamesvandyne.com/wp-content/uploads/2020/10/voted.png" alt="Ballot approved" border="0" width="600" loading="lazy">

we can reduce the number of data transfers, reduce total transfer size (unless they scroll the image into view), reduce electricity consumption across the board, and improve page load times. It's a win-win-win.

I started watching Long Way Up this weekend. What a fantastic show and fascinating journey see - from the tip of Argentina up to L.A. on electric motorcycles.

As a fan of electric vehicles the first few episodes are bittersweet as they figure out how the bikes and charging work. Cold weather shortens the lifespan of any battery, so starting the journey at the end of winter and traveling through remote areas without a solid grid increases the challenge to a new level.

Seeing the beauty of these towns makes me want to visit Argentina and Chile so I can see it with my own eyes. The flight from Japan would be brutal as most flights to South America from Japan transit in Houston or L.A. – so a 10 - 14 hour flight to make it halfway.

One of the tasks left for me to improve the sustainability of my website is to reduce the size/transfer of the images on my site. This is actually two tasks: optimize the images themselves, two lazy load images so they only load when scrolled into view.

I'm not too interested in lazy-loading images as it would require adding more Javascript and client-side execution. So I plan to focus on optimizing images in place for now.

My blog is powered by Wordpress, so it should be as simple as installing one of the many "image optimizer" plugins. However, for a variety of reasons, including but not limited to image optimizing happens on their servers, or they want to use their CDN to delivery my images, or the plugin just kinda looks spammy, I haven't taken the next time.

My designed image processing shouldn't be too difficult - just call pngcrush and imagemagick depending on if I upload a png or jpeg file.

I've asked myself how do I address image optimization on my website: do I write my own image optimization plugin? Or do I do something else?

I haven't written PHP in a very long time I don't partially fancy developing a new Wordpress plugin. But it could be nice to make a nice, clean, no fuss plugin available for others to use.

However, I'm leaning towards "something else" and think a more generic solution might be better. i.e. What if I had a small daemon (probably Python, maybe Rust as an excuse to learn it?) to monitor a directory and automatically optimize the images when they're saved. This way no plugin is required and it could be used no matter the blogging engine.

As part of my process of improving the sustainability of the digital things I run, including this blog, I'm moving my servers from Digital Ocean's NYC1 datacenter to their Frankfurt datacenter. The Frankfurt datacenter is co-located at Interxion, and is powered by 100% renewable energy.

Below is a quick overview of the steps required to move your existing droplet to Frankfurt (or London, or Amsterdam) so it can be powered by 100% renewable energy. Including the time to take a snapshot, the process took me about 15 minutes.

For other tips related to improving the sustainability of your sites, read designing sustainable digital products.

1. Update your DNS TTL (Time To Live) Settings

Moving your droplet will mean getting a new ip address. Reducing your DNS' TTL settings prior to moving your droplet will help ensure minimal downtime as DNS servers update their record of your new home. I set mine to 2 minutes.

2. Make a Snapshot of your Server

While Digital Ocean allows you to make Live Snapshots, for anything stateful (like a blog, or application), it's best to shutdown your server before making the snapshot to ensure that no data is missed.

1. Select your droplet in admin console.


2. Select the power sub-menu and click the Turn off button. This takes a minute or two.


3. Once shut down, click the snapshots submenu.


4. Click the take snapshot button. This took about 8 minutes to complete the snapshot.

3. Move Your Snapshot to Frankfurt

By default Snapshots are only available in the region in which they were created. In order to start a new droplet in a different region you'll first need to transfer it.

1. Select the Images menu in the admin console.


2. Find your Snapshot in the list and click the More button.


3. Select Add to region and select "FRA1" for Frankfurt. It should only take a minute or two, depending on the size of your droplet.

4. Create a New Droplet

Create a new Droplet. In first step where you select an image, rather than selecting an operating system, click the snapshots tab and select your new snapshot. Other options should match your existing droplet. Select the region "Frankfurt 1" and finally click Create Droplet.

5. Update DNS

Once your server has been provisioned, you'll see the ip address. Update your DNS records to reflect the new ip. With the lowered TTL settings, it should be near instantaneous. My DNS updated before the server was even finished booting.

6. Confirm it's Working and Delete your Old Droplet

Once the server is online and DNS is updated, you should be able to access it just like nothing has changed. After you've confirmed it's working properly, delete your old droplet so you are no longer charged for it.

I've always enjoyed using Digital Oceanand being able to host with them using 100% renewable energy ensures that I'll be a customer for years to come.

I'm reading Designing for Sustainability: A Guide to Building Greener Digital Products & Services and am about midway through. There's a lot that goes into building a sustainable product and as digital makers, we often don't consider sustainability. Rather we think "hey, I'm saving paper, so this must be more sustainable.", an we're wrong.

The name of the game for digital product sustainability is energy consumption, both to consume and distribute. Improving sustainability isn't just a single task, though some will have a larger impact than others.

What are some ways to improve the sustainability and reduce the environmental impact of your digital products?

Use Renewable Energy

Host with a provider who uses 100% renewable energy. This is getting easier, but is still hard.

This site and Airbot are hosted with Digital Ocean in their NYC1 data center. Within Digital Ocean (or any provider), the power source depends on the data center. This forum post has compiled the power-source information for the datacenters Digital Ocean uses where possible. NYC1 is "light green", which means while the energy from the grid isn't renewable, they are buying green energy credits. Sticking with DO, moving to my hosting to Amsterdam, Frankfurt, or London would reduce the environmental impact of my projects, as they're all powered by 100% renewable energy.

It seems I may have a couple of server migrations in my near future.

Control Content Size

Sustainable digital products are those that can use the least energy. Part of that is hosting, another part is the content itself.

Is your content providing value to your users? Or is it wasting their time, causing them to use their devices longer and consume more energy.

How heavy is your content? How much energy is consumed to get what you've made to your users? Are your sites heavier than they need to be, causing users to transfer more data than necessary.

Don't make a video when a blog post will suffice. Don't say in 5 minutes what can be said in 3.

File size matters. The smaller the file, the less time it takes to transfer, the less energy to deliver it to your users (quite possibly wirelessly), less space to store (thus fewer hard drives, fewer servers) - it all compounds.

That video you made where you're mostly talking? You don't need stereo - mono will suffice, you'll reduce the file size, transfer time, and your users won't notice.

Improve Your Information Architecture

How efficiently can users complete tasks? How much time are users wasting in your product / on your site trying to complete what they're doing. As makers, a sustainable product is one that users can get in, get out, and get off.

• Get In - Your product should be quick to load and easy for users to access.


• Get Out - Helping your users find what they're looking for and accomplish their tasks get out of your product.


• Get Off - Build your product so that it respects your users and doesn't try to suck them in to spending countless hours in your product. More time in your digital product increases needless energy consumption.

Making your digital product sustainable isn't a one time task, but rather an on-going process, much like security, and deserves regular auditing. And just like security audits improve products for the users and business alike, sustainability audits should result in faster, less resource intensive applications, saving money for businesses and happy users.

While many developers don't think of sustainability as applicable to their work today, I hope that more developers realize it is, and that we can make a difference.

One of the common memes to come from covid19 is to post a before-after photo of a famous city or landmark. The before covid19 photo is the city as we’ve become accustomed to it: brown air full of smog. The after covid19 at the same location, but with naturally blue skies and clear air.

With everyone social distancing and automobile/truck traffic near zero we have been given a rare opportunity. We no longer have to imagine what our air and cities could be like if we didn’t drive pollution emitting vehicles everywhere, we can see, taste, and smell it with our own eyes.

Air pollution from cars and trucks have been suffocating our cities slowly, like one boil’s a frog, so we acclimate and brown air becomes “normal” and the way things have always been. With the burner temporary malfunctioning we can see just what a precarious position we’ve put ourselves in.

When this is all done and our lungs have acclimated to clean air we’ll have a choice: do we go back to the way things were and forget what we’ve experienced, or do we the courage to demand a change.

https://twitter.com/sistercelluloid/status/1249027255797460993

I'm thinking of buying a (used) Nissan Leaf to drive around town and have been collecting some facts and figures to see how it compares with other cars here in Japan. I'm leaning heavily towards the leaf for three reasons: it's cheaper to own/operate, no stopping for gas stations (can charge at home), and I don't want pump out CO2 (and think about it) every time I drive.

The data below was written with Emacs Orgmode (using it's fantastic spreadsheet capabilities). As I update my local orgfile, I will also update this page as well and make a small announcement on the blog.

Data Setup

2020/01/06 gas prices source

Running Costs

Common Destinations

Starting location: Home in Yokohama
Routing done via Apple Maps
Costs are 1-way. Train is 1-way, per person, using the route I'd probably take.