Modernizr.load Deprecated. Yepnope.js Deprecated. Now what? - conditional-statements

Prior to Modernizr v3, I was using yepnope.js
Modernizr.load and yepnope.js have both been deprecated. How do we conditionally call stylesheets or javascript files now?
Example that worked with Modernizr v2.5.3:
Modernizr.load({
test: Modernizr['object-fit'],
nope: ['./dist/scripts/object-fit.js'],
complete: function(){
if (!Modernizr['object-fit']) {
jQuery(".poster img").imageScale({
scale: "best-fill",
rescaleOnResize: true
});
}
}
});

There's a new syntax and the feature names are all lowercase. You can combine that with jQuery's getScript method.
Which would look something like this:
if (Modernizr.objectfit){
jQuery.getScript("./dist/scripts/object-fit.js")
//it worked! do something!
.done(function(){
console.log('js loaded');
})
//it didn't work! do something!
.fail(function(){
console.log('js not loaded');
});
} else {
jQuery(".poster img").imageScale({
scale: "best-fill",
rescaleOnResize: true
});
}

Have a look here for scripts: https://stackoverflow.com/a/7719185 — no jQuery required. (Note that there's a shorter Promise example a bit down in the answer; don't stop reading after the first example (like I did)).
And here for CSS: loadCSS: https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
— this is, in a way, even better than YepNope.js, if you don't need any of its features except for just loading stuff + callback. Because the stuff linked above, is smaller (smaller min.js.gz) than yepnope.js.
(And can combine with Modernizr like mhk showed in his answer.)

Related

LessCss calling extend from mixin, bug?

If I call:
.somemethod({
&:extend(.flex all);
});
then it appears as if less do not complain but it does generate the appropiate css either.
Is this a bug ? Has it been resolved? I am still on 2014 Java version of less, might need an update if it's worth it.
Edit, added the method somemethod:
.somemethod(#mx){
#mx();
}
.flex {
color:blue;
}
body > main {
.somemethod({
&:extend(.flex all);
});
}

phantomjs global variables call in page.evaluate

I want to know how to use a varaible globally in phantomjs so that it can be used in the page.evaluate function also.
I have gone through some previous answers but but able to understand well
JSON-serializable arguments can be passed to page.evaluate.
Here is a very basic the following example using this technique :
page.open('http://stackoverflow.com/', function(status) {
var title = page.evaluate(function(s) {
return document.querySelector(s).innerText;
}, 'title');
console.log(title);
phantom.exit();
});

dijit/layout/ContentPane on resize end?

I am now using dojo 1.8.3 and now have a BorderContainer with 2 ContentPane on my page. I would like to listen the resize event, the code like this
dojo.ready(function(){
dojo.connect(dijit.byId("Container"), "resize", function(changeSize, resultSize){
// do my stuff here...
});
});
However, is there anyway to let me know if the resize (splitting) is end? Please advice, thanks!
First of all, I'd recommend using "modern dojo", since you're using dojo 1.8 anyway. dojo/connect is deprecated and the way to "monitor" function calls is now by using dojo/aspect.
So you'd end up with something like:
require(["dojo/ready", "dojo/aspect", "dijit/registry"], function(ready, aspect, registry) {
ready(function() {
aspect.after(registry.byId("Container"), "resize", function() {
// do something after resize has been called...
});
});
});
If you want to have access to the arguments that have been passed to the resize function, call aspect.after with true as the last argument like:
aspect.after(registry.byId("Container"), "resize", function(changeSize, resultSize) {
// do something with changeSize and resultSize after resize has been called...
}, true);

How to extend jQuery's animate-step function

Any ideas how to extend the step-function in jQuery 1.6+?
I've made a special-event to trigger a custom-event on each animated step. However since jQuery's animation method was changed, or rather the step function is not longer extendable ($.fx.step results in an empty object) is it impossible to extend it with your own things.
(function($){
var oldStep = $.fx.step._default;
$.event.special.animating = { };
$.fx.step._default = function( fx ) {
$(fx.elem).trigger('animating', fx);
oldStep.apply( this, arguments );
};
}(jQuery));
$('#foo').animate({width: 200});
$('#foo').bind('animating', function(e, fx){
console.log(fx);
});
Any ideas how to get this to work with newer jQuery versions?
Got it, in jQuery's updates-blog, this is already flagged to be commented.

How to use dojox/mobile/ScrollablePane Events

ScrollablePane in dojo mobile have some event that we can use as they have mentioned in their API documentation. I try to use the as follows.
leftPane.on("onTouchEnd", function(e){
alert("sss");
});
(leftPane is a ScrollablePane) This does not work. But this works when I use a event like "click". I search throughout the net for a example but didn't find a one. Can someone help me out here.
Thank you.
use:
aspect.after(leftPane, 'onTouchEnd', function(e) { });
dojo/on is tricky when it comes to the event naming - you could start by ditching the "on" prefix. Most likely, simply changing onTouchEnd to touchend would work
The Dojo event system changed significantly between 1.6 and 1.7. The new on function and the Evented mixin is the recommended way of handling events in widgets, but there are some backward-compatibility functions in the _WidgetBase class.
In short, you can either use the legacy dojo.connect function, the new aspect function (which implementes the "connect to normal javascript method" functionality of the old dojo.connect), or use the new on method in the _WidgetBase class that is a bridge between the two.
1. dojo.connect(leftPane, 'onTouchEnd', function(e) { });
2. aspect.after(leftPane, 'onTouchEnd', function(e) { }, true); // <-- the 'true' is important!
3. leftPane.on('touchend', function(e) { });
YMMV on (3) depending on whether the widget was updated to provide this bridging.