Code + AI + Webflow

A primer on using ChatGPT as a "code assistant" in tandem with your Webflow build environments.

ButtonButton
Introduction

What, when, why.

How? A Challenge

 

Q&A
To Introduction

Introduction

The brief ins and outs of using code in your Webflow projects.

What?

Javascript and CSS in your Webflow builds

How many have used custom code in a project before? What for?

When?

Webflow native has limits– clients don't

How many times have you felt stuck when using custom code in your projects? Why?

Why?

Enhancing build functionality– simply

Who benefits? Client/their audience, community, and platform (if we do it right)

Significant benes

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.

Thumbs up because idk what else

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.

Oh no oh no oh no
Not an excuse

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.

Ooo la la
Oooooo

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

Dun dun dun - todays challenge
2 examples and 1 challenge

The client favorite: the marquee

A common sight in todays web and notoriously– an annoyance. With one routine pitfall.

Example 1:
Common static implementation

Buncha independent divs.
"I came for the Webflow, stayed for the friendship. Who knew geeks could be so cool? #WebflowPNW #BendOregon"

Minerva Daugherty

"I thought I was good at Webflow, until I met the pros at #WebflowPNW. My mind was blown by the creativity and talent in the room!"

Moshe Little

"From Bend, but never seen a community like this! #WebflowPNW taught me that the best way to learn is with friends and a beer in hand."

Fernando Schumm

"Learning Webflow has never been so fun! #WebflowPNW made it easy to connect with fellow designers and enjoy the process. Can't wait for the next one!"

Akeem Boyle

"I've never been to a meetup where everyone is so supportive. No competition, just collaboration. #WebflowPNW knows how to create a warm and welcoming environment."

Tina Schultz

"I came for the Webflow, stayed for the friendship. Who knew geeks could be so cool? #WebflowPNW #BendOregon"

Minerva Daugherty

"I thought I was good at Webflow, until I met the pros at #WebflowPNW. My mind was blown by the creativity and talent in the room!"

Moshe Little

"From Bend, but never seen a community like this! #WebflowPNW taught me that the best way to learn is with friends and a beer in hand."

Fernando Schumm

"Learning Webflow has never been so fun! #WebflowPNW made it easy to connect with fellow designers and enjoy the process. Can't wait for the next one!"

Akeem Boyle

"I've never been to a meetup where everyone is so supportive. No competition, just collaboration. #WebflowPNW knows how to create a warm and welcoming environment."

Tina Schultz

To example two

Example 2:
Static implementation with one component

Buncha divs inside one component– one source of truth.
"I came for the Webflow, stayed for the friendship. Who knew geeks could be so cool? #WebflowPNW #BendOregon"

Minerva Daugherty

"I thought I was good at Webflow, until I met the pros at #WebflowPNW. My mind was blown by the creativity and talent in the room!"

Moshe Little

"From Bend, but never seen a community like this! #WebflowPNW taught me that the best way to learn is with friends and a beer in hand."

Fernando Schumm

"Learning Webflow has never been so fun! #WebflowPNW made it easy to connect with fellow designers and enjoy the process. Can't wait for the next one!"

Akeem Boyle

"I've never been to a meetup where everyone is so supportive. No competition, just collaboration. #WebflowPNW knows how to create a warm and welcoming environment."

Tina Schultz

"I came for the Webflow, stayed for the friendship. Who knew geeks could be so cool? #WebflowPNW #BendOregon"

Minerva Daugherty

"I thought I was good at Webflow, until I met the pros at #WebflowPNW. My mind was blown by the creativity and talent in the room!"

Moshe Little

"From Bend, but never seen a community like this! #WebflowPNW taught me that the best way to learn is with friends and a beer in hand."

Fernando Schumm

"Learning Webflow has never been so fun! #WebflowPNW made it easy to connect with fellow designers and enjoy the process. Can't wait for the next one!"

Akeem Boyle

"I've never been to a meetup where everyone is so supportive. No competition, just collaboration. #WebflowPNW knows how to create a warm and welcoming environment."

Tina Schultz

Two the Final Boss

The Challenges: Dynamic++

Buncha divs generated by CMS reversed and duplicated by JS.
"I came for the Webflow, stayed for the friendship. Who knew geeks could be so cool? #WebflowPNW #BendOregon"

Minerva Daugherty

"From Bend, but never seen a community like this! #WebflowPNW taught me that the best way to learn is with friends and a beer in hand."

Fernando Schumm

"I thought I was good at Webflow, until I met the pros at #WebflowPNW. My mind was blown by the creativity and talent in the room!"

Moshe Little

"Learning Webflow has never been so fun! #WebflowPNW made it easy to connect with fellow designers and enjoy the process. Can't wait for the next one!"

Akeem Boyle

"I've never been to a meetup where everyone is so supportive. No competition, just collaboration. #WebflowPNW knows how to create a warm and welcoming environment."

Tina Schultz

"I came for the Webflow, stayed for the friendship. Who knew geeks could be so cool? #WebflowPNW #BendOregon"

Minerva Daugherty

"I thought I was good at Webflow, until I met the pros at #WebflowPNW. My mind was blown by the creativity and talent in the room!"

Moshe Little

"From Bend, but never seen a community like this! #WebflowPNW taught me that the best way to learn is with friends and a beer in hand."

Fernando Schumm

"Learning Webflow has never been so fun! #WebflowPNW made it easy to connect with fellow designers and enjoy the process. Can't wait for the next one!"

Akeem Boyle

"I've never been to a meetup where everyone is so supportive. No competition, just collaboration. #WebflowPNW knows how to create a warm and welcoming environment."

Tina Schultz

Other shtuff

Other great use cases

The magic doesn't end with simply writing code either.

Explain
Improve
Interpret
And more..

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.

Example - CMS Count

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.

Challenge Example

And much much more...

Convert from jQuery --> Vanilla JavaScript, etc. What else?

Example - CMS Slider
It's the end– of this presentation. Not the world.
Questions, answers, and other stuff

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

Learn more