Skip to content

Instantly share code, notes, and snippets.

View mattweb's full-sized avatar

Matthias Weber mattweb

6 followers · 19 following
  • Cologne
View GitHub Profile
@jeromecoupe
jeromecoupe / webstoemp-gulpfile.js
Last active September 27, 2025 02:50
Gulp 4 sample gulpfile.js. For a full explanation, have a look at https://www.webstoemp.com/blog/switching-to-gulp4/
"use strict";
// Load plugins
const autoprefixer = require("autoprefixer");
const browsersync = require("browser-sync").create();
const cp = require("child_process");
const cssnano = require("cssnano");
const del = require("del");
const eslint = require("gulp-eslint");
const gulp = require("gulp");
@matthewbeta
matthewbeta / scrim-gradient.scss
Last active September 5, 2024 10:18
A simple little SCSS mixin for creating scrim gradients
/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
@mixin scrimGradient($startColor: $color-black, $direction: 'to bottom') {
$scrimCoordinates: (
@dieulot
dieulot / hairlines.js
Last active June 30, 2020 04:36
http://dieulot.net/css-retina-hairline – CSS retina hairline, the easy way – JS
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
@jlong
jlong / _brightness.scss
Last active September 19, 2024 15:32
// Brightness math based on:
// http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;
@function brightness($color) {
// Extract color components
@joyrexus
joyrexus / README.md
Last active September 6, 2025 15:46 — forked from liamcurry/gist:2597326
Vanilla JS equivalents of jQuery methods

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
@ThiefMaster
ThiefMaster / mp-history-deeplinking.js
Last active June 6, 2016 13:58
function urlFromHash() {
if (location.hash.substr(0, 2) != '#!') {
return null;
}
// why not location.hash? => http://stackoverflow.com/q/4835784/298479
return location.href.split('#')[1].substr(1);
}
$('#gallery').magnificPopup({
type: 'image',
@tomschlick
tomschlick / gist:3984898
Created October 31, 2012 05:02
Sublime Text 2 Keybindings to Resize Split Panes
[
{
"keys": ["super+alt+left"],
"command": "set_layout",
"args":
{
"cols": [0.0, 0.33, 1.0],
"rows": [0.0, 1.0],
"cells": [[0, 0, 1, 1], [1, 0, 2, 1]]
}
@smileart
smileart / README.md
Last active March 16, 2024 15:42 — forked from agnoster/README.md
My ZSH Theme — Agnoster Mod

My modified fork of agnoster.zsh-theme

A ZSH theme optimized for people who use:

  • Solarized
  • Git
  • Unicode-compatible fonts and terminals (I use iTerm2 + Menlo)

Compatibility

@marcedwards
marcedwards / high-dpi-media.css
Last active September 24, 2025 23:32
A CSS media query that captures almost all high DPI aware devices.
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
@andrewrocco
andrewrocco / ga-ratio.js
Created July 17, 2012 15:48
Pixel Aspect Ratio Google Analytics Custom Variable
// Create the test
var pixelRatio = (window.devicePixelRatio >= 1.5) ? "high" : "normal";
..
// Pass it along through GA
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
// --- IMPORTANT LINE!
// params: event method, custom variable slot, variable name, variable value, scope level