DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Which Is Better for IoT: Azure RTOS or FreeRTOS?
  • Fun Is the Glue That Makes Everything Stick, Also the OCP
  • You’ve Got Mail… and It’s a SPAM!
  • Best Practices for Securing Infrastructure as Code (Iac) In the DevOps SDLC
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. Second Draft: A JavaScript Library for Behance Integration

Second Draft: A JavaScript Library for Behance Integration

Raymond Camden user avatar by
Raymond Camden
·
Oct. 22, 13 · Interview
Like (0)
Save
Tweet
Share
2.63K Views

Join the DZone community and get the full member experience.

Join For Free

Recently, I blogged an example of using the Behance API via JavaScript. In the first draft of my demo, I built in basic support to get projects for a user. While this worked fine, it put the onus of displaying those projects on the coder, and for folks who may not be good with JavaScript, I wanted to provide a simpler solution.

With that in mind, I've added a new method to the API: renderProjects. Given a username, a place to put crap, and a template div (more on that in a second), it will handle fetching and rendering the projects for you. Here is an example of the front end HTML:

<!doctype html>
<html lang="en">
	<head>
	<style>
		.project {
			background-color: rgba(7, 219, 64, 0.72);
			width: 280px;
			float: left;
			margin: 0px 10px 10px 10px;
		}
	</style>
	</head>
	
	<body>
		
		<h1>My Projects</h1>
		<div id="projects">
		
		</div>
		
		<script src="jquery-2.0.0.min.js"></script>
		<script src="behance_api.js"></script>
		<script src="demo2.js"></script>
		
		<script id="projectTemplate" type="text/x-behance-template">
		<div class="project">
		<h2><a href="{{url}}">{{name}}</a></h2>
		<i>Created: {{created}}</i><br/>
		<i>Fields: {{fields}}</i><br/>
		<i>Stats: Appreciations={{appreciations}}, Comments={{comments}}, Views={{views}}</i><br/>
		<img src="{{covers_230}}">
		</div>
		</script>

	</body>
</html>

For the most part, this is the same as yesterday's code, but notice the new script block at the bottom. You are allowed to build script blocks that contain stuff besides JavaScript. Handlebars.js makes use of this as well. The code within this block will not be displayed to the end user, but can be picked up by JavaScript.

Inside the block, I've put my considerable design skills to use to create a basic template for my projects. The values inside the squiggly brackets represent tokens that the JavaScript code will replace. The JavaScript for this template is much simpler now that the rendering is being done at the library level.

/* global $,console,document,behanceAPI */
var behancekey = "vNvOiZI0cD9yfx0z4es9Ix6r4L2J7KdI";

$(document).ready(function() {
	
	//Set my key
	behanceAPI.setKey(behancekey);
	
	//Now get my projects
	behanceAPI.renderProjects("gwilson", "projects", "projectTemplate");

});

Now let's look at the library.

/* global console,$ */
var behanceAPI = function() {
	var key;
	var baseURL = "http://www.behance.net/v2/";
	
	function _toDateStr(d) {
		return new Date(d*1000).toString();	
	}
	
	function _renderTemplate(p, template) {
		var result = template;
		//console.dir(p);
		result = result.replace(/{{name}}/gi, p.name);
		result = result.replace(/{{url}}/gi, p.url);
		if(p.covers[115]) result = result.replace(/{{covers_115}}/gi, p.covers[115]);
		if(p.covers[202]) result = result.replace(/{{covers_202}}/gi, p.covers[202]);
		if(p.covers[230]) result = result.replace(/{{covers_230}}/gi, p.covers[230]);
		if(p.covers[404]) result = result.replace(/{{covers_404}}/gi, p.covers[404]);
		
		var created = _toDateStr(p.created_on);
		result = result.replace(/{{created}}/gi, created);

		var modified = _toDateStr(p.modified_on);
		result = result.replace(/{{modified}}/gi, modified);

		result = result.replace(/{{fields}}/gi, p.fields.join(", "));

		result = result.replace(/{{appreciations}}/gi, p.stats.appreciations);
		result = result.replace(/{{comments}}/gi, p.stats.comments);
		result = result.replace(/{{views}}/gi, p.stats.views);
		
		return result;
	}
	
	function setKey(k) {
		key = k;	
	}
	
	function getProjects(user, cb) {
		var url = baseURL + "users/" + user + "/projects?api_key=" + key + "&callback=";
		$.get(url, {}, function(res, code) {
			cb(res.projects);
		}, "JSONP");
	}
	
	function renderProjects(user, displayId, templateId) {
		var templateOb = $("#" + templateId);
		var renderDom = $("#" + displayId);
		
		if(templateOb.length === 0 || renderDom.length === 0) {
			//Throw an error?
			return;
		}

		var template = $.trim(templateOb.html());
		getProjects(user, function(p) {
			var s = "";
			for(var i=0; i<p.length; i++) {
				s += _renderTemplate(p[i], template);	
			}
			renderDom.html(s);
		});
	}
	
	return {
		setKey: setKey,
		getProjects: getProjects,
		renderProjects: renderProjects
	};
	
}();

For the most part, I assume this is self-explanatory. You can see my code pick up the DOM item for the template and grab out the HTML. That HTML, plus a project, is sent to _renderTemplate where the real work is done. I do a bit of manipulation where I can to help out, like on dates and the field list.

So to be clear, this is not as powerful of a solution as Handlebars, but as my library would still let you use it if you wanted to, I thought this was a nice simple way for users to quickly handle the layout. Here is a screen shot.

Anyway, this was fun, but I'll probably stop working on this unless I get bored, or unless someone asks me to continue. There is already a public JavaScript library for Behance (but not with my cool function), so unless there is interest, I'll just leave this for now as a fun experiment.

Download attached file


JavaScript library Integration

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Which Is Better for IoT: Azure RTOS or FreeRTOS?
  • Fun Is the Glue That Makes Everything Stick, Also the OCP
  • You’ve Got Mail… and It’s a SPAM!
  • Best Practices for Securing Infrastructure as Code (Iac) In the DevOps SDLC

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: