JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
    // this works
    var foo = 'bar';
    document.write('<div>' + foo + '</div>');
    
    // so why does this causes tons of errors?
    new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 4,
    interval: 6000,
    width: 250,
    height: 300,
    theme: {
    shell: {
    background: '#333333',
    color: '#ffffff'
    },
    tweets: {
    background: '#000000',
    color: '#ffffff',
    links: '#4aed05'
    }
    },
    features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
    }
    }).render().setUser('RonnyOrbach').start();
</script>
</script>

JavaScript

/*
---
source: http://gist.github.com/133677

provides: document.write
description: MooTools based document.write replacement
requires: MooTools

author: Thomas Aylott -- SubtleGradient.com
thanks: Daniel Steigerwald -- daniel.steigerwald.cz
license: MIT
...
*/
(function($) {

    var wrapper = new Element('div'),
        fragment = document.createDocumentFragment();

    document._writeOriginal = document.write;
    document.write = function() {
        var args = arguments,
            id = 'document_write' + Date.now().toString(36);
        if (!Browser.loaded) document._writeOriginal('<span id="' + id + '"></span>');
        else id = new Element('span#' + id).inject(document.write.context);

        function documentWrite() {
            var html = Array.join(args, '');
            document.addEvent('domready', function() {
                Array.filter(wrapper.set('html', html).childNodes, document.write.filter).each(function(node) {
                    fragment.appendChild(node);
                });
                (id = $(id)).parentNode.replaceChild(fragment, id);
            });
        }

        setTimeout(documentWrite, 0);
    };
    window.addEvent('domready', function() {
        document.write.context = document.body;
    });
    document.write.filter = function(el) {
        return true;
    };

})(document.id || window.$);


// USAGE EXAMPLES //

var start = +new Date;
var i = 100;
while (i--) {
    document.write(i + ' ');
}
var end = +new Date;
alert(end - start);

window.addEvent('domready', function() {

    document.write('Lorem ipsum dolor sit amet');

    var myDiv = new Element('div');
    document.write.context = myDiv;
    document.write('Lorem ipsum dolor sit amet');
    myDiv.inject(document.body, 'top');

});

document.write(1, 2, 3, 4); // handles multiple arguments
document.write(); // doesn't break
document.write(null);

// Add a filter to stop certain things from being injected into your page
document.write.filter = function(el)...