since we are using dust.js to write templates, we have extended it to write css and js. For css and js our requirement is minimal. We just want to keep the location of assets in a variable which is passed to css and js during preprocessor stage. I tested it in all possible scenarios and it worked. Is there any side effect of using it this way?
I am not using less or sass because our requirement is very limited.
In the end, dust.js is just a text parser-- it doesn't care what sort of text you throw at it.
You should be careful to configure whitespace suppression if you are using dust to parse a whitespace-sensitive language like Javascript (newlines are very important for meaning in Javascript due to one-line comments and automatic semicolon insertion). For CSS, whitespace has no effect.
Related
Is there a way to mass convert existing Vue.js templates (single file components) into Pug (Jade)?
Something similar to the erb2slim gem for rails.
I find Pug much more legible and its impractical to rewrite an existing open source project.
Many thanks.
There are a few Jade converters like Html2Jade as you're just converting the html. It even appears to keep vue directives including shorthand :bind and #on.
The downside is that it's a manual converter so you will have to paste in each component separately.
I have created a custom XBL component that includes very little markup. It primarily consists of CSS, JavaScript and a <div>. The JavaScript then writes the markup to the DOM, inside the <div>. Its CSS specifies styles for a lot of specific element IDs. This works just fine in Form Runner, but not with the Server Side Embedding API.
The Server Side Embedding API appears to be rewriting the CSS file. It prefixes all the CSS selectors for specific IDs with o0. For example #MultiMousePosition-cwm is changed to #o0MultiMousePosition-cwm. This might work fine if the markup of the elements were included in the XBL component. Then it could be rewritten. But since the markup is generated by JavaScript after the page is loaded, this doesn't happen.
Is the rewrite of CSS and element IDs done in case the API is used to include multiple forms in the same page?
Is there a way to prevent the CSS from being rewritten? Or is there some other way to deal with this problem?
I tried to use <xxbl:global> but it looks like that won't work for CSS resources.
The JavaScript is a complex library created by another developer and rewriting it to avoid this issue would take a significant amount of work, if it is possible.
The rewrite of ids is done to prevent id conflicts in the resulting HTML page. That can include supporting multiple forms, but also possible conflicts with other content on the page.
Currently there is no way to disable rewriting. It wouldn't be hard to add as a configuration property, possibly on the XBL components (though some things would need to be rewritten on some not, which might make the configuration more difficult), or globally, for users who know for sure they won't have id conflicts.
I wondered why Polymer elements need a dash in custom elements name like <my-component> while this is not necessary for Angular components especially as Angular components also use ShadowDOM.
** Edit**
It doesn't even seem to be suggested good practice in Angular.
The HTML spec allows you to use unknown tags (<tab>, <panel>) without the HTML parser throwing a fit. To their benefit, Angular uses this behavior for their directives to make the components like native.
Tags that don't have a - inherit from HTMLUnknownElement. There's a good explanation of the upgrade process here: HTML5Rocks - Custom Elements - How elements are upgraded
Since Angular directives were designed in a time before the Custom Elements spec existed, they don't use a -. It's the standard that requires element names contain a -.
The dash is not required by Angular since there is no technical reason to require it. However, all large projects I have worked on prefix all components and directives with a two character and then dash prefix, e.g "ab-tab".
First, using dashes in names makes your syntax compatible with the Custom Elements standard, although Angular doesn't depending the spec.
Second, it helps with organization. Standard Angular directives are all prefixed with 'ng-'. By using your own prefix, people reading your code will be able to quickly distinguish between components from different libraries.
I am trying to extract background-url from a div using Nokogiri but am not able parse background-url of it.
While Searching on StackOverflow I found this link
Parsing: Can I pick up the URL of embedded CSS Background in Nokogiri?
but the solution given there doesn't work.
Nokogiri is not a web browser. It stands on top of libxml2 to provide fast and excellent parsing of XML and HTML, and manipulation and extraction of data from this.
It only deals with the HTML in a web page. It does not run any JavaScript. It does not apply CSS to the DOM. There is no way to use Nokogiri to find a CSS style applied to an element unless it is directly on the style="..." attribute on that element. (And even then you would need to use something else, like regex, to parse the CSS therein.)
You will want to use something else, like a headless browser controlled by Ruby, e.g. Watir or Selenium, if you want to process a web page and treat it like a web browser does.
Ok so this is a little random but..
Using MVC 3 (with Razor view engine) with Knockout.js which uses jQuery Templating i've come across a little problem i'm sure is possible to solve.
In order to use jQuery-Tmpl you need to supply a template in
<script type="text/html">
...template elements go here...
</script>
Now the problem is that the razor view engine doesn't seem to generate HTML inside of these specific script tags. It handles standard html, (script type="text/javascript") fine but appears to just not do anything with the aforementioned script tag.
Does anyone know how to get around this issue i.e. how to use MVC 3 Razor with jQuery-Tmpl?
There is a pretty good solution in this blog post: http://www.wiredprairie.us/blog/index.php/archives/1204
This creates a "template" helper that emits the script start/end tags.
Otherwise, I have some ideas for putting templates in external files, which would be another way to avoid this issue. It involves storing the templates in .html files and injecting them into the page into script tags. There are certainly many ways that this could be accomplished though on the client or server side, just a few ideas.
A more general approach if you want to keep things in the document is using #Html.Raw to output html without affecting the edit-time syntax state.
For example:
#Html.Raw("<script type='text/x-dot-template' id='awesome_template'>")
<!-- insert some awesomeness here -->
#Html.Raw("</script>")
I happen to like the helper method suggested above a little better, but it has not always been something I was able to implement, so this is an alternative with its own benefits (namely clarity over ease of use and terseness)