Tuesday, September 29, 2015

Wat!? HTML is now an application framework? I'm calling bullshit!

You wish it was bullshit, but no. HTML, since HTML5 has provided full-blown component-oriented solutions. Stuff like the Shadow DOM specs, media-queries, validation and error handling are just the tip of this iceburg. New stuff is being added to HTML everyday.

A good example I can give is the way how text (or code) completion is done in HTML5 - let's say a "browser" list textbox. The old way of doing this would be a choke-full of JavaScript. We can use a datalist tag element instead.

<input type="text" name="browserSelect" 
    list="browserList"/> 

<datalist id="browserList">  
   <option value="IE">  
   <option value="Firefox">  
   <option value="Chrome">  
   <option value="Opera">  
   <option value="Safari">  
</datalist>  

Of course, you could further refined this with a dash of JavaScript like say Angular or Knockout.

Now if only companies drop IE6 or IE8. zzzzzz.

Friday, September 4, 2015

AngularJS and the case of "but I don't want to rewrite my event listeners." (also I have directives)

Well, damn. Shit son.....

Calling event listener functions outside of AngularJS is not that hard. There might be a "strong" discussion on how to do this but that's a matter of style. That is a whole other bowl of soup.

We can fix this in a jiffy and we just have to keep in mind that Angular elements are accessible via JQLite.

We start with our directive to which we will then attached a listener function.

// app.js
angular.module('myApp', [])
   .directive('myDirective', function myDirective () {
        return {
            restrict: 'AEC',
            link: myDirectiveLink
        }
   });

function myDirectiveLink (scope, element, attrs) {
    var someDOMElement = element[0];
    someDOMElement.addEventListener("click", myDirectiveEventListener, false);
}

function myDirectiveEventListener () {
    // Handle the event here
   // This could be an existing listener somewhere in a different source file
}

Now all we need is to declare 'myDirective' in a valid DOM element in our view. It will respond to a click event that will be handled by the 'myDirectiveEventListener' function.

Tuesday, September 1, 2015

A web developer's stake in the Battle of the frontends

It use to be easy as pie being a frontend dev or engineer. You either roll your own frontend framework that doesn't use tables for layouts or pick something with a grid like 960.gs and you're good. That was like 4-5 years ago. Now there's a long list of front-end frameworks to choose and all of them have fanboys. It's a mess.

For me, there are four choices that really make sense. It makes sense because I've used them in one form or another. Also, all these frameworks are responsive by default so they support mobile development also not just standard web.

  • Material Design Lite - If your going Google then this is framework for you. The thing with this is that it doesn't rely on any JavaScript. This is the "truest" implementation of Material Design if you're making the argument for say, Material Bootstrap.
  • MetroUI (and Office-UI-Fabric) - This is for those who like tiles (MetroUI). Fabric for web apps that look like Office365 apps. You don't have to be knee deep in building Window apps for web and phone to be using this - ie. You don't need Visual Studio or have a pricey WinDev account. It's open-sourced - Surprise! Surprise! It's built using Less; Curious though, no Typescript.
  • Foundation by Zurb - Foundation is staple for those rabid SaSS fans and unlike the first two, this framework comes with everything even the kitchen sink. Heck, you can even make your own plugins. The strength of Foundation is its more malleable than Material or Metro but that's offset by the fact it's also has more moving parts. Testing much?
  • Bootstrap - Twitter Bootstrap, the preferred frontend framework for the design impaired developer. Popular (maybe) and easy-to-use (arguable) it's  not bad looking even if you're just using the base CSS. Sure, you can customize it with your choice of SaSS or Less but if your in a hackathon you just don't care and use a theme from one of many websites making free bootstrap themes like this one
For us web devs, we treat these 4 frameworks as the same thing, 4 different libraries that do the same thing. But we won't tell the UX guys that, they'd go ape shit.