Bytes for Lunch

Finding my way on coding amazing apps for the Web and Mobile

Compiling CSS with Gulp

leave a comment »

What is Gulp js

If you are in web development, chances are that you have heard about task automation tools. Simply said, task automation is instructing the computer to do a number of annoying tasks for us.
Hey, what are *annoying* tasks in web development? Here a couple example:

  • Linting and minifying javascript
  • Compiling SASS, LESS to CSS
  • Minifying CSS for production
  • Concatenating files to optimize download time

Thank to very talented guys out there, a number of tools exist to do this stuff.

One of my favourite is Gulp. Gulp executes small javascript programs to accomplish task like those on the list. This brings many benefits, because enhances and speeds up the process of creating web applications.

In this post we are going to see how to install, configure and use Gulp to execute a very common task in web development: CSS building.
We’ll take a step further by adopting another interesting CSS related technology: the SASS language.

A Brief description of what we’ll do

The tasks we are going to automate are:

  1. Getting SASS sources (.scss) and compile it to CSS
  2. Minifying css file
  3. Renaming it according to a production name, that we’ll give the tool via command arguments

Step 1 – Installing Gulp.js

To install gulp we’ll use npm. Npm is a package manager, it’s installed as a part of Node.js. See how to install Node.js to get Npm installed and working.

Once you have installed Npm, ppen a Terminal, and install Gulp this way:

npm install --global gulp-cli

Step 2 – Get the starter kit

You can download the Gulp JS Starter Kit from my GitHub account. It includes  these files:

  • a folder named scss
  • a folder named css
  • gulpfile.js (the “main” file where we define the tasks that will be performed by Gulp)
  • package.json (this file lists all the dependencies that will be used by our gulpfile)

A note on the project structure: scss is the folder where you keep your sass sources, css is the folder where you keep your css sources.

Gulpfile.js is our gulp script, where we tell gulp which tasks todo and in which order.
Package.json contains the list of dependencies that our gulp file needs.

Step 3 – Install the dependencies

If you have installed Gulp for the first time, it’s likely that you need to install the dependencies for all the plugins used in the gulp script.
If you are new to Gulp, it might be useful to mention that Gulp has a rich family of plugins for many different tasks.
To install all plugins required by package.json, open a terminal in your current folder, and run this command:

npm install

this will get all the plugins installed in your project.

Once this command completed, you’ll see a new folder named node_modules. This folder contains all the plugins required by the Gulp script.

Step 4 – Run the Script

Here we go! Just open a terminal in your project folder and type:

gulp compile-css --finalName 0.0.1

where: gulp is the tool invocation, compile-css is the name of the task (look inside the gulpfile.js) and –finalName is telling our script to rename the file with the extension 0.0.1 (you may choose your by changing the gulpfile).

At the end of the execution, you’ll have a source named “dist” inside your css folder with a css file named cssbuild0.0.1.css

A small explanation of gulpfile.js

Let’s take a look at gulpfile.js.

Screen Shot 2016-07-08 at 16.57.51

Here we have defined all the plugins we need.
Now, let’s see how a task is defined:

Screen Shot 2016-07-08 at 16.59.24

Pretty easy.
Now how to launch the execution of all tasks before defined?

Screen Shot 2016-07-08 at 17.00.46.png

That’s all

As you probably spotted, using tools for task automation may sound a bit harsh, but when you get in confidence with it you’ll stick with it.


Gulp js Official Website
Grunt Official Website
The Starter Kit


Written by bytesforlunch

July 8, 2016 at 3:10 pm

Posted in Front End

The Full Stack Developer

leave a comment »

When it comes to hire new developers, is it reasonable for a company to ask applicants to master every aspect of the development stack? In other words, do companies need Full Stack Developers?
Yes, with a grade of tolerance.


Defining what a Full Stack Web Developer is

Easy! He’s a developer able to cover every aspect of creating and publishing a web application.


What a Full Stack Developer should be, in 5 points

Given these layers:

Hardware – OS – Networking – UX/UI – Business logic – Data access

a Full Stack Developer should meet these points:

1) Familiarity with each layer

2) Mastery of more than one layer

3) When creating things, being sure them integrate smoothly with other layers

4) Understanding of critical points

5) Interest in discovery new solutions, either architectural or technological

The Full Stack developer is mostly a mature developer, who reached an high grade of competence in his profession. Having passed at least five to ten  years in the field is not per se a guarantee of being a Full Stack Developer.

Being a Full Stack Web Developer

Here my list of skills that a Full Stack Web Developer should have:

0) HTTP basics
-To know how HTTP works (basics of request/response, http headers, http status codes, caching)
-Understanding of REST paradigm

1) HTML/CSS deep knowledge. He must be able to code a well structured web page manually, without code completion.
This point includes:

-at least 30 HTML tags
-Semantic HTML5 tags
-Microdata basics
-CSS basics
-CSS3 transformations basics
-basics of web typography

2) Javascript basics
-OO Javascript, closures and at least 3 patterns
-be confident with at least 1 library (eg. jQuery)
-be confident with AJAX

3) Client CSS Responsive Frameworks
This means that he must know and have experience on at least one CSS responsive framework (Twitter Bootstrap, Foundation, Purecss, etc) and to know perfectly how to get it talking to a back-end

4) Back-End
This includes:
-to know one among python, php, ruby, c#
-to have deep experience on at least one web framework (ASP.NET, CodeIgniter, Ruby on Rails, Django)

5) Architecture
This point includes:
-MVC pattern
-Be great at setting up an authentication/roles system
-Having experience on debugging web applications
-Be solid at coding REST API
-Be solid at finding performance bottleneck at any level (client, server, networking) and to deal with them

6) Database
-NOSQL Databases: to have experience in at least one NOSQL database (better if would be a document oriented database like MongoDB)
-Relational databases (MYSQL, MS SQLServer)
-Be confident in working with cloud storage (Google Big Table, Amazon DynamoDB)

Be decent in User Interface design!
-To know basics of UI patterns
-Basic understanding of UX (the idea of seamless UX)
-UI: Basics of image processing and manipulation (I can’t hear of web developers who don’t know about alpha channel!)
-UI: Basics of color
-Have a little style!

7) Attitude
-Be awesome in creating the best product of the world
-Be a hard-worker, never being tired of improving things
-Look for the best at every stage of the development
-Be honest with colleagues
-Be an innovator, be brave
-To have a great working flow (Source Control software, Unit testing, scaffolding procedures like Yeoman)

A side note: I can live without NodeJS.

I didn’t mention Node JS. It’s a great platform, and to know it, is a good deal.
By the way, in my life I never felt the urgence of adopting it. I can live without NodeJS.

Written by bytesforlunch

January 14, 2015 at 12:01 am

Posted in Career management

How to Plot Simple Charts in R: A Step by Step Introduction

leave a comment »

Adventures in R

A couple of weeks ago I subscribed to a Coursera class on Data Science (if you don’t know what Coursera is, I really recommend to give it a look: it’s a great opportunity to get free university-quality education).

One of the tools used in the class was R, a powerful, object-oriented statistical programming language focusing on productivity and  relying on a huge ecosystem of packages, that actually allows you to do almost everything in data manipulation and statistics. And last but not least, it’s open source.

R standard installation includes around 30 packages that cover most common statistical and miscellaneous tasks as networking, input/ouput, etc.

Now that I’ve collected a very minimal set of skills to get started in plotting charts, I’d like to write down a quick note on my own experience.


Installing the tools

This step is really trivial: just surf to Once there, you’ll grab all the things to get the tool installed.
Another tool I like is R-Studio, an IDE that gives R extra-powers (highly recommended).


First, let’s create a small dataset

For our example, let’s create a text file and name  it mydataset.csv. Comma Separated Values is a common format for exchanging data: it’s reasonably easy to understand, even if but there’s a price to pay in terms of performance and filtering respect to a database.

Now, paste this data to the file:

Year,Computer Sales

and save it.

In this simple dataset, we collected some data about Computer Sales in three years (a mere product of imagination!)


Plot an histogram in R

Now, launch R Studio  (or the R console).


Step 1: Loading the dataset into R

Type this command in the console:

mydata <- read.table("C:/mydataset.csv", header=T, sep=",")


Step 2: Draw a Bar Chart with this dataset

Now let’s draw the chart

barplot(mydata$Computer.Sales, main=”Computer.Sales”, xlab=”Years”, ylab=”Sales”,
names.arg=c(“2010″,”2011″,”2012″), border=”blue”,density=c(10,20,30))


What We Get


Simple bar chart in R

Computer Sales – R Barplot Tutorial



R is widely used among Data Scientist and Statisticians. With the increasing interest for all the topics about Data like Analytics, Big Data,I expect R to become a popular choice for a growing number of programmers and technicians.

R has a smooth learning curve and a vibrant ecosystem, and tons of documentation is nowadays available online.
Let me list a couple of useful links to get you started in the R ecosystem.


Written by bytesforlunch

June 16, 2014 at 11:52 pm

Simple jQuery Dropdown button (open source code available)

leave a comment »

A couple days ago I faced a common user interface problem to solve. The design approach involved using a drop down button in a web form.
The idea was pretty simple, but I didn’t find any jquery plugin to accomplish my needs.

So… I decided to build my own. Simple and useful.

Here’s a picture of my drop down button in action:

jQuery Dropdown button in action

Source code available under the MIT license at Github, download here.

Written by bytesforlunch

June 13, 2013 at 6:37 pm

Open Data: my doubts on today’s most used ways for sharing data

leave a comment »

While Open Data is promising, I have doubts on how data is shared

Open Data is one of the best opportunity for people to really know facts about their lifes and how our world works. Open Data is a natural result from what Open Source means for software.

Let me shortly give you the idea at the heart of Open Data:

Open data is the idea that certain data should be freely available to everyone to use and republish as they wish, without restrictions from copyrightpatents or other mechanisms of control.

source: Auer, S. R.; Bizer, C.; Kobilarov, G.; Lehmann, J.; Cyganiak, R.; Ives, Z. (2007). “DBpedia: A Nucleus for a Web of Open Data”. The Semantic Web. Lecture Notes in Computer Science 4825. p. 722.doi:10.1007/978-3-540-76298-0_52ISBN 978-3-540-76297-3, Wikipedia

A lot of great guys in Open Data are facing issues about organizations, licensing and laws. This is a really important effort.
But, on the other hand, I don’t see an organic effort on the technical side. I admit my vision could be limited to what my eyes can see, but it seems there’s a lack of technology in how open data should be deployed.

Maybe not really a “lack of technology”, but it looks like the political arm runs faster than the technology one.
A practical example of what I mean? Yes: it’s unbelievable that a huge part of open data repositories are made of Excel files. It should be strictly avoided. Excel is a closed tool, at least use Open Office. Preferably, use CSV. JSON is even better.

I would like to start a discussion with people in Open Data focusing on which technologies are suitable for open data, offering my skills as a developer to find out pros and cons of each technology.

And you, what do you think about it? Am I missing something?

Written by bytesforlunch

May 21, 2013 at 11:47 pm

Posted in Open Data

JSAutoCaption: a simple JQuery plugin to automatically show alt and title image attributes

leave a comment »

Some days ago, I’ve been talking to a friend of mine when he gave me a nice idea. He was looking for a jQuery plugin to automatically extract alt and title attributes from an IMG tag and display them under the image.

Wow, such a funny task!

So I did it. It’s simple, and it plays right!

Here’s a couple of screenshots


The text under the image has been automatically extracted from alt and title attributes of your image.


HTML code

Like it? You can get it!

I’m so happy when I give even a little contribute to the open source community.

I release this plugin under the terms of the MIT License. So have fun.

Source code and live example available here, at the great JSFiddle.

Written by bytesforlunch

February 21, 2013 at 6:29 pm

Finest Tools: introducing AppleScript

leave a comment »

I bought my first Apple computer ten months ago, and a day doesn’t pass without discovering new exciting features of my Macintosh.

A few weeks ago I wrote a post about HyperCard, a great piece of software born from Bill Atkinson, Dan Winkler and Apple.
A few days after, I happily discovered that something similar already existed in my Mac, under a different name: AppleScript. In this post I’m gonna show you how to accomplish basic tasks with it.

Introducing AppleScript

ApplesScript is used to automate actions of the Macintosh operating system. You can script commands to run applications, open documents, browse the web, copy files, store informations, etc. Furthermore, AppleScript is perfectly suitable for database applications, searching and organizing data. One of the coolest things in AppleScript is it can be programmed in plain english, and best of all, it’s a built-in software that comes with your Macintosh.

How it works

A set of instructions is called “Script”. An interpreter executes the commands to interact with the applications and the system. These commands are written in AppleScript, an english-like computer language that contains verbs, nouns, adjectives, articles and other English elements we use everyday.

A script is created in AppleScript Editor, a free tool included wih the platform. It’s extremely simple to use, with a clear toolbar.

An important point to remember is that AppleScript considers everything an object, with properties that can be changed to model the behavior of your script.

Make your computer talk

Let’s try to create our first script. First, launch the AppleScript editor. A window like that one shown in figure will appear.

Now, write this command

SAY “Hello”

and press Run. Nice! Your computer talks.

Now let’s do something useful. Write this:

tell application “Finder” to open home

and press Run.

A window displaying your Home folder content will appear.

Now let’s see how to play with Google Chrome. We’re gonna open it and load a website.

tell application “Google Chrome”
    set theUrl to “;
end tell

Pushing a tool to the max

Even if we just scratched  the surface of AppleScript, I hope to stimulate users to be serious about pushing their expensive computer to the max.

As a practical example, I use AppleScript to automate the process of starting tools for coding. It’s a great accomplishment to automate the tedious process of opening your IDE, your browser with some preferred urls, a couple of Finder windows and a MAMP server.

Here my very simple script for starting coding tools:

tell application “TextMate”


   open “/Applications/MAMP/htdocs”

end tell

tell application “Cyberduck”


end tell

tell application “MAMP”


end tell

tell application “Google Chrome”

   make new window

   set URL of active tab of window 1 tohttp://localhost:8888/pixcone/&#8221;

   set myTab to make new tab at end of tabs of window 1

   set URL of myTab to;

   set musTab to make new tab at end of tabs of window 1

   set URL of musTab to;

end tell

say “Happy coding”

Enjoy Applescript!

Written by bytesforlunch

December 5, 2012 at 12:07 am

Posted in AppleScript