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

FWIW, the new plone 5 theme is aiming to revamp our html markup to address
the issues raised here...


On Tue, Dec 31, 2013 at 1:12 PM, Encolpe Degoute <[email protected]>wrote:

>  Le 31/12/2013 19:47, Rafael Nunez a écrit :
>
>
>        On 24 Dec 2013, at 10:16 pm, Alex Clark <[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-XMD5yJDbdMReXY1tMh2IBg@public.gmane.org<Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org>
>
>      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-XMD5yJDbdMReXY1tMh2IBg@public.gmane.org<Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org>
>
>    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-XMD5yJDbdMReXY1tMh2IBg@public.gmane.org<Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org>
>
>   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-XMD5yJDbdMReXY1tMh2IBg@public.gmane.org<Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org>
>
>  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-XMD5yJDbdMReXY1tMh2IBg@public.gmane.org<Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org>
>
> 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]>
> Subject: Re: [Plone-developers] I hate complexity in
>    HTML/CSS/JavaScript
> To: Alex Clark <[email protected]>
> Cc: "plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org"
>    <plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f-XMD5yJDbdMReXY1tMh2IBg@public.gmane.org<plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org>
> >
>
> Message-ID: <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]>
> Subject: Re: [Plone-developers] I hate complexity in
>    HTML/CSS/JavaScript
> To: plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org
> Message-ID: <[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]>
> Subject: Re: [Plone-developers] I hate complexity in
>    HTML/CSS/JavaScript
> To: Alex Clark <[email protected]>
> Cc: "plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org"
>    <plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f-XMD5yJDbdMReXY1tMh2IBg@public.gmane.org<plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org>
> >
>
> Message-ID: <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]>
> Subject: Re: [Plone-developers] I hate complexity in
>    HTML/CSS/JavaScript
> To: plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org
> Message-ID: <[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
> 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 listPlone-developers-5NWGOfrQmneRv+LV9MX5ugtCRVl27V+i0wdF1cv0I5s@public.gmane.org://lists.sourceforge.net/lists/listinfo/plone-developers
>
>
> I'm sure you should sanitize that.
>
> --
> Encolpe DEGOUTEhttp://encolpe.degoute.free.fr/
> Logiciels libres, hockey sur glace et autres activités cérébrales
>
>
>
> ------------------------------------------------------------------------------
> 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
>
>


-- 
Nathan Van Gheem
Solutions Architect
Wildcard Corp

------------------------------------------------------------------------------
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