Teach kids a bit of coding. Part II: The beloved JavaScript

11:27 AM Xun 1 Comments

So onward and fast forward from running through one learn-to-code app to another, I finally decided to go straight back to my home camp, the JavaScript camp.

The whys

Why not? For all the good reasons, convenience, resources, usefulness ... why not?

In this coding kingdom, nothing is more convenient and ubiquitous than JavaScript, the language of the web. Who does not use the web? Even on your phone. Even some of your favorite apps.

Resources? There is more libraries, frameworks than you can count.

Comfortable? Yes, I am utterly at home with JavaScript.

Useful? Yes, I am done with building just another play thing living in someone else website.

Yet another back story is that, unlike a lot of game kids, my kids are not so deeply immersed in the game culture. Rather, they are utilitarian; Unlike me, who always checkout and use whatever is out there, my kids want to build their own tools. For example, they want to build a student bean counter so the teacher can easily track at any given time on any given day, which kid is missing; they want to build a Knock-knock-who-is-there joke factory.

Now, they want to build a star/sticker chart, which gives out (online) stickers whenever someone does a good (or not so goo) job , for example, playing violin.

So there we go.

JavaScript can do math homework

Honestly, coding does look daunting. So the first thing I tried is lure my kids by showing off some of the awesome homework-checking capabilities of JavaScript. Like the following. Using FireBug console.

Ok, it is not quite JavaScript yet, but by using FireBug, the little adds-on for Firefox, I gave her a glimpse of JavaScript

Get in touch with basic html tags

A little quick math quickly lost its shine. So I set out to show the basic html dress code, tags like <p>, <img> and the basic html page structure, head, body, title, etc. Luckily for me, I have Visual Studio, so creating a page is a breeze. The next thing, adding some tags, <p>, <img>. So quickly we have a page (ugly it is) set up that have a image from Google, and some text goes with it.

My daughter was having trouble remembering put the text inside of the <p> tag.

Introduce the concept of array

So far so good. My daughter was mildly interested and amused to see her own page actually come alive!

Yet, we need a lot of knock knock jokes. So I have her to drop more <p>, <img> It was getting very very boring and error prone, so obviously, computer should be more fun and intelligent than this.

So let's see if we can handle an array.

Every programming term sounds so alien. She does not get the name variable or array.

What is an array?
Eh, Emma, an array is a collection of things. Ok?
What does it do?
Eh, it let you put things together, then you can use a loop to go through them one by one.
What is a loop?
A loop is just a loop ...

I am always a person who is short at words, now I am out of words.

No matter. Let's build an array anyway.

In JavaScript, you put similar things inside a pair of square bracket. Like this:

var knockknockJokes = [
            { who: 'lettuce', whoIs: 'lettuce in!', image: "" },
            { who: 'figs', whoIs: "Figs the doorbell, it's broken!", image: "" },
            { who: 'Avenue', whoIs: 'Avenue heard this joke before?', image: "" },
            { who: 'Aunt', whoIs: "Aunt you glad Granny's gone ?", image: "" },
            { who: 'Orange.', whoIs: 'Orange you going to let me in?', image: "" }

It took more explanation, the object inside of the array, the properties inside of the object, etc. I wish i knew better, more kids-friendly words.

Anyway, the array is done. Let's spill all of our knock-knock jokes.

I wrote the loop for her. And our page is done. We are happy.
The Knock Knock page

Next time, I will tell how I get her to know a bit of JavaScript function, the very core of JavaScript.


Teach kids a bit of coding. Part I: a look at current Learn-to-code-for-kids resources

7:05 PM Xun 2 Comments

Trend dictates that everyone needs to code and be able to code. Who does not want to be the next Mark Zuckerberg or Larry Page, or at least, their employees?

There is an abundance of resources and teaching initiatives.

Code.org (backed by Mark  Zuckerberg, Bill Gates, etc. etc., anyone who is somebody across all social walks) had some online tutorials interspersed with inspirational videos;

Khan Academy has dedicated computer programming courses where you can clone and create your JavaScript project;

MIT has Scratch, where kids can drag and drop coding blocks, cartoon characters, video/audios and build simple video games, animations, or simply tell a story.

There are all sort of coding games, which are more game than coding, that try to introduce the ideas about functions, loops, variables, and some logic training. My favorite is Kodable.

As a professional programmer and a mom who also eagerly wants to pass on some of the coding skills to my kids, I have ambiguous feelings about all of the programs I have tried with my kids, and I have very limited success getting my kids interested.

For example, Khan academy has simple ideas about teaching kids drawing with JavaScript. With that, you need some fine sense of coordinates. It is supposedly a very visual task however it requires you to plot all the spacial points out of thin air. My kids quickly gave up trying to draw a duck with a plump body and 2 yellow eyes.

Code.org is fine too, it teaches basic programming concepts such  as Conditionals, Loops, functions, It is all done in some format of half gaming. Instead of instant feedback from video games, you point, you shoot, something happens, With code.org games, you stack up your instructions, then hit run to see if your angry bird will get the pig while also evade a potential disaster.

As a matter of fact, most of current coding games are done in this fashion.

Kodable, where fuzzes run through a maze collecting coins; Tykner, has different set of games, Dragons and Firefly; Candy Catcher, etc,, etc.. I like Kodable a lot, it has cute and simple interface, very helpful and non-intrusive instructions and contextual hints, very clear objective and path of execution.

However, Tykner, I found it very annoying. It is hyper-active, lacking clear instructions, sometimes logically confusing. Do you jump on the candy, or jump over the candy in order to eat it?

Then there is Scratch from MIT, where kids or anyone can drag and drop instructions, sprites (images) and start building animated stories. It is very popular and admired for its versatility, and people have created millions of projects with it. Some of the projects are quite fun.

I tried Scratch with my kids and we created a few projects. Still, a lot of things feel very retro. the sprite set is very old fashioned, you need to watch some tutorials to realize how to coordinate your sprites, it is not easy to create simple variable and make them behave dynamically. To master Scratch, the effort is no less than a full-blown language. Make everything graphic on the surface may seem to have simplify coding, but in the end, it actually creates more obstacles and complexities.

That is why I eventually went to JavaScript.

Until next time.


Dapper and Dapper Async

11:02 AM Xun 1 Comments


Dapper is an object-relational mapping (ORM) solution for the Microsoft .NET platform. It is written for and used by stackoverflow. It has the signatures of a stackoverflow baby, hugely popular, no-bullshit/lightweight, effective and efficient, stellar performance.

We have been using Dapper for a couple of years. We love it, for its simplicity and performance. It is so simple, whether we do select, insert or update, whether we use stored procedures or ad-hoc sql.

using (var connection = new SqlConnection(myConnectionString))
                const string sqlStatement = @"select client_id As Id, client_name As Name from dbo.client with(nolock) ";
                return connection.Query(sqlStatement);

.NET async 

.net 4.5 came out about 2 years ago, and asynchronous programming with async and await is one of the big features. async/await allows you to define a Task that you can await on, and then continue execution once the work is done, all without blocking the calling thread unnecessarily. async and await operations took away the programmatic complexity from programmers, however, under the hood the compiler still does the heavy lifting of setting up a waiting context/state machine so a task can get back to exactly where it has begun.

 The overhead of async/await in NET 4.5 demonstrates that "Despite this async method being relatively simple, ANTS Performance Profiler shows that it’s caused over 900 framework methods to be run in order to initialize it and the work it does the first time that it’s run."

 It is agreed upon that async/await should be limited to only I/O heavy operations, web access, working with files, working with images.

How about database calls? Turned out database calls are by nature blocking. It blocks the calling thread even if you stamp your method as async and use the await keyword.

 To allow asynchronous database queries and other crud operation, dapper added a set of QueryAsync methods using .NET Framework 4.5's Task-Based Asynchronous Pattern. Under the hood, the asyn dapper methods uses connection.OpenAync, executeReaderAsync to allow connections to be opened and queried in asynchoronous mode.
      public static async Task> QueryAsync(this IDbConnection cnn, CommandDefinition command)
            object param = command.Parameters;
            var identity = new Identity(command.CommandText, command.CommandType, cnn, typeof(T), param == null ? null : param.GetType(), null);
            var info = GetCacheInfo(identity, param);
            bool wasClosed = cnn.State == ConnectionState.Closed;
            using (var cmd = (DbCommand)command.SetupCommand(cnn, info.ParamReader))
                    if (wasClosed) await ((DbConnection)cnn).OpenAsync().ConfigureAwait(false);
                    using (var reader = await cmd.ExecuteReaderAsync(command.CancellationToken).ConfigureAwait(false))
                        return ExecuteReader(reader, identity, info).ToList();
                    if (wasClosed) cnn.Close();

Should you use asynchronous database calls?

 Just because you can do it does not mean you should do it, says RickAndMSFT at here.


 It does your more harm than good if you queryAsync a small query that takes a few millisecond, however for long running database calls you may consider using querySync feature to avoid bottleneck and gain some responsiveness.

 Check out some benchmark testing from this article Asynchronous Database Calls With Task-based Asynchronous Programming Model (TAP) in ASP.NET MVC 4.


W3 layouts and mobile brower detection in Asp .net

2:36 PM Xun 2 Comments

Let's face it, designing a web template is quite some work, not to mention it takes an eye of aesthetics and the fact that it has to look good on both web and mobile devices. Yes, any web is declaring its own death if it looks crappy on mobile.  So unless you are a professional designer and swimming in loads of money, if you need a quick template, you probably just grab one out there and tweak it and style it to your heart's desire.

That is what I did. And that is why I am so delighted by the various templates at W3 layouts. It has a big collection, and FREE and RESPONSIVE. None of the other template sites come close. (Other popular ones are templates at http://html5up.net/, but frankly I think they are mostly ugly or perfunctory. WrapBootStrap has some nice ones, but they are not free, though most of them do not cost you most 4 cups of Starbucks.)

Peculiar enough, the templates at W3 layouts often come in three flavors: web, mobile, smart phone. It took me a while to find out that smart phones are for our regular mobile chops: IPhone, android, windows etc. And Mobile templates are designed to use wap 2.0 standards with xhtml where javaScript is not supported. Heck, I guess i can safely discard mobile templates.

Then, the nagging question (quotes from w3 layouts.com):

When we have responsive WEB template why we need separate SMARTPHONE and MOBILE template?

Responsive design is good for users having speed network connection (WIFI, 3G). Responsive design will load the whole HTML, CSS and images which are used for desktop design, users in slow data connection have to wait and spend lot of data, time and money to load page. To save users Money and load time we have to use separate design depending on device compatibility.

So I set out to create my little personal site with the fancy and pleasant designs of W3 layouts. Oops, seems that a big part of the world still has not convert to the Microsoft/Asp .net camp, sadly, seems that more and more developers are parting their ways from the gloriously clunky world of Microsoft. (Proof: Why I Left the .NET Framework).

So W3 layouts is in the php camp, and they use a bit of php code to detect user browsers/devices. I would love to use php, but with the time constraint, I am also happy to stick to asp.net.

So happily and quickly searching (since everything is out somewhere if you search!). I found the following nifty code to get just what I want (got to say it is much more neat and clever than the php code provided by w3 layouts.

C# code (from Mobile Device Detection in asp.net)

  public static bool IfBrowserIsMobile()
            Debug.Assert(HttpContext.Current != null);

            if (HttpContext.Current.Request != null && HttpContext.Current.Request.ServerVariables["HTTP_USER_AGENT"] != null)
                var u = HttpContext.Current.Request.ServerVariables["HTTP_USER_AGENT"].ToString();

                if(u.Length < 4)
                    return false;

                if (MobileCheck.IsMatch(u) || MobileVersionCheck.IsMatch(u.Substring(0, 4)))
                    return true;

            return false;

The following is the php counterpart: