| import firebase from "firebase/app"; | |
| import "firebase/auth"; | |
| import { gql, GraphQLClient } from "graphql-request"; | |
| import { SWRConfig } from "swr"; | |
| import create from "zustand"; | |
| import { computed } from "zustand-middleware-computed-state"; | |
| const firebaseConfig = { | |
| // | |
| }; |
| // when T is any|unknown, Y is returned, otherwise N | |
| type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N; | |
| // when T is never, Y is returned, otherwise N | |
| type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N; | |
| // when T is a tuple, Y is returned, otherwise N | |
| // valid tuples = [string], [string, boolean], | |
| // invalid tuples = [], string[], (string | number)[] |
| // re https://stackoverflow.com/questions/62621666/how-can-i-reliably-merge-objects-from-these-2-arrays-and-loop-the-resulting-arra/62623714?noredirect=1#comment110766294_62623714 | |
| function with_nested_for_each([a, b]) { | |
| const result = []; | |
| a.forEach(p => { | |
| b.forEach(q => { | |
| if (p.code === q.code) { | |
| result.push(Object.assign({}, p, q)); | |
| } |
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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.
I'd like to hear how you approach this: @valuedstandards or comment on this gist.
You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':
| var selector = 'img' // Replace this with the selector for the element you want to make transformable | |
| jQuery.getScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', function() { | |
| jQuery.getScript('//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js', function() { | |
| (function() { | |
| var $, applyTransform, getTransform, makeTransformable; | |
| $ = jQuery; |
| /* | |
| * Angular LoadScript | |
| * | |
| * Let angular load and execute lazy javascript from partials! | |
| * | |
| * This module is the result of this issue: "1.2.0rc1 regression: script tags not loaded via ngInclude" | |
| * Issue url: https://github.com/angular/angular.js/issues/3756 | |
| * | |
| * As of Angular 1.2.0 the ngInclude scripts does not permit execution of javascript from included partials. | |
| * This little module execute code inside script tags with "javascript-lazy" attribute after partial loading, |
A quick comparison/ benchmark between Hogan, Dust, doT and underscore
Developed by Twitter (same team as Bootstrap), use exactly the same syntax as Mustache, but more performant and more stuff available server side.
My name is {{ name }}
| (function() { | |
| var CSSCriticalPath = function(w, d, opts) { | |
| var opt = opts || {}; | |
| var css = {}; | |
| var pushCSS = function(r) { | |
| if(!!css[r.selectorText] === false) css[r.selectorText] = {}; | |
| var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/); | |
| for(var i = 0; i < styles.length; i++) { | |
| if(!!styles[i] === false) continue; | |
| var pair = styles[i].split(": "); |
| <!-- | |
| Progressive Disclosure Demo - Updated 15 August, 2012 by Ros | |
| Thank you for taking a look under the hood of our progressive disclosure demo. Please note that this is a work in progress, so it's a tad messy and bound to change. | |
| If you have any questions, feel free to pop a line to support@campaignmonitor.com - we might learn something, too! | |
| Known bugs | |
| ---------- |
