Expression engine style url segments with jQuery - javascript

Good day folks,
Recently I worked with EE and was quite impressed with they small but flexible url segment feature.
So I though it will be useful in JS development and what to hear your thoughts and ideas how it can be done.
Who don't know, here is little explanation:
EE url segment is used to compare url part value after each "/" and they have segment1 "/" that is main url part value after domain name, segment2 "/../" that is next url part value and etc.
Why I am interested in it?
I want to create one JS file and call for parts in it only on pages I want.
For example if first url segment is empty I will call for JS that is for home page.
If first url segment is /contact I will call JS for contact page (validation, etc.).
If second segment is /get-to-us (/contact/get-to-us) I will call only JS for google map, etc.
So, the question is, how to take and compare segments with jQuery.
P.S. Explanation on EE website http://expressionengine.com/wiki/URL_Segment_Variables/

This seems like far more work than you need to do. Why not just load distinct JS files conditionally in your template?
{if segment_1 == 'contact' && segment_2 == ''}
<script type="text/javascript" src="/assets/js/validation.js"></script>
{/if}
{if segment_1 == 'contact' && segment_2 == 'get-to-us'}
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/assets/js/map.js"></script>
{/if}
Etc...
I know this doesn't answer your specific question, but it seems like the cheaper way to accomplish your goal.

I agree with D-Rock. The idea to dynamically pull in JavaScript based on the URL seems like a lot of work for very little return on investment — not to mention increasing the complexity and maintenance of the site.
However, to accomplish your goal, there are a few ways to approach this:
Embed the JavaScript for the current URL into that page's template (no conditionals needed, though not all of your JavaScript is in one place).
Reference a site-wide embed/snippet on every page, then use conditionals to show only what you need (as suggested by D-Rock).
Depending on your needs or requirements, you may find it easier to simply include all of your site's JavaScript into a single external file and allow the browser to download and cache the file. This has the benefit of being extremely easy to maintain, and will decrease subsequent page loads (since the browser can load the file from its cache).
However you plan to use conditionals, when choosing between Simple or Advanced Conditionals, use simple conditionals before advanced conditionals — this is a proven performance recommendation.

Related

Why do websites like Hotjar and Google Analytics use complex tracking code instead of just a <script> tag?

Website that use JS tracking usually use this kind of code :
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:9999,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
In the end, those scripts just add a <script> tag to the <head> of the page, so surely there must be a reason why they're doing it this way.
Is it for ad-blocking bypass reasons ? Wouldn't the generated request be the same as if it was hardcoded in the <head> ?
I'm the chief architect at Hotjar so I'll explain the reasons why we did it in this particular way.
We need to do things before the main script is loaded.
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
That particular line allows us to store actions to execute once the main script is loaded. It allows for things like hj('trackVirtualPageView', '/url') to be called before our script is loaded.
We can store things like settings as part of the snippet.
h._hjSettings={hjid:9999,hjsv:5};
That could absolutely be added as part of the query string when loading the script. The downside of using that approach is that we would get less optimal caching since it would be impossible for a browser to know that script.js?hjid=1 and script.js?hjid=2 actually loads the same JS file.
What we're doing in the last part is actually just creating a <script async=1> tag and adding it to the <head> which works really well. The reason we're doing it through JS is that we like to make it as easy as possible for our users by only asking them to put code in one place.
There might be an even better to do what we're doing which I'm blissfully unaware of, and in case there is, please reach out and tell me about it! :)
At least part of the answer is that vendors want to load their libraries in a way that does not block page rendering.
If the browser hits a script element it tries to get the script source, and might prevent the page from rendering until the complete script is downloaded. In the bad old days it used to happen that website would show up blank, because the (then synchronous) Google Analytics script could not be downloaded in a timely fashion and stopped the page from rendering. Script injection became an accepted method to make scripts non-blocking.
There are other ways (defer, asynch, etc - for historical interest here is a link to an 2009 article that discusses the issue, because the problem is that old), but script injection is a convenient way to set up a few variables along the way (plus if Google does it it must be the best way, or so seems to be the though process with some companies).

creating multi lingual website

I am trying to figure out how to develop a multi-lingual website. My background in HTML, JS, CSS is not that broad (I have started only a week ago), therefore my understanding of this may not be the best.
For our example we will be creating three language mutations:
English (main one)
Spanish
French.
Here is what I have come across when I started searching for this under uncle Google.
The longest solution I can imagine: Create three folders named en, es, fr. These will contain the replica of the original webpage (e.g. index.html), but will be translated to respective language. Then on the top panel, you will have a button which upon clicking it will redirect used to a different folder (link is hard coded here). This solution is feasible if we are dealing with very small websites (with a few pages).
Second option I have found, was using WordPress plugins (found quite a few of those). Unfortunately, this solution is not viable, as I am not using wordpress to create a website.
Next option (which I believe would be the best), is to have one page for all language mutations, but instead of real text, you would insert some attribute with the key, which will determine what phrase should be inserted here. It could look like data-toTranslate('sTitle') (making this up). The question now would be, where would you store your texts? One option would be into a database, but I have not worked with them (under websites), therefore I would prefer something like a text file / csv file / or something like this. The problem I have with this solution (except the fact that I don't know how to do it yet :) ) is that I am not quite sure how website would react to this in terms of loading time. Maybe this is the best solution for a developer, yet the worst for the website?
Any comments, links or suggestions which would point me in the right direction would be more than welcome!
EDIT: as this question may seem too broad, I will try to trim it a bit down.
As I believe the option number three would be the best, then I would like to know the following things:
1) What do I need to create when I want to store simple key - value pairs (such as in this translation)? If I were in C#, I would e.g. create either simple XML or CSV file and I would parse it during runtime.
2) Can I achieve this with a simple JavaScript, or do I need to create some specific controllers / directives with AngularJS?
Create the english version of the website statically, as this is the main language. You should have a separate ID for every text element (and don't use obe word ids such as "a" "b" etc., so you can easily fibd them later.
Have a file on your server (text file works too) with the ids of fhe text tags, and the text in a format like
welcome-text | ["Welcome to the website" in Spanish]
-------------
Etc...
(Note: yoh need to store the translated sentences, but I don't know Spanish nor France)
Name your file to something like Spanish.txt.
When the page loads, download this file with javascript trough AJAX (this is where the static english version kicks in as a fallback), loop trough the text file and set the texts to the translated version.
You can of course use PHP with MysQL too, but I thought it is a bit overkill for 2 languages.
And yes, this can be done with 100% pure javascript, not even JQuery is required.
I normally using PHP to handle this multilingual. When every moment user view the website, it will set the default language to ENG. But, when the user select other language as the website display language, the website will reload and the PHP code will call the respective language folder to display all the selected language on the website. So, I think you should having few language folder, then dynamic calling each of the folder to get the keywords words and display it.

JavaScript Related Issue

My Validation.js file now 15000 lines but now I think set all validation function in individual page for better performance because when master page load then Whole Validation.js load and it takes time for loading. Give me proper way for set my Validation.js is proper or individual page wise set is proper?
Putting all your JavaScript code in the master page is definitely the worst idea unless all your pages do the same thing. Use specific file for specific needs will improve the performance. As to reusability concerns, you may want to use nested master pages so same kind of pages can share the same master page.
To validate input, you may consider using HTML5 validations if your customers use modern browsers. Then no (or at least less) JavaScript is required.
I would suggest two solutions here.
First you should minify your validation.js so all white spaces will get removed and the code will be trimed enough. You can use any third party utility (available Free online) which can trim the javascript and minify the variable names, declarations, arguments which really reduce the size by 50%
Secondly make a habbit to use it on the page where you really need it.
to do so you can either mannualy add the validation file or you can just create a nested master page and use that master page for your form pages.
Hope this will help "_

jquery and script speed?

Quick question, I have some scripts that only need to be run on some pages and some only on a certain page, would it be best to include the script at the bottom of the actual page with script tags or do something like in my js inlcude;
var pageURL = window.location.href;
if (pageURL == 'http://example.com') {
// run code
}
Which would be better and faster?
The best is to include the script only on pages that need it. Also in terms of maintenance your script is more independant from the pages that are using it. Putting those ifs in your script makes it tightly coupled to the structure of your site and if you decide to rename some page it will no longer work.
I can recommend you to use an asynchrounous resource loader, LAB.js for example. Then you could build a dependencies list, for instance:
var MYAPP = MYAPP || {};
/*
* Bunches of scripts
* to load together
*/
MYAPP.bunches = {
defaults: ["libs/jquery-1.6.2.min.js"],
cart: ["plugins/jquery.tmpl.min.js",
"libs/knockout-1.2.1.min.js",
"scripts/shopping-cart.js"],
signup: ["libs/knockout-1.2.1.min.js",
"scripts/validator.js"]
/*
... etc
*/
};
/*
* Loading default libraries
*/
$LAB.script(MYAPP.defaults);
if (typeof MYAPP.require !== 'undefined') {
$LAB.script(MYAPP.dependencies[MYAPP.require]);
}
and in the end of your page you could write:
<script type="text/javascript">
var MYAPP = MYAPP || {};
MYAPP.require = "cart";
</script>
<script type="text/javascript" src='js/libs/LAB.min.js'></script>
<script type="text/javascript" src='js/dependencies.js'></script>
By the way, a question to everyone, is it a good idea to do so?
In so far as possible only include the scripts on the pages that requirement. That said, if you're delivering content via AJAX that can be hard to do, since the script might already be loaded and reloading could cause problems. Of course you can deliver code in a script block (as opposed to referencing an external js file), in code delivered via AJAX.
In cases where you need to load scripts (say via a master page) for all pages, but that only apply to certain pages, take advantage of the fact that jQuery understands and deals well with selectors that don't match any elements. You can also use live handlers along with very specific selectors to allow scripts loaded at page load time to work with elements added dynamically later.
Note: if you use scripts loaded via content distribution network, you'll find that they are often cached locally in the browser anyway and don't really hurt your page load time. The same is true with scripts on your own site, if they've already been loaded once.
You have two competing things to optimize for, page load time over the network and page initialization time.
You can minimize your page load time over the network by taking maximum advantage of browser caching so that JS files don't have to be loaded over the network. To do this, you want as much javascript code for your site in on or two larger and fully minimized JS files. To do this, you should put JS for multiple different pages in one common JS file. It will vary from site to site whether the JS for all pages should be ine one or two larger JS files or whether you group it into a small number of common JS files that are each targeted at part of your site. But, the general idea is that you want to combine the JS code from different pages into a common JS file that can be most effectively cached.
You can minimize your page initialization time by only calling initialization code that actually needs to execute on the particular page that is being displayed. There are several different ways to approach this. I agree with the other callers that you do not want to be looking at URLs to decide which code to execute because this ties your code to the URL structure which is better to avoid. If your code has a manageable number of different types of pages, then I'd recommend identifying each of those page types with a unique class name on the body tag. You can then have your initialization code look for the appropriate class on the body tag and branch to the appropriate initialization code based on that. I've even seen it done where you find a class name with a particular common prefix, parse out the non-common part of the name and call an initialization function by that name. This allows you to give a page a specific set of behaviors by only adding a classname to the body tag. The code remains very separate from the actual page.
the less general purpose way of doing this is to keep all the code in the one or two common JS files, but to add the appropriate initialization call to each specific page's HTML. So, the JS code that does the initialization code lives in the common JS files and thus is maximally cached, but the calling of the appropriate initialization code for that page is embedded inline in each specific page. This minimizes the execution time of the initialization, but still lets you use maximal caching. It's slightly less generic than the class name technique mentioned earlier, but some may like the more direct calling technique.
Include scripts at bottom of pages that need it only.
The YSlow add-on is the best solution to know why your website is slow.
There are many issues which could be the reason for slowness.
Combining many jQuery to one could help you increasing your performance.
Also you can put the script at the bottom of your page and CSS at top.
Its basically up to you and depends on what the code is.
Generally with small things I will slip it into the bottom of the page. (I'm talking minor ui things that relate only to that page).
If you're doing the location ref testing for more than a couple pages it probably means you're doing something wrong.
You might want to take a look at one of these:
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
http://2tbsp.com/node/91
And as for which is faster it's wildly negligible, pick what is easier for you to maintain.

How to secure javascript code from being run on other domain (stolen) ? need more ideas

First, this could look like duplicate for
How to prevent your JavaScript code from being stolen, copied, and viewed ?
And other, but it's not.
I search for ideas that can do, that stealing of JS can be very hard
Some of my examples:
of course obfuscate code
use a document.location an check if some
letter in domain equals to letter on that position where script
normally works
use part of this location in function call, something like eval('first_part_of_function_name'+part_from_location+'third_pard(parameters)');
store some important constant need in application in some element in your page-design, and get it from there in JS like $('#header div.onright a rel')
get some portion of script by AJAX and eval() it
add to script some unnecessary function, instructions.
check for existance of some elements in page (copyright text on footer)
generate some time-variable hash in PHP and put in JS, where will be function that checks this hash and current time to work or not
maybe use of other JS files ? or events binded to elements hidden in very common scripts (like bind some action in jquery-min.X.X.X.js file where all jquery is.
Are they good ideas ? Have some more ? I think that most important can be variety of things wich you can do with document location, is that the only element that will be driffrent than working in normal coditions on our site ?
No matter how complex you make your code, it can always be read, if necessary with abstract interpretation, i.e. automatically capturing the essence of your code. Code without knowledge of internals, variable names (I assume you're already using minimization, for example with the YUI compressor), documentation, support, and generalization is worthless for anyone else.
If a competitor (or potential customers) of yours is stealing your code, consider simply suing them. If it's some random guy on the internet, why do you care?
One more tool http://closure-compiler.appspot.com/home

Categories