Skip to content

2020

  • 2 min read

Caveats with Android In-App Browsers

When you're developing a web application, you need to take browser compatibility issues into account. I encountered a problem with an Android in-app browser that wasn't tested during development but manifested in production, leading to thousands of failed transactions. There were no clear logs to pinpoint the root cause, so it took me some time to figure it out. I'm documenting this issue here in hopes of saving you some future troubleshooting time.

When your end-users access your web app through a third-party Android in-app browser, you have no control over this webView as it is provided by the third party. If the setJavaScriptEnabled method is set to false, you're essentially at a dead-end. If you're lucky enough for the frontend code to still load, note that the setDomStorageEnabled setting is false by default. If you refer to the official documentation:

Android WebSettings setDomStorageEnabled Method

This boolean flag sets whether the DOM storage API is enabled or not. The default value is false, which means the WebView will disable the DOM storage API. This setting can halt your code execution when it tries to access the localStorage object in the browser.

MDN Web Docs on localStorage

The solution is simple: add a condition to check whether localStorage is available before proceeding with the code. This issue doesn't produce a meaningful error message, making troubleshooting particularly challenging, especially when you have to simulate the problem within an Android in-app browser.

One tip for replicating the issue is to download the following tool:

Android WebView Test App on Google Play

This app is quite useful, as it allows you to view console logs within the Android in-app browser.

Another tip for troubleshooting via server logs is to examine the request header's User-Agent Strings. You can identify WebView requests by looking for the wv field in the example header below:

Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36

I hope this article helps you and saves you time dealing with this particular caveat.

  • in zh
  • 1 min read

Android應用內瀏覽器的注意事項

當您正在開發一個網頁應用時，您需要考慮到瀏覽器的兼容性問題。我在開發過程中並未對Android應用內瀏覽器進行測試，但在正式上線以後出現了問題，導致數千次的交易失敗。我並不能從日誌中清楚地找出問題的根源，因此我花了一些時間來解決。我在這裡記錄下了這個問題，希望可以節省您未來的除錯時間。

當您的終端用戶透過第三方的Android應用內瀏覽器來訪問您的網頁應用時，您無法控制這個webView，因為它是由第三方提供的。如果setJavaScriptEnabled方法設置為false，那麼您就陷入了絕境。如果你有幸使前端代碼依舊能加載，請注意setDomStorageEnabled的設置預設為false。如果您參考官方文檔：

Android WebSettings setDomStorageEnabled Method

這個布爾標誌設定DOM存儲API是否啟用。預設值為false，表示WebView將停用DOM存儲API。當它嘗試訪問瀏覽器中的localStorage對象時，此設定可能會阻止您的代碼執行。

MDN Web Docs on localStorage

解決方案很簡單：在執行代碼之前，添加一個條件來檢查localStorage是否可用。這個問題不會產生有意義的錯誤消息，使得除錯變得特別困難，尤其是當您需要在Android應用內瀏覽器中模擬問題時。

複製此問題的一個技巧是下載以下工具：

Android WebView Test App on Google Play

此應用程式非常實用，因為它可以讓您在Android應用內瀏覽器中查看控制台日誌。

另一個通過服務器日誌進行故障排除的技巧是檢查請求頭部的User-Agent Strings。您可以通過檢查下面的範例頭部中的wv字段來識別WebView的請求：

Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36

我希望這篇文章能對您有所幫助，並節省您處理這一特殊注意事項所需的時間。

  • 2 min read

Explaining the Angular Error: 'Expression Changed After It Has Been Checked'

One of my colleagues encountered an error message while developing an Angular frontend application. The error message read:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null', Current value: 'true'.

This error occurred while he was developing a back button feature that navigates from the second page to the first. The first page had already been rendered once and needed to be re-rendered with different initial values.

The root cause of this error lies in Angular's change detection mechanism. After each operation, Angular stores the values it used for that operation in the component view's oldValues property. Once all components have been checked, Angular initiates the next digest cycle. However, instead of performing operations, it compares the current values with those stored from the previous cycle.

It's worth noting that this additional level of checking only occurs in development mode. Angular enforces a unidirectional data flow from the top of the component tree to the bottom. No child component is allowed to update the properties of a parent component once the parent's changes have been processed.

To resolve the above issues, possible solutions include using asynchronous updates, such as setTimeout, or manually triggering change detection at the ngAfterViewInit() lifecycle hook with _changeDetectorRef.detectChanges(). The ChangeDetectorRef class provides the following five methods:

abstract class ChangeDetectorRef {
  abstract markForCheck(): void;
  abstract detach(): void;
  abstract detectChanges(): void;
  abstract checkNoChanges(): void;
  abstract reattach(): void;
}

By utilizing these methods, you can manually run change detection and update the child view. My colleague was pleased to find that the error was resolved following this explanation.

  • in zh
  • 1 min read

解釋 Angular 錯誤：'Expression Changed After It Has Been Checked'

我的一位同事在開發 Angular 前端應用程序時遇到了一個錯誤訊息，錯誤訊息為：

ExpressionChangedAfterItHasBeenCheckedError：Expression在檢查之後已更改。先前的值：'null'，當前的值：'true'。

這個錯誤發生在他開發一個從第二頁導航回第一頁的後退按鈕功能時。第一頁已經渲染過一次，並需要以不同的初始值重新渲染。

這個錯誤的根本原因在於Angular的變更檢測機制。每次操作後，Angular都會將用於該操作的值存儲在組件視圖的 oldValues 屬性中。一旦所有組件都已經檢查過，Angular就會啟動下一個摘要週期。但是，它不進行操作，而是將當前值與上一個週期存儲的值進行比較。

值得注意的是，這種額外的檢查只在開發模式中發生。Angular從組件樹的頂部到底部強制執行單向數據流。一旦父組件的變更已經被處理，就不允許任何子組件更新父組件的屬性。

要解決上述問題，可能的解決方案包括使用異步更新，如 setTimeout，或者在 ngAfterViewInit() 的生命週期鉤子中手動觸發變更檢測，利用 _changeDetectorRef.detectChanges()。 ChangeDetectorRef 類提供以下五種方法：

抽象類 ChangeDetectorRef {
 抽象 markForCheck(): void;
 抽象 detach(): void;
 抽象 detectChanges(): void;
 抽象 checkNoChanges(): void;
 抽象 reattach(): void;
}

通過利用這些方法，您可以手動運行變更檢測並更新子視圖。我的同事很高興發現錯誤在這種解釋之後得到了解決。

  • 4 min read

Writing Unit Test Cases with Karma for Angular Components

I'd like to make the case for writing unit tests for your Angular web app. Accelerating time to production is not a valid excuse for accumulating technical debt. Here are some compelling reasons to start:

  1. Unit tests help identify issues as early as possible, especially when multiple teams are working on the same codebase, inadvertently introducing bugs. Avoiding middle-of-the-night calls for production support is a worthy goal.

  2. Tests enable you to refactor your code confidently, ensuring that your app continues to function as expected. You can divide your code into manageable, testable units, as opposed to dealing with a monolithic system.

  3. Your company's policy may mandate a certain level of code coverage, often 80% or higher.

If you're new to this, you may not know how to get started or why it's important. Fortunately, Angular makes it easy. To begin, simply run the following command in your project directory:

npm run test

This will open a Chrome browser window at localhost, on port 9876.

Image 1

Click the "Debug" button to initiate testing.

Image 2

At this point, no tests will run because we haven't written any yet. But you can start writing test cases to cover specific, isolated pieces of code. For instance, let's consider a login.component.ts file, which contains a login() method that toggles a boolean flag from false to true:

export class LoginComponent {
  isLogon = false

  login() {
    this.isLogon = true
  }
}

Next, create a file named login.component.spec.ts for your test cases. Write your first test case as follows:

import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"

describe("LoginComponent", () => {
  let component: LoginComponent
  let fixture: ComponentFixture<LoginComponent>

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
    }).compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it("should be able to log on", () => {
    component.login()
    expect(component.isLogon).toBeTruthy()
  })
})

Inside your describe() function, you'll find the test cases. Each case is within its own it() function. The aim here is to test if the isLogon flag turns true after the login() method is triggered.

Image 3

Your first test case should pass! If another developer alters your code, your test will catch it:

Image 4

In a real-world scenario, you might make an API call to a server. However, it's crucial not to call the actual API during your test. Instead, you should mock your API call with stub data.

For instance, let's enhance our LoginComponent to make a service call:

import { AuthenticationService } from "../../services/authentication.service"

export class LoginComponent {
  constructor(private authenticationService: AuthenticationService) {}

  isLogon = false

  login() {
    this.authenticationService.login().subscribe(
      data => {
        this.isLogon = true
      },
      error => {
        this.isLogon = false
      }
    )
  }
}

Now your test will fail because the AuthenticationService isn't yet injected into our testing environment. We can fix this as shown below:

import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"
import { AuthenticationService } from "../../services/authentication.service"
import { of } from "rxjs"

const stubData = {
  username: "testing",
}

class FakeAuthenticationService {
  login() {
    return of(stubData)
  }
}

describe("LoginComponent", () => {
  let component: LoginComponent
  let fixture: ComponentFixture<LoginComponent>
  const newFakeAuthenticationService = new FakeAuthenticationService()

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [
        {
          provide: AuthenticationService,
          useValue: newFakeAuthenticationService,
        },
      ],
    }).compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it("should be able to log on", () => {
    component.login()
    expect(component.isLogon).toBeTruthy()
  })
})

Your test case should now pass!

Image 5

This example is simplified for demonstration purposes, but the key takeaway is that you should not shy away from writing unit tests.

  • in zh
  • 2 min read

使用Karma為Angular組件撰寫單元測試案例

我想為你的Angular網頁應用程序編寫單元測試。加速生產時間並不能成為積累技術債的合理理由。以下是一些開始的有力理由：

  1. 單元測試幫助盡可能早地識別問題，尤其是當多個團隊在同一個代碼庫上工作，不經意地引入了錯誤。避免在深夜接到生產支持的電話是一個值得追求的目標。

  2. 測試使您能夠自信地重構代碼，確保您的應用程序繼續按預期運行。您可以將您的代碼分割為可管理的，可測試的單元，而不是處理一個龐大的系統。

  3. 您公司的政策可能要求某種程度的代碼覆蓋率，通常為80%或更高。

如果你是新手，你可能不知道如何開始，或者為什麼這個重要。幸運的是，Angular讓它變得很容易。開始，只需在您的項目目錄中運行以下命令：

npm run test

這將在本地主機的9876端口打開一個Chrome瀏覽器窗口。

Image 1

點擊"Debug"按鈕以啟動測試。

Image 2

此時，由於我們還沒有寫任何測試，所以不會有任何測試運行。但是，您可以開始撰寫測試用例以覆蓋特定的，獨立的代碼片段。例如，讓我們考慮一個login.component.ts檔案，其中包含一個login()方法，該方法將一個布爾標誌從假轉為真：

export class LoginComponent {
  isLogon = false

  login() {
    this.isLogon = true
  }
}

接下來，創建一個名為login.component.spec.ts的檔案以撰寫您的測試用例。如下所示撰寫您的第一個測試用例：

import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"

describe("LoginComponent", () => {
  let component: LoginComponent
  let fixture: ComponentFixture<LoginComponent>

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
    }).compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it("should be able to log on", () => {
    component.login()
    expect(component.isLogon).toBeTruthy()
  })
})

在您的describe()函式中，您將找到測試用例。每個案例都在其自己的it()函式中。這裡的目標是測試isLogon標誌在觸發login()方法後是否變為真。

Image 3

您的第一個測試用例應該通過！如果另一個開發者修改了您的代碼，您的測試將捕獲它：

Image 4

在現實世界的情境中，您可能會向服務器發送API呼叫。但是，在您的測試期間重要的是不要真的撥打API。您應該用stub數據模擬您的API呼叫。

例如，讓我們加強我們的LoginComponent以進行服務呼叫：

import { AuthenticationService } from "../../services/authentication.service"

export class LoginComponent {
  constructor(private authenticationService: AuthenticationService) {}

  isLogon = false

  login() {
    this.authenticationService.login().subscribe(
      data => {
        this.isLogon = true
      },
      error => {
        this.isLogon = false
      }
    )
  }
}

現在，您的測試將會失敗，因為AuthenticationService尚未注入我們的測試環境。我們可以如下所示修復這個問題：

import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"
import { AuthenticationService } from "../../services/authentication.service"
import { of } from "rxjs"

const stubData = {
  username: "testing",
}

class FakeAuthenticationService {
  login() {
    return of(stubData)
  }
}

describe("LoginComponent", () => {
  let component: LoginComponent
  let fixture: ComponentFixture<LoginComponent>
  const newFakeAuthenticationService = new FakeAuthenticationService()

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [
        {
          provide: AuthenticationService,
          useValue: newFakeAuthenticationService,
        },
      ],
    }).compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it("should be able to log on", () => {
    component.login()
    expect(component.isLogon).toBeTruthy()
  })
})

您的測試用例現在應該通過！

Image 5

這個例子為了演示的目的而簡化，但是重要的要取的是，你不應該避免撰寫單元測試。

  • 2 min read

Set Up a Django Server with Apache Virtual Host and Python Virtual Environment

It took me some time to get everything working together, so I'd like to document the steps to save you time in the future.

Firstly, assume that you already have your CentOS/Ubuntu instance running and Python installed. Create a folder for your project and set the appropriate permissions:

    sudo mkdir /opt/yourpath/projects
    sudo chown $USER /opt/yourpath/projects

If you haven't already initialized your project, you can do so with:

    python -m pip install Django
    django-admin startproject APPNAME /opt/yourpath/projects/APPNAME

By default, the server runs on port 8000:

    python manage.py runserver

To prepare your Django server for production, edit the settings.py file with the following settings:

    DEBUG = False
    ALLOWED_HOSTS = ['*']
    STATIC_URL = '/static/'
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Then, you can build the static files using:

    python manage.py collectstatic --noinput

Next, serve your web application via the Apache web server. Assuming you installed Apache2 through yum or apt-get, enable virtual hosts for your project and create the following file:

    touch /opt/yourpath/apache2/conf/vhosts/project-vhost.conf

With the content below:

    <IfDefine !IS_APPNAME_LOADED>
      Define IS_APPNAME_LOADED
      WSGIDaemonProcess APPNAME python-home=/opt/yourpath/python python-path=/opt/yourpath/projects/APPNAME
    </IfDefine>
    <VirtualHost 127.0.0.1:80 _default_:80>
    ...

Remember to replace all instances of APPNAME with your Django project name. Then, create another file for HTTPS:

    touch /opt/yourpath/apache2/conf/vhosts/project-https-vhost.conf

And populate it with similar content, replacing APPNAME as appropriate.

After updating the configurations, restart the Apache server. Your Django site should now be operational.

Lastly, isolate Python dependencies within a virtual environment to avoid dependency issues and version conflicts. Inside your project directory, run:

    pip install virtualenv
    virtualenv venv
    source venv/bin/activate

This creates a folder containing all your Python executables. Subsequent pip install commands will affect only this folder. Now, go back and edit project-vhost.conf and project-https-vhost.conf, changing the python-home path to point to the venv folder:

From:

    WSGIDaemonProcess APPNAME python-home=/opt/yourpath/python python-path=/opt/yourpath/projects/APPNAME

To:

    WSGIDaemonProcess APPNAME python-home=/opt/yourpath/projects/APPNAME/venv python-path=/opt/yourpath/projects/APPNAME

Be sure to point the Python home path to the venv folder, not to the /bin executable or the Python location, to avoid a 500 error. If you encounter issues, check the Apache server error log:

    tail /opt/yourpath/apache2/logs/error_log

That's it! Navigate to your public IP address, and you should see your Django page.

P.S. If you encounter a timeout error at the WSGI level:

    Timeout when reading response headers from daemon process

Edit project-vhost.conf and project-https-vhost.conf to add the following line below WSGIDaemonProcess:

    WSGIApplicationGroup %{GLOBAL}

This addition can resolve timeouts caused by Python C extension modules, such as NumPy.

  • in zh
  • 2 min read

使用Apache虛擬主機和Python虛擬環境設置Django服務器

花了我一些時間才使所有東西都能一起工作，所以我想把步驟記錄下來，以節省你未來的時間。

首先，假設你已經有你的CentOS/Ubuntu實例正在運行，並且已安裝Python。創建一個專案資料夾並設定適當的權限：

    sudo mkdir /opt/yourpath/projects
    sudo chown $USER /opt/yourpath/projects

如果你還沒有初始化你的專案，你可以這樣做：

    python -m pip install Django
    django-admin startproject APPNAME /opt/yourpath/projects/APPNAME

默認情況下，服務器運行在8000端口：

    python manage.py runserver

為了準備你的Django服務器進入生產模式，編輯settings.py文件，使用以下設置：

    DEBUG = False
    ALLOWED_HOSTS = ['*']
    STATIC_URL = '/static/'
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

然後，你可以使用下面的命令構建靜態文件：

    python manage.py collectstatic --noinput

接下來，通過Apache網絡服務器來提供你的web應用程式。假設你透過yum或apt-get安裝了Apache2，為你的專案啟用虛擬主機，並創建以下文件：

    touch /opt/yourpath/apache2/conf/vhosts/project-vhost.conf

在下面填入内容：

    <IfDefine !IS_APPNAME_LOADED>
      Define IS_APPNAME_LOADED
      WSGIDaemonProcess APPNAME python-home=/opt/yourpath/python python-path=/opt/yourpath/projects/APPNAME
    </IfDefine>
    <VirtualHost 127.0.0.1:80 _default_:80>
    ...

記住要用你的Django專案名稱替換所有的APPNAME。然後，為HTTPS創建另一個文件：

    touch /opt/yourpath/apache2/conf/vhosts/project-https-vhost.conf

並用相似的內容填充它，適當替換APPNAME。

更新配置後，重新啟動Apache服務器。你的Django站點現在應該已經可以運行了。

最後，在虛擬環境內隔離Python依賴，以避免依賴問題和版本衝突。在你的專案目錄裡，運行：

    pip install virtualenv
    virtualenv venv
    source venv/bin/activate

這會創建一個包含所有Python可執行文件的資料夾。後續的pip install命令只會影響這個資料夾。現在，回去編輯project-vhost.conf 和 project-https-vhost.conf，將 python-home路徑改為指向venv資料夾：

由：

    WSGIDaemonProcess APPNAME python-home=/opt/yourpath/python python-path=/opt/yourpath/projects/APPNAME

變為：

    WSGIDaemonProcess APPNAME python-home=/opt/yourpath/projects/APPNAME/venv python-path=/opt/yourpath/projects/APPNAME

一定要將Python home路徑指向venv資料夾，而不是/bin可執行檔或Python位置，以避免出現500錯誤。如果你遇到問題，請檢查Apache服務器的錯誤日誌：

    tail /opt/yourpath/apache2/logs/error_log

就這樣！在你的公開IP地址上導航，你應該能看到你的Django頁面。

附註：如果你在WSGI層面遇到超時錯誤：

    Timeout when reading response headers from daemon process

編輯project-vhost.conf 和 project-https-vhost.conf，在WSGIDaemonProcess下面添加以下行：

    WSGIApplicationGroup %{GLOBAL}

這種增加可以解決由Python C擴展模組（如NumPy）導致的超時。

  • 2 min read

Stop Downloading Apps for Everything

Apps are becoming increasingly irrelevant. There's no need to download ineffective software when browsers can serve as adequate substitutes. The primary benefit of using apps is data gathering and ad serving, which favor tech giants rather than end-users.

A competent programmer invests time in refining their work. They construct test cases, simplify complex problems into smaller tasks, and think deeply about the subject at hand. In contrast, less skilled developers often lack the will or talent to achieve anything significant. As a user, it's difficult to determine which app is superior.

When a developer makes an error, the repercussions are usually minor. At worst, they might receive a poor rating on the app store. In more severe cases, management may hold them accountable. However, for the most part, there are no lasting consequences. Some developers may patch the flaws, while others may introduce new ones. You won't know unless you run comprehensive regression tests.

The problem isn't solely with poor developers; even talented ones find themselves trapped in an increasingly irrational industry. These skilled programmers often lack the time to specify requirements or plan thoroughly. Furthermore, they're under immense pressure to churn out new features constantly, especially since the release of the latest iPhone. Many companies expect their developers to produce multiple new features daily to boost app downloads, a pace that's unsustainable for maintaining quality.

Creating well-tested, robust software that handles all possible states is a challenge in itself. This is made even more difficult by constant interruptions from Slack messages and progress report meetings. Often, companies hire experienced full-stack engineers to complete the work, only to find that it's prohibitively expensive.

Users are largely unaware of these challenges. Burdened by spaghetti code and countless defects, software developers become disenchanted, cynical, or both. It's no wonder that many transition to project management roles, which offer less stress, higher income, and more predictable hours. They no longer aim to transform the world through better software.

The blame for this dysfunctional software engineering culture doesn't solely rest on the companies. Tech behemoths like Apple, Google, Facebook, and Amazon have shaped the way we do business. As we spend more time on their platforms, they grow more successful, encouraging a race to the bottom in terms of software quality. My advice, especially to my fellow software developers, is to opt out of this race. True professionals should pride themselves on their carefully crafted work, rather than behaving like code monkeys.

  • in zh
  • 1 min read

不要為所有事情下載應用程式

應用程式越來越無關緊要。 當瀏覽器可以作為足夠的替代品時，就不需要下載無效的軟件。 使用應用程式的主要好處是數據收集和廣告服務，這有利於科技巨頭而不是終端用戶。

一個能幹的程序員會花時間淬煉他們的工作。他們構建測試案例，將複雜的問題簡化為較小的任務，並對手頭的主題進行深思熟慮。相比之下，技能較差的開發人員往往缺乏實現任何重大成就的意願或才能。作為用戶，很難確定哪個應用程式更優越。

當開發人員犯錯時，後果通常是次要的。最壞的情況下，他們可能會在應用商店上獲得差評。在更嚴重的情況下，管理層可能會追究他們的責任。但是，大多數情況下，沒有持久的後果。有些開發人員可能會修補這些缺陷，而其他人可能會引入新的缺陷。您不進行全面的回歸測試就無法知道。

問題不僅僅在於差劣的開發者；即使是有才華的人也發現自己陷入了一個日益非理性的行業。這些技能優秀的程序員往往沒有時間來明確要求或進行 gronding 的計劃。此外，他們承受著不斷推出新功能的巨大壓力，特別是自從最新的 iPhone 發布以來。許多公司希望他們的開發人員能每天產出多個新功能以增加應用程式的下載量，但這種節奏對於保持質量來說是無法持續的。

創建經過充分測試，堅固的軟件以處理所有可能的狀態本身就是一項挑戰。這更加困難，因為來自 Slack 消息和進度報告會議的持續干擾。通常，公司會雇用經驗豐富的全棧工程師來完成工作，卻發現這成本過高。

用戶大多並未意識到這些挑戰。受到 spaghetti 代碼和無數缺陷的困擾，軟件開發人員變得不滿或悲觀，甚至兩者兼而有之。難怪許多人轉行成為項目管理角色，這提供了較少的壓力，更高的收入和更可預見的工作時間。他們不再致力於通過更好的軟件改變世界。

這種失功能的軟件工程文化的責任並不完全在於公司。像 Apple、Google、Facebook 和 Amazon 這樣的科技巨頭塑造了我們做生意的方式。當我們在他們的平台上花費更多的時間，他們就會變得更成功，從而鼓勵了軟件質量的低劣競爭。我特別建議我的軟件開發同行退出這場競賽。真正的專業人士應該以他們精心打造的工作為傲，而不是表現得像寫代碼的猴子。