Skip to content

Instantly share code, notes, and snippets.

@dperini
dperini / namespaces-and-tag-name-case.html
Last active May 25, 2018 11:48
Influence of namespace in tag name case (lower, upper, mixed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Namespace testing</title>
<style>
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; }
<!DOCTYPE html>
<html lang="en">
<head><title>CSS and Selectors-API parsing differences</title>
<style>
/* 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
dperini / scope-test.js
Created October 22, 2016 17:24
Simulate behavior of the new "Selectors Level 4" :scope selector
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="a">
<div class="a1"></div>
/*
* 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:
*
* http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop
*
@dperini
dperini / has_load_capture_support.js
Created June 25, 2013 12:05
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, …
/*
*
* 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
dperini / loadFT.js
Created August 23, 2011 19:28
Feature testing browser support for 'load' events
<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
dperini / snippets-compression
Created May 25, 2011 22:19
Comparison between manual and automated minification/compression
Testing on code snippet at: https://gist.github.com/991057
Note: used "gzip -n9 file" on Mac to do this comparison.
Not very readable, minifier obsoleted & gzip makes size grow
****************************************************************
function(
a,
b
/*
*
* readfile.js - Spidermonkey/V8 readfile wrapper
*
* Author: Diego Perini <[email protected]>
*
* Released under the Creative Commons license:
* http://creativecommons.org/licenses/by/3.0/
*
*/
//
// Regular Expression for URL validation
//
// Author: Diego Perini
// Created: 2010/12/05
// Updated: 2018/09/12
// License: MIT
//
// Copyright (c) 2010-2018 Diego Perini (http://www.iport.it)
//
<?php
/*
* Author: Diego Perini <[email protected]>
*
* 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.