Sebastian's Blog

Monday, January 26, 2015

jQuery - Pro Tip #4

Difference between find() and filter()

If I have a list of items such as:

<ul id="tasks">
<li class="task">Do some work</li>
<li class="task">Do more work</li>
<li class="relax">Relax!</li>
</ul>

and I'd like to select all list elements inside with class="task" assigned.

I might want to do something like this:

// cache the result.
var $tasks = $('#tasks li');

var $task = $tasks.find('.task');

and that of course won't work. The reason is this: http://api.jquery.com/find/

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

in other words it says: 'search through all the child elements only' and since we are already at the <li> level there's nothing below it!

The solution to this is to use .filter() method that works on the currently matched elements.

var $task2 = $tasks.filter('.task');

jsFiddle example: http://jsfiddle.net/seba368/gn8L204a/

Saturday, January 24, 2015

jQuery - Pro Tip #3

Extend jQuery pseudo class

It's a little bit contrived example, but let's say I have an input group:

<div class="form-group">
<input class="form-control" type="text" name="name">
</div>

and I'd like to do something to that input group, such as:

$('.form-group').removeClass('has-error').addClass('has-success');

If I do it over and over again, I might consider wrapping it in a method:

RemoveAddClass('.form-group');

function RemoveAddClass(selector){
$( selector ).each(function() {
$(this).removeClass('has-error').addClass('has-success');
});
};

and this is pretty good, however there's a better way, and that is extending jQuery pseudo class:

turning the above into:

$.extend($.expr[":"], {
removeAddClass: function(element){
$(element).removeClass('has-success').addClass('has-error');
}
});

you can check out my fiddle here: http://jsfiddle.net/seba368/osub4xw2/1/

Friday, January 23, 2015

jQuery - Pro Tip #2

jQuery - Pro Tip #2 - selector caching!

instead of repeating the selector and hence (re)traveling the DOM:

function doWork(){
$('#divTag').addClass("has-error");
$('#divTag').slideUp();
}

cache the selector - caching it outside the method allows for reuse in multiple methods.

var someDivTag = $('#divTag');

function doWork(){
someDivTag.addClass("has-error");
someDivTag.slideUp();
}

and finally chain it:

function doWork(){
someDivTag.addClass("has-error").slideUp();
}

Thursday, January 22, 2015

jQuery - Pro Tip #1.

jQuery - Pro Tip #1

1. Use CDN (content delivery network)
Go to: https://developers.google.com/speed/libraries/devguide
and pick a version of jQuery you're interested in:
e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

2. but don't forget to fallback onto the local server in case the CDN isn't available with:
<script> window.jQuery || document.write("<script src='js/jquery.js'></script>

3. putting it all together:

 <html>  
 <head>   
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>  
   <script>  
     window.jQuery || document.write("<script src='js/jquery.js'></script>");  
   </script>  
 </head>  
 </html>

Thursday, October 9, 2014

What happens when you select 'Create Git repository on..' in Xcode.

When you create a new project in Xcode, you have an option of selecting 'Create Git repository on..'.

I'm still fairly new to Xcode (compared to my 15+ yrs with Visual Studio), and wondered what exactly happens. What I mean by that is by default you can't see where the Git repository was created and that's because it's hidden. Every time you select 'Create Git repository on 'My Mac'' Xcode creates hidden Git folder in the same folder as your project. To be able to see it (in Mavericks) open terminal window and type:

defaults write com.apple.finder AppleShowAllFiles TRUE

Hit Enter and type:

killall Finder

You should now be able to see the hidden Git folder inside your project:

To revert that behavior and re-hide the files type:

defaults write com.apple.finder AppleShowAllFiles FALSE

Hit Enter and type:

killall Finder

That's all.

Wednesday, August 27, 2014

Fun with Knockout - observables.

This is continuation of the previous post on knockout, so let's continue and modify the previous example to include obervable feature, i.e. when the data changes in the input box (go ahead and play with it) then the field (in this case <span>) gets updated automatically without any need for extra JavaScript code or jQuery.

Previously I defined simple JavaScript object:

 var stock = {

            cusip: 12345,

            symbol: "MSFT",

            name: "Microsoft",

            bid: 45.92,

            ask: 46.99

        };

Let's add observable to it:

 var data = {

                stock: {

                    cusip: ko.observable(12345),

                    symbol: ko.observable("MSFT"),

                    name: ko.observable("Microsoft"),

                    bid: ko.observable(45.92),

                    ask: ko.observable(46.99)

                }

            };

Screenshots:

I highlighted the difference between creating non-observable object and observable in knockout.
Once again, fully working example posted on the JSFiddle. (note that I'm using bootstrap for nice formatting.)

Fun with Knockout - binding.

I started learning Knockout JS - a standalone JavaScript library that implements MVVM design pattern.
I have tons of notes and examples that I've constructed, some of them may or may not resemble to some extent those of the original authors, however they are all mine.

Ever since I discovered JSFiddle I've been trying to port, when possible, all of my examples from Visual Studio to JSFiddle for easy sharing. The first that I'd like to present is how to bind data and text fields using knockout and constrast that with binding through jQuery.

Let's create a JavaScript object to represent a stock:

var stock = {
cusip: 12345,
symbol: "MSFT",
name: "Microsoft",
bid: 45.92,
ask: 46.99
};

To simply bind and display the text for cusip all we need to do is:

<span data-bind="text: cusip">

For values it's just slightly different:

<input data-bind="value: bid" />

and instruct the knockout to perform the bindings for us:

ko.applyBindings(stock);

and that is pretty much the gist of it.

I have a fully working example posted on the JSFiddle. (note that I'm using bootstrap for nice formatting.)

Screenshots: