Skip to content

2015

  • 2 min read

Beer Recommendation Engine Using PredictionIO

The Problem:

We all love beer. Yet, today we are faced with an unprecedented variety of options, leaving us overwhelmed and indecisive: What should we drink next?

My Solution:

In our Hack Reactor thesis project, I built a machine-learning server using PredictionIO as a beer recommendation engine. Broadly speaking, the app is based on two main strategies:

  1. Content Filtering Approach: This uses various characteristics of each beer to identify its nature. For example, we utilize breweryDB to determine the style of a specific beer, its alcohol by volume (ABV), and its International Bittering Units (IBU). We then query the database to find beers with similar styles.

  2. Collaborative Filtering Approach: This relies solely on past user behavior, specifically your beer ratings. It employs matrix factorization techniques using the Alternating Least Squares (ALS) algorithm. We characterize both beers and users by vectors of factors inferred from beer rating patterns. A high correspondence between beer and user factors leads to a recommendation.

One advantage of using matrix factorization is its capability to incorporate additional information. When explicit feedback (i.e., your ratings) is not available, we can infer user preferences using implicit feedback, such as your browsing history and search patterns.

As a result, OnTapp matches you with beers that suit your taste. To get a beer recommendation and try out our demo, please visit: http://ontappapp.com/.

  • in podcast
  • 2 min read

Beer Recommendation Engine Using PredictionIO

The Problem:

Welcome to "Continuous Improvement," the podcast where we explore innovative solutions to everyday problems. I'm your host, Victor, and today we're diving into the world of beer and how technology is helping us make better choices.

Imagine this: you walk into a bar or a liquor store, excited to try something new and delicious. But suddenly, you find yourself overwhelmed by the countless options staring back at you. What should you drink next? Well, fear not, because today we have a solution to that beer dilemma.

In a recent blog post titled "The Problem and My Solution," we discovered that a Hack Reactor graduate took matters into their own hands and built a machine-learning server called OnTapp. This revolutionary app uses cutting-edge technology to recommend beers that match your taste preferences.

The app's creator implemented two main strategies: the content filtering approach and the collaborative filtering approach. Let's take a closer look at how each of these strategies works.

The content filtering approach uses various characteristics of each beer to identify its nature. It takes into account factors like the beer's style, alcohol by volume (ABV), and International Bittering Units (IBU). By analyzing these attributes, the app queries a database to find beers with similar qualities. Pretty cool, right?

Now, let's move on to the collaborative filtering approach. This method relies solely on past user behavior, specifically their beer ratings. By using matrix factorization techniques and the Alternating Least Squares (ALS) algorithm, OnTapp can create profiles of both beers and users. These profiles are then compared for similarities, resulting in personalized beer recommendations.

What's interesting about this approach is its ability to incorporate additional information. When explicit feedback, such as ratings, is not available, implicit feedback can be used. That means your browsing history and search patterns can also help determine your preferences. It's like having a virtual beer sommelier!

The OnTapp app is making waves in the beer community, providing beer lovers like us with a convenient way to navigate the ever-expanding beer landscape. No more aimless wandering through shelves or scrolling endlessly through beer menus. With OnTapp, you can get tailored recommendations and explore new flavors with confidence.

If you're curious to try out OnTapp and get personalized beer recommendations, head over to http://ontappapp.com/.

That's all for today's episode of "Continuous Improvement." I hope you've enjoyed diving into the world of beer and technology. Remember, there's always a solution to our everyday problems, and in this case, it's OnTapp. Join me next time as we explore another exciting innovation. Until then, cheers!

  • in zh
  • 1 min read

使用PredictionIO的啤酒推薦引擎

問題:

我們都愛啤酒。然而，今天我們面臨的是前所未有的選擇多樣性，讓我們感到不知所措和猶豫不決：我們下一個該喝什麼？

我的解決方案:

在我們的Hack Reactor論文計畫中，我構建了一個使用PredictionIO作為啤酒推薦引擎的機器學習服務器。廣義地說，該應用基於兩個主要策略：

  1. 內容過濾方法：這使用每種啤酒的各種特性來識別其性質。例如，我們利用breweryDB來確定特定啤酒的風格，其酒精度（ABV）和其國際苦味單位（IBU）。然後我們查詢數據庫以找到風格相似的啤酒。

  2. 協同過濾方法：這完全依賴於過去的用戶行為，特別是你的啤酒評級。它使用交替最小二乘法（ALS）算法的矩陣因子分解技術。我們通過從啤酒評級模式中推斷出來的因子向量來描述啤酒和用戶。啤酒和用戶因子之間的高度相關性將導致推薦。

使用矩陣因子分解的一個優點是其能夠加入附加資訊。當沒有顯性反饋（即，你的評級）時，我們可以使用隱性反饋，如你的瀏覽歷史和搜尋模式，來推斷出用戶偏好。

結果，OnTapp將你和適合你口味的啤酒配對起來。要獲得啤酒推薦並嘗試我們的示例，請訪問：http://ontappapp.com/.

  • 2 min read

AngularUI: Handling Mouseover Events for Google Maps Markers

The Problem:

It took me a while to figure this out, so I thought the issue deserved its own blog post. I found myself confused when trying to hook up mouseover events with Google Map markers using AngularUI. The documentation was vague on this matter, stating that it is only supported for a single marker and not for multiple markers.

For a single marker, it's straightforward to specify a directive with an events property in the HTML:

<ui-gmap-marker events="marker.events"></ui-gmap-marker>

Then in the controller:

$scope.marker = {
  events: {
    mouseover: function (marker, eventName, args) {
      // Callback code here
    },
  },
}

However, the same approach doesn't work for multiple markers. I initially thought I could simply add mouseover events to each marker like so:

markers.push({
  events: {
    mouseover: function (mapModel, eventName, originalEventArgs) {
      console.log("I'd really like to show the info window on mouseover.")
    },
  },
})

My Solution:

To resolve this, add the following to the HTML markers directive:

events="clickEventsObject"

And in the controller:

$scope.clickEventsObject = {
  mouseover: markerMouseOver,
  mouseout: markerMouseOut,
}

function markerMouseOver(marker, e) {
  // Callback code here
}

function markerMouseOut(marker, e) {
  // Callback code here
}

It works! This handler returns a directly-mapped array of the models that belong to the gMarker cluster sent along with the event. If you have any questions, feel free to ask. 😊

  • in podcast
  • 2 min read

AngularUI: Handling Mouseover Events for Google Maps Markers

The Problem:

Welcome back to another episode of Continuous Improvement, the podcast where we explore strategies and techniques to continuously improve our skills and overcome challenges. I'm your host, Victor, and in today's episode, we'll be discussing a common problem that many developers face when working with Google Maps in AngularUI.

So, imagine you're working on a project that involves displaying multiple markers on a Google Map. You want to add mouseover events to these markers, but you realize that the AngularUI documentation is a bit vague on how to achieve this. This confusion led me to dive deeper into the problem and find a solution, which I'll be sharing with you today.

The initial approach specified in the documentation is straightforward for a single marker. You simply need to add the events property to the ui-gmap-marker directive in your HTML, like this:

<ui-gmap-marker events="marker.events"></ui-gmap-marker>

Then, in your controller, you can define the marker object with the desired event callbacks, such as mouseover. It looks something like this:

$scope.marker = {
  events: {
    mouseover: function (marker, eventName, args) {
      // Callback code here
    }
  }
};

This works perfectly fine if you only have a single marker. But what if you have multiple markers and you want to attach mouseover events to all of them? That's where the confusion kicks in.

After some trial and error, I discovered a workaround that allows you to add mouseover events to multiple markers on the Google Map using AngularUI. Here's what you need to do:

First, in your HTML, within the markers directive, add the following attribute:

events="clickEventsObject"

This attribute serves as a reference to an object that contains the event callbacks for your markers. Let's call it clickEventsObject for now.

Moving on to the controller, you need to define the clickEventsObject and specify your event callbacks. For example:

$scope.clickEventsObject = {
  mouseover: markerMouseOver,
  mouseout: markerMouseOut
};

function markerMouseOver(marker, e) {
  // Callback code here
}

function markerMouseOut(marker, e) {
  // Callback code here
}

By binding the events attribute in the HTML to the clickEventsObject, you can now attach the desired event callbacks to each marker.

And voila! You can now enjoy the benefits of mouseover events on multiple markers in Google Maps using AngularUI. It's a simple yet effective solution that gives you the flexibility you need.

And that concludes today's episode of Continuous Improvement. I hope this solution helps you in your own projects and saves you some confusion and frustration. As always, if you have any questions or suggestions for future episodes, feel free to reach out to me at victorleungtw@gmail.com.

Thank you for tuning in, and don't forget to keep improving every day. Until next time!

  • in zh
  • 1 min read

AngularUI：處理Google地圖標記的滑鼠懸停事件

問題：

我花了一些時間才弄清楚這個問題，所以我覺得這個問題值得一篇自己的博客文章。當我試著用AngularUI連接Google Map標記的滑鼠懸停事件時，我發現自己很困惑。文件在這件事情上很含糊，說它只支援單一標記，而不支援多個標記。

對於單一標記，只需要在HTML中指定一個帶有 events 屬性的指令就很直接：

<ui-gmap-marker events="marker.events"></ui-gmap-marker>

然後在控制器中：

$scope.marker = {
  events: {
    mouseover: function (marker, eventName, args) {
      // 回調代碼在此
    },
  },
}

然而，相同的做法不適用於多個標記。我最初以為我可以簡單地為每個標記添加滑鼠懸停事件，就像這樣：

markers.push({
  events: {
    mouseover: function (mapModel, eventName, originalEventArgs) {
      console.log("I'd really like to show the info window on mouseover.")
    },
  },
})

我的解決方案：

為了解決這個問題，將以下內容添加到HTML markers 指令：

events="clickEventsObject"

並在控制器中：

$scope.clickEventsObject = {
  mouseover: markerMouseOver,
  mouseout: markerMouseOut,
}

function markerMouseOver(marker, e) {
  // 回調代碼在此
}

function markerMouseOut(marker, e) {
  // 回調代碼在此
}

它成功了！這個處理程序返回一個直接映射的模型陣列，該陣列屬於與事件一起發送的gMarker集群。如果你有任何問題，請隨時向我提問。😊

  • 2 min read

Hacking New Year's Resolutions for 2015

As the year draws to a close and a new one begins on January 1st, many people set New Year's resolutions. However, 92% of New Year's resolutions ultimately fail. Why is that?

The question intrigues me. With my hacker mentality, I enjoy applying problem-solving skills to various situations, and I would be ecstatic to break this 8% success rate barrier.

Research suggests that 'willpower' may be a finite resource. We all aspire to improve ourselves, but relying solely on willpower is often insufficient. Failing to meet our goals can be disheartening, leading to a cycle of self-criticism that doesn't help us move forward.

To effect meaningful change, we need to keep our goals both simple and achievable. Tackling low-hanging fruit can provide the motivation to keep going. It's important to convert vague aspirations into specific objectives and to strive for them daily. After all, we are the sum of our repeated actions. Excellence, then, is more a habit than an isolated act.

My Annual Objectives

To keep myself on track, I maintain a daily to-do list that includes:

  1. Always Be Coding – Dedicate at least one hour each day to solving toy problems or taking on coding challenges.

  2. Prioritize Physical Health – Spend 30 minutes a day jogging or engaging in other exercises. A healthy body fosters a healthy mind.

  3. Commit to Learning – Allocate an hour each day to reading books or watching educational videos to expand your knowledge.

  4. Strengthen Social Bonds – Spend an hour each day connecting with family and friends, whether it's over lunch, dinner, or a simple catch-up.

  • in podcast
  • 3 min read

Hacking New Year's Resolutions for 2015

As the year draws to a close and a new one begins on January 1st, many people set New Year's resolutions. However, 92% of New Year's resolutions ultimately fail. Why is that? Welcome back, listeners, to another episode of Continuous Improvement. I'm your host, Victor, and today we're diving into a topic that has captivated my curiosity - New Year's resolutions. We all strive to better ourselves, but why do so many of our resolutions fail?

Studies have shown that only 8% of New Year's resolutions actually succeed. That's a staggering number. So, I embarked on a mission to understand why and discover how we can defy the odds.

Researchers suggest that relying solely on willpower to achieve our goals may not be enough. Willpower can be depleted, leaving us feeling disheartened and less likely to continue our journey towards self-improvement.

But fear not, my fellow growth enthusiasts! There is a way to break this cycle and achieve meaningful change. The key lies in setting simple and achievable goals.

Let's break it down. Instead of aiming for lofty ambitions, focus on the low-hanging fruit. These small wins can provide the motivation we need to keep going. Remember, excellence is not a one-time accomplishment but rather a habit formed through consistent actions.

To illustrate this, let me share with you my annual objectives – the daily habits I've incorporated to keep myself on track.

First and foremost, it's always important to keep coding skills sharp. I dedicate at least one hour each day to solving toy problems or tackling coding challenges. Trust me, even a single hour of focused coding can take you a long way.

Next, physical health. We've heard it time and time again, but it's true – a healthy body fosters a healthy mind. I prioritize spending at least 30 minutes a day jogging or engaging in other exercises that keep me active and energized.

Learning should never cease, my friends. I allocate an hour each day to immerse myself in enriching content – whether it's reading books or watching educational videos. The power of knowledge is remarkable, and by dedicating time to learn each day, we unlock endless potential.

Finally, never underestimate the power of human connection. Strengthening social bonds is vital for our well-being. I spend an hour each day connecting with my loved ones – be it over a meal, a video call, or simply catching up on their day.

There you have it, the secret to continuous improvement lies in setting achievable goals and turning them into daily habits. Remember, it's not about making grandiose resolutions that fizzle out by February. It's about focusing on those consistent, small actions that compound over time.

I encourage you all to reflect on what areas of your life could benefit from a little tweaking and experiment with implementing these daily habits. Trust me, the results will speak for themselves.

That's a wrap for today's episode of Continuous Improvement. Thank you for tuning in, and remember, the journey toward self-improvement is one we embark on together. Stay curious, stay hungry, and never stop striving for growth.

Until next time, this is Victor signing off. Take care, my friends!

  • in zh
  • 1 min read

找出2015年新年決心的竅門

當一年即將結束，新的一年在1月1日開始時，許多人會設定新年決心。然而，92%的新年決心最終都會失敗。為什麼會這樣？

這個問題引起了我的興趣。以我的黑客思維，我喜歡將問題解決技巧應用到各種情況中，如果能突破這8%的成功率，我會非常高興。

研究顯示，'意志力'可能是一種有限的資源。我們都渴望改進自己，但僅靠意志力往往不足以達成目標。未能達成我們的目標可能會讓人沮喪，導致一種自我批評的循環，這並不幫助我們前進。

要產生有意義的變化，我們需要保持我們的目標既簡單又可實現。解決手邊易於應對的問題，可以提供繼續前進的動力。將模糊的抱負轉化為具體的目標並每天為之努力是很重要的。畢竟，我們是我們重複行動的總和。因此，卓越更多的是一種習慣，而非孤立的行為。

我的年度目標

為保持自己在正軌上，我制定了每日待辦事項，包括：

  1. 始終保持編程- 每天至少花一個小時解決玩具問題或接受編程挑戰。

  2. 優先考慮身體健康 - 每天花30分鐘慢跑或做其他運動。 健康的身體養育健康的心靈。

  3. 致力於學習- 每天花一個小時閱讀書籍或觀看教育影片，擴展你的知識。

  4. 加強社交網絡- 每天花一個小時和家人或朋友聯繫，無論是在午餐，晚餐，或一次簡單的聊天。

  • 1 min read

Angular.js Factory: Handling $http Asynchronously

The Problem:

When I was using the $http service to get data from a remote API, the code snippet below was unable to return data back to the controller.

myApp.factory("myFactory", function ($http) {
  var data = { anArray: [] }

  $http.get("/api").success(function (response) {
    data.anArray.push(response)
  })

  return data
})

This issue arises because the return statement is executed before the $http GET request finishes pushing data into the array.

My Solution:

To handle data asynchronously, the controller needs to instruct the service on what actions to take when the data is received later:

myApp.factory("myFactory", function ($http) {
  return {
    getData: function () {
      return $http.get("/api")
    },
  }
})

myApp.controller("MyController", [
  "$scope",
  "myFactory",
  function ($scope, myFactory) {
    $scope.data = []

    var handleSuccess = function (response, status) {
      $scope.data = response
    }

    myFactory.getData().success(handleSuccess)
  },
])

Let me know if you have any questions. 😊