We have an existing AEM application where there are 100s of pages. On most of the pages, different css files are getting loaded via a separate network call. We need to optimize this. What I am thinking is if we can:
1. Author the list of css files on the page as a page property.
2. In our code, this page property is read and all the css files mentioned as a property value get combined and rendered on the page. Similar to what is done in css.txt file or embed property.
Please suggest.
Their are few ways to reduce the network calls for css files in AEM
1) Add the css files at the template level so that all the css files are loaded once.
2) Instead of adding the category of the clientlibs use the embed property of the clientlibs. AEM will combine all the clientlibs provided in the embed property into a single clientlib and their will be only network call. But the size of the css file may increase after combining and it will effect the page load time for the first time.
But if your requirement is to author the css files then I will suggest you have a dropdown kind of property in your dialog where all your css files are displayed and the author can select the css according to the need. Once selected then you can apply those css to the html by reading through sightly.
So, it seems you don't want to or cannot use the clientlib functioanlity which is an ootb AEM feature.
No matter what solution you choose - maybe a frontend JavaScript snippet that can decide which CSS files would be needed, or some logic that builds CSS includes at render time based on the components used in the page, or something completely different - I would strongly suggest not to put the CSS files to be used in the editor's responsibility.
If they need some additional styles to be set, use the Adobe Style System. But do not abuse page properties for CSS file configurations.
I mean "hundreds of pages" sounds like a rather small site, but it might still increase your maintenance efforts a lot, when the first people start to complain about wrong colors or font sizes...
Related
Is it possible to build a LibreOffice document from code similar to the way a web page is built from HTML and CSS? Can one write an ODF file in which the content and styling are separate, and then/view open in LibreOffice? If so, can one write the code in a text editor as done for HTML/CSS?
There area two reasons I now ask. 1) When I need to make a style change in LibreOffice I have to manually make the same adjustments in a hundred places, such as changing the style of block quotes. 2) I'd like to build documents from a database of text.
I found a question on this in relation to databases but it was about eight years old.
Thank you for any direction you may be able to provide.
Unzip an .odt file that contains styles. You will see two files, content.xml and styles.xml. Edit these files using a text editor and then zip the folder back up to get a modified .odt file.
Be aware that there are two types of styles in the XML files. Named styles are what most people think of as styles, whereas automatic styles are custom formatting, like when you select some text and change the font directly.
The link from tohuwawohu describes utilities to work programmatically with the file. Also as mentioned in the link, it's not too hard to write code yourself. For example in python, import the built-in libraries zipfile and xml.etree.
When I use the Dev Tools coverage tab to search for unused CSS (instructions), will it list in its report all CSS files loaded on the page? Or will it not report CSS files with 0% coverage?
In practice, I think am seeing the latter, i.e. so far I have never seen the coverage tab list a file with 100% unused bytes. But I just want to make sure that is by design, rather than some error I need to resolve. Also, the instructions don't make it clear that certain files will be omitted from the reporting.
Coverage analyses all css files which be apply for page. You can easy check it, just create new css file, use css styles, and import/unimport this css file and run Coverage.
We have various people updating our AEM website however when they copy and paste from word or from online it retains the HTML. I'm wondering if AEM has any built-in way of sanitizing the input so I don't need to build one.
If you are using Rich Text Editor field in the dialog then the text will be parsed and some tags will be stripped. Take a look here for more information about how to configure it and how it works.
We had a rich text edit component with same issue wherein authors were able to place HTML styling onto RTE and the placed styles were colliding with application styles and was breaking components. Fix was, we stripped out all HTML styling using jsoup API before rendering back on screen.
The usual approach in AEM is to protect the user on output (i.e. take the input as-is and use the built-in XSS API when rendering that input).
https://docs.adobe.com/docs/en/cq/5-6-1/deploying/security_checklist.html#Protect%20against%20Cross-Site%20Scripting%20%28XSS%29
https://docs.adobe.com/content/docs/en/cq/5-6-1/developing/securitychecklist/_jcr_content/par/download/file.res/xss_cheat_sheet.pdf
I've created a website in AEM and created a design for that website. Initially the design included a folder with images and a css file called static.css. When I specify the cq:designPath on a node in my website's content, the static.css file gets included automatically (/etc/designs/mywebsite/static.css); AEM also tries to include another file (/etc/designs/mywebsite.css). If the static.css file doesn't exist, it will NOT get included, but the mywebsite.css file gets included ('ed to) regardless of whether or not it exists. The documentation I have found (see here) suggests that you can include any number of css files in your design, but when I try to add addition css files to the /etc/designs/mywebsite/ folder, none of them get included. Am I missing something here? Should all the css files under /etc/designs/mywebsite/ be included in the site, or is it intended that only /etc/designs/mywebsite.css and /etc/designs/mywebsite/static.css are included automatically and any additional files need to be included manually?
The .css extension on the design node invokes a servlet (/libs/wcm/core/components/designer/designer.css.java) which dynamically generates CSS based on various nodes from the design's jcr:content node into CSS.
When a content author switches to design mode (WCMMode=Design), the edit dialogs save to the either the currently-applied design or the default (/etc/designs/default) design's jcr:content node. The template used to create the page, along with the path of the component being edited will determine the path under the jcr:content node where the design settings are saved.
For instance, if you edit an out-of-the-box parsys component you will see an option to editing the "Cell Padding"
If you enter a CSS padding value into the text box and click OK, the value will be saved to a div.padding property at the following location:
/etc/designs/mydesign/jcr:content/mytemplate/par/section[div.padding="30px"]
The servlet will then render the following in the design CSS:
.mytemplate .par div.section {
padding: 8px;
}
The class that actually converts the nodes to CSS is the CSSWriter in the cq-wcm-core jar.
For more information, see a similar question I asked a while back:
In Adobe AEM, how does the parsys component inject styles into the design css file?
Just a short correction. Actually it is not: /etc/designs/mydesign/jcr:content/mytemplate but instead /etc/designs/mydesign/jcr:content/my_page_component
That means if two pages have different templates but share the same page rendering component, then they will share the same design configuration and their components will write at the same location in Design Mode.
I have take over the management of a TYPO3 webpage, and Ive realized that everyday that goes by, it grows 1GB in CSS and JS files alone, "merged-ffff2d33c1ce910940054845fe400023.js" and so. Right now my compressor folder is 15GB big. It's huge!
It seems as if the CMS made a cache version of the CSS and JS with each page hit, but I'm just guessing as I have no idea of what's going on in this folder.
I've compared the files on each subpage, and while some commonalities are found, there's still many lines of difference.
How could I fix this?
I had the same problem when I set
concatenateJs = 1
concatenateCss = 1
compressJs = 1
compressCss = 1
in my typoscript. The problem is that TYPO3 seems to have a bug in compressing the JS and CSS files. I tested with 6.2.10.
With every request from every user/browser TYPO3 generates a new CSS file in typo3temp/compressed every day.
Deactivating compression
compressJs = 0
compressCss = 0
solves the problem and TYPO3 always delivers the same cached CSS file.
I have found that the CSS genereated by CSS Styled content is actually aware of which elements are on each page. So if one page has an image with text on the right, the needed styles for this is included, and if another page does not have an image with text on the right, this CSS is not generated. This results in the CSS actually being different on almost all pages, resulting in many merged CSS files.
I'm missing an option to just include all the CSS, not matter if its used or not. This might create a substantially larger CSS file, but at least it will be the same file on alle pages, and thus cacheable in the browser.
I would start to compare javascript files merged.
Can you tell me what is the difference ?
For example there can be a case when some javascript is generated with page id like
<script>
var pageId = 77;
</script>
If there is option turn on to move inline javascript to external file then this will be different for each page and finally merger will create new merged version for every page.
So the most important question for now is what is the difference beetwen merged files.
EDIT: The solution for you would be to remove all third part extensions. Clear the /compress/ folder. Then install those third party ext one by one and see which one is causing the problems.