A New Type of Blog - lishman.io
lishman.io Loading..
Style: Blog or IDE

A New Type of Blog

How can we improve the traditional blog post or tutorial?

Quick Tip

In the text below, whenever you see a word or phrase with this color, click on it to see what happens.

Highlighting

Well, we could highlight a block of code, some text, or a combination of the two. Okay, that last one's a bit over the top but you get the point; highlighting helps us to zero in on the subject being discussed.

How about displaying several files to illustrate a relationship between them?

hello-world.ts x
Loading...

Browsing

Sometimes it's useful to see a file in the context of the entire project, in an explorer for example.

Better still, what if we could use the explorer to browse the application by clicking on the files, and even open multiple files using Ctrl + click (or Cmd + click on OS X).

Project Files

Loading...

hello-world.html x
Loading...

An Example

Let's see if any of these ideas actually work using a short example about Angular components.

A component consists of a TypeScirpt class which defines the data and behavior, and a @Component decorator to provide additional meta-data.

When the application starts, Angular will locate the <hello-world> element using selector, insert the contents of the templateUrl file between the tags, and apply the CSS from the styles property to the <h1> element.

Project Files

Loading...

hello-world.ts x
Loading...

IDE Style

Okay, so we've given the good old blog a bit of an overhaul, but we're not exactly utilizing all that space on your high resolution, widescreen desktop monitor, are we? If only we could see the code and the text but in a more familiar IDE style.

Well, now we can.

Show me the IDE style