DEV Community: Jack Huynh

Error Handlings

Jack Huynh — Mon, 04 Sep 2023 06:50:55 +0000

Error: Malfunctioning Elasticsearch

Symptoms

Unable to apply data patch
Magento\CatalogSampleData\Setup\Patch\Data\InstallSimpleProducts 
for module Magento_CatalogSampleData.

{"error":"no handler found for uri [/magento2_product_1_v1/document_mapping?include_type_name=true] and method [PUT]"}

Solution

Due to ElasticSearch version is not yet supported by the current Magento instance: https://devdocs.magento.com/guides/v2.4/install-gde/system-requirements.html.

Just install Elasticsearch 7.17

Error: Gd2.php line 70

Solution

Here Image Adapter try opens to image files (‘open function in Gd2.php line 72). validateURLScheme function return false always because it checking ‘URL’ format but local files not valid for this format, so it returns false.

Find validateURLScheme function in vendor\magento\framework\Image\Adapter\Gd2.php file. at line 92. Replace function with this:

private function validateURLScheme(string $filename) : bool
{
          $allowed_schemes = ['ftp', 'ftps', 'http', 'https'];
          $url = parse_url($filename);
          if ($url && isset($url['scheme']) && !in_array($url['scheme'], $allowed_schemes) && !file_exists($filename)) {
              return false;
          }

          return true;   
}

Only change is && !file_exists($filename) text added at line 96.

Error: PluginListGenerator.php on line 411

Solution

Find write(array $scopes) function in magento2\lib\internal\Magento\Framework\Interception\PluginListGenerator.php file. at line 156.

// Replace
$cacheId = implode('|', $this->scopePriorityScheme) . "|" . $this->cacheId;

// With
$cacheId = implode('-', $this->scopePriorityScheme) . "-" . $this->cacheId;

We only changed the | -> - character.

Error Magento\Framework\Exception\ValidatorException: Invalid template file

Add extra code in

magento2\lib\internal\Magento\Framework\View\Element\Template\File\Validator.php file

protected function isPathInDirectories($path, $directories) {
     if (!is_array($directories)) {
         $directories = (array)$directories;
     }
     $realPath = $this->fileDriver->getRealPath($path);
     $realPath = str_replace('\\', '/', $realPath); // extra code added
     foreach ($directories as $directory) {
         if (0 === strpos($realPath, $directory)) {
             return true;
         }
     }
     return false; }

Sources:

https://magento.stackexchange.com/a/344211/113111

Error: `require-config.js` is not a function

Solution

Change the project base-config "base-url" from "http://localhost/magento2" to " http://localhost/magento2/pub"

bin/magento setup:store-config:set --base-url="http://localhost/magento2/pub/"

Error: Image not displaying

Solution

Run this command

bin/magento catalog:image:resize

Be patience cause this seemingly simple command could take half and hour

Error: The requested package magento/module-bundle-sample-data could not be found in any version, there may be a typo in the package name

Solution

composer config repositories.magento composer https://repo.magento.com/

composer config http-basic.repo.magento.com a0a6f216e5da943ce3a36ac92d430456 b0436530e2c686c94e1ad8948411aa55

Sources:

https://github.com/magento/magento2/issues/2520#issuecomment-638293942

Error: `bin/magento` Permission Denied

https://magefan.com/blog/bin-magento-permission-denied

Error: The default website isn't defined

Remove app/etc/env.php

Setup Magento2

Jack Huynh — Thu, 24 Aug 2023 07:19:17 +0000

Step 4: Download Magento

Before download Magento 2, we need Magento authentication keys to authenticate at Magento marketplace if don't have one.

Select My Account from the top-right corner. Now click Access Keys and Generate your new SECURE KEYS.

Public Key: Is your username
Private Key: Is your password

Once you've acquired both the access keys, we can download Magento using one of 2 ways:

Through Github

You can download sourcecode https://github.com/magento/magento2/releases directly from Magento official repository

After donwloading, you should extract the pack to C:\xampp\htdocs\magento2 and run this command inside the folder.

Creating an authorization file

The Magento 2 GitHub repository requires you to authenticate. The composer install commands fails if you do not.

composer install

After the process finished, run the command

composer config repositories.magento composer https://repo.magento.com/

and

composer config http-basic.repo.magento.com <public key <private key>

Through Composer

Go to C:\xampp\htdocs folder and run this command.

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition magento2

After inserting your repo.magento.com username and password, it will ask for store credentials. Type “Yes.”

Then Magento 2 will now start downloading on your server.

Regardless of the downloading method you choose, the final magento2 folder should look like this.

Step 5: Install Magento

Now every preparation steps are done and we can start installing Magento 2 on Localhost.

Go to C:\xampp\htdocs\magento2 folder, insert this command to start installing Magento 2 (make sure Elasticsearch, Apache, MySql all are running before execute this command)

php bin/magento setup:install --base-url="http://127.0.0.1/magento2/pub/" --db-host="127.0.0.1" --db-name="magento2" --db-user="root" --db-password="root" --admin-firstname="admin" --admin-lastname="admin" --admin-email="user@example.com" --admin-user="admin" --admin-password="Admin@123456" --language="en_US" --currency="USD" --timezone="America/Chicago" --use-rewrites="1" --backend-frontname="admin" --search-engine=elasticsearch7 --elasticsearch-host=127.0.0.1 --elasticsearch-port=9200 --elasticsearch-enable-auth=1 --elasticsearch-username=elastic --elasticsearch-password=elastic

Important options:

--base-url: your magento 2 installation folder
--db-name: your database name in step 4
--db-password: your database password in step 4

Others are optional, we can change later.

If you get the following error

In PatchApplier.php line 172:

Unable to apply data patch Magento\Theme\Setup\Patch\Data\RegisterThemes for module Magento_Theme. Original exception message: Wrong file

In Gd2.php line 70: Wrong file

Then follow this solution and run the command again

Now open the terminal and run these commands to upgrade the database

bin/magento indexer:reindex
bin/magento setup:upgrade

and this command to compiles and generates optimized code for Dependency Injection

bin/magento setup:di:compile

If you get the following error

In ErrorHandler.php line 62:

Warning: file_put_contents(C:/xampp/htdocs/magento2/generated/metadata/primary|global|plugin-list.php): Failed to open stream: No such file or directory in C:\xampp\htdocs\magento2\lib\internal\Magento\Framework\Interception\PluginListGenerator.php on line 411

Then following this solution and run the command again

Now can start to deploying our static content

bin/magento setup:static-content:deploy -f

Clear Cache

php bin/magento cache:flush

Step 6: Install Sample Data

Now we will deploy sample data for our new Magento 2 website on localhost. Sample data will fill your website with some products, categories and images

Run these below commands

bin/magento sampledata:deploy
bin/magento indexer:reindex
bin/magento setup:upgrade
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Well done! refresh your website and enjoy your new Magento 2.4 installation with sample data

Setup Environments

Jack Huynh — Thu, 24 Aug 2023 07:17:38 +0000

Step 1: XAMPP and Composer

XAMPP

First of all, you need to download and install Xampp, a simple tool helps developers to create and test their applications on a local web server.

You might wanna go with PHP 8.1 since it got pretty solid support.

Next, run set up file and proceed with all steps to install Xampp. In Select Components step, make sure to select Mysql and PHP, PHPmyadmin.

Now open XAMPP and start Apache and Mysql, green color of Apache and MySQL indicates that its been started successfully.

COMPOSER

Now we need to install Composer, a tool for dependency management in PHP.

After the installation is complete, verify that Composer is installed correctly by running the following command

composer

If the installation was successful, the command should display the version of the installed Composer.

Step 2: PHP & MySql

Enable PHP extensions

We need to install and enable all required PHP extensions to make the installation go smoothly

bcmath  ctype   curl    dom
gd  hash    iconv   intl
mbstring    openssl pdo_mysql   simplexml
soap    xsl zip ext-sockets

Quickly open php.ini on Xampp interface with this button

[PHP]
;extension=gd
;extension=intl
;extension=soap
;extension=xsl
;extension=sockets
;extension=sodium
;extension=zip

Remove ; from the above lines of php.ini file. Save the file.
The other extensions are enabled by default after we install Xampp, so we don’t need to include them here. Remember to save files before exiting.

Configure PHP settings

In php.ini file, search and change the following values as below

max_execution_time=18000
max_input_time=1800
memory_limit=4G

These values will keep the installation go properly without interruption.

Finally, restart apache to apply php settings by click on apache Stop and Start button on XAMPP

Create database for Magento 2

Before we process the installation, we have to create a database for Magento 2 website to store all settings related to products, catalog, users, store configuration….

In Xampp interface, open PHPmyadmin by clicking on Admin button to open phpmyadmin

On phpmyadmin page, click on New => type database name => click on Create to create a new database. For example, I create magento2 database here

By default, Xampp does not set a password for MYSQL, so we will need to create a new root password for mysql.

On Xampp, click on Shell button to open command interface

Next, input the following command to change mysql root password

mysqladmin.exe -u root password root

and press Enter. I put root as password.

Now, to use phpmyadmin, you will also need to enter the new password. To make phpmyadmin automatically login with your new password, Open config.inc.php , to open this file, see the screenshot below

And insert your new password here

Finally, restart apache to apply php settings by click on apache Stop and Start button on XAMPP

Step 3: Elasticsearch

Download

[Elasticsearch (https://www.elastic.co/downloads/elasticsearch)is now a required application to install Magento 2.4, the installation process will stop if there’s something wrong with Elasticsearch verification.

Next, unzip archived file at the “C:\xampp\htdocs\”

Install and Run

Go to \elasticsearch\bin

Right click on elasticsearch.bat and select run as administrator

Leave this window running on background

Set Passwords

Before we continue, we must set password for all built-in users.

Open another terminal inside C:\xampp\htdocs\elasticsearch\bin and run this command

./elasticsearch-setup-passwords.bat interactive

If you encounter this error

write the following line in /elasticsearch/elasticsearch.yml:

xpack.security.enabled: true

Verify

To check if Elasticsearch is running on your system, open your browser and enter the following address: http:localhost:9200. When prompted for login credentials, use root user elastic and the password you just reset.

If you see this result page => Elasticsearch is running properly

How to install Magento 2 on Windows

Jack Huynh — Thu, 24 Aug 2023 07:16:52 +0000

Introduction

Magento 2 is widely acknowledged as one of the most robust eCommerce platforms.

In this article, I gonna show you how to install Magento 2.6 locally on Windows using XAMPP.

Pre-installation

Before jumping in, please check on these requirements:

Must meet the Magento system requirements
Get authentication keys to the Magento Composer Repository.
Apache 2.4 or Nginx 1.18
MySQL 8.0
PHP 8.1
Elasticsearch 7.17 or OpenSearch 1.2
Composer 2.2

🔍 What's Inside:

Here is all the steps to guide you installing Magento2 on a Windows computers

Other Sources:

Please leave any comments or ask anything if you encounter any errors during the installation process.

Happy coding.

Defer JavaScript for Faster Load Time

Jack Huynh — Sat, 29 Jul 2023 14:28:26 +0000

When it comes to JavaScript speed optimization, there is one technique every developers should know and embrace: Defer JavaScript.

The behavior of a website
Why bother defer JavaScript
Async vs Defer
Summary

The behavior of a website

Imaging having an HTML file import 2 scripts: small.js and big.js with difference load times.

<head>
  <script src="big.js"></script> <!-- Load time: 500ms -->

  <script src="small.js"></script> <!-- Load time: 100ms -->
</head>
<body>
  <p>...content...</p>
</body>

During page load, a “white screen” might briefly appear before the full page is visible.

Why bother defer JavaScript

Due to it's nature, the browser will stop rendering the page while loading and executing scripts.

As the result, the page content remains hidden until both small.js and big.js are fully downloaded and run.

The "white-screen" is nearly invisible for users with fast internet connections. However, for those like me with slower speeds, it result in a significant delay before the entire page becomes visible.

Luckily, Defer JavaScript comes to the rescue help us pushing all the script to the bottom of the loading process using defer and async.

Async vs Defer

Async

Async will move the download of your script into the background and execute the script as soon as the download is finished.

Each async script operates independently, they don't wait for each other. Whatever loads first - run first:

<head>
  <!-- loads first / runs second -->
  <script async src="big.js"></script>

  <!-- loads second / runs first -->
  <script async src="small.js"></script>
</head>
<body>
  <p>...content...</p>
</body>

Defer

Defer will move the download of your script into the background and execute the script as soon as the site finished parsing.

It will also respect the execution order of your scripts.

<head>
  <!-- loads first / runs first -->
  <script defer src="big.js"></script>

 <!-- loads second / runs second -->
  <script defer src="small.js"></script>
</head>
<body>
  <!-- visible immediately -->
  <p>...content...</p>
</body>

Summary

async and defer both load JavaScript asynchronously without render blocking but with difference in behavior.

JavaScript Bloat: Why does it matter?

Jack Huynh — Wed, 21 Jun 2023 08:51:33 +0000

Ever wonder why your website gradually slow down after each release? In the tech world, it is widely believed that the main culprit behind lies in what we call JavaScript Bloat.

State of JavaScript
What is JavaScript Bloat
Why more JavaScript mean Worse Performance
Summary

State of JavaScript

In today's fast-paced world, JavaScript has become an integral part of almost all modern websites, enabling rich and interactive website experiences.

Think about the following:

An interactive map that can display real-time traffic updates
A slider/carousel that switches images every few seconds
A video player that plays YouTube videos
And more…

All of the above use JavaScript to achieve the desired functionality.

For the last 10 years, JavaScript's usage has been increasing substantially by every measure.

Stats from HTTP Archive shows an average based on thousands of tested websites for the past decade (HTTP Archive performs tests every month).

Its observed that 10 year ago the median page serves only 168.1 KB of JavaScript (107.2 KB for mobile). Now that number has risen to 508.5 KB (468.7 KB for mobile). Its gone up ~200% (~330% for mobile) in just a decade.

What is JavaScript Bloat

JavaScript is like chocolate in a cake: it enriches the experience. But add too much and you'll spoil the taste.

JavaScript Bloat refer to a website that relies excessive amount on poorly optimized JavaScript.

A feature-rich, complex website in exchange for providing modern, interactive experience naturally going to have more assets that consume more users' resources, from CPU and GPU to memory and network.

According to HTTP Archive, the median web page weight around 2.2 MB of data split across 71 HTTP requests. This is a huge increase from 800 KB average of 10 year ago.

JavaScript is the highest contributor to the significant increase in page weight behind images (and videos).

Why more JavaScript mean Worse Performance

To display a web page, the browser parses the HTML content to build the DOM. As soon as the parser comes across a <script>...</script> tag, it stops the DOM building, waits for the script to download, parses it, executes it and only then can it process the rest of the page.

Depending on how large each scripts is, especially on slower connections, there will be a significant delay before users will be able to see your HTML.

That's why the delayed time between first load and interactive has increasing steadily according to HTTP Archive

When your website have lots of third-party scripts, they'll block your own JavaScript and have a drastic effect on your web page performance.

Here is an example of a simple HTML website before and after install a 3rd-party plugin.

Summary

It's true that JavaScript slow down our webpage. However, it doesn't mean that you shouldn't use JavaScript at all.
In the next article in this series, we’ll discuss some advanced techniques you can use to optimize your website.

How to install Shopify CLI 3.0 for themes

Jack Huynh — Wed, 07 Jun 2023 04:39:05 +0000

Shopify CLI (Command Line Interface) is a vital tools for developers when working with Shopify themes. With Shopify CLI you can create, develop, and deploy themes directly from your terminal, allowing for quicker automation and improved workflows.

Let's see how we can set up the Shopify CLI on our computer.

Prerequisites

Node.js 16 or higher
Shopify Partner Account

Installing Shopify CLI ⚡️

macOS

Installing Shopify CLI on macOS is simple with Homebrew

brew tap shopify/shopify
brew install shopify-cli

Windows

Installing Shopify CLI on Windows require you to install RubyInstaller for Windows first.

Then open the Terminal

npm install -g @shopify/cli @shopify/theme

Verify the installation

After the installation is complete, verify that Shopify CLI is installed correctly by running the following command:

shopify version

If the installation was successful, the command should display the version of the installed Shopify CLI.

Typing in the shopify help will list available Shopify CLI commands.

shopify help

Javascript (ES14): with()

Jack Huynh — Tue, 23 May 2023 10:56:24 +0000

ECMAScript proposal "Change Array by copy" by Robin Ricard and Ashley Claymore has been merge into ECMAScript standard. This proposal brings a lot of new toys, one of which is new array method: with().

The with() method is a new way to modify an array's item:

with(index, value): Array

The only difference is that it does not change the original array and returns a changed copy of the original array.

const arr = [1, 2, 3];

arr[1] = 4;

console.log(arr)
// [1, 4, 3] The original array is mutated

with()

const arr = [1, 2, 3];

console.log(arr.with(1, 4)) 
// [1, 4, 3] Returns a new copy of arr with updated value.

console.log(arr) 
// [1, 2, 3] The original array is not affected

For more information, check out the following resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with

Javascript (ES14): toSorted()

Jack Huynh — Fri, 19 May 2023 03:22:43 +0000

The toSorted() method is similar to sort

// Functionless
toSorted()

// Arrow function
toSorted((a, b) => { /* … */ })

The only difference is that it does not change the original array, calling this method returns a changed copy of the original array.

sort()

const arr = [3, 4, 2, 5, 1];

console.log(arr.sort())
// [1, 2, 3, 4, 5] Returns a reference to original array, now sorted

console.log(arr)
// [1, 2, 3, 4, 5] The original array is mutated

toSorted()

const arr = [3, 4, 2, 5, 1];

console.log(arr.toSorted()) 
// [1, 2, 3, 4, 5] Returns a new copy of arr that is sorted

console.log(arr) 
// [3, 4, 2, 5, 1] The original array is not affected

For more information, check out the following resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted

Javascript ( ES14 ): toSpliced()

Jack Huynh — Wed, 17 May 2023 04:01:33 +0000

The toSpliced() method is similar to splice

array.toSpliced(start, deleteCount, item1, item2, ...)

The only difference is that it does not change the original array, calling this method returns a changed copy of the original array instead of the deleted array.

// splice()
const originalArr = [1,2,3];
const targetArr = originalArr.slice(1, 1, 5);

console.log(targetArr) // [2]
// The original array is mutated
console.log(originalArr) // [1,5,3]

// toSplice()
const originalArr = [1,2,3];
const targetArr = originalArr.toSplice(1, 1, 5);

console.log(targetArr) // [1,5,3];
// The original array is not affected
console.log(originalArr) // [1,2,3]

For more information, check out the following resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced

Javascript ( ES14 ): toReversed()

Jack Huynh — Tue, 16 May 2023 04:39:47 +0000

JavaScript lovers, rejoice! The latest version of ES, ES14, has just introduced a brand new method that will flip your arrays upside down. Meet the "toReversed()" method!

Syntax:

array.toReversed()

Parameters: This method does not accept any parameters.

Return value: The toReversed() method returns a new array with the elements in reverse order.

Notes:

This method does not change the original array.
It does not modify the original array in any way, it simply creates a new array with the elements in reverse order.

Example:

const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.toReversed();

console.log(arr); // [1, 2, 3, 4, 5]
console.log(reversedArr); // [5, 4, 3, 2, 1]

The difference between reverse() and toReversed():

const originalArray = [1, 2, 3, 4, 5];

// using `reverse()`
const reversedArray = originalArray.reverse();

console.log(reversedArray); // [5, 4, 3, 2, 1]
console.log(originalArray); // [5, 4, 3, 2, 1] - original array is modified!

// using `toReversed()`
const toReversedArray = originalArray.toReversed();

console.log(toReversedArray); // [1, 2, 3, 4, 5] - reversed copy of the original array
console.log(originalArray); // [1, 2, 3, 4, 5] - original array is unchanged!

In conclusion, the toReversed() method is a useful method for creating a new array with the elements in reverse order. It is easy to use and does not modify the original array in any way, making it a safe and efficient way to manipulate arrays in JavaScript.

For more information, check out the following resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed

Zooming PDF iframe on Iphone

Jack Huynh — Thu, 23 Feb 2023 08:31:06 +0000

Have you ever embedded a PDF file using iframe in your website?

Yes??

Great! Did you manage to get the PDF file shows up?

Desktop

Android

Duh, anyone can do that

Okay, then did you test it on Iphone devices?

Why it's works fine on Android?

Oh my, you should come here and take a look

Can't scroll or zoom out, this is broken

Why??????

Solution

Okay there is no time to panic, we need to fix this before the boss see it.

But how???

We'll using the Google Docs Viewer it's merely a URL which allows you to preview a document while passing the link of a file to it.

<iframe src="https://docs.google.com/viewer?url=[FILE_URL]&embedded=true"></iframe>

And boom everything works again

DEV Community: Jack Huynh

Error Handlings

Error: Malfunctioning Elasticsearch

Symptoms

Solution

Error: Gd2.php line 70

Solution

Error: PluginListGenerator.php on line 411

Solution

Error Magento\Framework\Exception\ValidatorException: Invalid template file

Sources:

Error: require-config.js is not a function

Solution

Error: Image not displaying

Solution

Error: The requested package magento/module-bundle-sample-data could not be found in any version, there may be a typo in the package name

Solution

Sources:

Error: bin/magento Permission Denied

Error: The default website isn't defined

Setup Magento2

Step 4: Download Magento

Through Github

Creating an authorization file

Through Composer

Step 5: Install Magento

Step 6: Install Sample Data

Setup Environments

XAMPP

COMPOSER

Step 2: PHP & MySql

Enable PHP extensions

Configure PHP settings

Create database for Magento 2

Step 3: Elasticsearch

Download

Install and Run

Set Passwords

Verify

How to install Magento 2 on Windows

Introduction

Pre-installation

🔍 What's Inside:

Other Sources:

Defer JavaScript for Faster Load Time

Table Of Contents

The behavior of a website

Why bother defer JavaScript

Async vs Defer

Async

Defer

Summary

JavaScript Bloat: Why does it matter?

Table Of Contents

State of JavaScript

What is JavaScript Bloat

Why more JavaScript mean Worse Performance

Summary

How to install Shopify CLI 3.0 for themes

Prerequisites

Installing Shopify CLI ⚡️

macOS

Windows

Verify the installation

Javascript (ES14): with()

Javascript (ES14): toSorted()

Javascript ( ES14 ): toSpliced()

Javascript ( ES14 ): toReversed()

Zooming PDF iframe on Iphone

Yes??

Desktop

Android

Duh, anyone can do that

Solution

Error: `require-config.js` is not a function

Error: `bin/magento` Permission Denied