Skip to content

Instantly share code, notes, and snippets.

View b4z81's full-sized avatar

Stefano Guglielmi b4z81

14 followers · 71 following
  • Rome
View GitHub Profile
@scottjehl
scottjehl / srcsettoday.md
Created May 15, 2012 13:52
Could IMG@srcset be used sensibly in existing browsers?

Some early thoughts on img@srcset in the real world

Many agree that the newly proposed srcset attribute is much less syntactically intuitive than the widely appreciated picture element. I hope that the WHATWG and W3C review all of the efforts that the web dev community have put into the picture element proposal in their own community group and go back on this recent addition.

Syntax aside... if srcset was here to stay regardless of what we want, is there any way we could make it work in existing browsers without introducing unnecessary overhead or potentially buggy markup? At a glance, it looks shaky to me.

The main problem is request overhead, and attempting to work around that.

Given the following markup, existing browsers will prefetch/fetch the image referenced in the src attribute, and JavaScript can not prevent that request from going out. This means larger screen devices will request an unnecessary image for every imgset on a page - not good.

@fmosca
fmosca / watchlist_archived.md
Last active March 28, 2018 18:03

What is the right programming language for you? Traditionally programming languages are created to concisely model a specific problem, or to maximize expression while solving a broad range of problems. Psychoanalysts have noted that many decisions we make as humans are not based on rational premises

In object-oriented development, we are all familiar with design patterns such as the Strategy pattern and Decorator pattern, and design principles such as SOLID. The functional programming community has design patterns and principles as well. This talk will provide an overview of some of these, and

@bjankord
bjankord / gist:2572749
Created May 2, 2012 00:57
Picture Source src modification through CSS image-set and URI Templates
<head>
<style type="text/css">
picture source {
src: image-set(url({filename}@2x.{ext} 2x high-bandwidth));
}
@media screen and (min-width:321px){
picture source {
src: image-set(url({filename}-m.{ext}), url({filename}-m@2x.{ext} 2x high-bandwidth));
}
}
@peol
peol / css-named-colors-in-webkit.js
Created August 31, 2011 08:39
All named CSS colors in webkit as a JS Object
// Source: http://www.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/platform/ColorData.gperf&exact_package=chromium&type=cs
// There's also an RGB one defined here: http://www.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/inspector/front-end/Color.js&exact_package=chromium&q=indianred&l=393
var CSS_NAMED_COLORS = {
aliceblue: "#f0f8ff",
antiquewhite: "#faebd7",
aqua: "#00ffff",
aquamarine: "#7fffd4",
azure: "#f0ffff",
beige: "#f5f5dc",
@jayphelps
jayphelps / index.js
Created May 24, 2016 23:47
async window.open()
window.onclick = () => {
// You MUST create the window on the same event
// tick/stack as the user-initiated event (e.g. click callback)
const googleWindow = window.open();
// Do your async work
fakeAjax(response => {
// Change the URL of the window you created once you
// know what the full URL is!
googleWindow.location.replace(`https://google.com?q=${response}`);
@scottjehl
scottjehl / anchorinclude.js
Created May 20, 2011 17:04
Anchor-include Pattern
/*
* anchor-include pattern for already-functional links that work as a client-side include
* Copyright 2011, Scott Jehl, scottjehl.com
* Dual licensed under the MIT
* Idea from Scott Gonzalez
* to use, place attributes on an already-functional anchor pointing to content
* that should either replace, or insert before or after that anchor
* after the page has loaded
* Replace: <a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
* Before: <a href="..." data-before="articles/latest/fragment">Latest Articles</a>
@scottjehl
scottjehl / hideaddrbar.js
Created August 31, 2011 11:42
Normalized hide address bar for iOS & Android
/*
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl, scottjehl.com
* MIT License
*/
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){
@kylebarrow
kylebarrow / example.html
Created June 23, 2011 06:30
Prevent links in standalone web apps opening Mobile Safari
<!DOCTYPE html>
<head>
<title>Stay Standalone</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="stay_standalone.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li><a href="http://google.com/">Remote Link (Google)</a></li>
@necolas
necolas / snippet.js
Created June 14, 2011 20:36
Optimised async loading of cross-domain scripts
/*
* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
* Better handling of scripts without supplied ids.
*
* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
*/
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
@bentruyman
bentruyman / Custom.css
Created August 17, 2011 00:30
IR_Black Theme for Chrome Developer Tools
/**********************************************/
/*
/* IR_Black Skin by Ben Truyman - 2011
/*
/* Based on Todd Werth's IR_Black:
/* http://blog.toddwerth.com/entries/2
/*
/* Inspired by Darcy Clarke's blog post:
/* http://darcyclarke.me/design/skin-your-chrome-inspector/
/*