Skip to content

Instantly share code, notes, and snippets.

Alexander Farkas aFarkas

Block or report user

Report or block aFarkas

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@aFarkas
aFarkas / index.html
Last active Feb 17, 2018
lazysizes requestIdleCallback
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.ricTimeout = 0; // test: 0, 50, 100, 300
window.lazySizesConfig.throttleDelay = 40; //test: 0, 40, 100
View lazysizes-without-ric.js
(function(window, factory) {
var lazySizes = factory(window, window.document);
window.lazySizes = lazySizes;
if(typeof module == 'object' && module.exports){
module.exports = lazySizes;
}
}(window, function l(window, document) {
'use strict';
/*jshint eqnull:true */
if(!document.getElementsByClassName){return;}
View webpack-problem_.idea_encodings.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding">
<file url="PROJECT" charset="UTF-8" />
</component>
</project>
@aFarkas
aFarkas / index.html
Last active Jan 23, 2019
link[rel="preload"] polyfill
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- we use 'preload_' instead of 'preload' to make it testable in chrome -->
<link rel="preload_" onload="console.log(this, 'script');" href="http://code.jquery.com/jquery-1.12.1.js" as="script" />
<link rel="preload_" onload="console.log(this, 'style');" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" as="style" />
<link rel="preload_" onload="console.log(this, 'font');" href="LatoLatin-Regular.woff" as="font" type="font/woff" crossorigin="" />
View pf-size.js
/*! Picturefill - v3.0.2 - 2016-02-02
* http://scottjehl.github.io/picturefill
* Copyright (c) 2016 https://github.com/scottjehl/picturefill/blob/master/Authors.txt; Licensed MIT
*/
!function(a){var b=navigator.userAgent;a.HTMLPictureElement&&/ecko/.test(b)&&b.match(/rv\:(\d+)/)&&RegExp.$1<45&&addEventListener("resize",function(){var b,c=document.createElement("source"),d=function(a){var b,d,e=a.parentNode;"PICTURE"===e.nodeName.toUpperCase()?(b=c.cloneNode(),e.insertBefore(b,e.firstElementChild),setTimeout(function(){e.removeChild(b)})):(!a._pfLastSize||a.offsetWidth>a._pfLastSize)&&(a._pfLastSize=a.offsetWidth,d=a.sizes,a.sizes+=",100vw",setTimeout(function(){a.sizes=d}))},e=function(){var a,b=document.querySelectorAll("picture > img, img[srcset][sizes]");for(a=0;a<b.length;a++)d(b[a])},f=function(){clearTimeout(b),b=setTimeout(e,99)},g=a.matchMedia&&matchMedia("(orientation: landscape)"),h=function(){f(),g&&g.addListener&&g.addListener(f)};return c.srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKA
View sizes-detection.js
(function(){
'use strict';
var width2 = 'data:image/gif;base64,R0lGODlhAgABAPAAAP///wAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==';
var width1 = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
var img = document.createElement('img');
var test = function(){
var width = img.width;
if(width == 2){
alert('your browser support sizes');
@aFarkas
aFarkas / focus-within.js
Last active Jul 5, 2019
simple focus-within polyfill
View focus-within.js
(function(window, document){
'use strict';
var slice = [].slice;
var removeClass = function(elem){
elem.classList.remove('focus-within');
};
var update = (function(){
var running, last;
var action = function(){
var element = document.activeElement;
View imgloaded.js
/**
* How to:
* $('div.container').imagesLoaded(function(){console.log('all images loaded in .container');});
* In case you need to support IE8, you need to use HTML5shiv **and** need to modify jQuery the following way:
* https://github.com/jquery/jquery/commit/a9533893b9e5e9a248139f5794c5d6099382cf14
*/
(function($){
'use strict';
$.fn.imagesLoaded = (function(){
var imageLoaded = function (img, cb, delay){
View maxres-.html
<!-
2x device and viewport 1000px: 2000.jpg (i.e.: 2dpr res)
3x device and viewport 1000px: 2000.jpg (i.e.: 2dpr res) <- constrained
3x device and viewport 1500px: 3000.jpg (i.e.: 2dpr res) <- constrained
->
<img srcset="500.jpg 500w, 1000.jpg 1000w, 1500.jpg 1500w, 2000.jpg 2000w, 3000jpg 3000w, 4000jpg 4000w" maxdpr="2" sizes="100vw" />
@aFarkas
aFarkas / maxres.html
Last active Aug 29, 2015
add maxdpr option
View maxres.html
<!-- if you have 3dpr choose logo3x.png -->
<img src="logo.png" srcset="logo2x.png 200w, logo3x.png 300w" sizes="100px" />
<!--
if you have 3dpr and sizes computes to 100px choose img2.jpg
but if you have 2dpr and sizes computes to 150px take img3.jpg
-->
<img src="img.jpg" srcset="img2.jpg 200w, img3.jpg 300w" maxdpr="2" sizes="100px" />
You can’t perform that action at this time.