2016

April 29, 2016
1 min read

Trivial Facts About JavaScript Date

Fact 1

The integer value representing the month in JavaScript begins with 0 for January and goes up to 11 for December. For example:

Today's date can be represented as:

> var date = new Date(2016, 3, 29, 11, 10, 30)

instead of:

> var date = new Date(2016, 4, 29, 11, 10, 30)

Trivial Facts About JavaScript Date

Hello and welcome to another episode of Continuous Improvement, the podcast where we dive into all things programming and web development. I'm your host, Victor, and today we have some interesting facts about dates in JavaScript.

Fact number one: Did you know that in JavaScript, the integer value representing the month actually begins with 0 for January and goes up to 11 for December? It's a common mistake to think that January is represented by 1 and December by 12, but in reality, it starts from 0. So, if you're working with dates in JavaScript, keep that in mind to avoid any confusion.

Let's look at an example. If today's date is April 29, 2016, instead of writing var date = new Date(2016, 4, 29, 11, 10, 30), you should actually write var date = new Date(2016, 3, 29, 11, 10, 30). The month is zero-based, so April is represented by 3 instead of 4. It's a small detail, but an important one to remember.

Now, let's move on to fact number two. In JavaScript, the date is based on a time value expressed in milliseconds, while the UNIX timestamp is expressed in seconds since 00:00:00 UTC on January 1, 1970. This means that if you want to convert a UNIX timestamp into a JavaScript date, you need to multiply the timestamp by 1000.

For instance, if you have a UNIX timestamp and want to represent it as a JavaScript date, you can use the following syntax: var date = new Date(UNIX_Timestamp * 1000). This multiplication by 1000 converts the seconds into milliseconds, which is the required format for JavaScript dates.

And there you have it, two fascinating facts about dates in JavaScript. Remember to always keep the month's zero-based indexing in mind and don't forget to multiply UNIX timestamps by 1000 when converting them to JavaScript dates.

Thank you for listening to this episode of Continuous Improvement. If you enjoyed today's content, make sure to subscribe to our podcast for more programming tips and tricks. Stay curious and keep improving!

April 29, 2016
in zh
1 min read

關於JavaScript日期的瑣碎事實

事實1

在JavaScript中，代表月份的整數值由0開始表示1月，至11表示12月。例如：

今天的日期可以表示為：

> var date = new Date(2016, 3, 29, 11, 10, 30)

而不是：

> var date = new Date(2016, 4, 29, 11, 10, 30)

事實2

在JavaScript中，日期是基於以毫秒表示的時間值，而UNIX時間戳則是從1970年1月1日00:00:00 UTC開始以秒為單位表示。

例如，要將UNIX時間戳轉換為JavaScriptdate:

> var date = new Date(UNIX_Timestamp * 1000);

April 9, 2016
2 min read

It's Not a Tech Problem, Stupid

I enjoy helping people and solving complex problems. However, it's disheartening to encounter issues that fall outside the scope of a programmer's ability to solve them. If you lack an engineering background, you may believe that your challenges are technological in nature—that a website, an app, or a machine learning server might be the solution. But in reality, these are rarely the root causes. Here are what I consider to be your seven most critical issues:

You're Not Delivering on Your Promises: What is the goal of your product? What problem are you trying to solve? Do you understand your customers' needs? How does your product stand out in the market? Do you have control over the delivery process? If not, you might be wasting time and resources building something that nobody wants.
You're Risk-Averse: You fear making significant changes because something might break. Whether it's messy CSS files, deprecated browsers, or spaghetti code that no one wants to touch, these issues demand attention. It's crucial to clean up your tech debt so you can move forward.
You Lack Creativity: Minor aesthetic problems, such as misaligned text or an off-center box, might seem easy to fix but can still detract from the overall design. Consider trusting your designer to make bold visual choices, or hire a user experience specialist to conduct A/B testing. You might also need to invest in high-quality content for SEO.
You Form Superficial and Dishonest Relationships: Your lack of open communication obscures progress and roadblocks. You might be misleading investors with over-promises, creating an illusion that everything is fine. This lack of transparency will ultimately hurt everyone involved.
You Foster Rivalry Within Your Team: Do you know why your team is unhappy? Is there an excessive workload causing burnout? Do they enjoy their work? Is there trust in the system? If the work environment is neither pleasant nor stimulating, it might be time to reconsider your leadership.
You're Less Productive Than You Think: Do you notice a drop in productivity? Unfocused meetings without clear outcomes and trying to multitask without setting priorities not only waste your time but also the time of those around you.
You're Not Humble: You prioritize being right over doing what's right. Because of your seniority and experience, you believe your viewpoint must be correct. Your ego clouds your judgment and prevents you from making objective decisions.

It's easy to identify flaws in software, but it's much harder to spot them in corporate culture. Addressing these fundamental issues should be your first step.

April 9, 2016
in podcast
3 min read

It's Not a Tech Problem, Stupid

Welcome back to another episode of Continuous Improvement, the podcast dedicated to helping you overcome your challenges and be the best version of yourself. I'm your host, Victor, and today we're going to dig deep into a blog post that highlights seven critical issues that may be holding you back. So grab a cup of coffee, sit back, and let's dive in.

Have you ever found yourself encountering problems that seem beyond your scope as a programmer? You may be surprised to learn that the solutions might not lie in technological fixes like websites, apps, or machines. In today's episode, we're going to explore these problems and discuss how you can address them effectively.

Let's start with issue number one.

Issue #1: You're Not Delivering on Your Promises.

It's essential to understand the goal of your product and the problem it solves. Are you delivering what your customers need? Do you stand out in the market? If not, you might be wasting time and resources. Remember, building something nobody wants is a recipe for failure. Take a step back, reassess, and align your product with the needs of your customers.

Moving on to issue number two.

Issue #2: You're Risk-Averse.

Fear of change can often hold us back from making significant improvements. It's crucial to address messy code, maintenance issues, and other technical debts. By cleaning up and embracing necessary changes, you open the door to progress. Don't let the fear of breaking something prevent you from moving forward.

Now, let's discuss issue number three.

Issue #3: You Lack Creativity.

Sometimes, it's the small aesthetic problems that can affect the overall user experience. Trust your designers to make bold choices, and consider conducting A/B testing to gather valuable user feedback. Additionally, investing in high-quality content for SEO can greatly enhance your product's visibility and appeal.

Moving forward, let's focus on issue number four.

Issue #4: You Form Superficial and Dishonest Relationships.

Open and honest communication is the foundation of any successful endeavor. Misleading investors with over-promises and creating a false sense of progress can harm everyone involved. Embrace transparency and foster genuine relationships based on trust, accountability, and clear communication.

Now, let's move on to issue number five.

Issue #5: You Foster Rivalry Within Your Team.

Unhappy teams can have a detrimental effect on productivity and overall success. Take the time to understand why your team may be unhappy. Is the workload overwhelming? Do they enjoy their work? Building a pleasant and stimulating work environment based on trust and respect is vital to the success of your team and your organization as a whole.

Now, let's discuss issue number six.

Issue #6: You're Less Productive Than You Think.

Unfocused meetings, multitasking without setting priorities, and a lack of clear outcomes can significantly impact productivity. Stay focused, set clear goals, and minimize distractions. By managing your time effectively and prioritizing tasks, you'll not only enhance your own productivity but also inspire those around you.

Lastly, let's address issue number seven.

Issue #7: You're Not Humble.

Pride and ego can cloud judgment and hinder growth. Remember, it's not about being right; it's about doing what's right. Embrace humility, listen to others' perspectives, and make objective decisions that benefit the entire team.

And that concludes our exploration of the seven critical issues highlighted in this blog post. Remember, addressing these fundamental problems is the first step toward continuous improvement.

Thank you for joining me on this episode of Continuous Improvement. If you found this discussion helpful, be sure to subscribe to our podcast for more episodes dedicated to your personal and professional development. I'm Victor, and I'll see you next time.

April 9, 2016
in zh
1 min read

這不是技術問題，笨蛋

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

你沒有兌現你的承諾： 你的產品的目標是什麼？你試圖解決什麼問題？你了解你的客戶需求嗎？你的產品在市場上是如何嶄露頭角的？你對交付過程有控制權嗎？若否，你可能在浪費時間和資源製作無人需要的東西。
你害怕冒險： 你害怕進行重大改變，因為可能會出問題。無論是混亂的CSS文件，已經過時的瀏覽器，或者沒有人敢碰的紊亂程式碼，這些問題都需要關注。整理你的技術債務以便你能夠前進，這是至關重要的。
你缺乏創造力： 輕微的美觀問題，如文字對齊不齊或框框不在中央，可能看起來容易修復，但仍然會影響整體設計。嘗試信任你的設計師讓他們做出大膽的視覺選擇，或者雇用一個用戶體驗專家進行A/B 測試。你可能還需要投資於SEO的高質量內容。
你建立膚淺而不誠實的關係： 你缺乏開放的溝通，這使進展和障礙都模糊了。你可能用過度承諾來誤導投資者，制造一種一切都好的假象。這種不透明將最終傷害到所有人。
你孵化了你的團隊內的競爭： 你知道你的團隊為何不快樂嗎？是否有過多的工作量導致疲憊？他們喜歡他們的工作嗎？他們對系統有信心嗎？如果工作環境既不愉快也不刺激，這可能是時候重新考慮你的領導方式了。
你比你想象中的生產力低： 你有注意到生產力下降了嗎？沒有明確結果的無聚焦會議，以及試圖一心多用而又沒有設定優先順序，不僅浪費你的時間，也浪費了你周遭人的時間。
你不淡泊： 你優先考慮的是自己是對的，而非做出正確的事。因為你的資歷和經驗，你認為你的觀點一定是正確的。你的自我心理影響了你的判斷，阻止你做出客觀的決定。

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

March 21, 2016
2 min read

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.

March 21, 2016
in podcast
3 min read

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.

March 21, 2016
in zh
1 min read

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

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

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

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

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

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

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

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

March 6, 2016
2 min read

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.