Using Angular’s $log provider

The AngularJS $logProvider

Logging and debugging is a daily occurrence when developing JavaScript based applications. AngularJS provides a simple, effective way to enable logging in your applications – the $logProvider. $logProvider is a used to enable logging and the $log object is used to log within your applications objects.

Enabling

Enabling the $logProvider is as simple as injecting the $log object into your object and then calling $log.debug(); to send logs to the console.
Example:

Turning off logging

You can disable logging (AngularJS 1.1.2+) by calling
$logProvider.debugEnabled(false);
Example:

Extending

AngularJS provides a mechanisms to extend the built in $logProvider, $provider.decorator(). An example will get the point across much more quickly than me trying to explain it all.
Example:

Basically we intercept the call using decorate so we can add on the features and functionality we need to the $log.debug() call.

AngualrJS version 1.2.16 was used as a basis for this article.
Thanks to Burleson Thomas and this post for the extension example.

JavaScript Chops Meetup

JavaScript Chops Meetup

I was hanging out with Matt O’Donnell this weekend and we got to talking about javascript & how we both want to get better at it (along with HTML & CSS). We’re both super busy with work and life and don’t have a ton of spare time, but still want to make improving our javascript chops a priority.

So, here is the idea – a short (30-60 minute) online meetup.

Here is what I’m thinking a Google Hangout in the evening, once or twice a month. We spend 30-60 minutes talking mainly about javascript with some HTML & CSS tossed in to make sure we are covering our bases. Everyone involved takes turns presenting on and discussing concepts like “the basics” & “getting started”, best practices, tools, libraries, & frameworks, specific projects, problems and/or questions that we have.

Initially I’d like to keep it to a small group so the conversations don’t get out of hand.
What do you think? Want to do it?

Sign up to let me know you’re interesteed & I’ll let you about the when’s and where’s.

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

Subscribe to our mailing list

* indicates required

Email Format

var fnames = new Array();var ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[2]=’LNAME’;ftypes[2]=’text’;
try {
var jqueryLoaded=jQuery;
jqueryLoaded=true;
} catch(err) {
var jqueryLoaded=false;
}
var head= document.getElementsByTagName(‘head’)[0];
if (!jqueryLoaded) {
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’;
head.appendChild(script);
if (script.readyState && script.onload!==null){
script.onreadystatechange= function () {
if (this.readyState == ‘complete’) mce_preload_check();
}
}
}

var err_style = ”;
try{
err_style = mc_custom_error_style;
} catch(e){
err_style = ‘#mc_embed_signup input.mce_inline_error{border-color:#6B0505;} #mc_embed_signup div.mce_inline_error{margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff;}’;
}
var head= document.getElementsByTagName(‘head’)[0];
var style= document.createElement(‘style’);
style.type= ‘text/css’;
if (style.styleSheet) {
style.styleSheet.cssText = err_style;
} else {
style.appendChild(document.createTextNode(err_style));
}
head.appendChild(style);
setTimeout(‘mce_preload_check();’, 250);

var mce_preload_checks = 0;
function mce_preload_check(){
if (mce_preload_checks>40) return;
mce_preload_checks++;
try {
var jqueryLoaded=jQuery;
} catch(err) {
setTimeout(‘mce_preload_check();’, 250);
return;
}
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘http://downloads.mailchimp.com/js/jquery.form-n-validate.js’;
head.appendChild(script);
try {
var validatorLoaded=jQuery(“#fake-form”).validate({});
} catch(err) {
setTimeout(‘mce_preload_check();’, 250);
return;
}
mce_init_form();
}
function mce_init_form(){
jQuery(document).ready( function($) {
var options = { errorClass: ‘mce_inline_error’, errorElement: ‘div’, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){} };
var mce_validator = $(“#mc-embedded-subscribe-form”).validate(options);
$(“#mc-embedded-subscribe-form”).unbind(‘submit’);//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator
options = { url: ‘http://forkbites.us1.list-manage.com/subscribe/post-json?u=db7398b2dfeb32d6f5b9b98df&id=e8c62e786c&c=?’, type: ‘GET’, dataType: ‘json’, contentType: “application/json; charset=utf-8”,
beforeSubmit: function(){
$(‘#mce_tmp_error_msg’).remove();
$(‘.datefield’,’#mc_embed_signup’).each(
function(){
var txt = ‘filled’;
var fields = new Array();
var i = 0;
$(‘:text’, this).each(
function(){
fields[i] = this;
i++;
});
$(‘:hidden’, this).each(
function(){
var bday = false;
if (fields.length == 2){
bday = true;
fields[2] = {‘value’:1970};//trick birthdays into having years
}
if ( fields[0].value==’MM’ && fields[1].value==’DD’ && (fields[2].value==’YYYY’ || (bday && fields[2].value==1970) ) ){
this.value = ”;
} else if ( fields[0].value==” && fields[1].value==” && (fields[2].value==” || (bday && fields[2].value==1970) ) ){
this.value = ”;
} else {
if (/[day]/.test(fields[0].name)){
this.value = fields[1].value+’/’+fields[0].value+’/’+fields[2].value;
} else {
this.value = fields[0].value+’/’+fields[1].value+’/’+fields[2].value;
}
}
});
});
$(‘.phonefield-us’,’#mc_embed_signup’).each(
function(){
var fields = new Array();
var i = 0;
$(‘:text’, this).each(
function(){
fields[i] = this;
i++;
});
$(‘:hidden’, this).each(
function(){
if ( fields[0].value.length != 3 || fields[1].value.length!=3 || fields[2].value.length!=4 ){
this.value = ”;
} else {
this.value = ‘filled’;
}
});
});
return mce_validator.form();
},
success: mce_success_cb
};
$(‘#mc-embedded-subscribe-form’).ajaxForm(options);

});
}
function mce_success_cb(resp){
$(‘#mce-success-response’).hide();
$(‘#mce-error-response’).hide();
if (resp.result==”success”){
$(‘#mce-‘+resp.result+’-response’).show();
$(‘#mce-‘+resp.result+’-response’).html(resp.msg);
$(‘#mc-embedded-subscribe-form’).each(function(){
this.reset();
});
} else {
var index = -1;
var msg;
try {
var parts = resp.msg.split(‘ – ‘,2);
if (parts[1]==undefined){
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]){
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch(e){
index = -1;
msg = resp.msg;
}
try{
if (index== -1){
$(‘#mce-‘+resp.result+’-response’).show();
$(‘#mce-‘+resp.result+’-response’).html(msg);
} else {
err_id = ‘mce_tmp_error_msg’;
html = ‘

‘+msg+’

‘;

var input_id = ‘#mc_embed_signup’;
var f = $(input_id);
if (ftypes[index]==’address’){
input_id = ‘#mce-‘+fnames[index]+’-addr1′;
f = $(input_id).parent().parent().get(0);
} else if (ftypes[index]==’date’){
input_id = ‘#mce-‘+fnames[index]+’-month’;
f = $(input_id).parent().parent().get(0);
} else {
input_id = ‘#mce-‘+fnames[index];
f = $().parent(input_id).get(0);
}
if (f){
$(f).append(html);
$(input_id).focus();
} else {
$(‘#mce-‘+resp.result+’-response’).show();
$(‘#mce-‘+resp.result+’-response’).html(msg);
}
}
} catch(e){
$(‘#mce-‘+resp.result+’-response’).show();
$(‘#mce-‘+resp.result+’-response’).html(msg);
}
}
}

The Browser Is Where It’s At

I used to create a lot of Flash based content – be it video players, widgets, or full on applications what I built was built using the Flash Platform. I haven’t opened the Flash IDE or Flash Builder to create a SWF in a long, long…long time. What does this mean? First, technology is changing – no doubt. Second, I get to learn some new stuff. Guess what? I’m okay with that.

Users, platforms, and developers have have forced browsers to evolve. The browser is no longer just a window to view content. It is an environment that applications execute in. It used to be that you’d open a browser, search for something, or read something, then close it down and get to work. Now, what you work on is in in the browser & those browsers are open all day.

What should I learn? What should you learn, if you’re not already? Learn about the stuff that happens in the browser – Yep,  JavaScript, CSS, & HTML. Learn the existing APIs as well as the upcoming API changes and additions.

Banner of Browser Logos

The browser as a first-class citizen?

Browsers are more powerful, they are more feature rich, and are becoming first class citizens when it comes to how people use them. I don’t think that it is 100% where it needs to be, but it won’t be long until that tipping point that causes a shift in how people use and think about the browser. Consider Google services – to name a few, GMail, Drive & Docs, & Calendar. These services all run in the browser and each week new features are added to make them more comparable and sometimes better than their desktop counterparts. It used to be that everyone relied on Microsoft Office and Word to create documents, edit and track changes, Outlook to manage their email and calendar. Now, all of that and more is in the browser, of course you can still use desktop applications to manage that data, but, like I said there will be a tipping point. The point of this? Pay attention to the browser, the browser is where things are headed.

Why the browser?

Because:

  • Browsers are familiar to users
  • They exist for all major platforms
  • Browsers have established a quick and easy update path
  • Browsers will become more accepted by the enterprise
  • They take advantage of HTTP protocols
  • Browsers leverage new and existing technology

Familiarity

A browsers is an easy path to entry. A browser is a simple concept to grasp and easy to explain and learn. Although it has a low learning curve, browsers have and can be extended on to provide functionality needed for today and tomorrow’s users.

All major platforms

All major platforms have a browser. Desktop & mobile, even TVs and DVD players have browsers. For developers the headache is support different platforms. You will have to provide platform specific code. But, the main point to get across here is that HTTP, JavaScript, & CSS are will be supported by more and more platforms.

Quick and easy update path

Chrome and Firefox update at lightning speed, and for many users without them even knowing. This helps roll out new features (Web RTC, Media APIs etc) more quickly. There is a major barrier when it comes to the enterprise and government, but this is something that I think will change in the near future.

Accepted by the enterprise & government

Currently these are two areas where updates and browser versions can really hold back innovation. But, with the current direction of and additions to APIs and security, this issue should become a problem of the past as browser updates are easier, more secure and become the norm rather than the exception for the enterprise and government.

HTTP Protocol

HTTP has been around forever and for good reason. It works. It is flexible and powerful. Innovation and increased bandwidth allow for more innovative and more interesting uses of the protocol. HTTP video streaming is a great example of this. The client is responsible for managing the HTTP requests that it will need to successfully play back video served up in HTTP chunks, while still providing expected functionality to the user. We still have conversations about “chatty” applications, but these conversations will be minimised as a different perspective and different technologies emerge that leverage HTTP to a greater and more efficient degree.

Leveraging Existing & New Technology

As with HTTP, other established technologies will be accepted and leveraged by the browser. For instance, browsers are finally getting around to integrating media playback. WebRTC is another example things like WebSockets, node.js, socket.io, there are some really interesting things going on excite about the next-gen applications and tools that will be created.

What I see

All of this isn’t to say what we as developers are doing now will go away. Things certainly won’t change immediately. But, I am looking to the future, evaluating trends and technology, and emerging conversations, and what I see is the browser. Maybe not in it’s current incarnation, but the browser is what I see.

What do you see?

Multi-screen is Sexy, even at Adobe Max

There are too many devices to consider when developing video players now-a-days.

Don’t you wish you didn’t have to think about each and every device that Bob & Sally were using to play video?

We’ve got it covered with our Adobe Max 2011 BYOD Lab

“Video Player Development for Multiple Devices” .
(boring name right? I know, but still…)

WTF is BYOD? Stands for Bring Your Own Device – it just means you’ll need to bring your own devices to follow along. Here is what we’re looking at for setup:

We’ll go over concepts and code with you to take the tediousness out of developing video players.

Android? Yep.

iOS? Sure-nuff

Blackberry? Um….yeah, this is Flash baby – we got it.

We’ll show you how to AUTO-MAGICALLY detect the platform and screen size and let the player do the work for you.

If you’re attending our session, AWESOME. Thanks!

I’m sure you’d like to get going early right…I thought you might.

Go download the BYOD Lab Files

Hey, even if you’re not going to the session or Max, you’ll get some good sample files right?

While you’re at it, check out Jun Heider’s “Multiscreen Project Best Practices” session too.

F4Fragment Extractor App & Adobe Marketplace Problems

I want to let anyone interested in the F4Fragment Extractor know that I’m working with Adobe to resolve some issues with my Marketplace account. For now I can’t access the account to make updates and changes to the offering. My plan is to add some requested features like command line arguments and the ability to handle multi-bitrate files auto-magically. But, I can’t until Adobe helps with fixing my access.

I’ll make sure to post an update as soon as I get access to the site.

The Cooking Channel’s Eat Street in our Parking Lot

Ian Kleinman of the Inventing Room

Ian Kleinman of the Inventing RoomA long time friend of mine, Ian Kleinman is going to be featured on the Cooking Channel’s Eat Street TV show.  If you want some awesomely-crazy-wacked-out snacks, to show your support for Ian, or just want to get on TV, come hang with the Inventing Room and the Realeyes crew. Here the menu that Ian has creaeted for the cart tomorrow:

  • Apple pie “Koolaid”
  • Hot fudge ice cream, espresso fudge cookie
  • Homemade whipped marshmallow
  • Strawberry yuzu sorbet with frozen olive oil
  • Popcorn space foam
  • Miracle fruit tasting
  • Creme brulee with banana foster
  • Coconut ice cream with brown sugar
  • Braised pineapple and raspberry bubbles

Ian & The Eat Street crew will be in the parking lot (behind our offices at 940 Logan) filming Ian and his inventive cart Tuesday March 31st from 8:30 am until 3:30 pm.

Mobile Flex: View Data

From the previous post you should know how to navigate from 1 view to the next using the ViewNavigator.  Now, you want some data in that view right? No problem, this is where the View object’s ‘data‘ property comes into play. Setting the data property is accomplished by passing the data object, in addition to the View’s class name, into the pushView() method on the navigator object.

Example:

[as3]navigator.pushView(MyNewView, dataObject);[/as3]

This effectively calls the setting for the data property of the new View (MyNewView) object that is created.

Managing View Data

You could work with the data property on the View object directly. For instance, if the data object passed into the View via the pushView() method was a simple user object that contained a name property, you could bind the name property to a label control.

Example:

[xml]<s:Label id="name_lbl" text="{data.name}" />[/xml]

Overriding the Data Property Setter

Usually though, you’d want to override the setter for the data property. Then you can type your object and work with it in a better manner.

Example:

[as3]protected var user:User;
override public function set data(value:Object):void
{
super.data = value;
user = value as User;
}[/as3]

[xml]<s:Label text="{user.name}" />[/xml]

So now we’ve got the data in the view. The next step is to manage the state of each view. With mobile apps you can’t count on the view staying around, so we’ll need to keep a tight control on the state of each view. That way we can bring the user right back where they expect to be when they come back to the app after a call for example. In the next post we’ll look into how to do this. Stay tuned.

This article has also been posted on the Realeyes website.