I'm starting to get into a lot more JavaScript thanks to a few UI frameworks such as KendoUI and Dojo/Dijit and I'm trying to integrate these with my custom MVC framework. However, all of their examples have the JavaScript embedded in <script></script> tags along with the HTML, which is fine and just means that the code gets dumped in my Views.
I was just wondering if there was some 'standard' or 'more acceptable' method of presenting custom JavaScript code in my projects. Is embedding the code in the HTML the best way to do it, or is it considered nicer to store the JavaScript in .js files and link to it from the HTML?
Use a script tag, for example <script src="foo.js"></script>
Ideally use a minified version, for example <script src="foo.min.js"></script>
If you're building a website, also look into ways of caching the file (and uncaching if the files changes), for example by using a datestamp in the file name.
Some programming frameworks have ways to automatically combine and minify all the JavaScript files for a page. For example, Rails has an asset pipeline that handles this for you.
This is the style I use,
1).I usually link js libs ( jQuery and etc.. ) using <script src="libURL"></script>
reasons :
This caches the js lib. Most of the pages in my site will be
using that particular js lib and caching will reduce the loading
time and bandwidth use.
Once I got a newer version of the js lib I have to just replace
the old one with the new. No need to change stuffs page by page!
2).I embed scripts using <script>//codes here</script> method when those codes are specific to that particular page.
Reasons:
To make sure I will not mess up with my codes! ;-)
These codes have more tendency to be changed while updating the site,therefor it's good not to have them cached.(But no use if your site is not under going rapid changes!)
You should use external <script> tags to allow the browser to cache the scripts and save bandwidth.
Optionally, you can also automatically minify them.
Related
I like to generate CSS constants using PHP and I'm wondering if there's a way to do this that will still leverage cacheing. Right now I'm defining everything in the index.php file and while it's a web app and so the extra 20-80kb of css isn't toooooo relevant, it would be nice to have it cached so my question is twofold:
What's the most optimal way to generate CSS using PHP (or a similarly cross-browser solution that doesn't need to render using JS ala LESS or SASS)
Does the procedural generation of CSS values using PHP get ignored by the end-browser if the values are unchanged? In other words, if I don't touch the layout for a month and somebody visits twice in that month, does the very fact that PHP is outputting the data break cacheing or, so long as the data is identical, will the cache still be respected by most modern browsers?
Thank you!
I would using includes for templating a PHP website. I intend to create a header.php file which will contain the doctype, head tag, and everything upto the body tag. My problem is that I don't want the same title or same javascript/css files on every page. What would be a good way to make this more dynamic so that I can set the tile for a page and only include the javascript, css files that I want to include ? I wouldn't be using any frameworks or template engines for this project. So far I have come up with this,feedback would be greatly appreciated:
http://pastebin.com/drdKnEn2
I would suggest, keep it simple,,, dont use php function to include metaname and favicon nd stuff.
I would rather keep writing these stuff on every page... coz everypage on website is not the same... and if you are using dynamic php, there wont be too many pages! It will look neat and clear to understand/access.
I am thinking about how some online services create dynamic JavaScript files. These files have the .js extension, but their content is not static. I found a sample file here. It seems that this script is generated with a higher level programming language. I think it is done with PHP or something similar, but I am not sure, and I have not found any documentation about this topic.
Is there any well known way to create these kind of dynamic JavaScript files?
Consider carefully whether generating a dynamic JS file is necessary at all. Instead of generating dynamic JS, you can often simply inject static script(s) and use separate JSON to support dynamic configuration into your page.
If you view source on this (or about any) StackOverflow page you'll see that they're using this same pattern: Static external .js files that reference a separate centralized chunk of JSON for configuration. That JSON is what provides dynamism.
View source and look for this:
StackExchange.init({...
Most server side languages make it trivial to serialize an object to JSON so you can inject it into your page.
Here's ten reasons utilizing external static js files is preferable:
Cached
Code colored
Syntax checked
Separation of concerns
Reusable
Easier to read.
One less layer of abstraction
Can serve minified and obfuscated
Avoids string parsing on every request
StackOverflow and all the cool kids are doing it (hey, I promised 10 reasons.)
More info here: http://www.bitnative.com/2013/10/06/javascript-configuration-object-pattern/
That depends on whether you want to generate files or return data. Generating files would be done with something like file_put_contents. Alternatively you could have a .js file in a folder with a .htaccess file that tells you to execute it as php, allowing you to simply generate the script on the fly based on session, get, or post parameters.
You can use any server-side language to create dynamic javascript files, javascript files don't need to end with .js. If you really want your files to end with .js you'll need to edit your server settings to also process .js files as for instance PHP files.
You can also use server code to generate inline javascript.
But be careful when generating javascript files, it can become very complex when you are mixing two programming languages
I have a js file that has the code for navigation for a site with ~600 pages..
Now I want to change the menu(colors, background, links etc) and I don't want to edit the JS file as the code here is like using images for the menu..so I was thinking that I will create a php file or html file and then call it inside that js file. Is this something possible?
Please advise.
You could have the js render an iframe instead of an img and pass along the url to the php/html.
You need to understand the difference between PHP, HTML and JS. They each occupy a different domain in web programming. PHP is for server side logic, HTML is a structural language and JS is an action-oriented language intended to function on top of the HTML that exists in the page (and may be rendered in JS).
All programmers have at one point tried to "hack" code like you are doing, by trying to find a band-aid fix to a complicated solution. It is not worth it. You will lose performance in the best of cases and either fail outright or lose browser compatibility and user interface quality the vast majority of the time.
In short, take your time and edit the JS. You can always do a find/replace on images to strip them out and insert CSS class declarations in their place. Do it right and you'll save yourself a big headache later on.
I am trying to include the open-source to-do list system called MyTinyToDo on my website. When I resized it to be fit to the website layout, the position of the windows for some functions such as (Tags or arrow besides Tasks) of the system were changed and they messed the style.
By using the Firebug, I could be able to figure the reason of that problem. The reason is: this system uses JQuery to determine the position of those windows. I tried to find the statements that are responsible for this task inside the JQuery files but I failed to find them.
So what should I do?
Why dont you include mytinytodo into an <iframe> ?
I gess it would prevent jQuery from bothering your layout.
How you included the mytinytodo.net in your site.you have also included jquery in your website.Then may be jquery libraries may get clashed. Check out