DEV Community: Dan Bamikiya

The real image tag: vs

Dan Bamikiya — Thu, 17 Feb 2022 12:26:23 +0000

The image tag is used to tell the web browser to display an image.
It is usually written as <img /> and can have attributes such as (but not limited to) src - used to specify the path to the image, alt - holds a text description of the image, important for accessibility, width - the intrinsic width of the image(in pixels).

Now you're wondering what about the <image /> tag right? Well the image tag is (or was) used to display images also! But its infact not an HTML element!(as written in the spec):

Browsers alias it to the <img> element but differently;

Firefox aliases it during parse time;
Chrome & Safari aliases it during element-creation time;
IE (Internet Explorer) aliases it throughout runtime;

as seen in the html parsing spec:

https://html.spec.whatwg.org/multipage/parsing.html

So you can use it in your code and the browser will do what needs to be done(convert it to <img>) and process your code but is it valid HTML? No.

Well what about its behaviour during DOM manipulation?

Assigning its src value the path to an image:



document.querySelector('image').scr  = 'https://source.unsplash.com/random/150*150';

doesn't work in Edge, Chrome, & Firefox but works in IE.

Creating the element and appending it to the DOM:



const image = document.createElement('image');
image.src = 'https://source.unsplash.com/random/150*150';
document.body.appendChild(image);

Edge & Chrome & Firefox treats it as an unknown element and doesn't load the image but it works in IE.

So the real image tag is the <img> tag and the <image> tag is a tag that browsers aliases to <img> element.

My First Contribution to the Kubernetes Project ♾

Dan Bamikiya — Fri, 22 Oct 2021 10:24:23 +0000

My first contribution to the Kubernetes project got merged on Github! 😁

What did I do 🤷‍♂️?
I contributed to the Kubernetes Dashboard repo. The Kubernetes Dashboard is a web-based UI for managing Kubernetes applications running in Kubernetes clusters and troubleshooting them. As well as managing the cluster itself.

The web-based dashboard which is built with Angular and TypeScript still had external referencing HTTP links even for ingress host URLs in the ingress lists which is a bad security practice for web apps.

I converted the HTTP links to default HTTPS links making any referenced external link direct users to secure website URLs!

Felt great! 😊

A quick note on performance:

Dan Bamikiya — Mon, 01 Mar 2021 20:54:03 +0000

We use display: none instead of opacity: 0 to hide elements/ implementation details.
But opacity is a better choice for performance because it is one of the things the browser can use the GPU to animate, a process known as hardware acceleration.
Using the GPU leads to smoother animation as the browser does not have to re-paint the areas of the screen that are animating. Instead, the browser paints the elements to be animated to "layers" that are uploaded to the GPU, which it can then animate.
Note that the browser doesn't always create new layers for the GPU when you want it to, so you can force it to do so by setting certain properties like backface-visibility (old) or will-change.

Examples where you might use will-change:

Where you have an element whose transform property is used to animate or add some sort of effect adding will-change: transform tells the browser this property of the element will change in the near future then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens.
will-change: opacity
will-change: scroll-position
will-change: contents (something about the element’s contents will change in the near future).

Having said these there are few caveats to using will-change:

The browser already tries as hard as it can to optimize everything so do not apply will-change to too many elements.
Will-change is intended to be used as something of a last resort, in order to try to deal with existing performance problems. Don't apply will-change to elements to perform premature optimization. :)

With this relatively short post I hope I've been able to add to your wealth of knowledge! :)

To know more about the will-change property visit MDN