Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
The JavaScript Blog js:   Followers: 3 ; Following: 3

Explore The JavaScript Blog's photo albums:
Photos from posts (7)
Javascript tools (2)

JavaScript Template Engine


What is a template engine?

Templating is the ability to render HTML and replace content with data created by JavaScript

I'm currently using this JavaScript Template:
https://github.com/blueimp/JavaScript-Templates
Try the online demo: http://blueimp.github.com/JavaScript-Templates/

This JavaScript template engine is based on John Resig's (author of jQuery) blog post about Micro-Template.

There are other JavaScript Template engines. In our previous post, we made a review and demo of Handlebars Javascript template system. The jQuery UI group is discussing about templates in this page: bit.do/js-template. It includes a study of template engines, template comparison, features of each js template engine, demo and implementations.

jQuery tmpl presentation: http://boedesign.com/misc/presentation-jquery-tmpl/#10

Post by The JavaScript Blog (2012-10-19 18:42)

Post your comment:

Name: Email: Site:

Javascript CDN (Content Delivery Network)

List of CDN (Content Delivery Networks) that can be used to include Javascript frameworks:

http://www.cdnjs.com/

http://cachedcommons.org/

Those CDNs are hosted in high performance servers and can be used to include external scripts and frameworks like jQuery, Processing.js, Dojo, Three.js, Scriptaculous and many others.

Google also has a list of hosted libraries in the "Make the Web Faster" developers area:
https://developers.google.com/speed/libraries/

Currently Google's javascript hosted libraries in their CDN (Content Delivery Network) are: AngularJS, Chrome Frame, Dojo, Ext Core, jQuery, jQuery UI, MooTools, Prototype, Scriptaculous (script.aculo.us), SWFObject and WebFont Loader.

Post by The JavaScript Blog (2012-10-15 17:38)

Post your comment:

Name: Email: Site:

Capture javascript errors from your clients

Log all javascript errors from your user's browser to your server with this error handling that capture errors and post them to your server, using ajax:
 
window.onerror = function(message, url, linenumber) {
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
    var scripturl = "http://yourdomain.com/log-js-errors";
    var log = linenumber + message + url;
    xhr.open("POST", scripturl);
    xhr.setRequestHeader("Content-Type", "text/plain; charset=UTF-8");
    xhr.send(log);
  }
  return true;
}

Post by The JavaScript Blog (2012-10-15 17:27)

From: Dumitru Glavan
You might give a try to http://jslogger.com . It logs Javascript errors and events from the clientside. It supports mobile devices and backend logging with NodeJS. 2013-05-26 13:24

Post your comment:

Name: Email: Site:

Write JavaScript online


js.do: Online JavaScript editor

js.do is a JavaScript online source code editor. When you need to write and test JavaScript code, it's very useful to have a simple page where you can paste or type your code and run online tests, save and share snippets of code or full javascript projects. Great alternative to jsFiddle or jsBin.

Just type "js.do" in your browser and use it as your online js editor.

Javascript editor features:

  • Online JavaScript editor with syntax highlight
  • JavaScript and HTML can be edited in the same window.
  • Click "Run code" to preview the results without leaving the page
  • Save your code online - each code has an unique url
  • Share your code
  • Browse code from other authors
  • Load samples to learn by examples
  • Add common JavaScript frameworks like jQuery, Processing.js and Three.js
  • Easy url to remember: js.do
  • Free, simple and online (no download required)

js.do is great not only for creating your own database of javascript code but also for sharing code and finding code from other authors. You can also create your own profile (optional) and follow other javascript programmers, as a social network for computer programmers.

Post by The JavaScript Blog (2012-10-09 21:14)

From: JACK
TOM IS AN IDIOT!!! 2016-02-24 15:56

From: Tom
Can U Make Games With This? 2016-01-23 12:11

From: Dwayne Sawyer
I can not log on to js.do from my iMac OS and or my MacBook Pro X El Capitan 10.11.1 I could and did log-in yesterday and all worked just fine. I have many code snippets I would like to keep. 2015-11-13 14:33

Post your comment:

Name: Email: Site:

Selecting DOM elements with querySelectorAll

Click button to see demo:

This code will select all "span" elements of the page and change it's background color css:



No jQuery required!!! The query is made using "querySelectorAll" JavaScript's native function.

Post by The JavaScript Blog (2012-10-09 13:29)

Post your comment:

Name: Email: Site:

CSS transform using Javascript


ROTATION
WITH CSS


HTML elements can be rotated using the CSS style to flip vertical:
transform: scaleY(-1);
The rotation effect is doing using javascript to change the number between -1 and +1

To be compatible with all browsers, the CSS needs to include variations for Webkit (Chrome and Safari), Moz (Firefox) and MS (Internet Explorer):

-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);

Javascript source:



 

Post by The JavaScript Blog (2012-08-17 20:26)

Post your comment:

Name: Email: Site:

Particle waves demo


Using javascript and canvas html5 element. Using "three js" framework.

Interactrive demo:
http://mrdoob.github.com/three.js/examples/canvas_particles_waves.html

Source code of the render function to generate the particles-wave:

function render() {

camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );

var i = 0;

for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

particle = particles[ i++ ];
particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 2 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;
}
}

renderer.render( scene, camera );
count += 0.1;

}

Post by The JavaScript Blog (2012-08-01 12:29)

Post your comment:

Name: Email: Site:

Data Visualization with Javascript



World Population data visualization:
http://data-arts.appspot.com/globe

Global Traffic Visualizer:
http://superfad.com/missioncontrol/traffic/

Those demos use "three js" technology (plus Web GL): http://mrdoob.github.com/three.js/

Post by The JavaScript Blog (2012-08-01 12:14)

Post your comment:

Name: Email: Site:

Post by The JavaScript Blog (2012-06-25 13:53)

Post your comment:

Name: Email: Site:

Will Google bot index content generated using JavaScript ?

Page created to test if Googlebot can make javascript content searchable:
http://js.do/experiments/dynamic/

This url above is contains content generated using simple javascript (writeln), jQuery, Ajax and also Handlebars.js template engine.
Discussion about Google Bot indexing dynamically generated pages:
http://stackoverflow.com/questions/7685490/handlebars-js-and-seo
(it says that you need to use the Google Ajax Crawling Scheme to index dynamic-generated content).

RESULT: After 6 months, Googlebot still was not able to index the javascript content by the page above. I did search tests with other pages that have dynamic content generated with ajax or JavaScript and Google search was not able to index the pages.

 

Post by The JavaScript Blog (2012-06-24 20:57)

Post your comment:

Name: Email: Site:



  << PREVIOUS PAGE Page 2 of 4 NEXT PAGE >>

| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2017 - postbit.com