developit

webpack-plugin-modern-npm

Automatically transpile modern packages in node_modules.

Available in 3 fun flavours: plugin, loader and loader factory.

Plugin

Add the plugin to your webpack config, and it should handle everything for you.

hybrist

Modules - History & Future

History

• Early work by Ihab Awad (Google) and Kris Kowal (FastSoft)
  • https://twitter.com/kriskowal/status/943547614158450688
  • Hermetic eval presentation: https://docs.google.com/presentation/d/1KlPxgocvzpTq44KTF4xZ6TnzGRsy628hP5he7bXVB3I/edit#slide=id.i0
• 2009-09: 2nd draft of module strawman, still very close to "closures as modules", export x = 42
  • https://esdiscuss.org/topic/hermetic-evaluation-modules-strawman

• https://docs.google.com/document/u/1/pub?id=1hNv1SHh_v_6nD1QBd6pySUJ2U5roAELzW5cqD2tt_WM

notTag

#---------------GitHub Pages + Namecheap Domain + SSL Cheat Sheet------------#

NOTE: You do NOT need to buy PositiveSSL from Namecheap.
	GitHub Pages provides free SSL automatically via Let's Encrypt.

# Namecheap Domain Setup
	Buy Domain
		Go to namecheap.com, select and buy domain name.
	Navigate to DNS Settings
		Login to Namecheap → Username dropdown → Dashboard

kevinweber

<alignment jcr:primaryType="nt:unstructured"
    name="./alignChildren"
    fieldLabel="Alignment of components"
    required="{Boolean}true"
    selectionMode="single"
    sling:resourceType="granite/ui/components/coral/foundation/form/buttongroup">

    <items jcr:primaryType="nt:unstructured">
        <default jcr:primaryType="nt:unstructured"
            name="./default"

nateyolles

var $input = $('.my-input-field'),
    errorMessege = 'This field is required';

if ($input.willValidate()) {
  $input.checkValidity();                     // true
  $input.validationMessage();                 // ''

  /* Set input field as invalid */
  $input.setCustomValidity(errorMessage);
  $input.checkValidity();                     // false

vasanthk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

nateyolles

/**
 * Granite UI Multifield adapter
 *
 * Has improved setDisabled method which disables all form input fields, the
 * delete buttons, the reorder buttons and the add button within the Multifield.
 * The adapter also contains a new method to enable and disable just the add
 * button which can be used to limit the size of the multifield.
 *
 * Usage:
 * var field = $('.coral-Multifield').adaptTo('nateyolles-field');

siggysamson

(function($) {

	"use strict";

	// Create the defaults once
	var pluginName = "defaultPluginName";
	var defaults = {
		propertyName: "value"
	};

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

paucoma

  const gblFrom = {
    year : 2020 ,
    month : 3,
    day : 29,
    hour : 0
  };
  const gblTo = {
    year : 2020 ,
    month : 8,
    day : 1,