Eric / Brooklyn

Visual

Blog Index

Random 5

Stripe and Tap

Multi-tab Websockets

Ruby vs. Ruby

Cookies

Web Accounts

Emoji Bits

Honeypot Bots

Bad Content

JS Data Chutzpah

Sendgrid Ban

Clean URLs

Git

Concerns

Rails UJS

Extending Devise

ENV Variables

See All

Data Attributes and Javascript Punctuation

August 2020

Data Attributes are useful in the year 2020.

They gives us greater flexibility when we interact with the DOM. Instead of the usual ids, classes, and HTML elements, we can use custom data attributes.

An example.

We have a list of users on the side of a chat app — i.e. a buddy list.

We need to update this buddy list depending on what happens elsewhere on the application. Let’s say jimmy2020 goes offline, we’ll want to tell his friend erica123 (by updating her buddy list).

If we give jimmy2020 a data attribute like data-username="jimmy2020" we can use javascript to find him in the DOM and do what we need.

Javascript Chutzpah

Let’s assume we have jimmy2020 saved in a variable username in our javascript, and we want to find him in the DOM.

document.querySelector(`[data-username="${username}"]`)

And unpack the syntax.

In this single line of code, we have:

  • parens
  • back-ticks
  • square brackets
  • hyphen
  • equals sign
  • double quotes
  • dollar sign
  • squiggly brackets

If you know some javascript, this may seem pretty intuitive, but for everyone else, not so much.

We’re just trying to select a measly little element in the DOM, and our brains need to care about the nuanced behaviors of these little characters.

Parens

document.querySelector(`[data-username="${username}"]`)

document.querySelector is a function that takes an argument, and function arguments live inside of parens.

This function takes a string as an argument that selects some element in the DOM. This looks like the kind of stuff that you’d use to select HTML in your CSS. Just remember that it needs to be a string.

Back-ticks

document.querySelector(`[data-username="${username}"]`)

Our single argument lives inside of back-ticks. Back-ticks are functionally similar to single quotes, or double quotes.

And this argument needs to be a string, so backticks seem reasonable.

But beyond reasonable, they are necessary, because of their 1 main difference from or — if you want to use string interpolation inside of them.

In other words, if you want to reference a variable inside of a string, use backticks, which we’ll be doing in a second.

Square brackets

document.querySelector(`[data-username="${username}"]`)

Square brackets are used to target data attributes, in Javascript, or in CSS. These are just the rules.

Hyphen

document.querySelector(`[data-username="${username}"]`)

Multi-word selectors require hyphens! Not underscores, not camel case, not title case.

Double Quotes

document.querySelector(`[data-username="${username}"]`)

As we mentioned before, the argument inside of querySelector needs to be a string, but so does the value of the data-username.

So we have a string inside of a string. If we tried to use backticks, it would prematurely close the initial string, so we have to use something else that represents strings, and double quotes will do the trick.

Dollar Sign / Squiggly Brackets

document.querySelector(`[data-username="${username}"]`)

The dollar sign / squiggly bracket combination is what allows us to reference a variable inside of a string. This is string interpolation in Javascript!

Conclusion

The end.