I'm using less.js for better responsive css design, but now I encounter NETWORK_ERR while using webkit based browser and also chrome. However firefox would not have this kinda issue.
I trying to google my question but it seems the only solution is to put less files on other server or it's unavoidable to read less.js' src as "file:///*xxxx/less.js" instead of "file://*xxxx/less.js" .
My question is , is there any way to do to change the way as file:/// to file://?
and one more question , is there any better css framework which can do better responsive and organized design? Less.js is good to organize and I also use javascript to change some variable dynamic.
Thanks.
It is always good to serve css js and images from a different server which can act as CDN. and in your case you can also over come the chrome issue.
here are some of the solutions for your file:/// to file:// issue (not sure if you have already seen these)
look at this link
you can over come this in couple of ways look at Nathan Strutz's answer where he is suggesting to add a command-line switch -allow-file-access-from-files to your shortcut and Chrome will allow you to load LESS.JS without any problem, and also below you can how to add the command line switch.
also i am particularly interested in MrClean's answer (last answer) I havent tried it out though but you can give it a try.
and to answer your second question there are bunch of frameworks which can do css responsive designes click here for list i am particularly interested in foundation, mqframework, Golden Grid System framework and Fluid Baseline Grid.
Related
Ok so I am in the process of building my first Javascript 'framework' or 'bootstrap' which will be implemented in combination with a single pre-processed CSS file. I am gathering my favorite content slider, smooth scroller, content slideshow, parallax elements & bg-img, sticky elements, among a few more cutting edge navigational & UI based scripts (cross-browser/platform/device/viewport compatibility and performance). My problem is when constructing my demo page with all combined elements in place loaded and active on the page... well many seeem to require a different version of Jquery to be called in order to function properly. I have managed to get them to work properly while testing by carefully reordering the jquery librarys as they are called in the of the page. Now here is my (2) part question:
How do I get all my JQuery to work properly without loading multiple versions of it (one for each script almost)
I have a sample in my portfolio which I would love to use as the example. http://www.nicholasabrams.com/ (non mobile device version). In the src for that URL you will see only (1) js and (1) css - including the jquery libraries which are ALSO included in the single .js in the begining of the file. Please don't flame me, as I am asking for help. The link above works fine now (with apple as a slight exception)... but I am just trying to eliminate any bad practices I have as I have just started as a web developer at my first large company. Thanks!!
PS: Would post a snippet but its quite a large js file as you would imagine but if you will, please inspect my src and let me know what you think because my sites first load decreased from 22 seconds to 4-7 seconds after doing the above I wish I could just include the latest version of JQuery!)
if I understand you correctly you are loading more than one jQuery library to the page (in different order)? That's a mistake - you shouldn't do that.
What you should do is make sure that the plugins you work with are compatible with the library you are working with. If they're not - wither find other plugins or fix the ones you have to support the jQuery language you are using.
You have a 2 megabyte hi-res background image, that is insane! I would scrap that and the swirl image, while it may look cool to you, it is distracting and may actually make people want to avoid your website. It makes it difficult to concentrate on the text in the middle of your screen. You don't want people to remember the swirling image, but rather your portfolio, right?
You also have 404's on the following:
http://www.nicholasabrams.com/ScrollSpy_files/result-light.css
http://www.nicholasabrams.com/example-images/testing_station.png
404's are bad for several reasons, they are a wasted resource as they slow the loading of your page, because it attempts to find something and does not find it, and, finally, they have a negative impact on your SEO, specifically Google PageRank docks you for any 404's.
Find a way to work with one version of jQuery, it will eventually bite you to have multiple versions of the library and it is a bandwidth killer to have your users load up a bunch of libraries, even if they are CDN'd.
This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).
I wanted to use some functionality in jQuery-UI. So, I downloaded a custom version of the same from jQuery website, including only those things in my download that were needed by me. This was supposed to trim down the total size of my page, but to my surprise, the page size remained almost the same even after following the procedure provided at jQuery website.
Did I do something wrong? Or is this the expected behaviour?
You should have a look at JQuery UI Packager, it lets you pick what functionality you want.
It bundles it up with both a custom and a minified JQuery.
When I tried it, I removed everything but core functionality, and it ended up 15kb uncompressed.
Then I tried it without removing anything, it ended up 206kb uncompressed.
If you're that concerned you should think about gzipping.
Look at this chart of filesizes and how they improve with the different methods.
Here's a post about a guy asking a similar question, and the answer explains what you should focus on.
Here's a discussion about gzip and minify.
What's the smallest lightbox plugin for jQuery (in terms of size)? Something close to Fancybox, but smaller :)
I wrote a low-level jQuery lightbox script called Nitelite: https://github.com/premasagar/nitelite (it's 1.4KB when minified and gzipped)
It is the kind of thing that can be either used on its own, or to build more feature-rich lightbox plugins.
It's been used in production on a couple of projects:
the BBC World Service widget (click a news article): http://www.bbc.co.uk/persian/services/2009/05/090512_pm_widget_conditions.shtml
the MiShorts widget (click a film thumbnail): http://www.mishorts.com/widget
It's open source, MIT license. Enjoy ;)
I have used this sometime ...
http://www.digitalia.be/software/slimbox2
It's only 4K .
As Yi Jiang already stated, the "smallest" depends completely on your specific needs, if you want everything that Fancybox does, I hardly doubt that there's a way around using that very plugin.
Still you could take a look at others and see whether they fit your needs, you should check out this list of lightbox scripts, many of which are smaller in size than Fancybox, but you'll still have to evaluate them and see if they fit your needs.
And last but not least you can always write your own one by reading a tutorial. That is, if you want to write your own one. But then again, if you have such specific needs you should know that nobody will come along and write some code for you for free.
My approach to these sort of problems is to find a script that meets my requirements then hack it mercilessly until it only contains what I need. Once that's achieved, I'll minify the script (leaving the compression of the script up to my server).
While we're on the subject, if you are looking for small scripts mainly to reduce the browser fetch time, then also ensure that your web server cache control headers and compression settings are set to good values. A nice writeup (regarding caching) can be found here. If you don't have a good caching policy defined, then it won't matter much whether the script is small if it is being downloaded from the server on every page view.
I would shy away from the PrettyPhoto plugin, which appears convenient. There is an advertisement on their demo which is suspicious (my site was redirected shortly after experimenting with it)
If you are looking for a lightbox, try to find one that has been updated to the latest query. Slimbox2 and fancy box have not been updated for modern css, using images to build the box, and neither have been updated for streamlining changes in the latest jquery.
Things I am aware of:
Screen flicker if scripts alter styles / content (not an issue for me as I currently load scripts at the end of the page and so have workarounds already)
Inability to detect script load failure (not too concerned about this either as everything I develop is required to work with or without javascript. Might affect my workarounds for item 1 but happy with this risk)
It looks to be a very good option to me but I am hoping for some references (feel free to say only positive things!) before I invest time in incorporating it into my next project.
Currently we develop mid-to-large sized sites with, generally, a moderate amount of Javascript (although this is growing rapidly). We also use the jQuery library for the bulk of our Javascript.
Anyone have any experience? Good or bad! :)
P.S. for those interested this is head.js
Nope. As long as you put any code that is dependent on the loading files inside head.ready {} then you will not face any problems with your code.
Here is my conclusion for head.js, I have done some benchmarks myself:
http://blog.feronovak.com/2011/03/headjs-script-is-it-really-necessary.html
It is subjective opinion and benchmarks are not by any means scientific.
I was/am interested and thinking of maybe also using head.js BUT i found something not so nice: In the url that you gave me there are three tab buttons:
SCRIPT SCRIPT SRC head.js
SRC in head on bottom on head
Shift+Ctr+Refresh gives very little differences for me (+/-10ms between the three # 120mbit line, firefox 3.6.13)
When I use Ctr+R refresh, the results on the head.js are consistently 100ms slower than the other two versions without head.js... So, its NOT always faster.
There would be no problem on using jquery or javascript library heavily. Try to main each library as unique.
I am using prototype, scriptaculous, jquery and many more jquery additional plugins. I faced an error while loading entire scripts. Then i found out its due to $ sign which is an important parameter of jquery and prototype.
i had used
$.noConflict();
jQuery(document).ready(function($){
//jquery codes here
})
So keep your script library unique
head.js() gave a problem to my pages. None of my asp:button OnClick events were working. But if I include the scripts in the traditional way (<script type="text/javascript src="") then the events worked perfectly. I tried EnableClientScript = "false" and also CausesValidation="false". But nothing worked. Finally just scrapped the head.js idea since it did not make a lot of difference to my page load time, anyway.