Okay, it’s not actually an app, but Admiral “Hackbar” would have been proud all the same. One of our developers, an unnervingly talented hacker who has worked on innumerable development projects pertaining to anything from Firefox to Android, has created a Star Wars plugin for Twitter.
Created as part of the admissions process for the HTML5 Hack-a-thon here in Toronto, Zhibin Huang submitted his original code, which he has now applied to Twitter. Using Javascript, HTML5, and CSS3 3D transform, Zhibin developed it just for the challenge of creating a simple Star Wars-themed plugin.
“I just want to show people what crazy stuff you can do with these tools,” Zhibin said. “In my spare time, I work on all kinds of personal projects, like developing Android apps, and I love sharing my code with fellow programmers, just so we can all enjoy it and see where it goes.”
Creating and testing this plugin in a mere nine hours, Zhibin developed the code by hand, solo.
This plugin pulls the Twitter source code to theme your view of the page to an appropriate Star Wars opening without disabling your use of the site; each action remains fully functional. It has been tested successfully in the latest versions of both Chrome and Firefox.
Fett up with all the puns and ready to try Zhibin’s plugin? Simply drag this link to your bookmark bar and apply on Twitter, as demonstrated in the video below.
Rather use the plugin directly in your address bar? May the source be with you below, lest your heart keep Palpatine with excitement! Just be sure to add “javascript:” back in the beginning if using Chrome, as it will be automatically stripped out.
javascript:(function($) { if (document.getElementById('StarWar') && (elem = document.getElementById('StarWar')).parentNode.removeChild(elem)) return; s = (document.getElementsByTagName('head')[0]).appendChild(document.createElement('style')); s.setAttribute('id', 'StarWar'); s.appendChild(document.createTextNode('div#doc{width:800px;margin:0 auto;height:5000px;font-size:150%;}div#page-outer{background-color:rgba(0,0,0,0.5);width:900px;position:fixed;bottom:0px;-webkit-transform:matrix3d(1.5,0,0,0,0,0.85,0,-0.003,0,0,1,0,0,90,0,2.2);-webkit-transform-style:preserve-3d;-moz-transform:matrix3d(1.5,0,0,0,0,1,0,-0.004,0,0,1,0,0,90,0,2.6);-moz-transform-style:preserve-3d;-o-transform:matrix3d(1.5,0,0,0,0,1,0,-0.004,0,0,1,0,0,90,0,2.6);-o-transform-style:preserve-3d;-ms-transform:matrix3d(1.5,0,0,0,0,1,0,-0.004,0,0,1,0,0,90,0,2.6);-ms-transform-style:preserve-3d;transform:matrix3d(1.5,0,0,0,0,1,0,-0.004,0,0,1,0,0,90,0,2.6);transform-style:preserve-3d;}div#page-outer>div#page-container{height:100%;overflow:hidden;}div#page-outer>div#page-container>div#page-node-home{margin-top:800px;}')); var windowSize = function () { var winW = 630, winH = 460; if (document.body && document.body.offsetWidth) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) { winW = document.documentElement.offsetWidth; winH = document.documentElement.offsetHeight; } if (window.innerWidth && window.innerHeight) { winW = window.innerWidth; winH = window.innerHeight; } return {width: winW, height: winH}; }; $(window).scroll(function(){ resize(); $('div#page-outer>div#page-container').scrollTop($(this).scrollTop()/2); }); $('div#page-outer').css('bottom',0+'px'); var resize = function(){ var s=windowSize(); $('div#page-outer').stop().animate({'height':s.height*1.15+'px','bottom':'0px'},function(){ $('div#page-outer>div#page-container>div#page-node-home').stop().animate({'margin':s.height+'px 0'},function(){ $('div#doc').css('height',($('div#page-outer>div#page-container>div#page-node-home>div.content-main').height()+s.height*2)*2+'px'); $(window).scrollTop($(window).scrollTop()-(os.height-s.height)*2); os = s; }); }); }; var i_autoscroll_interval = 0; (function(){ i_autoscroll_interval = window.setInterval(function(){ $(window).scrollTop($(window).scrollTop()+2); if(os.height==$(window).scrollTop()){ $(window).scrollTop(0); } },100); })(); var os=windowSize(); $(window).resize(resize); resize(); })(jQuery);
Know a cool way to apply this? Tested it and have an idea? Don’t be afraid to (Darth) trade(r) ideas in the comments below! Just don’t spend too long on it; eventually you’ll have to get bacta work.