Let's say I have a custom polymer element that is starting to get big. I want to be able to break up the element's template into smaller chunks, move these chunks to other html files and include these chunks in the main template file. Is this possible? Is it a good idea? Is there a convenient way of doing it?
just make more custom elements and include those html files as normal. you can nest custom elements forever.
Related
I have a base asciidoc file where I want to reference other html files. In my current solution, I render them via include all on one page and add a reference to the toc.
This messes up in a very long scrollable page.
That is generally fine but I would prefer the following:
For each addtional html I want to add e reference to the toc only. When klicking this ref, I want to just render the specific html.
Is there a way to do this with the template toc or do I have to use a custom solution?
What you are asking for (I think) is one HTML page per Asciidoc markup file, with a common TOC/navigation between them. Normally, this capability is called "chunking", at least the way that DocBook does it.
Unfortunately, asciidoctor doesn't have a chunking capability. If you have multiple Asciidoc files, they can be converted to HTML easily, but assembling a common TOC is extra work. Also, cross-reference links between Asciidoc pages is not handled.
You might be interested to learn about Antora (https://antora.org/). It produces a static HTML site from one or more Git repos containing Asciidoc markup files, and each Asciidoc page becomes an HTML page, and there is a common TOC plus cross-reference links. It is, quite likely, a good solution for your current situation.
For first, I'm really sorry for my English.
My question:
Let's say you code a few HTML pages with one CSS file.
Now, not every HTML page uses everything out of the CSS file.
How can I see what a specified page is using out of the CSS in the easiest way?
The purpose:
I have a CSS file with more than 4500 lines. Instead to search the whole HTML for the CSS classes etc. and remove them, I'd like to see everything that this page is using - So, everything in CSS, what is not needed, to delete.
in this page it's said :
When your webpage loads, the browser takes certain steps that
determine how the page will load (this is a simplified version, but
basically what happens): Browser downloads HTML file It parses (looks
through) the HTML It encounters something it must load (image,
external CSS file, etc.) and stops parsing HTML It loads the external
resource If external resource is CSS or Javascript it then parses that
file It then continues to parse the HTML until it comes to another
resource that must be loaded
So why alot people (and myself) were looking for a solution to capture load event on LINK and to detect When is a stylesheet really loaded as we can be sure that a browser won't dislpay a non-styled html if we place its css before it?
There may not be a need to detect this but plenty of reasons to do so. If your CSS is sizing an element, or using pseudo elements that add content to your document, you may wish to know when the CSS has completed loading before trying to manipulate those same elements.
For example, if your CSS is loading an image, and that image winds up resizing other elements on the page, you may not want your javascript interfering with that sizing before it's complete.
If you add elements with CSS ::before or ::after, you want those elements inserted before allowing javascript to manipulate them.
But if you aren't doing such things, then you don't need to detect them.
I have a handlebars template file that I'd like to minify. I found a couple questions that were related to my issue on StackOverflow, but nothing exactly like it that had an answer. My issue is that spaces that are within the templated values are getting removed when I run the code through a minifier.
Example:
I have this line of code in my template file:
<div>{{{displayName}}} - {{cost}}</div>
When I use the un-minified file to render the page, I get entries like:
ProductName - $5.50
which is what I want. After running the template through an html minifier, my template line now looks like this:
<div>{{{displayName}}}-{{cost}}</div>
and the entries on the rendered page look like:
ProductName-$5.50
Not optimal. Now, I understand that I could just run through the template and put in non-breaking spaces into all the places where I'd like spaces to be. Nice. Simple. Easy... relatively.
But.
A secondary, and larger, issue comes into play (and what's the point of going through and putting in all those non-breaking spaces into my template file to avoid this situation with the html minifier if there are more issues) when I'm selectively adding attributes or classes to a given html element.
Example:
I also have lines in my template files that look like:
<div class="paymentMethod{{#if paymentSelected}} active{{/if}}">
On the condition where my template (handlebars) variable "paymentSelected" is true the html shows as:
After minification, however the minified template file contains:
<div class="paymentMethod{{#if amazonAndPaypal}}active{{/if}}">
which makes the html on the page show as:
which, consequently, messes up all of my css and javascript because there is now one unrecognized class on the element instead of two correct classes.
Again, there is a way of getting around this. I could just place all of the class definitions into the template variables. So, my new template would be:
<div class="{{#if amazonAndPaypal}}paymentMethod active{{else}}paymentMethod{{/if}}">
This kind of goes against the idea of removing redundancy though. So I don't like it. And this is a fairly simple case, with only two possible classes.
I'm sure there are more possibilities for hassle with html minification of template files, but I think I've shown my point.
Now, all of that explanation comes to my question:
Is there a tool out there that will minify html but ignore spaces that are between opening and closing template tags? For me, those spaces are similar to the spaces between words. I don't want all the spaces between the words of a sentence removed any more than I want the spaces within my template tags to be removed.
I also went searching for a generic sed solution, but didn't find anything in that direction either.
Could you just use &nbsp;?
<div class="paymentMethod{{#if paymentSelected}} active{{/if}}">
Okay, so I figured out a better option, and this may be incredibly obvious to some but I'm pretty new to the whole Handlebars gig.
A better solution to minifying the html templates would be to precompile the templates and to then minify the resulting javascript. This way, I also get the savings of no compilation time on the browser side and (because I'm using Handlebars as my templating language) loading the smaller runtime script.
Granted, this solution doesn't explicitly answer the question I posed, it does solve the ultimate problem I'm trying to solve, which is to minimize the page-load time on a browser by doing everything I can to the necessary assets prior to a browser downloading them.
I am working on an app for doing screen scraping of small portions of external web pages (not an entire page, just a small subset of it).
So I have the code working perfectly for scraping the html, but my problem is that I want to scrape not just the raw html, but also the CSS styles used to format the section of the page I am extracting, so I can display on a new page with it's original formatting intact.
If you are familiar with firebug, it is able to display which CSS styles are applicable to the specific subset of the page you have highlighted, so if I could figure out a way to do that, then I could just use those styles when displaying the content on my new page. But I have no idea how to do this........
Today I needed to scrape Facebook share dialogs to be used as dynamic preview samples in our app builder for facebook apps. I've taken Firebug 1.5 codebase and added a new context menu option "Copy HTML with inlined styles". I've copied their getElementHTML function from lib.js and modified it to do this:
remove class, id and style attributes
remove onclick and similar javascript handlers
remove all data-something attributes
remove explicit hrefs and replace them with "#"
replace all block level elements with div and inline element with span (to prevent inheriting styles on target page)
absolutize relative urls
inline all applied non-default css atributes into brand new style attribute
reduce inline style bloat by considering styling parent/child inheritance by traversion DOM tree up
indent output
It works well for simpler pages, but the solution is not 100% robust because of bugs in Firebug (or Firefox?). But it is definitely usable when operated by a web developer who can debug and fix all quirks.
Problems I've found so far:
sometimes clear css property is not emitted (it breaks layout pretty badly)
:hover and other pseudo-classes cannot be captured this way
firefox keeps only mozilla specific css properties/values in it's model, so for example you lose -webkit-border-radius, because this was skipped by CSS parser
Anyway, this solution saved lot of my time. Originally I was manually selecting pieces of their stylesheets and doing manual selection and postprocessing. It was slow, boring and polluted our class namespace. Now I'm able to scrape facebook markup in minutes instead of hours and exported markup does not interfere with the rest of the page.
A good start would be the following: make a pass through the patch of HTML you plan to extract, collecting each element (and its ID/classes/inline styles) to an array. Grab the styles for those element IDs & classes from the page's stylesheets immediately.
Then, from the outermost element(s) in the target patch, work your way up through the rest of the elements in the DOM in a similar fashion, eventually all the way up to the body and HTML elements, comparing against your initial array and collecting any styles that weren't declared within the target patch or its applied styles.
You'll also want to check for any * declarations and grab those as well. Then, make sure when you're reapplying the styles to your eventual output you do so in the right order, as you collected them from low-to-high in the DOM hierarchy and they'll need to be reapplied high-to-low.
A quick hack would be to pull down their CSS file and apply it to the page you are using to display the data. To avoid any interference you could load the page into an IFrame wherever you need to display it. Of course, I have to question the intention of this code. Are you allowed to republish the information you are scraping?
If you have any way to determine the "computed style" then you could effectively throw away the style sheet and, ****gasp****, apply inline styles using all of the computed styles' properties.
But I don't recommend this. It will be very bloated.