Short Answer Add the image’s native width and height in pixels as attributes on the image. This lets the browser calculate the aspect ratio for the image. <img width=”600″ height=”400″ src=”some-image.webp”/> Long Answer width: 100% does not give an element an explicit width. What it does is define the width relative to it’s parent container. … Read more
There was a long thread on this topic in https://github.com/jquery/jquery/issues/2871 in 2016 In short: jQuery can’t add support to passive listeners. Is expected that this is added in jQuery 4 (4 years and still in 3.5.x) The proposed fix is to add this code right after jQuery load: jQuery.event.special.touchstart = { setup: function( _, ns, … Read more
The correct way to preload a font would be by adding both a preload link and a stylesheet. A simplified example, based on MDN is as follows: <head> <meta charset=”utf-8″> <title>Preloading fonts</title> <link rel=”preload” href=”https://fonts.googleapis.com/css?family=Roboto&display=swap” as=”style”> <link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto&display=swap”> </head> <body> </body> In the above example, the preload link will send a request to fetch … Read more
For accessibility reasons (required for screen readers) links must contain a text or have description in aria-label attribute. In many use cases like yours you don’t want to add any text in a link, but instead use as image or any graphic element wrapper. Fix it by adding aria-label=”Twitter” to your a element, like <a … Read more