Skip to content

Instantly share code, notes, and snippets.

/**
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
*
* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
* the height of element `.foo` —which is a full width and height cover image.
*
* iOS Resolution Quick Reference: http://www.iosres.com/
*/
// Created by Max Luster (@maxluster)
// Usage instructions at https://bugsnag.com/blog/responsive-typography-with-chained-media-queries
// Requires SASS >= 3.3
// Enhanced by Breakpoint 2.4.x and Compass 1.0 (alpha)
// For SASS 3.2.x support, use https://gist.github.com/maxluster/c9ecc6e4a6770e507c2c
// Provides a simplified syntax for chaining media queries across named or numeric breakpoints
@mixin responsive($properties, $default-value, $responsive-values){
// No named breakpoints by default
anon true, if the space may be omitted in anonymous function declarations
bitwise true, if bitwise operators should be allowed
browser true, if the standard browser globals should be predefined
cap true, if upper case HTML should be allowed
continue true, if the continuation statement should be tolerated
css true, if CSS workarounds should be tolerated
debug true, if debugger statements should be allowed
devel true, if logging should be allowed (console, alert, etc.)
eqeq true, if == should be allowed
es5 true, if ES5 syntax should be allowed
// Here are some variables, then a mixin and then an application of the mixin - this will only compile using Sass 3.2
//variables
$XS: 12.5em; // 200px;
$S: 18.75em; // 300px
$SM: 35em; // 560px
$M: 47.5em; // 760px
$L: 63em; // 1008px
$XL: 110em; // 1760px
$XXL: 180em; // 2880px
@lilianchisca
lilianchisca / pagevisibility.js
Created September 20, 2013 18:26
Use the Page Visibility API to pause a video when a web page is hidden, and then resume playback when the page becomes visible again.
window.onload = function() {
// Get the prefix for this browser.
var prefix = getPrefix();
// Prefix the document properties/events we will be using.
var hidden = getHiddenProperty(prefix);
var visibilityState = getVisibilityStateProperty(prefix);
var visibilityChangeEvent = getVisibilityEvent(prefix);
// Variable to track if the video was playing when the page visibility changed.
@lilianchisca
lilianchisca / functions.php
Created September 12, 2013 18:30
Sure, there’s lots of great WordPress plugins to help you with SEO. But in case you don’t want to use a plugin, here’s a super efficient code make your blog SEO friendly.
function basic_wp_seo() {
global $page, $paged, $post;
$default_keywords = 'wordpress, plugins, themes, design, dev, development, security, htaccess, apache, php, sql, html, css, jquery, javascript, tutorials'; // customize
$output = '';
// description
$seo_desc = get_post_meta($post->ID, 'mm_seo_desc', true);
$description = get_bloginfo('description', 'display');
$pagedata = get_post($post->ID);
if (is_singular()) {
@lilianchisca
lilianchisca / picturefill.html
Last active March 6, 2019 15:14
Lazy load reesponsive webp images with jpeg fallback using Modernizr.on // based on https://github.com/scottjehl/picturefill
<div itemprop="image" data-picture="lazy" data-alt="Don't forget to change the alt text!">
<div data-src="assets/images/example-s"></div>
<div data-src="assets/images/example-m" data-media="(min-width: 700px)"></div>
<div data-src="assets/images/example-l" data-media="(min-width: 1200px)"></div>
<noscript>
<img src="assets/images/example-s.jpg" alt="Don't forget to change the alt text!">
</noscript>
</div>
@lilianchisca
lilianchisca / analytics.html
Last active December 18, 2015 05:59
Optimizing the asynchronous Google Analytics snippet: mathiasbynens.be/notes/async-analytics-snippet
<script>
(function(window, document, variableName, scriptElement, firstScript) {
window['GoogleAnalyticsObject'] = variableName;
window[variableName] || (window[variableName] = function() {
(window[variableName].q = window[variableName].q || []).push(arguments)
});
window[variableName].l = +new Date;
scriptElement = document.createElement('script'),
firstScript = document.scripts[0];
scriptElement.src = '//www.google-analytics.com/analytics.js';
window.$ = function (selector) {
// an object containing the matching keys and native get commands
var matches = {
'#': 'getElementById',
'.': 'getElementsByClassName',
'@': 'getElementsByName',
'=': 'getElementsByTagName',
'*': 'querySelectorAll'
}[selector[0]]; // you can treat a string as an array of characters
// now pass the target without the key
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];