robdecker

1. Using parseInt() - slow

parseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is returned.
This method has a limitation though. If you parse the decimal number, it will be rounded off to the nearest integer value and that value is converted to string. One might need to use parseFloat() method for literal conversion.

myString = '129' 
console.log(parseInt(myString)) // expected result: 129

a = 12.22

robdecker

For a quick local server:

npm install browser-sync --save-dev

In package.json:

"scripts": {
  "server": "browser-sync start --directory --server --files '*.js, *.html, *.css'"
}

robdecker

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash; // => "#hash"

robdecker

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

robdecker

Breakpoint & grid system

Uses @include-media and some Bootstrap grid mixins (but has no Bootstrap dependencies).

Example usage

Tiles component

robdecker

{# ~ Core ~ #}
{# {{ dump() }} #}
{# {{ dump(page) }} #}

{# ~ Devel~ #}
{# {{ kint()}} #}
{# {{ kint(page)}} #}
{# {{ devel_dump(page) }} #}
{# {{ devel_breakpoint() }} #}

robdecker

<?php>
function myfunction($app) {
  // ~~ Core.
  // debug($app);
  // dump($app);
  // var_dump($app);

  // ~~ Devel + kint library + settings
  // dpr($app);
  // kint($app);

robdecker

Core

• Internal Page Cache: anonymous users
• Internal Dynamic Page Cache: anonymous and logged in users (includes dynamic content)
• BigPipe
• /admin/config/development/performance: set cache age & css/js aggregation

Contrib

• Advanced CSS/JS Aggregation
• Sessionless BigPipe
• Quicklink

robdecker

• Change records for Drupal core (drupal.org)

robdecker

(function($, Drupal, document, window) {

  /**
   * Prevents the Administrative Toolbar from popping out as a sidebar when
   * screen width is reduced.
   */
  Drupal.behaviors.customToolbarResizeTweak = {
    attach: function (context) {
      window.matchMedia('(min-width: 975px)').addListener(function(event) {
        event.matches ? $('#toolbar-item-administration', context).click() : $('.toolbar-item.is-active', context).click();