Skip to content

Instantly share code, notes, and snippets.

@mgol
mgol / jquery-es6-example.md
Last active October 12, 2023 10:34
jQuery ES6 modules example usage

jQuery source is now authored using ES6 modules. It's possible to use them directly in the browser without any build process.

To test it locally, first clone the jQuery repository:

git clone git@github.com:jquery/jquery.git

Then, write the following index.html file:

@jaydenseric
jaydenseric / RouteIndicator.js
Last active November 29, 2023 11:34
A route change indicator for Next.js using React hooks.
import classNameProp from 'class-name-prop';
import { useRouter } from 'next/router';
import React from 'react';
import styles from './RouteIndicator.module.css';
const DONE_DURATION = 250;
export default function RouteIndicator() {
const router = useRouter();
@zevisert
zevisert / all-polymer-builds.txt
Last active January 6, 2019 11:32
Polymer build configs
js.compile: "es2018"
# build name | browser capabilities
"2018-psm" | ["es2018", "push", "serviceworker", "modules"]
"2018-ps" | ["es2018", "push", "serviceworker"]
"2018-pm" | ["es2018", "push", "modules"]
"2018-sm" | ["es2018", "serviceworker", "modules"]
"2018-s" | ["es2018", "serviceworker"]
"2018-m" | ["es2018", "modules"]
"2018-p" | ["es2018", "push",]
"2018-0" | ["es2018"]
@akc42
akc42 / custom-input.js
Created January 4, 2019 16:52
Custom Input using Decorator Pattern.
import { LitElement, html } from '../../node_modules/@polymer/lit-element/lit-element.js';
import {ifDefined} from '../../node_modules/lit-html/directives/if-defined.js';
import {classMap} from '../../node_modules/lit-html/directives/class-map.js';
import {render} from '../../node_modules/lit-html/lib/shady-render.js';
let inputCounter = 0;
class CustomInput extends LitElement {
static get properties() {
return {
function Mutilator(data, name, context) {
this.n = name || `mutilation-${+new Date()}`;
this.d = data;
this.c = context || window;
this.isArr = function(p) {
return this.d[p].constructor == Array;
};
this.dispatch = function(p, v, t) {
this.c.dispatchEvent(
new CustomEvent(this.n, {
@Dabolus
Dabolus / Deploying PWA Starter Kit to Firebase.md
Last active June 26, 2020 01:39
A simple guide that explains how to deploy PWA Starter Kit to Firebase

Note: this guide explains step by step how to add Firebase to PWA Starter Kit.

If you already have some Firebase knowledge and you just want to get everything ready out of the box, you might want to checkout the Firebase branch on the PWA Starter Kit repo, that already contains all the needed files.

Deploying prpl-server to Firebase

Firebase Hosting alone is not sufficient for hosting the prpl-server build since it requires some server-side processing of the user agent string. Instead, you will have to use Firebase Functions for that.

  1. Sign up for a Firebase account
@jackrugile
jackrugile / calc.js
Last active January 8, 2019 15:38
Some common calculation helpers I use in a lot of my demos and games.
class Calc {
/*
------------------------------------------
| rand:float - returns random float
|
| min:number - minimum value
| max:number - maximum value
|
| Get a random float between two values
@AdaRoseCannon
AdaRoseCannon / HTMLElementPlus.js
Last active March 3, 2023 11:33
HTML Element Plus for Web Components
'use strict';
class HTMLElementPlus extends HTMLElement {
static defaultAttributeValue() {
/* the name of the attribute is parsed in as a parameter */
return;
}
static parseAttributeValue(name, value) {
@kevinpschaaf
kevinpschaaf / 0. Custom Elements + Redux toolbox & examples.md
Last active July 21, 2020 06:48
Custom Elements + Redux toolbox & examples

An approach to binding Redux to custom elements

The code here captures some of the patterns I used in the "real estate" demo app discussed in my talk End to End Apps with Polymer from Polymer Summit 2017.

There are many ways to connect Redux to custom elements, and this demonstrates just one pattern. The most important aspects are to try and lazily-load as much of the otherwise global state management logic along with the components that need them (as shown via the lazyReducerEnhancer and addReducers calls in the connected components), and to consider the tradeoffs you make in terms of coupling components to the store.

The pattern shown here of creating a stateless component and then a subclass that connects it to the store addresses a potential desire to reuse app-level stateless components between more than one application context, so the subclass provides a degree of decoupling from the concrete store, at the expense of more boilerplate. If app com