Thursday, December 26, 2013

TypeScript and Angular example: TodoMVC

Recently I attended a GREAT presentation by Peter Hilton, about his experience introducing Scala in his company, lessons learned from that, and his view on modern web-apps.

One of the things he mentioned briefly is that you should abstract from the 'base' web languages like CSS and Javascript and get on the LESS/SASS and CoffeeScript/TypeScript train. The same week I head the .NET Rocks! podcast discussing TypeScript support in VS2013 so I think it's about time. They also recalled the expression 'JavaScript is the assembly-language of the web'.

I've been playing around with this stuff, but this is pushing me to start using it professionally. Since we're working on a AngularJS project right now, I wanted to have look at what it would look like to create an AngularJS app with TypeScript. Obviously - this has been done already. Check out TodoMVC:


Check out the links on the left to his GIT repo where you can see how it's all been done.



Monday, December 23, 2013

SASS or LESS ?

Right now I'm working on a project for a big Dutch bank.They need some web application and I'm only setting things up right now, since not all requirements are final.

The technology stack is not that interesting, but quite modern: 3-tier app, MVC 4, Ninject, AngularJS, WebAPI and some WCF services. I'm affraid we won't be able to use NoSQL although this would be a GREAT moment to start using it (especially while we're prototyping the thing and we're not sure yet about the data model).

For styling I've been giving the bank-style-guide and a bunch of icons. The application has, as expected, tables, tabs, collapseables and validation messages. I suggested to use Twitter Bootstrap as CSS framework, but others were a bit reluctant at first. Having convinced them, we're now going ahead and creating a theme for bootstrap, based on the bank-style-guide. 

OK, so I placed all the app-specific icons in one sprite + css, the style-guide icons in another and I've started to customize the new Twitter Bootstap v3 to match the bank-style-guide. I'm no CSS guru, but I think it has been the right approach.

What I would like to in my styles is do something like:

@bankBrandSpecificOrange = #something;
@bankBrandSpecificBlue = #someOtherColor;

And then do stuff like:

.panel > .panel-heading {
     color: @bankBrankSpecificOrange;
}

Well you get it: use variables in my CSS.

There are already a bunch of solutions for this: languages that compile to CSS. Two of the most famous ones probably are LESS and SASS.


There are little differences between the both. What I read is that LESS is compiled by less.js, i.e. a JavaScript file. The Sass compiler needs Ruby, so we need to get that first.

That means Sass is pre-compiled whereas Less can be compiled on page load. However, Web Essentials has an option to compile your less to .css, thus it can be pre-compiled too.

Finally, in terms of what the languages support, they're very close. Check out this nice comparison: https://gist.github.com/chriseppstein/674726.

For now, I'll stick with LESS because of the Visual Studio support given by Web Essentials.

Sunday, December 22, 2013

Learn F# by example ... In Visual Studio !

After lifting my JavaScript knowledge of my work with AngularJS recently, and KnockoutJS before that, I've been playing around with the functional aspects of the language and really experienced the elegance of it in real-life examples and not just the annoying practicals in Haskell I had to do at university.

Furthermore we had this presentation on Scala and the Play framework which was very interesting. So I decided to have a quick look at F#. I wanted to do a 'File, New Project' thing and start looking at the syntax when I noticed this:


The F# Tutorial project type in Visual Studio. It's great stuff. You open it and you get this big F# source code file showing you pretty much all the basics of F# including:

For example:



Want to learn quickly and by example? Go check it out.

Thursday, December 19, 2013

SpritePad: Quickly create sprites + css

For a new project I got a bunch of icons from the designer for me to use. In order to reduce HTTP requests and to make my solution A LOT cleaner, I wanted to make a sprite out of all these icons + a CSS sheet.



 That was quite easy using this tool: SpritePad. If you want to auto-arrange your stuff + save your sprites, you need to register. I didn't do that, just created my sprite, downloaded it and I was done. Good stuff this.

Monday, December 16, 2013

You are using web essentials ... right?

So this is my 2nd post in the 'you are using ... ... right?' series. There are certain things that I use that I thought everyone would be using by now, like ReSharper, Common.Logging and ... the Web Essentials extension for Visual Studio.


It has lots of tools for upping your productivity while developing web applications. One of the cool features is LESS compilation and also a bunch of CSS helpers to help you out with vendor specific tags.

Go and get it at: http://vswebessentials.com/


Saturday, December 14, 2013

Pluralsight - online training

After hearing about it on the .NET Rocks! podcast I decided to take the trial subscription for Pluralsight. This website offers online training for a wide range of topics, including .NET related stuff. 

There is a bunch of free stuff out there on YouTube, Nettuts and Microsoft Virtual Academy, but this one isn't. On the other hand - the quality is very high.

Here's a bunch of tutorials I've been watching:
  • Course: Clean Code: Writing Code for Humans
  • Course: Developer to Architect
  • Course: HTML5 Fundamentals
  • Course: Introduction to F#
  • Course: Angular Best Practices
  • Course: ASP.NET MVC 5 Fundamentals
  • Course: HTML5 Advanced Topics
  • Course: JavaScript Design Patterns
I just need to get my boss to pay for this thing, because he's getting the direct benefit from this.