Skip to content

Instantly share code, notes, and snippets.

View una's full-sized avatar

Una Kravets una

View GitHub Profile
@DavidKuennen
DavidKuennen / minimal-analytics-snippet.js
Last active March 28, 2024 01:45
Minimal Analytics Snippet
(function (context, trackingId, options) {
const history = context.history;
const doc = document;
const nav = navigator || {};
const storage = localStorage;
const encode = encodeURIComponent;
const pushState = history.pushState;
const typeException = 'exception';
const generateId = () => Math.random().toString(36);
const getId = () => {
@rupl
rupl / sw-font-load.js
Created December 7, 2015 11:54
Use Service Worker to load fonts async/direct via client-side logic.
// Load fonts async by default
// Load sync from SW cache when available.
//
// Snippet assumes your Service Worker caches fonts as part of installation, so that
// an 'activated' Service Worker means the fonts are cached with 100% confidence.
if (
'serviceWorker' in navigator &&
navigator.serviceWorker.controller !== null &&
navigator.serviceWorker.controller.state === 'activated'
) {
@paulirish
paulirish / what-forces-layout.md
Last active April 13, 2024 09:40
What forces layout/reflow. The comprehensive list.

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
@HenrikJoreteg
HenrikJoreteg / README.md
Last active September 20, 2021 01:36
Minimalist routing in Redux

Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.

Instead, with this approch, your app's current pathname is just another piece of state, just like anything else.

This also means that when doing server-side rendering of a redux app, you can just do:

var app = require('your/redux/app')
var React = require('react')
@bendc
bendc / nodelist-iteration.js
Created January 13, 2015 14:39
ES6: Iterating over a NodeList
var elements = document.querySelectorAll("div"),
callback = (el) => { console.log(el); };
// Spread operator
[...elements].forEach(callback);
// Array.from()
Array.from(elements).forEach(callback);
// for...of statement
@sogko
sogko / app.js
Last active November 8, 2022 12:31
gulp + expressjs + nodemon + browser-sync
'use strict';
// simple express server
var express = require('express');
var app = express();
var router = express.Router();
app.use(express.static('public'));
app.get('/', function(req, res) {
res.sendfile('./public/index.html');
@alcidesqueiroz
alcidesqueiroz / same-value.scss
Last active July 29, 2019 09:20
Sass: Mixin to assign the same value to multiple properties at once
@mixin same($values...) {
$length: length($values);
$value: nth($values, $length);
@for $i from 1 to $length {
#{nth($values, $i)}: $value;
}
}
// Usage:
@voxpelli
voxpelli / SASS_Color_Contrast.md
Last active August 21, 2022 11:49
Pure SASS script for calculating contrast ratios of colors. MOVED TO: https://github.com/voxpelli/sass-color-helpers

Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.

This script currently lacks the support for alpha-transparency that Lea supports in her script though.

In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.

Normal usage: `color: pick_best_color(#f00

@jongrover
jongrover / js-learning-resource-links.md
Created August 18, 2013 20:13
JavaScript Learning Resource Links
<!doctype html>
<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->
<html>
<head>
<title>iOS 8 web app</title>
<!-- CONFIGURATION -->