image img vertical text align center

 <div>

  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

5 star rating in google search (rich results)

https://developers.google.com/search/docs/advanced/structured-data

<script type="application/ld+json">

{

"@context": "https://schema.org",

"@type": "Article",

"provider": {

"@type": "Organization",

"name": "Techdesignism",

"sameAs": "http://www.techdesignism.com/",

"aggregateRating": {

"@type": "AggregateRating",

"ratingValue": "5",

"reviewCount": "1390"

}

}

}

</script>

js check scrolled to bottom

 window.onscroll = function(ev) {

    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

window.scrollTo instant

 window.scrollTo({

                    top: 0,

                    left: 0,

                    behavior: 'instant'

                  });

[fix] iOS browser css :active pseudo styles

iOS is a bit strange on that. You can use ontouchstart as follows:

<button class="button" ontouchstart>test</button>

Or the pseudo :target (works for <a> tags)

.button:target { 
     background-color: red; box-shadow: 0 5px #666; transform: 
     translateY(4px); 
 }

js foreach

 const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

[js] variables in string

const poem = "The Wide Ocean";

const author = "Pablo Neruda";

const favePoem = `My favorite poem is ${poem} by ${author}.`;