Forem: Abhinav Chawla

Personal Portfolio: Final Submission

Abhinav Chawla — Fri, 08 Jan 2021 15:48:58 +0000

What I built

Howdy, I hereby submit my personal portfolio as part of the DO Hackathon. I have tried my best to add a level of uniqueness and excitement to the project. As a part of the series, I have shared my inspiration, thought process behind the design and the grind to develop it up.

I didn't want to build yet another website; rather an experience.

Hope you enjoy it!

Category Submission: Personal Portfolio

App Link: https://abhinavchawla.com

Deployed on DigitalOcean (direct link)

Screenshots (and videos)

Desktop (Larger screens)
Screenshot: Desktop

Video Demo: Desktop

Mobile (Smaller screens) [Stripped down]

Screenshot: Mobile

Video Demo: Mobile

Description

The portfolio is represented by a floating island with the landscape of a town marked down by some of the significant events of my life. I tried to gamify the website (a bit) and I hope the 🚗 shows you around my town! Feel free to click around on different items on the map to learn more about the corresponding events.

On a side note, since the website is asset and animation heavy, I built out a stripped out version for mobile screens and adjusted it to work only in landscape mode because of the layout. I have tested on only a couple of phones that I had access to, but can't promise the responsiveness throughout the spectrum of mobile sizes these days. Something that I'll be looking next few days after the hackathon ends.

Link to Source Code

abhinavchawla13 / abhinavchawla.com

This project is my personal portfolio!

My Personal Portfolio: abhinavchawla.com

Deployment

Deployed off the master branch at abhinavchawla.com via DigitalOcean (direct DO link)

You can easily spin up a copy of the project using the deploy button below 🚀

Sneak peek

Desktop (Primary channel)

Mobile (Stripped down)

Project setup

Install dependencies

Make sure you have Node.js (v12+, npm v6+) installed

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

View on GitHub

Permissive License

MIT License

Background

My first post of the series talked about what inspired me to for this design, so I'll refrain from repeating it all again.
TL;DR: My childhood favourite FarmVille inspired me!

As I mentioned above, I was pretty fixated that whenever I'll build my digital portfolio, I would make it a fun experience. And so I started this journey ideating, designing, and developing the project.

How I built it

I had mostly used Heroku and Firebase for different applications, and always wanted to try out DigitalOcean, but never got a chance to do so. Thanks to the credits, I set up my account and added a basic .do/deploy.template.yaml file and the "Deploy to DO" button in my Vue project:

spec:
  name: abhinavchawla
  services:
  - build_command: npm build
    environment_slug: node-js
    git:
      branch: master
      repo_clone_url: https://github.com/abhinavchawla13/abhinavchawla.com.git
    name: abhinavchawla

It took some trial and error to get it right, but thanks to the documentation (and old friend Google), I was able to get it right and deploy the app fairly quickly.
Lastly, I have had the domain abhinavchawla.com for a few years (bought through Namecheap), so I connected it with my DO app.

Also, it was my first time working heavily with animations on a website, more importantly, ensuring these animations work well on a responsive webpage. Huge shoutouts to the GSAP library for handling most of the leg work and optimization of the animations.

Additional Resources/Info

Setting up Vue + GSAP
Tool for image mapping
Resize image mapping for responsive webpages
Vue image loader
Mapita 3D map elements set

Final Words

I wish everyone a Happy New Year 2021 and good health considering the pandemic world we're living in. Feel free to reach out to me if you have any questions or just for a friendly introduction, what better time to meet new people online 😃

Lastly, I would really appreciate any suggestions or feedback you may have 💛

Personal Portfolio: Dev

Abhinav Chawla — Wed, 06 Jan 2021 20:43:54 +0000

Let's talk some tech, finally.

The last two posts revolved around the inspiration and design for the website, and I'll get deeper into some of the development challenges I met (and conquered!), and more importantly some pitfalls I fell into.

Stack: What framework did I use?

Answer: Vue

True story: I created a Vue project, deleted it thinking it's overkill for this single page application. Create a new frame-less project. Realized my mistake. Re-created a new Vue project again. And I'm so glad I went back to Vue.

What I initially thought could just be a single large index.html file, Vue ensured me that I build modular components and give a proper structure to my codebase, which essentially became significant to manage the different layers and animations I'd decided to add to the portfolio.

Animations

The vision that I had with this project involved a lot of animations. And I wanted to work with a library that is proven to be fast, efficient, and small enough. But first, I tried to use the basic CSS animations. It started well, was happy for some time before I accidentally tested the webpage on a Macbook (was originally working on my Windows machine).

Example of the initial animations [Low FPS gif]

While the basic CSS transitions were working fine on my PC, they were slightly lagging on the Mac Chrome browser. Considering, these were just a couple of the animations, I decided to try out a library called GSAP that I had read about previously. I integrated it with my Vue project and replicated the animations with it.

It worked flawlessly.

Image Mapping

As you might have seen in my previous post, I had designed a floating island. The island had two distinct features:

Floatation: The island had an inherent pulse-animation moving a few pixels up and down. Also, I added a subtle sideways animation on cursor movements over the x-axis.
Clickable events: There were multiple objects clickable on the island, that can be seen with a yellow glow. This is where things get tricky.

Exemplifying effects discussed in (1) [Low FPS gif]

Let's discuss the second point in more detail. My initial idea was to superimpose individual images for all the events on top of the island image, so it's easier to add an animated glow (unlike the current static glow) and add clickable events. While this sounded reasonable, it ended up being a headache as the island size isn't constant; it's responsive to the size of the screen. Hence, sizing and positioning the individual smaller images relative to the main island were too much of a hassle.

Looking for an alternate, I came across HTML Image Maps; to be honest, I had no idea this feature existed, and it was going to make my life a lot easier. Fortunately, I found a great onlne tool to help me draw down the area boundaries for my map.

image-map.net tool

So, all good, I guessed? Well, not really. Image maps work well with absolute fixed-size images but don't resize relatively when the original image's size changes as in my case. After digging around Stackoverflow and trying multiple solutions, hope seemed grim. Until, I found this magical package image-map which somehow integrated with Vue and automatically readjusted all the area boundaries as the screen size changed. Seriously, this package saved me. 🙏

Loading

Since this website loads a lot of different assets, I wanted to add a loader (and no, lazy-loading wasn't the solution for this case). So, I need a loader to incrementally progress based on all the assets commutatively. Adding an individual event on each asset seemed like overworking. Another sweet package to the rescue - vue-images-loaded; it ran a listener for all the images being downloaded and I could figure out the progress for the loader, and therefore when to close it and show the main content without worrying about assets not being loaded properly.

Loading animation [Low FPS gif]

That's all for now, I'll be showcasing the final project in the next post. So, stay tuned for it! Feel free to ask any questions you may have about the development process 🤓

Personal Portfolio: Design

Abhinav Chawla — Tue, 05 Jan 2021 16:56:59 +0000

As I mentioned in the previous post, I decided to take inspiration from Farmville and started building out my own city.

Phase 1

One cold-Canadian Saturday morning, I sat down and started laying down the ground for my town, literally, well on Photoshop! I decided to create a map with multiple clickable objects which when clicked, will give you more information about that event associated with my life. After hours and hours, I finally had something planned out.

Friendly note: Please remember to save your Photoshop files at fixed intervals, randomly my laptop decided to die and Photoshop's autosaved feature bailed on me!

Phase 2

After adding 100s of layers on photoshop for individual map objects, I felt accomplished. I could see my vision of the town coming to life. My first thoughts were to ensure the town covers the entire visible screen of the webpage. While that looked good, I gave myself a couple of days to try to think if I can come up with something else; something even better. I took some time to view further design sources until I stumbled on the idea of a floating island.

What if my entire webpage is covered with an end-to-end image of my town, but it contains a floating island with my town on it? I thought to give it a shot. So, I designed a floating island.

Phase 3

Now, it was time to take the town created in Phase 1, to be put on to this island. This seemed simple at first, but it took me some time to weed out the unnecessary layers I had and add minor adjustments to mark it complete.

Phase 4

Lastly, I needed to highlight the items that would be clickable by the user. I came back to this after I had started working on the development of the webpage. I initially had thought of adding an animation around the building, but because a responsive webpage makes it tough, a lot tougher, to handle image resizing, I decided to have a static glow around these items on the map. Finally, I had this:

Phase 5 (Let's keep it a secret, for now)

I hope this post gives you a sneak peek into my island-town, but you may ask, how does the final website look? There's some more design to it, but I'll save the final sauce for the submission post. 😉

See you soon!

Personal Portfolio: Inspiration

Abhinav Chawla — Mon, 04 Jan 2021 18:12:32 +0000

I think it's been more than a year or so that I wished I had time to work on my personal website. I would always end up taking up other side projects, pushing back this personal project always on the back of my list. While the year 2020 was coming to end, I had almost wrapped around most of my projects and the DigitalOcean hackathon announcement gave me the final jolt to go ahead with building my portfolio application.

Inspiration

Though I'm a developer by profession, I have a strong inclination towards design. I'm always on the lookout for interesting and innovative UIs. I won't lie, I had thought about a lot of designs over the past few months whenever I would imagine working on this project, but now I had to actually make a call. Decide a design, and get going with it. And so did I start working on it.

It would be unfair to not mention the brilliant resources and ideas shared by designers all across the globe on Pinterest, Dribble, Awwwards and multiple Instagram channels.

What did I decide?

After a lot of contemplation (by a lot, I mean a lot 😅), I questioned myself what if I built a city for myself. Does anyone remember FarmVille game? I do remember being addicted to it at a certain point, maybe a decade ago! So I thought why not to draw inspiration from the age-old classic, and built something similar (of course, with much fewer complications - or well, so I thought so).

For those who have never played Farmville, this was the original design before it got all fancy.

FarmVille by Zyanga

How do I build it?

So, even before going to the technical dilemma, I faced the challenge of how to design this city of mine. Even after I build my city, how do you I build a webpage out of it? So, lots of questions had to be answered, and I sat down with my old pal, Adobe Photoshop, and started to draw some ideas into artboards. Found this really awesome Mapita map builder which helped me layout my town.

On the technical side, I was faced with the question of whether to build it out with Vanilla JS or use some framework. After a lot of back-and-forths, I ended up using Vue. I envisioned a decent amount of animations, and basic CSS transitions weren't being very friendly on different browsers, so I ended up exploring this library called GSAP; and it's just great!

I promise to share some of the designs that I have been working on in the next post so you start getting a picture of what I have been working on in the past three weeks. Till then, take care everyone.

GitHub: Monetize documentation

Abhinav Chawla — Wed, 03 Jun 2020 02:35:27 +0000

(Update: June 4, 12:17pm: There was an error for users trying to sign in for the first time, which has been fixed and pushed!)

What I built

"We have met the enemy, and it is us." - Walt Kelly

As a fellow developer, I think I would need to go out of my way to explain the importance of proper documentation to everyone in the community. We all know that source code itself is not a substitute to a readable and easy to understand documentation. Nonetheless, a lot of developers choose not to spend enough time to write proper supporting documentation for the projects (We all have gone through times where going through the source code isn't fun 😅).

To incentivize the developers, I decided to web-monetize README.md documentation on GitHub. I hope it becomes a stepping stone to help the community to invest time into writing documentations and show support for each other's work!

Demo

Step 1: Sign in with your GitHub

I implemented GitHub OAuth enabling users to simply sign in with their GitHub account.

Step 2: Add your wallet pointer and connect a repository

Once logged in, you can easily add (or update) your wallet pointer. After you have done so, you can connect any repository(s), public or private, within your GitHub account. This will automatically create a documentation link (unpublished initially)

Step 3: Add documentation and publish it

This is the exciting part! I built a markdown editor and you can use it to edit your documentation here and save it. Once you publish it, the GitHub repository will have an updated README file with monetized label (named it Documento) and link to the documentation.
Further, once you unpublish the documentation, the GitHub README will be updated with the documentation you have saved on the application.

Step 4: Your web monetized documentation is good to go!

This documentation link in the README is web monetized with the wallet pointer you added in step 2. Users without an enabled Coil browser would not be able to view it.

Link to demo

FYI: Since the backend is hosted on the free-tier of Heroku, it goes off to sleep after every 30 minutes of inactivity. The first time you sign in, it may take 8-12 seconds to load, since the server has to wake up before responding. (Sorry about that!)

https://github-monetize.web.app/

I created a dummy GitHub account for users who do not have a GitHub account or maybe do not want to share access to the application.
Username: dummy-cntrl
Password: Dummy#12

(Update: I received few verification emails for this GitHub account for verification codes, so you may not be able to log in without them. In that case, I'll recommend you to use your personal GitHub account!)

Sample repository with monetized documentation

dummy-cntrl / test-01

Here's the direct documentation link

Here's the code

Web UI

abhinavchawla13 / github-monetize-ui

Backend API

abhinavchawla13 / github-monetize-api

I have not monetized the documentations for these GitHub repos so anyone can have a look at them

How I built it

I used Node.js with Express framework to develop my backend API. On the database side, I deployed a MongoDB instance on Atlas. The backend is auto-deployed on Heroku free-dyno right now.

I used Firebase authentication to manage user logging on the admin portal. For GitHub, I connected via GitHub OAuth authorization application and used GitHub API v3 to access user repositories.

For the UI, I decided to use Vue.js. I recently started using the Vue framework, and I'm lovin' it! Besides this, I also did my debut run with Tailwind CSS and I'm impressed again! Overall, great two new tools in my UI toolkit.

Some hurdles (might get a bit too techy 🤐)

Being new to Vue, I had some issues setting up the meta tags with the monetization pointer. Since, I used the same host for each documentation link, I needed to dynamically update the meta tag with the pointer for the owner of the repository. In the end, I used the handy vue-meta plugin to help me resolve the issue.

I also had some issue when I tried to compile Tailwind CSS. Initially the CSS wasn't purging as expected, and later it was overriding the CSS for a notification library (vuejs-noty) I was using. Eventually I was able to fix it by adding whitelistPatterns inside the Tailwind configuration.

Finals thoughts

This was my first deep dive into the web monetization, and I can see it harnessing use into multiple web streams. Point being, this new payment standard seems promising and looking forward to interesting projects being build using it in the near future.

Lastly, let's save ourselves from the nightmares of reverse-engineering undocumented code 🙅‍♂️. Feel free to reach out if you have any concerns or want to collaborate on interesting projects in the future!

BeTheHope - Series Finale! [4]

Abhinav Chawla — Wed, 29 Apr 2020 21:04:02 +0000

Something about me: I like to discover and dissect everyday problems, and use my software background to come up with creative solutions. As I mentioned in my previous post, I came across multiple instances in my day-to-day life where donating money to organizations was a long and confusing process. BeTheHope is my effort towards trying to centralize and simplify the donation process.

Cumbersome donation processes paired with fickle minded millennials are a recipe for disaster.

In the world of contactless payments and instant money transfers, the online donation process is far behind. I developed BeTheHope to streamline the donation process, and tackle the problem of endless clicks and unclear processes, to easily get valuable donations from the donor to the recipient.

Here’s a video with the walkthrough of the project (I won’t deny, after spending sleepless nights over getting my final render, my first instinct was to end the video with ’Please like, share and subscribe to my channel’ 🏅)

BeTheHope creates short URLs and QR codes linked to customized donation campaigns, that are distributable via text, email, WhatsApp or social media posts, making one-click donations possible using Apple Pay and Google Pay.

As I discussed my love for numbers in my previous post, here’s a deck I put together with some fascinating stats which motivated me to build this solution.

A high quality copy of the deck is available here.

Demo Link

Important FYI: Since the backend is hosted on the free-tier of Heroku, it goes off to sleep after every 30 minutes of inactivity. The first time you open a link below, it may take 8-12 seconds to load, since the server has to wake up before responding. (Sorry about that!)

Donation Page: http://bth.fund/CAcares/covid

(this short url will automatically get redirected to https://bethehope.fund/CAcares/covid)

Note: I’m currently using a test key for Stripe, so you guys can try donating, and would not be charged. Apple Pay option will only show on Safari on any iOS device with Apple Pay enabled; likewise Google Pay will only show on Chrome.
You can try out a credit card payment with test card number: 4242-4242-4242-4242.

Admin Portal: https://admin.bethehope.fund/

Note: I have not opened signups for the public, as my private keys are tied to the backend APIs for Stripe and Twilio for now.

You can use the following credentials to explore the portal:
Username: admin@canadacares.com
Password: 123456
(Super secure password, I know, I know!)

Update: I have currently disabled the account to prevent exposing donor emails. If you want to explore the portal, please feel free to reach out to me, and I can help you with providing alternate access credentials.

Incase you have any questions or concerns, please feel free reach out to me at abhinavchawla13@gmail.com

Link to Code

The code might be private at some point in time, if you want to have a sneak-peak, feel free to reach out to me!
I split my code into three repositories to manage easy deployments, and created all three under a parent project (Github Organization): bethehope

What's the stack?

I used Node.js with Express framework to develop my backend API. On the database side, I deployed a MongoDB instance on Atlas. The backend is auto-deployed on Heroku free-dyno right now.

I used Firebase authentication to manage user logging on the admin portal. To handle the payments (donations), I opted to choose Stripe’s digital wallet and card payment APIs. And of course, I used Twilio to enable text, email and WhatsApp messaging 😉

On the UI side, I decided to use Angular 8. I didn’t have much experience with Angular 8, but I had previously worked on AngularJS and a bit on React, so I thought this would be a good project to learn it on the go. Oh well, I’ll say there’s a lot more to learn, and I will look further into optimizing my code. Both the UI repositories are manually deployed on Firebase Hosting.

Also, I bought both the domains (bth.fund, bethehope.fund) on Namecheap and handled the redirection from bth.fund to bethehope.fund using their cloudserver tools.

Some places where I felt a bit lost

Redirection between the URLs was tiring, and I wholeheartedly accept that DevOps isn’t me thing 😪. Nonetheless, Namecheap support was really helpful to get me setup. I still haven’t been able to apply a SSL certificate (https) on the bth.fund domain, which is automatically applied onto the bethehope.fund domain by Firebase hosting.

Also, enabling Apple Pay took some digging, since it required a developer key from Apple, a configuration file to be deployed, plus it only runs on SSL (so unfortunately can’t test it on localhost directly). I came across this handy tool for quick localhost deployments (with SSL): ngrok

Lastly, video editing is hard. Period. Tried ClipChamp, tried iMovie. Ended with using Adobe Premiere (and requiring a 1-hour tutorial on how to use it from a good friend). A quick shoutout to Animaker for the voice-over tool and Bensound for background music.

Final thoughts

As you probably noticed, I never shared code snippets or went too techie. This is only because I wanted to keep my posts user-friendly for everyone–dev community & the remaining happy souls on this planet (haha, just kidding!).

That said, I love talking about code, and I’m just a ping away for anyone who wants to discuss the code or any other aspect about this project. Also totally okay if you just want to say hello 👋! I’m always excited to meet new people and collaborate on different projects, and am definitely open to work on BeTheHope together to take this project across the borders into the global community.

BeTheHope - What did Data say? [3]

Abhinav Chawla — Tue, 28 Apr 2020 16:32:57 +0000

Hello again! In the past, there have been times when I had an idea, and I felt that this is it. This is my Eureka moment. In eagerness to start working on the project, I ended up forgetting to do some research to see if alternates exist or data supports my thesis. And well, I’ll just say that it ended up in a few disappointing endings.

Learning from these mistakes, over the past year, whenever I start a new project, I try to dig in some data to ensure that the idea brings something unique to the table, can be backed by data and it’s feasibility to reach the intended audience.

I ask myself, is it worth pulling all-nighters?

And with BeTheHope, it was a definite yes. First week, my brain was juggling around between a couple of ideas. Eventually, I let the data decide (so maybe I can call myself a data-driven person? 🤓). I had gathered enough data to convince myself to build a solution easing donations for everyone.

How’s the progress been so far?

Luckily, I’m almost done with the development, ahead of my schedule, so I decided to work on a couple of cool things to show my passion for the project. Firstly, since I had done the heavy load of digging some valuable data in the first week, I decided to prepare a deck with some numbers to show the importance of this solution. For now, here’s a quick peek (I’ll share the complete deck in the submission post):

Secondly, I never thought I'd be doing this, but since I have some time on my hands, I decided to try getting my hands dirty trying to edit a walkthrough demo video for the entire platform. To be honest, I basically realized how hard it is to edit videos (Salute to YouTubers!). Nonetheless, I’m super excited to complete it. If done right, I’ll be putting it into my hall of fame 😎

Before I leave, a quick update on the donations page (shared in first post) for the donors: As it is a mobile-first page, I re-designed the page to provide desktop viewers a similar experience as they would get on their mobile devices. Here it is:

I’m happy with the progress; hopefully I should be able to wrap things up soon and post my final submission by tomorrow 🤞. Until then, Happy Hackathon!

BeTheHope - Let's Campaign [2]

Abhinav Chawla — Sun, 26 Apr 2020 21:53:45 +0000

Happy Sunday! I hope you had a chance to go over my previous post, and it gave you an idea of how easy the donation process can be for donors.

In this post, I will give an overview of how Small Business Owners (SBOs), Charities and NGOs can leverage the BeTheHope admin portal to create campaigns, and share the short URLs and QR codes with the public.

So, what is a campaign?

The dictionary definition of campaign is, "work in an organized and active way toward a particular goal". Now, let me walk you through what a campaign means in this application. A campaign is a customized donation link. For instance, any organization can create a campaign for the education of underprivileged children in Canada. Simply put, the cause is the campaign.

The screenshot below gives us an overview of the campaigns created by the organization 'Care Canada'. The selected campaign has the campaign code 'summer', and it shows the URL and QR code which can easily be shared by the organization. This provides a convenient way for users to donate as we saw in the short video demo in the last post. Next to the campaign code, we see more information about the campaign such as the description, date of creation, and most importantly the donations collected to date.

It’s fairly easy to create a new campaign by clicking the ‘Create’ button on the top-right corner and filling out a couple of fields (which I’ll cover in a walkthrough video soon).

Sweet, how can I share it?

*drumroll*.. *drumroll*..
Answer is Twilio.

The dashboard has a 'Reach People' page which provides users the ability to add any campaign code they created before, list out phone numbers or emails and add a custom message. They can share it with others via text messages, emails or WhatsApp (or even better: all of them 😁).

And here’s a sample of the text, email and WhatsApp message you will receive respectively. The URL will take you to the same convenient donation page that you saw in the demo.

... and what should I do with the QR Code?

Share it via social media or add it to pamphlets, business cards and t-shirts! Leave no stones unturned to make your campaign as noticeable as possible!

My aim with this project is to make the donation process easier for both the donor and the donee. I’m glad that my vision is finally translating into reality and I will keep you posted on new updates. Till then, stay home and stay safe!

BeTheHope - First Glimpse [1]

Abhinav Chawla — Thu, 23 Apr 2020 17:46:44 +0000

Hey everyone, I’m Abhinav Chawla from Toronto, Canada. FYI: This is my first post here at DEV.to, and I won’t lie, I didn’t know about this platform before I came across this hackathon. So thanks to Twilio for bringing me here; I have been quite impressed with the community (somehow, I’m getting a strong feeling that I’ll be liking this over the ‘blue’ social platforms 😉)

So, what’s my project?

….Wait, wait. Before explaining my idea, let me tell you how I came up with it in the first place.

Story 1: It was my sister’s birthday back in January, and I decided to donate on her behalf. Once I started exploring options online, I realized that it took me an average of about 20 clicks before I could reach the “Donate” button (including finding the Call-to-Action button, account registration, personal information, payment details). If I’m in a mood to drop $25 from my pocket, you better take it ASAP before my brain forces me to buy a pizza (I’ll take pineapple on it, oops) with it.

Story 2: Before the social distancing laws came into effect, I noticed a friendly rally held by animal activists in Toronto. I approached a volunteer and asked them how I could donate. Since I didn’t have cash on me (btw, who still carries bills?), they handed me a website to go home and open and donate. And of course, that never happened!

Yeah, yeah, but what’s the idea?

Since then, I always thought what if donations could be quicker, even instantaneous as these decisions are impulsive; especially within the millennials. So, with all the motivation (hackathon’s push) needed, I decided to build out my solution. BeTheHope provides short URLs and QR codes, which can be distributed via texts, emails or social media providing an elegant user experience with an option of one-click payments integrated via Apple Pay and Google Pay.

Let me show you guys a quick glimpse (I promise I’ll share more soon), here’s the teaser:

How does it solve the problem? Well, I would finish donating by the time my brain wanders off and takes me to Dominos website. Plus, what if the volunteers at the rally wore a t-shirt with the QR code printed? Things could have been much simpler.

Lastly, I came up with the name BeTheHope for the project.

[Another FYI: I am a master procrastinator when it comes to writing blog posts, so sorry for not putting this up this sooner. Keep an eye for updates in the following days, before the final submission.]