Why do some webpages use a little HTML, but so much JavaScript? Someone even used JavaScript to append the HTML like: <div> <span> and so on; the HTML source code was hidden in JavaScript.
Like this:
The modern web is growing greatly in terms of complexity and user expectations.
Users want more complex, rich content, delivered faster. JavaScript provides the capability to enable meeting this demand.
HTML by definition, (HyperText Markup Language) provides zero functionality to a website. It simply displays stuff. And CSS (Cascading Style Sheets), in particular CSS3, provides a minimal level functionality (like import -ing a font for example, or making a div spin or fade in and out)
For anything and everything else, you gotta use JavaScript. From controlling HTML, CSS, retrieving data from APIs (Application Progamming Interface) and handling user input, JavaScript does it all.
Related
I understand that the background page of a Chrome extension is never displayed. It makes sense to me that a background page should contain only scripts. In what situations would HTML markup ever be needed?
At https://developer.chrome.com/extensions/background_pages there is an example with an HTML background page, but I haven't been able to get it to work (perhaps because I am not sure what it should be doing).
Are there any examples of simple Chrome extensions which demonstrate how HTML markup can be useful in a background page?
Historical reasons
The background page is, technically, a whole separate document - except it's not rendered in an actual tab.
For simplicity's sake, perhaps, extensions started with requiring a full HTML page for the background page through the background_page manifest property. That was the only form.
But, as evidenced by your question, most of the time it's not clear what the page can actually be used for except for holding scripts. That made the entire thing being just a piece of boilerplate.
That's why when Chrome introduced "manifest_version": 2 in 2012 as a big facelift to extensions, they added an alternative format, background.scripts array. This will offload the boilerplate to Chrome, which will then create a background page document for you, succinctly called _generated_background_page.html.
Today, this is a preferred method, though background.page is still available.
Practical reasons
With all the above said, you still sometimes want to have actual elements in your background page's document.
<script> for dynamically adding scripts to the background page (as long as they conform to extension CSP).
Among other things, since you can't include external scripts through background.scripts array, you need to create a <script> element for those you whitelist for the purpose.
<canvas> for preparing image data for use elsewhere, for example in Browser Action icons.
<audio> for producing sounds.
<textarea> for (old-school) working with clipboard (don't actually do this).
<iframe> for embedding an external page into the background page, which can sometimes help extracting dynamic data.
..possibly more.
It's debatable which boilerplate is "better": creating the elements in advance as a document, or using document.createElement and its friends as needed.
In any case, a background page is always a page, whether provided by you or autogenerated by Chrome. You can use all the DOM functions you want.
My two cents:
Take Google Mail Checker as an example, it declares a canvas in background.html
<canvas id="canvas" width="19" height="19">
Then it could manipulate the canvas in background.js and call chrome.browserAction.setIcon({imageData: canvasContext.getImageData(...)}) to change the browser action icon.
I know we could dynamically create canvas via background.js, however when doing something involving DOM element, using html directly seems easier.
From the tutorial
But there's a problem! Our rendered comments look like this in the
browser: "<p>This is <em>another</em> comment</p>". We want those tags
to actually render as HTML.
That's React protecting you from an XSS attack. There's a way to get
around it but the framework warns you not to use it:
...
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
This is a special API that intentionally makes it difficult to insert raw HTML, but for Showdown we'll take advantage of this backdoor.
Remember: by using this feature you're relying on Showdown to be secure.
So there exists an API for inserting raw HTML, but the method name and the docs all warn against it. Is it safe to use this? For example, I have a chat app that takes Markdown comments and converts them to HTML strings. The HTML snippets are generated on the server by a Markdown converter. I trust the converter, but I'm not sure if there's any way for a user to carefully craft Markdown to exploit XSS. Is there anything else I should be doing to make sure this is safe?
Most Markdown processors (and I believe Showdown as well) allow the writer to use inline HTML. For example a user might enter:
This is _markdown_ with a <marquee>ghost from the past</marquee>. Or even **worse**:
<script>
alert("spam");
</script>
As such, you should have a whitelist of tags and strip all the other tags after converting from markdown to html. Only then use the aptly named dangerouslySetInnerHTML.
Note that this also what Stackoverflow does. The above Markdown renders as follows (without you getting an alert thrown in your face):
This is markdown with a ghost from the past. Or
even worse:
alert("spam");
There are three reasons it's best to avoid html:
security risks (xss, etc)
performance
event listeners
The security risks are largely mitigated by markdown, but you still have to decide what you consider valid, and ensure it's disallowed (maybe you don't allow images, for example).
The performance issue is only relevant when something will change in the markup. For example if you generated html with this: "Time: <b>" + new Date() + "</b>". React would normally decide to only update the textContent of the <b/> element, but instead replaces everything, and the browser must reparse the html. In larger chunks of html, this is more of a problem.
If you did want to know when someone clicks a link in the results, you've lost the ability to do so simply. You'd need to add an onClick listener to the closest react node, and figure out which element was clicked, delegating actions from there.
If you would like to use Markdown in React, I recommend a pure react renderer, e.g. vjeux/markdown-react.
I'd like do this programmatically:
Given a page URL, I need to get all links on the page. What's important is that at least 3 pieces of link info must be obtained: anchor text, href attribute value, absolute position of the link on the page.
Java CSSBox library is an option, but it's not fully implemented yet(the href attribute value cannot be obtained at the same time and some extra mapping must be done with additional library such as Jsoup). What's more, the CSSBox library renders a page really slow.
It seems that Javascript has all functions available but we have to inject the javascript code into the page and write a driver to take advantage of existing browsers. Scripting languages such as Python and Ruby have support for this as well. It is hard for me to find out the most handy tool.
Does PHP's DOM manipulation library help you? http://www.php.net/manual/en/book.dom.php
I am a designer whose main marketing strategy is multi browser compatibility. I assure my clients that the site will work even in IE6 (!).
Of late i have been pondering over the question of moving to HTML 5. The reason behind my apprehension is that IE6 is still a major player in terms of market share and i don't want to lose it.
Is there any way of moving to HTML 5 and still promise multi browser compatibility?
Thank you.
Yes, by taking baby steps.
To start with, you can switch to the HTML5 doctype: <!DOCTYPE html>. This switches just about every browser out there into "standards" mode, the same as an HTML 4 strict doctype.
Then there's the new elements. Internet Explorer can't natively style them, but a handy little bit of javascript fixes that up: http://code.google.com/p/html5shiv/
If you or your tools aren't ready for that (e.g. some CMSs strip out HTML tags they don't understand), then in the interim you could use classes, e.g. instead of <article>, use <div class="article">.
As for the new form controls, they're backwards compatible too. So <input type="email"> will work exactly the same way as <input type="text"> in browsers that don't support it. If necessary you can use javascript to fill in the gaps. See http://diveintohtml5.ep.io/forms.html for more on that.
As for <video> and <audio>, you can fall back to <object> for older browsers - e.g. http://camendesign.com/code/video_for_everybody. Meanwhile <canvas> can be emulated in javascript, e.g. http://code.google.com/p/explorercanvas/.
"To HTML5" is a fairly broad statement. Even if you have the new HTML5 doctype set (the simple <!DOCTYPE html>) you don't have to go all out and use every aspect of HTML5, only what is appropriate to your project.
If you are keen to get on board with HTML5, I recommend reading "How to use HTML5 in your client work right now" for examples of how you can use certain aspects of HTML5 with few (if any) drawbacks.
Disclaimer: I am one of the curators of HTML5 Doctor.
From there it boils down to whether or not your project will benefit from the features of HTML5 and if you can afford to implement these features. For example, if all of your IE users also have JavaScript enabled you can use html5shiv to get IE to recognise the new elements, enabling you to use them and style them.
As for the new JS APIs and CSS properties that people often group with the term "HTML5", unless your site absolutely requires that you use the technology (perhaps something like geolocation), then it could simply be a matter of progressive enhancement. If webkit/firefox users get rounded corners from CSS3 and IE users don't, is that really such a big deal?
As a rule of thumb I would not develop a site purely in HTML 5 but would consider using it for certain, richer, parts of the site. Remember that it is still not recommended by W3C and IE barely supports it at all.
This blog has a good discussion on it: http://blogs.forrester.com/ronald_rogowski/10-05-10-what_should_customer_experience_professionals_do_about_html5
yes there are several ways.
but if you DONT need html5 elements like video tags, or html5 api's like browser databases, stay at XHTML,because it is still not recommended by W3C. There you can use simple fallbacks for ie6.
do you need html5 elements and apis?
As a last resort you could use Chrome Frame: http://code.google.com/chrome/chromeframe/
As for "a major player in terms of market share", that really depends on your audience. Even Microsoft is marketing its new IE versions rather aggressively. And I don't think there's shame in charging your IE 6 users an extra plugin installation fee. After all, their browser is 10 years old, which is about 100 Internet years, isn't it?
At what stage does my input in the textarea change from being this raw text, and become HTML?
For example, say I indent 4 spaces
like this
Then the WMD Showdown.js will render it properly below this textarea I type in. But the text area still literally contains
like this
So is PHP server side responsible for translating all the same things the showdown.js does to permanently be HTML in the SoF Database?
There are some other posts here about this, but basically it works like this. Or at least this is how I do it on my website using WMD; see my profile if you're interested in checking out my WMD implementation.
User enters the Markdown on the client, and showdown.js runs in real time in the browser (pure client-side JavaScript; no AJAX or anything like that) to give the user the preview.
Then when the user posts to the server, WMD sends the Markdown (you have to configure WMD to do this though; by default WMD sends HTML).
Run showdown.js server-side to convert the Markdown to HTML. In theory you could use some other method but it makes sense to try to get the same transformation on the server that the user sees on the client, other than any HTML tag filtering you want to do server-side.
As just noted, you'll need to do appropriate HTML tag filtering to avoid cross-site scripting (XSS) issues. This is both important and nontrivial, so be careful.
Save both the Markdown and the HTML in the database—the Markdown because if users want to edit their posts, you want to give them the Markdown, and the HTML so you don't have to transform Markdown to HTML every time you display answers.
Here are some related posts.
Convert HTML back to Markdown for editing in wmd: Tells how to configure WMD to send Markdown to the server instead of HTML.
What HTML tags are allowed on Stack Overflow?: Useful for thinking about HTML tag filtering.
Well first of all StackOverflow is built on ASP.NET, but yes essentially the characters in the rich text box gets translated back and forth.