Skip to content

2020

  • 3 min read

Install Ubuntu 20.04 LTS on MacBook Pro 14,1

Ubuntu 20.04 has just been released, and I couldn't wait to try it out and install it on my MacBook Pro 14.1 model. In this post, I will detail what works, what doesn't, and how to work around those issues.

The installation steps are simple:

  1. Download a copy of the Ubuntu 20.04 ISO image from https://ubuntu.com/download/desktop.
  2. Obtain a USB drive and format it to FAT via macOS Disk Utility.
  3. Use Etcher to create a bootable USB drive. You can download the software here.
  4. After flashing the drive with the ISO image, reboot your Mac and press the Option key to select booting from the USB drive.

Once you start booting from the USB drive, you'll notice that the trackpad doesn't work. However, you can either use an external mouse or continue the installation via keyboard. (You can fix the driver issue later, as outlined below.) Follow the on-screen instructions, and you should be able to boot into the Ubuntu operating system. One thing I appreciate about this version is that the boot screen is black instead of the purple seen in previous versions.

Out of the box, the following features work:

  • Keyboard with backlight
  • Screen display and graphics card
  • WiFi connectivity
  • USB ports
  • Battery

Here's what doesn't work by default:

  • Speakers (workaround: use external headphones or HDMI on an external monitor, or fix with this driver)
  • Trackpad (workaround: use an external mouse or install the driver here)
  • Bluetooth (can be fixed by installing this driver; note that if you encounter a 404 error while trying to download version 5.4.0, editing the script to use version 5.4.1 should work)
  • Camera (can be fixed by installing this driver)

If you encounter an error while installing the camera driver, you can resolve it by modifying your Makefile:

Change:

    install:
      $(MAKE) -C $(KDIR) M=$(PWD) modules_install

to

    install:
      cp facetimehd.ko /lib/modules/$(shell uname -r)/extra; depmod -a

Additional customizations I recommend after installation include:

  • Switching to dark mode.
  • Displaying battery percentage by running:
  gsettings set org.gnome.desktop.interface show-battery-percentage true
  • Installing GNOME Tweaks.
  • Installing Ubuntu restricted extras:
  sudo apt install ubuntu-restricted-extras
  • Installing the Atom editor:
  wget -qO - [https://packagecloud.io/AtomEditor/atom/gpgkey](https://packagecloud.io/AtomEditor/atom/gpgkey) | sudo apt-key add -
  sudo sh -c 'echo "deb [arch=amd64] [https://packagecloud.io/AtomEditor/atom/any/](https://packagecloud.io/AtomEditor/atom/any/) any main" > /etc/apt/sources.list.d/atom.list'
  sudo apt-get update
  sudo apt-get install atom
  • Disabling the trackpad while typing:
  gsettings set org.gnome.desktop.peripherals.touchpad disable-while-typing true

With these steps, you should now have a secure and high-performance operating system. Though the journey with Linux can be challenging, it's rewarding because of the customization options and the learning experiences it offers. Proceed with caution, though: while you can create all sorts of customizations, you can also crash your system if you don't know what you're doing. If you have any questions or comments, feel free to get in touch.

  • in podcast
  • 3 min read

Install Ubuntu 20.04 LTS on MacBook Pro 14,1

Hello and welcome to "Continuous Improvement," the podcast that helps you embrace change and optimize your life. I'm your host, Victor, and in today's episode, we'll be discussing Ubuntu 20.04 and how to install it on a MacBook Pro 14.1 model.

Ubuntu 20.04 has just been released, and I couldn't wait to give it a try. In this episode, I'll be sharing what works, what doesn't, and how to work around those issues. So, let's dive in!

To begin, you'll want to download a copy of the Ubuntu 20.04 ISO image from ubuntu.com. Once you have the image, use Etcher to create a bootable USB drive. Don't worry, I'll include the download links in the show notes.

Now, when you start booting from the USB drive, you might notice that the trackpad doesn't work. But don't worry, there's a workaround. You can either use an external mouse or continue the installation via keyboard. We'll fix the driver issue later.

Once you're in the Ubuntu operating system, you'll find that the keyboard with backlight, screen display and graphics card, WiFi connectivity, USB ports, and battery all work out of the box. That's great!

But, there are a few things that don't work by default. Let's go through them and their workarounds:

  • Speakers: To fix this, you can use external headphones or HDMI on an external monitor. If you prefer fixing it with a driver, you can find the instructions and the driver in the show notes.

  • Trackpad: As mentioned earlier, you can use an external mouse during installation. But if you want to use the trackpad, you can install the driver by following the link provided.

  • Bluetooth: If you're facing Bluetooth issues, don't worry. There's a driver available that will solve the problem. Just follow the instructions in the show notes.

  • Camera: Another issue you might face is with the camera. But fret not, there's a driver available to fix it. You can find all the details in the show notes as well.

Once you've resolved these issues, you can make additional customizations to enhance your Ubuntu experience. For example, switching to dark mode, displaying battery percentage, installing GNOME Tweaks, Ubuntu restricted extras, and the Atom editor. Again, the instructions for these customizations will be in the show notes.

One final tip I have for you is to disable the trackpad while typing. This can greatly improve your typing experience. You'll find the command to do so in the show notes.

Remember, while Ubuntu offers endless customization options, it's essential to proceed with caution. Enthusiasm can sometimes lead to crashing your system if you're not careful. If you have any questions or need help, feel free to reach out to me. I'm here to assist you on your Ubuntu journey.

That's it for today's episode of "Continuous Improvement." I hope you found this information helpful. Embrace change, optimize your life, and keep striving for continuous improvement. I'm Victor, your host, signing off. See you next time!

  • in zh
  • 2 min read

在 MacBook Pro 14,1 上安裝 Ubuntu 20.04 LTS

Ubuntu 20.04 剛剛問世，我迫不及待想要在我的 MacBook Pro 14.1 模型上試用並安裝它。在這篇文章中，我將詳述哪些東西能運作、哪些不能，以及如何解決這些問題。

安裝步驟很簡單：

  1. 從 https://ubuntu.com/download/desktop 下載 Ubuntu 20.04 ISO 映像檔。
  2. 獲取一個 USB 隨身碟並透過 macOS 磁片工具將其格式化為 FAT。
  3. 使用 Etcher 建立可啟動的 USB 隨身碟。你可以在 這裡 下載該軟體。
  4. 在將 ISO 映像檔燒錄到 USB 隨身碟之後，重啟你的 Mac 並按 Option 鍵以選擇從 USB 碟機開機。

一旦你開始從 USB 隨身碟開機，你會注意到觸控板不起作用。然而，你可以使用外接滑鼠或繼續用鍵盤進行安裝。 (如下所述，稍後可以修復驅動程式問題。) 按照屏幕上的指示操作，你應該可以順利開啟 Ubuntu 操作系統。我對這個版本很欣賞的一點是，開機畫面是黑色的，而不是在以前的版本中看到的紫色。

以下特性開箱即用：

  • 有背光的鍵盤
  • 螢幕顯示和顯示卡
  • WiFi 連線
  • USB 插口
  • 電池

以下是預設不能運作的：

  • 揚聲器 (解決方法：使用外接耳機或透過外部監視器上的 HDMI，或者使用這個驅動程式修復)
  • 觸控板 (解決方法：使用外接滑鼠或安裝這裡的驅動程式)
  • 藍牙 (可以透過安裝這個驅動程式修復。請注意，如果在嘗試下載 5.4.0 版本時遇到 404 錯誤，修改腳本以使用 5.4.1 版本應該可以解決問題)
  • 攝像頭 (可以透過安裝這個驅動程式修復)

如果在安裝攝像頭驅動程式時遇到錯誤，你可以通過修改你的 Makefile 解決：

選擇：

    install:
      $(MAKE) -C $(KDIR) M=$(PWD) modules_install

更改為

    install:
      cp facetimehd.ko /lib/modules/$(shell uname -r)/extra; depmod -a

我推薦的安裝後的其他自定義操作包括：

  • 切換到深色模式。
  • 顯示電池百分比，運行：
  gsettings set org.gnome.desktop.interface show-battery-percentage true
  • 安裝 GNOME Tweaks。
  • 安裝 Ubuntu restricted extras：
  sudo apt install ubuntu-restricted-extras
  • 安裝 Atom 編輯器：
  wget -qO - [https://packagecloud.io/AtomEditor/atom/gpgkey](https://packagecloud.io/AtomEditor/atom/gpgkey) | sudo apt-key add -
  sudo sh -c 'echo "deb [arch=amd64] [https://packagecloud.io/AtomEditor/atom/any/](https://packagecloud.io/AtomEditor/atom/any/) any main" > /etc/apt/sources.list.d/atom.list'
  sudo apt-get update
  sudo apt-get install atom
  • 在鍵盤輸入時禁用觸控板：
  gsettings set org.gnome.desktop.peripherals.touchpad disable-while-typing true

有了這些步驟，你現在應該擁有一個安全且高效能的操作系統。雖然 Linux 的旅程可能充滿挑戰，但由於它提供的自定義選項和學習經驗，使得這個旅程變得非常有價值。不過要謹慎行事：雖然你可以創建各種自定義選項，但如果你不知道自己在做什麼，也可能會導致你的系統崩潰。如果你有任何問題或意見，歡迎隨時與我聯繫。

  • 2 min read

Handling Browser Close Events with JavaScript

In certain scenarios, you may not want users to close their browser and exit the session. For instance, if a user is in the middle of filling out a form without saving, or in the midst of a payment transaction that hasn't been completed, you could prompt the user with a confirmation dialog when they attempt to close the browser.

Here's what the dialog looks like in Chrome:

And in Firefox:

This functionality can be implemented by using the beforeunload event in JavaScript. Add the following code to your web page:

window.addEventListener("beforeunload", event => {
  // Cancel the event as specified by the standard.
  event.preventDefault()
  // Chrome requires returnValue to be set.
  event.returnValue = ""
})

Note that this event will only trigger if the user has had some interaction with the page. Otherwise, it won't activate. Additionally, the event will be triggered in the following three scenarios:

  1. The user clicks to close the browser.
  2. The user clicks to refresh the page.
  3. The user clicks the back button.

If you want to remove this confirmation dialog, perhaps after the user has saved the form or completed the payment transaction, you can do so like this:

window.removeEventListener("beforeunload", callback)

Since the primary purpose of this dialog is to remind users to save their changes before leaving, there is no additional event listener to capture the result of the exit dialog. In other words, you can't determine whether the user chose to leave or stay on the page.

For more information, you can consult the latest MDN Web Docs here: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

  • in podcast
  • 3 min read

Handling Browser Close Events with JavaScript

Welcome back to another episode of "Continuous Improvement". I'm your host, Victor, and today we'll be discussing an important aspect of user experience on the web - preventing accidental page exits. Have you ever been in a situation where you were filling out a form or making a payment, and accidentally closed your browser, losing all your progress? Well, we have a solution for you.

In this episode, we'll dive deep into the implementation of a confirmation dialog using the beforeunload event in JavaScript. This will help you prompt users with a warning before they close their browsers, ensuring they are aware of their unsaved changes. So, let's get started!

[BACKGROUND FADES]

First, let's take a look at what the confirmation dialog actually looks like. In different browsers, it can vary slightly in appearance. In Chrome, for example, it may look like this. [DESCRIBING CHROME DIALOG]

And in Firefox, it may appear slightly different. [DESCRIBING FIREFOX DIALOG]

[BACKGROUND FADES]

So, how can you implement this dialog on your web page? It's actually quite simple. Just add the following code to your JavaScript file:

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as specified by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

By adding this event listener, you're informing the browser to trigger the confirmation dialog when the user attempts to close the browser, refresh the page, or click the back button. The event.preventDefault() cancels the event, ensuring the dialog is shown, and the event.returnValue = '' satisfies Chrome's requirements.

[BACKGROUND FADES]

It's important to note that the beforeunload event will only trigger if the user has interacted with the page in some way. If they haven't, the event won't activate. Once you've implemented this functionality, the confirmation dialog will keep users from inadvertently leaving the page without saving their changes or completing their transaction.

[BACKGROUND FADES]

But what if you want to remove the confirmation dialog at some point? Maybe after the user has saved the form or completed the payment. Well, you can easily do that too. Just use the following code:

window.removeEventListener('beforeunload', callback);

This line of code will remove the event listener, so the confirmation dialog no longer appears when attempting to leave the page. However, remember to replace callback with the actual function or arrow function you used in the addEventListener method.

[BACKGROUND FADES]

It's worth mentioning that the purpose of this confirmation dialog is to remind users to save their changes before leaving, and it doesn't provide any way to determine whether the user chose to stay or leave the page. So keep that in mind while implementing it in your project.

[BACKGROUND FADES]

And that's a wrap for today's episode of "Continuous Improvement". We hope you found this topic helpful in enhancing user experience on your website. Remember, implementing a confirmation dialog using the beforeunload event can prevent users from accidentally closing their browsers and losing their progress. For more detailed information and additional resources, you can check out the MDN Web Docs.

Thank you for listening to "Continuous Improvement". I'm Victor, your host, and I'll catch you in the next episode. Until then, happy coding!

  • in zh
  • 1 min read

使用JavaScript處理瀏覽器關閉事件

在某些情況下，你可能不希望用戶關閉瀏覽器並退出會話。例如，如果用戶在填寫表單沒有保存，或者在還沒完成的付款交易中，他們嘗試關閉瀏覽器時，你可以提示用戶確認對話框。

以下是對話框在Chrome中的樣子：

在Firefox中：

這個功能可以通過在JavaScript中使用 beforeunload 事件來實現。將下面的代碼添加到你的網頁中：

window.addEventListener("beforeunload", event => {
  // 根據標準取消事件。
  event.preventDefault()
  // Chrome要求設置returnValue。
  event.returnValue = ""
})

請注意，只有在用戶與頁面有些許交互時，這個事件才會觸發。否則，這個功能將不會啟動。另外，用戶在以下三種情況下觸發事件：

  1. 用戶點擊關閉瀏覽器。
  2. 用戶點擊刷新頁面。
  3. 用戶點擊後退按鈕。

如果你想要移除這個確認對話框，例如在用戶已經保存表格或完成付款交易後，你可以這樣做：

window.removeEventListener("beforeunload", callback)

由於此對話框的主要目的是提醒用戶在離開之前保存他們的更改，所以沒有額外的事件監聽器來捕獲退出對話框的結果。換句話說，你無法確定用戶選擇了離開還是繼續留在頁面上。

要獲得更多信息，你可以查閱最新的MDN Web Docs： https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

  • 1 min read

Import npm Modules into AWS Lambda Function

When you create a Node.js Lambda function on Amazon Web Services (AWS) and begin editing it using the online editor, you might want to run npm install and import a third-party library, such as lodash. Unfortunately, there's no simple way to do this via the web portal.

To accomplish this, you'll need to write your code in a local environment and then deploy it. First, create a folder on your machine and copy the index.js file into it. Next, run the following commands to initialize your project and install the dependency:

    npm init .
    npm install lodash --save

To use the library in index.js, add the following line:

let _ = require("lodash")

Once you've finished writing your code, zip the entire folder, including the node_modules directory, using this command:

    zip -r function.zip .

Finally, deploy the zip file using the AWS CLI tool from your terminal:

    aws lambda update-function-code --function-name yourFunctionName --zip-file fileb://function.zip

Replace the yourFunctionName placeholder with the name of your function. If the deployment is successful, you should see "LastUpdateStatus": "Successful" displayed in the terminal, and you can proceed to test the function in the AWS console.

  • in podcast
  • 2 min read

Import npm Modules into AWS Lambda Function

Welcome to "Continuous Improvement," the podcast where we explore the world of software development and discuss ways to enhance our skills. I'm your host, Victor, and in today's episode, we'll be diving into the topic of deploying Node.js Lambda functions on Amazon Web Services (AWS).

Have you ever found yourself in a situation where you wanted to import a third-party library, like lodash, into your Node.js Lambda function on AWS? In today's blog post, we learned that the online editor on AWS doesn't provide a straightforward way to achieve this. But fear not! There's a workaround that I'd like to share with you.

The first step is to create a folder on your local machine and copy the index.js file into it. Once that's done, open up your terminal and navigate to the folder you just created.

In the terminal, run npm init . This command initializes your project and generates a package.json file. This file will keep track of all the dependencies required for your Lambda function.

Next, we need to install the third-party library, in this case, lodash. Run npm install lodash --save in the terminal. This will add lodash as a dependency and update the package.json file accordingly.

Now that we have the library installed, let's use it in our index.js file. Add the following line of code at the beginning of the file:

    let _ = require('lodash');

With lodash successfully imported into our Lambda function, it's time to prepare for deployment. To do this, we need to zip the entire folder, including the node_modules directory. In the terminal, use the zip -r function.zip . command to accomplish this.

The final step is to deploy the zip file to AWS using the AWS CLI tool. In your terminal, type aws lambda update-function-code --function-name yourFunctionName --zip-file fileb://function.zip. Here, make sure to replace yourFunctionName with the actual name of your function.

If everything goes smoothly, the deployment should be successful, and you'll see a confirmation message in the terminal, indicating that the update was completed.

That's it! You've now learned how to deploy a Node.js Lambda function with third-party dependencies on AWS. Remember, continuous improvement is essential in the ever-evolving world of software development.

Thank you for joining me on this episode of "Continuous Improvement." I hope you found the information helpful. If you have any questions or suggestions, feel free to reach out. Don't forget to subscribe to our podcast for more exciting topics and stay tuned for the next episode.

  • in zh
  • 1 min read

將 npm 模組導入 AWS Lambda 函數

當您在 Amazon Web Services (AWS) 上創建 Node.js Lambda 函數並開始使用線上編輯器進行編輯時，您可能會想要運行 npm install 並導入第三方庫，例如 lodash。不幸的是，透過網頁入口無法簡單地做到這一點。

要做到這一點，您需要在本地環境中編寫代碼，然後部署它。首先，在您的機器上創建一個資料夾，並將 index.js 文件複製到其中。接下來，運行以下命令以初始化您的項目並安裝相關性：

    npm init .
    npm install lodash --save

要在 index.js 中使用庫，添加以下行：

let _ = require("lodash")

當您完成編寫代碼後，使用以下命令壓縮整個資料夾，包括 node_modules 目錄：

    zip -r function.zip .

最後，使用 AWS CLI 工具從您的終端部署 zip 文件：

    aws lambda update-function-code --function-name yourFunctionName --zip-file fileb://function.zip

將 yourFunctionName 佔位符替換為您的函數名稱。如果部署成功，您應該會在終端中看到 "LastUpdateStatus": "Successful"，然後您可以在 AWS 控制臺中進行函數測試。

  • 1 min read

Fix WordPress Plugin Installation Permission Issue

Problem

When attempting to install a plugin in WordPress, I encountered the following error:

Installation failed: Download failed. Destination directory for file streaming does not exist or is not writable.

This issue arises due to permission problems within the content folder. I had been editing some files as a superuser (sudo su), but the installation requires write access for the ec2-user.

Solution

Assuming you are setting up on AWS EC2 instances and are logged in as ec2-user, and assuming that WordPress is located in the /var/www path, execute the following command to change the ownership:

sudo chown -R ec2-user:apache /var/www

After changing the ownership, you should now be able to successfully install the plugin.