When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}
export let action: ActionFunction = async ({ request, params }) => { | |
let session = await requireAuthSession(request); | |
await ensureUserAccount(session.get("auth")); | |
let data = Object.fromEntries(await request.formData()); | |
invariant(typeof data._action === "string", "_action should be string"); | |
switch (data._action) { | |
case Actions.CREATE_TASK: | |
case Actions.UPDATE_TASK_NAME: { |
function ThumbnailGenerator() { | |
this.resizeCanvas = document.createElement('canvas'); | |
this.generate = function (imgSrc, thumbDims, compression) { | |
[this.resizeCanvas.width, this.resizeCanvas.height] = [thumbDims.x, thumbDims.y]; | |
const ctx = this.resizeCanvas.getContext("2d"); | |
const tmp = new Image(); | |
const ret = new Promise(resolve => { |
$space-inset-default = 16px 16px 16px 16px; | |
$space-inset-xs = 4px 4px 4px 4px; | |
$space-inset-s = 8px 8px 8px 8px; | |
$space-inset-m = 16px 16px 16px 16px; | |
$space-inset-l = 32px 32px 32px 32px; | |
$space-inset-xl = 64px 64px 64px 64px; | |
$space-stack-default = 0 0 16px 0; | |
$space-stack-xs = 0 0 4px 0; | |
$space-stack-s = 0 0 8px 0; | |
$space-stack-m = 0 0 16px 0; |
// Add on element with overflow | |
-webkit-mask-image: -webkit-radial-gradient(white, black); |
#!/bin/bash | |
case $# in | |
0) | |
echo "Usage: $0 {start|stop}" | |
exit 1 | |
;; | |
1) | |
case $1 in | |
start) |
/** | |
* A redux middleware for processing Meteor methods | |
* When an action is dispatched, it will pass through our middleware. | |
* if denoted a method, we will dispatch the action with readyState of loading | |
* The method passed in is then called, and dispatches further ready states for success/error | |
* The reducer shape should include { data, readyState } for use in the UI | |
* @returns {Function} | |
*/ | |
export default function methodMiddleware() { | |
return (next) => { |
// Image preload | |
import { ensureArray } from './util'; | |
export default function preload(images, callback) { | |
let done = () => { | |
counter--; | |
if (counter === 0) { | |
callback(errors.length ? errors : null); | |
} |
// Polyfill ES6 for older browsers | |
import 'babel/polyfill'; | |
// Trigger globals / methods | |
import 'simon/client/startup'; | |
import './routes'; |
/** | |
* This code is licensed under the terms of the MIT license | |
* | |
* Deep diff between two object, using lodash | |
* @param {Object} object Object compared | |
* @param {Object} base Object to compare with | |
* @return {Object} Return a new object who represent the diff | |
*/ | |
function difference(object, base) { | |
function changes(object, base) { |