HTML Tips and Tricks

https://clrs.cc/

https://blog.teamtreehouse.com/use-details-summary-elements

The <details> element is responsible for marking up all of the content relevant to the particular topic. The <summary> element is used to specify a short piece of text that describes the rest of the content in the <details> element.

If you’d like the widget to be open when the page loads, you can specify the openattribute on your <details> element.

<details open>...</details>

The browser will toggle the open attribute for you as the user opens and closes the widget.

Targeting the details element in your CSS allows you to style all of the content within the element.

details {
    /* Your styling rules. */    
}

If you want to style just the area that opens and closes the widget, you should target the summary element.

summary {
    /* Your styling rules. */    
}

/* Open details element. */
details[open] {

}

/* Summary within an open details element. */
details[open] summary {

}




https://ourcodeworld.com/articles/read/139/all-you-need-to-know-about-conditional-html-comments

Microsoft introduced since Internet Explorer 5 a mechanism called conditional comments which still include the most recent versions , and lets you apply different CSS styles or Scripts depending on the version of the browser.

<!--[if !IE]><!-->

  Any browser except internet explorer

<!--<![endif]-->

https://www.tutorialspoint.com/html/html_base_tag.htm

The HTML <base> tag is used to specify a base URI, or URL, for relative links.

      <base href = "https://www.tutorialspoint.com" />

https://stackoverflow.com/questions/8147376/how-to-insert-a-javascript-textnode-element-on-a-newline

Rendering engines don't consider linefeed and carriage return to be rendered. Better if you use a <br /> like this:

var textNode = document.createTextNode("Node on line 1");
element.appendChild(textNode);

var linebreak = document.createElement('br');
element.appendChild(linebreak);

https://yihui.name/en/2018/11/md-js-tricks/

== is a loose or abstract equality comparison

=== is a strict equality comparison

https://yihui.name/en/2018/09/target-blank/

(function() {
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++) {
    if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
      links[i].target = '_blank';
    }
  }
})();

https://stackoverflow.com/questions/66837/when-is-a-cdata-section-necessary-within-a-script-tag

A CDATA section is required if you need your document to parse as XML (e.g. when an XHTML page is interpreted as XML) and you want to be able to write literal i<10 and a && b instead of i<10 and a && b, as XHTML will parse the JavaScript code as parsed character data as opposed to character data by default. This is not an issue with scripts that are stored in external source files, but for any inline JavaScript in XHTML you will probably want to use a CDATA section.

<script type="text/javascript">
//<![CDATA[
...code...
//]]>
</script>

https://stackoverflow.com/questions/7215547/how-to-update-and-delete-a-cookie

You don't update cookies; you overwrite them:

    document.cookie = "username=Arnold"; // Create 'username' cookie
    document.cookie = "username=Chuck"; // Update, i.e. overwrite, the 'username' cookie to "Chuck"

You also don't delete cookies; you expire them by setting the expires key to a time in the past (-1 works too).

https://www.tutorialrepublic.com/javascript-tutorial/javascript-cookies.php

function createCookie(name, value, expires, path, domain) {
  var cookie = name + "=" + escape(value) + ";";

  if (expires) {
    
    if(expires instanceof Date) {
      
      if (isNaN(expires.getTime()))
       expires = new Date();
    }
    else
      expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);

    cookie += "expires=" + expires.toGMTString() + ";";
  }

  if (path)
    cookie += "path=" + path + ";";
  if (domain)
    cookie += "domain=" + domain + ";";

  document.cookie = cookie;
}

function getCookie(name) {
  var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
  var result = regexp.exec(document.cookie);
  return (result === null) ? null : result[1];
}




• Preload A Webpage to Speed Up Your Website

<script src="//instant.page/1.1.0" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script>

https://www.sitepoint.com/community/t/new-line-in-document-write/1704

document.write/writeln output HTML, not plaintext (into an HTML document, anyway). You know how to do a linebreak in HTML, right? 

<script type="text/javascript">

document.write (
'line1' ,
'<br />' ,
'line2'
);

</script>

https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

https://stackoverflow.com/questions/14481582/how-does-reveal-js-resize-elements

Have you heard of media queries? This is a technique deployed through CSS that allows you to affect the styling of elements based on the width and height of the window. Here is how it's used for reveal.js https://github.com/hakimel/reveal.js/blob/master/css/reveal.css

@media screen and (max-width: 900px), (max-height: 600px) {
    .reveal .slides {
        font-size: 0.82em;
    }
}

@media screen and (max-width: 700px), (max-height: 400px) {
    .reveal .slides {
        font-size: 0.66em;
    }
}

https://medium.com/myplanet-musings/building-a-responsive-reveal-js-theme-399179632cc6

https://stackoverflow.com/questions/17542595/how-to-include-a-script-with-document-write

This happens because the script execution stops at the first found literal </script> tag, no matter if it was enclosed in the parenthesis. You need to obfuscate the ending script tag, for example:

document.write('<script type="text/javascript" src="..."><\/script>');

it's due to the behavior of an interpreter. When ever an interpreter meets an ending script tag, it's interpreted – well – as an ending script tag. That's why an at runtime written ending tag has to look different from the actual ending tag.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

div contenteditable="true">

https://stackoverflow.com/questions/4774022/whats-default-html-css-link-color

The default colours in Gecko, assuming the user hasn't changed their preferences, are:

• standard link: #0000EE (blue)
• visited link: #551A8B (purple)
• active link: #EE0000 (red)

https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:


<div>
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>
Copy
The next step is to add styling to this new wrapper and the iframe within it.


https://github.com/thoughtbot/guides/tree/master/best-practices

• Don't use a reset button for forms.
• Prefer cancel links to cancel buttons.
• Use <button> tags over <a> tags for actions.