Skip to content

Instantly share code, notes, and snippets.

View robert-moore's full-sized avatar

Rob Moore robert-moore

View GitHub Profile
/* sidenotes.js: standalone JS library for parsing HTML documents with Pandoc-style footnotes and dynamically repositioning them into the left/right margins, when browser windows are wide enough.
Sidenotes are superior to footnotes where possible because they enable the reader to immediately look at them without requiring user action to 'go to' or 'pop up' the footnotes; even floating footnotes require effort by the reader.
sidenotes.js is inspired by the Tufte-CSS sidenotes (https://edwardtufte.github.io/tufte-css/#sidenotes), but where Tufte-CSS uses static footnotes inlined into the body of the page (requiring modifications to Pandoc's compilation), which doesn't always work well for particularly long or frequent sidenotes, sidenotes.js will rearrange sidenotes to fit as best as possible, and will respond to window changes.
Particularly long sidenotes are also partially 'collapsed'.
Author: Said Achmiz
2019-03-11
license: MIT (derivative of footnotes.js, which is PD)
*/
@numb3r3
numb3r3 / Dockerfile
Created April 15, 2020 02:52
Dockerfile for autoflip
# Copyright 2019 The MediaPipe Authors.
#
# 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
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
@slava-vishnyakov
slava-vishnyakov / readme.md
Last active April 12, 2024 06:24
How to upload images with TipTap editor
  1. Create a file Image.js from the source below (it is almost a copy of Image.js from tiptap-extensions except that it has a constructor that accepts uploadFunc (function to be called with image being uploaded) and additional logic if(upload) { ... } else { ... previous base64 logic .. } in the new Plugin section.
import {Node, Plugin} from 'tiptap'
import {nodeInputRule} from 'tiptap-commands'

/**
 * Matches following attributes in Markdown-typed image: [, alt, src, title]
 *
<button onclick="recordStop()" id="record-stop-button">Record</button>
<button onclick="playAudio()" disabled id="play-audio-button">Play</button>
<script>
const recordAudio = () =>
new Promise(async resolve => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", event => {
@adrianhall
adrianhall / AppSyncAPI.yaml
Last active March 19, 2023 14:57
A CloudFormation template for DynamoDB + Cognito User Pool + AppSync API for the Notes tutorial
---
Description: AWS AppSync Notes API
Parameters:
APIName:
Type: String
Description: Name of the API - used to generate unique names for resources
MinLength: 3
MaxLength: 20
AllowedPattern: '^[a-zA-Z][a-zA-Z0-9_]*$'
@Paradoxis
Paradoxis / findReplace.js
Created July 4, 2016 10:23
Find and replace double curly braces in JavaScript, example: findReplace("Hello, {{ name }}", "name", "John"); // "Hello, John"
/**
* Format double braced template string
* @param {string} string
* @param {string} find
* @param {string} replace
* @returns {string}
*/
function findReplaceString(string, find, replace)
{
if ((/[a-zA-Z\_]+/g).test(string)) {
@ThomasBurleson
ThomasBurleson / BarChart.js
Last active October 9, 2019 15:13
Reusable Chart component for D3 - using prototypes and factories
(function() {
// Based on article @ http://www.toptal.com/d3-js/towards-reusable-d3-js-charts
// Publish a factory method for Chart instances
// @usage:
// var runningChart = BarChart.instanceOf( {barPadding : 2 } );
// var weatherChart = BarChart.instanceOf()
// .fillColor('coral');
window.BarChart = {
@robert-moore
robert-moore / README.md
Last active January 17, 2021 08:38
A New Pattern for Updatable D3.js Charts

Using a new updatable chart format. Update functions are made accessible to the caller, handing over chart controls with full functionality to the caller in a modular manner. Data binding is done with method chaining, like any other configuration variable, and can be changed after initialization. This allows for changes to be rendered in the context of chart history, leveraging D3's transitions and update logic.

@dkrnl
dkrnl / selectize-optgroup_checkbox.js
Last active December 6, 2023 10:52
Selectize optgroup checkbox
/**
* Plugin: "optgroup_checkbox" (selectize.js)
* Copyright (c) 2015 Dmitri Piatkov & contributors
*
* 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:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
@StuPig
StuPig / water_ripple_canvas.js
Created February 8, 2014 02:27
Use JavaScript and canvas to create water ripple effect
/*
* Water Canvas by Almer Thie (http://code.almeros.com).
* Description: A realtime water ripple effect on an HTML5 canvas.
* Copyright 2010 Almer Thie. All rights reserved.
*
* Example: http://code.almeros.com/code-examples/water-effect-canvas/
* Tutorial: http://code.almeros.com/water-ripple-canvas-and-javascript
*/