Y4iT comes to Cebu

Last November 22 - 23, 2012 the biggest IT event in the Philippines comes to Cebu. The Philippine Youth Congress on Information Technology or commonly called as Y4iT (Youth for IT) is an annual event hosted by UP Information Technology Development Center (UPITDC) that provides a venue to experience activities and hear talks about IT and IT-related topics from various speakers in the different fields in IT to hone the global competence of IT practitioners.

Together with CeBuinIT, they organized the very first Y4iT outside Luzon. 

Around 3,000 IT students from different schools in Visayas and Mindanao from Leyte, Iloilo, Surigao, Aklan and more came here to Cebu to experience Y4iT. It was great to see the enthusiastic faces and high energy of the participants.     

It was also a privilege for us to be invited to speak about our startup experience. 

Ademar ended his talk with this line, “Love what you do”.

It was a great experience for everyone. We learned a lot from the speakers and inspired us to work harder. I hope the students also learned something. 

Know more about the speakers here. More photos here.

As what Mr. Jerry Rapes, President and CEO of Exist, shared to all of us, “You only need 3 things to succeed in IT: a computer, internet connection and the thing between your ears”. 

- Honee

UI and UX demystified!

GDG DevFest Cebu 2012

Google Developer Groups (GDG) Cebu had its very first GDG DevFest in Cebu last November 7, 2012 at Quest Hotel. A lot of participants from the academe, industry, startups who are eager to know more about Google Technologies joined the event. We’re happy that we were invited by Mr. Jerome Locson to be part of the panel for Let’s Startup. Thanks Jerome!

Ms. Pauline Wade of CeBuinIT, Mr. Dave Overton representing Techtalks.ph for SWCebu and us (Photo taken from GDG Cebu)

Google and Education by Ms. Janet Yoon

HTML5/CSS3 by JM Ibanez

Mobile UI Designing: Android UI/UX Best Practices by Mac Ailjun Madrid

Students from USJR with their professor

It was a great opportunity for everyone, especially for the students. The event ticket was free and you get to be updated on the current technology trends. If you truly want to take charge of your career route, we suggest that you join tech events in your local community. You’ll learn a lot and you get to meet a lot of people giving you more options on what career path to take. :)

Links:

Website: http://www.gdgcebu.org/

Google+: http://www.gplus.to/gdgcebu

More photos here.

By Honee

A New Object that is Ruby

I’ve always pictured “Ruby” to that gem - that shining red gemstone, adorning women of high class; surely an eye catcher, precious, expensive, not for a commoner. But just recently, this seemingly luxurious item is not solely the picture. Similar to this fancy object, I am now learning a new object-oriented programming language by the name of Ruby.

But before learning Ruby was setting up Ubuntu. It was not my first time but still the installation was not smooth flowing. I had to repeat a couple of times, read tutorials of dual-booting over and over again before alas! Welcome to Ubuntu! Even using it was not that piece of cake.

Just like a whole new experience, adjustments are present. I’m back to studying. I’m back to reading and like a student from my university days; I’ll be learning a new programming language. It is not that new to me though. Being used to Java language, it becomes easier for me to understand since it’s also an object-oriented language. However, unlike Java, everything in Ruby is treated as an object. And when I say everything that includes an integer or even a string – that’s really something new for me.

Provided with an interactive way of learning, I started learning Ruby from rubymonk.com. In here, I’ve tried to write my own line of code to accomplish simple tasks in Ruby – working with Strings, Arrays and more. The site just does not feed you with the code to write but importantly makes you think, analyze or sometimes guess (which I usually do ^^) how you do the task the Ruby way.

Right now, I’m still confused with certain things. I was expecting to be able to make my own simple program but I don’t know where to start. I actually have a lot of questions that I know not how to deliver; I mean how to ask about these things. Since I’m not yet done with learning Ruby, I looking forward to learn more, expecting that as I continue all of these questions would be eventually answered. On top of that, I set myself to be able to write a complete working code in Ruby – my very first.

by Airene

Hack2Hatch Learnings

One way to improve our startup community is to share the learnings. We’re happy because we’re given a chance to share our learnings from Hack2Hatch to a group of startups headed by Markjeee, Dave and Tins.

Ademar shared what Codetoki learned from h2H.

The best way to present the learnings is to dress the experience.

That’s the explanation why Hawaiian was the perfect outfit. hehe. So, here’s what we shared:

Hack2hatch Learnings Summary

The main point we highlighted was how important the business plan is. We’re not referring to the traditional business plan. What we’re talking about is that you have to be prepared on defending the viability of your proposed solution through research and figures.

From our experience in h2H, we learned that being prepared on the business aspect really matters. Here’s a list on what we think we should have prepared:

• Elevator Pitch - A short summary about your product and its value proposition.
• Market Validation - Determine the market size and target market. Can also include your research / survey on what your target customers think about your product. 
• Problem - A clear explanation on what you are trying to solve since you are proposing for a solution to a problem, not a solution looking for a problem. 
• Solution - Explanation on what your product is all about and how it will help solve the problem. 
• Revenue Model - What is your price structure. How would you price your service offering.
• Financial Projections - Revenue forecast for 3 to 5 years. (Don’t get intimidated with figures. You may check your market size and from there, forecast how many would use your product.)
• Market Opportunity - An identified need, want, trend or demand that opens an opportunity for you to grab and exploit. 
• Differentiation - What makes your product/service stand out among your competitors. Explanation on the unique value you give to your customers. 

(Disclaimer: These were based from the things we understood. Feel free to correct us if we’re wrong. Also, feel free to share what you learned too so more people can benefit from this discussion. Thank you!) 

Here’s a group photo of BSFounders Club. Thanks Markjeee for the treat! :)

Master List

• Markjeee of Caresharing
• Dave of Sym.ph
• Tins of Techtalks.ph
• Wes of Mynimo.com
• Mark and Johanna of Happy Garaje
• Jerome and Daryl of Luto.co
• Albert and Nicole of Spelldial
• Janessa of WaitKnowMore
• Ian and Patrick of Schoolabs, Tropa.ph
• Me and Ademar of Codetoki
• more photos here

(P.S. Markjeee is also calling out startup founders out there. If you’re interested to be part of the tech circle in Cebu, feel free to email me at honee[at]bootyard.com so I can introduce you to the group.)

by Honee 

Codetoki’s First Applicant! :)

So Hack2Hatch is finally happening tomorrow. You can see all the media buzz, the hashtags and the facebook shares flying on the internet. It is certainly a big event, all the successful Filipino technopreneurs are coming back to help mentor local aspiring technopreneurs.

From all the chaos of working on our client projects and requirements we had to pass for Hack2Hatch, we silently deployed the new version of codetoki.com yesterday.

So what does this new version do? Let me summarize what it does exactly:

1. Companies post jobs.

2. Companies list their requirements (technical/programming skills) represented by badges.

3. Applicants who wants to apply to a specific job has to collect those badges the company required by taking on challenges (sets of programming problems presented with gamification principles).

So what happened after we deployed?

We posted a (Ruby Programmer) job for Bootyard . And after that, nothing actually happened :) We purposely didn’t share or tell any of our friends to use it.  Cause we had experiments in mind (a.k.a. Lean Startup’s testing assumptions).

Our experiments was this:

1. Would an applicant/entry level developer actually take the time to work on those 15 sets of problems?

2. Was our workflow (UI/UX) intuitive without any further instructions?

Today those assumptions where all tested.

We got our first application! :) Surprisingly it wasn’t from an entry level developer, it was from an experienced Java developer who wanted to learn and change career as Ruby Developer.  Which somehow makes him an entry level developer for  the Ruby Language.  

So was he hirable for us?

For one thing, he was really, really interested that he finished the Ruby Mining Challenge. Compared to the resumes we received before, we would certainly choose him!

Attached is his cover letter:

- Ademar

Stand Up!

There are lots of causes of neck pains. Some you can deal with, some you just ignore ( if you know what i mean *blink* ). Good thing  our mStands arrived today.

Goodbye neck pains! :)

by Ademar

Hack2Hatch

In 1950’s, the Philippines was predicted to be one of the tiger economies in Asia. Sadly, we missed the opportunity to deliver. Today, Bloomberg predicts that in 2050 the Philippines will be a Tiger economy. Let us not miss it this time.

In the tech scene, successful Pinoy technopreneurs from abroad like Dado Banatao, Winston Damarillo and Sheila Lirio Marcelo are trying to mimic the Silicon Valley environment, helping the Filipinos through mentorship and possibly funding them. Hack2Hatch as described in their website is:

Hack2Hatch is a weekend entrepreneurship camp where young startups will be mentored one-on-one by experienced investors and founders from Silicon Valley. Join us on Oct. 5-7, 2012 in Cebu City.

Last Tuesday, September 6, 2012, we attended a pre-hack2hatch party in Loft Cebu City.

Here’s a perspective photo by Ademar:

“Few will have the greatness to bend history itself, but each of us can work to change a small portion of events, and in the total of all those acts will be written the history of this generation.”

- Robert F. Kennedy 

“Iilan ang magiging dakila sa pagbali ng kasaysayan, subalit bawat isa sa atin ay maaaring kumilos, gaano man kaliit, para ibahin ang takbo ng mga pangyayari. Kapag pinagsama-sama ang ating munting pagkilos, makalilikha tayo ng totalidad na magmamarka sa kabuuan ng kasaysayan ng henerasyong ito.”

- translated by Tito Sotto

by Honee

Organizing CoffeeScripts on Rails

How to make a mess

When we use rails scaffold, it provides us a single coffescript named after the controller we created with scaffold. 

Example:

Ademar-Tutors-MacBook-Pro:blog_app ademartutor$ rails generate scaffold Blog title:string body:text

Automatically we put all our coffeescript code used by the blogs controller pages on blogs.js.coffee.

At first it’s not something that we should we worry about since it is only a few lines of code that can easily be read. But when that 2 or 3 lines of coffescript grows into a 50 plus lines of code, it becomes an entirely different beast.

How to organize

To organize the coffeescript files, i’ve separated them by methods of controllers and logically (through classes).

Step 1:

In your application.html.haml (.erb if your not using haml) on you body tag add these attributes:

 %body{ "data-controller" => controller_name, "data-action" => action_name }

Step 2:

Create an apps.js.coffee ( this instantiate the specific coffeescript class used on the method controller )

Here’s is a sample apps.js.coffee file:

APP =
  # Instantiate coffescripts common to all/most of your apps pages
  common:
    init: ->
      new flashMessage
      new CornersBrowser
      new fancyBox
      new tinyEditor
      new tipsy
      new confirmDelete

  # kids and messages are controllers
  kids:
    # index is a method of the kids controller
    index: ->
      # you instantiate a coffeescript class used 
      # on a specific     page of your app
      new kidPopup

  messages:
    new: ->
      new recipient
      new attachment
      new input


# Does the following:
#   1. Gets the current controller and method name
#   2. Executes the "common" coffeescripts that will be 
#       used on all pages of the app ( see code common
#       method above )
#   3. Instantiates the specific coffeescript classes
#       determined by the controller name and method

UTIL =
  exec: (controller, action) ->
    ns = APP
    action = (if (action is `undefined`) then "init" else action)
    ns[controller][action]()  if controller isnt "" and ns[controller] and typeof ns[controller][action] is "function"

  init: ->
    body = document.body
    controller = body.getAttribute("data-controller")
    action = body.getAttribute("data-action")
    UTIL.exec "common"
    UTIL.exec controller
    UTIL.exec controller, action

$(document).ready ->
  UTIL.init()

Here’s a sample class that was instatiated on apps.js.coffee:

# Filename: tipsy.js.coffee
class window.tipsy
  constructor: ->
    $('.tipsy').tipsy
      gravity: $.fn.tipsy.autoNS
      fade: true

Note:

I also organize the coffeescript files like this:

app/assets/javascripts/
  apps.js.coffee
  common/
     -- common coffeescript files used all throughout the app
  controller/
     blogs/
        -- coffeescript files used in the blog controllers
  plugins/
    -- put all plugins you use here

Now that’s how I organize coffeescript files. Hopefully this will give you an idea on how to organize your coffeescript files.

Sources:

http://www.stakelon.com/blog/2011/12/coffeescript-organizing-classes-in-separate-files/

http://www.manas.com.ar/spalladino/2012/05/20/organizing-coffeescript-code-in-a-rails-3-app/

http://coffeescript.org/

There is one source where I got the apps.js.coffee, I’ll update this post the moment I remember it :)

- Ademar Tutor

What’s new in HTML5?

HyperText Markup Language (HTML), played a vital role in making the web a better place to hang out. Imagine if the web looks so dull, who wants to stay in front of our screens all day long? Who would enjoy browsing sites, listening and viewing videos? With the fast advancement of technology, the demand for a better coding experience in creating web pages had pushed HTML to its limit and thus, a better version was created in the new HTML5.

So what’s new in HTML5? 

Here, I give you a brief overview on what’s in store for you when you use HTML5. 

<!DOCTYPE html> 

Yes, you may now use <!DOCTYPE html>. This one is so much better than the old one. It’s shorter and easier to remember. ;)

Semantic Elements

Ideally, semantic elements should describe their purpose clearly making it easier for developers to understand. However, there are tags that don’t have any meaning like the <div> tag. We commonly use IDs or declare class names (div class=”header”) to the <div> tags to give meaning to it.  

In HTML5, new semantic elements were released to convey clearly the purpose of the elements. Here are a few examples of the new elements in HTML5:

• <header> - header
• <footer> - footer
• <section> - section
• <nav> - navigation 
• <article> - article

Audio and Video tags

The ability to support audio and video is also new in HTML5 making it is easier for developers to add video and audio using the tags <video> and <audio>. Another good thing about the audio and video elements is that it is supported in all major browsers. 

HTML5 Applications

Web and mobile development is so much easier with HTML5.  Here are some of the features added that makes the whole development process easier. 

• Local data storage API
• Geolocation API
• Local file access
• Local SQL database
• Application cache
• Javascript workers
• XHTMLHttpRequest 2

HTML5 uses CSS3

With the new HTML5, drawing graphics and creating some cool effects are much easier. Here are few elements added:

• New Selectors
• New Properties
• Animations
• 2D/3D Transformations
• Rounded Corners
• Shadow Effects
• Downloadable Fonts

Note: I’ll explain further what’s new in CSS3 in my next blog so stay tuned!

There, I gave you a brief overview on what’s new in HTML5. There’s a whole lot more of new stuffs so research some more. 

Real web designers code their own designs. If they don’t know yet, they will learn. And you’ll never know how if you won’t try and figure it out yourself. 

- Honee

We have investors!

We (me and honee) are currently a two-person team now at Bootyard since Gerda left and our interns focused more on their studies.

Honee and I have been working together on a lot of stuff before. We’ve tried exporting goods internationally, trading goods at the national level, ventured on food and renewable resources business.  But Bootyard is something new, instead of trading stuff, we have to build stuff (our product or projects for other people) for people to pay us. 

 For clarification, please see translation below:

So how do we go about this? Based from our past experience, you need to invest on the stuff that matters to the business.  Investment doesn’t necessarily have to be money.  Taking a look at our experience:

Investing on skills is what we really need for Bootyard to profit well. Skills on software development (Ruby on Rails, iOS, Android and sooooo much more), system administration, UI/UX designing, bargaining with clients, business development, handling employee morale ( mine and honee’s ) and the list goes on and on. It may take up the rest of our lives to master them all but hey: 

                                          “The Journey is the Reward.”

PS: Yup, we already have ourselves as investors. ;)

- Ademar

PSIA invitation

Last June 14, 2012, we were invited to present Codetoki idea and share our experience in participating startup competitions to PSIA (Philippine Software Industry Association) members of PD/SIG (Product Development and Special Interest Group). The meeting was held at the Asian Institute of Management in Makati.

The first speaker was Ms. Maoi Arroyo, Founder and CEO of Hybridigm Consulting Inc., the Philippines’ first Bio-tech consulting firm. She talked about the aspects of commercialization. It was great to know that there is a Bio-tech consulting firm in the Philippines. Very inspiring.

Sir Earl Martin Valencia, VP/Head of Corporate Development Innovation at SMART Communications shared his experience handling a small team inside a big company. His team had a budget of $2,500 only but they were able to meet their goals. Another interesting info about Sir Earl was that he was a rocket scientist at Raytheon Space and Airborne Systems. Really amazing!  

Ms. Ito Gruet, VP-Business Development at Computer Professionals, Inc., shared her experience and insights on the New Zealand Product Development Ecosystem. 

And lastly, Mr. Arup Maity, CEO of BlastAsia, talked about the Lean Startup and Product Development. 

And here’s me talking about Startup Weekend Cebu and the idea behind Codetoki.

This could not be possible without the help of Sir Alvin of Microsoft. Thank you so much Sir Alvin! :)

- Honee

(All photos were grabbed from PSIA flickr account)

IT Companies in Manila

This is part 2 of our experience in Manila last June. Despite our limited time, we were able to learn many things. We’re so happy to bring with us all the learnings from the people in the IT industry. 

Pointwest Technologies

One company we were able to visit was Pointwest Technologies in Makati. Ms. Ma. Cristina “Beng” Coronel, President of Pointwest Technologies, was very warm and helpful in giving us insights on how we can improve Codetoki. Her story on how she started her company was also very inspiring. Not only that, her company shows that they are a proud Filipino IT firm.  

Microsoft

After our meeting in Pointwest, Sir Alvin invited us to go to Microsoft. He offered us an available room to prepare for our presentation in PSIA that afternoon. What’s cool about Microsoft office rooms? It has built-in sensors where the light turns off when no motion is detected. You have to wave your hands or move around so the light turns on. Cool isn’t it? :D Yea, we think it’s super cool too. hehe

Here’s the giant Microsoft name.

Orange & Bronze

We were also given a chance to meet Sir Calen Legazpi, CEO of Orange & Bronze. Sir Calen shared to us how he and his partner started their company. I can say he really shared the best advice ever about starting a business. Having experienced all the struggles in starting and growing a company, he’s truly inspirational. We learned a lot from him about bootstrapping the business.    

O&B office occupies four floors  and this is what you can see in the 4th floor. In every floor you can see a different set-up of the space. Really a homey place to work.

All the meetings and office visits this day were made possible by Sir Alvin of Microsoft. Thank so much Sir Alvin! :)

Note: If you haven’t read Part 1, here’s the link.

-Honee