3D Ken Burns Effect from a Single Image

Nice research by Simon Niklaus, Long Mai, Jimei Yang and Feng Liu:

In this paper, we introduce a framework that synthesizes the 3D Ken Burns effect from a single image, supporting both a fully automatic mode and an interactive mode with the user controlling the camera. Our framework first leverages a depth prediction pipeline, which estimates scene depth that is suitable for view synthesis tasks.

You can see the result in action starting at 0:30.

3D Ken Burns Effect from a Single Image →

🤔 I’m wondering how this will stack up against Apple’s “Portrait Mode” photos, as those photos already contain depth information.

Making Instagram.com faster

Over the years Instagram (as a product) grew a lot. With more features to show, their web experience began to degrade. In a series of (upcoming posts) they’re covering what they have done to improve performance. In this first part they cover script preloading and image prefetching, reducing the loading time of the “feed page” by 50%.

Correctly prioritizing resource download and execution and reducing browser downtime during the page load is one of the main levers for improving web application performance. In our case, many of these types of optimizations proved to be more immediately impactful than code size reductions, which tended to be individually small and only began to add up after many incremental improvements.

Making Instagram.com faster →

Button Placement in Forms

Button placement on forms is often ignored or prioritised based on what looks good.

But button placement can make or break a form, and a form can make or break a user’s experience. That’s why it’s essential to get it right.

Here I’ll explain where to put buttons across a range of different forms based on research and best practice.

Where to put buttons on forms →

🤔 I found this one highly interesting to read as I tend to do the exact opposite when it comes to placing buttons. Inspired by macOS I place the primary button on the right, the secondary button to the left of the primary one, and the cancel option at the very left.

I’m wondering what Johan (Interface Designer) and Roel (Digital Accessibility Nerd) their take is on this …

The Director’s Chair: Wes Anderson

Being a big fan of his work, I enjoyed this episode of The Director’s Chair featuring Wes Anderson:

In this episode of The Director’s Chair, we take Wes Anderson interviews so that he can explain his unique style and dive into the Wes Anderson aesthetic.

The contents are summarised into 5 topics:

  1. Pull from your past
  2. Build a world
  3. Precision & symmetry
  4. Find your spark
  5. Just go shoot

✂️ Precision & Symmetry (cfr. topic 3)? Check out Wes Anderson Centered which highlights this.

🎬 Fan of filmography? all posts tagged Wes Anderson here on bram.us are worth of your time.

Clicking Buttons: Inconsistent behavior across browsers

Great research by Zell Liew:

I noticed browsers were inconsistent in how they handle a click on <button>. Some browsers choose to focus on the button. Some browsers don’t.

In this article, I want to show you my test and findings. Then, I want to talk about a way to overcome these inconsistencies.

Great to see all those illustration gifs to show what’s going one. Must’ve taken a ton of work to create them all.

Inconsistent behavior among browsers when clicking on buttons →

Auto Reframe in Premiere Pro

Nice new feature coming to Adobe Premiere Pro:

Powered by Adobe Sensei machine learning technology, Auto Reframe seamlessly adjusts aspect ratios such as square, vertical or 16:9 video to help improve time-consuming manual video resizing.

Adobe Blog: Get to the Finish Line Faster →

Logical Operations with CSS Variables CSS Custom Properties

Going beyond Binary Conditions for CSS Calculations, Ana Tudor takes it to a whole new level by introducing the logical operations (and, or, nand, nor, not, and xor) to CSS — all built on top of calc()

Very often, while using switch variables, I wish I could perform logical operations on them. We don’t have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function.

Impressive!

Logical Operations with CSS Variables →

☝️ FYI: They’re officially called “CSS Custom Properties”, not “CSS Variables” 😉

The Lean Web

Free book by Chris Fernandi:

The web is a bloated, over-engineered mess. And, I believe many of our modern “best practices” are actually making the web worse.

In this book, I want to share some ideas on how to fix it, and explore a new set of best practices to replace what we do today.

(The alternate title for this book is “Old man yells at cloud.”)

/me nods along

If you want, you can also watch a recording of a talk by Chris covering the same contents:

The Lean Web →

As mentioned before, here’s a related quote by Derek Featherstone:

In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works.

Today I Learned, the Google Cloud Platform / Terraform Edition

🌍 This week I’ve been goofing around with Google Cloud Platform and Terraform to manage it. I’ve learned quite a few things, that might be of help to others, so here goes …

There’s a difference between IAM policy for service account (google_service_account_iam) and IAM policy for projects (google_project_iam_member).

The former is used to allow other users to impersonate/control a certain Service Account, the second is used to define what a Service Account can access and do.

Should’ve RTFM‘d

~

To apply IAM Policies onto a Service Account the invoker needs the “Project IAM Admin” (roles/resourcemanager.projectIamAdmin) role. If not you’ll get back a 403:

returned error: Error applying IAM policy for project "my-project": Error setting IAM policy for project "my-project":
googleapi: Error 403: The caller does not have permission, forbidden

~

There’s a bug in Terraform which prevents terraform apply from setting IAM Roles when you have a Service Account or User with an uppercase character in their e-mail address (e.g. [email protected]).

Terraform will automatically convert all e-mail address to all-lowercase variants (e.g. [email protected]). Therefore GCP’s Resource Manager won’t be able to apply the policies as the Rresource does not exist. Accounts that inherit access to the project are not affected.

The error you get back is quite obscure:

returned error: Error applying IAM policy for project "my-project": Error setting IAM policy for project "my-project":
googleapi: Error 400: Request contains an invalid argument., badRequest

To see whether you have such a conflicting user, check the output of gcloud projects get-iam-policy PROJECT-ID

~

You can partially apply a Terraform State by using Resource Targets. You need this, for example, when storing secrets onto Google Cloud Platform: as you rely on a keyring+keycode to store the secrets, and you need encrypted secrets for your services you can’t apply the whole thing at once, as you need the keyring/keycode to be available before you can generate encrypted secrets from plaintext strings.

To solve this:

  1. Run Terraform to only target the google_kms_key_ring and google_kms_crypto_key resources:

    terraform apply -target=google_kms_key_ring.my_key_ring -target=google_kms_crypto_key.my_crypto_key
  2. Generate your secrets and store them in the keyring using helper scripts such as gcloud-kms-scripts which I created just for that.
  3. Use the encrypted secrets in your .tf files
  4. Run terraform apply as you’d normally do

~

Applying IAM Policies to a newly created Service Account won’t always work, as it takes some time before the SA is available for use. There’s a workaround in which you trigger a sleep command using local-exec, yet I’m hoping that this will be solved in a future release of Terraform (perhaps with a delay Terraform Resource?).

resource "null_resource" "before" {
}

resource "null_resource" "delay" {
  provisioner "local-exec" {
    command = "sleep 10"
  }
  triggers = {
    "before" = "${null_resource.before.id}"
  }
}

resource "null_resource" "after" {
  depends_on = ["null_resource.delay"]
}

~

It’s possible to impersonate a Service Account from within your Terraform code. First you connect using your main account, and then generate a short lived token for the SA. From the Terraform docs I got this snippet:

provider "google" {
    scopes = [
    "https://www.googleapis.com/auth/cloud-platform",
    "https://www.googleapis.com/auth/userinfo.email",
  ]
}

data "google_service_account_access_token" "default" {
 provider = "google"
 target_service_account = "[email protected]"
 scopes = ["userinfo-email", "cloud-platform"]
 lifetime = "300s"
}

data "google_client_openid_userinfo" "me" { }

output "source-email" {
  value = "${data.google_client_openid_userinfo.me.email}"
}

provider "google" {
   alias  = "impersonated"
   access_token = "${data.google_service_account_access_token.default.access_token}"
}

data "google_project" "project" {
  provider = "google.impersonated"
  project_id = "target-project"
}

Due to the provider = "google.impersonated" part, the google_project will run as [email protected]

~

That’s it! I hope these might have been of help to you, saving you some lookup work …

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)