ProcessWire Profiles - what's missing?

[wbmnfktr]

To make a long story short... the last few weeks I asked myself...

"What kinds of ProcessWire Profiles are missing or could be interesting for new/existing users?"

The answers were...

• feature rich - with the full glory/monty of ProcessWire's features
• basic default profiles - Agency, Portfolio, CV, kind-of-niche (Photographers, Musicians, ...)
• verbose and detailed for starters
• Premium Theme - kind of... like WordPress has

So I wanted to ask you... what could be interesting for you and maybe others out there.

I already created Sublime (theme based), pwRecipes (super basic starter) and PWBrecipes (advanced starter based on pwRecipes) but still... I want to create and offer more options for new and existing users of ProcessWire. I teamed up with my colleague and friend from Muskaat to create a nice multi-purpose theme/design to provide a nice entry-point for everyone in regards of ProcessWire but this will take time as it will be highly customized and art-directed.

There is a side-project of mine (some of you may know about it) where I want to provide all kinds of ProcessWire Barebones like an Agency-Theme-themed starter profile and such. But... to be honest... right now I'm a bit lost. I don't know what could be interesting or what might be needed. And yes... I don't know where to start. ?

Is there anything YOU wanted to have being around as a site profile or theme or anything like this?

 

Every answer, idea and recommendation is highly appreciated.

[szabesz]

Regarding Site Profiles: what is really missing is a system which turns one into an updatable "theme". Especially when targeting beginners, it would be preferable to provide a way to keep those profiles updated via the admin, like Ryan's module updater.

Also, using UIkit 3 as the bases of it would be appealing to beginners and also some experienced devs, for the usual reasons: a popular and documented css "framework" is easy to use, extend and update.

The site profile could provide "hooks" so that it can be modified and extended without changing the "core theme".

Sure, I did not provide any new ideas at all, it is just a quick summary of what have been sought after dozens and dozens of times here, in the forums. @bernhard might even be working on something like this maybe? ? 

[Jonathan Lahijani]

5 hours ago, szabesz said:

Regarding Site Profiles: what is really missing is a system which turns one into an updatable "theme". Especially when targeting beginners, it would be preferable to provide a way to keep those profiles updated via the admin, like Ryan's module updater.

Also, using UIkit 3 as the bases of it would be appealing to beginners and also some experienced devs, for the usual reasons: a popular and documented css "framework" is easy to use, extend and update.

The site profile could provide "hooks" so that it can be modified and extended without changing the "core theme".

Sure, I did not provide any new ideas at all, it is just a quick summary of what have been sought after dozens and dozens of times here, in the forums. @bernhard might even be working on something like this maybe? ? 

For the last couple months, I've been working on a module that does exactly this.  It's not a site profile, it's not a theme.  I don't know what term would accurately describe it, but its a ProcessWire module that's an opinionated, update-able starting point, oriented towards developers, and brings in a bunch of boilerplate like:

• an installer that will create fields, templates, pages, hannacodes; it runs through a thorough check before doing anything that may result in an error (module installation errors are aggravating; i'm testing it very thoroughly)
• the installer will rename your 'templates' dir to something temporary, and then copy a starting 'templates' folder that's prepped for the module (you should only do this on dev)
• if you try to add it to an existing site with a bunch of data, it will work as long as there are not collisions in some fields and templates; if there are, the module won't install and tell you what you need to change around to allow it to install
• establishes some new $config variables ('env', 'disableTemplateCache', a few others)
• built with UIkit 3 in mind, but not hardcoded to it
• a menu builder based on Repeaters with its own Process Module
• has its own seo+og+twitter+sitemap metadata fields and uses Profields FieldGroup since that is the best module for handling such a grouping
• has it's own templates inside the module which can be used, or overridden in /site/templates/; this includes
  • blog
  • sitemap.xml
  • maintenance
  • search
• in addition to template files being able to be overridden, partial files can be overridden too!
• some module configuration fields (site_name, maintenance, etc.)
• the module has documentation and other statistics built into it for easy reference
• takes full advantage of setting() and markup regions; applies attributes like UIkit 'uk-grid' and other data attributes without "touching" the html; keeps the module flexible and easily allows you to rip out UIkit and swap it for another CSS framework (Bootstrap 4); you'll never need to touch edit the _main.php file because of how regions has been set up
• has it's on RepeaterMatrix fields with boilerplate matrix-types (headline, text, slideshow, etc. etc.); if the user makes new custom matrix types and a later version of my module brings in a new matrix-type, it will update the RepeaterMatrix field and merge it correctly (tricky to do!); the matrix types use many of the same base fields, thereby allowing you to switch from one matrix type to another without data being destroyed (this was only possible as of 2 weeks ago with the new matrix update)
• to avoid creating a bunch of 1-off fields for the matrix field for block configuration, it uses the new and quite amazing Mystique fieldtype in a unique way (this was tricky to do); this module is critical to establishing a page-builder that is clean (this was only possible as of April 2019 since the module is brand new)
• brings in PW's debugger to the frontend (brings in jQuery UI); can be disabled
• all field and template names don't use any prefixes; this would allow you to dump the module one day in the future if you don't like it, without having a bunch of field and template names that sound too specific to the module
• Laravel Mix based asset compiler pre-configured with UIkit
• works with FormBuilder and other modules I often use; works and may require certain Pro modules; eliminates the need for any modules that do blogging, menu building, sitemap, maintenance or seo since this module does it using native ProcessWire
• login/logout/account/register templates
• it may include a 'collection' generator for common things like events, products, people, properties, along with some templates for those.  don't like the templates my module provides? then just create your own template file in /site/templates/the-template-file.php which will override /site/modules/my-module-name/templates/the-template-file.php

Right now I just started building a few sites with it (spent the last 2 months developing it) which will hammer it out further.  I will release it late summer, early fall.

[szabesz]

@Jonathan Lahijani This all sounds awesome ? Are you going to release it as a free module for community based further development or as a paid module? I think as a community effort it could really take off.

[bernhard]

Hi @Jonathan Lahijani,

this sounds really great! I'm in for collaboration on this ? 

@wbmnfktr the problem that I have with site profiles is that they never work the way I want them to work. The setup is usually different to how I develop pw websites on the frontend. I tried to build a frontend theme module once last autumn, but it got complicated quite quickly. So to use such a module it would be quite some effort to get started (same problems as with site profiles).

Nevertheless I think that it would be great to have some kind of frontend framework. Something similar to what we already have for the backend. That makes standard tasks easier (think of $config->styles->add(...) ) and - well - more standardized (meaning reusable/shareable). I thought of developing a module for that that would basically just bring in some helper functions (like rendering style and script tags) and that can be extended via sub-modules for CSS frameworks that hold custom methods (like rendering an uikit menu, uikit slider etc).

I have not started with that one, but the benefit of such a module would be that we could start with a very simple module that everybody could easily use and it could very easily be extended via pull requests (add uikit slider render method, add uikit modal method etc). And this setup would be 1-click updateable via the PW modules screen. Some kind of migrations module could do the setup of necessary fields.

Site profiles don't offer this flexibility!

But it sounds like Jonathan is coming up with something great here...

[Jonathan Lahijani]

10 hours ago, szabesz said:

@Jonathan Lahijani This all sounds awesome ? Are you going to release it as a free module for community based further development or as a paid module? I think as a community effort it could really take off.

It will be free, open-source, like other starter tools out there.

[wbmnfktr]

Thank you, guys!

Thanks for your feedback, thoughts and preview on your upcoming ideas and projects here and in my inbox.

I will sort my thoughts and mix them with your input now. I'll keep you posted on this.

 

[wbmnfktr]

Just a small addition to this. I just added a new site profile to my Github page.

It's a mix of the official blank and the multi-language site profile.

The reason I made and published it is simple. This kind of setup/profile is almost always my starting point for a new project. So it saves me a lot of time for the inital setup. I kept (almost) all example files, removed demo content, added a few core modules and stripped almost everything in the output/template files.

• No UIKIT.
• No real output strategy.
• No hassle.
• Just BLANK in multilanguage flavour.

It's not much, but it's honest work. ?

PWB Multi Blank

[dragan]

2 hours ago, wbmnfktr said:

No real output strategy.

Sounds great. The less opinionated, the better ?

To answer your original question:

• SPA profile (Vue, React, Angular or whatever is "cool" this season)
• Headless profile (perhaps using GraphQL or a simple REST for the frontend to quickly grab content and assemble whatever you wish)
• PWA profile (service workers, Cache API, a frontend setup showing how you can build pages that can be used even when offline - "app shell" philosophy)
• "pure awesomeness" starter profile that has the coolest modules already pre-installed, like Tracy, BCE, AOS etc. (the actual choice is of course highly debatable). This would - in a nutshell - show the combined power of what's in the core already - and then some.

[joer80]

I would like a profile that allowed a front end edit ability, similar to what divi does on wordpress.  I want to try and work on one, but it will be a bit before I can. 

[Jonathan Lahijani]

A sneak preview of a new page builder concept that I'm close to completing.  I'll write more about this in coming weeks, but this video demonstrates a lot of unique things going on:

 

[wbmnfktr]

Woah... Well... I don't use this word that often but... this is insane. In a very good and positive way.

 

[Gideon So]

WOW. This is very impressive.

Gideon

[jonatan]

Amazing @Jonathan Lahijani? Releasing it? ?

[Jonathan Lahijani]

My module is going through quite a bit of evolution, almost on a daily basis, as I build more sites with it.  It will probably be ready sometime this summer, including documentation and a website.  It's quite complex, but very thorough.  I've built about 10 sites with it so far, with each site providing various insights and feature ideas that make it into the module.

[jonatan]

On 4/8/2020 at 3:53 AM, Jonathan Lahijani said:

My module is going through quite a bit of evolution, almost on a daily basis, as I build more sites with it.  It will probably be ready sometime this summer, including documentation and a website.  It's quite complex, but very thorough.  I've built about 10 sites with it so far, with each site providing various insights and feature ideas that make it into the module.

CAN'T WAIT! Simply sounds almost too good to be true @Jonathan Lahijani! ?????❤️

 

I'm sure I'll be a very very very big fan of it and one of the first persons to install it! 

In my perspective this is (pretty much) the very only core thing missing in PW, the ability to let the editors intuitively build highly customizable and flexible layouts, as is possible in a lot of other CMSs and site builders. 

I'm sure that after your module PW will never be the same again! (well at least to me) 

It's not possible to somehow get some sort of beta version? Or perhaps just some further sneak peaking? In that case sign me up! I would be more than interested. 

For instance I have a project right now which is an online art magazine where the client requires maximum design flexibility and very high level of customization per page. 

And the solution using pages with predefined themes as building blocks (PageTable / Repeater Matrix) is just not ideal or optimal, not very elegant, smooth, nor easy or very functional. Just not smart. 

Your solution seems just like what's missing. The missing link! ? (Between user layout control and designer / developer design definition) 

I'm just curious if you're in touch with @ryan about this development? Because to me, in my humble noob opinion, this could perhaps be some core stuff? Or anyhow then as a module  a very highlighted main feature of PW? 

(PS sorry for late reply, don't know why I missed the notificatio about your answer) 

Keep on the amazing work! And please share whatever possible! So curious about this! Maybe even a development thread on the forum? 

 

All the best, 

Jonatan. 

[Lenz]

That seems to be a game changer. Congrats on this effort.  Keep it up!

[Jonathan Lahijani]

@jonatan  I appreciate your excitement.

As I may have mentioned before, the biggest feature of this module is around making a good page building experience for non-technical people and making it easy to setup as a developer.

"Page builders" in my opinion lie on a spectrum:

• On the right end you have things like Webflow which is 100% visual and infinitely flexible (let's put aside the fact that it's also a CMS and remotely hosted).  It's an amazing tool, even though I don't use it because it's not how I develop.  It's a great system, but requires design skill and you have to make sure you are consistent across the board, stick to a style guide, etc.
• On the left end you have what I will call section builders.  Perfect examples include RepeaterMatrix and ACF Flexible Content field for WordPress.  I made a video comparing the two in my WP vs. PW series.  This approach was probably the go-to approach from... 2010 to 2015?  It's much less "flexible" in that at it's simplest form, a section like "image left, text right" will always be as such and unless there are other sections to choose from, you are stuck with it.
• In the middle-right you have things like Gutenberg, Elementor, Brizy, etc.  This is where most of the development action is, thanks to reactive JS frameworks (same with Webflow).
• In the middle-left there are tools like N1ED, Froala Blocks and others.

The way I see it, ProcessWire is a tool geared for developers, and developers can customize it perfectly for their clients.  A big part of this is a good page building experience and (a) after having built dozens of websites with RepeaterMatrix and (b) experimenting with different approaches and (c) trying to respect ProcessWire's way of doing things, I have concluded that the section builder / repeater matrix approach is the way to go.  It just needs to be improved a bit.  (also, I'm lazy and would never be able to program a visual page builder like the fancy ones out there because my JS skills are embarrassing)

First, why do I say it's the way to go?

1. Because it's regular ProcessWire, you can do multi-lingual, while not a big deal for me, PW seems to be a favorite for multi-lingual websites.  So that's important.
2. Because they are normal template files, a matrix-type that has been used multiple times can easily be modified by editing the template file (requires the developer obviously).
3. Because it's regular ProcessWire, you can SWITCH from one matrix-type to another and retain your data.  This is pretty important.
4. Because they are normal template files, you can technically load them directly on other pages that don't even utilize repeater matrix and just inject your own content.
5. YOU CAN DO DYNAMIC CONTENT!!!  Well other page builders are doing this more and more, but with ProcessWire, you can do it much better (I'll elaborate on this another day and how my module will do it).
6. I just don't trust non-technical people to create a good looking page from a bunch of sections by dragging and dropping and having too much flexibility.  Fonts being mis-matched, colors all over the place, responsive thrown off.  This is why I don't like page builders like Gutenberg, Elementor and the like.  They look very sexy in the beginning and might be OK for people with web page creation experience, but it gives too much flexibility and web pages are complicated when you consider responsive design, image sizes, etc.
7. I can use my CSS framework of choice (UIkit of course) instead of whatever internal CSS framework each of those builders relies on.

So, what problems do section builders currently have (like RepeaterMatrix)?

1. You cannot "preview" a section in a slick way before you add it.  Sure, the matrix-type might be named "text left, image right" among a sea of 20+ other matrix types, but this won't stand out, especially in that smashed together list of matrix-types that you get with RepeaterMatrix.  Non-technical people are VISUAL, so getting a preview of what they are about to insert goes a long way.  My module has solved that problem as I posted in that above video (it's changed a bit from that video in a much better way).
2. You don't page the benefit of instant feedback of what a section (and overall page) looks like as you populate the content.  Again, this goes back to the visual nature of people and the soaring popularity of page builders like the ones I mentioned.  Given ProcessWire's strict separation between frontend and backend this also gets complicated because ProcessWire's philosophy is about keeping the two separate.  However, the true way around this is to use something like ProDraft's Live Preview feature.  At this moment in time, it doesn't autosave + live preview changes to repeater/repeatermatrix items, but I've asked Ryan if he could add this (post is here; not viewable if you haven't purchased ProDrafts).  He said it's possible and hopefully one day it will be there.  When it does get developed, this in my opinion solves the visual feedback aspect of section builders.
3. As a developer, it's annoying to have to continually re-setup repeater matrix for every site.  It's not easy to share the template files across various sites which would be ideal.  Also, you have to code your own matrix templates and add all the fields accordingly.  As a content editor, you want flexibility in the types of layouts... what if you want your "text left, image right" instead of "image right, text left"?  Because you can't physically drag-and-drop those elements, then we are forced in having more section templates that address the most common cases.  Therefore my module solves this problem by providing 200+ section templates out of the box (and growing).  It also provides an alternative (more visual) interface by which you can register those templates into the repeatermatrix section builder fields all from the admin (none are registered in a fresh installation... you choose what you want, so this avoid bloat).  And it feels very to the ProcessWire admin interface (a pet-peeve of mine are plugins in WordPress that have their own garrish, bloaty graphics... example: https://wordpress.org/plugins/wordpress-seo/).

The important point here is this: content editors / non-technical people / whatever you want to call them therefore no longer have to worry about dragging-and-dropping layouts, potentially messing things up.  My belief is if you provide them with a good set of options, they will find what they need, choose the matrix type and then just focus on the content.  ProcessWire's backend is all about having a good content entry experience and the ideas I've played around with have evolved around that concept.  We want non-technical people to focus on their content and we as developers should not have to worry if they uploaded a 20mb image, because the matrix template will take care of that.

Give me a couple weeks and I'll make a video.

[jonatan]

Wow @Jonathan Lahijani, just wow! ? That's what I call an elaborative answer! ??

I think your analysis is simply just so great! I almost couldn't agree more upon what you're saying! Your spectrumfication of page builders as well as your pros and current-issues overview of the "leftwing" section builders approach is really great!

30 minutes ago, Jonathan Lahijani said:

a good page builder experience for non-technical people and making it easy to setup as a developer.

– YES!

30 minutes ago, Jonathan Lahijani said:

Webflow which is 100% visual and infinitely flexible (...)  It's an amazing tool, (...)  It's a great system, but requires design skill and you have to make sure you are consistent across the board, stick to a style guide, etc.

I personally adore Webflow! I actually came from the Webflow community a while before joining PW. I'm also myself much more of a visual designer ? than I'm actually a developer ?. And also.. Wf is pricy, PW is free & open source! ? I've mostly taught myself HTML & CSS and copy pasting JS back in primary school, which is enough for Webflow, and then since recently joining PW also basic PHP ("necessity is the mother of invention"). Webflow is truly an amazing tool I agree, but as you mention, on the other hand it does require more design skills (though I believe, not having updated myself on Wf that much recently though, that they're constantly improving their CMS experience and templating experience...)

49 minutes ago, Jonathan Lahijani said:

I just don't trust non-technical people to create a good looking page from a bunch of sections by dragging and dropping and having too much flexibility.  Fonts being mis-matched, colors all over the place, responsive thrown off.  This is why I don't like page builders like Gutenberg, Elementor and the like.  They look very sexy in the beginning and might be OK for people with web page creation experience, but it gives too much flexibility and web pages are complicated when you consider responsive design, image sizes, etc.

HEAR, HEAR!!! AGREE!!! ?? This is what I meant with :

6 hours ago, jonatan said:

The missing link! ? (Between user layout control and designer / developer design definition) 

– It's great to let the editors gain some creative freedom, but on the other hand, if they're not designwise nor technically skilled, whichever beautiful design you've created, you'll see them make it fu***** ugly!... Before PW, before Wf, I was using the very basic (though it had CSS and HTML editing...) site builder Weebly. This problem you describe would exactly be the case. Because whatever you'd have designed, the editor (not being neither designer nor technically skilled) would simply (with good intentions though) make it ugly! Because they are simply given too much freedom, more than what's good. Then talking about the kind of slightly (only just slightly) more sophisticated solutions , you have Elementor, as you also mention. Recently I built a site in Elementor. And what a pain!.... Building slightly more advanced templates and custom functionality and design features directly in the Elementor editor is way much more "hacking" and so so so much "fixing" (in general applies to all of WP) more than it's actually developing or designing. The idea is good. The reality is.. not so good. 

57 minutes ago, Jonathan Lahijani said:

I can use my CSS framework of choice (UIkit of course) instead of whatever internal CSS framework each of those builders relies on.

Talking about this... Would the amazing module that you're building also be interchangeable in regards to CSS framework wise, say able to – easily – use Bootstrap instead of UIkit? Perhaps even somehow built in?

 

All in all though I just can't wait to see this! I'm very much looking forward for your video. And again, any kind of sneak peeks or even some beta demo would be highly highly appreciated!

 

All the best,
Jonatan