Skip to content

Home

  • 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.

  • in podcast
  • 2 min read

Fix WordPress Plugin Installation Permission Issue

Hello and welcome to "Continuous Improvement," the podcast where we explore solutions to the everyday challenges we encounter in our digital lives. I'm your host, Victor.

In today's episode, we're going to delve into a common issue faced by WordPress users when installing plugins. Have you ever come across the error message, "Installation failed: Download failed. Destination directory for file streaming does not exist or is not writable?" Well, fear not, because we have the solution for you.

Recently, while working on my WordPress website, I encountered this very issue. After some investigation, I discovered that the problem lay within the permissions of the content folder. This happened because I had been editing files as a superuser, using the "sudo su" command, while the installation required write access for the "ec2-user."

So, let's get to the solution. Assuming you are setting up on AWS EC2 instances and logged in as the "ec2-user," and assuming that your WordPress installation is located in the "/var/www" path, you'll need to execute the following command to change the ownership:

Open up your terminal and type:

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

This command changes the ownership of the WordPress directory to the "ec2-user" and the "apache" group. After executing this command, you should now be able to successfully install your desired plugin.

And there you have it! A simple solution to a common WordPress installation problem. By changing the ownership of the directory, we ensure that the correct user has the necessary write permissions to complete the plugin installation.

Remember, continuous improvement is all about finding solutions to the obstacles we encounter along our digital journeys. If you have any questions or suggestions for future topics, please feel free to reach out to us.

Thank you for tuning in to this episode of "Continuous Improvement." I hope you found the solution to the WordPress plugin installation error helpful. Until next time, keep improving!

  • in zh
  • 1 min read

修復WordPress插件安裝權限問題

問題

當我嘗試在WordPress中安裝插件時，遇到了以下錯誤：

安裝失敗：下載失敗。檔案串流的目標目錄不存在，或者無法寫入。

這個問題是由於內容文件夾的權限問題導致的。我已經以超級用戶（sudo su）的身份編輯了一些文件，但安裝需要ec2-user的寫入權限。

解決方案

假設你在AWS EC2實例上進行設定，並且已登入為ec2-user，並假設WordPress位於/var/www路徑中，執行以下命令以更改所有權：

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

改變所有權後，你現在應該可以成功地安裝插件。

  • 1 min read

Fix WordPress with All Pages Returning 404 Not Found

Problem

I encountered a strange issue with WordPress: while the homepage loaded properly, all the other pages failed to do so. Instead, an error page displayed the message:

Not Found

The requested URL was not found on this server.

However, since I had migrated the files from another server, all the pages should already exist. I suspected that the .htaccess file might be the culprit, but after hours of troubleshooting, I still had no clue.

Solution

As it turns out, in my case, the .htaccess file was correctly configured. The issue lay elsewhere. To resolve it, edit the httpd.conf file:

    sudo vi /etc/httpd/conf/httpd.conf

Locate the section that starts with:

    <Directory "/var/www/html">

Change the configuration from AllowOverride None to:

    AllowOverride All

Finally, restart the server:

    sudo systemctl restart httpd

After doing this, all the pages should render properly.

  • in podcast
  • 2 min read

Fix WordPress with All Pages Returning 404 Not Found

Welcome to another episode of "Continuous Improvement," the podcast where we delve into common issues and their solutions for web development. I'm your host, Victor. In today's episode, we'll be discussing a perplexing problem with WordPress and how to resolve it. So let's dive right in.

A while ago, I stumbled upon a strange error with WordPress. While the homepage loaded fine, all the other pages returned a dreaded "Not Found" error, claiming that the requested URL was not found on the server. Puzzled, I began investigating the issue, suspecting it might have to do with the .htaccess file. However, after spending hours troubleshooting, I realized that the problem lay elsewhere.

To fix this particular issue, I discovered that the solution lies in editing the httpd.conf file. You can find it by typing the following command:

sudo vi /etc/httpd/conf/httpd.conf

This command will open the configuration file in the built-in text editor, "vi." Once opened, search for the section that starts with:

<Directory "/var/www/html">

In this section, you'll need to modify the configuration from AllowOverride None to:

AllowOverride All

This change allows the server to inherit the .htaccess settings, ensuring that all the pages render correctly. Once you've made the alteration, it's time to restart the server. You can do this by executing the command:

sudo systemctl restart httpd

And voila! After performing these steps, all your WordPress pages should now load without any issues.

And there you have it! The solution to the perplexing issue of WordPress pages returning a "Not Found" error. By modifying the httpd.conf file and changing the configuration from AllowOverride None to AllowOverride All, we allow the server to read the .htaccess file and enable the proper rendering of all pages.

I hope you found this episode of "Continuous Improvement" insightful. Stay tuned for more troubleshooting tips and web development solutions. If you have any questions or suggestions for future episodes, feel free to reach out. Until then, keep improving and happy coding!

  • in zh
  • 1 min read

修復WordPress，所有頁面都返回404未找到

問題

我遇到了一個關於WordPress的奇怪問題：首頁可以正常加載，但所有其他頁面都無法做到。相反，錯誤頁面顯示了這樣的信息：

未找到

找不到請求的URL在此服務器上。

然而，由於我已經將檔案從另一台服務器遷移過來，所以所有頁面都應該已經存在。我懷疑.htaccess檔案可能是問題所在，但經過幾個小時的故障排除，我仍然沒有線索。

解決方案

事實證明，在我的情況下，.htaccess檔案配置正確。問題在於其他地方。要解決它，编辑httpd.conf檔案：

    sudo vi /etc/httpd/conf/httpd.conf

找到以以下開頭的部分：

    <Directory "/var/www/html">

將配置從AllowOverride None改為：

    AllowOverride All

最後，重啟服務器：

    sudo systemctl restart httpd

做完這些，所有頁面都應該可以正常顯示。