Stagionalmente Week#1

icon-show-pearA couple of days before, I saw for this guy that unfortunately I can’t find now. His idea was to create a new icon every day. This is a huge task, you have to have plenty of energy and discipline to achieve it. When I saw this, I said: “that’s what I’m doing for Stagionalmente!”. Not even close for doing one icon per day, but at least one per week.

So, avoiding procrastination I am going to publish one icon per week. I d0n’t know how I am going to publish or if as the projet goes I’am going to change a bit of design or the way I am presenting it, but anyway, just the fact of keep a rhythm of one icon by week I found it huge. I am still wandering how this guy did it.

So, here you go, I am going to start with with a delicious pear this week! Enjoy.

Download

Another Grunt article

Update: I wrote this article a month ago, and I was hesitating about publishing or not, finally I’ve decided for doing it. I keep this more like a guide of really nice tutorials and as exercise for my self. I’ve decided that I’am going to continue testing Grunt.js for a couple of months before changing/trying Gulp.js, I think it deserves a really good experimentation for having a good comparison parameter.

I’ve been hesitating for a while about using Grunt but finally I have a bit of time and I’ve faced all my fears. Yes, I admit it, every time anyone says anything about command line I make that face. Fortunately, I’ve been practicing a bit with Github, between their app, tutorials and the command line, I’m starting to feel more comfortable.

Now It’s time to try Grunt and understand why everyone is talking about it. At first, I said, I have Codekit, I don’t need another Task runner, but since I started working under windows environment I thought: “I have to move”. I’ve tryed Prepros, and I think it is a very good alternative, but It is still in progress and now you have to pay for Sass and almost everything. So, why not give it a try?

Get Grunt Installed

The first thing you have to do is to install Node.js, you just download the installer and run it. You don’t need to know Node.js, you just need to install it in you machine, like Ruby for Sass.

Then you have to run the following command from your terminal,

$ npm install -g grunt-cli

This is only one time command, and if you are having some errors messages try :

$ sudo npm install -g grunt-cli

If you want to check that everything is ok, just run:

$ grunt --version

It should show you your Grunt version.

Now we have to create a package.json file in our folder directory, it should have something like this :

{
  "name": "example-project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-concat": "~0.6.3",
    "grunt-contrib-cssmin": "~0.7.0"
  }
} 

We are pretty close to have the basic set established.  Now we have to do something a little bit new-different (at least for me). We have to go to our folder directory and install npm. In mac, the easier way is just do type cd and then drag our folder finder into the command line, and bang, now, we are in our project folder with the terminal. Once it’s done: we run :

npm install

This is going to create a node_modules in our project with the concat and Cssmin  installation that we are going to need.

That’s it. This is the basic installation.

Defining tasks in the Gruntfile

The previous steps were focused in preparing and installing all dependencies we needed to have Grunt running. Now we are going to prepare our Gruntfile.js in order to determinate our configuration,

Our Gruntfile.js should have something like this:

module.exports = function(grunt) {
    // 1. All configuration goes here 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            // 2. Configuration for concatinating files goes here.
        },

        uglify: {

          // 2. Configuration for concatinating files goes here.
       }
 });
    // 3. Where we tell Grunt we plan to use this plug-in. 
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

     // 4. Where we tell Grunt what to do when we type "grunt" into the terminal. 
     grunt.registerTask('default', ['concat', 'cssmin']);
};

As we can see in detail, it has a wrapper function that is necessary to Grunt to understand the file

module.exports = function(grunt) {
  // Configuration, Tasks and Plugins.
};

The pkg: grunt.file.readJSON(‘package.json’), line imports the json information that we’ve created earlier.

And then, we have to configure our tasks.

For this section, I’m going to suggest you to read Chris Coyer article in Grunt for People Who Think Things Like Grunt are Weird and Hard published in 24.ways, wich I think he does ten thousands better than me.

I’m going to focus in those gotchas that I had when I was doing this and other Grunt tutorials.

My Gotchas

As you can see, what we have been doing is pretty basic:

1.  Install node.js

2. Install grunt-cli with the terminal.

3. Create a package.json file in our folder with all dependecies we are going to use.

4. Create a Gruntfile.js with our tasks configuration.

5. Run npm with the  terminal in our folder.

6. Run grunt watch and start coding (yes, I know, I haven’t said anything about it, but as I told you, if you read Chris article, you will figure it out how to install this dependency  and what it is useful for.

One of the problems I had doing this was: how to call every little dependency. First I tought, I have to call them one by one in my Gruntfile, and yes, this is going to work, but if you have followed Chris article, you will see in the json file (and of course, in the gruntfile) that he use another dependency that makes it easier:

"dependencies": {
 "load-grunt-tasks": "~0.2.0"
 }

Anotther approuch use in an Smashing magazine’s articles is to use:

require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

I haven’t use, but I think it should work properly.

After that, I think It is most about how you configure your tasks: paths, files…

I know that it is scary to make the first step, but every time you do it, you say, does it? I have been moving to Grunt for 6 months and finally I made it and it is awesome. I feel like the first time I used Sass.

Well, I hope it was helpful for anyone but if it is not, you should read this:

Grunt for People Who Think Things Like Grunt are Weird and Hard

Get Up And Running With Grunt

Getting Started with Grunt

 

Silence

It’s been a while since my last note but I could say I was taking a moment, I was trying to silent my head. This industry is always pushing us with new information. Every day there is a new great post, a better performant software, a new extension… and it is always asking us to catch up every day.

I finished last year very tired, between a full job and some freelances shots I just couldn’t give an extra mile. So I decided to end my year quiet and try to plan what I expected for this new year.

I said, ok, it is time to stop been lazy, I have to retake my side projects. I started an open-source project with svg, I also started a new site for a friend and I was a the perfect moment to try Grunt.js. Pretty neat, It took me a few hours to implemented in this project and I was pretty happy. I was following a post of Chris Coyer and I was amazed when I realized that between a couple of days the initial structure that he was proposing in his tutorial has already changed. Just two weeks and I have to readapt myself grace a clever technique by Hans Christian Reinl,

I couldn’t believe it but just two weeks after people were already talking about Gulp! I was getting started to feel confortable when I should move again.

I know that this is the trend in this industry, but sometimes I just want a silent moment. I don’t have idea if I’m going to publish my article about grunt, It is not only a short version of a couple of articles, but also old, I should talk about Gulp.

After Leiden

Every time you start a new project, it can be complicated to get in touch with people. I’m talking about co-workers, clients but most of all partners. It’s been a couple of years that I’m “the industry” (as I’ve seen people call it) and so far it is not been easy. Maybe it is because I’m living in another country and you have add the fact of talking another language or maybe it is just me.

I was volunteering a Leiden a couple of weeks ago. I did it because I had never been in a WordCamp before, but also because I wanted to know how different it could be from events that I assisted in South America. I had a lot of expectations, but I was also afraid of coming by myself.

The worst part part was coming to dinner before the event. I arrived a bit late because of my train and by the time I got into the restaurant almost everyone was there. There were a lot of faces, I did not know anyone and I was terrify. I start talking with a guy whoI thought was in the same situation asking really smart questions:

“hi, this is wordpress, right?”

After that, everything was really smooth! I started talking to really nice people and It was only getting better and better. The next day I knew the rest of WordCamp Europe troop and everything was really fluid. We worked hard but I also had the time to go the conferences that I was interested. Everyone was interested in everyone having a good experience. It was a nice feeling of knowing people like that. Sometimes when you live in a country other than yours, you can forget that feeling.

I don’t want to be annoying with a lot of details, so: I learned a lot, I knew a lot of nice partners in the industry, not only the staff, but also regular guys. In conclusion, if you have ever asked yourself about going to those events but you are lazy about going commando (by yourself) I tell you that it completely worth it, at least WordCamp’s does.

WordCamp Europe 2013

I am pretty excited of volunteering for the next (or first) WordCamp Europe. I have never been in such kind of activities and I am looking forward to meet peers not only of Europe but all over the world. I am really curious about what is coming for WordPress in the future. I have already my ticket and I have already book my trains from Paris to Rotterdam. Now I have to find and place to stay.

Well I think that’s it pretty much.