There’s already a better way to do that new thing you just started doing

I love the internet because it’s the most incredible communication tool ever invented. The fact that I can publish an HTML page and anyone in the world with unfettered internet access can read it still amazes me. I also love it because it’s always changing and adapting. Even if you think you’re using the latest, greatest thing, there’s already something new being cooked up. People continuously strive to make things better, and that excites me. It represents humanity at its best.

Modern Web

Modern Web

One of the things I enjoy most about internet technologies is the solutions people create to solve inefficiencies and challenging problems. In the web development world, that means creating custom solutions like libraries, frameworks, and preprocessors.

Custom solutions are workarounds to web standards that don’t exist yet. Lazy loading images is a good example of a custom solution that used to require JavaScript to work. However, now there’s a lazy loading attribute that is part of the HTML Living Standard (aka HTML5). Chrome and Firefox (and soon Safari) will lazy load any image that includes the loading="lazy" attribute.

It can be not easy keeping track of new web standards that replace custom solutions, which is why the Modern Web site was launched. The site is full of guides with standards-based replacements. For example, you may be familiar with CSS preprocessors like LESS and SASS. Modern Web shows you how you can replace it with the more efficient and standardized CSS Custom Properties.

Modern Web covers a wide range of web standards and their primary goal is to get you to work with what’s available in the browser before reaching for a custom solution.

<popup>

Speaking of new standards, a new HTML element called <popup> is being considered. It’s a perfect example of the type of web standards the Modern Web site is attempting to promote.

The <popup> element is intended for action menus, teaching UI, or the listbox portion of a <select> control. Here’s an example of what the HTML would look like if you wanted to display a popup menu associated with a <button>:

<button aria-haspopup="true" aria-controls="menuPopup" id="menuButton">Menu</button>
<popup id="menuPopup" role="menu" anchor="menuButton">
    <!-- Markup for menuitems goes here -->
</popup>

The code would result in a popup menu that might look like this:

Popup Example

Perhaps the most interesting thing about the newly proposed HTML element is that it originated from the Microsoft Edge web platform team.

Death by a thousand poorly designed sites

A UX company subjected people to annoying site issues, like slow loading pages, pop-ups, and autoplay music. They measured the participants’ blood pressure before and after the annoying experiences to determine which issue caused them the most stress.

The issue that won for being the most stressful was slow loading pages. Eric Griffith, the writer who covered the research in PCMag, summarized the results perfectly.

So clearly, if you want to murder someone, find them the slowest webpage full of pop-ups and make them surf.

While it’s probably not that bad, it does show that bad user experience can affect users mentally and physically. It certainly gives credence to the importance of Google’s Core Web Vitals.

Twitter makes progress on creating a decentralized social media standard

On December 11, 2019, Jack Dorsey, Co-founder and CEO of Twitter, posted a surprise tweet announcing Bluesky, an initiative to develop an open and decentralized standard for social media. Very little was said about the project throughout 2020, but on Thursday, January 21, 2021, the Bluesky Twitter account tweeted an update on their progress.

Bluesky released a 61-page Ecosystem Review (PDF). The Review was an overview of the most viable decentralized social network protocols and apps. It listed very few advantages and disadvantages, opting to explain instead how each protocol and app functioned.

Bluesky Ecosystem Review

The document acts as an excellent primer to better understand the decentralized social network ecosystem. The next stage in the project will likely focus on each protocol and app’s pros and cons. It’s possible that if none of the protocols and apps fully achieve their goals, they may create a new solution.