| /* | |
| Made by Elly Loel - https://ellyloel.com/ | |
| With inspiration from: | |
| - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/ | |
| - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/ | |
| - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE | |
| Notes: | |
| - `:where()` is used to lower specificity for easy overriding. | |
| */ |
| exports.handler = (event, context, callback) => { | |
| const response = { | |
| statusCode: 301, | |
| headers: { | |
| Location: 'https://google.com', | |
| } | |
| }; | |
| return callback(null, response); | |
| } |
The following instructions are heavily inspired by @pauleve. I modified his instructions and then added details about how to make a shortcut and support Retina/HiDPI displays.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
by Jenny Knuth, based on the work of Chris Coyier and Taylor Hunt
A data URI is a nice way to include a web resource without needing to make an HTTP request. Chris Coyier explains the technique nicely in Probably Don't Base64 SVG.
While a PNG might use Base64 encoding, for SVG, there is a better way.
Taylor Hunt's experiments led to this solution for optimizing SVGs in data URIs:
"So the best way of encoding SVG in a data URI is data:image/svg+xml,[actual data]. We don’t need the ;charset=utf-8 parameter (or the invalid ;utf8 parameter…), because URLs are always ASCII."
Disclaimer: This piece is written anonymously. The names of a few particular companies are mentioned, but as common examples only.
This is a short write-up on things that I wish I'd known and considered before joining a private company (aka startup, aka unicorn in some cases). I'm not trying to make the case that you should never join a private company, but the power imbalance between founder and employee is extreme, and that potential candidates would
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.offsetParentSome articles:
Some tools:
| /* bling.js */ | |
| window.$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function (name, fn) { | |
| this.addEventListener(name, fn); | |
| } | |
| NodeList.prototype.__proto__ = Array.prototype; |
| @font-face {font-family: "Droid Sans"; src: local("Tahoma");} | |
| @font-face {font-family: "noto"; src: local("Tahoma");} | |
| @font-face {font-family: "Arial Negreta"; src: local("Arial");} | |
| @font-face {font-family: "Droid Sans"; font-weight: bold; src: local("Tahoma Bold");} | |
| @font-face {font-family: "Droid Serif"; src: local("Tahoma");} | |
| @font-face {font-family: "Droid Serif"; font-weight: bold; src: local("Tahoma Bold");} | |
| @font-face {font-family: "Droid Serif"; font-style: italic; src: local("Tahoma Italic");} | |
| @font-face {font-family: "opensans"; src: local("Tahoma");} | |
| @font-face {font-family: "open_sans"; src: local("Tahoma");} | |
| @font-face {font-family: "open_sans"; font-weight: bold; src: local("Tahoma Bold");} |
| #!/bin/sh | |
| # Redirect output to stderr. | |
| exec 1>&2 | |
| # enable user input | |
| exec < /dev/tty | |
| consoleregexp='console.log' | |
| # CHECK | |
| if test $(git diff --cached | grep $consoleregexp | wc -l) != 0 | |
| then |
