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 / simple-es6.js
Created October 16, 2016 20:15 — forked from emilong/simple-es6.js
// can destructure arrays
const [a, b] = [1,2]; // a = 1, b = 2
// can destructure object keys
const { a } = { a: 3 }; // a = 3
// even function parameters
function foo({ a }) {
console.log(a);
}
@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 / 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 / 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 {
@webdesignberlin
webdesignberlin / prefixed-office-properties.md
Created April 4, 2016 11:51 — forked from p3t3r67x0/prefixed-office-properties.md
MS Office prefixed style properties can be used for older versions of MS Excel, MS PowerPoint or MS Word when you want to save a document, presentation, workbook, or worksheet as a web document, or even in older versions for MS Outlook.

MS Office prefixed style properties

mso-ansi-font-size

Note: Office only

mso-ansi-font-size: large | larger | <length> | medium | <percentage> | small | smaller | x-large | x-small | xx-large | xx-small
@webdesignberlin
webdesignberlin / prefixed-properties.md
Created April 4, 2016 11:51 — forked from p3t3r67x0/prefixed-properties.md
Be aware that every rendering engine has its own implementation of prefixed properties. As extensions are made part of the standard, the unprefixed identifier is then substituted.

Prefixed style properties

-ms-accelerator

The -ms-accelerator property sets or retrieves a string that indicates whether the object represents a keyboard shortcut.

-ms-accelerator: false | true
@webdesignberlin
webdesignberlin / pseudo-elements.md
Created April 4, 2016 11:50 — forked from p3t3r67x0/pseudo_elements.md
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] {