3.23 Take Advantage of Native Features

Ensuring that your code is free of redundancy by using pre-existing functionality provided by the web browser is important as it will help you to reduce the amount of time wasted, re-creating the same components, this offers obvious sustainability benefits in terms of time in front of the screen.

Criteria

Native Over Custom: Use native functions, APIs, and features over writing your own.

Impact

Medium

Effort

Low

Benefits

Environmental:
Avoiding repetition of pre-existing features improves efficiency, which ultimately will lead to less redundancy, less development time, and thereby emissions saving for the construction of the product or service.
Performance:
Native features will have been well optimized, it’s unlikely a custom component will match this, therefore a native function will not only load quicker but will use fewer resources.
Economic:
Existing features don’t require additional development time, so is a time saver.

GRI

materials: Medium
energy: Medium
water: Medium
emissions: Medium

Example

Code:

<button onclick="window.dialog.showModal()">open dialog</button>
<dialog id="dialog">
	<p>I'm a dialog.</p>
	<form method="dialog">
		<button>Close</button>
	</form>
</dialog>

HTML [dialog] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) API example.

Resources

View the Guideline