Re: I hate complexity in HTML/CSS/JavaScript (Alex Clark)
Encolpe Degoute <[email protected]>
| Newsgroups | gmane.comp.web.zope.plone.devel |
|---|---|
| Message-ID | <[email protected]> |
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@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@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@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@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@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@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@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 list Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org https://lists.sourceforge.net/lists/listinfo/plone-developers I'm sure you should sanitize that. -- Encolpe DEGOUTE http://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