Geek

My Experience Learning Technology (keep it simple, ese!)

I think learning a new framework or technology is not as much as knowing how to make it work but discovering, finding the joy, and get a sense of confidence before you even start your first line of code.

There are great video tutorials out there. They want you to watch and code along. There are workshops wrapped in technical books. You follow along step by step through chapters until you complete a large exercise. I think of it as a salad of different chapters. And that reminds of a book called Adobe Flex 3:Training from the source.  That way of learning is based on following along and at the same time understanding the process of a framework or technology. But for very large subjects you can get trapped and look back and wonder how the project started, how it ended and what happened in the middle. As you can start to feel you have memory loss. You have been thrown in the  jungle and you are fighting for survival, and having no clue you depend on a technical master to work your way around and find a way to accomplish the mission.

There are other books such as the ones from O’reilly which are not intended to make large applications, but instead they give you each piece of the puzzle. Every demo is simple and focuses on the chapter you are in. You are in the scope of the chapter and that’s it. Maybe there is a final process in the book about a larger application using most of what you have learned from the rest of the book. I personally think this is a great way of learning. You might not know everything but you understand the basic concepts and be beneficial to follow along a larger demo. I would say that’s the best way I can learn.

In my first years of software development, I started learning C++. I remember very vividly an old friend who was ahead of me. He was intimidating me by telling me his and other classmates stories of failing the first course. That made me very scared. So each time the professor went over the blackboard and wrote the code, I wrote them in my notebook and headed after class to the computer lab. I was there testing her code and seeing what it was doing. I modified it at times to see what else would happen. This process has been great as examples are kept simple and can be used to make changes like if I wrote the code giving a sense of confidence.

It’s possible that if you were to learn an easy subject you are going to just follow along and get it straight forward. That was an experience I just had learning Emmet from Lynda.com. Here you are not working chunks of code but understanding how to write shortcuts so the editor can translate it to html and css. And that can also be the case of learning CSS straight from a video tutorial. No need to write large applications.  I was talking to a friend of mine who is learning AngularJS. She was telling me it was a bit hard to just watch and code along. I have already watched the video tutorial. I told her to concentrate more on watching than coding. Better is to understand than break the concentration by following along.

I used to also follow along and test everything I got from books and videos. Until I have realized there are things I will never get to do on that technology. I have felt as it is important and as professional to do the exercises and work on a few external demos. But it has turned out the applications won’t ever require me to do it. The key here is simply know about it. There was once an interview for a job. I remember being asked how well did I know a given technology. I was nervous and didn’t know how to answer as I simply didn’t remember it clearly. The person giving me the interview helped me by telling me you have to answer I don’t know but I can research and figure it out. That’s what is all about know the fundamentals of a technology, read as much and watch demos but until the day comes go back pick on it and apply it in your project.

I am currently learning Android. I am going over a book which has 2600 pages and its name is Commonsware. I think this book is giving me a lot of help as it focuses on the theory and simple exercises. It is quite large and as I already mentioned I don’t need to know everything. I know the first 800 pages were about the fundamentals and I got to read and do each exercise. The rest of the modules are more secondary but important as well. I am reading the book as much as I can. I feel like having a great broad understanding of what is possible to do is important. I cannot continue doing my own demos for each chapter anymore. As this can affect the feeling of fulfilling the understanding of what Android can offer. It’s like going to a concert and waiting in a long line to see a band your friends are telling you is great but you haven’t done your own research. We need to research the technology we are interested. Researching gives you confidence. Research is like reading through a travel book about a new distant city. Once you are there, you would be familiar with culture, and know how to go places of interest. The more you know about it the more you will enjoy your staying and feel more as a local where in technology would be more as a pro. :)

My case with Android is the same I read each chapter. I test the code and see what is going on. I write notes and graphs. Not only I follow the book blindly, I watch youtube videos regarding chapters and find libraries written by the community which can make the process less tedious. All of this is making me more passionate and getting me out of being intimidated as I can even discuss subjects which are more advanced to what I have done. It’s about a mental image of what you can be capable of doing. For several of those chapters, I know the day will come when I can pull out what is needed to be taken care such as knowing how to encrypt an existing database. I know how it works and I can go back to that chapter but it is not as important right now. So make the learning fun and keeping it simple. if a book is trying you to make a large application on your first time, my advice is keep watching and don’t do anything.  Think of it as a movie you are watching instead. You can tell the story but don’t need to be in it. Thereafter you can learn the subject one step at a time.

Android

Android Annotations demo

As I have gone over the fundamentals of the Commonsware series and found Android Annotations fascinating. I took one of the series app demos and converted it into an Android Annotation demo.

What I learned from this exercise:

  • Make sure to read thoroughly the documentation assuming from its intro the framework is easy to replace. I bumped myself a few times with their SharedPreferences injections. Best if you test your injections in a dummy activity.
  • The commonsware example has at times fragment-activities just adding fragments using the ID (R.id.content). For this to work with @fragment injections, I had to set the fragment-activity to have set a plain layout. See more at SimpleContentActivity
  • I had to look twice at referencing Services and Broadcast Receivers because you will see errors by the time you compile. Since the framework does its magic by the subclasses it creates. Even though, You are immediately told by Manifest.xml file when you are not referencing a subclass. Keep in mind subclasses are named the same except they have appended an underscore character.
  • I felt at times I was writing in another language, but I found this approach more elegant. I really enjoyed  replacing AsyncTask classes with injections of @background and @uithreads
  • I feel tired after spending a good amount of time doing this. But it was a great learning lesson, and I think I learned more replacing than doing examples from scratch.

Download or fork my EmPubLite demo and compare

Android

Making Android coding more elegant with Dependency Injection

When I jumped into Javascript, I was very happy to hear about JQuery. It made things easier and less code to write. I still find it a way to cut corners and works great among different browsers and their versions. It is elegant to write in JQuery, I would say and plays greatly with Javascript frameworks. The reason why I write this is because I see an analogy with Android framework injections. These frameworks use hints to brief code and let the framework “inject” code for us. So that way we don’t have to always rewrite the same lines of code when we create an Activity, Fragment or for Fragments, BroadcastReceivers or Services. It is also elegant as it takes away redundant code leaving just the lines that make sense to write.

As I am a big fan of Commonsware book series, I am going over the ActionBarSherlock library. So at the time I got into the fundamentals I wanted to start writing less code, yes I am lazy. I don’t like writing the same code over and over again. So I first went over RobotGuice. It was a framework I heard from a long time ago, but as I started to use it I became aware I was moving my classes into subclasses whose parent classes were made now of the RobotGuice flavor. I was at first okay with it, but once I wanted to use again the ActionBarSherlock library, I realized I had to make use of another layer in between my activity and its parent class SherlockActivity and for that there is a robotguice-sherlock library. I started to notice I was going to go through more than I have to do with just writing plain code for Android. Like other Android developers I went over other frameworks, and I found Dagger. Which states it is very similar without having to slow the process of an application. But still if I were forced to use the ActionBarSherlock library, I would have to play funky and make a move similar to robotguice-sherlock.

Finally I started to read more about Android Annotations. I was blown away, I do not have to extend my activities to another flavor of the frameworks mentioned. This time my activities are sub-classed and that takes to do the magic. I only have to make sure the rest of the application references the subclasses instead. The trick is subclasses are named alike appending an underscore character. So MyActivity is known as MyActivity_ in the Manifest.xml file and for the rest of the application.

This examples shows an activity with plain code using ActionBarSherlock library

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class MainActivity extends SherlockActivity
{

     TextView textView;
     String guice;
     Vibrator vibrator;

     @Override
     protected void onCreate(Bundle savedInstanceState)
     {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);

          textView = (TextView) findViewById(R.id.textView1);
          guice = getResources().getString(R.string.hello_guice);
          vibrator = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE);

          textView.setText( guice );
          vibrator.vibrate(1000l);
     }
}

This examples shows an activity with Robotguice via robotguice-sherlock using ActionBarSherlock library

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@ContentView(R.layout.activity_main)
public class MainActivity extends RoboSherlockActivity
{

     @InjectView(R.id.textView1) TextView textView;
     @InjectResource (R.string.hello_guice) String guice;
     @Inject Vibrator vibrator;

     @Override
     protected void onCreate(Bundle savedInstanceState)
     {
          super.onCreate(savedInstanceState);
          vibrator.vibrate(1000l);
          textView.setText( guice );
     }
}



This examples shows an activity with Android Annotations using ActionBarSherlock library

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@EActivity(R.layout.activity_main)
public class MainActivity extends SherlockActivity
{
     @ViewById(R.id.textView1) TextView textView;
     @StringRes(R.string.hello_guice) String guice;
     @SystemServices Vibrator vibrator;

     @AfterInject //handles injections
     void doAfterInject()
     {
     vibrator.vibrate(1000l);
     }

     @AfterViews //after views are bound to the application
     void doAfterViews()
     {
          textView.setText( guice );
     }
}

I hope this post was valuable and if you would like to share your thoughts or suggestions, please feel free to do so.

Android

My experience learning Android from different books

Learning Android from different books

Learning Android from different books

Almost three years ago I began learning Android on and off. I was busier working on web applications and that was pushing me away. I find Web Development fun but not as interesting as interacting with a mobile device. That is another world and in a world I want to get more involved day by day. I find Android a place which even after spending a good amount of time I still feel like a newbie.

I first started with Learning Android. It is a great book and just recently it was updated. It goes with demos into the fundamentals of Android. I greatly recommend it. Then I went over the book Professional Android 4 Application Development, that book to me was very condensed, and I was getting intimidated more and more. Finally, I decided Android would take time, and I had to take the time to learn it more than I expected. I am glad I chose the Commonsware book series. it is a book with 2,500 pages, but the first 800 pages go over the essentials. I felt comfortable to do a lot more reading and more exercises but at the same time I could understand things more clearly. Just after the fundamentals, I am going to go over some of the trails the book offers.

My advice is if you are starting with Android don’t jump to a book like Professional Android 4 Application Development. It is a great book for someone who has more experience and specially targets the Android api 4.x series. It can be a great book to have as a backup reference. In contrast the material from Commonsware targets several versions and in that regard it uses the ActionSherlockBar library. My next post will be about using a Dependency Injector Framework with Android.

(Jan31.13) A quick note. Android Guides is a hub of Android tutorials. The creators also provide their own.

Javascript

How to apply JQuery-UI to a Bootstrap component

JQuery UI uses its own factory to operate its components. If you read about it, you would notice it can be apply just to just any component of its own flavor not necessarily from JQuery UI. You can go to JQuery UI’s download page and specify what tools you need to download. Because I wanted to keep Bootstrap on its own and use JQuery UI as its helper.  I needed to just download the core functionality and its draggable feature. That was it, then I was able to go on and turn the progress bar into a slider.

You can read more of how this gets apply by visiting  https://github.com/juanmendez/bootstrap-slider (enjoy )

Geek

Web Development and How It Relates to Cooking

There is in web development a toy-envy. Every time you do something, you find another framework or library which has something missing with one of your tools, and you wish to have it as well. In my case, I have used KnockoutJS and felt right at home by having databinding which I used to play with in Apache Flex. I was always wondering and feeling distant from the unknown joy of another framework called BackboneJS. All the time, I was reading how other people were using it and having fun, so I was inclined to find out more about it. Finally, I got the chance to learn it, and I now feel how I wish I can  merge it with Knockout. It is hard to ignore another toy. And the question arises What  if I just spent the time now on this new library? What if I just find out  more, but this can be at times bad. And it’s hard to be happy and stick with what you know.

Cooking WordPress

So an analogy with the world of frameworks and libraries is like telling friends and family to come to your place and you will cook something for them. You want to please them, and you want to hear great comments about it. If you have invited them other times and  you have no more recipes, you might feel like it is better to know from another expert and get his recipe books on your shelf. It’s just that at times you might be disappointing, and feel their recipes don’t fit with your cooking skills and styling. Maybe you hate the idea of baking like me, and this appear with a promised recipe you were going to have for dinner. Maybe it is time to look at another recipe, but it lacks how much time it takes to have it ready. You go online, and hear great and bad comments of that dish. What to do, find something else, or simply cook one of your classic recipes. It is great to know of new recipes, and lucky to be in the kitchen and learn from another friend who makes the recipe and can give you his thoughts and suggestions.

Learn a few more recipes, and cook slow. One recipe can taste delicious and if well done, your friends won’t ask you for another one any time soon. So each recipe has your signature, and bend it a little bit to make it more pleasing to the way you like to cook :) I hope that can translate well in the world of web development, specially for Javascript’s unlimited number of frameworks and libraries.

 

 

Geek

La Catrina

La CatrinaI like coffee shops because people chat and is a way for me to get focus on coding. I was on this cloudy and sunny day in downtown Chicago.  I was thinking I need to be in a different coffee spot today. If you see here in the Loop, there are tons of Starbucks, and other big coffee chains like Caribou coffee. So at first, I grabbed my bicycle headed southwest from the Loop and with my smartphone I wondered of a new  place I have never been and was out of that trend.

I found La Catrina Cafe in Pilsen. The ride was worth as when I arrived I saw through their glasses the place. The place is bright inside and right away I could see paintings with strong colors which contrasted. Some people inside were using their laptops which made me assumed there was free wifi. Above the entrance door there is a stand with the logo of the female skeleton called La Catrina and next to it is Frida Khalo and Diego Rivera. I was now in Pilsen, I could feel more relaxed here and at the counter speak in Spanish, make a conversation and tell them how annoying is to find  Starbucks everywhere in the loop. The guy chuckled and said so you are coming here everyday? I said I will definitely pay a visit when I am in the neighborhood.

I order a concha which is sweet bread and a Mexican hot chocolate. I swear with the mug I could see myself drinking beer and keep on ordering that delicious dark chocolate drink. So as I mentioned the place to a friend who was online. She told me why not blog about it. I like to talk about it as I know there are other geeks who can’t stand being inside a silent library or who can do all their work from home or their office. I think coding is also an adventure and like Forest Gump said “Life is like a box of chocolates, you don’t know what you are going to get”. It is very true about coffee shops. Places can be unpredictable. I feel glad when I discovered a place which is out of my radar, and becomes a place I like to visit often. To me one of the most annoying things is when I first try to access the wifi from a coffee place and either it connects but has no internet access or a very low signal. That’s a big deal because you prepared but now you have to look somewhere else. What I do now is first test the wifi before I ordered; otherwise, just leave. Well, that was not the case at La Catrina. Their wifi was strong enough for me to read important articles, and continue my ongoing learning.  :)

So next time you are around Pilsen, come over here. You won’t regret it :)

 

Javascript

Backbone JS demo having Router/Model/Collection/View

This is a BackboneJS demo about a list of cooking recipes from an imaginary book. I used requiredJS to put everything together. On the server side, I used PHP and MySQL. Here is the live demo. You can also download the whole thing from Github.

As I have used over the past two years KnockoutJS, I wanted to try another framework, and I decided to go with BackboneJS. I had fun learning yet I  have a few frustrations. I could think how soon I would have done one thing if I were using Knockout instead. But I didn’t let that stop me to finish the exercise.

What I learned and was a challenge after the tutorials and documentation:

  1.  I was looking how to bind a model being shared between two views (list view and edit pop up). I needed the pop up to commit the change for the model. And in this way the list to update once the CRUD action took place. But model events for these type of actions were a bit confusing. I realized that model.on( ‘all”, function_handler ) is a good way to debug and test against updating the view several times. In my first test it was a breeze for the View to go by the promise returned from the model’s CRUD actions.
  2. Another confusion was how to work with the Router. I was at first enabling it and caching handling events. In this way any view which would later be ready would reference the caching object. I was not happy with this strategy, but eventually I realized I could at first just wait for the list to fetch as they call in Backbone so to get all recipes, and then turn on the router so all views available could play along.
  3. The definition of View in Backbone is about adding the Javascript in the scope of the real view. This is actually the controller.  And the term could lead to confusion. I read somewhere that Router was the controller. You can have a Backbone application missing the Router. So Router is more of a proxy allowing the browser to make url changes, and for Router to notify in our client side of the changes.
  4. I understood clearly templating in BackboneJS, just like I have used it in Knockout. The difference was implementing Handlebars. After a few attempts I got it to work and now I consider to use it in the long run. I left a readme.txt note about the steps I took to get it to work.
  5. The first things I learned in BackboneJS were models and collections. So my first example dealt with having everything just by using jquery modules relating to the models/collections. And thereafter I went to implement Views where necessary. But this way of doing things slowed things a lot. But anyways that was a way for me to learn and finally use Router to navigate through the application.
  6.  For Router, I used a lazy approach having to request the router for an update, and for a global object called “app” to dispatch the url change, so event the same view making the url request would handle the change by listening to “app” instead. Now I can see the application editing one recipe by having url#recipe/id. I thought that was very awesome.

Well, I hope you have fun if you are new to BackboneJS like me. And if you can share your story we can help others who are also learning.

CSS HTML5

Bootstrap Components

I went through the CSS documentation of bootstrap. I did several examples in JSFiddle along with reading over Javascript in the next documentation section. I am currently going over that content and finding what I didn’t cover in the links below.

Javascript

Collaborating with RequireJS


I am amazed how RequireJS is very powerful. It hooks up different javascript files to load in an expected chronology so one dependent file arrives on time. I want to keep it consistent and for anyone else to use my code ironed with RequireJS and in such case I think of my single file to be like a function which requires certain parameters instead of just guessing those variables are global and I will be lucky to get them

1
2
3
//if boostrapslider.js was a function
function bootstrapslider( jquery, mouse_core, touch_punch )
{...}

In the real world I want my file to be available and for another source to include the required missing paths. In the next piece of code I show how they will pass parameters to my file through config having an alias and the real path attached.

1
2
3
4
5
6
7
8
9
10
11
12
requirejs.config({
      baseUrl: '',
      paths:{
            'bootstrap':'http://getbootstrap.com/dist/js/bootstrap',
            'jquery':'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min'
      },
      config:{
                  'bootstrapslider':{'jquery':'jquery',
                                      'mouse_core':'jquery-ui-1.10.3.mouse_core',
                                      'touch_punch':'jquery_ui_touchpunch'}
      }
});

This is how my file gets feedback of those paths. By using module.config(), it pulls paths associated with the aliases. Next line we use require() just to assure the files are loaded.

1
2
3
4
5
6
7
8
define( 'bootstrapslider', ['module'], function ( module )
{
    var path =  module.config();

    require( [path['jquery'], path['mouse_core'], path['touch_punch'], function($){
        //now this file can do its magic...
    });
}

In addition, when I did my work I noticed I needed to use shim as touch_punch wasn’t requirejs friendly and needed other dependencies to be loaded previously. In the next code, I show how dinamically I created that shim, and included the static declaration within the comment.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
define( 'bootstrapslider', ['module'],
function ( module )
{
    var path =  module.config();

    //mouse_core needs to be loaded prior to touch_punch.
    /* the next line builts the next line, cause we need to dynamically refer to path['touch_punch']
    require.config( {
                         shim:{ 'jquery_ui_touchpunch':{
                                 deps: [path['jquery'],
                                 path['mouse_core']],
                                 exports: 'TouchPunch'}
                              }
                    });*/

      require.config( (
          function(touch_shim){
            var config = {shim:{}};
            config.shim[ path['touch_punch'] ] = touch_shim;
            return config;
        })({deps: [path['jquery'], path['mouse_core']], exports: 'TouchPunch'}));

     require( [path['jquery'], path['mouse_core'], path['touch_punch']], function($){
       bootstrapslider($);
    });
}

So this humble code shows how you can make your code merge within a project. :) You can see my real world example by going to https://github.com/juanmendez/bootstrap-slider