Skip to content

Instantly share code, notes, and snippets.

Avatar
👋
Hello!

John Riviello JohnRiv

👋
Hello!
View GitHub Profile
@getify
getify / 1.js
Last active Jun 25, 2022
tag function for formatting console.log(..) statements
View 1.js
function logger(strings,...values) {
var str = "";
for (let i = 0; i < strings.length; i++) {
if (i > 0) {
if (values[i-1] && typeof values[i-1] == "object") {
if (values[i-1] instanceof Error) {
if (values[i-1].stack) {
str += values[i-1].stack;
continue;
}
@Rich-Harris
Rich-Harris / README.md
Created Nov 24, 2017
how svelte/store could work
View README.md

Bear with me while I think aloud about this (please comment there, not here!). Goals:

  • Minimal boilerplate
  • Familiar API
  • Preserve Svelte's built-in optimisations
  • Support use cases like hot-reloading and custom devtools

Let's start with a single store that is external to the component tree. Our top-level <App> component connects to it:

@slightlyoff
slightlyoff / push_payloads_userland.md
Last active Oct 10, 2020
Delivering H/2 Push Payloads To Userland
View push_payloads_userland.md

Background

One of the biggest missed opportunities thus far with HTTP/2 ("H/2") is that we are not yet able to sunset WebSockets in favor of H/2. Web Sockets and H/2 both support multiplexing messages bi-directionally and can send both textual and binary data.

Server Sent Events ("SSE"), by contrast, are not bi-directional (they're a "server-push-only" channel) and binary data cannot be sent easily. They are, however, very simple to implement. Adding to the menagerie of options, RTCPeerConnection can also be used to signal data to applications in a low-latency (but potentially lossy) way.

Because H/2 [does not support the handshake (upgrade) that WebSockets use to negotiate a connection](https://daniel.haxx.se/blog/2016/06/15/no-websockets-

@kevinpschaaf
kevinpschaaf / 0. Custom Elements + Redux toolbox & examples.md
Last active Jul 21, 2020
Custom Elements + Redux toolbox & examples
View 0. Custom Elements + Redux toolbox & examples.md

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

@samthor
samthor / safari-nomodule.js
Last active Jun 23, 2022
Safari 10.1 `nomodule` support
View safari-nomodule.js
/*
* Copyright 2017 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
@ChadKillingsworth
ChadKillingsworth / e2e-shadowdom.md
Last active Aug 4, 2022
Selenium Testing with Shadow DOM
View e2e-shadowdom.md

End-to-end Testing with Shadow DOM

As the web component specs continue to be developed, there has been little information on how to test them. In particular the /deep/ combinator has been deprecated in Shadow DOM 1.0. This is particularly painful since most end-to-end testing frameworks rely on elements being discoverable by XPath or calls to querySelector. Elements in Shadow DOM are selectable by neither.

WebDriver.io

Webdriver.io has the standard actions by selectors, but also allows browser executable scripts to return an element

View .gitconfig
[alias]
outdated = "!f() { bash -c 'diff -u <(git branch --no-merged master) <(git branch --contains master) | egrep \"^- \"'; }; f"
update = "!f() { set -e; git checkout $1; git rebase master; git push -f origin $1; git checkout -; }; f"
@paulirish
paulirish / what-forces-layout.md
Last active Aug 9, 2022
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
View essential-javascript-links.md
@chrisb
chrisb / gist:4d6a09c6cc1ca2e1b14e
Last active Oct 7, 2021
Homebrew, Ruby, and Rails on OS X 10.10
View gist:4d6a09c6cc1ca2e1b14e

OS X 10.10 Guide

Here's what I did to get things working.

1. Install Xcode 6

Yep, over at: https://developer.apple.com

2. Install the Command Line Tools (CLT)