Skip to content

2015

  • 2 min read

3 Reasons to Love React

Recorded at the Hong Kong JavaScript and Node.js meetup on March 3, 2015:

Today, I want to discuss React, a JavaScript library for creating user interfaces. I've used it for several projects, and the more I work with it, the more I appreciate its features. I'll explain why I find React so compelling and why you should consider using it too.

As a software engineer, I understand the daily challenges developers face. Before using React, coding often felt uncomfortable, particularly when building user interfaces. There are numerous possible states, and testing all of them is impractical. You might encounter mutable DOM issues or unpredictable user inputs. Your UI might not behave as expected, or it might not scale well with large applications.

Programming is an art—specifically, the art of organizing complexity. ReactJS helps you manage this complexity when building UIs.

What Is React?

React serves as the 'view' in MVC (Model-View-Controller). Unlike full frameworks like MeteorJS, React focuses primarily on the UI. It is developed by Facebook and Instagram and is employed in their production environments. For example, the comment box you see on Facebook.com is a React component.

Why React?

I'll focus on three key points: React components, performance, and handling dynamic data.

1. React Components

In my previous role as a MeteorJS developer, I found traditional templating languages like Handlebars or Spacebars limiting. React, on the other hand, utilizes components instead of templates. This modular approach allows for more flexibility, reusability, and testability.

2. Performance

Thanks to the invention of the Virtual DOM, React offers impressive speed. Traditional approaches often require the entire page to re-render, even for minor changes. The Virtual DOM minimizes such expensive operations by updating only the changed parts of the DOM.

3. Managing Dynamic Data

State management is a significant challenge in UI development. React solves this problem by adopting a one-way data flow, which improves maintainability and simplifies debugging.

Closing Thoughts

In summary, React stands out for its simplicity and power. It enables the development of reusable, testable components. It offers excellent performance and effectively handles dynamic data.

That's all for now! Any questions?

Here are the slides: Slide Presentation

  • in zh
  • 1 min read

愛上React的三大理由

2015年3月3日在香港JavaScript和Node.js聚會上的記錄:

今天，我想談談React，一個用於創建用戶界面的JavaScript庫。我在幾個項目中使用過它，並且越多地與它共事，我就越欣賞其功能。我將解釋為什麼我覺得React如此引人入勝，以及為什麼你應該考慮使用它。

作為一名軟件工程師，我明白開發人員每天面臨的挑戰。在使用React之前，寫程式碼經常會讓人感到不適，尤其是在構建用戶界面的時候。可能的狀態有很多，並且測試所有狀態都是不切實際的。你可能會遇到可變DOM問題或無法預測的用戶輸入。你的用戶界面可能行為不正常，或者在大型應用程式中無法良好地擴展。

程式設計是一門藝術，特別是組織復雜性的藝術。在建立UI時，ReactJS幫助您管理這種復雜性。

什麼是 React？

React 是 MVC（Model-View-Controller）中的 'view'。與像MeteorJS這樣的全面框架不同，React 主要專注於 UI。 它由 Facebook 和 Instagram 開發，並被用於他們的生產環境中。例如，您在Facebook.com 上看到的評論框就是一個 React 組件。

為什麼選擇 React？

我將重點關注三個關鍵點：React 組件，效能，以及處理動態數據。

1. React 組件

在我之前作為 MeteorJS 開發人員的角色中，我發現像 Handlebars 或 Spacebars 這樣的傳統模板語言很有限。相反，React 使用組件而不是模板。這種模組化的方法允許更大的靈活性，可重用性和可測試性。

2. 效能

由於發明了虛擬 DOM，React 提供了令人印象深刻的速度。傳統的方法通常需要對整個頁面進行重新渲染，即使是對微小變化也是如此。 虛擬 DOM 通過僅更新 DOM 的變更部分來最小化這種昂貴的操作。

3. 管理動態數據

狀態管理是 UI 開發中的一大挑戰。 React 通過採用單向資料流來解決這個問題，從而提高了可維護性並簡化了調試。

結語

總結，React因其簡單和強大而脫穎而出。它使得可以開發可重複使用、可測試的組件。它提供出色的效能和有效管理動態數據。

就到這裏！有任何問題嗎？

這裡是幻燈片：幻燈片介紹

  • 1 min read

Common npm Permission Issues

The Problem:

If you are using a Mac and have installed Node.js via a pkg file downloaded from the official website, you are likely to encounter the following error message when you try to install an npm module globally:

npm ERR! Please try running this command again as root/Administrator.

My Solution:

DO NOT use the sudo command to install the package!

sudo npm install module -g

Some people recommend the above solution on Stack Overflow, but I strongly advise against managing packages with sudo. This workaround may temporarily solve your problem, but you'll likely encounter more issues later on.

Here is the recommended approach:

Step 1: Determine your username with the following command:

whoami

For example, my username is victorleungtw.

Step 2: Change the ownership of the node modules folder:

sudo chown -R `whoami` /usr/local/lib/node_modules

After performing these steps, you won't have to use sudo when installing npm packages in the future.

  • in zh
  • 1 min read

常見的 npm 權限問題

問題：

如果你正在使用Mac，並且通過從官方網站下載的pkg文件安裝了Node.js，那麼當你嘗試全局安裝一個npm模塊時，你可能會遇到以下的錯誤信息：

npm ERR! 請嘗試以root /管理員身份再次運行此命令。

我的解決方案：

不要用sudo命令來安裝包！

sudo npm install module -g

有些人在Stack Overflow上推薦上述解決方案，但我強烈建議不要用sudo來管理包。這種解決方案可能會暫時解決你的問題，但你將可能會在以後遇到更多問題。

下面是推薦的做法：

步驟1：使用以下命令確定你的用戶名：

whoami

例如，我的用戶名是victorleungtw。

步驟2：更改node模塊文件夾的擁有權：

sudo chown -R `whoami` /usr/local/lib/node_modules

執行這些步驟後，你將來在安裝npm包時就不必再使用sudo了。

  • 1 min read

Sublime Text 3: Using the OS X Command Line

The Problem

Sublime Text 3 includes a command line tool, subl. Unfortunately, this tool doesn't work right out of the box after you've installed the editor on OS X Yosemite.

My Solution

After installing Sublime Text 3, create a symbolic link using the following command:

ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

Here,

  • /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl is the location where the application is stored in your Applications directory.
  • /usr/local/bin is the chosen path where you want the symbolic link to reside.

To set Sublime Text as the default editor for various commands that prompt for input, configure your EDITOR environment variable as follows:

export EDITOR='subl -w'

The -w flag ensures that the subl command will not exit until the file is closed.

Additionally, you can set Sublime Text as your default Git editor with this command:

git config --global core.editor "subl -n -w"
  • in zh
  • 1 min read

Sublime Text 3：使用 OS X 命令列

問題

Sublime Text 3 包括一個命令行工具， subl。 不幸的是，當你在 OS X Yosemite 上安裝了編輯器後，這個工具無法直接工作。

我的解決方法

安裝Sublime Text 3後，使用以下命令創建一個符號鏈接：

ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

在這裡，

  • /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl 是應用程式在您的應用程式目錄中的存放位置。
  • /usr/local/bin 是您希望符號鏈接存在的選擇路徑。

要將Sublime Text設置為各種命令的默認編輯器，該命令提示輸入，請按照如下方式配置您的 EDITOR 環境變量：

export EDITOR='subl -w'

-w 標誌確保 subl 命令在文件關閉之前不會退出。

另外，您可以使用此命令將Sublime Text設置為您的默認Git編輯器：

git config --global core.editor "subl -n -w"
  • 3 min read

12 Things You Need To Know About ECMAScript 6

ECMAScript 6 is the next version of the JavaScript standard.\

Here are the 12 cool things you need to know about ES6:

1. Arrow Functions

Similar to CoffeeScript, ES6 allows you to define a function using the fat arrow syntax.

var square = n => n * n

2. Arrow Scope

The keyword ‘this’ can be confusing as it refers to whatever invokes it. For example, ‘this’ refers to the window object when using setTimeout. This issue is resolved by the arrow function expression, which binds ‘this’ to the function itself.

function yo() {
  this.name = "Victor"
  setTimeout(() => {
    console.log("yo " + this.name)
  }, 5000)
}
// Output: yo Victor

3. String Templates

Like CoffeeScript, ES6 includes a string interpolation feature using the ${} syntax for variables. Notice that the example below uses a back-tick character instead of single quotes on line 2.

var person = { name: "Victor", age: 24 }
var hello = `My name is ${person.name} and I am ${person.age} years old`

4. Let Scope

The let statement declares a block-scope local variable. In other words, it does not override the value of the variable in the outer scope.

var x = 10
for (let i = 0; i < 10; i++) {
  let x = i * 2
}
console.log(x) // x is still 10, not 18

5. Destructuring Arrays

Instead of declaring multiple variables one by one, you can assign them in one line like this:

var [one, two, three] = [1, 2, 3]

6. Destructuring Objects

Similarly, you can use destructuring for objects as well:

var { firstName: name } = { firstName: "Victor" }

7. Object Literals

You can use shorthand notation to construct an object, instead of writing {firstName: firstName, lastName: lastName}.

var firstName = "Victor",
  lastName = "Leung"
var person = { firstName, lastName }

8. Default Arguments

You can assign default values to arguments like this:

function sayHello(name, greeting = "yo man") {
  return `${greeting} ${name}`
}

9. Spread Operator

The spread operator (...) allows you to pass each element of an array as an argument.

function threeNumbers(x, y, z) {
  console.log(x, y, z) // 0, 1, 2
}
var args = [0, 1, 2]
threeNumbers(...args)

10. Classes

Much like other object-oriented programming languages, ES6 allows you to define a blueprint for constructing objects using the new class syntax.

class Person {
  sayHey(name) {
    return "hey " + name
  }
}

11. Class Inheritance

You can use the extends keyword to extend a class.

class Victor extends Person {
  sayHey() {
    return super.sayHey("Victor")
  }
}

12. Generators

Generators are functions that can be exited and later re-entered. Calling a generator function does not execute its body immediately. When the iterator’s next() method is called, the generator function's body is executed until the first yield expression.

function* idMaker() {
  var index = 0
  while (true) yield index++
}

var gen = idMaker()

console.log(gen.next().value) // 0
console.log(gen.next().value) // 1
console.log(gen.next().value) // 2

There are many new features in ECMAScript 6. For more details, please refer to the MDN. The official publication process began in Mozilla in March 2015 and is expected to be completed in June 2015. Stay tuned!

  • in zh
  • 2 min read

你需要知道的關於ECMAScript 6的12件事

ECMAScript 6 是 JavaScript 標準的下一個版本。

以下是您需要知道的有關 ES6 的12個酷事：

1. 箭頭函數

類似於 CoffeeScript，ES6 允許你使用肥箭頭語法定義一個函數。

var square = n => n * n

2. 箭頭範疇

‘this’關鍵字可能會令人困惑，因為它指的是調用它的東西。例如，當使用 setTimeout 時，‘this’ 指的是窗口物件。箭頭函數表達式解決了這個問題，將‘this’綁定到函數本身。

function yo() {
  this.name = "Victor"
  setTimeout(() => {
    console.log("yo " + this.name)
  }, 5000)
}
// Output: yo Victor

3. 字串模板

就像 CoffeeScript 一樣，ES6 包含了一個使用 ${} 語法用於變數的字串內插特性。注意下面的例子在第 2 行使用了反勾號而非單引號。

var person = { name: "Victor", age: 24 }
var hello = `My name is ${person.name} and I am ${person.age} years old`

4. Let 範疇

let 聲明了一個區塊範疇的本地變數。換句話說，它不會覆寫外部範疇中的變數值。

var x = 10
for (let i = 0; i < 10; i++) {
  let x = i * 2
}
console.log(x) // x is still 10, not 18

5. 陣列解構賦值

您不必逐一聲明多個變數，可以像這樣在一行中賦值給它們：

var [one, two, three] = [1, 2, 3]

6. 物件解構賦值

同樣地，您也可以為物件使用解構賦值：

var { firstName: name } = { firstName: "Victor" }

7. 物件字面量

您可以使用簡寫符號來構造一個物件，而不是寫 {firstName: firstName, lastName: lastName}。

var firstName = "Victor",
  lastName = "Leung"
var person = { firstName, lastName }

8. 默認參數

您可以像這樣為參數分配默認值：

function sayHello(name, greeting = "yo man") {
  return `${greeting} ${name}`
}

9. 展開運算符

展開運算符（...）允許您將一個陣列的每個元素作為參數傳遞。

function threeNumbers(x, y, z) {
  console.log(x, y, z) // 0, 1, 2
}
var args = [0, 1, 2]
threeNumbers(...args)

10. 類別

就像其他物件導向的程式設計語言一樣，ES6 允許您使用新的類別語法來定義一個用於構建物件的藍圖。

class Person {
  sayHey(name) {
    return "hey " + name
  }
}

11. 類別繼承

您可以使用 extends 關鍵字來擴展一個類別。

class Victor extends Person {
  sayHey() {
    return super.sayHey("Victor")
  }
}

12. 產生器

產生器是可以被退出並稍後重新進入的函數。調用一個產生器函數並不會立即執行其內容。當迭代器的 next() 方法被調用時，產生器函數的內容會被執行，直到遇到第一個 yield 表達式。

function* idMaker() {
  var index = 0
  while (true) yield index++
}

var gen = idMaker()

console.log(gen.next().value) // 0
console.log(gen.next().value) // 1
console.log(gen.next().value) // 2

ECMAScript 6中有許多新特性。更多細節，請參考 MDN。官方發表過程於2015年3月在Mozilla開始，並預計於2015年6月完成。敬請期待！

  • 2 min read

My Review of Hack Reactor Remote Beta

I enrolled in the Hack Reactor Remote Beta as part of the second cohort in Hong Kong to improve my technical skills in JavaScript.

The program was well-structured and offered a wealth of excellent lectures and hands-on experience in cutting-edge technologies.

I began by learning about recursion, closures, and data structures. Once I had a solid grasp of the basics, I moved on to learning various JavaScript frameworks, including BackboneJS, AngularJS, and NodeJS, all taught by instructors who are experts in their respective fields. To complete the course, I undertook multiple projects that provided comprehensive exposure to new tools like ThreeJS and ReactJS. For my thesis project, I built a machine-learning server to recommend beers, which was both challenging and enjoyable.

Collaborating with other remote students was a highly rewarding experience. We worked closely together, using Floobits for pair programming and Google Hangouts for daily stand-up meetings. The staff were exceptionally active on HipChat and were always eager to assist. The instructors were highly adept at teaching, making complex topics easily understandable even if you're not a computer science major. I appreciate their efforts in delivering this high-quality remote course.

I would highly recommend this course to anyone interested in coding. It offers a five-star learning experience.

  • in zh
  • 1 min read

我對Hack Reactor遠程Beta的評價

我參加了在香港的第二屆Hack Reactor Remote Beta，以提高我的JavaScript技術技能。

該課程結構嚴謹，提供了許多優秀的講座和先進技術的實戰經驗。

我從學習遞歸，閉包，和數據結構開始。一旦我對基礎有了堅實的掌握，我就轉向學習各種JavaScript框架，包括BackboneJS, AngularJS, 和 NodeJS，所有這些都是由各自領域的專家教導。為了完成課程，我進行了多個項目，這些項目讓我全面接觸到像ThreeJS和ReactJS這樣的新工具。對於我的論文項目，我建立了一個機器學習服務器來推薦啤酒，這既有挑戰性又很有趣。

與其他遠程學生的協作是一種非常有價值的經驗。我們密切合作，使用Floobits進行配對編程，並使用Google Hangouts進行每日站立會議。員工在HipChat上非常活躍，並且總是熱衷於提供幫助。講師們非常擅長教學，即使你不是電腦科學專業的人，他們也能使複雜的主題變得容易理解。我感謝他們為提供這種高質量的遠程課程而付出的努力。

我強烈推薦這個課程給任何對編程感興趣的人。它提供了五星級的學習體驗。