vladeck's junkyard

designer wannabe


Leave a comment

TypeScript linter for Visual Studio 2017

Update (June 1, 2017): there is a Visual Studio 2015 version available here.

If you are using Visual Studio 2017 (along with TypeScript) for all your Web development, you have certainty discovered that it is lacking in (for me) one important aspect: linting your TypeScript with tslint.

I looked at several solutions and after not being completely satisfied with any of them, I decided do develop my own. Now, I haven’t programmed in C# for a long time and never implemented Visual Studio extension before, but after a few days of learning and coding I believe the extension is at a point of starting to be really useful. Extension is automated and tries to do as much things in asynchronous way as possible.

You can download the extension on the marketplace.

You can look at the source code, submit issues and feature requests on GitHub.


Leave a comment

Simple Fishbone Diagram (using Snap.svg and Typescript)

In one of my projects, I had the need to draw Fishbone Diagrams. Naturally, I started searching the Web for a simple Fishbone Diagram drawing library implemented either in Javascript or Typescript. And I did found few, but they were either with some “funny” results (intersecting or constantly animated branches) or WAY too expensive for commercial use.

So, the next logical step was to implement my own library, with basic functionality to draw Fishbone Diagrams. I settled for Snap.svg using Typescript and in couple of hours came up with something like this:

Algorithm
Algorithm to draw all this is really basic: vertical and horizontal bones are drawn on a block-like units (width and height of those unit blocks is configurable) and grouped so that they can be later rotated to create that Fishbone-like appearance.

Configurability
Some of the options available are:
– Color of head bone
– Color of head text
– Color of horizontal bone
– Color of horizontal text
– Color of vertical bone
– Color of vertical text
– Unit (block) size used to draw horizontal and vertical bones

This means that you can have something like this:

You can download Typescript code here.


Leave a comment

Type-safe getter and setter for Kendo UI (using Typescript) – Part 2

In my previous post Type-safe getter and setter for Kendo UI (using Typescript) – Part 1 I wrote about type-safe way to use Kendo UI Observable’s getter and setter with Typescript, little Javascript magic and one helper class.

Like with any code, one can always iterate and improve upon. So lets dive in…

For starters, I did introduce type-safety and constraints on the strings I was using; however, mere fact that I need to have ObservableHelper and constantly use it to get or set Observable’s value is a real pain. Ideally, we want to get rid of the helper and “transfer” the responsibility of get and set to actual Observable instance.

In order to do that, first thing is to define interface of the Observable:

interface IObservable<T> {
    get<K extends keyof T>(key: K): T[K];
    set<K extends keyof T>(key: K, value: T[K]): void;
}

Next, I will get rid of the ObservableHelper (parts I do not need) and just keep (parts I do need; a little modified) newObservable as a exported function which can easily be scoped by using any module system you prefer (I will omit export keyword).

function newObservable<TIn, TOut extends IObservable<TIn>>(obj: TIn): TOut {
    return kendo.observable(obj) as any;
}

Now that I have that in place, I can write something like:

interface IPerson {
    name: string;
    birth: Date;
    address: string;
}

interface IPersonObservable extends IPerson, IObservable<IPerson> {}

// Create observable instance of IPerson.
const p: IPersonObservable = newObservable<IPerson, IPersonObservable>({
    name: "John",
    birth: new Date(),
    address: "Some Street 27/3",
});

const address: string = p.get("address");
// address === "Some Street 27/3"

p.set("address", "New Street 42/7");
// p.address === "New Street 42/7"

Much better 🙂