HTML

• Common HTML entities:

  Character	Code
  <	&lt;
  >	&gt;
  &	&amp;
  {	&#123;
  }	&#125;

• mark element

  • Valid use to highlight text search results.
  • Can be stuled via CSS.

CSS

• Word wrap long words in div

  div { white-space: break-spaces; word-break: normal; overflow-wrap: anywhere; }

  • Stack overflow
  • MDN word-break
• List bullet styling: list-style-position

JS, jQuery

• It is NOT possible to wrap an async function to make it synchronous. Once async, it’s async all the way.
• jQuery.get(url [,data] [,success] [,dataType])
• Scrolling to top/bottom of divs
  • Top: $('div').animate({scrollTop: 0}, animation_ms);
  • Bottom: $('div').animate({scrollTop: $("div").prop('scrollHeight')}, animation_ms);
  • Apparently animation is required, as scrolling does not work properly without it. Set animation_ms to a low value (say, 10) to make it look instantaneous.
• If .next() element is the .last() element?: $('elem').next().is($(elem).last());
• MDN: Key values for keyboard events
• Case-insensitive replaceAll(): string.replaceAll(new RegExp('pattern', 'ig'), 'replacement_str')
  • To replace with the original pattern (for example, highlighting matching text): string.replaceAll(new RegExp('('+pattern+')', 'ig'), '$1')
    • $N represents matching captured pattern, as with regular regexp usage in other languages.
• delay()ing

  function delay(callback, ms) { var timer = 0; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function () { callback.apply(context, args); }, ms || 0); }; } // Example usage: $('#input').keyup(delay(function (e) { console.log('Time elapsed!', this.value); }, 500));

Jekyll, Liquid

• Liquid documentation
• Liquid version of array_exists(): contain, like: array contains element
• sitemaps.xml without Jekyll plugin
• Listing all collections

  {% for collection in site.collections %} <h2>Items from {{ collection.label }}</h2> <ul> {% for item in site[collection.label] %} <li><a href="{{ item.url }}">{{ item.title }}</a></li> {% endfor %} </ul> {% endfor %}

• Showing Jekyll code in Jekyll

  {%raw%} // Your Jekyll code here {%endraw%}

Markdown

• Table

  |----------|----------|----------| | Header 1 | Header 2 | Header 3 | |----------|----------|----------| | R1C1 | R1C2 | R1C3 | | R2C1 | R2C2 | R2C3 | |----------|----------|----------|

Comments

None.