Videos from Sydney JavaScript UG, 19 June 2013

Let me put the interesting stuff first, some good videos from SydJS gathering this month:

Pro-tip: Make sure to switch video quality to 720p for best experience. The video quality button is one of the left buttons next to full-screen button.

The videos

WebGL, the Goo Engine, and your Blackberry

I18n – why, how; and where the name came

JavaScript based ERP

Jerkins CI & JavaScript

The future is a promise

Background

My readers know I have been experimenting with video publishing for a while, focusing on simplicity in getting releases out. I started with a simple introduction to the new Angular.JS library, a simple productivity trick for all users, and then a simple and old cross browser CSS trick. In the 3 videos, you saw me explaining stuff. It’s time for something different.

The idea is to record the usergroup sessions I go to. I started with ALT.NET Sydney last month, organized with speakers to use their own recording, then got a bit unfortunate due to technical issue on the machines used.

This month I didn’t have a connection with the speakers to coordinate the recording, so I just took my phone to Sydney JavaScript usergroup (SydJS), sat in the first row, and started recording a separate video for each session.

Due to the nature of the way I used, and being a first timer, you’ll find some issues with the videos like the scene moving up and down a bit, and zooming-in and out or fading a bit. However, the videos are still an OK resource for anyone who missed the event (or doesn’t live in Sydney at all). So, hopefully you like them, and I get to improve the technique next time.

What is my opinion about Knockout vs. Angular ?

My Angular.JS video is getting way more traction than I thought, with over 2K views and a lot of comments on Youtube and Facebook. One of the comments on Facebook came today was:

What is your opinion about Knockout VS Angular what is the best !! and thanks for the Good tutorial Mr Mohamed

An interesting question. There is an easy answer that is both technically and politically correct, that goes like: There is no “best”, each has pros and cons. For which one to use, “it depends”.

But I bet this is not good enough for anyone interested in the question, so, I’ll expand a bit here…

A Personal Opinion

“A personal opinion you ask, a personal opinion you get, so, treat it like one, no more”

Mohamed Meligy

Angular.JS does more than binding DOM to JS objects, like routing and enforcing code organization, and connecting to REST server APIs, etc., so, the more accurate comparison is against Durandal.JS, which uses Knockout for DOM binding, Sammy.JS for routing, Breeze.JS for REST data interaction (can be used with Angular), etc.

Knockout is old, and very mature. It was designed to be very easy to plug it into any jQuery plugin or jQuery UI widget. It was also designed to work with all browsers down to IE6. With Durandal.JS you also get the other parts that Knockout itself does not cover. If you are writing an app that depends on very complex “existing” jQuery components that you didn’t write yourself, it may be a better option.

Angular.JS is relatively new. It doesn’t feel like new when you see so many tutorials around and very enthusiast community around it, but it does feel so when you look at things like how the official UI components are in complete refactor/reorganization mode for quite a while. Mind you, they still work nicely though.

Angular.JS does not care as much about legacy browsers. The lowest they support is IE8 and only with DOM/EcmaScript5/JSON shims, and when things don’t work in IE, the whole thing fails with no particular error line to start with.

Having said that, “for me” Angular is the future. I’m not saying that KnockoutJS will die or whatever, it’ll be stupid of me to think so. Angular.JS is very functional as it is now and I used it to save us time in a current project (yes, even with IE support), and along with time and very passionate community (just like Knockout started), it’s expected to get better.

Does this answer the question?

Maybe, and maybe not. I have done quite a bit with KnockoutJS, but not much Durandal.JS, hence this should be taken with a grain of salt. There are several comparisons on the web that go into more detail. I just wanted to write my personal take here so that I can refer to it later when people ask.

Of course, like many opinions, my opinion itself may change as I learn more or as both libraries evolve more.

So, yeah, I highly encourage you. Go ahead and make your own conclusion. Needless to mention, those two libraries are not the only two in their category too ;)

My Quest To Find The Best NodeJS Http Client With HTTPS and Basic Auth

This may be a completely useless post, but it took me a bit to figure out some of the pieces until I got here, so, I thought maybe it’s worth sharing!

What’s this & how did I come by it?

Instapaper is a nice service that provides you with “read it later” bookmarklet. You use this bookmarklet to add any web page to their log and you can read that page later via their site, a mobile application (from them or 3rd party), or via Kindle (or other book readers)!

Apart from their bookmarklet, they provide a simple API to add URLs programmatically. This is useful if you for example want to extract URLs from other services, say twitter favourites. They also provide a Full API (OAuth API) for doing everything their site and apps do, except some things in this so called Full API are (at least to be) only for paid subscribers.

The API

Instapaper’s simple API is quite interesting though, according to the docs, you can use HTTP and provide only username (email) -not even password- to add a URL, and you can use POST or GET. That’s scary for anyone who thinks about security, but -maybe- OK for what the API does. They also provide the API in proper HTTPS with basic HTTP authentication (and if you want more, you can always use the Full API’s OAuth).

I wanted to use their API in HTTPS using POST and Basic Authentication. In my tests I was happy to try HTTP and/or GET and/or sending username in clear-text. I also thought I’d write this in Node because I thought it should be easy. Node people often serve REST/HTTP APIs, so, they must be good at consuming them too (even though in reality most consumers are client JS not node), right? Well, maybe yes.

The Code

I can explain the challenges, how I overcame them, and then show the final code, but I have spoken too much already, let’s begin with the code.

var basicAuthenticationParams = {
username: ‘MY_EMAIL’,
password: ‘MY_PASSWORD’
};

var requestParams = {
url: ‘https://www.gurustop.net’
};

request.post(“https://www.instapaper.com/api/add”, {
form: requestParams,
auth: basicAuthenticationParams
},
function (error, response, body) {
// This is only returned for network errors, not server errors
if (!!error) {
console.log(“Network Error:”);
throw error; // it’s actual JS Error object not string
}

var statusCode = !!response ?
parseInt(response.statusCode, 10) || null
: null;
// I could have checked for 200,
// but technically 200-299 are success codes,
// and more importantly, Instapaper sends 201 for success
if (!!statusCode && statusCode >= 200 && statusCode < 300) {
console.log(“Successful!”);
console.log(); // Extra line separator
}

console.log(“HTTP Status:”);
console.log(response.statusCode);
console.log(); // Extra line separator

// In instapaper’s case, by default,
// they just send status code in body too
console.log(“Body:”);
console.log(body);
});

NPM

See? It was all very straight forward. Well, it wasn’t for me. I tried several NPM packages to get this effect, and none was going well. The “request” package was the one that did the trick. this is generally accepted in Node, the built-in API is very low level and there is some NPM package that gives you the nicer one.

For all the other packages I tried, they didn’t have any dependencies on other packages. This “request” package gave me the usual shock seeing so many NPM packages downloaded and installed, but this is the philosophy of NPM, build small reusable pieces built on top of other pieces.

Getting the request headers right (Oh my!)

While the packages were not working, interchanging HTTP status codes between 403 (invalid credentials) and 400 (missing parameters), it was very hard to tell what I needed. Even associating to proxy to get the output to Fiddler didn’t go well with for example the “easyHttp” package (there is a similarly-named NuGet package for .NET BTW, but it’s not related at all I think).

I went to my favourite Chrome Postman extension, which works nicely like Fiddler for the “compose request” part (actually, arguably is even way easier). The request parameters (was using username as another request parameter, not using Basic Authentication, just to test) didn’t seem to work until I changed the default “form-data” to “x-www-form-urlencoded”

image

Which added the following header to the request: “Content-Type: application/x-www-form-urlencoded”. This kind of makes sense. This overly permissive API feels more optimized for sending from web-pages, where forms are a front concept.

I tried to add the header when I was using other packages but that didn’t seem to tick it. I tried this one, and as you can see didn’t even need to set that. I just used the “form” property of the options though instead of “body” or “”json” properties.

This is why I’m posting this, to hopefully help someone googling get up and running quicker than me. This is not just Instapaper, this can be very helpful in so many situations.

For the rest of you (.NET / non NodeJS devs)…

If you are not a Node person but still want to have a fiddle, after you install Node (which includes NPM package manager by default), then you save the code to a JS file “some-file.js”, preferably in a new folder.

Assuming Node and NPM are in the PATH (installer default), you can open Cmd or PowerShell console in that folder and run npm install request then node some-file.js (no quotes in both), and see the results in front of you.

Easy Ways To Discover Feed URL of A Website / Page

All blogs and news websites provide some sort of aggregation feed, usually RSS or ATOM. This allows users to add the feed URL to their favourite aggregator and stay updated with future stuff when they come. This post shows how to get a URL to subscribe to, and how to get multiple URLs if the site provides multiple formats.

A .NET library

One easy way to do this in .NET is using the Argotic Syndication Framework library, the code will look like:


Here is what you get when you run the code against wordpress.com:

image

A few notes on this approach:

  • You must have realised the `Where` check in the code, the library seems to capture any `related` link in the HTMl, not just syndication links. that’s why we needed to filter them explicitly
  • Quite often when you have a main site that has different branches, you get more than one feed link, for CNN for example you get different feeds for certain site languages, for wordpress.com you got one for the site itself and another for members of the service. Arguably, this is not always what you want when you add the site to a reader kind of application
  • As expected, this code is quite slow in debug mode, takes about 1.5 seconds to run alone! In release mode (build configuration set to “Release” and so web,config)

 

Google API

In its simplest form, the syndication discovery is a matter of finding a `link` tag with a proper `rel` attribute (typically set to `alternative`), and a `type` attribute holding the attribute, however, in real life, at least historically, there used to be many variations of the way the discovery was implemented (read the next section for more).

One of those who managed to get right URLs for different edge cases was Google Reader. Apart from Google Reader itself, whose closing was part of the reason I wrote this post, Google allows you to use their systems to get the right syndication feed URL of a given page via simply calling a public JSONP API.


This is the structure of the `data` parameter returned by the previous call:

image

To learn more about this specific API, check:
https://code.google.com/apis/ajax/playground/#find_feed

To learn what’s special about JSONP requests and why jQuery needs to treat it differently, read the $.getJSON() documentation:
http://api.jquery.com/jQuery.getJSON/

 

Background Of The Problem

Even though social media has made people depend on links shared on social media sites (by their peers, or the creators of the feed), the trend of adding a syndication feed to website is a trend that continued to increase in many product and subscription websites, especially that it’s easy to automate social media posts from the feeds after that.

 

As Google Reader will be retired in July, I thought for a minute about what it’d take to put some web based reader together. This was before I learned about the existing awesome alternatives like Feedly and so many others.

Then I remembered there was an application I was working on in 2007, one feature we needed and a colleague worked on was getting RSS posts from personal blogs of the site members. I remember seeing him doing all sorts of crazy Regular Expression matches of so many formats to get the URL. Turns out at least at this time different blog providers used different ways to advertise the feed URL in blog homepage markup, there were so many cases, it took my colleague several days to cover a large set of test cases from different providers that we knew our users were using.

I wanted to see whether this problem was still a thing n 2013, and tried to see what options we had, hence came this post, you know, just for fun :).

Hope some of you were interested in this too!
CodeProject

Node JS On Windows: Unable To Update NPM? A Possible Reason & Workaround

npm-win8 

How I Hit This

I was playing with Node installation, and had a problem installing a certain Node package (which happened to be the first package I tried). I googled the problem and what seemed relevant problem was solved by updating NPM (Node Package Manager). I went to NodeJS website, downloaded the latest Node for Windows (v0.8.14 as of this writing), and tried again, same problem.

I then went to NPM git repository, and checked the latest git version (now that I tried to click download on NPM official site, I see it only redirects to NodeJS website). The latest version mentioned in recent commit comment (2 days old as of writing) was v1.1.66. A quick check

npm version

showed me that I have NPM v1.1.65, not v1.1.66.

So, how does NPM expect you to update it? At first it sounded very simple:

npm update npm -g

This treats NPM itself as a package, and tries to update it globally. Easy stuff, right? Well, expect that when I checked for NPM version again, I found that it was still v1.1.65!

The Problem

Looking at the output of the update command, I noticed that it downloaded the update to

C:\Users\<my-username>\AppData\Roaming\npm\node_modules\npm\

It sounds like "global" in NPM, at least Node on windows (but I assume other versions too), means global within the same user profile (Under %APPDATA% folder, $ENV:APPDATA if you are using PowerShell). Not a problem though, right?

Well, for some reason, writing Node in console or PowerShell was actually calling the one that lives in another folder, in Node program files folder:

C:\Program Files\nodejs

Note that this is not under "node_packagesnpm" under Node, it’s directly in the root of Node’s folder.

The Workaround

Well, I hope I;m not disappointing you here, the fix was a bit obvious for me, I copied all contents of the "npm" folder I listed upwards, and pasted all the content of this folder (but not the folder itself, I went inside the folder, selected all child files and folders, and copied these), and pasted this into the Node program files folder also shown above (after taking a backup of that folder of course).

Checking for NPM version afterwards reported the correct version 1.1.66. This allowed me to get back to the original problem I was trying to solve, which interestingly wasn’t related to Node version at all, that’s why I didn’t mention a lot about it here.

Digging More Into The Problem

After everything is working, while writing this post, I went writing:

npm update npm -g

and even

npm install npm -g

out of nothing but getting crazy, anyway, I checked what I’ve got now and noticed the following:

  • The "npm" folder under %APPDATA% has an "npm.bat" that tries to call the version it installed under %APPDATAnpmnode_packagesnpm".. Which means, whenever this file called, it should call the version inside my %APPDATA% without having to copy it anywhere else.
  • The "npm" folder under %APPDATA% has been added to my environment %PATH%. This sounds like great, it should just work, right? Well, not really, follow on.
  • The backup I still got of the "nodejs" folder inside Program Files, contained another "npm.bat" file. This file was trying to load NPM from the "node_modulesnpm" folder under "nodejs" program files folder.
  • Of course the "nodejs" folder is already in my %PATH% as well. It’s also there BEFORE the "npm" folder under %APPDATA%. This means, executables from "nodejs" folder will be executed first.

Now the problem is more obvious, NodeJS was trying to do the right thing in the %APPDATA% folder, but for some reason, the version in program files folder was still there screwing what it was trying to do. It’s always called first, and there is no way to update it except by updating NodeJS itself (which may sound y design, except NPM thinks it’s updateable by just dropping a new version in my %APPDATA% folder).

Going Forwards

This analysis suggests that it may be even possible to delete the NPM specific files and folders from "nodejs" program files folder, except I think leaving a copy there is a bit safer for whatever future thing that may expect them in that path.

I can actually think of good reasons why they are there, like usage by non-interactive user accounts, like service/IIS accounts or so. I don’t expect Node and NPM to be out of sync for long anyway. Likely just a few days or so.

Could It Be An Older Node Version Issue?

I couldn’t resist the thought this may have been fixed already. To test this, I have uninstalled Node completely, renamed the "nodejs" folder to something else, and reinstalled v0.8.14 on a clean "nodejs" folder the installer created by itself.

The default "NPM" files and folders were still there. This made me sure that this wasn’t just a remaining of whatever old Node version I had before. Again, there is a possible good reason why they are there anyway.

TweetDeck’s "Interactions" Column Is Brilliant

In Twitter’s own website, there’s now a “Connect” tab next to “Home” once you log in. In this tab, you see all the your new followers, others retweeting you, and your twitter mentions.

I’m usually interested in this kind of information, not just mentions but any interest in what I have on my twitter account. I used to setup email notifications for some of them, even though I don’t always read them promptly as it’s common to have a few more followers at the same day some days.

image

Recently I discovered that TweetDack has this very feature. You can add an “Interactions” column, and it will show all your:

  • Mentions (as expected)
  • New Followers (ungrouped, unlike the twitter website)
  • Retweets
  • Favourites (of your tweets, by others)

This is the normal evolution of the “Replies” / “Mentions” column. I thought that other advanced twitter users would be interested in that sort of thing as well.

By the way, this is tested in TweetDack Chrome application. I have set Chrome to open this app in its own window using its own icon (just right click the app icon in any new tab and you’ll find the option). Since even the desktop version of TweetDack is just a Chrome frame, I didn’t even bother install it. It started horribly after moving to being a web version, but I think it’s really nice now again, almost as good as the old native TweetDack!

Lowercase URLs in ASP.NET MVC, The Easy .NET 4.5 Way And Other NuGet Options

If you wonder why you should care about creating lower case URLs at all, or what this actually even means, skip to the appendix at the end.

Earlier, the easiest way I have found to create lower case URLs (URL paths, not query strings) was to use the NuGet package LowercaseRoutesMVC, and modify the routing code, to use the library’s own MapRouteLowercase() extension method, instead of the built in MapRoute()extension.

For example, instead of:

routes.MapRoute(
    "Default",
    "{controller}/{action}/{id}",
    new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

You write:

routes.MapRouteLowercase(
    "Default",
    "{controller}/{action}/{id}",
    new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

The .NET 4.5 Way

.NET 4.5 introduced a new property to the RouteCollection class instances (the “routes” parameter in the code above is an instance of it).

The new property is LowercaseUrls.. Remember that routing is not shipped as part of ASP.NET MVC code, but part of the NET framework itself. So, this property is available to you as long as your project uses .NET 4.5+, whether it’s ASP.NET MVC 3 or ASP.NET MVC 4.

Usage is very simple, just set the property before you map your routes (or after the mappings were added, works as well):

routes.LowercaseUrls = true;

The Result

Either you are using the third party NuGet package, or the standard .NET 4.5 property, after making the changes to the routes, this is what you achieve:

Lowercase URL Generation

All helpers used in in ASP.NET MVC to generated action URLs registered in the URL route mappings will generate lowercase paths. For example, Razor code:

@Html.ActionLink("Log On", "LogOn", "Account")

Will generate the following HTML:

<a href="/account/logon">Log On</a>

Lowercase URL Resolution

Of course the generation wouldn’t be complete without revolving the lowercased URL path back to the correct controller action. In the above example, the “/account/logon” URL will be resolved (assuming the default routing used in the first example in the post) to the LogOn action of the AccountController controller.

However, this is not accurate in fact, because typically we all get this already. Routes in ASP.NET MVC are not case-sensitive by default, so, both /account/logon is the same as /Account/LogOn to ASP.NET MVC.

If you want to force redirection to the lower case paths, for SEO or else, you can (very easily) do that with IIS 7+ and Url Rewrite module. I learned about it by trying, but here is an example of how to use it, and also an official video.

Using The Built-In Way Vs. The 3rd Party Options

The obvious difference is that the NuGet package require you to change every route call explicitly while the built-in way takes over all routes. If you are decided that any non-lowercase route is a developer mistake, then the built-in option may be a better way to minimize developer human error, if you need control or need to exclude some routes from this, then maybe the NuGet package is more suitable.

Note that this specific package hasn’t been updated since last Novemeber, but there are other similar packages on NuGet anyway, and it shouldn’t be too hard to implement one yourself.

If you care about routes and URLs as much, you may also considering writing tests for them.

ASP.NET MVC 4 And Web API

There is another NuGet package specific to ASP.NET MVC 4, which includes experimental ASP.NET Web API as well. The package is: LowercaseRoutesMVC4. If you are interested in the project source code and more,, check out the LowercaseRoutesMVC project page. Again, note that this has been last updated on November 2011.

You’d expect the built-in property to affect Web API as well as it’s part of .NET 4.5 not 4.0, and as mentioned before it surely works with ASP.NET MVC 4 as well as ASP.NET 3. I’d personally use it by default in any future project..

Appendix: Why Should You Care?

Lower case URLs have already become the de-facto standard for so long. Historically, when all path URL parts were one-to-one mapped to physical file paths (excluding hashes, and query strings), this required URLs to be case sensitive because Unix file paths are case sensitive (and hence, Linux and so, unlike Windows). Search engines also had to respect this as well, as there is no guarantee that /directory/file.html is the same as /directory/Filename.html, or /Directory/filename.html or /DIRECTORY/filename.HTML, etc..

So, in brief, it’s better for SEO, and it’s becoming the industry standard anyway (for those who care), as showed earlier, even Microsoft has made enforcing lowercase URLs although not the default but a really easy thing to implement (regardless of the technology you use, the URL Rewrite module is enforcing lowercase URLs on this blog for example, which uses PHP (WordPress).

By generating lowercase URLs combined with the Url Rewrite Module, you save the users extra redirection steps, unless they decide to write the URL in a non-lowercase manner themselves.

CodeProject

On _references.js files in VS2012 – VS2015, or the state of JavaScript Intellisense in Visual Studio

If you downloaded Visual Studio 11 Beta, and tried to create a new ASP.NET MVC 4 empty project, looking at the “Scripts” folder, you’ll see this new file “_references.js”:

image

Which looks like the following:

/// <reference path="jquery-1.6.2.js" />
/// <reference path="jquery-ui-1.8.11.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="knockout-2.0.0.debug.js" />
/// <reference path="modernizr-2.0.6-development-only.js" />

The VS <reference /> Syntax

As you probably know, the // &lt;reference path=”…” /&gt; syntax was introduced in Visual Studio long time ago to make you able to have intellisense in any JavaScript file to include everything defined in the JavaScript located at this path.

In easier words, if you write the very first line in any JavaScript file, say “my-page.js”, and make sure the path points to the proper jQuery file, when you write code in “my-page.js”, you’ll get intellisense for everything in the jQuery file. The quality of the intellisense will vary based on the referenced jQuery file, whether it’s minified file (least intellisense info, only member names, sometimes), just standard source/debug file, or even one that VsDoc comments (best intellisense, might even have notes on what types you need to pass to methods, when defined in VsDoc comments).

The Resharper Way

If you are using Resharper 6 or so, Resharper will give you intellisense from all files in the project. Generally speaking this is a good thing, but it has two drawbacks:

  • If you have so many JavaScript files in the project (for example, number of common files plus a file or two for every page in a big project), the JavaScript editor experience can be bit slow in times, as Resharper tries to evaluate all the JS files to get you intellisense
  • When you type the first letters of a member, the intellisense menu will bring so many results, because it will include all possible members from all files in the project, even the ones completely unrelated to what you are doing now. The way Resharper tries to make this less severe, is that it tells you which file it picked every intelisense item from.

The Visual Studio 2012 Way: Or The _references.js File

In VS 11, Visutal Studio will give you intellisense from all files that have references in the “_references.js” file. This way you can define the global / common files you use all the time. This might include some library files like jQuery, or some files you use everywhere in the project like some internal utilities files.

For related files, you can use the “<reference >” syntax on top of every file to connect them (from intellisense point of view).

File Location

Note that there is only one _references.js file for each project. It doesn’t work like web.config where you have have web.config files in site folders affecting only those folders.  An _references.js file in any other location than “~/Scripts/_references.js” will be just like any other JS file and won’t be used for global intellisense. Even putting the file in the root of your web project will not work as well.

Update (March 21, 2012)

After reading Scott Hanselman’s post on hidden web features in Visual Studio 11 beta (posted yesterday), turns out you can add files to the global JavaScript intellisense from the Visual Studio Tools –> Options Dialog:

image

In the options windows, go to Text Editor –> JavaScript –> Intellisense –> References node in the tree view at the left, then from the dialog that comes, choose “Implicit (Web)” for “Reference Group”. You can see that the _references.js file itself is just an entry in the list, and you can add other entries below.

You can pick specific files, or use the “~/path-to-file” to use a path relative to the root of your web project.

CodeProject

Python, Ruby, or PHP? (My Take On Answering The Question)

A friend I know has been developing desktop applications with .NET for quite long time. He wanted to improve himself even more by going out of his comfort zone learning more stuff he’s not familiar with. So, he spent some time learning client side web technologies and wanted to add some “non” .NET server technologies to the mix. He emailed me asking for recommendations on what to learn,: “Ruby, Python, or PHP ?”.

 

After sending the answer, as with other previous emails, I thought maybe I’d share it with you here.

python-logoPython

Let’s start with Python, since it’s the language I know least about (take that as a disclaimer against everything I claim about it next). Note that Python also has similar options to Ruby (maybe even earlier than Ruby had for some of them) even the MVC application frameworks (like django), but they aren’t booming as much as, say, Ruby..

Python’s real power is that it’s one of the old languages with great standard library doing networking and several pieces of functionality, in a way closer to C++ than it is to .NET or Java. I think also it’s runtime is historically has better performance and wider platform support than, Ruby.

I’d argue though that those benefits are usually less important in the web world, where you worry about web specific features (templates, personalization, AJAX support, etc…), than library features really, and only have a known set options for the platform hosting the web app/.

Ruby

Here Ruby comes to play, with similarly old-enough-to-be-mature age, more web friendly (ex: white-spaces significance is optional), and generally getting a sense of dynamic features with C#/Java familiar syntax as "option" syntax style (rarely used). The ease of catching calls to non-existent members by one handler (method_missing or something) inspired a lot of nice syntax APIs.

 

The key attraction around Ruby world is not Rails. It’s actually Ruby gem, the "package manager" inspiration for NuGet and alike.This made sharing Ruby libraries and frameworks really easy, like other scripting languages, they allow you to extend the console features as well and add commands that perform repetitive tasks and code generations and so, which is an area .NET capability is still lacking much in.

 

Another killer thing about Ruby is the integrated eco-system. People would be using Git, github, Ruby, Ruby Gem, Rails, MongoDb, SASS (for CSS), CoffeeScript (for JavaScript), Heroku (cloud hosting),… and al of them have a specific workflow (or series or workflows) that make development much easier. This is also one main area in addition to console extensions that you’ll be blown away with.

 

Obviously, most people working with Ruby use Rails, the MVC framework for it, which has its own common workflows using specific options for ORM, mails, and other common tasks. It’s the opposite of .NET where we care about multiple options, they "do" have multiple options, but they care about the awesomeness of the experience with the option they choose rather than the ability to replace this option in the future. Quite another mindset shifting.

 

I’d suggest you don’t start with Rails. Start with Sinatra instead. Sinatra is like a basic web framework that just handles routes and templated views and few other things. People loved it for its simplicity and a lot of people build proof of concept and prototype startup ideas using it, especially when things don’t involve DB, or a lot of DB work. It’ll also introduce you to the way you depend on scripting a lot to perform various tasks in development.

 

Don’t get too deep into Sinatra, once you get to the point you think you understand its pieces well, move on to the next level, Rails (next in terms of number of features built-in, not in terms of better). Build something with it, usually people choose to create To-Do list or a Blog as those are the hello-world apps in web world, right? Try to discover which gems most Rails developers use most and really teach yourself to follow the workflow most tutorials and users will suggest. Expect a lot of "you are doing it wrong" times :)

PHP

A note on PHP: The reason PHP is still strong and won’t die any time soon is the amount of awesome web apps built with it over the years. WordPress, Drupal are the obvious names, but hey, the examples are uncountable. PHP has been trying to adopt to recent trends and copy features from other languages (like everybody else do), but I think it’s just causing it to lose it’s original power, which is being a simple lightweight language.

Modern PHP developers have created their own common workflows as well and those moved beyond going MySQL-PHP to REST and MVC framework and more, but the workflow for something like Ruby feels more "natural" rather than "addition" and hence makes more sense the more you apply it in your coding practices.

Node

Another option you haven’t mentioned is NodeJS, or server-side JavaScript.A lot of people who do Ruby for long time mix bits of other languages in their workflows, like Scala and Clojure and others. So, being used to this, many Ruby guys actually turned to become NodeJS guys.

They copied the usual workflows pieces to their usage of Node, like git, and NPM (the Node equivalent of Gem or NuGet), and even equivalents of Sinatra (which is almost standard, called ExpressJS) and Rails (various options). Some mix it with CoffeeScript and DB tools (although JavaScript doesn’t have special features to create ORMs like Ruby method_missing and mixins), and it’s quite booming recently.

 

It’s also a good time to consider it since Windows support just recently became good enough to use (earlier it didn’t have NPM support for example, which is like Ruby without gem, pure key piece of the workflow missing and making the platform pretty much useless).

 

I think Node will bring you some of Ruby workflows via ExpressJS and brothers, and make you more fluent in JS (which is becoming THE universal language of the web), and blow your mind in the special way it handles creating the web app (although ExpressJS makes it more like just handling routes in ASP.NET MVC or Sinatra).

imageConclusion

So, I’d go for long term spending on Ruby then Rails (going a b it of Sinatra), or do some plain Node stuff for a while and then start learning ExpressJS. Whatever you do, keep an eye on what’s usually called "workflow" in these areas, which is like "best practices" in our own terms. Whenever you do something and it feels harder than it should, it’s likely because you are not following another piece that makes it easier for other people who do both.

Welcome GuruStop’s New HTML5 Sidebar Search Widget!

Hey folks, I just removed the default WordPress search widget and a new one using the HTML 5 input search type, a bunch of CSS 3 (and fall back for older browsers like older versions of IE), and a little bit of JavaScript. It’s still based on the same background image used in this blog theme though.

Since some of you might be interested, here is the code that I use to implement it, instead of you trying to hack it with different browser developer tools!
Not the exact code though, but a version that is heavily commented for your convenience Smile

You can skim quick over the the simple HTML, spend some time with the CSS bits (most work is done here), and have a look at the bonus JavaScript, see the result without the context of the blog itself, and if you feel excited, click the "+" icon on the right to start editing it yourself to come with better implementation or fix a bug.!

If you like this post, you may want to share the post or comment below encouraging me to write more similar posts, maybe also check what offers are available by bog partners, or, follow me on twitter (@Meligy).