Home

這不是技術問題，笨蛋

我喜歡幫助人並解決複雜的問題。但是，碰到超出程序員能力範圍解決的問題，我感到沮喪。如果你缺乏工程背景，你可能認為你的挑戰是技術上的 —— 你可能認為一個網站，一個應用程序，或者一個機器學習服務器可能是解決方案。但實際上，這些很少是根本原因。以下是我認為你的七大核心問題：

1. 你沒有兌現你的承諾： 你的產品的目標是什麼？你試圖解決什麼問題？你了解你的客戶需求嗎？你的產品在市場上是如何嶄露頭角的？你對交付過程有控制權嗎？若否，你可能在浪費時間和資源製作無人需要的東西。

2. 你害怕冒險： 你害怕進行重大改變，因為可能會出問題。無論是混亂的CSS文件，已經過時的瀏覽器，或者沒有人敢碰的紊亂程式碼，這些問題都需要關注。整理你的技術債務以便你能夠前進，這是至關重要的。

3. 你缺乏創造力： 輕微的美觀問題，如文字對齊不齊或框框不在中央，可能看起來容易修復，但仍然會影響整體設計。嘗試信任你的設計師讓他們做出大膽的視覺選擇，或者雇用一個用戶體驗專家進行A/B 測試。你可能還需要投資於SEO的高質量內容。

4. 你建立膚淺而不誠實的關係： 你缺乏開放的溝通，這使進展和障礙都模糊了。你可能用過度承諾來誤導投資者，制造一種一切都好的假象。這種不透明將最終傷害到所有人。

5. 你孵化了你的團隊內的競爭： 你知道你的團隊為何不快樂嗎？是否有過多的工作量導致疲憊？他們喜歡他們的工作嗎？他們對系統有信心嗎？如果工作環境既不愉快也不刺激，這可能是時候重新考慮你的領導方式了。

6. 你比你想象中的生產力低： 你有注意到生產力下降了嗎？沒有明確結果的無聚焦會議，以及試圖一心多用而又沒有設定優先順序，不僅浪費你的時間，也浪費了你周遭人的時間。

7. 你不淡泊： 你優先考慮的是自己是對的，而非做出正確的事。因為你的資歷和經驗，你認為你的觀點一定是正確的。你的自我心理影響了你的判斷，阻止你做出客觀的決定。

我們很容易找出軟體中的錯誤，但在公司文化中發現錯誤則難上加難。解決這些基本問題應該是你的第一步。

What I Learned from Building Large-Scale Applications for Overseas Clients

The IT industry in China is rapidly growing. Over the last year in Hong Kong, I've had the privilege of working on an exciting project that has become a significant milestone in my career, offering me the opportunity to learn something new and innovative.

While working on many projects, it's generally more productive to have every team member located in the same place. However, I found myself collaborating with remote colleagues across various time zones, including Pacific Standard Time, UTC-06:00, and UTC+10:00, which wasn't ideal for productivity.

Another challenge is the language barrier with clients. For those who speak Chinese but aren't proficient typists, I recommend learning the pinyin input method to keep up with brief conversations in QQ Chat.

To the surprise of many foreigners, China censors GitHub, making it impossible to simply use npm install & bower install within the Great Firewall. Additionally, hosting on AWS and some analytics tools are blocked, necessitating the search for alternatives. Moreover, your developer colleagues may prefer a different work style, rather than adopting scrum methodology or using the JIRA board for project visibility.

Our public beta test of the Ember application encountered performance issues. The initial load and rendering times were slow, despite Ember's developer-friendly tools. Compounding the problem, at least 20% of our customers used low-end computers with outdated browsers. I was amazed to see Windows XP crash simply from loading font icons. We eventually addressed this issue by refactoring the application with vanilla JavaScript. Although this improved speed, it doubled the amount of code and tripled the number of states and bugs to manage, which was far from ideal.

One crucial lesson we learned the hard way is the importance of maintaining complete control over the delivery pipeline; otherwise, a release becomes unattainable. Shipping early and often is more of an art than a science. Despite working for months on three redesigns and receiving positive feedback, we were still unable to launch the project. The inertia inherent in large corporations and a culture resistant to change proved too difficult to overcome.

Through this project, we gained valuable insights into both the technical and project management aspects. Shipping early and often is best practice, and I look forward to applying these lessons to future projects.

What I Learned from Building Large-Scale Applications for Overseas Clients

The IT industry in China is rapidly growing. Over the last year in Hong Kong, I've had the privilege of working on an exciting project that has become a significant milestone in my career, offering me the opportunity to learn something new and innovative.

Victor (Host): Welcome back to "Continuous Improvement", the podcast where we dive into real-life stories of professionals facing challenges and finding ways to improve themselves and their work. I'm your host, Victor, and today we have an exciting episode centered around the rapidly growing IT industry in China.

Over the past year, I've been fortunate enough to work on a thrilling project in Hong Kong that has truly become a significant milestone in my career. It offered me an opportunity to learn something new and innovative, but it also came with its fair share of challenges.

One of the main obstacles I encountered was collaborating with remote colleagues across different time zones. With team members spanning from Pacific Standard Time to UTC-06:00 and UTC+10:00, productivity was certainly a challenge. However, we found ways to overcome this hurdle and maintain effective communication.

Another challenge we faced was the language barrier with clients. While some spoke Chinese, they weren't proficient typists, causing delays in conversations. To tackle this, I recommend learning the pinyin input method as it greatly helped us keep up with brief conversations in QQ Chat.

To the surprise of many foreigners, China's Great Firewall posed interesting challenges for our development process. GitHub was completely censored, making it impossible for us to simply use npm install & bower install. Furthermore, hosting on AWS and certain analytics tools were also blocked, forcing us to discover alternative solutions. Additionally, collaborating with developer colleagues who preferred different work styles added complexity to our project visibility and workflow.

During our public beta test of an Ember application, we encountered performance issues. The initial load and rendering times were frustratingly slow, especially for customers using low-end computers with outdated browsers. We were amazed to see Windows XP crashing simply from loading font icons. Ultimately, we addressed this problem by refactoring the application with vanilla JavaScript. Although it improved speed, it also significantly increased the codebase and introduced more bugs and states to manage.

One crucial lesson we learned the hard way was the importance of maintaining complete control over the delivery pipeline. Without it, a release becomes nearly unattainable. Despite working for months on redesigns and receiving positive feedback, we still struggled to launch the project due to the inertia and resistance to change in large corporations.

Through this experience, we gained valuable insights into both the technical and project management aspects. We learned that shipping early and often is a best practice, and we are eager to apply these lessons to future projects.

And that wraps up today's episode of "Continuous Improvement". We hope you enjoyed this deep dive into the IT industry in China and the challenges we faced. Remember, no matter the hurdles we encounter, there are always opportunities for growth and improvement.

If you have any questions or suggestions for future episodes, feel free to reach out to us on our website or social media channels. Thank you for listening, and until next time, keep striving for continuous improvement.

我從為海外客戶構建大規模應用程序中學到的東西

中國的IT行業正在迅速增長。在過去的一年中，我在香港有幸參與了一個引人入勝的項目，這項目已經成為我職業生涯中的一個重要里程碑，給我提供了學習新事物和創新的機會。

雖然在許多項目中工作，但每個團隊成員都位於同一地點通常更具生產力。然而，我發現自己與不同時區的遠程同事合作，包括太平洋標準時間，UTC-06:00和UTC+10:00，這對生產力並不理想。

另一個挑戰是與客戶的語言障礙。對於會說中文但打字不熟練的人，我建議學習拼音輸入法以跟上QQ聊天中的簡短對話。

許多外國人驚訝地發現，中國審查了GitHub，使得在長城防火牆內簡單地使用npm install& bower install變得不可能。此外，AWS的主機以及一些分析工具也被封鎖，需要尋找替代方案。而且，你的開發同事可能更喜歡不同的工作方式，而不是採用scrum方法或是用JIRA板來提供項目的可見性。

我們的Ember應用程序公開測試遇到了性能問題。儘管Ember的開發工具非常友好，但初始加載和渲染時間仍然很慢。加劇這個問題的是，我們至少有20%的客戶使用過時的瀏覽器和低端電腦。令我驚訝的是，僅僅從加載圖標字體就讓Windows XP崩潰。最終，我們通過用原生JavaScript重構了應用程序來解決這個問題。雖然這提高了速度，但卻使代碼的數量加倍，並使要管理的狀態和錯誤的數量增加了三倍，這與理想情況相去甚遠。

我們用痛苦的方式學到了一個關鍵的教訓，那就是保持對交付管道的完全控制的重要性；否則，一個發布就變得難以達成。早發布，常發布，更多的是一種藝術而非科學。儘管我們花了幾個月的時間進行了三次重新設計並得到了積極的反饋，我們仍然無法啟動該項目。大公司內部的慣性和抵制改變的文化證明了這一點太難以克服。

通過這個項目，我們對技術和項目管理方面都獲得了寶貴的見解。早發布，常發布是最好的做法，我期待將這些經驗應用到未來的項目中。

How to Use Webpack with React and Bootstrap

Today, I was setting up a project using Webpack, React, and Bootstrap without jQuery. What seemed like a straightforward task ended up taking more time than expected, so I've decided to document the steps below:

Step 1: Install All Dependencies

First, install all the required dependencies:

npm install react react-dom bootstrap react-bootstrap babel-preset-react --save
npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

Step 2: Add Loaders in webpack.config.js

Next, add the necessary loaders to your webpack.config.js file:

var path = require("path")
var webpack = require("webpack")

module.exports = {
  entry: "./main.js",
  output: { path: __dirname, filename: "bundle.js" },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["es2015", "react"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=100000",
      },
      {
        test: /\.jpg$/,
        loader: "file-loader",
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff",
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream",
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader",
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml",
      },
    ],
  },
}

Step 3: Import Bootstrap CSS in main.js

In your main.js file (or whatever your entry file is), import the Bootstrap CSS:

import App from "./app.jsx"
import Bootstrap from "bootstrap/dist/css/bootstrap.css"

Step 4: Import React Bootstrap in app.jsx

Finally, in your app.jsx, import React Bootstrap components:

import React from "react"
import ReactDOM from "react-dom"
import { Button } from "react-bootstrap"

const buttonsInstance = <Button>Click me!</Button>

ReactDOM.render(buttonsInstance, document.getElementById("here"))

HTML Setup

Don't forget to include a div with the appropriate ID, as well as the bundle.js:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
  </head>
  <body>
    <div id="here"></div>
    <script src="bundle.js"></script>
  </body>
</html>

That's it! Feel free to reach out if you have any questions.

How to Use Webpack with React and Bootstrap

Hello everyone and welcome to "Continuous Improvement", the podcast where we explore various tips, tricks, and techniques to constantly improve our development skills. I'm your host, Victor, and today we're going to talk about setting up a project using Webpack, React, and Bootstrap without jQuery.

So, I recently had the experience of setting up a project with these technologies and it turned out to be a bit more time-consuming than I initially anticipated. But worry not! I've decided to share the steps I followed to save you from any possible headaches.

The first step is to install all the required dependencies. Open up your terminal and type in the following commands:

npm install react react-dom bootstrap react-bootstrap babel-preset-react --save
npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

Once you have installed the dependencies, it's time to move on to step two. In this step, we need to make some changes to the webpack.config.js file. Open it up and add the necessary loaders. Here's an example of how your webpack.config.js file might look:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=100000"
      },
      // ... more loaders ...
    ]
  },
};

Great! Now that we have our loaders set up, let's move on to step three. In this step, you need to import the Bootstrap CSS into your main.js file. This can be done with a simple import statement, like this:

import App from './app.jsx';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

Finally, we're at step four! In this step, we'll import React Bootstrap components into our app.jsx file. Here's an example of how that might look:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';

const buttonsInstance = (
  <Button>Click me!</Button>
);

ReactDOM.render(buttonsInstance, document.getElementById('here'));

Don't forget to include a div with the appropriate ID in your HTML file, as well as the bundle.js file. Here's an example of what your HTML file might look like:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="here"></div>
    <script src="bundle.js"></script>
  </body>
</html>

And that's it! By following these steps, you should be able to set up a project using Webpack, React, and Bootstrap without the need for jQuery. But remember, continuous improvement is all about learning and adapting, so feel free to explore and experiment with different setups that suit your needs.

If you have any questions or need further assistance, don't hesitate to reach out. You can find me on Twitter, my handle is @VictorDev. Thanks for joining me on this episode of "Continuous Improvement". Stay tuned for more exciting topics in the world of development. Until next time, happy coding!

如何將Webpack與React和Bootstrap一起使用

今天，我正在設定一個使用Webpack、React和Bootstrap（不包括jQuery）的專案。原本看似簡單直接的任務結果卻花了我比預期多的時間，所以我決定將步驟記錄在下面：

步驟1：安裝所有依賴

首先，安裝所有需要的依賴：

npm install react react-dom bootstrap react-bootstrap babel-preset-react --save
npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

步驟2：在webpack.config.js中添加Loaders

接下來，在你的webpack.config.js文件中添加必要的loaders：

var path = require("path")
var webpack = require("webpack")

module.exports = {
  entry: "./main.js",
  output: { path: __dirname, filename: "bundle.js" },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["es2015", "react"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=100000",
      },
      {
        test: /\.jpg$/,
        loader: "file-loader",
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff",
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream",
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader",
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml",
      },
    ],
  },
}

步驟3：在main.js中引入Bootstrap CSS

在你的main.js文件（或者是你的進口文件）中，引入Bootstrap CSS：

import App from "./app.jsx"
import Bootstrap from "bootstrap/dist/css/bootstrap.css"

步驟4：在app.jsx中引入React Bootstrap

最後，在您的app.jsx中，導入React Bootstrap組件：

import React from "react"
import ReactDOM from "react-dom"
import { Button } from "react-bootstrap"

const buttonsInstance = <Button>Click me!</Button>

ReactDOM.render(buttonsInstance, document.getElementById("here"))

HTML設定

別忘了附上一個帶有適當ID的div，以及bundle.js：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
  </head>
  <body>
    <div id="here"></div>
    <script src="bundle.js"></script>
  </body>
</html>

這就完成了！如果有任何問題，歡迎隨時向我提問。

How to Be a Good Consultant?

I worked as a Software Engineer for a major Australian technology firm. While I am bright, skilled, and dedicated, these qualities alone are not sufficient to make one a successful consultant. Fortunately, after consulting with an experienced coach, I've come up with some insightful tips. Here are the three levels of consulting expertise I've learned:

1st Level

At the basic level, you possess a particular skill that you know better than others. For instance, I specialized in JavaScript front-end development and knew more about it than the employees at my client's company, which happened to be the world's largest gaming company. They sought your services because of the unique skills you can offer. However, this level of work isn't ideal for you in the long term. Mistakes will occur, making it challenging to maintain a professional first impression. Over time, you'll become indistinguishable from the millions of other individuals with similar skills. Your contribution becomes limited, and there's a narrow gap between what the client pays you and the value you deliver.

2nd Level

At the senior level, you offer significant value to clients by leveraging multiple skill sets. Remember, we're humans, not machines; we should all possess diverse talents. Drawing from your previous client experiences, you can provide a unique perspective on current challenges, setting you apart from the client's in-house team. You understand what works and what doesn't, what the client likes or dislikes, and what both the client and consulting firm genuinely need. Cultural awareness can go a long way in building trust.

3rd Level

At the highest level, you serve as a trusted advisor, akin to a king's confidant. Even if the king may not like hearing the truth, it's your responsibility to tell him. Should anything go awry, you will be held accountable from the client's perspective, as people are unlikely to blame themselves or admit they were wrong. You don't have to personally like the client, but you must care about them. Understand their motivations and recommend what's genuinely best for the company with compassion. Love may be a strong word, but it helps humanize your business approach. Your focus isn't solely on your success; you're concerned about the client's success as well. When the client wins, you win.

Final Thoughts

Reaching the highest level of consulting expertise is challenging. To establish a win-win situation, you must continuously learn and offer high-value skills to your client, your consulting firm, and yourself. It won't be easy and will require years of dedication, but these guidelines will serve as valuable markers on your consulting journey.

How to Be a Good Consultant?

I worked as a Software Engineer for a major Australian technology firm. While I am bright, skilled, and dedicated, these qualities alone are not sufficient to make one a successful consultant. Fortunately, after consulting with an experienced coach, I've come up with some insightful tips. Here are the three levels of consulting expertise I've learned:

Welcome to "Continuous Improvement," the podcast where we explore strategies, insights, and personal experiences in the world of consulting. I'm your host, Victor, and today we'll be diving into a topic that is crucial for any consultant looking to excel in their field: the three levels of consulting expertise.

As a former Software Engineer turned consultant, I've had my fair share of experiences and lessons learned along the way. And I'm here to share them with you. So let's get started!

At the basic level of consulting expertise, you possess a specific skill that sets you apart from others. For instance, in my case, it was JavaScript front-end development. Clients sought my services because I had a deep understanding of this skill, even surpassing the knowledge of their in-house team. However, relying solely on specialized skills can have its limitations.

Mistakes can happen, and it becomes challenging to maintain a consistently professional impression. Over time, you risk becoming indistinguishable from the sea of individuals with similar skills. This level limits your contribution, as the gap between what the client pays you and the value you deliver becomes narrower.

That's where the second level of consulting expertise comes into play. At this senior level, you bring significant value by leveraging multiple skill sets. Through previous client experiences, you gain a unique perspective on current challenges. You understand what works, what doesn't, and what the client truly needs from you and your consulting firm.

Cultural awareness also plays a crucial role in building trust with clients. By understanding their preferences and incorporating diverse talents, you set yourself apart from their internal team. This level allows you to contribute more effectively and provide a broader range of solutions.

Now, let's talk about the highest level of consulting expertise. At this level, you become a trusted advisor, someone akin to a king's confidant. Your responsibility is to provide honest feedback and recommendations, even if it's not what the client wants to hear. You hold yourself accountable for any potential issues that arise, as clients often find it difficult to blame themselves or admit their mistakes.

Building a genuine connection with the client becomes essential. It's not about simply liking them, but rather genuinely caring about their success. Understanding their motivations and recommending what's best for their company with compassion is the key. Your focus should extend beyond personal success; it should encompass the client's success as well. After all, when the client wins, you win.

Achieving the highest level of consulting expertise is undoubtedly challenging. It requires continuous learning, honing high-value skills, and offering exceptional value to your clients, your consulting firm, and yourself. It won't happen overnight, but by following these guidelines, you'll find valuable markers on your journey to becoming an exceptional consultant.

That wraps up today's episode of "Continuous Improvement." I hope you found these insights on the three levels of consulting expertise valuable and applicable to your own professional journey. Remember, continuous learning and self-improvement are key to success in this field.

If you enjoyed today's episode, be sure to subscribe to our podcast and stay tuned for future episodes where we'll explore more strategies for personal and professional growth. Until next time, I'm Victor, and thank you for joining me on "Continuous Improvement."

如何成為一個好的顧問？

我曾在一家大型澳洲科技公司擔任軟體工程師。雖然我聰明、擁有技能且我全心全意，但這些品質單獨存在並不足以讓一個人成為成功的顧問。幸運的是，經過與經驗豐富的教練諮詢後，我整理出了一些深刻的建議。以下是我學到的三個等級的諮詢專業知識：

第一等級

在基礎等級上，你擁有一種特定的技能，你比其他人更懂。例如，我專精於 JavaScript 前端開發，我對此知識比我的客戶公司的員工更瞭解，而這公司恰好是全球最大的遊戲公司。他們尋求你的服務是因為你可以提供的獨特技能。然而，這種等級的工作對你來說並不理想的長期工作。錯誤將不可避免地發生，使得維持專業的第一印象變得挑戰性。隨著時間的推移，你將與具有相似技能的其他百萬人口變得容易混淆。你的貢獻變得有限，客戶支付給你的和你提供的價值之間的差距變得狹窄。

第二等級

在資深等級上，你通過利用多種技能為客戶提供重大價值。請記住，我們是人，而不是機器；我們都應該擁有多種才能。從你之前的客戶經驗中學習，對於當前的挑戰，你可以提供獨特的視角，讓你區別於客戶的內部團隊。你知道什麼有效，什麼無效，了解客戶喜歡或不喜歡，知道客戶和諮詢公司真正需要什麼。文化意識可以在建立信任方面長期有效。

第三等級

在最高等級上，你起著受信任的顧問的作用，就像國王的密友一樣。即使國王可能不喜歡聽到事實，你也有責任告訴他。如果有任何事情出錯，從客戶的角度來看，你將被追究責任，因為人們不太可能責怪自己或承認他們是錯的。你不必親自喜歡客戶，但你必須關心他們。理解他們的動機，並以同情之心推薦對公司最好的事情。愛可能是一個強烈的詞，但它有助於人性化你的業務方法。你的關注點不僅僅在於你的成功；你也關心客戶的成功。當客戶獲勝，你也會獲勝。

最後的想法

達到最高等級的諮詢專業知識是困難的。要建立一個雙贏的局面，你必須不斷學習，並向你的客戶、你的諮詢公司和你自己提供高價值的技能。這將不會容易，且需要多年的奉獻，但這些指導方針將成為你諮詢旅程上重要的標誌。