Skip to content

Instantly share code, notes, and snippets.

View meodai's full-sized avatar
🐙
Probably coloring things

David Aerne meodai

🐙
Probably coloring things
View GitHub Profile
@Calvein
Calvein / gist:2025652
Created March 13, 2012 00:28
Get the `animationend` name event
var animationEndName = (Modernizr.prefixed('animation') + "End").replace(/^ms/, "MS").replace(/^Webkit/, "webkit").replace(/^Moz.*/, "animationend");
@Integralist
Integralist / 1. Example.scss
Created October 22, 2012 14:10
Sass Mixin for CSS3 Animations
@include keyframe(fadeout) {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@tvandervossen
tvandervossen / environment.js
Last active April 2, 2024 20:18
Here’s an example of my current web app user agent, device, and/or feature detection approach. I tend to inline this in the page header just before the stylesheet as part of the distribution build. A benefit of this approach is that detection is done early without any external dependencies. It’s also straightforward to modify or extend while you…
env = (function() {
var flags = {}, ua = navigator.userAgent, el = document.createElement('div'), video = document.createElement('video'), audio = document.createElement('audio'), root = document.documentElement, i
function flag(names) {
names = names.split(' ')
for (i = 0; i < names.length; i++)
flags[names[i]] = true
}
function classnames() {
var names = [], name
for(name in flags) if (flags.hasOwnProperty(name))
@rgrove
rgrove / getAbsoluteBoundingRect.js
Created April 25, 2013 21:20
Simple JS function that returns a bounding rect for an element with absolute coordinates corrected for scroll positions.
/**
Returns a bounding rect for _el_ with absolute coordinates corrected for
scroll positions.
The native `getBoundingClientRect()` returns coordinates for an element's
visual position relative to the top left of the viewport, so if the element
is part of a scrollable region that has been scrolled, its coordinates will
be different than if the region hadn't been scrolled.
This method corrects for scroll offsets all the way up the node tree, so the
@t-io
t-io / osx_install.sh
Last active October 22, 2023 13:04
Install most of my Apps with homebrew & cask
#!/bin/sh
echo Install all AppStore Apps at first!
# no solution to automate AppStore installs
read -p "Press any key to continue... " -n1 -s
echo '\n'
echo Install and Set San Francisco as System Font
ruby -e "$(curl -fsSL https://raw.github.com/wellsriley/YosemiteSanFranciscoFont/master/install)"
echo Install Homebrew, Postgres, wget and cask
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
@DanHerbert
DanHerbert / fix-homebrew-npm.md
Last active June 4, 2024 04:16
Instructions on how to fix npm if you've installed Node through Homebrew on Mac OS X or Linuxbrew

OBSOLETE

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

@evenicoulddoit
evenicoulddoit / js-delegate.js
Last active June 19, 2022 09:02
Basic JavaScript Delegation
(function(document, EventTarget) {
var elementProto = window.Element.prototype,
matchesFn = elementProto.matches;
/* Check various vendor-prefixed versions of Element.matches */
if(!matchesFn) {
['webkit', 'ms', 'moz'].some(function(prefix) {
var prefixedFn = prefix + 'MatchesSelector';
if(elementProto.hasOwnProperty(prefixedFn)) {
matchesFn = elementProto[prefixedFn];
// HTML:
<div class="display-type"></div>
// CSS:
// set the content of an element depending on the media query
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active January 16, 2024 01:17
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@npostulart
npostulart / convert-function.scss
Last active July 18, 2022 14:21
Unit Converting Sass Function
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$baseSize: 16px;
$convertBase: $baseSize;
html {
font-size: percentage($baseSize / 16px);