Code + AI + Webflow
A primer on using ChatGPT as a "code assistant" in tandem with your Webflow build environments.
Introduction
The brief ins and outs of using code in your Webflow projects.
Javascript and CSS in your Webflow builds
How many have used custom code in a project before? What for?
Webflow native has limits– clients don't
How many times have you felt stuck when using custom code in your projects? Why?
Enhancing build functionality– simply
Who benefits? Client/their audience, community, and platform (if we do it right)
Benefits
This list is not exclusive and we'll touch on more later.
Extending limitations
We are, after all, building with the fundamentals of the web. HTML/CSS/JS
Empowered workflows
The more we work with these tools the faster and more efficient we become. We hit points of frustration or time commitment and naturally optimize.
Improving technical understanding
We learn by doing and exploring. If used as a sidekick AI tools like ChatGPT can help us advance faster.
More opportunity
The more problems we can solve with our skillsets the more opportunities there are available to us.
Words of warning
It's really a wonderful thing that we now have tools that can help us do some of the things that I'll share today, but beware it's not without shortcomings and limitations.
Performance
JavaScript has a vast set of capabilities inbuilt and by extension with libraries. Often the code that AI outputs, tho valid and functional isn't the most performant.
Scale
Currently ChatGPT is hampered by its environment. It cannot interpret and work with extremely large datasets or code bases. There are folks actively working on this!
Security
Most things we as Webflowers will likely use ChatGPT will remain unaffected by security concerns, but if you're working with secure information like API's etc. The tool isn't an excuse to throw caution to the wind.
Some problems solved
I've used Github Copilot and ChatGPT to do some elaborate and now routine-ish things in my builds. And I've also done some things, that in hindsight I'm not the most proud of.
Moving DOM elements
From here to there and from there to here. Putting things inside tab lists and the like.
Add / remove / and toggle classes on elements
Give users control of layouts, toggle visibility of elements when interacting, etc.
Conditional visibility and CMS template sections
When a collection list inside a section is empty– hide the entire section.
Write CSS when my brains gone rummy
When the days run long and the l cannot remember appropriate syntax.
Add a count to CMS items
Associate a number with each CMS item in a Collection List.
Form handling fun
Overcome Webflow native form handling
The client favorite: the marquee
A common sight in todays web and notoriously– an annoyance. With one routine pitfall.
Example 1:
Common static implementation
Minerva Daugherty
Moshe Little
Fernando Schumm
Akeem Boyle
Tina Schultz
Minerva Daugherty
Moshe Little
Fernando Schumm
Akeem Boyle
Tina Schultz
Example 2:
Static implementation with one component
Minerva Daugherty
Moshe Little
Fernando Schumm
Akeem Boyle
Tina Schultz
Minerva Daugherty
Moshe Little
Fernando Schumm
Akeem Boyle
Tina Schultz
The Challenges: Dynamic++
Minerva Daugherty
Fernando Schumm
Akeem Boyle
Moshe Little
Tina Schultz
Minerva Daugherty
Fernando Schumm
Akeem Boyle
Moshe Little
Tina Schultz
Other great use cases
The magic doesn't end with simply writing code either.
Explain / comment code
Not only can we use AI tools to help us write code from the ground up but we can also use it to explain code to us that we may not have a full grasp on how it works.
Improve code and teach
As we encounter more opportunities to "write" code we better familiarize with aspects of JavaScript (the teaching/learning part) and we can see and ask for optimization and additional functionality like in the challenge we completed.
Interpret DOM structure
With smaller DOM structures you can actually work with both sides of the code writing equation inside of ChatGPT and give the tool more context for the code your writing.
And much much more...
Convert from jQuery --> Vanilla JavaScript, etc. What else?
The end. Thank you!
This demonstration will be made cloneable shortly, and please do stay on the lookout for more content related to this and much more from me. Also feel free to contact me on Twitter @tonyseets