Loading ...
Sorry, an error occurred while loading the content.

YUI script and templates

Expand Messages
  • puff01824
    I m a bit new to YUI working on a site that uses Django templates and am looking for some best practices advice concerning YUI script tags. In my case, I ve a
    Message 1 of 7 , Feb 2, 2009
    • 0 Attachment
      I'm a bit new to YUI working on a site that uses Django templates and am looking for some best practices advice concerning YUI script tags.

      In my case, I've a base.html file that contains the basic page layout for all pages in the site.  It uses a couple of YUI components and I've placed the appropriate YUI script tags in base.html.  A second file, baseMap.html, extends base.html adding features needed by a 'map' set of pages in the site.  It requires additional YUI components and I've placed the appropriate YUI script tags there.  Finally, a third file, edit.html, extends baseMap.html adding features to support the page.  It requires additional YUI components and I've placed the appropriate YUI scripts in it.

      This kind of structure is common in templating systems where there is a base HTML file that is progressively extended by additional HTML files until a final page is created.

      While what I'm currently doing works, I'm concerned about YUI script tags such as:
      • Insuring proper YUI load order.  I understand that YUI can be sensative to script load order.
      • Insuring that dependencies are loaded.
      • Taking advantage of YUI rollup and combo handling.
      Is there a "best practices" approach to dealing with this situiation?

      Regards,
      puff



    • Satyam
      You are right regarding the sensitivity to load order, you get them wrong and it will generate all sorts of strange errors. I don t know about Django, but from
      Message 2 of 7 , Feb 2, 2009
      • 0 Attachment
        You are right regarding the sensitivity to load order, you get them
        wrong and it will generate all sorts of strange errors.

        I don't know about Django, but from what you say, I guess that you might
        want to explore the YUI Loader, it would take care of all these concerns
        you mention for you. In the common base file, you would simply load the
        yuiloader or the yuiloader-dom-event aggregate file. You could then
        create the loader instance and use the addModule method to define your
        own scripts as modules to be loaded and specify their dependencies on
        YUI components or on each other of your own modules. Then, each
        individual page needs only to tell which of your own modules it requires
        and from that it will pick which other of your own modules and which YUI
        modules it needs and load them for you in the correct order and all
        combined and in the proper order.

        Anyway, just asking for Django in the YUIblog site, it produces several
        good results, amongst them:

        http://yuiblog.com/blog/2008/04/25/django-yui-loader/

        The articles is from April 2008 and there have been several YUI versions
        in between, you might still have to learn about the Loader if it doesn't
        work with the newer version of YUI.

        Satyam


        puff01824 wrote:
        > I'm a bit new to YUI working on a site that uses Django templates and
        > am looking for some best practices advice concerning YUI script tags.
        >
        > In my case, I've a base.html file that contains the basic page layout
        > for all pages in the site. It uses a couple of YUI components and
        > I've placed the appropriate YUI script tags in base.html. A second
        > file, baseMap.html, extends base.html adding features needed by a
        > 'map' set of pages in the site. It requires additional YUI components
        > and I've placed the appropriate YUI script tags there. Finally, a
        > third file, edit.html, extends baseMap.html adding features to support
        > the page. It requires additional YUI components and I've placed the
        > appropriate YUI scripts in it.
        >
        > This kind of structure is common in templating systems where there is
        > a base HTML file that is progressively extended by additional HTML
        > files until a final page is created.
        >
        > While what I'm currently doing works, I'm concerned about YUI script
        > tags such as:
        >
        > * Insuring proper YUI load order. I understand that YUI can be
        > sensative to script load order.
        > * Insuring that dependencies are loaded.
        > * Taking advantage of YUI rollup and combo handling.
        >
        > Is there a "best practices" approach to dealing with this situiation?
        >
        > Regards,
        > puff
        >
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - www.avg.com
        > Version: 8.0.233 / Virus Database: 270.10.16/1929 - Release Date: 01/31/09 20:03:00
        >
        >
      • puff01824
        Satyam, Thanks for the note. I ll look into the link and YUI loader as well. I m not actually using Django proper as my app is running on Google appspot. It
        Message 3 of 7 , Feb 2, 2009
        • 0 Attachment
          Satyam,

          Thanks for the note. I'll look into the link and YUI loader as well.

          I'm not actually using Django proper as my app is running on Google
          appspot. It uses Django (0.96) templates and can use full Django,
          though I'm not currently doing so.

          I've begun to work with the YUI loader but have as yet not found a
          completely satisfactory way to use it.

          One issue I've encountered is with CSS. YUI loader appears to load
          YUI components serially and async to the page load. One consequence
          of this is that some YUI CSS is getting loaded AFTER my page's CSS so
          that the page's desired CSS is getting stepped on (I'm modifying some
          of the default YUI CSS). Presumably, a dependency can take care of this.

          Another issue I've encountered has to do with initial page display.
          When using YUI loader onload fires BEFORE all the YUI components are
          loaded. I wait for the YUI loader success event to fire but there is
          a brief but very bizarre page display until YUI is loaded and I can
          begin to use YUI components to properly display the page.

          Can anyone provide any insight into how to best address these issues.

          Regards,
          puff

          --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
          >
          > You are right regarding the sensitivity to load order, you get them
          > wrong and it will generate all sorts of strange errors.
          >
          > I don't know about Django, but from what you say, I guess that you
          might
          > want to explore the YUI Loader, it would take care of all these
          concerns
          > you mention for you. In the common base file, you would simply load
          the
          > yuiloader or the yuiloader-dom-event aggregate file. You could then
          > create the loader instance and use the addModule method to define your
          > own scripts as modules to be loaded and specify their dependencies on
          > YUI components or on each other of your own modules. Then, each
          > individual page needs only to tell which of your own modules it
          requires
          > and from that it will pick which other of your own modules and which
          YUI
          > modules it needs and load them for you in the correct order and all
          > combined and in the proper order.
          >
          > Anyway, just asking for Django in the YUIblog site, it produces several
          > good results, amongst them:
          >
          > http://yuiblog.com/blog/2008/04/25/django-yui-loader/
          >
          > The articles is from April 2008 and there have been several YUI
          versions
          > in between, you might still have to learn about the Loader if it
          doesn't
          > work with the newer version of YUI.
          >
          > Satyam
          >
          >
          > puff01824 wrote:
          > > I'm a bit new to YUI working on a site that uses Django templates and
          > > am looking for some best practices advice concerning YUI script tags.
          > >
          > > In my case, I've a base.html file that contains the basic page layout
          > > for all pages in the site. It uses a couple of YUI components and
          > > I've placed the appropriate YUI script tags in base.html. A second
          > > file, baseMap.html, extends base.html adding features needed by a
          > > 'map' set of pages in the site. It requires additional YUI
          components
          > > and I've placed the appropriate YUI script tags there. Finally, a
          > > third file, edit.html, extends baseMap.html adding features to
          support
          > > the page. It requires additional YUI components and I've placed the
          > > appropriate YUI scripts in it.
          > >
          > > This kind of structure is common in templating systems where there is
          > > a base HTML file that is progressively extended by additional HTML
          > > files until a final page is created.
          > >
          > > While what I'm currently doing works, I'm concerned about YUI script
          > > tags such as:
          > >
          > > * Insuring proper YUI load order. I understand that YUI can be
          > > sensative to script load order.
          > > * Insuring that dependencies are loaded.
          > > * Taking advantage of YUI rollup and combo handling.
          > >
          > > Is there a "best practices" approach to dealing with this situiation?
          > >
          > > Regards,
          > > puff
          > >
          > >
          > >
          > >
          > >
          ------------------------------------------------------------------------
          > >
          > >
          > > No virus found in this incoming message.
          > > Checked by AVG - www.avg.com
          > > Version: 8.0.233 / Virus Database: 270.10.16/1929 - Release Date:
          01/31/09 20:03:00
          > >
          > >
          >
        • Satyam
          You would need to put the styles you still want after the modules load as another file and define it via addModule with the correct dependencies on the YUI
          Message 4 of 7 , Feb 3, 2009
          • 0 Attachment
            You would need to put the styles you still want after the modules load
            as another file and define it via addModule with the correct
            dependencies on the YUI files it overrides so, after the YUI CSS files
            override those styles in your page, your styles once again override
            those overridden by YUI.

            Another alternative is to load your styles statically in your base page,
            not via YUI Loader. The insert() method has a second, optional argument
            that lets you tell it to load only 'js' files or 'css' files.

            Satyam


            puff01824 wrote:
            > Satyam,
            >
            > Thanks for the note. I'll look into the link and YUI loader as well.
            >
            > I'm not actually using Django proper as my app is running on Google
            > appspot. It uses Django (0.96) templates and can use full Django,
            > though I'm not currently doing so.
            >
            > I've begun to work with the YUI loader but have as yet not found a
            > completely satisfactory way to use it.
            >
            > One issue I've encountered is with CSS. YUI loader appears to load
            > YUI components serially and async to the page load. One consequence
            > of this is that some YUI CSS is getting loaded AFTER my page's CSS so
            > that the page's desired CSS is getting stepped on (I'm modifying some
            > of the default YUI CSS). Presumably, a dependency can take care of this.
            >
            > Another issue I've encountered has to do with initial page display.
            > When using YUI loader onload fires BEFORE all the YUI components are
            > loaded. I wait for the YUI loader success event to fire but there is
            > a brief but very bizarre page display until YUI is loaded and I can
            > begin to use YUI components to properly display the page.
            >
            > Can anyone provide any insight into how to best address these issues.
            >
            > Regards,
            > puff
            >
            > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
            >
            >> You are right regarding the sensitivity to load order, you get them
            >> wrong and it will generate all sorts of strange errors.
            >>
            >> I don't know about Django, but from what you say, I guess that you
            >>
            > might
            >
            >> want to explore the YUI Loader, it would take care of all these
            >>
            > concerns
            >
            >> you mention for you. In the common base file, you would simply load
            >>
            > the
            >
            >> yuiloader or the yuiloader-dom-event aggregate file. You could then
            >> create the loader instance and use the addModule method to define your
            >> own scripts as modules to be loaded and specify their dependencies on
            >> YUI components or on each other of your own modules. Then, each
            >> individual page needs only to tell which of your own modules it
            >>
            > requires
            >
            >> and from that it will pick which other of your own modules and which
            >>
            > YUI
            >
            >> modules it needs and load them for you in the correct order and all
            >> combined and in the proper order.
            >>
            >> Anyway, just asking for Django in the YUIblog site, it produces several
            >> good results, amongst them:
            >>
            >> http://yuiblog.com/blog/2008/04/25/django-yui-loader/
            >>
            >> The articles is from April 2008 and there have been several YUI
            >>
            > versions
            >
            >> in between, you might still have to learn about the Loader if it
            >>
            > doesn't
            >
            >> work with the newer version of YUI.
            >>
            >> Satyam
            >>
            >>
            >> puff01824 wrote:
            >>
            >>> I'm a bit new to YUI working on a site that uses Django templates and
            >>> am looking for some best practices advice concerning YUI script tags.
            >>>
            >>> In my case, I've a base.html file that contains the basic page layout
            >>> for all pages in the site. It uses a couple of YUI components and
            >>> I've placed the appropriate YUI script tags in base.html. A second
            >>> file, baseMap.html, extends base.html adding features needed by a
            >>> 'map' set of pages in the site. It requires additional YUI
            >>>
            > components
            >
            >>> and I've placed the appropriate YUI script tags there. Finally, a
            >>> third file, edit.html, extends baseMap.html adding features to
            >>>
            > support
            >
            >>> the page. It requires additional YUI components and I've placed the
            >>> appropriate YUI scripts in it.
            >>>
            >>> This kind of structure is common in templating systems where there is
            >>> a base HTML file that is progressively extended by additional HTML
            >>> files until a final page is created.
            >>>
            >>> While what I'm currently doing works, I'm concerned about YUI script
            >>> tags such as:
            >>>
            >>> * Insuring proper YUI load order. I understand that YUI can be
            >>> sensative to script load order.
            >>> * Insuring that dependencies are loaded.
            >>> * Taking advantage of YUI rollup and combo handling.
            >>>
            >>> Is there a "best practices" approach to dealing with this situiation?
            >>>
            >>> Regards,
            >>> puff
            >>>
            >>>
            >>>
            >>>
            >>>
            >>>
            > ------------------------------------------------------------------------
            >
            >>> No virus found in this incoming message.
            >>> Checked by AVG - www.avg.com
            >>> Version: 8.0.233 / Virus Database: 270.10.16/1929 - Release Date:
            >>>
            > 01/31/09 20:03:00
            >
            >>>
            >
            >
            >
            > ------------------------------------
            >
            > Yahoo! Groups Links
            >
            >
            >
            > ------------------------------------------------------------------------
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG - www.avg.com
            > Version: 8.0.233 / Virus Database: 270.10.16/1930 - Release Date: 02/02/09 07:51:00
            >
            >
          • puff01824
            Thanks Satyam! For the moment I m loading YUI s CSS statically (not with YUI loader) before my CSS. That addresses the first problem and since I generally
            Message 5 of 7 , Feb 3, 2009
            • 0 Attachment
              Thanks Satyam!

              For the moment I'm loading YUI's CSS statically (not with YUI loader)
              before my CSS. That addresses the first problem and since I generally
              need the YUI CSS on all pages is not an issue.

              The second issue is still outstanding. For the moment I'm considering
              hiding the page's body div until after YUI is available and the page
              properly initialized. Since I'm also displaying a 'loading' banner that
              should take care of most of the second issue. The part that is not
              addressed concerns tinyMCE which I'm using on some pages. It appears
              that it does some dynamic loading as well so that not all the tinyMCE JS
              is in hand even after YUI loader reports success. It looks like I'll
              have to sort through how to tell when tinyMCE is ready to completely
              solve the bogus page layout issue.

              Regards,
              puff


              --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              >
              > You would need to put the styles you still want after the modules load
              > as another file and define it via addModule with the correct
              > dependencies on the YUI files it overrides so, after the YUI CSS files
              > override those styles in your page, your styles once again override
              > those overridden by YUI.
              >
              > Another alternative is to load your styles statically in your base
              page,
              > not via YUI Loader. The insert() method has a second, optional
              argument
              > that lets you tell it to load only 'js' files or 'css' files.
              >
              > Satyam
              >
              >
              > puff01824 wrote:
              > > Satyam,
              > >
              > > Thanks for the note. I'll look into the link and YUI loader as
              well.
              > >
              > > I'm not actually using Django proper as my app is running on Google
              > > appspot. It uses Django (0.96) templates and can use full Django,
              > > though I'm not currently doing so.
              > >
              > > I've begun to work with the YUI loader but have as yet not found a
              > > completely satisfactory way to use it.
              > >
              > > One issue I've encountered is with CSS. YUI loader appears to load
              > > YUI components serially and async to the page load. One consequence
              > > of this is that some YUI CSS is getting loaded AFTER my page's CSS
              so
              > > that the page's desired CSS is getting stepped on (I'm modifying
              some
              > > of the default YUI CSS). Presumably, a dependency can take care of
              this.
              > >
              > > Another issue I've encountered has to do with initial page display.
              > > When using YUI loader onload fires BEFORE all the YUI components are
              > > loaded. I wait for the YUI loader success event to fire but there
              is
              > > a brief but very bizarre page display until YUI is loaded and I can
              > > begin to use YUI components to properly display the page.
              > >
              > > Can anyone provide any insight into how to best address these
              issues.
              > >
              > > Regards,
              > > puff
              > >
            • Satyam
              Did you try YUI s Rich Text Editor? It will spare you the trouble of dealing with two different libraries. Satyam
              Message 6 of 7 , Feb 4, 2009
              • 0 Attachment
                Did you try YUI's Rich Text Editor? It will spare you the trouble of
                dealing with two different libraries.

                Satyam


                puff01824 wrote:
                > Thanks Satyam!
                >
                > For the moment I'm loading YUI's CSS statically (not with YUI loader)
                > before my CSS. That addresses the first problem and since I generally
                > need the YUI CSS on all pages is not an issue.
                >
                > The second issue is still outstanding. For the moment I'm considering
                > hiding the page's body div until after YUI is available and the page
                > properly initialized. Since I'm also displaying a 'loading' banner that
                > should take care of most of the second issue. The part that is not
                > addressed concerns tinyMCE which I'm using on some pages. It appears
                > that it does some dynamic loading as well so that not all the tinyMCE JS
                > is in hand even after YUI loader reports success. It looks like I'll
                > have to sort through how to tell when tinyMCE is ready to completely
                > solve the bogus page layout issue.
                >
                > Regards,
                > puff
                >
                >
                > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                >
                >> You would need to put the styles you still want after the modules load
                >> as another file and define it via addModule with the correct
                >> dependencies on the YUI files it overrides so, after the YUI CSS files
                >> override those styles in your page, your styles once again override
                >> those overridden by YUI.
                >>
                >> Another alternative is to load your styles statically in your base
                >>
                > page,
                >
                >> not via YUI Loader. The insert() method has a second, optional
                >>
                > argument
                >
                >> that lets you tell it to load only 'js' files or 'css' files.
                >>
                >> Satyam
                >>
                >>
                >> puff01824 wrote:
                >>
                >>> Satyam,
                >>>
                >>> Thanks for the note. I'll look into the link and YUI loader as
                >>>
                > well.
                >
                >>> I'm not actually using Django proper as my app is running on Google
                >>> appspot. It uses Django (0.96) templates and can use full Django,
                >>> though I'm not currently doing so.
                >>>
                >>> I've begun to work with the YUI loader but have as yet not found a
                >>> completely satisfactory way to use it.
                >>>
                >>> One issue I've encountered is with CSS. YUI loader appears to load
                >>> YUI components serially and async to the page load. One consequence
                >>> of this is that some YUI CSS is getting loaded AFTER my page's CSS
                >>>
                > so
                >
                >>> that the page's desired CSS is getting stepped on (I'm modifying
                >>>
                > some
                >
                >>> of the default YUI CSS). Presumably, a dependency can take care of
                >>>
                > this.
                >
                >>> Another issue I've encountered has to do with initial page display.
                >>> When using YUI loader onload fires BEFORE all the YUI components are
                >>> loaded. I wait for the YUI loader success event to fire but there
                >>>
                > is
                >
                >>> a brief but very bizarre page display until YUI is loaded and I can
                >>> begin to use YUI components to properly display the page.
                >>>
                >>> Can anyone provide any insight into how to best address these
                >>>
                > issues.
                >
                >>> Regards,
                >>> puff
                >>>
                >>>
                >
                >
                >
                >
                > ------------------------------------
                >
                > Yahoo! Groups Links
                >
                >
                >
                > ------------------------------------------------------------------------
                >
                >
                > No virus found in this incoming message.
                > Checked by AVG - www.avg.com
                > Version: 8.0.233 / Virus Database: 270.10.17/1931 - Release Date: 02/02/09 07:51:00
                >
                >
              • puff01824
                Satyam, I did look at the YUI offering. While it s OK for relatively simple things, it did not appear to offer as much functionality as tinyMCE, particularly
                Message 7 of 7 , Feb 8, 2009
                • 0 Attachment
                  Satyam,

                  I did look at the YUI offering. While it's OK for relatively simple
                  things, it did not appear to offer as much functionality as tinyMCE,
                  particularly WRT tables and templates.
                  Since I'm offering wiki support and would like to have a WYSIWYG editor
                  I've been using tinyMCE.

                  I did manage to sort through the load issues as tinyMCE provides a
                  callback function. The only issue remaining in that area is a brief
                  delay between when all the JS loads and the display is actually updated.
                  That seems to be an issue with the browser and machine performance so
                  there doesn't appear to be much that can be done about it.

                  Thanks again for all your help and advice.

                  Regards,
                  Puff

                  --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                  >
                  > Did you try YUI's Rich Text Editor? It will spare you the trouble of
                  > dealing with two different libraries.
                  >
                  > Satyam
                  >
                  >
                Your message has been successfully submitted and would be delivered to recipients shortly.