Skip to content

Instantly share code, notes, and snippets.

View ricardozea's full-sized avatar

Ricardo Zea ricardozea

4 followers · 0 following
View GitHub Profile
@ricardozea
ricardozea / Improve performance by calling your CSS the right way.html
Last active November 12, 2016 05:48
Improve performance by calling your CSS the right way.-- Add these two lines on the <head> to preload the CSS. Then use the loadCSS and rel=preload JavaScript polyfill for browsers that don't support the rel=preload property.More info here: https://github.com/filamentgroup/loadCSS/blob/master/README.md
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md -->
<link rel="preload" href="path/to/file.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/file.css"></noscript>
<!-- Full page example -->
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ricardozea
ricardozea / loadCSS and rel=preload polyfill.js
Created September 23, 2016 13:55
Use this script to preload your CSS and then apply it in order to improve performance of your website. More info here: https://github.com/filamentgroup/loadCSS/blob/master/README.md
/*https://github.com/filamentgroup/loadCSS/blob/master/README.md*/
/*! loadCSS: load a CSS file asynchronously. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT */
!function(a){"use strict";var b=function(b,c,d){function j(a){return e.body?a():void setTimeout(function(){j(a)})}function l(){f.addEventListener&&f.removeEventListener("load",l),f.media=d||"all"}var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,f.media="only x",j(function(){g.parentNode.insertBefore(f,c?g:g.nextSibling)});var k=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){k(a)})};return f.addEventListener&&f.addEventListener("load",l),f.onloadcssdefined=k,k(l),f};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
/*! CSS rel=preload polyfill. Depends on loadCSS function. [c]2016 @scottjehl, Filament Group, Inc. Li
@ricardozea
ricardozea / increase-bg-size-on-scroll.js
Created July 8, 2016 04:58
Script to increase the size of a background image as the user scrolls. Inspired by this website: http://www.designforfounders.com/types-of-designers/
//http://stackoverflow.com/questions/25427017/increase-background-size-while-scrolling?answertab=active#tab-top
var x;
$(window).on('scroll', function() {
x = $(window).scrollTop();
$('.size').css('background-size', 100 + parseInt(x / 50, 0) + '% ');
});
@ricardozea
ricardozea / fix target _blank links.html
Created May 12, 2016 04:54
Target=”_blank” — the most underestimated vulnerability ever https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c?ref=webdesignernews.com#.tbdolnpto
rel="noopener noreferrer"
@ricardozea
ricardozea / scroll-to-top.js.html
Last active April 26, 2016 19:32
Vanilla JavaScript and jQuery versions to slide the page back to the top
<!-- Vanilla JS -->
<script>
var timeOut;
function scrollToTop() {
if (document.body.scrollTop!==0 || document.documentElement.scrollTop!==0){
window.scrollBy(0,-50);
timeOut=setTimeout('scrollToTop()',10);
}
else clearTimeout(timeOut);
}
@ricardozea
ricardozea / fixing border radius.css
Last active March 29, 2016 03:32
If the background of an element is sipping through when using border radius, use background-clip: padding-box; to tell the browser to extend the background to where the border starts. • http://stackoverflow.com/questions/2394249/parts-of-background-image-visible-when-using-border-radius • http://tumble.sneak.co.nz/post/928998513/fixing-the-backg…
.selector {
background-clip: padding-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
}
@ricardozea
ricardozea / partial-selectors.css
Last active July 16, 2018 03:04
Partial CSS selectors. Taken from this nice article: https://medium.com/the-web-crunch-publication/advanced-css-selectors-you-never-knew-about-972d8275d079
/* Begins with (^=) */
div[class^="myPanel_"] {}
/* Ends With ($=) */
div[id$="_myDiv"] {}
/* Contains (*=) */
div[class*="logoutPanel"] {}
@ricardozea
ricardozea / visuallyHidden.css
Last active January 9, 2017 14:27
Hide only visually, but have it available for screen readers: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Taken from HTML5 Boilerplate CSS.
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
@ricardozea
ricardozea / Default (Windows).sulbime-keymap.jq
Last active March 7, 2016 03:28
Custom Key Bindings for Sublime Text 3
[
//Indent code -- http://stackoverflow.com/questions/8839753/formatting-html-code-using-sublime-text-2
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}},
{ "keys": ["ctrl+k", "ctrl+t"], "command": "title_case" },
//Bring back the Quick Switch Project prompt
{ "keys": ["ctrl+alt+p"], "command": "prompt_select_workspace" },
//Save and Build HTML from Markdown at the same time
{ "keys": ["ctrl+s"], "command": "build" }
]
@ricardozea
ricardozea / target webkit with media query.css
Created August 8, 2015 04:30
WebKit media query for email. -- https://litmus.com/blog/the-5-email-easter-eggs-that-helped-sell-out-the-email-design-conference
@media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ }