Deep Dark Blue

This post is to test the lazy loading of iFrames, as noted in this blog post from David Walsh.

I’m first going to just embed a video without the lazy loading:

To make this work, I’m using a HTML block in the WordPress editor so that I can put in the exact iframe copied from YouTube.

Next I’m going to run a couple of speed tests on this published post.

Then, I’ll come back and add ‘loading=”lazy”‘ into the iFrame code and repeat the tests. Let’s see what we learn!

Conclusion

My first lesson was that an IFRAME from YouTube really doesn’t load much in by default. Just a very small web player, image, etc. This makes sense. The larger video is only loaded when the user hits this play icon.

So, in this instance, the lazy loading doesn’t really save that much at all. This would be far more effective with an IFRAME that loaded in a large object of some form.

That said, I did see a very small difference in the before and after tests.

Using WebPageTest.org, the before (i.e. non-lazy-loading) test had a Largest Contentful Paint (LCP) of 1.279 seconds and a total time of 3.034 s.

The test after the change had a LCP of 1.212 s and total time of 3.003 s.

That change is TOO tiny to really be sure it was a result of the lazy loading. It could, quite honestly, be related to latency or the speed of the test platform.

BUT… I also did tests with Firefox’s Developer Tools (the network inspector) on my local system and similarly saw a very small difference between the results before and after.

So it’s something I’ll try to remember when I’m using iframes to embed content from other sites. In other instances, it may make more of a difference.

I’m just experimenting with version 7.1 of the Gutenberg plugin. Released today (Dec 11, 2019), the release notes indicate substantial changes, particularly in the UI.

So this is just an experimental post (because that is what this site is all about!).

Things I am looking forward to over the next few weeks:

• Time with family around the holidays.
• Release of season 4 of The Expanse on Friday, December 13.
• Release of Star Wars IX on Friday, December 20

Sadly, it does not look like the team fixed the issue where you cannot change the text color of List blocks. To be clear, they did NOT say they were going to! I was just wondering if one of the other features would help with that.

Tables

The table functionality keeps getting better and better… although I can’t seem to find the header menu to switch between edit and select tools.

My menu when inside the table does not look like what I see in the Github issue. (Perhaps I have to use a different WordPress theme?)

All in all very cool stuff

I was rather amazed today to discover the <details> element. Where had this been?  Clearly I’ve not been keeping up with the evolution of HTML! 😞

Per the Mozilla documentation of <details>, the element is supported by all modern browsers except Microsoft IE and Microsoft Edge. It does seem that MS is working on adding this to Edge, though.

Hat tip to someone on Mastodon who pointed me to:

• https://codepen.io/jdsteinbach/full/GYmQjo/

This is just  test of using the new Gutenberg editor version 1.6 on my iPad. 

Hmmm… it wouldn’t let me add this text block below the image. I had to move the image to the top, start writing in the text block, separate that into a new block, and then move the text block up on top.

Still, it is pretty cool!

Just testing embedding a YouTube video via the YT embed code:

If you’re looking for something beautiful to have on a monitor or other device in the background of, say, a home office, check out http://palebluedot.io/

It is a live video feed from the International Space Station paired with some ambient / relaxing background music. You can of course turn the music off.

This is a “360 photo” embedded using the latest (4.5) release of the Jetpack plugin:

The image was taken from the top of Aiguille du Midi near Chamonix, France, using the Google Street View application on an iPhone. (There were people moving around and so there are some visual artifacts in here that may be a bit distracting, but you get a sense of what can be done.)

The shortcode I used to embed this image was:

[vr url=”http://deepdark.blue/files/2017/01/Chamonix-360.jpeg” view=360]

Another example of a 360 photo embedded on another site of mine is a church in Helsinki, Finland.

This was the best blue bumper sticker I saw during this election season…

Sometimes the color is in the background…