Category: Web Dev

At last no more FART Chrome 93+

For those who like to implement both light and dark themes and want to do that in the most optimized way I have good news for you Google Recently implemented in Chrome > 93 the ability to get the user preference using server-side technologies.

Why is that important? Because just in case you didn’t hear the term FART by now it stands for “Flash of inAccurate coloR Theme”, the main issue is that if you don’t know the user preference before sending a response to a request, you can optimally set the user preferred theme.

Why not optimally? Because you either use javaScript and block the main thread to not display an inaccurate color or you determine the theme in an async way and the inaccurate color might show if the user preference is different from the default theme. View full article

AMP was pretty much axed

After a dreaded existence, AMP probably will fade away after June 2021, if I were to predict I’ll say it will stick around for a couple of years but its usage will decrease dramatically, and that because Google will not treat AMP preferentially anymore. That’s mostly because the new June update of the Google search engine will take into account the performance of every website and since AMP was made in order to create lightweight websites.

I never really hated AMP, though from what I’ve seen on Reddit mostly AMP was one of the most hated technologies and it was a bit funny to see so many complain, personally I even contributed to AMP source to the worker-dom / amp-script, added the scrollIntoView, and I also have in the pipeline the refactored implementation for onbeforeunload, that maybe will get merged too when the maintainer will come back to the office. View full article

Load WP post with JS Fetch

If you want to load the post faster you can use JS to fetch your post, but on modern browsers probably preloading pages will be faster, the only drawback of preloading is that you’ll consume storage for your visitors even if they don’t visit the preloaded links, also with preloading links you will consume more bandwidth and resources on the server-side.

So if you want to stick with fetching with JS here is an example, but first, as a note, the example will not use the default REST API mostly because the default API only returns the content title and other attributes of the post and, we want to add things like Yoast data(without making two API request) also, in this case, will transfer some of the article template surrounding the content. View full article

Don’t include external JS for custom content example Goodreads

On many websites, you can have content embedded from other sites and one way that most external sites will offer will be to include a script that’s hosted on their website.

But if all that script does is including some remote content there are better ways to get that, that will provide customizations and performance.

For example, the website Goodreads offers such an embed JS with a list of the latest books you read, and you must include the script where you want the content to be shown. But that has a long list of drawbacks: the script uses the old API document.write, is a script and can’t be loaded in AMP, the scripts write very old style HTML with tags like center, attributes like border which again is not valid AMP, then also that script will be loaded for every request, so you’ll have one additional request. View full article