Dev Diary Ep22 - Custom Tailwind Components with ChatGPT

Hey Weavers,

This weeks video is a little bit of a technical one… We use ChatGPT to generate some Tailwind code for us to paste into a Custom Component, we then go on to add some native controls and turn it into a Global.

It’s really powerful stuff, and opens up a world of possibilities!

As always your feedback is invaluable to us, so let us know what you think of today’s video in the comments below.

I’ll be back next Tuesday as usual!

Cheers,
Dan & Team Realmac

8 Likes

c’est bien d’integrer ce genre d’option, mais on en a pas besoin tout de suie, il serait plutôt temps de sortir une version du produit, sinon tout le monde va basculer à la concurrence…

1 Like

I like your thinking, Sylvayn. Take the Apple approach. Release the basic version now and iterate quickly. Yes, they will take arrows for it not being able to do “X”. But that is always going to be the case. Just make sure the basic release is solid and iterate with features as they are ready.

One thing to consider, Sylvayn. This customizable component combined with AI will enable people to build a solution for whatever Elements doesn’t currently have. So technically, even a basic version with a strong customizable component framework will mean a product that can go into a production environment today.

3 Likes

Dan, that’s a great video. I loved seeing you step out into showing GenAI with Elements. A couple of things to ponder. Have you looked into using one of the custom GPTs on the GPT Store for creating the code for the custom component? They often have strong prompts to generate better code.

One of my favorites is Grimoire. Nick Dobos keeps it updated and it is strong.

Since Apple will be building in various LLMs, it might be useful to start building a strategy on model prompting that comes from Realmac and what the user can add/modify to get the desired results.

2 Likes

The interesting thing about today’s demo was that it did not reveal a new feature of Elements. Dan stated at the beginning that this was not taking time away from development.

Instead, it was an explanation of how a “power user” could significantly expand Elements’ capabilities by using a third-party code solution. Elements already has the built-in ability to fully integrate the code. This allows users to utilize the native WYSIWYG editor and harness the power of combining the Elements UI with the core CSS of Tailwind.

As Dan said many times, it’s really powerful stuff. In the meantime, I am sure they are continuing to develop and ensure compatibility with the upcoming OS updates.

1 Like

Elements integrating with Apple Intelligence in some fashion would/will be very exciting, however the recent decision by Apple not to roll out those features to European Union users this year might cause a “two-tiered” experience for the Elements user-base.

Hope Apple and the EU sort it out so EU users don’t end up getting the short end of the stick.

1 Like

I read this. It is sad. On the one hand I understand the concerns. On the other, a potentially powerful feature is being left behind. Maybe a full release of Apple Intelligence (AI) in the future will resolve the issue where user privacy is adequately preserved. Obviously with ChatGPT and the others it is not.

1 Like

I enjoyed this week’s Dev Diary video even though no new features were shown off. Today’s video really demonstrated the power that Elements is going to bring to the table for more technical users. After today’s video I can really see how freelance web designers all the way up to established web design firms could harness this powerful technology for their business/portfolios.

I can imagine these types of users/teams creating custom elements/components/globals for their business, easily sharing them with their design teams, and collaborating among themselves to quickly prototype and build lots of modern, fast, and stunning websites!

Not only that, I see Elements as an app that aspiring web designers (or even students learning to code) could really benefit from during their learning experience. I mean they could learn how to write HTML/CSS/Javascript with the help of AI, and not only could they build custom elements with that, but they can also learn UI/UX by adding bits to Elements’ version of the “Page Inspector” that users can interact with.

The possibilities really are endless here. :star_struck:

2 Likes

Read this : European AI. Now :rofl:! or :sob: I hesitate. But it must be recognized that this guarantees the employment of many technocrats for the future with the possibility of transfer for possible closures of positions in the “all-electric to save the planet.” I know I’m leaving… again… :crazy_face:

I agree and it sucks. However, politics is going to cause a lot of issues with that around the world. You almost need to have multiple political versions of your apps just like you have multiple language localized versions. But unfortunately, it is going to cause multiple levels of experience or not be allowed at all. While the EU is getting the headline for this, I can well imagine that there will be a similar experience in other countries like China and Russia, too.

If the EU is going to demand backdoors into a user’s protected information, then I hope Apple pulls out of Europe rather than compromise our security.

1 Like

So here’s what’s likely to be an unpopular opinion, or maybe I’m just holding it wrong.

I’ve watched this weeks video 3 times already, and I’m still scratching my head.

This video really highlighted the awkward overlap between components and globals, specifically when you added a button element (atom?) and then needed to turn the component into a global to then have that button propagate to other instances. That’s too much cognitive load. The button is already in a component, which in most other software is a global component that you can reuse throughout your site. Why not just add the button element (atom?) to the component and be done with it? Also, with the global, you then have to remember to override everything which makes everything that little bit more complicated.

You’ve mixed the concepts of components, layouts, and templates into a mental model that doesn’t really work, and forces the user not only to (re)learn basic concepts, but then also remember how each one is different (overrides).

As someone with lots of development experience (but doesn’t want to code anymore), this model makes my head hurt, and to be perfectly honest—at this point I’m very unlikely to use Elements (regardless of price) as it’s shaping up to be a very frustrating user experience.

Please, look at how other apps use components and handle layouts. Elements concept of components and globals is pointlessly differentiated enough to make it maddening.

Bryan, I understand you are frustrated. I can see how using terminology differently from industry norms can be very confusing.

Are you suggesting that the naming convention is wrong or that the workflow is wrong? If it is the naming convention, would you provide a solution that completely fits the norms?

If it is the workflow, what is specifically causing the disconnect?

I’m not trying to be an apologist; I am truly seeking understanding. I code a little, very basic, and I keep things insanely simple. So, I don’t get into the depth of detail that you likely do. The concept seems fairly straightforward to me, though I do feel the flow can be clunky at times. This could be because Dan is always showing options rather than following a straightforward “get it done” approach. That said, each time I see Dan work with the software, it becomes easier for me to understand.

I’m arguing that pointlessly differentiating terminology from industry norms is very likely to confuse folks. Name things whatever you want, but make sure the mental models you develop make sense. The current workflow between components and globals overlaps in very unintuitive ways. If it makes sense to you, fantastic, but it just confuses me.

For me, I’m just apprehensive to commit to a tool that requires me to do cerebral gymnastics every time I use it.

I get this. I have been trying to figure out a way to suggest a better workflow. Obviously without hands-on its hard to really suggest something.

I have been trying to think through this as well. The marketable option is to build on “biology or physics terms” Atoms, Molecules, Globals. But who knows what these mean? Without an understanding of the building blocks, they are just more words with random definitions.

Preferably we just stick with the industry norms of building a website. But when I think of what the names would be I am stuck. ie. tags, elements, snippets, globals, etc. on-and-on it goes. What makes sense to someone with no coding skills and just wants to build a website? What makes sense to someone who has experience but doesn’t want confusing terminology?

The circle does cause the head to spin.

1 Like

For some of us who develop in several tools and platforms we get used to these changes of how things are labeled or what people call things.

Apple Developer Tools Swift vs Objective C
FileMaker Pro
LiveCode
PHP Symfony Framework vs larval vs god knows what
.NET
Etc. Etc, over the years

Embrace the change is my Motto,

Does anyone remember the Borland C++ pack with all the windows API?

I do…but why did you want to dredge that up and have me relive horrors?

4 Likes

Dreadful mess. Only out done with POSSE project I inherited at a University.

Who builds a database to run a large university with only a single table in Oracle.

Don’t ask about it and if anyone asks you to get involved just run away as fast as you can, it’s a bloody mess.

1 Like

Confusion is the bane of computer software, don’t you think? The whole idea of using an Apple instead of a PC was “simplicity”, ie. not having to learn how to work under the hood.

I use Inkscape software to do some modeling for my train hobby. It is a great piece of software, but I seem to need to keep relearning how to use it every time I work with it, because it has so many options and tools available. It is mind numbing sometimes and very frustrating other times.

The intent of Mac based software should be to make live easier, not more complicated. Otherwise why bother with the WYSIWYG. Might as well learn coding and be done with it.

Just my two cents and still happy using Rapidweaver 8.

1 Like