Re: I hate complexity in HTML/CSS/JavaScript (Alex Clark)

Rafael Nunez <[email protected]>
Newsgroups gmane.comp.web.zope.plone.devel
Message-ID <[email protected]> 
On 24 Dec 2013, at 10:16 pm, Alex Clark <[email protected]<mailto:[email protected]>> wrote:

Hi folks,

Is it me, or is it inherently complex and inelegant to merge Plone's
"legacy" HTML/CSS/JavaScript with a clean and modern HTML5 theme
configured via Diazo?

I just picked up the Plone again for a new project and I'm stuck by how
much I hate the idea of Diazo rules that merge HTML/CSS/JavaScript from
Plone with my theme.

Why do I hate this?

Because before the merge I know what HTML/CSS/JavaScript are included in
my theme, typically Bootstrap. After the merge "more stuff works" but I
now have a mess of HTML/CSS/JavaScript to sort through and ponder the
effects of. Or so my perception goes.

Am I alone here? Are Rok Garbas and others fixing this I hope?

You are not alone here, for over 10 years I have been working with plone and even though it is a lot easier with diazo to theme sites it is still really difficult to new users. (Just try to explain to new user how to change the logo and the color of the background and you'll see how the flee )

I believe that adopting a framework like bootstrap or foundation as the base with a way from site setup to change the public CSS and the logo, and a refined @@manage-viewlets that you can rearrange elements (an possibly change the class) will make the adoption of plone easier.

I'm not saying to get rid off diazo, but make the base (sunburst) more flexible and useful for web designer not programers by using a framework known to others outside this community.

It will also make it easier for product development since you provably will not need a separate CSS or JS (depending on what the add-on does)

I'm currently testing the migration of my site and fighting with java scripts, I also know that my CSS should be at least 1/3 the size it is now.

The video below is perfect example of what I'm talking about
http://youtu.be/gLtUuheRCv8





That was the original intent behind p.a.toolbar. Keep the assumptions and css and js you have to include in your theme to the absolute minmum by keeping all the widgets etc for the backend only.
However there is debate going on at the moment if this how it's going to be in Plone 5. There is a feeling that we should include all of plone.app.widgets with it's css and js into the front end theme since all plone sites need forms and widgets and plugins that do things on the frontend need a stable known environment to make it easier to develop against.
IMO this works well for those implementing intranet type applications were they use a lot of plugins but don't need much control over the theme. It works poorly for those that need to create many new themes, or convert existing themes into plone as often happens when theming public sites.
It seems it's not clear which is the best way to go.


Thanks
for any thoughts. Maybe one simple fix is to document what
HTML/CSS/JavaScript from Plone are being merged.

btw, we have one solution we use to help solve the case where a designer is building from scratch but don't know plone well.

https://github.com/collective/plonetheme.diazoboilerplate41

also note: if you want to use sunburst's editing UI but not depend on
the invasive general layout and styles of sunburst, you might want to
follow the instructions here:
https://pypi.python.org/pypi/plonetheme.sunburst#how-to-depend-on-sunburst-for-your-custom-theme

i had quite a good experience with it, by leaving out a lot of default
sunburst styles, as described above. actually, i hadn't to fix the
mockups from a designer to play together with sunbursts editing UI
anymore.


Thanks, one question: what does "Of course, the mycustom_skin needs to
be registered too." mean in this context? I'm guessing this is a
reference to a new-style theme layer and not an old-style portal skin?

That means, that the mycustom_skin must be also registered via skins.xml
in GenericSetup.


Then I'm still confused, I guess:

- I don't want to register a custom skin directory because I don't have one.

- I do want to include Sunburst editing UI styles in my theme without
including all of Sunburst.



Please note, the plonetheme.sunburst way is OK, if you need to depend on
plonetheme.sunburst. with plone.app.toolbar, plone.app.widgets and
mockup, things should actually get easier.







Unfortunately not yet documented.

The idea is that it's a diazo theme which you can build upon but it already includes the minimum styles and html you need for most functions of a plone site. No JS though.
If you install it you can generate some example html pages and give them to a designer for them to build on. The generated html contains the same classes as the rules require of the content html. This means the generated html can be used as a theme/mockups in the same diazo theme without having the to change the rules file.

This allows a workflow of
1. install boilderplate theme
2. setup dummy content and home pages using plone
3. Save dummy themed content and home pages and send to designer. they look very basic.
4. Install dummy content and home pages back into diazo.
5. tweak rules in case designer did decide to change the html

What would be a nice addition to this process is for automated generation of additional dummy pages that included all the standard tinymce styles and portlet types etc.






Happy holidays to all the Plone,


Alex


---
Alex Clark ? http://about.me/alex.clark


------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Plone-developers mailing list
Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:Plone-developers-5NWGOfrQmncRDUWM+popnw@public.gmane.orgforge.net>
https://lists.sourceforge.net/lists/listinfo/plone-developers


------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Plone-developers mailing list
Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:Plone-developers-5NWGOfrQmncRDUWM+popnw@public.gmane.orgforge.net>
https://lists.sourceforge.net/lists/listinfo/plone-developers



------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Plone-developers mailing list
Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:Plone-developers-5NWGOfrQmncRDUWM+popnw@public.gmane.orgforge.net>
https://lists.sourceforge.net/lists/listinfo/plone-developers




------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Plone-developers mailing list
Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:Plone-developers-5NWGOfrQmncRDUWM+popnw@public.gmane.orgforge.net>
https://lists.sourceforge.net/lists/listinfo/plone-developers



------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Plone-developers mailing list
Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:Plone-developers-5NWGOfrQmncRDUWM+popnw@public.gmane.orgforge.net>
https://lists.sourceforge.net/lists/listinfo/plone-developers



--
Alex Clark ? http://about.me/alex.clark




------------------------------

Message: 2
Date: Sat, 28 Dec 2013 20:37:37 +0200
From: Asko Soukka <[email protected]<mailto:[email protected]>>
Subject: Re: [Plone-developers] I hate complexity in
   HTML/CSS/JavaScript
To: Alex Clark <[email protected]<mailto:[email protected]>>
Cc: "plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:[email protected]>"
   <plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:[email protected]>>
Message-ID: <49C6C95E-7F04-489A-A70D-890FD2E85F4A-X3B1VOXEql0@public.gmane.org<mailto:49C6C95E-7F04-489A-A70D-890FD2E85F4A-X3B1VOXEql0@public.gmane.org>>
Content-Type: text/plain;    charset=us-ascii


https://pypi.python.org/pypi/plonetheme.sunburst#how-to-depend-on-sunburst-for-your-custom-theme

Thanks, one question: what does "Of course, the mycustom_skin needs to
be registered too." mean in this context? I'm guessing this is a
reference to a new-style theme layer and not an old-style portal skin?

It means old-style skin, which can be created TTW from properties tab in portal_skins.

In new resource registries all resources must be mapped into "bundles". Bundles are then mapped into skins so that each skin can include multiple and overlapping bundles. Cooked css/javascript will then include all resources from all bundles mapped for the currently active skin. Very flexible, but a bit complex and pain to manage both TTW or using GS-XMLs.

Of course, all stuff related to skins and resource registries must be managed manually TTW or with GS-XMLs (there's no automation for them in p.a.theming).

-Asko


------------------------------

Message: 3
Date: Sun, 29 Dec 2013 09:08:33 -0500
From: Alex Clark <[email protected]<mailto:[email protected]>>
Subject: Re: [Plone-developers] I hate complexity in
   HTML/CSS/JavaScript
To: plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:[email protected]>
Message-ID: <[email protected]<mailto:[email protected]>>
Content-Type: text/plain; charset=windows-1252; format=flowed

On 12/28/13, 1:37 PM, Asko Soukka wrote:

https://pypi.python.org/pypi/plonetheme.sunburst#how-to-depend-on-sunburst-for-your-custom-theme

Thanks, one question: what does "Of course, the mycustom_skin needs to
be registered too." mean in this context? I'm guessing this is a
reference to a new-style theme layer and not an old-style portal skin?

It means old-style skin, which can be created TTW from properties tab in portal_skins.

In new resource registries all resources must be mapped into "bundles". Bundles are then mapped into skins so that each skin can include multiple and overlapping bundles. Cooked css/javascript will then include all resources from all bundles mapped for the currently active skin. Very flexible, but a bit complex and pain to manage both TTW or using GS-XMLs.

Of course, all stuff related to skins and resource registries must be managed manually TTW or with GS-XMLs (there's no automation for them in p.a.theming).


So the "best practice" [1] is to copy <head> from content to theme via
Diazo rule and then make sure the appropriate bundles are included in
<head>?


Alex


[1] I hate the term "best practice" for some reason?



-Asko
------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk



--
Alex Clark ? http://about.me/alex.clark




------------------------------

Message: 4
Date: Sun, 29 Dec 2013 18:03:19 +0200
From: Asko Soukka <[email protected]<mailto:[email protected]>>
Subject: Re: [Plone-developers] I hate complexity in
   HTML/CSS/JavaScript
To: Alex Clark <[email protected]<mailto:[email protected]>>
Cc: "plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:[email protected]>"
   <plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:[email protected]>>
Message-ID: <E19B374C-5B3A-43B6-885C-B022D8C4EDA7-X3B1VOXEql0@public.gmane.org<mailto:E19B374C-5B3A-43B6-885C-B022D8C4EDA7-X3B1VOXEql0@public.gmane.org>>
Content-Type: text/plain;    charset=us-ascii


On 12/28/13, 1:37 PM, Asko Soukka wrote:

https://pypi.python.org/pypi/plonetheme.sunburst#how-to-depend-on-sunburst-for-your-custom-theme

Thanks, one question: what does "Of course, the mycustom_skin needs to
be registered too." mean in this context? I'm guessing this is a
reference to a new-style theme layer and not an old-style portal skin?

It means old-style skin, which can be created TTW from properties tab in portal_skins.

In new resource registries all resources must be mapped into "bundles". Bundles are then mapped into skins so that each skin can include multiple and overlapping bundles. Cooked css/javascript will then include all resources from all bundles mapped for the currently active skin. Very flexible, but a bit complex and pain to manage both TTW or using GS-XMLs.

Of course, all stuff related to skins and resource registries must be managed manually TTW or with GS-XMLs (there's no automation for them in p.a.theming).

So the "best practice" [1] is to copy <head> from content to theme via
Diazo rule and then make sure the appropriate bundles are included in
<head>?

Well, it feels the only sane way, if you need sunburst styles within your theme and don't want to export/sync them manually. The easiest way, of course, is to have unthemed Plone for logged in users, but that would take away Plone's "edit pages in their context" magic.

And, currently, that rule is there already when you create new theme TTW with p.a.theming's theme editor.

If it really seems that there is no new solutions for this, besides toolbar, maybe we should add registries+bundles+skins-integration for p.a.theming[plugins?] so that each theme would have implicit skin with the default + theme specific bundles in place when theme is activated.

-Asko




------------------------------

Message: 5
Date: Tue, 31 Dec 2013 08:57:34 -0500
From: Alex Clark <[email protected]<mailto:[email protected]>>
Subject: Re: [Plone-developers] I hate complexity in
   HTML/CSS/JavaScript
To: plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:[email protected]>
Message-ID: <[email protected]<mailto:[email protected]>>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed

On 12/29/13, 11:03 AM, Asko Soukka wrote:

On 12/28/13, 1:37 PM, Asko Soukka wrote:

https://pypi.python.org/pypi/plonetheme.sunburst#how-to-depend-on-sunburst-for-your-custom-theme

Thanks, one question: what does "Of course, the mycustom_skin needs to
be registered too." mean in this context? I'm guessing this is a
reference to a new-style theme layer and not an old-style portal skin?

It means old-style skin, which can be created TTW from properties tab in portal_skins.

In new resource registries all resources must be mapped into "bundles". Bundles are then mapped into skins so that each skin can include multiple and overlapping bundles. Cooked css/javascript will then include all resources from all bundles mapped for the currently active skin. Very flexible, but a bit complex and pain to manage both TTW or using GS-XMLs.

Of course, all stuff related to skins and resource registries must be managed manually TTW or with GS-XMLs (there's no automation for them in p.a.theming).

So the "best practice" [1] is to copy <head> from content to theme via
Diazo rule and then make sure the appropriate bundles are included in
<head>?

Well, it feels the only sane way, if you need sunburst styles within your theme and don't want to export/sync them manually. The easiest way, of course, is to have unthemed Plone for logged in users, but that would take away Plone's "edit pages in their context" magic.

And, currently, that rule is there already when you create new theme TTW with p.a.theming's theme editor.

If it really seems that there is no new solutions for this, besides toolbar, maybe we should add registries+bundles+skins-integration for p.a.theming[plugins?] so that each theme would have implicit skin with the default + theme specific bundles in place when theme is activated.


Right. Would it make any sense in the interim to release a
plonetheme.sunburst_edit_ui theme that performed the customizations
described in
https://pypi.python.org/pypi/plonetheme.sunburst#how-to-depend-on-sunburst-for-your-custom-theme
?

It seems to me that Plone 5 should consist of a new base theme
containing a nice edit UI as well as a new Diazo theme in order to fix
these issues. And a new plonetheme.sunburst_edit_ui base theme could get
us half way there until Plone 5 delivers the rest.

In fact, that seems to me to be the only clear thing that everyone
agrees should be done. Both p.a.toolbar and widgets could probably wait
to go in the core indefinitely, until there usefulness becomes more
apparent, yes?

Conceptually this is fairly easy to explain to Diazo theme developers:

- Prepare HTML/CSS/JavaScript mockup.
- Incorporate your HTML/CSS/JavaScript into a Diazo theme with resources
managed entirely by Diazo (i.e. no resource registries, yet)
- To use Plone edit UI, nclude a rule to append, before, copy or replace
css:content="html head" to css:theme="html head".

This should get most folks most of the way, correct? Any issues with
JavaScript included in Diazo themes can be easily resolved because
everything coming from Plone must be included (including
add-on-registered JavaScript.) This will force theme editors to resolve
conflicts directly in their Diazo theme (e.g. OOPS I included a jquery
version that is too new. Or, OOPS my wacky JS library conflicts with
Plone's JS.)

It's not as sexy as some of the other proposed fixes, but it feels like
something everyone can get their head around. Presumably Mockup
HTML/CSS/JavaScript are included in the Plone 5 Base Theme, and in Plone
6 we remove the need for a portal_skins base theme? (No idea,
conceptually, how to do that.)


-Asko


------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk



--
Alex Clark ? http://about.me/alex.clark




------------------------------

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk

------------------------------

_______________________________________________
Plone-developers mailing list
Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org<mailto:Plone-developers-5NWGOfrQmncRDUWM+popnw@public.gmane.orgforge.net>
https://lists.sourceforge.net/lists/listinfo/plone-developers


End of Plone-developers Digest, Vol 91, Issue 27
************************************************

------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT 
organizations don't have a clear picture of how application performance 
affects their revenue. With AppDynamics, you get 100% visibility into your 
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk

_______________________________________________
Plone-developers mailing list
Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org
https://lists.sourceforge.net/lists/listinfo/plone-developers
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.