Traffic Light for Webflow

Website in which the integration was added to, updated on September 4, 2020 at 12:39 AM
Sample photo of the code to be embedded as shown on makers-day-entry.webflow.io

Inspiration

Traffic Light for Webflow Add-On was inspired by the increase in remote working positions and the importance of an internet connection. With millions working from home, the fate of a job well done was held in the hands of download speeds. When I saw this problem, I realized there was a solution; a Webflow addon that would scale websites to the personal devices' individual needs, rather than through a server. This caused the creation of Traffic Light for Webflow, a local website scalability engine that allows for scaled website use.

What it does

Traffic Light for Webflow Add-On analyzes the current internet connection and speed of a device to create a queue of web query requests. Traffic Light then uses connection data to determine whether to place a hold on beginning the website's loading sequence, then waits for the proper internet connection to be established, and loads the page, all in blazing fast speeds.

How I built it

Creating Traffic Light for Webflow was a task that was not taken lightly. To find a way to integrate Traffic Light into countless Webflow sites efficiently, I decided upon creating an embeddable Webflow add-on to allow easy scalability to any website. This was done by creating a javascript evaluation tool to determine the download speed in kilobytes for a given website. Next, using workflow evaluation tools and ranges, I was able to add control to the website by allowing the Traffic Light add-on to manage page load times efficiently. ## Challenges I ran into Creating Traffic Light for Webflow was no easy task, and I ran into countless obstacles creating the add-on. Those included re-introducing PHP scripts' principles as javascript principles to make them embeddable without using a server. Additionally, I ran into the obstacle of containing the file size so that it would not put a strain on the wbepages' performance.

Accomplishments that I'm proud of

In creating Traffic Light for Webflow, I was proud to see how much I accomplished in such a short period. One of the accomplishments I am most proud of was creating the add-on to be lightweight and practical.

What I learned

Through participating in the Webflow Makers Day, I learned new skills in HTML and Javascript, as well as the importance of integrating add-ons to a webpage.

What's next for Traffic Light for Webflow

Shortly, I hope to continue to embellish and formally publish Traffic Light for Webflow and provide it to all developers and web designers to offer scalable websites.