With jQuery 2.0 Beta 2 being released meaning support for IE > 9 and other browsers how are people handling the bundling and minification for the various jquery versions.
jQuery 1.9 = IE6-8
jQuery 2.0 = IE9 and other browsers
jQuery suggests to use this:
<!--[if lt IE 9]>
<script src="jquery-1.9.1.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0b2.js"></script>
<!--<![endif]-->
But what if you wanted to bundle jQuery, will you have to create 2 bundles one containing one version of jquery say v1.9 and one containing 2.0 and Use Rquest.BRowser?
DotnetShadow
Why do you want to use different jQuery versions for different browsers?
Why not use 1.9 for all browsers?
Unless you have a very string reason to use two different versions, you'd be better off using just 1.9.x which is valid for newer and older browsers.
If you still want to use both versions, yes, you have to use two different bundles, and decide which one to render depending on the requesting browser.
However I still think it's safer to use the version which works for all version of browsers, even if the library is "a little less smart".
The only reason which could be in favor of using 2.x would be that 1.9.x hadn't support in the future, but that's not the case.
Related
I am using Vue CLI to create a Vue 2.0 project and one of the options is using Babel. I understand Babel is a transpiler but what exactly does it do? I created a project with it and another without it and I don't see the difference so what exactly is the pro/con of it ? I can't see offhand what it is doing.
You are correct. Babel is a transpiler. It transpiles your JavaScript code to one or more taget browsers, that does not support the lastest fetures. You will not see any difference, if using a newer browser.
Babal usually only makes sense if you need to support older browsers, like IE 11 or browsers from before 2017.
I was asked this in an interview. I could not answer.
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
I can see that Its an array.
"not ie <=11" means will not run on lower than Internet Explorer v11
"op_mini" must be related to Opera mini.
But I want to know why it is required.
What is Browserslist?
Browserslist is a tool that allows specifying which browsers should be supported in your frontend app by specifying "queries" in a config file. It's used by frameworks/libraries such as React, Angular and Vue, but it's not limited to them.
Why would we want it?
During development we want to use the latest javascript features (e.g ES6) as it makes our jobs easier, leads to cleaner code, possibly better performance.
As javascript evolves, browsers won't support new features at the same pace, for instance not all browsers have built-in support for ES6 (aka ES2015). By using browserslist, transpilers/bundlers know what browsers you want to support, so they can "group" browsers in different categories and generate separate bundles, for example:
Legacy Bundle: Contains polyfills, larger bundle size, compatible with old browsers without ES6 support.
Modern Bundle: Smaller bundle size, optimized for modern browsers.
So our entrypoint (e.g index.html) is generated in a way that it'll load the required bundles according to current browser being used by a user.
This process is done by Angular, Vue and React. In the future, bundler tools may generate even more bundles depending on how different browsers are, one bundle per group of browsers. Generating more bundles optimizes your app even more, at the price of making the build slower (and more complex), it's a tradeoff.
Let's see each individual query in your example:
0.2%: All browsers that have at least 0,2% of global market share
not dead: Exclude browsers without official support in the last 24 months
not ie <= 11: Exclude IE 11 and older versions
not op_mini all: Exclude Opera Mini
You can find more about it (including further query options) in Browserslist's GitHub repository.
That's a React configuration option to know which browsers the build process should target to.
As the documentation says:
The browserslist configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified.
If you are intend to use a ES feature make sure all browsers specified supports it, otherwise you have to include polyfills manually. React will not do it for you automatically.
See more in: https://facebook.github.io/create-react-app/docs/supported-browsers-features and https://create-react-app.dev/docs/supported-browsers-features/
Say I wanted to support IE11 (and sadly, I do), how would I go about making gatsby develop work on that poor old browser?
Right now, I get this message:
webpack-hot-middleware's client requires EventSource to work.
This polyfill looks promising, but that's as far as I've made it.
Any help?
P.S. Probably worth mentioning that I'm using Gatsby v 2.4.7
Looks like Gatsby doesn't support IE in development, only in production, so no polyfills will be added and IE will error when using gatsby develop.
https://www.gatsbyjs.org/packages/babel-preset-gatsby/
Can confirm on my project that running gatsby develop doesn't make it work for IE11, but using gatsby build does. When running gatsby develop, all I could see on IE11 is a blank page.
As per the documentation of Gatsby, You need to use babel 7.
Babel helps ensure the JavaScript you write works across different browsers (including older versions of Internet Explorer).
Reference:
Babel 7 (Gatsby)
Gatsby leverages Babel 7’s ability to automatically add polyfills for your target browsers.
Newer browsers support more JavaScript APIs than older browsers. For older versions, Gatsby (via Babel) automatically adds the minimum “polyfills” necessary for your code to work in those browsers.
If you start using a newer JavaScript API like [].includes that isn’t supported by some of your targeted browsers, you won’t have to worry about it breaking the older browsers as Babel will automatically add the needed polyfill core-js/modules/es7.array.includes.
Reference:
Browser Support
Is it possible to use a kind of no-conflict (like in jQuery) with two versions of the Bootstrap (2.x and 3.x) on a page?
The question has arisen because of the lack of compatibility of the Joomla 3.6! with the Bootstrap 3.x and intensive usage of the Bootstrap 2.3.2
There is idea to use customized, namespaced version of Bootstrap 3.x. But is that idea viable?
Note: there is solution with template overrides. But it uses a lot of files for overriding and I have to use all of them for each of my 6+ templates
I have a site which should compatible with multiple browsers, like IE7 & IE8 & others.
I choose to use conditional stylesheet to deal with different version of IEs.
Like this, only include ie7.css if current browser is ie7.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/resources/css/ie7.css" />
<![endif]-->
I use IETester to test the performance of my site and make change for specific version of ie.
Everything look fine and consistent in IETester.
But, when I use the 'F12' tool of IE11 and change the version of IE, the appearance of my site scared me, element's position are disordered and looks ugly.
It seems that my conditional stylesheets(like ie7.css) do not loaded cause I do not see the ie7 styles displayed in the DOM Explorer.
Is this a IE11 bug ? or something else?
anybody knows?
There was a bug in F12 where conditional comments aren't respected when using F12 to set the document mode. This bug was fixed in the April update to IE11. If you run Windows update to get the latest patch you shouldn't see this issue any more.
http://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools