Skip to content

Instantly share code, notes, and snippets.

View webdesignberlin's full-sized avatar
:octocat:
...

Michael Raguse webdesignberlin

:octocat:
...
55 followers · 157 following
View GitHub Profile
@webdesignberlin
webdesignberlin / addClass.js
Created October 12, 2016 07:39
Javascript Add/Remove Class from selector
function addClass(selector, newClass) {
// get all elements that match our selector
elements = document.querySelectorAll(selector);
// add class to all chosen elements
for (var i=0; i<elements.length; i++) {
elements[i].classList.add(newClass);
}
}
@webdesignberlin
webdesignberlin / visuallyhidden.css
Created September 26, 2016 09:27
Hiding DOM elements #ally #2016 via https://allyjs.io/tutorials/hiding-elements.html
.visuallyhidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip-path: inset(100%);
@webdesignberlin
webdesignberlin / animated-hamburger.scss
Created September 24, 2016 12:32 — forked from treetrum/animated-hamburger.scss
/**
The following mixin works when @include[ed] onto a div containing three empty spans:
<div class="animated-hamburger">
<span></span>
<span></span>
<span></span>
</div>
To get the animation on click, use the following JQuery:
@webdesignberlin
webdesignberlin / foantloading.js
Created August 2, 2016 11:52
fontloading via localStorage by of
(function(){
function addFont() {
var style = document.createElement('style');
style.rel = 'stylesheet';
document.head.appendChild(style);
style.textContent = localStorage.fontName;
}
try {
if (localStorage.fontName) {
// The font is in localStorage, we can load it directly
@webdesignberlin
webdesignberlin / README.md
Created July 7, 2016 12:44 — forked from jonathantneal/README.md
Fluid Aspect: A Sass mixin for creating intrinsic ratios

Fluid Aspect

fluid-aspect is a Sass mixin for creating intrinsic ratios in CSS. Intrinsic ratios allow elements to fill the width of their containing block and resize on the fly while maintaining their aspect ratio.

@include fluid-aspect($ratio, [$target]);
  • $ratio: An aspect ratio represented as two numbers separated by a space. Defaults to 1:1
  • $target: A selector targeting the element to be made fluid. Defaults to "> :first-child"
@webdesignberlin
webdesignberlin / example.md
Created July 3, 2016 13:22 — forked from ericclemmons/example.md
HTML5 <details> in GitHub

Using <details> in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 <summary>Summary Goes Here</summary>
@webdesignberlin
webdesignberlin / copy-folder-structure.sh
Created June 14, 2016 12:34
#!/usr/bin/env sh
find ./app/** -type d | sed "s|^\./app|\./dist|" | xargs mkdir -p
@webdesignberlin
webdesignberlin / vanilla-lazy-load.html
Created May 20, 2016 14:13 — forked from rposbo/vanilla-lazy-load.html
<html>
<head>
<style>
.item {width:300px; display: inline-block; }
.item .itemtitle {font-weight:bold; font-size:2em;}
.hidden {display:none;}
</style>
</head>
<body>
<h1>Amalgam Comics Characters</h1>
@webdesignberlin
webdesignberlin / nginx-uberspace.md
Created May 4, 2016 14:15 — forked from lluchs/nginx-uberspace.md
nginx auf dem Uberspace

nginx auf dem Uberspace

Installation

Lade die neueste "mainline"-Version (hier 1.7.9) von http://nginx.org/en/download.html herunter und entpacke sie:

$ wget http://nginx.org/download/nginx-1.7.9.tar.gz 
$ tar xf nginx-1.7.9.tar.gz
@webdesignberlin
webdesignberlin / get_ip.php
Created April 21, 2016 10:06
Get end user IP address
<?php
function get_ip() {
//Just get the headers if we can or else use the SERVER global
if ( function_exists( 'apache_request_headers' ) ) {
$headers = apache_request_headers();
} else {