Skip to content

Instantly share code, notes, and snippets.

Diego Perini dperini

Block or report user

Report or block dperini

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
dperini / namespaces-and-tag-name-case.html
Last active May 25, 2018
Influence of namespace in tag name case (lower, upper, mixed)
View namespaces-and-tag-name-case.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<title>Namespace testing</title>
body { font: 16px monospace; text-align: center; }
.table { display: table; border-width: 0 1px 1px 0; border-style: solid; border-color: #000; }
.row { display: table-row; border-width: 0 1px 1px 0; border-style: solid; border-color: #000; }
View CSS_and_Selector_parsing_differences
<!DOCTYPE html>
<html lang="en">
<head><title>CSS and Selectors-API parsing differences</title>
/* these rules have a correct "selectorText" so their style declaration are applied */
a[href="#"] { background-color: red; } /* style some elements */
a:not([href="#"]) { background-color: lime; } /* style some elements */
/* these rules have a incorrect "selectorText" so their style declaration are not applied */
a:not([href="#"] { background-color: #f00; } /* doesn't style any element */
dperini / scope-test.js
Created Oct 22, 2016
Simulate behavior of the new "Selectors Level 4" :scope selector
View scope-test.js
<!DOCTYPE html>
<title>NWMatcher Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../src/nwmatcher-noqsa.js"></script>
<div class="a">
<div class="a1"></div>
View getScrollingElement.js
* How to detect which element is the scrolling element in charge of scrolling the viewport:
* - in Quirks mode the scrolling element is the "body"
* - in Standard mode the scrolling element is the "documentElement"
* webkit based browsers always use the "body" element, disrespectful of the specifications:
dperini / has_load_capture_support.js
Created Jun 25, 2013
Here is an example on how to feature detect an Asynchronous event using a Synchronous event. Being able to capture 'load' events of each resource in a web page is a very interesting feature. All resources could be logged, or modified with just one 'load'' capturing event handler. This works for external link elements (CSS), for iframes, images, …
View has_load_capture_support.js
* Feature detect support for capturing load events
* Author: Diego Perini
* Updated: 2013/06/25
* the feature test can be performed before
* both 'load' and 'DOMContentLoaded' events
dperini / loadFT.js
Created Aug 23, 2011
Feature testing browser support for 'load' events
View loadFT.js
<script type="text/javascript">
// 'load' events should be supported by every browser
// this was just an exercise to find a way to test it
var isLoadSupported = 'onload' in window, loadHandler = window.onload;
document.createElement('body').setAttribute('onload', 'return');
isLoadSupported = isLoadSupported || typeof window.onload == 'function';
window.onload = loadHandler;
dperini / snippets-compression
Created May 25, 2011
Comparison between manual and automated minification/compression
View snippets-compression
Testing on code snippet at:
Note: used "gzip -n9 file" on Mac to do this comparison.
Not very readable, minifier obsoleted & gzip makes size grow
View readfile.js
* readfile.js - Spidermonkey/V8 readfile wrapper
* Author: Diego Perini <>
* Released under the Creative Commons license:
View regex-weburl.js
// Regular Expression for URL validation
// Author: Diego Perini
// Created: 2010/12/05
// Updated: 2018/09/12
// License: MIT
// Copyright (c) 2010-2018 Diego Perini (
View js2png.php
* Author: Diego Perini <>
* this is what I have in my build system to embed
* the packed version of NWMatcher in a PNG file;
* actually any data like JSON or XML can be
* transported in compressed PNG files and
* avoids HTTP compression requirements.
You can’t perform that action at this time.