Around the Frontend World, vol. 16

Zed: An Innovative Platform for Web App Development

Do you still remember PSPad or Notepad++? Many of us got our start on these tools. Either way, the eternal battle between IDEs has a new contender, and it looks like it's ZED. For now, Apple users only.

What is ZED?

In short, it's an editor focused on productive development. It offers a comprehensive set of tools that let you work faster and more efficiently. Zed supports GitHub Copilot and GPT-4, which you can use for things like generating or refactoring code.

Collaboration between teams

It's also worth mentioning the ability to connect multiple developers over a shared workspace. Channels for discussions, planning, or writing software together as a team work like a virtual office, which is an indispensable tool these days.

Working with code

Being able to work with code from any computer is another great feature of this tool, which your colleagues will surely appreciate if you're not sitting in the office with them right now. Actually, they'll appreciate it even when you are, but you just don't feel like turning around. 😃

What to say in closing? Describing every neat feature would be an article in itself, but for now ZED is in testing mode for us. Personally I'm sticking with VS Code, and I probably won't get too excited about a new editor, but ZED is definitely worth at least a mention.

Tips and tricks for the INP metric

Google announced changes to the Core Web Vitals metrics for March 12, so here are a few tips for improving the INP (Interaction to Next Paint) metric. It's new in CWV and measures how quickly a website responds to a user's action.

Delay loading the mega menu

Some e-shops suffer from this problem, where the mega menu has so many items that your mouse battery runs out while you're scrolling to the end.

Something like that can hurt your INP metric. Yet it takes so little to fix – try loading the items gradually via AJAX instead.

Intersection Observer

Another quick fix is to disable any unnecessary widgets while the page's first viewport is loading. Have you heard of Intersection Observer? It makes it easy to trigger a widget only once it's actually in the viewport.

Using CSS instead of the dotdotdot JS plugin

Essentially similar is running the same JavaScript function repeatedly on every page, typically something like the dotdotdot plugin. If you're still using it, get rid of it as soon as possible and rewrite your text truncation using the CSS property text-overflow: ellipsis or line-clamp.

Tracking codes

Tracking codes are a whole topic on their own. Here's just the short version: whatever you can defer – defer it. 😃

Optimal target area size for elements

To give users the best possible experience on your website, it's essential to optimize the size of the target area – the spot users click on.

A study by Ahmad Shadeed points out that target areas that are too small can be frustrating for users, especially on mobile phones. On the other hand, target areas that are too large can cause accidental clicks and worsen the overall user experience. The author therefore created an extensive guide on how to approach the whole issue.

Also very interesting is the site's hands-on examples.

The composedPath() method

It's not exactly new, but the composedPath() method isn't used all that often, which is a shame in many ways.

What's it for?

This method returns an array with the path from the document root to the DOM elements affected by an event. The path consists of every element the event passed through on its way to the target element.

Getting the correct path

Sometimes it can be hard to figure out which DOM elements were involved in an event's propagation, especially with a complex DOM structure on the page or when some elements are nested inside a shadow DOM.

Fixing bugs

The composedPath() method offers a simple way to get the complete path of a given event, which helps with debugging and fixing bugs.

How to use composedPath()?

// Funkce pro zachycení outside click události
function handleOutsideClick(event, target, callback) {
	// Získání cesty kliknutí
	const path = event.composedPath();
	// Zjištění, zda bylo kliknuto uvnitř node
	const isClickInside = path.some(node => target.contains(node));
	if (!isClickInsideModal) {
		// Volání zadaného callbacku při kliknutí mimo
		callback();
	} 
}

A subgrid example for aligning heading heights

Jozef also mentioned subgrid last time in Frontend News, and today we're bringing you an example of how we use grid-template-rows: subgrid to align heading heights. And since code says more than a thousand words, here it is: