paulirish

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

1. Launch quicktime player
2. do Screen recording

toodooleedoo

###Description Retrieve a Page Object from all pages which are in the Site root then build a breadcrumb component and display the current pages title in a submenu.

###Use case Display a bar under eg a menu which displays the current pages title and functional breadcrumb components o the right.

##Requirements

• Responsive and which works on all mobile devices and desktop.
• Current pages title on the left
• Breadcrumbs on the right

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

paucoma

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

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

siggysamson

(function($) {

	"use strict";

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

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');

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

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