- A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
- lengths are in any unit (ex: pixels)
- code snippets are in JavaScript
angleRad = angleDeg * Math.PI / 180;
| const canvasSketch = require('canvas-sketch'); | |
| const { lerp } = require('./util/math'); | |
| const settings = { | |
| animate: true, | |
| duration: 3, | |
| dimensions: [ 640, 640 ], | |
| scaleToView: true, | |
| playbackRate: 'throttle', | |
| fps: 24 |
| // UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that | |
| // does not support `nomodule` is probably not being used anywhere. The code below is left | |
| // for posterity. | |
| /** | |
| * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will | |
| * load <script nomodule> anyway. This snippet solve this problem, but only for script | |
| * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script> | |
| * | |
| * Again: this will **not** prevent inline script, e.g.: |
| // This works on all devices/browsers, and uses IndexedDBShim as a final fallback | |
| var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB; | |
| // Open (or create) the database | |
| var open = indexedDB.open("MyDatabase", 1); | |
| // Create the schema | |
| open.onupgradeneeded = function() { | |
| var db = open.result; | |
| var store = db.createObjectStore("MyObjectStore", {keyPath: "id"}); |
Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets
“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?
| // array utils | |
| // ================================================================================================= | |
| const combine = (...arrays) => [].concat(...arrays); | |
| const compact = arr => arr.filter(Boolean); | |
| const contains = (() => Array.prototype.includes | |
| ? (arr, value) => arr.includes(value) | |
| : (arr, value) => arr.some(el => el === value) |
| <config> | |
| <global> | |
| <!-- ... --> | |
| </global> | |
| <stores> | |
| <default> | |
| <web> | |
| <unsecure> | |
| <base_url>http://beispiel.tld/shop/</base_url> | |
| </unsecure> |
| function countCSSRules() { | |
| var results = '', | |
| log = ''; | |
| if (!document.styleSheets) { | |
| return; | |
| } | |
| for (var i = 0; i < document.styleSheets.length; i++) { | |
| countSheet(document.styleSheets[i]); | |
| } | |
| function countSheet(sheet) { |
| /* | |
| * This work is free. You can redistribute it and/or modify it under the | |
| * terms of the Do What The Fuck You Want To Public License, Version 2, | |
| * as published by Sam Hocevar. See the COPYING file for more details. | |
| */ | |
| /* | |
| * Easing Functions - inspired from http://gizma.com/easing/ | |
| * only considering the t value for the range [0, 1] => [0, 1] | |
| */ | |
| EasingFunctions = { |