Creators gravitate to a visual development environment like Webflow from both the design side & the development side, & those backgrounds tend to heavily influence how users use the tool. Do they err toward augmenting the build with custom code? Do they adjust their designs to the accommodate the native limitations of Webflow? I've seen builds that are so stripped down that they lose all usefulness to the user. And I've seen builds that are so complicated that the client loses the ability to easily update the site through visual editor. (These builds likely weren't a good fit for Webflow as a platform from the start.) Heck, I've even made some of these suboptimal builds myself. But over the course of many years of development, I've found a sweet spot that tends to work best for augmenting Webflow, augmenting the platform's cabilities without compromising it's usefulness as an editor.

Webflow Tips N' Tricks is my attempt to document some best-practice solutions to common problems with Webflow development.

This project began with a CMS-driven map component. There are a number of example projects that exist, but most of them were missing key functionality. Anna Sabina's approach, however, was very close to what I wanted: a CMS-driven solution that can launch a pin's info window from the location list. After adding some functionality (responsive map zooming/positioning based on bounding coordinates, map theming, location categorization, & a few default settings related to map controls & scroll behavior) & applying some styling (a sticky solution for mobile viewports so that the map & the locations are together on the screen at all times), it was good to go.

Critically, pins can be added & removed through the CMS. Locations can be re-ordered. Pin info windows can be updated with custom descriptions. And so the only reason to revisit the Javascript is to re-adjust the bounding coordinates. This allows clients to update asynchronously through the Editor & to have full control to evolve their map over time.

That the project was built on Knockout was a point of emphasis for me, as any user cloning the project would also clone the framework. But I also added thorough documentation so that the solution can be implemented into existing projects or from scratch.

The second project was a quick-view modal that combined Webflow's native interactions & ajax to display a modal & populate it with data from an item's collection page. This relies on Webflow's native functionality where possible, & is only augmented with javascript where necessary. This allows the modal engagement & disengagement animations to be fully customized without touching any code.

The third project was a simple mobile optimization. Instead of stacking sibling cards, the script uses Slick Slider to turn them into a swipable slider. This reduces scroll time on mobile, making the page more scannable & increasing the visibility of content lower on the page.

As this repository continues to grow, I hope to continue articulating best-practices around Webflow augmentation. And as the no code space matures, to articulate the ways in which it's not a one-size-fits-all solution, & in which situations a coded platform may be a better choice.