Here are new version patch with the following fixes and new features pushed out:

Added Friend List feature (Pawpals), allowing users to add, manage and view their friends.

Added Friend gifting in Pawpals, enabling users to send gifts to their friends.

Added different types of gift boxes colors to differentiate level up, deliveries and friend gifting.

Added multiple gift box display in the kennel to notify user on multiple items.

Added share icon on Kennel Menu, making it easier for users to share their referral codes with others.

Added inventory notifications to indicate the addition of new items.

Resolved issues where the kennel was missing or the popup got stuck on the "continue" button.

Fixed a bug where the level-up animation played when the pet was not summoned.

Addressed issues related to duplicating kennels and pets.

Fixed problems with un-synced kennel control navigations icons.

Made improvements to enhance the performance and functionality of the Pet Sync feature.

Version 0.2.4 Patch Notes

Get ready to dive into a world of pet fashion and indulgence as we proudly announce the grand opening of our long-awaited Pet Boutique! We are thrilled to offer a plethora of trendy products and delightful experiences to pamper your beloved pets. Additionally, we are committed to ensuring your safety and the security of our community. That's why we have an important security update scheduled for June 27th. Read on to learn more about these exciting developments!




Step into a World of Pet Fashion and Indulgence





Are you ready to spoil your furry companions with the latest trends and luxurious goodies? The wait is finally over! Our highly anticipated Pet Boutique is now open, and it's bound to make tails wag and purrs resonate with delight. In our fully-stocked Pet Boutique, you'll discover a treasure trove of pet-centric fashion, accessories, toys, and more! From chic clothing and stylish collars to interactive toys and cozy beds, we have everything you need to treat your pets like royalty.

We believe that pets deserve the very best, and our Pet Boutique is designed to provide an unforgettable shopping experience for pet owners like you. So, join us on this exciting journey and embark on countless adventures with your furry friends!





At our pet-loving community, your safety and security are of utmost importance to us. We are dedicated to maintaining a safe environment where you can fully enjoy your interactions and experiences. To achieve this, we have an important security update scheduled for June 27th.

During this update, we will be implementing enhanced security features to ensure the utmost protection of your personal information and accounts. To activate these features, we kindly request that all members re-log into their accounts and reset their passwords between June 27th and 28th.
Rest assured that this process is quick, easy, and vital to the continued smooth operation of our platform. By working together to maintain a secure environment, we can ensure that both you and your furry companions can wag, purr, and play without any interruptions or concerns.

Join us as we celebrate the long-awaited arrival of our Pet Boutique, where indulgence and the latest trends await. Spoil your beloved pets and create unforgettable moments together. Additionally, our commitment to your security shines through with an important account security update scheduled for June 27th. We appreciate your cooperation in helping us maintain a safe and enjoyable community for all.

With the Pet Boutique and enhanced security, we're ready to take your pet's world to new heights! Get ready to embark on a journey filled with style, joy, and endless adventures with your furry companions.
Stay tuned for more updates, as we continue to bring you the very best in pet fashion, products, and experiences. Let's make our pawsome community even stronger!



Together, let's make tails wag and hearts soar!

Unleashing Excitement: Introducing the Pet Boutique and Enhancing Security!

Hi there, Pawrents! We just got an update that you will need to refresh your browser to see the changes🐶🐾. Here are the patch notes.



Launched 60fps Options Toggle in the settings menu for a smoothed-out gameplay.

Added a new animation for the potion-drinking.

The extension now avoids running on blocked domains for enhanced security.

Ensured reliability for a seamless gaming experience with toys.

Fixed glitches for better synchronization of food interactions.

Fixed the positioning of the patting bar to be above the pet.

Resolved UI issues on Right-to-Left websites for a consistent experience.

Fixed persistence of Floating Stats during active Pet Presence.

Fixed pet animation freeze when switching tabs.

Fixed bugs related to incorrect pet y-position.

Fixed duplication issues when equipping wearables quickly.

Fixed issues with the auto behavior function on pets to be working now.

The MetaPals team is working hard to fix all the bug issues and we appreciate you reporting the errors and bugs!🧑‍🔧



Occasionally, the extension may appear unresponsive. Switching back and forth between tabs will resolve this.

If your pet doesn't want to eat despite hunger being below 100%, try moving the pet and the food.

After switching accounts with different pets, if the summoned pet is incorrect, dismiss and re-summon the pet.

If a pet is missing on a specific tab and the summon bell doesn't work, simply refresh that tab.

Food may not synchronize properly after being removed, leading to inconsistencies between tabs.

Pet facial expressions may experience glitches.

There's a possibility of pet animations freezing or pets disappearing after changing tabs.



MetaPals is still in the early development stages and our team is working hard to make it the best it can be. When you come across a new bug, don’t hesitate to 

, this will help MetaPals to look into the matter and fix it as soon as possible.

Version 0.2.9 Patch Notes

Join the Paw-ty and Share Your Wishes for a Fur-tastic Year Ahead!⭐

We invite you to participate in MetaPals' Birthday Memories Contest🥳. All participants will receive prizes!

To enter MetaPals' Birthday Memories Contest:

 of your MetaPals in any MetaPals accessories you've purchased from the Pet Boutique🛍️.

Feel free to submit multiple entries! Make sure all your entries are in by 

Let's create unforgettable memories together with MetaPals!🐶❤️



Should you have any inquiries or need assistance, don't hesitate to reach out to us. Visit our support page at 

 for all your queries and concerns. We're here to help make your MetaPals experience pawsitively perfect! 🐾😊🌟

Create Birthday Memories with MetaPals✨

Pets can now have fun potion effects, such as turning into zombies, glowing, or becoming black cats.

We resolved an issue where pets were mistakenly doubling up in your personal backyard.

We fixed pet animations that were freezing or glitching, as well as errors with wearables, like missing parts.

Occasionally, the extension may appear unresponsive. Switching back and forth between tabs will resolve this

If your pet doesn't want to eat despite hunger being below 100%, try moving the pet and the food

After switching accounts with different pets, if the summoned pet is incorrect, dismiss and re-summon the pet

If a pet is missing on a specific tab and the summon bell doesn't work, simply refresh that tab

Food may not synchronize properly after being removed, leading to inconsistencies between tabs

There's a possibility of pet animations freezing or pets disappearing after changing tabs

Pet facial expressions may experience glitches

Version 0.2.8 Patch Notes

Added Low Power Mode for improved device performance

Added Pop-Up Guide to help you access extensions when opening restricted tabs like new tabs or settings pages

Your pet now appears in the Backyard, and the pet extension remains inactive during this time to prevent distractions when you interact with them

Added menu notification that displays notification of Pawpals request in the extension

Added Visit Pet Button in the Pawpals menu to visit your Friend's Backyard

Added pet interaction in Backyard, allowing you to pick up and patting pet in Backyard

Added Non-User Access to visit User's Backyard and choose a temporary pet

Updated buttons in the Sanctuary and Backyard for better clarity

Added Halloween Event Info to access details of the event from the landing page

Added Pet Boutique Coupons Get discounts and offers

Added Cinema Coupon Display Conveniently view and redeem cinema coupons after 5 minutes watching the movie

Added Features Starting on Halloween Event :

Camera Feature to capture and share images in the Backyard (Photoshoot and Candid mode)

Notes Feature to send and keep notes in Friend's Backyard

Fixed the problem where the pet pickup animation wasn't showing correctly when swinging to the sides

Optimized Performance in Sanctuary by enhancing animations, assets, and turned off anti-aliasing, potentially increasing FPS by up to 100%

Version 0.2.7  Patch Notes

📸Capture enchanting moments with your MetaPals!

Now, you can cherish and share all those magical moments with your beloved MetaPals!

Snap your favorite moments with your MetaPals and save them as Snapshots. Whether it's playtime, pats, or dressing up for Halloween, capture it all!


: Capture cute and coordinated poses for your pet in the comfort of your backyard. This mode allows your pet to step inside the camera frame and strike those paw-some poses.

: If you prefer the element of surprise, this mode is for you. Your pet won't notice the camera, ensuring that you can secretly capture candid moments without any interruptions.

Pick the perfect frame size for your snapshot. Whether you want a close-up or a wide-angle shot, it's all in your hands!

Click that shutter button to capture the magic. Freeze the moment and save it forever.

After snapping, get creative! Decorate your snapshots with stickers, filters, and more. Then, share your masterpiece with the world using the hashtag #MetaPalsHalloween and tagging us @metapals.pet.With Snapshots, making unforgettable memories with your MetaPals has never been easier! 🐾📷🎃

Get ready to snap, share, and scare with your MetaPals. It's time to create lasting memories and spread the Halloween spirit! 🦴🕸️👻

👻 Join Us for More Halloween Fun!

We're thrilled to invite you to some other exciting Halloween events:

Explore spooky delights and grab some treats at 


Should you have any inquiries or need assistance, don't hesitate to reach out to us. Visit our support page at 

Snap & Share 📸

Are you ready for some Halloween fun with your furry friends?


Let's go Trick or Treating together with your PawPals and have a blast! 🦇👻

Find the PawPals icon in your kennel menu. It's like a doorway to your Halloween excitement! 🏡

Whether your PawPal has a unique name or a user ID, you can find them easily. Just type their name or ID in the search bar! 🕵️‍♀️🔍

Once you've found your PawPal, click on the home icon, and you'll instantly teleport to their Halloween wonderland. 🎃✨


Now that you're in your PawPal's backyard, it's time to grab some Halloween Trick or Treat Boxes! 🎁 But remember, you can collect up to 

 every day, so choose your Pawpals! 🌟



The trick-or-treat event will be available until October 31, 2023. So don't miss out on this chance to “trick” your PawPals this Halloween! 👻



Don't forget to share your enchanting snapshots at 

 for all your queries and concerns. We're here to help make your MetaPals experience pawsitively perfect! 🐾😊🌟

🌐 Join Our Community!

Trick or Treat with Your PawPals 🐾🎃

Introducing Our Halloween Series Accessories! 🎃

Turn your beloved MetaPals into Halloween fashion icons with our latest collection of spooktacular accessories! 🐾


Shop Now at our pet boutique to give your MetaPals a howlingly good look this Halloween!

🎁 WIN SPOOKY HALLOWEEN ACCESSORIES! 🌟

Enter the Spooky Styles Dress-up Challenge with oyur paw-some Halloween outfits and get a chance to win your dream accessories!

Share a photo or video of your dressed-up MetaPals (or even your real pet) in our latest Halloween costumes on Instagram or TikTok.

Tag us @metapals.pet and use #MetaPalsHalloween and #PawfectStyles in your post to join the fun.

Feel free to submit multiple entries! Make sure all your entries are in by November 1, 2023, 23:59 (GMT).

🏆 Three Lucky Winners Will Get Their Accessories Wishlist!

But that's not all! Even if you don't snag the top prize, you won't be left empty-handed. You'll receive an exclusive 30% coupon code!* 🛍️

Join the MetaPals Halloween extravaganza and let your furry friends shine in the spookiest styles. Shop now and start snapping those paw-some pics for a chance to win big! 📸🐶👻*Terms and conditions apply.



Spooky Styles Unleashed 👻

Tired of waiting for your websites to load? Or do you want to optimize your own website for faster loading times? Then you've come to the right place. In this tech blog, we will show you some tips on how to optimize your web performance so that your website can load faster.

Before we begin, let's delve into page speed. Basically, page speed refers to how quickly your website's content loads when someone visits it. In today's world, speed is critical in almost everything. It doesn't matter if you have a visually appealing or complex web design; if your website takes forever to load, it won't cut it.

When it comes to page loading speed, every second counts. Research indicates that when loading times increase from one to three seconds, the likelihood of visitors leaving immediately increases by 32 percent. In other words, if your pages can't load within a few seconds or take too long to display essential information, your visitors are likely to lose interest and exit your site.

Another reason why page speed is vital is because it can impact how people perceive you as the website owner and your brand. A slow and unreliable website can make you appear unprofessional, damaging your brand and costing you potential customers. Thus, improving your website's loading speed will have a positive impact on your traffic, user retention, and sales.

The truth is, there are various reasons why your website may load slowly. Essentially, it could be anything, but the most common factors include:

Hotlinking images or other resources from a slow server

There are many things you can do to enhance your page loading times, which I may explain in the next part. In this tech blog, I want to focus on helping you test your page load time and optimize images on your website. According to HTTP Archive, one of the largest contributors to the average website's size is images, making them a significant factor in page loading speed.

Before we delve into optimizing your web performance, it's essential to assess the overall performance of your website. There are various tools available for testing and measuring page speed. However, I recommend starting with a basic one: 

In the report, you'll find a range of performance metrics, such as the visual loading speed (Speed Index) and the time it takes for your page to become fully interactive. As you scroll down, you'll encounter a list of recommendations on how to enhance these metrics. Pay special attention if you come across suggestions like "optimize your images" or other image-related issues, as this blog will provide valuable insights on these topics.

Utilizing these tools to assess your site will undoubtedly highlight areas with potential for improving your web performance. Now, let's explore some straightforward steps to enhance your web performance by optimizing images.

Improve Page Loading Speed by Optimizing Your Images

Now that we both understand the importance of page loading speed and how to measure it, it's time to explore some simple yet effective methods to enhance your page loading speed through image optimization.

One of the easiest steps with a significant impact on page loading speed is often overlooked by developers—resizing your images to precisely match your website's requirements. However, I'm not referring to resizing images using CSS or in HTML.

For instance, if you have an image with dimensions of 8000x4500 pixels that you want to display on your website, but the required dimensions on your site are only 1000x560 pixels, it's crucial to scale down the original image to the required dimensions before integrating it into your website. Why? Because resized images are considerably smaller than the original ones and load much faster.

However, it's essential to consider a scenario where, after you've already incorporated perfectly-sized images into your website, you make layout changes that affect your image dimension requirements. Instead of generating new images each time your layout changes, you can find a close alternative, such as using a 1200x700px image if you need a 1000x560px image.

In the above example, I used an online image resizing tool which is 

to highlight the difference between the original image's size and the one I resized to the desired dimensions. The size difference between these two images has the potential to significantly speed up your website and reduce your bandwidth consumption.

The second, and also one of the easiest, steps to boost page loading speed is to compress your images. As you know, images can enhance the appearance of your web pages and elevate the quality of your content. However, large images can also significantly delay and slow down your loading times.

Therefore, the second easiest way to optimize your web pages and improve loading times is to compress every image used on your website. Image compression can be achieved through either lossy or lossless methods. Lossy compression reduces image quality to achieve smaller file sizes, while lossless compression maintains image quality without any loss of data. Files compressed using lossy methods are smaller but may exhibit reduced quality, whereas lossless compression results in larger files but maintains the original image quality. Therefore, I recommend using lossless compression, as it compresses your images without any additional quality degradation.

A convenient way to compress your images is by utilizing online compression tools. Personally, I often use 

. It employs smart lossy compression techniques to reduce the file size of your images by selectively decreasing the number of colors in your image. After compression, it's challenging to discern any difference from the original image, but it makes a significant difference in the file size. Therefore, I highly recommend 

In the example above, I compressed an image using TinyPNG, which utilizes smart lossy compression techniques. It reduced the size by 71%, resulting in a total size of 561 KB. Can you spot any differences between the original image and the compressed one?

The next step in speeding up your loading times involves selecting the appropriate format for every image on your website. This task can be a bit tricky, but it plays a crucial role in boosting your website's performance. JPEG, PNG, GIF, and SVG are the most common image formats used for websites. However, Google has introduced a new format called WebP, which works well with nearly all types of images and often provides better compression while maintaining the same quality.

WebP is a relatively new format that is supported by most modern browsers. However, due to its novelty, it may not work on some older browsers, and it is only partially supported on Safari. The best practice is to use the WebP format whenever possible and use other image formats like JPEG, PNG, GIF, and SVG as fallbacks. Here are some basic guidelines for each image format:

JPEG: Suitable for photographs, large background images, small banners, and images with complex color gradients.

PNG: Similar to JPEG (with better quality but larger file sizes), ideal for images requiring transparency, graphics with sharp edges, graphics, logos, icons, and images with text.

GIF: Suitable for simple animations (with optional transparency), web animations, and graphics with few colors (simple diagrams, shapes, logos).

SVG: Ideal for vector graphics, logos, icons, and signs.

WebP: Supports transparency, animations, and a wide range of color profiles.

In the example above, I converted the same image into three formats using an online image converter which is 

. You can see the comparison between PNG, JPEG, and WebP images. The images are visually similar but have different sizes. Choosing the right format for each image you use will help you strike the best balance between image size and quality, ultimately reducing loading times. Keep in mind that the same picture in different formats will have varying file sizes.

4. Implement Lazy Loading For Your Images

Another highly effective step you can take to optimize your web performance is by altering how your website loads images. This technique can be especially valuable for certain types of websites, such as e-commerce or restaurant websites, which typically display numerous images on a single page. Lazy loading is a web optimization technique that progressively loads images on a website as the user scrolls or as the images become visible in the browser's viewport. Lazy loading helps reduce page load times and conserves bandwidth by loading images only when they are needed.

Here are some methods for implementing lazy loading:

 In HTML5, you can add the 'loading' attribute to your image tags to enable lazy loading. For example:

 You can also implement lazy loading using JavaScript for more control. Here's an example:

The example above illustrates the implementation of lazy loading, one of the most useful techniques for reducing loading times and improving the overall performance of your website. You're not limited to using just HTML or JavaScript; you can find lazy loading implementations for various JavaScript frameworks like Vanilla JS, React, Vue, Angular, and more.

The four easy steps listed above will not only decrease loading times on your website but also significantly enhance the overall user experience. Faster loading times and images contribute to a faster website in general. These implementations are basic and straightforward ways to optimize your web performance for faster loading times. Additionally, while tools, converters, and code implementations have been provided for each step, don't limit yourself to these options; you can explore and research to find the best implementation for optimizing your web performance.

Master the art of web performance with our series. Part 1: Image optimization — turbocharge your website!

Optimizing Web Performance Part 1: Optimize Images

: Streamline the gifting process with the addition of a "MIN" button. Easily allocate the minimum quantity of items for gifting, saving player time and effort.

: Gain more precise control over gifting by entering the desired quantity directly, offering flexibility in the number of gifts you give to your pets.

: Experience improved synchronization of your pets' data across different devices. We've worked to enhance the reliability and efficiency of the Pet Sync feature.

: Several under-the-hood fixes and enhancements have been made to ensure a more stable and consistent Pet Sync experience.

Addressed the issue of misaligned Monthly Mission Progress Indicators, providing accurate tracking of your monthly objectives.

Pet that were previously missing from specific tabs have been located and properly reinstated, ensuring proper organization and visibility.

Resolved the glitch causing wearables to detach incorrectly from pets. Interactions between pets and wearables should now be seamless and glitch-free.

Version 0.2.6 Patch Notes

Web accessibility, or eAccessibility, is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed, and edited, more users have equal access to information and functionality.

In today's digitally connected world, the internet serves as a gateway to information, services, and opportunities. However, for millions of individuals with disabilities, accessing and navigating the web can be a daunting challenge. Web accessibility, the practice of designing websites and applications to be usable by all, regardless of disabilities or impairments, plays a crucial role in bridging the digital divide.


Imagine trying to browse the web without being able to see the screen or use a mouse, or struggling to comprehend complex language due to a learning disability. These barriers can lead to exclusion, limiting access to education, job opportunities, and participation in society. Web accessibility aims to break down these barriers, creating an inclusive online experience for all users.

: Visual disabilities includes blindness, low vision and color blindness.

: Hearing disabilities includes hearing impairments and deafness.

: Conditions and disorders involving the central and peripheral nervous systems such as epilepsy, Alzheimer disease, Parkinson's disease, etc.

: Cognitive disabilities includes attention, learning disabilities and logic.

: Motor disabilities includes limited fine motor control, muscle slowness, difficulty or inability to use hands.

Based on the above types of disabilities, we can go through different topics of web accessibility:

Choosing colors with poor contrast can make navigating and reading a real pain. Good design means having enough contrast between foreground and background colors, not just for text and images but also for links, icons, and buttons. This is essential for people with low contrast sensitivity, which becomes more common as we age. Better colors make websites and applications easier to use in different lighting conditions.

Videos aren't just about pictures; sound is important too. Without audio, it's hard to understand what the video is about, which can be frustrating for people who can't hear. Captions make videos accessible for the deaf and also come in handy when watching in loud environments or when you need to be quiet.

Allowing users to adjust text size, spacing, font, and colors is crucial for people with low vision and dyslexia. Properly coded websites and applications should offer customization options without losing functionality or clarity.

Using clear language, headings, lists, and separations is important for making content understandable and appealing to a wider audience, including non-native speakers. Avoiding complex language, jargon, and unexplained acronyms makes content more accessible for everyone.

Ensuring websites and apps are operable by the keyboard is vital for people who prefer or need to navigate without a mouse. Whether due to limited mobility, a physical disability, or a broken mouse, keyboard compatibility ensures usability for all users.

Voice recognition technology allows easier communication, especially for people with disabilities. It helps with web searches, sending emails, and controlling navigation apps. Properly coded websites and apps are crucial for voice recognition to work well. It can also assist people with temporary limitations, like an injured arm, and prevent injuries from getting worse, such as Repetitive Stress Injury (RSI).

Text-to-speech technology is beneficial for the blind, people with dyslexia, and those who have difficulty reading. It allows multitasking and better indexing of website content for search engines. Properly coded websites and apps enable text-to-speech functionality.

A good layout improves user experience, including clear headings, navigation bars, and consistent styling. Complex layouts make it difficult for people with visual disabilities to find information. Clear design benefits people with cognitive and learning disabilities who need simplicity and consistency. It also helps those who lack confidence around computers.

Clear notifications and feedback are essential for user orientation and avoiding confusion. Complex error messages should be made understandable. Predictable and understandable websites and apps are accessible to people with cognitive and learning disabilities and are more usable for everyone, especially those with lower computer skills.

Making clickable areas larger and easier to use benefits all users, particularly on mobile websites. It is critical for people with reduced dexterity, allowing them to navigate more easily.

Web Accessibility: Essential for Some, Useful for All

Prioritizing web accessibility benefits people with disabilities, but it also enhances usability for all users. Making websites and applications accessible is a win-win situation for everyone.


In this exploration of web accessibility, we will delve into the key principles, best practices, and technologies that enable individuals with disabilities to fully engage with digital content. We will discover how captioned videos, clear design, customizable features, and keyboard compatibility empower users with diverse needs to access information and interact seamlessly in the 

 the practice of designing websites and applications to be usable by all

Web Accessibility Part 1: Introduction

Creating NPM packages for internal usage can be a daunting task, leaving many individuals unsure of where to start. However, such packages can significantly benefit organizations with multiple projects that rely on common code across various endeavors.

These internal packages are particularly useful for sharing utilities, logic, or components that serve as core, fundamental, or atomic building blocks, reducing the need for frequent updates. It's essential to focus on creating packages for reusable code and steer clear of generating packages for specific product features.

While internal packages enhance code reusability, they come with the responsibility of proper maintenance and version control to ensure seamless operations.

In our own company, we recently encountered the necessity of having a modular package that could be utilized in both frontend and backend tech stacks. As a team responsible for multiple projects, we wanted to maintain consistency by utilizing the same logic. To address this, we decided to create a comprehensive package to handle core functionalities, striving for simplicity and full test coverage.

Throughout this article, we will address the following key points:

(Optional) Implementing Testing: Ensuring Package Integrity and Stability using Vitest

How to deploy to a private NPM repository?

How to npm install a private package within a CI/CD pipeline?

By exploring these points, we will delve into the challenges we faced and the solutions we adopted. We will also demonstrate the step-by-step process of streamlining NPM private package development using the powerful Vite framework. By the end of this article, you'll have the knowledge and tools to create robust and reusable packages tailored to your organization's specific needs.

Our setup is using Vite 4 and Node 16. This is our main barebone for the project’s structure.

When choosing a package name if you wanted to use major package repo registries such as GitHub and NPM, you need to comply with their naming scheme: @organization_name/project_name

This naming scheme using @ prefix is meant for a scoped package, meaning that it is scoped for an organization or certain bundle.

If you use the default NPM registry, you can drop the @organization_name prefix if your package is public.

The reason is to prevent the same project name from clashing with other users. But for public NPM packages, because it’s for open-source sake it is allowed to use without prefixes.

Discover the streamlined process of creating NPM packages for internal use using the powerful Vite framework. This comprehensive guide covers everything from setting up an NPM project to deploying it to a private repository.