Native accordion experience

If you want to give Accordion experience to your users, there is a native HTML element which you can use. The details container holds the summary and overall descriptions needed. On clicking the summary element on the page, you could see the overall details showing up. Now add styles to this to bring the best experience.

<details>
  <summary>Click me</summary>
  This is some hidden content.
</details>

Showing code on page

We know HTML ignores white spaces, line breaks in the content. So, how do we display code that has text formatting? Use pre Element!

<pre>
  <code>
    function sample() {
      console.log("example of code");
    }
  </code>
</pre>

Secure environment for iframe

Did you know you can use sandbox attribute on iframe to restrict access and create a secure sandbox environment for any executions in the browser context of that?

<iframe
  src="https://sample.com"
  sandbox="allow-same-origin allow-scripts"
></iframe>

Stop translate?

Did you know you can prevent browser from translating content inside an element by saying no to translate attribute

<p translate="no">This content should not be translated.</p>

Want to break URL into multiple lines?

This is a funny usecase. We know of long urls. When getting wrapped, they might move to next line at various positions that make reading them difficult. How do we make them to look good when getting wrapped? We use wbr element.

https://www.example.com/<wbr />long/url/with/line<wbr />breaks.html

Will share some more, as I keep learning! Have fun!