Vanilla JavaScript Document Ready

Document.prototype.ready = function(callback) {
if(callback && typeof callback === 'function') {
document.addEventListener("DOMContentLoaded", function() {
if(document.readyState === "interactive" || document.readyState === "complete") {
return callback();
// usage
document.ready(function() { alert('ok!'); });

view raw
hosted with ❤ by GitHub

XSS scripting and

What is a XSS attack?

Cross-site scripting (XSS) is a type of computer security vulnerability typically found in web applications. XSS enables attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy.

source Wikipedia


If you use Thunderbird and plugins like Enigmail you have the option to import all PGP keys related to email addresses that are present in your address book.

First of all you need is to specify a key server, like, then the plugin, for every single email address, will look for corresponding PGP key and will prompt you if you want to import results.

But, some times, the key is not what you’ll expect.

Some entries contains invalid data, and to be more specific, can contain malicious code.

If you request these entries in the lookup form, the output html can contain this code and execute javascript functions, redirects, XSS attacks, ecc.

In conclusion

Keep your eyes open, and avoid mass import of PGP keys.

JS/CSS Moon Phases snippet

Simple script to generate moon phases ( )

It uses 2 SVG (2 hemispheres) and some CSS transformation.

You can avoid JS if you don’t need real-time phase update.

HTML code

<div class="moon">
  <svg height="200" width="100" class="moon-left">
    <circle cx="100" cy="100" r="100" stroke="white" fill="white" class="bg"/>
    <circle cx="100" cy="100" r="100" stroke="white" fill="black" class="fg"/>
  </svg><svg height="200" width="100" class="moon-right">
    <circle cx="0" cy="100" r="100" stroke="white" fill="white" class="bg"/>
    <circle cx="0" cy="100" r="100" stroke="white" fill="black" class="fg"/>
  <div id="phase"></div>



html, body {width:100%;background-color:#333;margin:0;position:relative; font: 1em sans-serif;}
.moon {width:200px;margin:2rem auto;}
#phase {width:200px;margin:25px 0;}

.moon-left,.moon-right {display:inline-block;width:100px;position:relative;margin:0;}
.moon-left .bg,.moon-right .bg {stroke-width:2px;}

.moon-right .fg {stroke-width:2px;}
.moon-left .bg {fill:black;}
.moon-left .fg {fill:white;transform-origin: 0% 0%;}

.moon-right .fg {transform: scaleX(1);}
.moon-left .fg {transform: scaleX(0) translateX(0);}


and JS code. The code is prolix and redundant, but it helps to understand what happens.

jQuery( "#phase" ).slider({
      min: 0,
      max: 200,
      value: 2,
      slide: function( event, ui ) {
        updateMoon( ui.value );

Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
function updateMoon(phase){
  var phaseScale = 1,
      phaseTrans = 100,
      phaseRight = 0;
  if(phase <= 100) {
    phaseRight = (1-phase/100);
  jQuery('.moon-right .fg').css({
    'transform':'scaleX(' + phaseRight + ')'
  if(phase >= 100) {
    phaseScale = (1-(phase-100)/100);
    phaseTrans = 100*phaseScale;
  jQuery('.moon-left .fg').css({
    'transform':'translate('+phaseTrans+'px,0) scaleX(' + (1-phaseScale) + ')'


and here the result JS/CSS Moon Phases