Filmic Blog

Build a web project using gulp.js

2014-01-17T22:45:00+01:00

I have been playing around with gulp.js streaming build system in the last few days. Its single configuration file (gulpfile) uses code to define tasks and can be written in any language as long as you install and specify the language module so the gulp CLI can load it. I decided to use CoffeeScript since it's my favorite front-end language. My simple example project contains a single html file that loads CSS and JavaScript files. Gulp is configured to: run local webserver (using connect) concatenate and compile CoffeeScript files into minified Javascript compile Sass files into CSS run LiveReload server watch files on change and reload the page To run gulp.js with these tasks you need to have the latest version of Node.js and install some packages into the project folder using npm: install gulp and gulp-util npm install gulp gulp-util install gulp plugins npm install gulp-coffee gulp-concat gulp-livereload gulp-sass gulp-uglify gulp-util install connect webserver npm install connect install LiveReload server npm install tiny-lr Additionally you will need LiveReload plugin for Google Chrome. To start the build run: gulp --require=gulp-coffee And here is the gulp.js config file (gulpfile.coffee): gulp = require 'gulp' gutil = require 'gulp-util' coffee = require 'gulp-coffee' concat = require 'gulp-concat' uglify = require 'gulp-uglify' sass = require 'gulp-sass' refresh = require 'gulp-livereload' connect = require 'connect' http = require 'http' path = require 'path' lr = require 'tiny-lr' server = do lr # Starts the webserver (http://localhost:3000) gulp.task 'webserver', -> port = 3000 hostname = null # allow to connect from anywhere base = path.resolve '.' directory = path.resolve '.' app = connect() .use(connect.static base) .use(connect.directory directory) http.createServer(app).listen port, hostname # Starts the livereload server gulp.task 'livereload', -> server.listen 35729, (err) -> console.log err if err? # Compiles CoffeeScript files into js file # and reloads the page gulp.task 'scripts', -> gulp.src('scripts/coffee/**/*.coffee') .pipe(concat 'scripts.coffee') .pipe(do coffee) .pipe(do uglify) .pipe(gulp.dest 'scripts/js') .pipe(refresh server) # Compiles Sass files into css file # and reloads the styles gulp.task 'styles', -> gulp.src('styles/scss/init.scss') .pipe(sass includePaths: ['styles/scss/includes']) .pipe(concat 'styles.css') .pipe(gulp.dest 'styles/css') .pipe(refresh server) # Reloads the page gulp.task 'html', -> gulp.src('*.html') .pipe(refresh server) # The default task gulp.task 'default', -> gulp.run 'webserver', 'livereload', 'scripts', 'styles' # Watches files for changes gulp.watch 'scripts/coffee/**', -> gulp.run 'scripts' gulp.watch 'styles/scss/**', -> gulp.run 'styles' gulp.watch '*.html', -> gulp.run 'html' For non-coffeescript devs the same config file translated into JavaScript You can find this example project with gulp.js setup on Github.

Make your own Twitter timeline using Zend PHP Framework and HTML5

2012-02-27T06:48:56+01:00

In this tutorial I will show how to make a Twitter user timeline on a website using Zend Framework and HTML5. If you are not familiar with Zend and want to build a website using it I recommend the Rob Allen's tutorial and the framework's documentation. Part of the Zend Framework, Zend_Service_Twitter component provides a client for the Twitter REST API. Zend_Service_Twitter requires authentication as a valid user using the OAuth authentication protocol. The OAuth implementation used by Zend_Service_Twitter is Zend_Oauth component. In this tutorial I will request my own Twitter timeline data so I will use Zend_Oauth directly to create access token and pass it into Zend_Service_Twitter (no need to redirect users to Twitter to give their consent to the requested authorization). In order to authenticate with Twitter and sign requests with your own Twitter account you need to register a new Twitter application on https://dev.twitter.com/apps site and obtain "access token" and "access token secret". Next create Zend_Oauth_Token_Access object in the controller file: // Create OAuth token object $token = new Zend_Oauth_Token_Access(); // Set token and secret $token->setToken('twitter_access_token')->setTokenSecret('twitter_access_token_secret'); Having the token let's create Zend_Service_Twitter object and request data from Twitter API: // Create options array $options = array('accessToken' => $token); // Create Twitter service object $twitter = new Zend_Service_Twitter($options); // Request data from Twitter (20 most recent statuses posted from the authenticating user) $this->view->twitter_timeline = $twitter->status->userTimeline(); The request returns a Zend_Rest_Client_Response object. This object has many properties that make it easier to access the results. The Twitter statuses are contained in the "status" array: Zend_Rest_Client_Result Object ( [_sxml:protected] => SimpleXMLElement Object ( [@attributes] => Array ( [type] => array ) [status] => Array ( [0] => SimpleXMLElement Object ( [created_at] => Thu Dec 22 11:48:02 +0000 2011 [id] => 149818475026714624 [text] => Swiss Govt: Downloading Movies and Music Will Stay Legal | TorrentFreak http://t.co/55k6AKjm via @torrentfreak [source] => Tweet Button ... The next task is to render the Twitter timeline data in the view file corresponding to the controller file. Since the received data is iterable I can make use of the PartialLoop View Helper and render each Twitter post with a template. First create a folder for the templates in the "library" folder: library/MyProject/View/Scripts/templates Next register the custom view scripts location in the Bootstrap file: // add custom view scripts $this->view->addScriptPath(APPLICATION_PATH.'/../library/MyProject/View/Scripts'); Create template file and call it "twitter_feed.phtml". It will contain HTML markup of a single tweet status update:

post -> created_at));?>

post -> text; // Detect links in the tweet text and wrap them in elements $regex = '/http([s]?):\/\/([^\ \)$]*)/'; $link_pattern = 'http$1://$2'; $tweet = preg_replace($regex,$link_pattern,$tweet); // Detect mentions to other users and wrap them in elements $regex = '/@([a-zA-Z0-9_]*)/'; $link_pattern = '@$1'; $tweet = preg_replace($regex,$link_pattern,$tweet); // Detect hash tags and wrap them in elements $regex = '/\#([a-zA-Z0-9_]*)/'; $link_pattern = '#$1'; $tweet = preg_replace($regex,$link_pattern,$tweet); // Show tweet text echo $tweet; ?>

Now add the following code to the view file:

My Twitter feed

partialLoop()->setObjectKey('post'); // Run partial loop using the template file and object with data set in the controller file echo $this->partialLoop('templates/twitter_feed.phtml', $this->twitter_timeline); ?>

With some CSS styling the Twitter timeline is now ready! See the main page of filmic.eu (right column) for an example of the working timeline.

Secure connection to MySQL database through SSH tunnel

2011-07-17T02:00:00+02:00

In my development I often work with remote database servers which are not exposed to the world outside. This tutorial describes how to connect to a MySQL server which is firewalled and configured only for local access. The secure, encrypted connection can be made via a SSH tunnel. First make sure that the remote host has a SSH server running and there is an user account that you can connect with SSH to (let's say 'user@example.com'). Secondary there should be a database user with granted access from 127.0.0.1 location (let's say 'dbuser'). Having that in place the SSH tunnel can be created. On Mac/Linux run this command and enter password: ssh -L 3306:localhost:3306 user@example.com The first port 3306 is the local port that you will be listening on. The second port 3306 is the remote port you will connect to. MySQL by default listens on 3306. After you connect leave the window working and minimized. On Windows use PuTTY and configure the connection details on the "Session" screen - enter the host name. Then go to "Connection" > "SSH" > "Tunnels" screen. In the "Source port" field enter 3306 and in the "Destination" field enter localhost:3306. Next click on the "Add" button and in the "Forwarded ports" field you should see L3306 localhost:3306. Click on the "Open" button and enter password. After you connect leave the window working and minimized. Now you have the tunnel established so you can connect to the remote database as it was running on the localhost on port 3306. You need to configure your application to connect to 127.0.0.1 (not localhost, if you use localhost mysql will assume you want to connect to a unix socket which will not work over the tunnel). For example with the PHP code: Or mysql command line client: mysql -u dbuser -h 127.0.0.1 -p There are also tools that create a SSH tunnel internally so you do not need to established the connection manually. One I often use to manage a remote database server is the MySQL Workbench. Within this program the connection can be set up with SSH tunnel - in the "New Connection" dialog choose the "Standard TCP/IP over SSH" for the "Connection Method" option. Next enter details of your SSH and MySQL servers. Once connected you can administrate the remote server, design the database and edit the data even if it is behind a firewall.

CSS3 Looped Animations. Multiple animation loop

2011-10-07T19:00:00+02:00

Recently I was working on the Filmic.eu teaser site. My idea was to create simple transitions purely based on the CSS3 features so the site worked and looked nice without any single line of JS code. One of the challenges I faced was how to create a CSS animation that loops through multiple text elements using fade in and out transitions. Looking at the CSS3 Animations Module specs there are properties useful for creating a CSS animation loop: The animation-iteration-count property can be set to infinite so the animation repeats forever. The animation-direction property when set to alternate allows to play animation cycle iterations that are even counts in a reverse direction. This can be used to fade in and fade out an element using one and the same animation played in both directions. In my case I wanted to animate 3 list elements, showing and hiding one after another. To achieve it without event handling in Javascript I had to set a delay for each upcoming animation so the second animation plays after the first one, the third one after the second one and so on. The CSS animation-delay property comes to help. It allows an animation to begin execution some time after it is applied. However it applies for the first iteration of the animation only. The next iterations will be executed immediately which breaks the order of the fade in / out animations. My solution for this problem was to play around with the animation @keyframes rule to emulate the "delay" behaviour by keeping the property value unchanged over some period of time. Let's look at some code. The example works in the Chrome, Safari, Firefox 5 or better browsers. First create a list with elements that will be animated:

This is
CSS3 looped
animation

Then define the CSS styles: The animations are defined using the CSS3 animation shorthand property that combines six of the animation properties into a single property: [ || || || || || ] #animation ul { /* The list with elements */ position: relative; text-align: center; width: 200px; } #animation li { /* Common styles for the list elements */ position: absolute; left:0; top:0; width: 100%; opacity: 0; padding: 10px; } #animation li:nth-of-type(1) { /* First element of the list */ background-color: lightgreen; -webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */ -moz-animation: fadein 6s ease-in-out -4s infinite alternate; animation: fadein 6s ease-in-out -4s infinite alternate; } #animation li:nth-of-type(2) { /* Second element of the list */ background-color: yellow; -webkit-animation: fadein 6s ease-in-out 0s infinite alternate; -moz-animation: fadein 6s ease-in-out 0s infinite alternate; animation: fadein 6s ease-in-out 0s infinite alternate; } #animation li:nth-of-type(3) { /* Third element of the list */ background-color: lightblue; -webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */ -moz-animation: fadein 6s ease-in-out 4s infinite alternate; animation: fadein 6s ease-in-out 4s infinite alternate; } /* Defines the animation keyframes */ @-webkit-keyframes fadein { 0% { /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */ opacity: 0; } 66% { /* Actual beginning of the fade in animation */ opacity: 0; } 76% { /* The fade in animation takes 10% of the duration time */ opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes fadein { 0% { opacity: 0; } 66% { opacity: 0; } 76% { opacity: 1; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 66% { opacity: 0; } 76% { opacity: 1; } 100% { opacity: 1; } } And the result: This is CSS3 looped animation The number of animated elements can be different but it requires adjusting the keyframes "delay" range and so the animations initial delays. If you want to play around with the code check out this Fiddle.