Premailer/inline css using phantomjs - javascript

We are aware of premailer which converts styling into inline css and also changes relative urls to absolute urls. There is an online version of it premailer.dialect.ca which provides the same.
I need to use this functionality ie given any url, I need to convert it into premailed version.
However I may have to use this may be thousands of times a day and hence I cant use premailer.dialect.ca api. There is a python-premailer which does the same but I couldnt find any documentation for converting html from given url to premailed version.
How can I achieve this using premailer.py or phantom.js or any other solution? Am I missing some thing? I assume it must take lot of time to write it from scratch.

dialectica.ca provides an API for this kind of premailer operations. It converts any html page..provided their url into inline css based html page.

Related

Javascript src with question mark [duplicate]

This question already has answers here:
Why pass parameters to CSS and JavaScript link files like src="../cnt.js?ver=4.0"?
(9 answers)
Closed 6 years ago.
I have a question. In old project that I'm currently working on I have found this code:
<script type="text/javascript" language="Javascript" src='<%= Page.ResolveUrl("~/javascripts/CardConnectorManager.js?2016071203")%>'></script>
I have:
/javascripts/CardConnectorManager.js
but don't have
/javascripts/CardConnectorManager.js?2016071203
What that question mark is doing and why anybody write such thing?
Maybe this file exists only on server on some bulid stuff thing?
David R's answer is pretty good, but I want to add a little bit info:
Usually there are two approaches for cache-breaking:
Rename file;
Add some hash to the end of the file.
The first approach may be better for some cases (see this question), but can be more painful. How would you keep this file in version control? What if there are many files like this?
The second approach is much easier. You just add something like app.js?_=<some_string>. The <some_string> can be whatever: timestamp, build number or just a random string.
For this approach, you may find it better to use automatic tools like gulp-rev.
Update: Honestly, it would be much better to have a revision number for all statics in the project: html, images, css, js.
There a lot of tools to make this automatic.
Alternatively, there are some technics, for example angular developers have the $templateCache service which allows the developer to put all the project's html (excluding index.html) in a single js file.
It refers to the same CardConnectorManager.js file.
To prevent caching, suffixing date/timestamp while calling calling a .js file is a common practice among developers.
Hope this helps!
Basically the JS file ending with "?" (question mark) followed by some random number is used to forcefully refresh the browser cache for that particular file. Browser's stores the downloaded js files for that website in it's cache memory, to forcefully refresh this it is suffixed with the random number.
In your example if you observe closely, the number specified is nothing but the date time stamp i.e. - the number 2016071203 represents - 2016-07-12 03. If you have updated this file on server, you just need to update the new time-stamp (you can use any random number). The time-stamp is generally used to avoid duplication of number.
So next time whenever you make changes in that JS file, just update that number, so all the clients accessing this file will get updated JS code, not the cached code.
The Question mark (?) is just to handle the caching. It refreshes the file every time on the browser. We use the same technique to refresh the dynamically generated images also.

How do you achieve this kind of HTML escaping/encoding automaticly

I am working on a custom plugin for esri web-app builder and I noticed two things in their dojo widget that I cannot really understand.
there is a cahce property that has a lot of function under it and also this kind fo property "url:widgets/PrintAndShare/templates/Print.html" which is legal by JS, but why using that instead of the standard dojo/text!.template, I see that the template itself is still loaded ( but ignored) - so the question is -how exactly that cached property works.
the main question is - these properties have html encoded in very specific way for example
<div class="gis_PrintDijit">
encoded like this
\x3cdiv class\x3d"gis_PrintDijit"\x3e\r\n
how do I achieve this kind of encoding ? with online tools or even better with some automation, for now I just use manual char replacing but it is really not efficient.
Thanks you all
I do not know if there is a better way.
A simple workaround can be to use encodeURIComponent and then a replace:
var t = "<div>test ok: 100%</div>";
console.log(encodeURIComponent(t).replace(/%/g,"\\x"));

Extract URL from HTML/Text but if URL only shows partial like "/secondpage.html"?

I'm trying to extract a URL from a HTML snippet in string format.
I've been using regex to retrieve the part between href=" and ". However, I noticed that in some cases href links to pages within the website without containing the root URL. For example, a snippet can be like:
<div class="textcontent" id="desc">
<br>
<a rel="nofollow" href="/confirm/url/aHR0cHLy9yYZy50bw%3D%3D/" class="ajaxLink">link</a><br>
Instead of the more usual:
Google
Where I can just use this regex to narrow down my results:
/href\n*=\n*".*?"/
I looked around StackOverflow, and saw a few posts about this (extracting URLs from html/text), and saw a mention of using an external library like JSoup. This is for a Chrome Extension, so I'm hoping to keep it lightweight (if that might be an issue). (JSoup is a Java library not JS).
Are there any good solutions for this "partial URL" problem? Would it be best to just check and append to the URL if root is missing, or would using external library like JSoup be more advised?
Following the direction you took by using a regex, the best approach could be to parse the extracted URL in order to detect one of the following three kinds of URL possibilities:
Protocol://FQDN/Document
/DOCUMENT/
DOCUMENT/
The first case points to an absolute document, the second points to an absolute document but omitting the protocol and the FQDN, and the third points to a relative document.
For the second and third cases you need to know the ommitted information in order to build a complete URL. Assuming you know the URL of the original HTML snippet code, the problem here is to detect what kind of possibility are you facing for each href. If you don't know the original URL, you are in a lack of information, meaning that you can't complete the HREF.

Google Charts - Change Image Name?

Simple question: every chart created with Google Charts, when saved as an image, is named "chart.png". Is there a way to force another name? That way if I export a bunch of QR codes at once I can give them meaningful names.
I couldn't find anything in the documentation or here about simply renaming the .png
The short answer is no. Because the last part of the URL for creating QR codes from Google Charts (which is deprecated and will be phased out 2015-4-20) is chart, that is also the name that most browsers (new Chrome, IE, FF) use as a file name. Also, Google seems to not have provided any way to alter this URL-ending.
The long answer is that it would be possible for you to circumvent this, but not trivial.
Forwarder with forged URL (source)
One option would be to create a PHP-page (or similar) of your own that just presents the content of Googles QR code, and where you control the last part of the URL. For example:
http://example.com/forwarder.php/mychart.png?chs=150x150&cht=qr&chl=Hello+world
You could then use this URL as the src of your image. This would also require you to have som specific settings to allow the above URL format without giving a 404 error message.
Other service
Depending on your requirements for variations of charts, devotion to making this work, and what service you'd like to use for doing this I'd suggest looking for some other way (site/framework) of generating your QR codes that does give you control over this parameter.
Obscure possiblities
Using HTTP headers (not sure if it can be applied to multiple images)
Using download tag on anchor (if seeing the image isn't necessary)

Get access to Stackoverflow's auto-suggest tagging system?

Is there anyway to get access to stackoverflow's awesome tagging system? I would like to borrow Stack's awesome auto-suggest and tag mini-explanation boxes for my own site. Obviously, I can use the jQuery UI auto-suggest for tags but I would really like to also include the cool little tag descriptions as well. If not, can someone tell me where all these explanation/descriptions came from so that I can implement a similar system?
tageditornew.js
Line 308:
$.get("/filter/tags", {q: a,newstyle: !0}, "json").done(function(c) {
C["t_" + a] = c;
StackExchange.helpers.removeSpinner();
b(c)
})
This might help you out!
It turns out that,
the API url is this:
https://stackoverflow.com/filter/tags?q=STRING&newstyle=BOOLEAN
q - Query text.
newstyle - Require new style or not. Result in new style will be returned in JSON with additional information such as synonyms and excerpt.
DEMO: http://jsfiddle.net/DerekL/bXXb7/ (with Cross Domain Requests jQuery plguin)
For example:
https://stackoverflow.com/filter/tags?q=htm
would give you:
"html|99829\nhtml5|16359\nxhtml|4143\nhtml-parsing|1461\nhtml-lists|1328\nhtml5-video|949"
where 99829 is the amount of questions. It took me 15 minutes looking at the source code to find out this api. -_-"
Putting in javascript in new style gives you this: here
[{"Name":"javascript","Synonyms":"classic-javascript|javascript-execution","Count":223223,"Excerpt":"JavaScript is a dynamic language commonly used for scripting in web browsers. It is NOT the same as Java. Use this tag for questions regarding ECMAScript and its dialects/implementations (excluding ActionScript and JScript). If a framework or library, such as jQuery, is used, include that tag as well. Questions that don't include a framework/library tag, such as jQuery, implies that the question requires a pure JavaScript answer."},{"Name":"javascript-events","Synonyms":"javascript-event","Count":5707,"Excerpt":"Creating and handling JavaScript events inline in HTML or through a script."},{"Name":"facebook-javascript-sdk","Synonyms":"","Count":992,"Excerpt":"Facebook's JavaScript SDK provides a rich set of client-side functionality for accessing Facebook's server-side API calls. These include all of the features of the REST API, Graph API, and Dialogs."},{"Name":"javascript-library","Synonyms":"","Count":675,"Excerpt":"A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies."},{"Name":"javascript-framework","Synonyms":"","Count":563,"Excerpt":"A JavaScript framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies."},{"Name":"unobtrusive-javascript","Synonyms":"","Count":340,"Excerpt":"Unobtrusive JavaScript is a general approach to the use of JavaScript in web pages."}]
What you can get from there:
All tags start with javascript
Synonyms
Tag counts
Nice tag descriptions
If you're looking for high-level logic, in a nutshell it's just a custom auto-complete that's blazing-fast.
Whenever you type a tag (i.e. a new word or one separated by a space from previous tags), an AJAX request would be made to the server with a JSON object which is then interpreted by the client-side script and presented in the usable layout.
Comparing the autocomplete JSON objects for letter "h" and word "html" should give you enough insight into how this particular implementation works (if prompted, these can be opened with any text editor).
On a somewhat unrelated note: the autocomplete responses have to be fast. Depending on the complexity of the data autocomplete is run against, you may find how IMDb magic search works intriguing.
Update:
Seeing your comment about accessing the content of the tag library, this may in fact be more of a meta question. I struggle to think of a scenario where using an API if any or just the tag library from an external resource would be beneficial to SO - however content here is provided under Creative Commons so you may be able to use it with proper attribution. This does not constitute legal advice :)

Categories