DEV Community: Everly Precia Suresh

🌐 Resource Preloading in HTML | One Byte Explainer

Everly Precia Suresh — Sat, 15 Jun 2024 06:09:49 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Resource preloading in HTML can be achieved using the <link> element with the rel attribute to hint at the browser about resources that will be needed soon. Fetching resources in advance improves load time and webpage performance.

Additional Context

Here are some options you may consider :

rel="preload": Actively fetch the resource and cache it, as needed for current navigation.
rel="prefetch": Fetch the resource in advance as it is needed for follow-up navigation.
rel="dns-prefetch": Perform DNS resolution for the resource for easy fetching later.
rel="preconnect": Perform a connection request to the resource and establish a connection for easy fetching later.
rel="prerender": Preload the resource in the background. However, one should note that this might negatively affect the user's bandwidth.

🌊 Beach Quest with Finley and Friends !

Everly Precia Suresh — Thu, 06 Jun 2024 16:00:37 +0000

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

What I Built

I developed Beach Quest with Finley and Friends, a visually stunning and interactive web app designed to showcase a list of beaches provided in the prompt. Being from a coastal city in India, I knew that static images wouldn't capture the true beauty of beaches, so I opted to use videos for the visuals. This led me to work closely with the HTML5 Video element and API.

I envisioned the website as a virtual tour. To achieve this, I synchronized background videos with the corresponding beach descriptions. This inspired another idea: adding tour guides for each beach. That's where Finley and his friends come in—they guide users through the beaches and share their pro tips, making the website more informative.

I built this website with a strong focus on accessibility, ensuring it is user-friendly for everyone. To enhance user experience, I included a navigation menu for easy jumping between sections, a progress bar with previous and next buttons, a loader to handle dynamic video loading, and responsiveness for all devices. Although I recommend visiting the website on a desktop to truly appreciate the visuals, it is also fully viewable on mobile devices.

Demo

Below, I have added screenshots of all the features I mentioned and provided the deployed URL and GitHub source code.

Landing screen with Tour Guide and CTA

Intro Screen with Progress Bar

Beach Screen with Background Video

Accessibility Navigation Menu

Responsiveness

Note: you'll only be able to see the loader if there is a delay in loading the video, if you have good internet speed, likely, you will not see it.

I have deployed the website on GitHub Pages : https://everly-gif.github.io/BeachQuest/

Source Code : https://github.com/everly-gif/BeachQuest

Journey

Building this wasn't as simple as I initially thought it would be. I faced numerous challenges throughout the process, especially since the rules strictly prohibited altering the markup directly. As a result, every interaction—from the tour guides and navigation bar to the buttons, loader, video element, video overlay and progress bar had to be added using pure JavaScript. Here below I write an overview of my journey.

Setup

My first challenge was to find freely available videos of the beaches listed in the prompt. After extensive internet searching, I discovered Pexels.com. I am incredibly grateful for this resource, as the freely available videos for most of the beaches allowed me to bring my vision to life. (Thank you, Pexels, all video credits to the rightful owners!)

Secondly, I needed a tour guide. I went through a lot of different character sets before I found Finley and friends. I found them on freepik.com(credits to rightful owners). With this, I was all set to dive into logic!

Development

At first, I began by directly injecting the additional HTML elements needed through JavaScript with the necessary classes and attributes. I then also modified the existing markup through javascript with the necessary attributes.

Progress Bar

I used an event listener, click, to handle the previous and next functionality. I added a data-index attribute for easy looping between sections. Later, using the linear-gradient CSS property, I dynamically updated the bar color in JavaScript.

Beaches, Background Videos, Tour Guides, and Speech Bubbles

I maintained data in an array structure for easy looping. The previously injected data-index attribute facilitated easy retrieval of the index, allowing me to set the correct background video, tour guide, appropriate speech bubbles, and beach description for each view. I achieved this by toggling between the display:none and block/flex properties.

I extracted all the data from the markup and appended it to another separate div, menu-items. Since the navigation menu was a separate view from the existing markup, I gave each item a data-slide attribute to indicate which section to jump to when clicked. I achieved this by toggling between the display: none and block/flex properties.

Responsiveness and Other Styling

I wrote a substantial amount of CSS to center-align the text on top of the background videos. I used properties such as position, z-index, keyframes and display throughout the website. Focusing on user-friendliness, I wrote media queries to ensure that the website looks great on all devices. The videos I used are dimensioned to support desktop viewing, so for mobile, I used the min-height and min-width properties to avoid any white spaces.

Deployment

I was pretty happy with the development locally after working on it for quite a few days. It was time to take it to the next level!

GIF creds : Gifer

I first faced the file too large issue. That is when I realized my videos were huge. Locally, I never had an issue, so I hadn't considered the file size. I needed to optimize them to be able to push to GitHub. I used FreeConvert, an online video compressor tool that helped me to significantly reduce the video file size. I was then able to push my code and deploy it to GitHub Pages.

Later, I faced the grey screen issue while navigating the website using the prev and next buttons. This was happening because the video was taking time to load and set. Again, locally I never faced this issue; it only occurred after deployment. However, this severely affected the user experience of the website, so I had to address it. After much internet surfing, I found video attributes such as poster that could contain a loading image/gif URL, which would be displayed before the video loads. But I wasn't really happy with what I was able to achieve with it. So the research continued.

I came across event listeners loadstart and canplaythrough, which then simplified my issue. I decided to toggle between the display: none and display: flex properties based on these event listeners on a custom loader. I used a wave loader gif from LottieFiles, centered it on a div with a custom background color, and used it as my loading screen.

What I learned and What I am proud of

It was great to challenge myself to think outside the box and pick up a front-end challenge. It's been a good amount of time since I worked with plain JS, HTML, and CSS. So, this challenge was a nice re-brushup on those skills.

I'm particularly proud that I was able to bring this vision to life despite the challenges I faced especially during deployment and finding assets.

Websites like StackOverflow and w3schools were also a huge help in resolving my blockers.

Introducing $createdAt And $updatedAt On Each Resource

Everly Precia Suresh — Tue, 28 Jun 2022 18:01:16 +0000

Appwrite is an open-source backend-as-a-service that abstracts all the complexity involved in building a modern application by providing you with a set of REST APIs for your core backend needs. Appwrite handles user authentication and authorization, real-time databases, cloud functions, webhooks, and much more!

In our latest 0.15 release, we introduced many exciting new features, one among them is the addition of two new timestamp attributes $createdAt and $updatedAt 🥳. We’ll talk about what one can do with it in this blog.

👀 What’s New

From 0.15, you should be able to see two newly added attributes to your resources. You can simply check this in the console by clicking on the document's View as JSON option. Navigate to Databases -> [Your database] -> [Your collection] -> [Any document] and on the right side you should see an option to view as JSON. Clicking on that will reveal the newly added attributes.

As the name suggests, $createdAt will hold the time the resource was created and $updatedAt will hold the latest time the resource was last modified, both in UNIX time format in seconds. These newly added attributes give more flexibility to developers and make the implementation of certain use cases fairly simple. Let's take a look at how! 😎

🧠 Use Cases

1) ⚡ Sorting Documents

One of the use cases is the ability to sort documents based on the latest/oldest. This is ideal in a chat application.

If you want to sort by latest, you can simply use the newly added attributes as an order parameter:


import { Databases } from "appwrite";

const databases = new Databases(client, '[DATABASE_ID]'); // client should be Appwrite Client

const documents = await databases.listDocuments(
  '[COLLECTION_ID]',
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  ['$createdAt'],
  ['DESC'],
);

This will pull in the list of documents created and ordered by the latest.

2) 🕒 Displaying Time Information

In a blog application, you would want to display the time at which the blog was posted. Another example could be a Q/A forum application where you would also be interested in displaying when the content was last updated.

You can do that by printing a date from a timestamp coming from Appwrite:


import { Databases } from "appwrite";

const databases = new Databases(client, '[DATABASE_ID]'); // client should be Appwrite Client

const document = await database.getDocument('[COLLECTION_ID]', '[DOCUMENT_ID]');

const created = new Date(document.$createdAt * 1000); // Date class expects milliseconds
const updated = new Date(document.$updatedAt * 1000);

console.log(`Document was created on ${created.toGMTString()}, and last updated on ${updated.toGMTString()}.`);

3) 🤖 Querying Documents

The newly added attributes can be used with the Query API as well, If you want to only list the documents that were created in the last 7 days under the “latest” tab of your application, you can simply do that by using $createdAt in a query:


import { Databases, Query } from "appwrite";

const databases = new Databases(client, '[DATABASE_ID]'); // client should be Appwrite Client

const lastWeekTimestamp = Date.now() - 604800000;

const documents = await databases.listDocuments(
  '[COLLECTION_ID]',
  [ Query.greaterEqual('$createdAt', lastWeekTimestamp) ]
);

This will pull in the documents created in the last 7 days.

The above are some of the basic ways the attributes can be utilized. Earlier this would have only been possible with cloud functions making it a little complicated to implement but thanks to the latest release 🥳, it has made such use cases accessible. It now depends on the developers on how they want to utilize the attributes. In general, these attributes are useful to audit system data, order data, query data, and display time information.

With this, we come to an end 🤩. If you have a project to share, need help, or simply want to become a part of the Appwrite community, I would love for you to join the official Appwrite Discord server.

📚 Learn more

You can use the following resources to learn more and get help:

Appwrite Storage Meets Backblaze B2

Everly Precia Suresh — Tue, 24 May 2022 15:07:38 +0000

One of the core functionalities of Appwrite is Appwrite Storage. It permits you to upload, view, download, and query your project files. Appwrite Storage not only takes care of encryption, compression and antivirus scans, it’s also built on top of Appwrite’s flexible, yet simple permission system. Appwrite lets you store any files such as text documents, icons, images, videos, and more.

Recently, Appwrite introduced support for Backblaze as a storage adapter, allowing you to use Appwrite while not having to worry about your storage running out!

💻 Backblaze B2 Setup

We’ll first need to set up our bucket and get some credentials before we can start using Backblaze storage with Appwrite.

1) Sign up for a Backblaze account and ensure B2 Cloud Storage service is enabled under Enabled Products in your account settings.

2) On the left navigation, you should see the products and their navigation display. Select the Buckets option from the navigation menu.

Navigating to Buckets will give you the option to create a bucket and configure it.

3) Once you have your bucket created and configured, you can now go ahead and create your application key and key IDs. To create your application key and key ID navigate to Account > App Keys from the left navigation.

Scroll down past the master key section to create a new application key.(Please note that you should not be creating a master key)

This will give you your keyID and applicationKey which we will later use to connect Appwrite with Backblaze.

4) You will also need to get your region for the integration. You will be able to get your region details easily from your s3 endpoint which can be found on your Buckets page.

The format of endpoints for the Backblaze S3 Compatible API looks as follows:

s3.<region>.backblazeb2.com

Hence, the region for the bucket backblaze-demo is us-west-004. Similarly, you can get your region from your bucket’s endpoint.

With this we conclude the initial setup 💪 and now we will proceed to connect Backblaze B2 storage with Appwrite.

🚀 Appwrite + Backblaze B2

Before you start, make sure that you have your Appwrite instance up and running. Installation of Appwrite is as simple as running one command:

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:latest

To learn more about the installation process, you can check out our installation guide.

We can now start configuring our .env file to integrate Backblaze B2 with Appwrite.

Here are some pointers before we start editing our .env file.

1) _APP_STORAGE_DEVICE_BACKBLAZE_ACCESS_KEY will hold your keyID from the Backblaze console.

2) _APP_STORAGE_DEVICE_BACKBLAZE_SECRET will hold your applicationKey from the Backblaze console.

As a first step, navigate to _APP_STORAGE_DEVICE in the .env file and change it from Local (default) to Backblaze. This tells the Appwrite server to use Backblaze as the storage adapter and to expect Backblaze credentials in the other environment variables.

You will also need to edit the following .env variables to get Appwrite connected with Backblaze.

_APP_STORAGE_DEVICE=Backblaze
_APP_STORAGE_DEVICE_BACKBLAZE_BUCKET=your bucket name
_APP_STORAGE_DEVICE_BACKBLAZE_REGION=region
_APP_STORAGE_DEVICE_BACKBLAZE_SECRET=your application key
_APP_STORAGE_DEVICE_BACKBLAZE_ACCESS_KEY=your key id

After editing your .env file, you will need to restart Appwrite. This can be easily done by running the following command.

docker-compose up -d

Once Appwrite has restarted, create a new account and a new project. In the left menu, select ‘Storage’ and create a new bucket. Finally, upload a file into your bucket. You should see your uploaded files in the Backblaze console as well.

👨‍🎓 Conclusion

With the newly released provider system for Appwrite Storage service, you can now connect Appwrite with external storage providers instead of storing the files on your system. This prevents exhausting hard drive and bandwidth limits, as well as lets you use your favorite provider alongside Appwrite. And as you have seen in the tutorial above, you can easily connect Appwrite with Backblaze B2 in just a few steps!

If you have a project to share, need help, or simply want to become a part of the Appwrite community, I would love for you to join the official Appwrite Discord server. I can’t wait to see what you build!

📚 Learn more

You can use the following resources to learn more and get help:

Appwrite Storage Meets Wasabi Cloud Storage

Everly Precia Suresh — Mon, 23 May 2022 17:36:05 +0000

Recently, Appwrite introduced support for Wasabi as a storage adapter, allowing you to use Appwrite while not having to worry about your storage running out!

💻 Wasabi Cloud Storage Setup

To get started we’ll first need to set up our bucket and get our credentials before we can start using Wasabi Cloud storage with Appwrite.

1) Sign up for a Wasabi account and navigate to the Buckets menu in your Wasabi console to create a bucket.

2) Once you have your bucket created and configured, you can now go ahead and create your access key and secret. You will be able to do this by navigating to the Access Keys tab present in the left-side navigation.

This will give you your access key and secret which we will later use to connect Appwrite with Wasabi.

3) You will also need to get your region for the integration. You would have selected your region when you created your bucket. Here, The region for the bucket we created is eu-central-1.

Hence, With this we conclude the initial setup 💪 and now we will proceed to connect Wasabi Cloud storage with Appwrite.

🚀 Appwrite + Wasabi Cloud Storage

Before you start, make sure that you have the Appwrite instance up and running. Installation of Appwrite is as simple as running one command:

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:latest

To learn more about the installation process, you can check out our installation guide.

We can now start configuring the .env file to integrate Wasabi Cloud storage with Appwrite.

As a first step, navigate to _APP_STORAGE_DEVICE in the .env file and change it from Local (default) to Wasabi. This tells the Appwrite server to use Wasabi as the storage adapter and to expect Wasabi credentials in the other environment variables.

You will also need to edit the following .env variables to get Appwrite connected with Wasabi.

_APP_STORAGE_DEVICE=Wasabi
_APP_STORAGE_DEVICE_WASABI_BUCKET=your bucket name
_APP_STORAGE_DEVICE_WASABI_REGION=region
_APP_STORAGE_DEVICE_WASABI_SECRET=your secret
_APP_STORAGE_DEVICE_WASABI_ACCESS_KEY=your access key

After editing your .env file, you will need to restart Appwrite. This can be easily done by running the following command.

docker-compose up -d

Once Appwrite has restarted, create a new account and a new project. In the left menu, select Storage and create a new bucket. Finally, upload a file into your bucket. You should see your uploaded files in the Wasabi console as well.

👨‍🎓 Conclusion

📚 Learn more

You can use the following resources to learn more and get help:

Appwrite Storage Meets Linode Object Storage

Everly Precia Suresh — Sat, 14 May 2022 05:16:47 +0000

Recently, Appwrite introduced support for Linode as a storage adapter, allowing you to use Appwrite while not having to worry about your storage running out!

💻 Linode Object Storage Setup

To get started we’ll first need to set up our bucket and get our credentials before we can start using Linode Object Storage with Appwrite.

1.Sign up for a Linode account and navigate to Object storage in your Linode console to create a bucket.

2.Once you have your bucket created and configured, you can now go ahead and create your access key and secret. You will be able to do this by navigating to the Access Keys tab present in the Object storage console.

This will give you your access key and secret which we will later use to connect Appwrite with Linode.

3.You will also need to get your region for the integration which you would have chosen when you created your bucket. However, if you can’t remember, your region can be easily found from the endpoint displayed under your bucket.

The format of endpoints for Linode Object Storage looks as follows:

<bucket_name>.<region>.linodeobjects.com

Hence, the region for the bucket we created here is eu-central-1. Similarly, you can get your region from your endpoint.

With this we conclude the initial setup 💪 and now we will proceed to connect Linode Object Storage with Appwrite.

🚀 Appwrite + Linode Object Storage

Before you start, make sure that you have your Appwrite instance up and running. Installation of Appwrite is as simple as running one command:

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:latest

To learn more about the installation process, you can check out our installation guide.

We can now start configuring the .env file to integrate Linode Object Storage with Appwrite.

As a first step, navigate to _APP_STORAGE_DEVICE in the .env file and change it from Local (default) to Linode. This tells the Appwrite server to use Linode as the storage adapter and to expect Linode credentials in the other environment variables.

You will also need to edit the following .env variables to get Appwrite connected with Linode.

_APP_STORAGE_DEVICE=Linode
_APP_STORAGE_DEVICE_LINODE_BUCKET=your bucket name
_APP_STORAGE_DEVICE_LINODE_REGION= region
_APP_STORAGE_DEVICE_LINODE_SECRET= your secret
_APP_STORAGE_DEVICE_LINODE_ACCESS_KEY=your access key

After editing your .env file, you will need to restart Appwrite. This can be easily done by running the following command.

docker-compose up -d

👨‍🎓 Conclusion

📚 Learn more

You can use the following resources to learn more and get help: