By Hawkee on Dec 10, 2014I saw WOW.js on Product Hunt today and thought, "neat, that looks like fun." I'd also had the thought to play around with the Hacker News FireBase API so why not merge the two?
This is a very straightforward jQuery script that grabs the Hacker News data over $.getJSON calls. Once the top 100 stories are collected a loop gathers the urls, titles and scores for each story and appends them to a list. Finally, a random animation from animate.css is selected and attached to each story.
$(document).ready(function() {
var effects = ["bounce","pulse","rubberBand","shake","swing","tada","wobble","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","flip","lightSpeedIn","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rollIn","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp"];
$.getJSON("https://hacker-news.firebaseio.com/v0/topstories.json",
function(data) {
var items = [];
$.each(data, function(key, val) {
$.getJSON("https://hacker-news.firebaseio.com/v0/item/"+val+".json", function(data2) {
var effect = effects[Math.round(Math.random()*(effects.length - 1))];
$('#news-list').append("<li class='wow "+effect+"' data-wow-delay='10ms' data-wow-duration='1s'><a href='"+data2.url+"'>"+data2.title+"</a><br><b>+"+data2.score+"</b></li>");
})
});
});
new WOW().init();
});
As far as the styling is concerned I used Bootstrap and Google's Bree Serif font. The styling is fairly simple, but I figured I'd share it here as well.
#news-list {
margin: 30px;
list-style-type: none;
padding: 0;
}
#news-list li {
text-align: center;
padding: 300px 0;
list-style-type: none;
font-family: "Bree Serif";
font-size: 50px;
letter-spacing: -0.03em;
font-weight: bold;
}
#news-list li a {
font-size: 70px;
color: #655B5B;
line-height: 80px;
}
#news-list li a:hover {
text-decoration: none;
color: #938787;
}
#news-list b {
font-size: 74px;
padding-top: 80px;
color: #271717;
}
And finally we have the HTML which is really just a couple divs containing an empty list.
<body>
<div class='container'>
<div class='row'>
<ul id='news-list'>
<li>Scroll Down</li>
</ul>
</div>
</div>
</body>
And here is the final product!
See the Pen vEGEBK by Scott Aikin (@Hawkee) on CodePen.
While this isn't necessarily comprehensive as it doesn't include links to the Hacker News discussions I thought it would be a fun little tech demo merging a couple technologies. While the focus is to demo WOW.js and the Hacker News FireBase API there were various technologies used here including CodePen, Bootstrap, jQuery, Google Fonts and Animate.css.
Hey, just noticed, the code pen example is broken because github (due to the security risk and the whole chinese redirecting github scripts to a random page) now serves content with text/plain rather than as a script. Can fix it by using cdnjs: https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js
Looks pretty cool when its loaded though! Further things to add might be to make it so it preloads 10 and then put the rest in an array to be loaded as you scroll further (so your scroll bar doesnt go wacky whilst it loads!). Still, a neat little proof of concept!
This is a web demo. It doesn't interface with IRC.