logo

Archive for the ‘ Javascript ’ Category

React JS – Render an array of items in JSX

Hello everybody.
Quick code snippet for JSX for rendering an array of items, instead of a single one, in a ReactJS component:

var React = require('react');

var MyComponent = React.createClass({
  render: function() {
    var myString = ["L","o","r","e","m"," ","i","p","s","u","m"];
    return (
        <div> { 
          myString.map(function(letter) { 
            return <span>{letter}</span>
          }) 
        } </div>
      ); 
    } 
}); 

module.exports = MyComponent;

voilà!

2015/05/05
POSTED BY
CATEGORY
COMMENTSWrite comment

Node.js process doesn’t die on exit (ctrl+c)

Hello all,
Back in action with some uber simple node.js suggestions:
I bet that everybody have experimented the frustration of having this error:

EADDRINUSE, Address already in use

The reason is pretty simple, we quitted from the terminal without properly killing the node.js process. Till here everything plain and simple.

Then what to do to avoid this frustrating behavior…

Read more

2015/02/18
POSTED BY
CATEGORY
COMMENTSWrite comment

Plupload not uploading video on iPad / iPhone / iOS

So you are trying to chunck uploads or other cool stuff with Plupload?
Maybe you are making a “video uploader” with chuncked file but on iPad, iOS in general, when adding a video file nothing happens, while adding pictures or other files it works?
The problem is that the iOS device try to compress the video before sending it to the server, you aren’t seeing it now because multi_selection is not set to false (default is true)

var uploader = new plupload.Uploader({
     multi_selection : false
});

if you can afford to have only one upload a time, then switch it to false and try.
You’ll understand immediatly what happens on iOS devices after trying to upload a movie and why it wasn’t working before. 🙂

 

2014/06/20
POSTED BY
CATEGORY
COMMENTS4 comments

Foundation Interchange plus jQuery Unveil to achieve Responsive Lazy Loading

Hello all,
Foundation could be awesome for a lot of things, i love this framework, but still not everything is perfect.
For instance it could happen that we want to use jQuery Unveil for instance and at the same time Foundation Interchange for the maximum awesomeness!
Still it’s clear that they could not fit together plus foundation has stated that there is no lazy interchange at the moment… so let’s do it 🙂

Read more

2014/04/19
POSTED BY
CATEGORY
COMMENTS19 comments

Downloading files with jQuery

Hello all,

I would like to suggest you this article. It explains how to create a “trigger” download with jQuery using temporary forms.

To sum up we have a PHP part (backend is not mentioned in the article):

<?php
$filename = $_POST['filename'].".".$_POST['format'];
header ("Content-Disposition: attachment; filename=$filename");
echo $_POST['content'];
return

and a Javascript part:

jQuery.download = function(url, data, method){
	//url and data options required
	if( url && data ){ 
		//data can be string of parameters or array/object
		data = typeof data == 'string' ? data : jQuery.param(data);
		//split params into form inputs
		var inputs = '';
		jQuery.each(data.split('&'), function(){ 
			var pair = this.split('=');
			inputs+='<input type="hidden" name="'+ pair[0] +'" value="'+ pair[1] +'" />'; 
		});
		//send request
		jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
		.appendTo('body').submit().remove();
	};
};

that is triggered with

$.download('/export.php','filename=mySpreadsheet&format=xls&content=' + spreadsheetData );

NOTE: Be aware of the splitter char ” = “, because if you are trying to generate something with ” = ” chars inside the script will not work, then replace:

var pair = this.split('=');

with

var pair = this.split('|'); // what you want

And that’s all for today

2014/04/14
POSTED BY
CATEGORY
COMMENTSWrite comment
 
Bitnami