DEV Community: Paul van Dyk

Audits conducted in Front-Commerce for client projects

Paul van Dyk — Fri, 11 Aug 2023 10:44:44 +0000

When it comes to developing an e-commerce website, there are many different areas that require constant attention. Project teams may introduce performance issues or forget important features that could negatively impact the user experience. That's why audits are crucial to ensure that the website is meeting high standards and delivering a great user experience.

At Front-Commerce, we conduct thorough audits on our client projects and provide recommendations to improve website performance and user experience. In this blog post, we will discuss the key points we measure during our audits.

🚀 Performance

Performance is a critical factor in the success of an e-commerce store. A slow website can lead to frustrated customers and lost sales. During our audits, we measure the performance of our client's websites in two key areas: server and webperfs.

Server

During our audits, we check if the website's server is performing well. We make sure that things like cache and data loaders are implemented correctly to improve server performance. We also verify if the cache strategies are properly implemented to reduce the number of requests made to external services. Another thing we check is that the server-side rendering (SSR) is implemented properly to improve the TTFB. We also ensure that there are no memory leaks that can negatively impact the application's stability.

Webperfs

Another important part of our performance audit is the webperfs analysis. webperfs measures the website speed, responsiveness, and overall user experience. This includes checking if the website's fonts and images are optimized for the store and if the JavaScript bundle size is at an optimal level. We also check if important pages are preloaded to improve the perceived performance for end users.

🎨 Theme customization

We understand that every e-commerce store has unique branding requirements. During our audits, we check if the website's theme has been customized to match the client's branding guidelines. We also ensure that any customizations do not negatively impact the website's performance or user experience.

🦻 Accessibility

We believe that all websites should be accessible to everyone, regardless of their abilities. During our audits, we check if the website meets accessibility standards, such as having proper alt tags for images, keyboard navigation support, and proper contrast ratios.

🖌️ Styleguide

Consistency is key when it comes to creating a great user experience. During our audits, we check if the website's style guide is consistent throughout the website. We also ensure that the website's typography, colors, and spacing are in line with the client's branding guidelines.

📨 Links received by e-mail

A customer journey extends beyond the web UI and encompasses email interactions. That is why we also check the links that are received by email, as it ensures that customers can access the correct pages of the website, leading to a better overall user experience.

🔗 Audit broken links in the store

In a project, developers could have forgotten to update a hardcoded link, or content writers may have contributed unfinished content or made typos. That's why during our audits, we perform a thorough check for broken links and provide recommendations to fix them, ensuring that the website's user experience and SEO are not negatively impacted.

🔍 SEO

Having good SEO is crucial to driving traffic to the website. During our audits, we check for the following:

404 & redirections

We check for any 404 errors and ensure that the website has proper redirections in place. This is especially important when migrating to Front-Commerce from another platform, as the links may not be in the same format. This can cause 404 errors for any pages previously crawled by search engine robots, such as Google.

Robots.txt

We ensure that the website's robots.txt file is properly configured to allow search engines to crawl the website's pages.

Sitemap

We check if the website has a sitemap.xml file and that it is correctly generated. More information about this can be found here

Meta tags and microdata

We ensure that the website's meta tags and microdata are properly configured to improve the website's search engine rankings and visibility when sharing on social platforms.

📱 PWA (Progressive Web App)

We ensure that the store meets the standards for a PWA. We provide recommendations to improve the website's PWA capabilities.

📈 Analytics

During our audits, we check if the website has proper analytics tracking in place. This helps our clients to make data-driven decisions to improve their website's performance and user experience. More information about this can be found here.

🧑‍💻 Code quality audit

Auditing code quality in a project is essential for several reasons. Firstly, it helps identify and rectify potential bugs, vulnerabilities, and performance issues, ensuring a more stable and secure application (as mentioned above).
Secondly, it promotes maintainability and ensures that the project can be updated during its life. By adhering to Front-Commerce best practices, developers can upgrade to newer Front-Commerce versions more easily and with less risk of introducing bugs. Finally, our code quality audit encourages consistent coding standards and improves overall code readability. This leads to a more robust, efficient, and sustainable codebase.

🪄 Application stability

Application stability is a crucial aspect of a composable architecture, like the one used by Front-Commerce. It refers to the website's ability to remain resilient to external systems outages, such as server downtime or configuration
errors. Ensuring stability is essential for a front-end solution like Front-Commerce, as it directly impacts the user experience and the website's ability to drive sales. Front-Commerce conducts thorough audits to identify potential issues that could affect stability and provides recommendations to improve resilience and ensure a reliable website.

✨ Magic Button

We believe in going above and beyond for our clients. During our audits, we look for opportunities to add additional features to the website that will improve the contribution experience and improve the merchant’s team productivity. Our
Magic Button feature allows contributors to seamlessly improve the content on the website with direct links to the content source. We ensure that the contribution mode activation is secure and that any custom content is wrapped with the StorefrontContent component. More information about this can be foundhere.

☁️ Prod server & CI

We check if the website is properly deployed to the production server and if the continuous integration (CI) process is working correctly. This ensures that the website is always up-to-date and running smoothly.

🗒️ Audit logs

After conducting a thorough audit of the website, it's important to keep track of any bugs or issues that may arise once the site is live. While we analyze the codebase and test the application during the audit, we believe that analyzing
application logs and monitoring metrics is also crucial once the site is live. This allows us to detect any smaller bugs or performance issues that may have been missed during testing. We follow up on our audits with log analysis a few days after the project is live to ensure that everything is running smoothly and to address any issues that may arise. By addressing these smaller issues, we can improve the overall quality of the application.

☑️ Checklist before production

Before we proceed with the audit, we have a checklist that should ideally be done by integrators in the project. This checklist includes items such as verifying that the environment is properly configured, that the data has been
properly migrated, and that there are no broken links or missing assets. You can find a detailed checklist in our documentation here.

Conclusion

In summary, audits are essential for ensuring that e-commerce websites meet the high standards necessary to drive sales and provide an exceptional user experience. At Front-Commerce, we take great pride in conducting comprehensive audits and providing our clients with actionable recommendations to enhance their website's performance and user experience. By partnering with us, our clients can rest assured that their website is optimized for success and delivering the best possible experience for their customers.

Set up a WSL development environment.

Paul van Dyk — Mon, 03 Apr 2023 12:50:39 +0000

Looking to take your Windows development environment to the next level? Look no further than Windows Subsystem for Linux (WSL)! With this powerful tool, you can quickly and easily set up a Linux-based development environment on your Windows machine. This guide has everything you need to get started, from installing WSL to updating packages and setting up Windows Terminal. Plus, we'll show you how to install Node.js and Git, and give you tips for using Visual Studio Code, Zsh, and Oh My Zsh.

You have two options for installation: you can either follow the full installation guide, or you can refer to the best practices for setup, which includes a step-by-step setup guide and explains important concepts such as File Storage.

Prerequisites

To set up WSL in Windows, virtualization should be enabled, commonly referred to as SVM mode. Ensure that it is enabled in your BIOS, you can follow this guide to locate it (it will differ depending on your motherboard). Once enabled, proceed to Install WSL in Windows.

Install WSL (📑docs)

ℹ️ If you have already followed the full install guide, you can skip this step.

To install Ubuntu, open PowerShell or Windows Command Prompt in administrator mode by right-clicking and selecting "Run as administrator", then enter the wsl --install command.

After running the WSL install command and restarting, Ubuntu will be installed by default. You may change the distribution name by passing in a new name with the -d flag: wsl --install -d <Distribution Name>.

However, I suggest staying with Ubuntu. 🙂

Update and upgrade packages (📑docs)

When starting a new development project, updating your packages is always a good idea. After setting up your Unix account, you can simply run this one-liner to update the package manager:



sudo apt update && sudo apt upgrade

⚠️ Resolving common connection errors

If you receive an error message saying Temporary failure resolving ‘archive.ubuntu.com’, it is usually due to an invalid nameserver on the WSL installation. This can cause the WSL instance to be unable to connect to the internet.
To confirm if this is the case, try to ping www.google.com. If it cannot be pinged, this should confirm that the nameserver configuration is the issue. You can update your configurations to the following:
$ cat /etc/wsl.conf
  [network]
  generateResolvConf = false # disables auto generation of resolv config
  generateHosts = false # disables auto generation of hosts /etc/hosts
$ cat /etc/resolv.conf
  nameserver 1.1.1.1
Finally, as a last step, you can protect the resolv.conf file by forcing the overwrite to be disabled.
sudo chattr -f +i /etc/resolv.conf

Set up Windows Terminal (📑docs)

You can install any terminal, but personally, I prefer using the Preview build because it ships features much faster than the normal version. For example, the GUI feature only arrived around a year later on the standard version, and I have never found it to be really stable.

To install, visit the Microsoft Store Apps for either:

And as mentioned above, GUI is supported! That means you can run Linux GUI apps on WSL 😇

File storage (📑docs)

To open your WSL project in Windows File Explorer, enter: explorer.exe . Be sure to add the period at the end of the command to open the current directory.

💡 TIP

For the fastest performance, store your project files on the same operating system as the tools you plan to use. If you are working with Linux tools in a Linux command line (Ubuntu, OpenSUSE, etc), store your files in the WSL file system. If you're working with Windows tools in a Windows command line (PowerShell, Command Prompt), store your files in the Windows file system. Files can be accessed across operating systems, but doing so may significantly slow down performance.

Install Node.js on WSL (📑docs)

We will be using Node Version Manager (nvm). Follow these steps to install it on Ubuntu (or a similar distribution):

Open your command line.
Install cURL using the following command: sudo apt-get install curl. cURL is a tool used for downloading content from the internet in the command-line.
Go to the nvm repository and find the latest release.
Install nvm using the following command: ```bash

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

---

## **Setting up your shell ([Zsh](https://www.zsh.org/) + [Oh My Zsh](https://ohmyz.sh/))**

This step is optional, but you may want to use Zsh and Oh My Zsh if you are looking for a more customizable and powerful shell experience.

### Installing zsh

To install zsh, open the Ubuntu app installed from the App Store and run the following command in the terminal:

```bash


sudo apt-get install zsh

Once it's installed, type zsh in the terminal. It will prompt you to choose some configuration options. We will do this later on while installing oh-my-zsh, so choose option 0 to create the config file and prevent this message from showing again.

Installing oh-my-zsh

Before anything else, you need to have git installed on your system. You can install it by running the following command in a terminal:



sudo apt-get install git

After installing git, you can then use curl to install oh-my-zsh.



sh -c "$(curl -fsSL <https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh>)"

This command will clone the repository and replace the existing ~/.zshrc file with a template from oh-my-zsh.

Installing OhMyZsh Plugins

We can supercharge our command line by adding some oh-my-zsh plugins. First, open the zsh config by running vim ~/.zshrc. Next, find the line plugins= and add the desired plugins.



plugins=(git nvm history zsh-autosuggestions jsontools command-not-found zsh-syntax-highlighting)

I have listed my favorite plugins here, but feel free to use your own set based on your needs. You can find a list of plugins
here. Additionally, I use 3rd party plugins that must be pulled separately:

Enable NVM autoload in zsh

Enabling the nvm autoload plugin allows you to use the appropriate node version based on the specifications in a .nvmrc file in any of your projects. This feature is especially helpful when working on multiple projects with different node versions, as it eliminates the need to switch between incompatible versions. With nvm autoload, you can easily switch between projects while ensuring you are using the correct node version.



zstyle ':omz:plugins:nvm' autoload yes

Useful gists for aliases

To create an .aliases file in your home directory, run the command touch ~/.aliases. Then, ensure that it is sourced in your .zshrc file by adding source ~/.aliases to it.

Next, you can add the aliases and configurations used in the terminal by following the instructions in this link.

You will notice that there is an alias for npm. This is to detect which package manager to use by searching for the nearest lock file. An alternative to this is ni, which is highly recommended.

Git Credential Manager setup (📑docs)

The credential manager can assist with any HTTPS authentication, utilizing the Windows Credential Manager.

To download the latest version, visit the repository at
https://github.com/GitCredentialManager/git-credential-manager/releases.

After installation and configuration, you should also add it to your Linux shell.



git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager-core.exe"

VSCode (📑docs)

To get started, download and install VSCode. Then, add the remote development extension.

That's it you should be ready to start developing in WSL.

💡 Tip

If your WSL container resolves the code path to an Ubuntu installation of VSCode, it can cause issues when you try to open a folder using a command like code ./my-folder. If Git extensions crash at startup, create an alias for the code command to point to your Windows installation of VSCode. Run which code
to detect which VSCode installation is being used.

Solution:
Add an alias for the code command that points to your Windows installation by including it in your .aliases file.
alias code="/mnt/c/Users/%userprofile%/AppData/Local/Programs/Microsoft\ VS\ Code/bin/code"

Microsoft PowerToys: Utilities to customize Windows (📑docs)

As you're setting up your Windows development environment, you might be interested in exploring some of the additional tools available to you. One of my personal favorites are the Microsoft PowerToys, a set of utilities designed to help streamline and customize your Windows experience for greater productivity. Install Microsoft PowerToys to keep tweaking Windows!

Here are a few PowerToys features that I find particularly useful:

FancyZones

If you want to easily manage the position of each application window on your Windows desktop, check out FancyZones. This tool allows you to customize the size and positioning of your snapping grid with efficient layouts that suit your needs.

Keyboard Manager

With the PowerToys Keyboard Manager, you can redefine keys and shortcut combinations on your keyboard. For instance, you can swap the A key for the B key. You can also swap Ctrl + C for ⊞ Win + C. This will copy text when ⊞ Win + C is pressed. If no specific application is targeted in the PowerToys Keyboard Manager, the changes will apply globally across Windows.

File Explorer Preview Pane

The Preview Pane is an existing feature in Windows File Explorer that lets you see a preview of a file's contents in the view's reading pane. PowerToys enhances this feature by adding support for multiple file extensions, including Markdown, SVG, PDF, and G-code. It also adds support for source code files with more than 150 file extensions.

ColorPicker

This Windows color picker is a must-have tool for designers and themers. It allows you to easily select colors from any application and customize them to your liking. The interface is user-friendly and you can copy colors to your clipboard in different formats, including hexadecimal, RGB, and HSL. This tool simplifies color palette management and is lightweight. Download it today to improve your design work!

Text Extractor utility

Text Extractor allows you to copy text from anywhere on your screen, including
inside images or videos.

To activate the capture feature, use the shortcut (default: ⊞ Win + Shift +T). This will display an overlay on your screen. Click and hold your primary mouse button, then drag to capture the text. The captured text will be saved to your clipboard.

Run Utility

PowerToys Run is a quick launcher for power users that includes additional features without sacrificing performance. It is open source and modular, allowing for additional plugins to be added.

To use PowerToys Run, simply press Alt + Space and start typing!

Enable ‘God Mode’

God Mode will give you access to all of Windows’ control panels from one folder. To enable it right-click on the desktop and select New > Folder. Re-name the new folder with this bit of code:



GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}

Sharing SSH keys between Windows and WSL 2 (📑docs)

If you have setup ssh in windows you can copy it to your linux



   cp -r /mnt/c/Users/<username>/.ssh ~/.ssh

Fix the permissions



   chmod 600 ~/.ssh/id_rsa

Add keychain to linux



   sudo apt install keychain

Run the keychain every time you start a shell instance, you can append this to the top of your .zshrc file.



   eval ``keychain  --quiet --eval --agents ssh id_ed25519
   command clear # this is why we add it to the top so that we can still se other outputs, I have not yet found a better way of silencing the keychain export messages
   ```

---

## Conclusion

You have just learned how to set up WSL on your Windows machine and create a powerful and efficient development environment. By following this guide, you have installed WSL and updated packages, set up Windows Terminal and installed Node.js and Git. These tools will help you code faster, easier, and more securely.

🥳 Congratulations on completing this guide! We hope you enjoyed it and found it useful. If you want to learn more about other topics related to development, stay tuned as our blog will be growing!