Automated lighthouse score to your PR (with Vercel and Github Actions)

Oskar Ahlroth — Wed, 14 Oct 2020 14:46:48 +0000

Imagine a friendly Github Action bot that adds this to all the PRs (per commit) to your repo:

Green Lighthouse metrics

Web pages with Google Lighthouse metrics that are green (>= 90) tend to be faster, more accessible, and come with a better user experience. If you, as a developer, can help your company improve on these metrics it will directly impact your companies bottom line (+ help with your paid marketing efforts and SEO).

The first step to green Lighthouse metrics is to measure the metrics. Make it easy for you, and your fellow developers, to see how your code changes impact the Lighthouse metrics by including the metrics as a part of your PRs.

Github Action workflow

Get the preview url for the PR (from Vercel).
Run a Lighthouse audit on the preview url with this plugin.
Format the score to a table (+throw in a few emojis).
Post a comment on the PR with the formatted score.

The comment on the PR will be a sticky comment - e.g. if the comment exists update it else add a new comment.

The complete action can be found here here. Feel free to copy paste this action to your repo.

Integrations used:

Not using Vercel?

Update step 1 of the action (and get the preview url from e.g. Netlify or from your own deployment setup)

Limitations:

Always runs the Lighthouse audit on the root page.

Further improvements:

Combine the action with a budget to prevent PRs that bring the metrics below a set treshhold.
Run the audit only on the pages affected by the PR.
Compare the collected metrics with the actual metrics of your production site.

Did this help you out? Like and share the article and follow me on Twitter (i'm building Glitterly - a web based video editor).

FFMPEG: Overlay a video on a video after x seconds

Oskar Ahlroth — Fri, 24 Jul 2020 10:07:31 +0000

I’m currently working on a video editor and there is a feature where you can select a gif from Giphy and overlay it on top of your video after a header transition.

With FFmpeg you can manipulate, combine, add effects with filters. There is a filter called overlay - that we can use.

This did not work as I expected:

To apply a filter after a certain amount of time we'll use the option enable (this option allows for timeline editing).

The below script overlays the gif.mp4 on top of main_video.mp4 during the 1 - 3 seconds duration.

ffmpeg -i main_video.mp4 -i gif.mp4 -filter_complex
  “[0:v][1:v]overlay=enable='between(t,1,3)'[out]”
-map [out] complete.mp4

** [0:v] --> first video (main_video.mp4)
** [1:v] --> the second video (gif.mp4)
** [out] --> first and second video combined into one after the overlay.

Problem: gif.mp4 will start playing from the beginning so after 1 second has passed the gif video will be 1 second in already.

Solution:

Use the setpts filter to delay the overlay video (gif.mp4) start with x seconds.

ffmpeg -i main_video.mp4 -i gif.mp4 -filter_complex
    “[1:v]setpts=PTS-STARTPTS+1/TB[delayedGif];
     [0:v][delayedGif]overlay=enable='between(t,1,3)'[out]”
-map [out] complete.mp4

The setpts filter evaluates its expression and assigns the value as the timestamp for the current frame it is processing. For a detailed explanation check out this awesome post.

For setpts=PTS-STARTPTS+1/TB:
** +1 is the time in seconds we want to delay our offset
** TB is the timebase.

Too see the gif-overlay in action check out Glitterly - a web based video editor I've been working on.

I'm constantly posting more FFmpeg tips and tricks on Twitter (and happy to answer any questions!) - @AhlrothOskar.

DEV Community: Oskar Ahlroth