I have html snippets and i was wondering where I should keep them... For example:
Currently I have the following in my HTML page
<div id="Mailbox" class="ui-corner-all">
<div id="Messages">
<ul class="messageList">
<li class="noMessage">You have no messages</li>
</ul>
</div>
<div class="trashIcon ui-corner-bottom">
Delete Selected Message(s)
</div>
</div>
Then, when the page loads, jquery and javascript turns this into a full functioning mailbox system.
What I am wondering is - Should I bother with the HTML snippet, or just build the entire thing through JS?
Having the markup in your page potentially degrades much better for users with no script. Plus, it's usually easier to work with existing markup than build it completely from scratch with JavaScript.
Sometimes templating can be an appropriate solution. This will not degrade for users without script, but if you have a script-heavy page that needs to create a lot of markup dynamically, templates can make this simpler.
If you find that you are duplicating blocks of markup from page to page, this should probably be addressed server-side by storing the common content in a single location.
Depends if you're writing an application or a website. Does SEO matter? Does accessibility matter? Do you need to support a wide range of browsers and devices?
If not then I'd write it in JS but take a look at some MVC frameworks such as backbone.js or JavaScriptMVC etc. in which case you'll likely want to be using client-side templating so you're html should be in the page but not in the DOM.
Related
I am trying to extract the price from this webpage: https://www.allbirds.com/products/mens-wool-runner-up-mizzles-natural-grey?size=13
I narrowed it down to these divs:
<div class="jsx-3947815802 Container">
<div class="jsx-526902087 Grid">
<div class="jsx-2943457050 Grid__cell Grid__cell--small-12 Grid__cell--medium-7 Grid__cell--large-up-8">...
The jsx-{random_number} for the class names is suspicious to me. They seem generated on the fly. The price I need is inside divs like these. However, these don't exist in the page source and or the cheerio object I am using during runtime. It just disappears.
How common is this technique? It seems like a pretty good way to stop web scrapers. How do I get around it?
If those classes are random, it might be annoying, but it's not a deal-breaker, because the other classes look to be static.
For example, the element that includes the price looks something like:
<p class="jsx-3188494938 Paragraph PdpMasterProductDetails__paragraph">$135</p>
The PdpMasterProductDetails__paragraph does not change. So, you can retrieve the text by using that as a selector:
$('.PdpMasterProductDetails__paragraph').text()
You can also retrieve the price from a meta tag:
<meta property="og:price:amount" content="135">
which can be selected via the selector string:
meta[property="og:price:amount"]
How common is this technique?
Very.
Building websites as Single Page Applications with tools like React is very common.
It seems like a pretty good way to stop web scrapers.
It isn't.
How do I get around it?
Hit the web service the React code fetches the raw data from directly. It's easily discoverable via the Network tab in the browser's developer tools.
I have an application with only one aspx page (Default.aspx).
This page loads .ascx controls as needed.
All these controls are using the same JS and CSS file.
Now I want to apply Bootstrap on some of them. But I am scared that bootstrap will break some CSS and JS.
So I am thinking about wrapping each control in an Iframe (because what I know is:
Iframe blocks inheritance of CSS and JS).
Is my solution ok ?
Or Is there a way to know which CSS and JS is needed by each control?
thanks
My advice is that even if you're breaking your application markup into controls (ascx files), you should apply a consistent theme and serve just one bundle of CSS and one bundle of JS. This will help performance of your site as well as be easier to maintain. Also, it'll be easier to keep a consistent look and feel for your users.
So if you're going to use Bootstrap, use it everywhere. Write your JS functions such that they aren't dependent on a given markup, and so on.
For example, I have profile page and select with 'About', 'Photos', 'Videos' section etc., and I don't want to refresh page each time I change section, I want just to change the content of container with Javascript. Sure it wouldn't be handy to write markup of pages in Javascript file, and my idea would be to write div's of each view and display only one of them:
<div id="about>About content</div>
<div id="photos" style="display: none;">Photos content</div>
However, I think there are better ways to do it, because I don't like keeping hidden views on the page. Also in most cases content in views should be generated by script, so it's looks like job for a template engine, but I'm not sure there are such in Javascript.
So what would be the best way to implement this in Javascript. I hope my idea is clear. Thanks in advance!
Try use mustache it is a template engine for javascript.
Also, you can use AngularJS templates (dynamically loaded into page on demand)
It is very easy to use. (However contains other things you might not want.. but should want ;) )
Use jQuery to fetch for the views whenever the user clicks on a link.
For example, bind the click event:
$('#clickToSeePhotos').click(function(){
$('#photosContainer').load('pathTo/photos.html');
});
$('#clickToSeeAbout').click(function(){
$('#aboutContainer').load('pathTo/about.html');
});
Here is the html:
<a id="clickToSeePhotos" href="#">Photos<a/>
<div id="photosContainer"></div>
<a id="clickToSeeAbout" href="#">About<a/>
<div id="aboutContainer"></div>
Here is a link to jQuery's page where they provide more info and examples for load
http://api.jquery.com/load/
You may download the jQuery library and use it on your server. However, as #Cybrix suggests you can also point to the library hosted by Google. See this link. At the end this could improve performance for your users.
I know, I should have built this in a progressive enhancement way instead of trying to gracefully degrade. But I didn't. So now I need a way to make this work, preferably without altering the structure too much.
What I need is, if they don't have javascript enabled, then it will reload the page and add a hash tag. Based on that hash tag I wish to load different data into a spot.
I am using Drupal and this is dynamic content and there are hundreds of pages. I can change the markup easily across all of them from the template... it's just a very basic implementation of Organic tabs, but with variables in place of the tab titles and bodies.
Based on my research, I would think this has to be done manually (with separate pages that "look" like tabs), but I know that is not the case as I have seen this functionality here: http://observers.gohernandez.com/election/results/2005/kabul With the quicktabs module.
Thanks very much in advance.
I found, after sifting through literally hundreds of tabs plugins, this one that actually degrades gracefully: http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php
I built a javascript menu list from a xml file and has used it as the navigation menu in over 20 pages.I used jQuery's ajax functoinality to implement this,the reason I used this technique was because if there is an update in the menu list I only have to edit the xml file for the changes to reflect in the menu list. I only realized later the technique I have used is not SEO friendly,since SE doesnt index dynamic Javascript content.Saying that I have provided a fall back for users that have diabled their java script by linking the xml file to a object tag in a noscript tag
<noscript>
<div>
<object data="menu/Menu.xml" type="all"></object>
</div>
</noscript>
Im not too sure if this is SEO friendly.
So my question really is how do one go about creating a menu list that is user friendly and that can be updated easily? If questions similar to mine have been answered before please point me to the links.I have done some searching and was not happy with the results I found but Im still looking for answers.
JavaScript is not SEO friendly. Anyway, you should be using a server side programming language like PHP's includes or Server Side Includes to do this.