TIL: Data Attributes are way easier to use than I realized

bryancasler — Fri, 14 Aug 2020 16:44:56 +0000

Today I learned about how "dataset" can be leveraged in Javascript to quickly retrieve a data attribute on an object. Per the MSDN docs, note that dashes are converted to camelCase.

And this approach has 99%+ support in browsers.

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

<script>
const article = document.querySelector('#electric-cars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
</script>

REF: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

TIL: HTML Comments are valid inside Javascript

bryancasler — Sat, 08 Aug 2020 19:07:25 +0000

<script type="text/javascript">
// This is a valid comment
<!-- This is a valid comment too
<!--
function message() {
  alert("Hello World!")
}
//-->
</script>

The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag. - w3schools

REF: https://github.com/denysdovhan/wtfjs#html-comments-are-valid-in-javascript

DEV Community: bryancasler

TIL: Data Attributes are way easier to use than I realized

TIL: HTML Comments are valid inside Javascript