Nerdventure Feed
How do I make an nerdventure feed?
Grabs feeds and displays them as an activity feed. Example grabs feeds from stackoverflow, codepen, twitter, and blogger. What is a nerdventure feed? How do you make a nerdventure feed? This script and codes were developed by Zachary Olson on 10 November 2022, Thursday.
Nerdventure Feed - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nerdventure Feed</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light|Raleway:400,100' rel='stylesheet' type='text/css'>
<h1>Recent Nerdventures</h2>
<ol id="activityfeed"></ol> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Nerdventure Feed - Script Codes CSS Codes
#activityfeed { padding: 0; min-height: 600px; background-color: #DDC9DD; border-radius: 10px;
}
#activityfeed, .activityfeed-item { list-style: none; display: block; margin: 0;
}
.activityfeed-item, .activityfeed-item-date { color: #FFF; text-decoration: none;
}
.activityfeed-item { position: relative; padding: 15px 10px; -webkit-animation: popin 2s; -moz-animation: popin 2s; animation: popin 2s;
}
.activityfeed-item:first-of-type { border-radius: 10px 10px 0 0;
}
.activityfeed-item:last-of-type { border-radius: 0 0 10px 10px;
}
.activityfeed-item-date, .activityfeed-item-title, .activityfeed-item-author { padding-left: 60px;
}
.activityfeed-item-date { font-size: 0.8em;
}
#activityfeed .activityfeed-item-link { display: block; content: ''; position: absolute; width: 40px; top: 0; bottom: 0; margin-right: 10px; background-size: 40px 40px; background-position: center center; background-repeat: no-repeat;
}
.activityfeed-item:after { display: block; content: ''; clear: both; }
.activityfeed-item-author { margin-top: 5px; font-size: 0.8em; font-style: italic;
}
.activityfeed-item-author:before, .activityfeed-item-author:after { display: block; position: absolute; top: 0px; color: #99DFFF; font-size: 150px; font-style: normal; font-family: 'Times New Roman',Times,'Nimbus Roman No9 L','Liberation Serif',serif; letter-spacing: -26px;
}
.activityfeed-item-author:before { content: '\2018\2018'; left: 65px;
}
.activityfeed-item-author:after { content: '\2019\2019'; right: 30px;
}
.twitter .activityfeed-item-title a { word-break: break-all; /* break long links like http://blahblahblahblah. Only shows up in body of tweets */
}
.retweet .activityfeed-item-date, .retweet .activityfeed-item-title, .activityfeed-item-author { margin-left: 70px; margin-right: 65px;
}
.stackoverflow, .stackoverflow .activityfeed-item-date { color: #444; font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
.stackoverflow { background-color: #DDD;
}
.stackoverflow .activityfeed-item-link { background-image: url('http://zacharyolson.com/portfolio_assets/img/activityfeed/stackoverflow.png'); }
.twitter { background-color: #1DACED; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; }
.twitter .activityfeed-item-link { background-image: url('http://zacharyolson.com/portfolio_assets/img/activityfeed/twitter.png'); }
.twitter .activityfeed-item-title a, .activityfeed-item-author a { padding-bottom: 2px; color: #BEEBFF; text-decoration: none; border-bottom: 1px solid #45C6FF; transition: all 0.5s;
}
.twitter .activityfeed-item-title a:hover, .activityfeed-item-author a:hover { color: #FFF; border-color: #BEEBFF;
}
.codepen { background-color: #000; font-family: 'Gotham SSm A', 'Gotham SSm B', "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif }
.codepen .activityfeed-item-link { background-image: url('http://zacharyolson.com/portfolio_assets/img/activityfeed/codepen.png'); }
.codepen .activityfeed-item-title a { padding-bottom: 2px; color: #CCC; text-decoration: none; border-bottom: 1px solid #444; transition: all 0.5s;
}
.codepen .activityfeed-item-title a:hover { color: #FFF; border-color: #CCC;
}
.blog { background-color: #F79737; font-family: "Open Sans", arial, sans-serif; }
.blog .activityfeed-item-link { background-image: url('http://zacharyolson.com/portfolio_assets/img/activityfeed/blogger.png'); }
@-webkit-keyframes popin { from { margin-top: 10px; opacity: 0; } to { margin-top: 0 opacity: 1; }
}
@-moz-keyframes popin { from { margin-top: 10px; opacity: 0; } to { margin-top: 0 opacity: 1; }
}
@keyframes popin { from { margin-top: 10px; opacity: 0; } to { margin-top: 0 opacity: 1; }
}
@media all and (max-width: 600px) { .activityfeed-item-author:before, .activityfeed-item-author:after { display: none; } .retweet .activityfeed-item-date, .retweet .activityfeed-item-title, .activityfeed-item-author { margin-left: 0; margin-right: 0; }
}
body { padding: 5%; background-color: #F1E0FF; font-family: 'Raleway', sans-serif; font-size: 20px; color: #FFF; -webkit-font-smoothing: antialiased;
}
h1 { margin-top: 0; font-family: 'Shadows Into Light', cursive; font-size: 45px; font-style: italic; text-align: center; color: #555;
}
h1:after { display: block; content: '\2022 \2022 \2022'; color: #DDC9DD; font-family: arial; font-style: normal; font-weight: normal; font-size: 30px; margin: 20px auto;
}
Nerdventure Feed - Script Codes JS Codes
var createActivityFeed = function(containerId) { var locked = false lockedBacklog = []; var displayActivities = function(items) { // Will run into some race conditions because of parallel ajax requests returning at same time them modifying dom // Lock it up, and if is locked, just push items on the global array backlog and we'll handle it when we're done with the current running thread. if(locked) { lockedBacklog = lockedBacklog.concat(items); } else { locked = true; var $lis = $(".activityfeed-item"); $.each(items, function(){ var origAuthor = (this.type == "twitter" && this.origAuthor) ? "<div class='activityfeed-item-author'>"+this.origAuthor+"</div>" : ""; var origAuthorClass = (this.type == "twitter" && this.origAuthor) ? " retweet" : ""; var newNode = "<li class='activityfeed-item "+this.type+origAuthorClass+"' data-date='"+this.date.toString()+"'><a class='activityfeed-item-link' target='_blank' href='"+this.url+"'></a><a target='_blank' href='"+this.url+"' class='activityfeed-item-date'>"+this.date.toLocaleString()+"</a><div class='activityfeed-item-title'>"+this.title+"</div>"+origAuthor+"</li>"; var added = false; for (var i = 0; i < $lis.length; i++) { var curNode = $lis[i]; if(this.date >= (new Date($(curNode).attr("data-date")))) { $lis.splice((i+1), 0, $(newNode).insertBefore(curNode)); added = true; break; } } if(!added){ var a = $(newNode).appendTo(containerId); $lis.push(a); } }); // Unlock and run again if another thread added to the backlog during this function run. locked = false; if(lockedBacklog.length > 0) { var waiting = lockedBacklog.slice(); lockedBacklog = []; displayActivities(waiting); } } } /* For regular feeds, create an object for each with their url, a "type" to be used for styling, and an optional parser function (otherwise will use default parser) Then preform ajax, using google's rss parser script and loop through the entries, creating an array of objects to be used in displaying the feed. Finally, at the end of each callback, attempt to call the displayActivities function, which will add the dom objects. For twitter, see this blog post: http://www.labnol.org/internet/twitter-rss-feed/28149/ */ $.each([ { url:"http://stackoverflow.com/feeds/user/850682", type:"stackoverflow" }, { url:"http://blog.zacharyolson.com/feeds/posts/default", type:"blog" }, { url: "https://script.google.com/macros/s/AKfycbwxZmriee7YPfqWHr7-036SBGq82uwA4VHqLfHaRcr5yWOcl_0l/exec?361215786150395904", type: "twitter", parser: function(data) { var _this = this; var origAuthor = null; if(data.author != "Zachary_Olson") origAuthor = 'Retweeted from <a target="_blank" href="https://twitter.com/'+data.author+'">@'+data.author+'</a>' return {date:new Date(data.publishedDate), title:data.content, type:_this.type, url: data.link, origAuthor: origAuthor}; } }, { url:"https://codepen.io/zacharyolson/activity/feed", type:"codepen", parser: function(data){ var _this = this; return { date: new Date(data.publishedDate), type: _this.type, url: $(data.content).find("a[href*='zacharyolson']").attr("href"), title: $(data.content).last().html().replace(" your Pen", "").replace("hearted", "♥'d").replace(/you/g, "me") }; } } ], function(){ var _this = this; $.ajax({ url : 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(_this.url), dataType : 'json', success : function (data) { var items = []; if (data.responseData.feed && data.responseData.feed.entries) { $.each(data.responseData.feed.entries, function (i, e) { if(_this.parser) items.push(_this.parser(e)); else items.push({date:new Date(e.publishedDate), title:e.title, type:_this.type, url: e.link}); }); } displayActivities(items); } }); });
}
createActivityFeed("#activityfeed");
Developer | Zachary Olson |
Username | zacharyolson |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 4,817 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Convert JSON to ruby hash | 2,000 Kb |
D3 version of animated chart dribbble | 4,327 Kb |
Hovers with popups | 2,380 Kb |
IMac Mock | 2,046 Kb |
IPad Mock | 2,008 Kb |
Blackberry Mock | 1,865 Kb |
Css version of macbook dribbble | 2,919 Kb |
A Pen by Zachary Olson | 1,163 Kb |
Direction-aware hover with pure css | 3,596 Kb |
Scroll Position Indicators | 5,711 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Loading animation | Hafizfattah | 0 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Light Switch | Bartuc | 4,933 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
GrcJS | Vino6 | 2,047 Kb |
Shopping List | Markmurray | 6,015 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Prism | Pyrografix | 2,843 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!