stefan,
@stefan@stefanbohacek.online avatar

An idea I'm playing with: A tool that lets you build a basic HTML page, and shows you how to host it for free.

https://simplepagebuilder.app

#PersonalWebsite #indieweb #OpenWeb

rye,
@rye@ioc.exchange avatar

@stefan wow this is wonderful! Thanks for putting time in to this. Really awesome.

stefan,
@stefan@stefanbohacek.online avatar

@rye Thank you, my pleasure!

researchbuzz,
@researchbuzz@researchbuzz.masto.host avatar

@stefan Damn Stefan, you do some great stuff!

stefan,
@stefan@stefanbohacek.online avatar

@researchbuzz Thank you, and thank you for sharing this!

toolsool,

@stefan
nice

stefan,
@stefan@stefanbohacek.online avatar

@toolsool Thank you!

stefan, (edited )
@stefan@stefanbohacek.online avatar

A little proof of concept showing the GrapesJS page builder integrated with Glitch via a browser extension.

tiagorangel,
@tiagorangel@mastodon.social avatar

@stefan That's a pretty nice idea! :)

stefan,
@stefan@stefanbohacek.online avatar

@tiagorangel Thank you, glad you like it!

I think this would open up Glitch to an even broader audience.

And honestly, even as an experienced developer, sometimes it's nice to put something together quickly in a wysiwyg editor and move on to more important things.

tiagorangel,
@tiagorangel@mastodon.social avatar

@stefan I love Framer for that kind of stuff. I started by not really liking it, but once I started using it I discovered that it's easy to make a website look very nice without much coding

stefan,
@stefan@stefanbohacek.online avatar

@tiagorangel Nice!

stefan,
@stefan@stefanbohacek.online avatar

If you like this idea, head to https://support.glitch.com/t/a-visual-editor-for-glitch/67029 and give it an upvote!

candide,

@stefan I really love this concept, and it reminds me of a thread by @flamed on an "Easy Web": https://social.lol/@flamed/111730917308541254

I've been thinking about an easy way for people unfamiliar with HTML + CSS to easily create websites for an upcoming workshop (beyond a plain "Hello World"), and WYSIWYG Editors that bridge ease of use with visible code like the one you've shared are key! 🔑 Your implementation of GrapeJS is one of the less daunting ones I've encountered so far.

stefan,
@stefan@stefanbohacek.online avatar

@candide I added a guided tour that I hope better explains how the editor works. If you have a moment, I'd appreciate your thoughts!

A short recording from simplepagebuilder.app showing a guided tour that highlights and explains various elements on the page and features.

candide,

@stefan Ooooooh!!! ✨✨ This is lovely!

Also, I always love when walkthroughs have a "replay" function. It puts me at ease to know that I don't have to remember every single thing when I'm using a new tool.

For some reason, though, when I tried it on my end (using Firefox), it played in reverse? 😂

Walkthrough of the "A Simple Page Builder" app, with guided instructions on how to use the tool.

stefan,
@stefan@stefanbohacek.online avatar

@candide Hmm, odd, can't seem to be able to replicate that in Firefox myself, on Windows.

I made a small update to the code to make the step numbers explicit (I'm using https://tourguidejs.com), care to give it another try?

candide,

@stefan All good now!

stefan,
@stefan@stefanbohacek.online avatar

@candide Great, thank you for confirming!

candide,

@stefan Another really fascinating example of easy WYSIWYG page creation to code is a demo of @penpot 2.0 (the open source Figma). In the upcoming release, users will be able to visually design flexbox and grid-like layouts, and then copy-paste the HTML and CSS into a code editor to build actual websites / web components.

Demo: https://www.youtube.com/watch?v=r-USvt_p46g&t=317

Screen grab from a Penpot 2.0 demo video. An Untitled Codepen web page is visible, with a pasted HTML code snippet and CSS code snippet. Below the code panels: a preview of the web page. This preview is the same as the design created in the previous Penpot user interface.

candide,

@stefan Ultimately, though, my dream would be to have an open-source WYSIWYG editor/web page generator like Pagy: https://pagy.co/

What I find with GrapeJS is that creating nice layouts and translating an imagined layout to page is still a bit tricky for users who aren't familiar with CSS principles (even though you do a great job of demoing the margin trick in the docs).

Unfortunately, the dev of this app doesn't have plans to add an export function, so a girl can only dream...

Demo of the Pagy app, where a web page can be created by dragging and dropping components in like Notion: https://i.imgur.com/w5tOi6M.mp4

candide,

@stefan Maybe this is where a pre-made template/library of templates could come in (as @yianiris alludes to: https://kafeneio.social/@yianiris/112096847989482042).

Perhaps user-generated templates from existing sites?

https://stefanbohacek.online/@stefan/112101011731503904

Pre-built sections?

stefan,
@stefan@stefanbohacek.online avatar

@candide @yianiris Yes, definitely something I've thought of!

stefan,
@stefan@stefanbohacek.online avatar

@candide This looks great!

The Studio version of GrapesJS looks pretty nice too: https://studio.grapesjs.com/

I'm just not seeing much information about it online, so I'm not sure if this is the next version of their editor, or something that's separate, maybe even paid.

stefan,
@stefan@stefanbohacek.online avatar

@candide @penpot This is great, thank you for sharing!

stefan,
@stefan@stefanbohacek.online avatar

@candide @flamed Thank you, glad folks are appreciating what I'm trying to do here!

And I saw the notes you left on the project's GitHub, I'll review them and follow up soon!

ladyhope,

@stefan This will be something epic! I used to make HTML pages from my blog when it was on WP, but I haven't done that in a while. I should start doing it again. My CSS is rough, not since 2006 or so.

stefan,
@stefan@stefanbohacek.online avatar

@ladyhope Thank you! It's a bit of an experiment, my hope is that it'll serve as an onboarding for at least a few people that would otherwise feel a bit intimidated by having to jump straight into coding.

The idea is that you can build something simple and get inspired to play around with the finished code - but even if not, you still have a nice little personal site that you can be proud of.

stefan,
@stefan@stefanbohacek.online avatar

If you make a website with this tool, definitely feel free to share it!

stefan,
@stefan@stefanbohacek.online avatar

This might not really address the biggest obstacles to people hosting their own personal websites (https://stefanbohacek.online/@stefan/112089576884146559), but I'm hoping it will help and inspire some of the less tech-savvy folks.

jake4480,
@jake4480@c.im avatar

@stefan duuuude this is 🔥 !! Love the buttons on the front too. 👊 And the styling, and just all of it. Hell yes

stefan,
@stefan@stefanbohacek.online avatar

@jake4480 Thank you! It's been a lot of fun working on this over the past few days.

Now I'm just hoping folks will find this useful :-)

jake4480,
@jake4480@c.im avatar

@stefan oh man I can't see how they wouldn't. I haven't tried a site on Glitch, maybe I should try. It looks awesome. I've done a couple on Neocities though, really dig that one.

stefan,
@stefan@stefanbohacek.online avatar

@jake4480 Fun fact: I got the domain for this site for free as a reward for winning the Best Fediverse App award from Glitch last year 😁

jake4480,
@jake4480@c.im avatar

@stefan whoaa no way!! hahaha that is awesome. Congrats on that award, I mean, well deserved.

stefan,
@stefan@stefanbohacek.online avatar

@jake4480 Thank you!

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • DreamBathrooms
  • mdbf
  • ethstaker
  • magazineikmin
  • GTA5RPClips
  • rosin
  • thenastyranch
  • Youngstown
  • InstantRegret
  • slotface
  • osvaldo12
  • kavyap
  • khanakhh
  • Durango
  • megavids
  • everett
  • cisconetworking
  • normalnudes
  • tester
  • ngwrru68w68
  • cubers
  • modclub
  • tacticalgear
  • provamag3
  • Leos
  • anitta
  • JUstTest
  • lostlight
  • All magazines