Ingen's Quarterly Beach Outing

It has been a while since we went to the beach as a team. The last time was in Dahican, but that was still last summer and since then, everyone became a little bit too busy to take a sunshiny, salty sea water break, what with all the projects left and right that we needed to attend to and finish (thank God it's a very good problem to have!).

Good thing that we are good friends with the folks who own the quaint beachside resort called La Familia in Samal and we were able to book the place for a visit - just in time for our quarterly outing. So off we went to have a relaxing dip in the turquoise waters of Samal Island, just a stone's throw away from the city.

After a quick morning snack of Make Your Own Frankfurter Sammiches (a team favorite) we decided to play a friendly round of fun, team building games like Team Trivia Challenge where Team 4Gee won via a Sudden Death round of P.A.N.T.S. (Place, Animal, Name, Thing, Score).

Competitive Team Go botched their chances to win when they mistakenly produced answers starting with the letter G, instead of the given letter W after Mancio answered the Place category with 'West Germany' (then proceeded to answer 'goat', 'Gina', and 'gun' for animal, name, and thing). I'm sure none of them would ever forget that country from now on. :)

Team 4Gee, the winners of Team Trivia Challenge

Appetites raging after the all that brain work, we headed off to lunch prepared by our ever reliable Marlon and his two assistants. We had lechon (only Edgar's, as it is the best ever), two hundred pieces of skewered pork barbecue, chicken barbecue, sinugbang panga and tiyan (grilled tuna collar and belly), sinuglaw (tuna ceviche with grilled pork belly), spaghetti, lots of fresh fruits, various snack things and other Pinoy beach fare like nilagang saging & kamote (boiled plantains and sweet potato), peanuts, and chips.

We like to eat. Please don't judge.

After lunch, the boys got a little bit stir crazy and as the beach was still in lowtide and we can't swim yet, they decided to play the old Pinoy street game called "Tumba Lata" which literally means "a can that fell over" where people take turns hitting a tin can with their slippers and the "bahaw/taya" (the 'It') would tag whoever touches/grabs flipflops in play.

Then to further test their teamwork and trust in each other, we played a modified version of "The Boat Is Sinking/Paint a Picture/Twister" where teams would be given a specific number of body parts touching the floor while trying to create a tableau that best depicts the situation given.

Vindicated! Team Go is winner of Boat is Sinking/Twister/Paint A Picture hybrid game!

While everybody turned in great performances and strategies, the ultimate winner of the game was Team Go. They won 700 grams of yummy imported chocolate.

Riding high on the excitement of these games (and the sugar rush from the previous games' prizes), we moved on to playing The Wholesome Human Centipede which tested the players' teamwork, creativity, perseverance, and grit. The teams were paired together with Team Go pairing up with Team Extra Rice, while Team Ass and Team 4Gee coupled up.

Starting with a couple with a cup between their heads, players would walk to a predetermined u-turn  point and walk back without holding the cup or their team mate. If the cup falls, they should go back to the starting line and begin over. First team to finish with all members win.

 

Yes, it is as funny and silly as you think it is. We were all almost rolling on the floor laughing (the spectators, anyway - the teams were all sweating bullets in concentration - except Jez who didn't even get the chance to go coz his team was losing by a very wide margin). 

In the end, the group composed of Team 4Gee and Team Ass won the race fair and square!

Wholesome Human Centipede Champs!

But not before all of them got marked with this:

for the love of all things sweet and chocolatey!

We swam after that, needing to cool off and spend some time out in the sunshine. Well, except Nap coz brother brought an umbrella with him to the sea, yo! He says he is scared of getting dark and he doesn't like the feeling of being sunburnt. Talk about sun protection! Bringing an umbrella to the water is the best one yet!

Everyone even shared at some point:

And we kept on swimming (and eating) and swimming (and sleeping) and swimming (and hanging out) until the waves became too big and we finally had to go home.

With that, we took a final group photo and said goodbye to the place. We all couldn't wait until next beach outing!

Semantic UI

What is Semantic UI?

Semantic UI is a responsive CSS framework and a viable alternative to the popular twitter bootstrap and foundation framework.  Using semantic is fun, with its easy to learn documentation and features; it is a really good if not a better replacement for bootstrap. 

Semantic UI packs a lot of features. These features are well documented and described as the five UI definitions of semantic UI. 

UI Element	A basic building block of a website, exists alone or in homogenous groups
UI Collection	A heterogeneous group of several elements which can usually be found together.
UI View	A way to present common website content like comments, activity feeds
UI Module	An element where its behavior is an essential part of its definition
UI Behavior	A set of free-standing actions not specifically tied to an element

Features of Semantic UI

Semantic UI uses classes and queries for natural language and features Font Awesome for its icon element which gives better option for choosing icons.  Like bootstrap, semantic UI also includes modules for accordion, modal, popup and dropdown but wait there’s more! Semantic UI added modules for checkbox, rating, shape, dimmer and awesome transition module.

Semantic UI grid	Bootstrap grid
Semantic UI navigation	Bootstrap navigation

Semantic UI also features Font Awesome for its icon element which gives better option for choosing icons.

Like bootstrap, semantic UI also includes modules for accordion, modal, popup and dropdown but wait there’s more! Semantic UI added modules for checkbox, rating, shape, dimmer and awesome transition module.

Semantic UIs is well documented on its site and you can download it at here.

Checkout semantic UI and try what you can do with it!

Frontend Automation: Intro to GruntJS

Things that front-end's common repetitive tasks for production are to prepare the following:

• CSS and JS Concatenation - a process of combining common bits of code into a single file, to lessen HTTP requests.

• CSS and JS Minification | Uglifying - a process of reducing file weight.

• Image Optimization/Compression - reducing image file size without affecting quality.

• Compile SASS / LESS / Stylus (CSS with superpowers).

It is not an extensive list, but these are some of the things that we need to do. I used to do these through Codekit - to manage minification, concatenation and compiling Sass. Optimizing images through imageOptim for lossless image compression. Then I heard about Grunt. Imagine having all those tasks above executed in a single command. These are some of the tasks that Grunt aims to automate. 

What is Grunt?

Directly from their website - Grunt is Javascript task runner.
Grunt is a command line tool that runs on top of Node that automates the workflows, but not limited to the ones I listed above.





How to Get Started?

1. Install node.js and npm

First we need to install Node, which is a required to run Grunt.
Head to the http://nodejs.org , download the installer and follow the instructions.

The node installer comes with npm (Node Package Manager),  which manages grunt plugins.


2. Install grunt-cli

Installing Grunt is a per-project basis. We should install Grunt globally using the flag -g, so that we could run it on any path. Enter these commands on your terminal.


npm install -g grunt-cli


3. Create package.json file

Next create package.json file on your project root with the contents below.

This is how node manages dependencies, in the code above you can freely update those values. The one under "devDependencies" basically tells npm that the project requires "grunt" with version "~0.4.1". A ( ~ ) tilde matches recent minor version.

Basic Project Structure with package.json file

Next, navigate to your project folder then run:

npm install


After running the command above you should have a folder called node_modules with successfully installed Grunt.

Basically grunt depends on plugins to do its magic. You can find a list of plugins on http://gruntjs.com/plugins. For now, we'll use the following plugins which are the ones I've used so far upon exploring Grunt:

• grunt-contrib-concat - Concantenate files
• grunt-contrib-uglify - Minify files using Uglifyjs
• grunt-contrib-sass - Compile Sass files to CSS
• grunt-contrib-cssmin - Compress CSS files
• grunt-contrib-imagemin - Minify/Compress Images

How to Install Grunt plugins?

npm install <plugin-name> --save-dev

*Notice the npm WARN - ignore for now, you can add those later.

Adding "--save-dev" flag automatically updates your package.json file to include the new dependency.


4. Create Gruntfile.js

Now we are ready to use the plugin. Let's create a gruntfile.js file on the project root.
Here's a basic gruntfile.js content using the "concat" plugin. For example we want to concatinate the following JS files:

• jQuery

• fitVids.js - jquery plugin for responsive video

• main.js

Here's my folder structure:

Then run grunt command on your project path (this command runs grunt default task)

grunt


When running Grunt, you can also specify which task you would like to run. Like this.
(this command only runs the "concat" task).

grunt concat


We now have a "production.js" file under the build folder. 

So far, so good. Now we will add another plugin to Minify/Uglify our concatenated files. The same process we did with the "concat" plugin.

npm install grunt-contrib-uglify --save-dev


Here's our updated grunfile.js with "uglify" task.

Then run grunt again in the terminal. 

We now have production.min.js

Next stop, we will now optimize one of the most heaviest assets on the web. Images.
The same process as we did for "concat" and "uglify".

Let's install grunt-contrib-imagemin, which is officially maintained by the Grunt Team.


Note: Tasks that starts with the name "grunt-contrib" are officially maintained by the Grunt Team.

Now run this on your terminal:

npm install grunt-contrib-imagemin --save-dev 

You can refer to the task documentation for further reading on how to configure a certain task. for imagemin, you can refer here.

Here's the updated gruntfile.js with basic config for imagemin


Then run grunt again in the terminal.

If you look in the images/optimized folder you now have compressed versions of the your image files. Not much savings, since I only used the default optimization level which is 3. You can pass an optimization level from 0 ~ 7.


Congratulations! You have successfully installed, configured and implemented Grunt!

I leave it up to you to explore the remaining tasks.

• grunt-contrib-sass
• grunt-contrib-cssmin

Further Reading

GruntJS Documentation

grunt-contib-watch - Basically monitors/watches file changes, then re-runs the task for those files automagically. 

grunt-newer - specially useful for images as minifying images can be quite slow.

GulpJS - somewhat similar to Grunt, but I think has much simpler configuration.

Ingenuity Geeks On A Beach Again!!

So you can say that we are at it again, as we couldn't be stopped, John, Earvin, JC, Pat and I are back in action as we headed to Mactan, Cebu for this year's Geek on the Beach (GOAB) held at the very prestigious Movenpick Hotel last August 21 and 22.

The success of the last year's GOAB indicated the need for another, and this was the realization of it. As expected, a lot of great people came, great ideas were shared and we've met lots of friends, both old and new. Of course, what's GOAB without a lot of good food and FREEBIES!

Day one, there were lots of interesting and very informative panel discussions, and the amusing 'Ask McClure Anything' (AMA) session, where David McClure of 500 Startups got to answer questions from the audience. Also, we were given enough time to talk to everybody else during networking breaks and over lunch.

Tina Amper of TechTalks.ph and her Welcome Message

Dave McClure of 500 Startups' AMA session

Panel B: Investor's Panel

Look who's caught dosing off!

Just after dinner.

Ravi Agarwal of EngageSPARK.com with the panel

Day two, there were still some panel discussions, but this time around, Break Out Sessions were added. This consisted of four different tracks having different topics being discussed simultaneously, namely Special Interest (Track A), Business/ Corporate Entrepreneurship (Track B), Gaming & Design (Track C) and Tech/Developer Track (Track D). We were free to choose which track we prefer, and we were able to switch to another track after each talk. The last parts of the event were really cool as we got to have selfies taken via drones and lots of prizes were given (just by simply wearing shorts entitled you to have one! Hah!).

Well, learning never ends and there are still a lot of people to meet out there. Looking forward to next year's GOAB then!