Skip to content

Home

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

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