October 2015 – Alex Arriaga

alex-arriaga October 9, 2015

Getting started with Gulp.js from scratch

JavaScript, Node.js, Web Development 1 Reply

Let’s talk and think…

So, you are a front-end developer, right? Don’t you think we should optimize our repetitive tasks as much as possible? Well, I have good news for you; nowadays we have a vast amount of tools that make our life easier and happier… you don’t believe me, right? Continue reading then…

When we work in front-end projects, we usually do a set of tasks that are repeated frequently in all our projects, let’s see some examples:

Minifying JavaScript.
Compressing CSS files.
Compiling source files of pre-processors (LESS, Stylus, SASS/SCSS).
Optimizing images to reduce their sizes.
Validating JavaScript code (JSHint).
Transforming a language like TypeScript to JavaScript.
Execute a set of tests with your favorite Unit Testing Framework.
etc.
etc.

Well, if you want to automate this kind of tasks, my friend I have a great tool for you: Gulp.js.

From my personal opinion, Gulp.js is one of the best task runners that we have currently; even compared with Grunt, because it is easier to learn and the logic, on my gosh! if you know something about pipes in GNU/Linux or UNIX, you will find Gulp.js as a blessing 🙂 its syntax is clear, pure JavaScript code, nothing really new to understand, piece of cake I promise you.

What do I need?

Install Node.js for your operating system.
After installing, verify the Node.js and NPM versions:

// Verify Node.js version in command line
node --version
➜ v0.10.23

// Verify NPM version in command line
npm --version
➜ 1.4.7

// Verify Node.js version in command line

node --version

➜ v0.10.23

// Verify NPM version in command line

npm --version

➜ 1.4.7

Let’s start

Console-128

First command you have to learn is the one related with the initialization of a project using the Node Packaged Modules (NPM). This instruction must be executed in the root directory of your project.

npm init

npm init

This command will create a file called package.json which contains all the configuration for your project; including the dependencies for development.

This file is the analogous to the pom.xml when working with Maven (JavaEE developers where are you?), or the composer.json when developing using PHP Composer (yes, the awesome Dependency Manager for PHP).

{
  "name": "econtinua",
  "version": "1.0.0",
  "description": "Un ejemplo completo con modernas herramientas para desarrollo frontend",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/alex-arriaga/fcc-buap-taller-frontend.git"
  },
  "author": "Alex Arriaga",
  "license": "GPL-3.0",
  "bugs": {
    "url": "https://github.com/alex-arriaga/fcc-buap-taller-frontend/issues"
  },
  "homepage": "https://github.com/alex-arriaga/fcc-buap-taller-frontend",
  "devDependencies": {
    "gulp": "^3.8.7",
    "gulp-concat": "^2.3.4",
    "gulp-imagemin": "^1.0.1",
    "gulp-less": "^1.3.5",
    "gulp-minify-css": "^0.3.7",
    "gulp-rename": "^1.2.0",
    "gulp-stylus": "^1.3.0",
    "gulp-uglify": "^0.3.2",
    "gulp-watch": "^0.6.9",
    "imagemin-pngcrush": "^0.1.0"
  }
}

{

"name": "econtinua",

"version": "1.0.0",

"description": "Un ejemplo completo con modernas herramientas para desarrollo frontend",

"main": "gulpfile.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"repository": {

"type": "git",

"url": "https://github.com/alex-arriaga/fcc-buap-taller-frontend.git"

"author": "Alex Arriaga",

"license": "GPL-3.0",

"bugs": {

"url": "https://github.com/alex-arriaga/fcc-buap-taller-frontend/issues"

"homepage": "https://github.com/alex-arriaga/fcc-buap-taller-frontend",

"devDependencies": {

"gulp": "^3.8.7",

"gulp-concat": "^2.3.4",

"gulp-imagemin": "^1.0.1",

"gulp-less": "^1.3.5",

"gulp-minify-css": "^0.3.7",

"gulp-rename": "^1.2.0",

"gulp-stylus": "^1.3.0",

"gulp-uglify": "^0.3.2",

"gulp-watch": "^0.6.9",

"imagemin-pngcrush": "^0.1.0"

}

Now, that you have your NPM ready, it is time for installing Gulp.js by using it; it is a good idea to have Gulp.js as a global package, see the option -g in next line:

sudo npm install -g gulp

1	sudo npm install -g gulp

Ok, after installing it, let’s verify its version:

gulp -v

gulp -v

Once we have Gulp.js installed globally, it is time to create our configuration file; yes, it is another configuration file where we will specify all the tasks we want to run; either one by one or in a set of them; this file is the famous: gulpfile.js

touch gulpfile.js

1	touch gulpfile.js

And put all these lines of code inside of it; these are our tasks:

/**
* File: gulpfile.js
* Author: Alex Arriaga (@alex_arriaga_m) - http://www.alex-arriaga.com
* Date: 26/Aug/2014
*/

var gulp 	= require('gulp');
var concat 	= require('gulp-concat');
var rename 	= require('gulp-rename');
var watch 	= require('gulp-watch');
var uglify 	= require('gulp-uglify');
var less 	= require('gulp-less');
var stylus = require('gulp-stylus');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');

var baseDirDev = './dev/';
var baseDirJs = './dev/js/';
var baseDirCSS = './dev/css/';

var paths = {
	dev 	: './dev/',
	prod 	: './prod/',
	scripts : [baseDirJs + 'jquery-1.11.1.js', baseDirJs + 'js/bootstrap.js'],
	images 	: [baseDirDev +'img/*.jpg', baseDirDev +'img/*.png'],
	fonts	: 'fonts/*',
	less 	: 'less/*.less',
    stylus 	: 'stylus/*.styl',
	css 	: [baseDirCSS + 'bootstrap.css', baseDirCSS + 'econtinua.css', baseDirCSS + 'econtinua-responsive.css', baseDirCSS + 'font-awesome.css']
	// stylus 	: 'stylus/*.styl'
};

// This object contains parameters for minifying operation.
// Please, read more about it in this link: https://www.npmjs.org/package/gulp-minify-css
var minifyCSSOptions = {
	keepSpecialComments: 0,
	keepBreaks: false,
	debug: true
};
/*
// 1. Transform LESS file to CSS  (place CSS files into dev/css folder)
    gulp.task('less', function() {
        console.log("Running LESS task...");
        return gulp.src(paths.dev + paths.less)
        .pipe(less())
        .pipe(minifyCSS(minifyCSSOptions))
        .pipe(gulp.dest(paths.dev + 'css'));
    });
*/

// 1. Transform Stylus files to CSS  (place CSS files into dev/css folder)
    gulp.task('stylus', function() {
        console.log("Running Stylus task...");
        return gulp.src(paths.dev + paths.stylus)
            .pipe(stylus())
            .pipe(minifyCSS(minifyCSSOptions))
            .pipe(gulp.dest(paths.dev + 'css'));
    });

// 2. Compress CSS (it will run after 'stylus' task finishes
	gulp.task('compress-css',['stylus'], function() {
        console.log("Running compressing CSS task...");
		return gulp.src(paths.css)
			.pipe(concat('all-styles.css'))
			.pipe(gulp.dest(paths.prod + 'css'))
			.pipe(rename('all-styles.min.css'))
			.pipe(minifyCSS(minifyCSSOptions))
			.pipe(gulp.dest(paths.prod + 'css'));
	});

// 3. Compress JavaScript files and place them into production folder
	gulp.task('compress-js', function() {
        console.log("Running compressing JavaScript task...");
		return gulp.src(paths.scripts)
			.pipe(concat('all-scripts.js'))
			.pipe(gulp.dest(paths.prod + 'js'))
			.pipe(rename('all-scripts.min.js'))
			.pipe(uglify())
			.pipe(gulp.dest(paths.prod + 'js'));
	});

// 4. Copy images
	gulp.task('copy-static-resources', function() {
		// console.log("Copy images from:" + (paths.dev+paths.images));
        console.log("Copying static resources task...");
		gulp.src(paths.images)
			.pipe(imagemin({
				progressive: true,
				optimizationLevel: 6,
				svgoPlugins: [{ removeViewBox: false }],
            	use: [pngcrush({ reduce: true })]
			}))
			.pipe(gulp.dest(paths.prod + 'img'));

		gulp.src(paths.dev+paths.fonts)
			.pipe(gulp.dest(paths.prod + 'fonts'));
	});



// Watch files for fhanges
gulp.task('watch', function() {
    //gulp.watch(paths.scripts, ['create-documentation']);
    //gulp.watch(paths.scripts, ['compress-js']);
    console.log("Registering path to watch:" + paths.dev + paths.stylus);
    gulp.watch(paths.dev + paths.stylus, ['stylus','compress-css']);
});


// Default gulp task to run
gulp.task('default',['stylus', 'compress-css', 'compress-js', 'copy-static-resources', 'watch']);

100

101

102

103

104

105

106

107

108

109

110

111

112

/**

* File: gulpfile.js

* Author: Alex Arriaga (@alex_arriaga_m) - http://www.alex-arriaga.com

* Date: 26/Aug/2014

var gulp = require('gulp');

var concat = require('gulp-concat');

var rename = require('gulp-rename');

var watch = require('gulp-watch');

var uglify = require('gulp-uglify');

var less = require('gulp-less');

var stylus = require('gulp-stylus');

var minifyCSS = require('gulp-minify-css');

var imagemin = require('gulp-imagemin');

var pngcrush = require('imagemin-pngcrush');

var baseDirDev = './dev/';

var baseDirJs = './dev/js/';

var baseDirCSS = './dev/css/';

var paths = {

dev : './dev/',

prod : './prod/',

scripts : [baseDirJs + 'jquery-1.11.1.js', baseDirJs + 'js/bootstrap.js'],

images : [baseDirDev +'img/*.jpg', baseDirDev +'img/*.png'],

fonts : 'fonts/*',

less : 'less/*.less',

stylus : 'stylus/*.styl',

css : [baseDirCSS + 'bootstrap.css', baseDirCSS + 'econtinua.css', baseDirCSS + 'econtinua-responsive.css', baseDirCSS + 'font-awesome.css']

// stylus : 'stylus/*.styl'

};

// This object contains parameters for minifying operation.

// Please, read more about it in this link: https://www.npmjs.org/package/gulp-minify-css

var minifyCSSOptions = {

keepSpecialComments: 0,

keepBreaks: false,

debug: true

};

// 1. Transform LESS file to CSS (place CSS files into dev/css folder)

gulp.task('less', function() {

console.log("Running LESS task...");

return gulp.src(paths.dev + paths.less)

.pipe(less())

.pipe(minifyCSS(minifyCSSOptions))

.pipe(gulp.dest(paths.dev + 'css'));

});

// 1. Transform Stylus files to CSS (place CSS files into dev/css folder)

gulp.task('stylus', function() {

console.log("Running Stylus task...");

return gulp.src(paths.dev + paths.stylus)

.pipe(stylus())

.pipe(minifyCSS(minifyCSSOptions))

.pipe(gulp.dest(paths.dev + 'css'));

});

// 2. Compress CSS (it will run after 'stylus' task finishes

gulp.task('compress-css',['stylus'], function() {

console.log("Running compressing CSS task...");

return gulp.src(paths.css)

.pipe(concat('all-styles.css'))

.pipe(gulp.dest(paths.prod + 'css'))

.pipe(rename('all-styles.min.css'))

.pipe(minifyCSS(minifyCSSOptions))

.pipe(gulp.dest(paths.prod + 'css'));

});

// 3. Compress JavaScript files and place them into production folder

gulp.task('compress-js', function() {

console.log("Running compressing JavaScript task...");

return gulp.src(paths.scripts)

.pipe(concat('all-scripts.js'))

.pipe(gulp.dest(paths.prod + 'js'))

.pipe(rename('all-scripts.min.js'))

.pipe(uglify())

.pipe(gulp.dest(paths.prod + 'js'));

});

// 4. Copy images

gulp.task('copy-static-resources', function() {

// console.log("Copy images from:" + (paths.dev+paths.images));

console.log("Copying static resources task...");

gulp.src(paths.images)

.pipe(imagemin({

progressive: true,

optimizationLevel: 6,

svgoPlugins: [{ removeViewBox: false }],

use: [pngcrush({ reduce: true })]

}))

.pipe(gulp.dest(paths.prod + 'img'));

gulp.src(paths.dev+paths.fonts)

.pipe(gulp.dest(paths.prod + 'fonts'));

});

// Watch files for fhanges

gulp.task('watch', function() {

//gulp.watch(paths.scripts, ['create-documentation']);

//gulp.watch(paths.scripts, ['compress-js']);

console.log("Registering path to watch:" + paths.dev + paths.stylus);

gulp.watch(paths.dev + paths.stylus, ['stylus','compress-css']);

});

// Default gulp task to run

gulp.task('default',['stylus', 'compress-css', 'compress-js', 'copy-static-resources', 'watch']);

Installing packages in dev mode

Now, in order for having our tasks running we need to install the other plugins for Gulp.js like: gulp-concat, gulp-rename, gulp-watch, etc; so, just run next command to install them all together:

# Set the gulp.js in dev mode
npm install --save-dev gulp

# Set other modules in dev mode
npm install --save-dev gulp-concat gulp-rename gulp-watch gulp-uglify gulp-stylus gulp-imagemin

# Set the gulp.js in dev mode

npm install --save-dev gulp

# Set other modules in dev mode

npm install --save-dev gulp-concat gulp-rename gulp-watch gulp-uglify gulp-stylus gulp-imagemin

Running tasks

Finally, let’s run a task for compiling all our .styl files into CSS and one task for copying all our static resources; the images will be optimized for web in this task, btw.

Stylus is a CSS pre-processor like LESS or SASS/SCSS; much more elegant than having just CSS syntax in our projects. Stylus has a Python-like syntax; so, if you like Python you will love Stylus.

gulp <NAME_OF_TASK>

# Example to execute 'stylus' task
gulp stylus

# Example to run 'copy-static-resources' task
gulp copy-static-resources

gulp <NAME_OF_TASK>

# Example to execute 'stylus' task

gulp stylus

# Example to run 'copy-static-resources' task

gulp copy-static-resources

If you want to run many tasks by default, you can just type in your command line:

# This will run the default task, which executes others.
gulp

1 2	# This will run the default task, which executes others. gulp

BTW, a complete functional repository with Gulp.js tasks is available in this link: https://github.com/alex-arriaga/fcc-buap-taller-frontend.

Ok, that’s it for today; I hope you find this information useful, see you next time!

alex-arriaga October 8, 2015

How to detect user devices: smartphone, tablet or desktop in IBM WCM 8.5 using tags

Enterprise Development, IBM Web Content Manager, IBM WebSphere, Mobile Development 7 Replies

The context: why should I need to know this stuff?

In the last years front-end web development has became one of the most exciting areas of IT and software development, as front-end developers we have a tone of new tools, APIs, editors, packages, etc. that make our life easier.

There is an area that is particularly interesting: Responsive web design, but now, we try to go a little bit further, and not only create amazing responsive web sites, but also we try to provide the best web experience for our visitors, there is one aspect that is in particular really important when we create web portals: loading the resources depending on the device, it doesn’t matter if it is an smartphone, a tablet or a high resolution desktop; we must provide different views per device, and here is when something come out!

Most of websites are responsive but many times the views or layouts only hide or show graphic elements (like menus, carousels, blocks, etc.) that means all the resources are loaded even if they will not be used on phones or tablets.

The IBM proposal

Instead of just hiding or displaying elements depending on fixed media queries, we can provide a better mechanism which is called Adaptive Web Design. When we talk about adaptive, we mean we must load only the resources that are really necessary for displaying our views depending on the user’s device, for example if I have a list of news but in desktops I show titles, summaries, and images, but in smartphones I am only interested in displaying the titles, why in the phones should I load the summaries and images.

IBM WCM 8.x (that stands for IBM Web Content Manager) as a private product has a great solution for providing Adaptive Enterprise Web Portals, what it basically does is to expose a set of plugins that help us decide which resources we are going to load depending on the user’s device.

Let’s see how this kind of blocks look in the simplest way:

[Plugin:ifDevice class="smartphone"]
<!-- Content for smartphone goes here! -->
[/Plugin:ifDevice]

[Plugin:ifDevice class="smartphone"]

[/Plugin:ifDevice]

Now, if we want to show some specific content or components for desktop and tablets we can use the “negative” syntax of this plugin

[Plugin:ifNotDevice class="smartphone"]
<!-- Content for desktop and tablet goes here! -->
[/Plugin:ifNotDevice]

[Plugin:ifNotDevice class="smartphone"]

[/Plugin:ifNotDevice]

Let’s see the example

Going back a bit… in our component to display a set of news we can follow next steps to have an adaptive content per device:

For desktop and tablets where we have more space to distribute our news (titles, thumbnails, summaries, etc.), so, it makes sense to include more HTML elements.
For smartphone since we have less space available we don’t render all the information but instead just the titles.

Desktop and tablet

Let’s imagine this is a fragment of the results of a menu or personalization component:

[Plugin:ifNotDevice class="smartphone"]
<article class="news">
 <a href="#" class="news__title">[Property context="autofill" type="content" field="title"]</a>
 <div class="news__summary">[Element context="autofill" type="content" key="summary"]</div>
 <figure class="news__thumbnail">
 <img src="[Element context='autofill' type='content' key='thumbnail' format='url']" alt="Image">
 </figure>
</article>
[/Plugin:ifNotDevice]

[Plugin:ifNotDevice class="smartphone"]

<a href="#" class="news__title">[Property context="autofill" type="content" field="title"]</a>

<div class="news__summary">[Element context="autofill" type="content" key="summary"]</div>

</figure>

</article>

[/Plugin:ifNotDevice]

The rendered HTML content would be something like this:

<article class="news">
 <a href="#" class="news__title">Suscipit reiciendis voluptatem, quaerat repellendus aut inventore</a>
 <div class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat cumque alias !</div>
 <figure class="news__thumbnail">
 <img src="/path/to/my/image.png" alt="Image">
 </figure>
</article>

<a href="#" class="news__title">Suscipit reiciendis voluptatem, quaerat repellendus aut inventore</a>

<div class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat cumque alias !</div>

</figure>

</article>

Smartphone

And in the smartphone we can have a simpler version of the same component including only the title like this:

[Plugin:ifDevice class="smartphone"]
<article class="news">
 <a href="#" class="news__title">[Property context="autofill" type="content" field="title"]</a>
</article>
[/Plugin:ifDevice]

[Plugin:ifDevice class="smartphone"]

<a href="#" class="news__title">[Property context="autofill" type="content" field="title"]</a>

</article>

[/Plugin:ifDevice]

In this case we would have this kind of output:

<article class="news">
 <a href="#" class="news__title">Suscipit reiciendis voluptatem, quaerat repellendus aut inventore</a>
</article>

<a href="#" class="news__title">Suscipit reiciendis voluptatem, quaerat repellendus aut inventore</a>

</article>

Pretty simple, doesn’t it?

I hope you find this short article useful for your future implementations and remember be happy with your code!

See you next time!

alex-arriaga October 8, 2015

How to list the Node.js packages that are installed as globals

Node.js, Web Development 5 Replies

This is probable one of the simplest commands that NPM has; it is just to get the whole list of packages that we have installed as global.

npm -g ls --depth=0

1	npm -g ls --depth=0

The output should look like this:

/usr/local/lib
├── bower@1.5.3
├── bufferstreams@0.0.2
├── clean-css@2.1.8
├── clone@0.1.11
├── connect@2.24.3
├── doctoc@0.7.1
├── event-stream@3.1.2
├── git-changelog@0.1.1
├── git-it@1.2.1
├── github-changelog@0.4.0
├── grunt@0.4.4
├── grunt-cli@0.1.13
├── grunt-contrib-qunit@0.5.2
├── grunt-contrib-uglify@0.6.0
├── gulp@3.8.8

/usr/local/lib

├── bower@1.5.3

├── bufferstreams@0.0.2

├── clean-css@2.1.8

├── clone@0.1.11

├── connect@2.24.3

├── doctoc@0.7.1

├── event-stream@3.1.2

├── git-changelog@0.1.1

├── git-it@1.2.1

├── github-changelog@0.4.0

├── grunt@0.4.4

├── grunt-cli@0.1.13

├── grunt-contrib-qunit@0.5.2

├── grunt-contrib-uglify@0.6.0

├── gulp@3.8.8

Easy right?

alex-arriaga October 6, 2015

Adaptive UI with Material Design and Paper Elements (The Polymer Summit 2015)

CSS3, HTML5, Polymer, Web Development No Reply

If you are a fan of web design, UI patterns, material design, and all those great concepts and practices then this conference is for you 🙂 enjoy!

alex-arriaga October 6, 2015

CakePHP is losing search parameters when using pagination SOLVED

CakePHP, PHP, Web Development 2 Replies

The problem

Imagine we have a custom form to search for purchases done between two dates; so we have a simple action in a controller that takes the start and end date and create a set of conditions for the paginate() method, but… for some reason once we click on next page we are loosing the conditions to make the search.

The solution

A simple solution for saving the search parameters is just to store them in a session variable; following next algorithm:

	// START: We check if the conditions for search already exist
	$this->conditions = array();
	if($this->Session->check('conditions')){
        $this->conditions = $this->Session->read('conditions');
	}
	// END: Check

    // Normal POST request  
	if ($this->request->is('post')) {
		$data = $this->request->data;

		// We get the search parameters
		$fromDate = $data['Purchase']['FromDate'];
		$toDate = $data['Purchase']['ToDate'];

        // We create our conditions (this syntax can be improved)
		$conditions = "Purchase.date_delivered >= " 
                        . "'" . $fromDate . "'" 
                        . " AND Purchase.date_delivered <= " . "'" . $toDate . "'";

        // Passing conditions to a property
		$this->conditions = array ($conditions);


        // START: Saving conditions in a session variable
		$this->Session->write('conditions',$this->conditions);
		// END: Saving
		
        // Doing the normal pagination stuff
        $this->paginate['conditions'] = $this->conditions;
        $purchases = $this->paginate();
        $this->set('purchases',$purchases);

	else { // Pagination request (GET)
		$this->Purchase->recursive = 0;
		$this->paginate['conditions'] = $this->conditions; // We use the conditions stored previously
		// Doing the normal pagination stuff
        $purchases = $this->paginate();
        $this->set('purchases',$purchases);
	}

// START: We check if the conditions for search already exist

$this->conditions = array();

if($this->Session->check('conditions')){

$this->conditions = $this->Session->read('conditions');

}

// END: Check

// Normal POST request

if ($this->request->is('post')) {

$data = $this->request->data;

// We get the search parameters

$fromDate = $data['Purchase']['FromDate'];

$toDate = $data['Purchase']['ToDate'];

// We create our conditions (this syntax can be improved)

$conditions = "Purchase.date_delivered >= "

. "'" . $fromDate . "'"

. " AND Purchase.date_delivered <= " . "'" . $toDate . "'";

// Passing conditions to a property

$this->conditions = array ($conditions);

// START: Saving conditions in a session variable

$this->Session->write('conditions',$this->conditions);

// END: Saving

// Doing the normal pagination stuff

$this->paginate['conditions'] = $this->conditions;

$purchases = $this->paginate();

$this->set('purchases',$purchases);

else { // Pagination request (GET)

$this->Purchase->recursive = 0;

$this->paginate['conditions'] = $this->conditions; // We use the conditions stored previously

// Doing the normal pagination stuff

$purchases = $this->paginate();

$this->set('purchases',$purchases);

}

And that’s it! Now you have your search parameters working with pagination.

Enjoy!

alex-arriaga October 5, 2015

Thinking in Polymer (The Polymer Summit 2015)

CSS3, HTML5, Polymer, Web Development No Reply

Web Components, Shadow DOM? DOM Framework? Ok, no so fast, have you listened what is coming in the way we create web portals? No yet; then listen this excellent talk and I promise, you will learn a lot of great things! The future is here and now!

What would you like to know about?

Alex Arriaga

Monthly Archives:
October 2015

Getting started with Gulp.js from scratch

Let’s talk and think…

What do I need?

Let’s start

Installing packages in dev mode

Running tasks

How to detect user devices: smartphone, tablet or desktop in IBM WCM 8.5 using tags

The context: why should I need to know this stuff?

The IBM proposal

Let’s see the example

Desktop and tablet

Smartphone

How to list the Node.js packages that are installed as globals

Adaptive UI with Material Design and Paper Elements (The Polymer Summit 2015)

CakePHP is losing search parameters when using pagination SOLVED

The problem

The solution

Thinking in Polymer (The Polymer Summit 2015)

Join me, have fun and learn!

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Archives

Join me, have fun and learn!

Recent Posts

Archives

Recent Comments

Categories

What would you like to know about?

Monthly Archives: October 2015

Let’s talk and think…

What do I need?

Let’s start

Installing packages in dev mode

Running tasks

The context: why should I need to know this stuff?

The IBM proposal

Let’s see the example

Desktop and tablet

Smartphone

The problem

The solution

Join me, have fun and learn!

Tag Cloud

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Tag Cloud

Archives

Join me, have fun and learn!

Recent Posts

Archives

Tag Cloud

Recent Comments

Categories

Monthly Archives:
October 2015