Friday, 1 September 2017

Happy Birthday NP8080!

NP8080 turns 1 year old! Yes it was just over a year ago that I decided to combine a TextArea + Local Storage to make a little app. It's grown a lot and been a good project to try out new features and packages. I've found it a useful daily tool too from simple notes, examining stacktraces and composing web posts etc.

With Dart 2.0 coming, Angular Dart 5 and web browsers advancing, it looks like there'll be another year of text editor coding ahead.

Saturday, 22 July 2017

Diving Into Angular 4 Dart Alpha 1

Angular Dart 4 Alpha was recently released and I was keen to try it out. There's quite a few changes as it becomes increasingly more Dart-ified and broken away from its Typescript heritage.

My hobby project NP8080, as ever, is my guinea pig for such upgrades. It was almost entirely painless - we can forgive the one time rename of the package from Angular2 to plain Angular! Building is slightly slower/heavier (there's a lot going on) but this is being worked on.

The standout feature for me is the component inheritance of attributes such as @input. There's a lot of components in my app that have common functions (dialogs mainly) but being unable to have a hierarchy to share stuff meant that... well things got a bit messy and copy-pastey!

With the new release I spent a happy time creating my base classes and shifting the functionality around. The joy of deleting hundreds of lines of code!

So the class structure ended up something like this:

     Base Component Class                    Base Component Class 
             ||                                       ||
     Editor Component Class                Another GUI Control Class
             ||
   1 Particular Dialog Class

Even better was the Dependency Injection, the base classes could have services injected into them from the derived classed and they could still be marked final too. Very nice! Slight downside is the declarations:

  GenerateDialogComponent(
      TextProcessingService newTextProcessingService,
      TextareaDomService newTextareaDomService,
      ThemeService newThemeService,
      EventBusService newEventBusService)
      : super(newTextProcessingService, newTextareaDomService, newThemeService,
            newEventBusService) {
   ...
  }

It's a bit cluttering annoying to declare a variable like newTextProcessingService that gets passed immediately to the super call and never referenced again. I wonder if the following would be a possible language change? Seems a lot cleaner and clearer to me and should cover most cases.

  @InjectSuperParameters
  GenerateDialogComponent() : super(textProcessingService, 
              textareaDomService, 
              themeService,
              eventBusService) {
   ...
  }

Anyway, going forward creating a new dialog or control should be half the work. Sounds good! Look forward to the next Alpha/Beta.

Monday, 26 June 2017

Dart SDK and Dartium 1.24.2 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.24.2
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.24.2
To verify you have the right version on your path.
dart --version
Dart VM version: 1.24.2 (Thu Jun 22 08:55:56 2017) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.24.2

Saturday, 17 June 2017

A Multiplicity of Singleton Services

Angular Services are singletons right? Google it and you will get plenty of pages saying they are. Well sometimes they are and sometimes they are not!

I was working on a service that didn't seem to be working. To debug, I put a print statement in the constructor and I received 2 messages. So what's happening? Turns out to be down to Providers

Suppose you have a component and you want to use a service, you may have declared it in each component like this:

providers: const [TextProcessingService]

This actually creates a new instance before injecting it into your component.

So say we only want one instance ever? How do we do it? First step, delete that Providers declaration. Next declare at the bootstrap level:

  bootstrap(
      AppComponent, [TextProcessingService]
  );

Hope this blog post clears up confusion for anyone else. It is actually quite a powerful feature, allowing you to keep services and components totally separate.

Thursday, 15 June 2017

Dart SDK and Dartium 1.24.1 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.24.1
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.24.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.24.1 (Wed Jun 14 07:53:19 2017) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.24.1

Tuesday, 13 June 2017

Dart SDK and Dartium 1.24.0 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.24.0
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.24.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.24.0 (Mon Jun 12 08:37:04 2017) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.24.0

Tuesday, 30 May 2017

Introducing NB8080 - a simple Notes Board application

Time for a new productivity web app project! This time a notes application with a similar philosophy to NP8080. This means offline, 100% local storage of data, easy to use and a focus on emerging browser features. No Angular this time - just vanilla dart:html.

Enjoy the first version of NB8080.win - feedback would be great!

The app works offline thanks to the excellent PWA package. For details see the article 'Making a Dart web app offline-capable: 3 lines of code'.

NB8080 is on GitHub - star, grab the code and raise issues!

Wednesday, 3 May 2017

Moving To AngularDart 3

Angular Dart 3 final was released and NP8080 (simple web based text editor) has been built with the latest version. It has been a fun little project and I have found myself using it daily as a scratchpad.

Not a massive amount to report - Angular very stable since the Betas. Certainly feeling a bit more Dart-y. The most disruptive change was the deprecation of EventEmitter but as this was a thin wrapper around a standard Dart Stream it wasn't much of a loss though I had 20 occurrences to update!

The code is straightforward as:

  final StreamController onShowDialogChange = new StreamController();
  ...
  @Output()
  Stream get showDialogChange => onShowDialogChange.stream;
  ...
  void closeTheDialog() {
    showDialog = false;
    onShowDialogChange.add(showDialog);
  }

Of course, another option is to copy the EventEmitter class into your own project. Interesting to see AngularDart using core Dart classes, perhaps the start of a larger divergence of the two codebases.

Looking back to the first build of NP8080, the output JS was 300k(ish). The current build is around 200k JS which is great improvement considering the increase of application code over that time. When you consider a basic Dart web app is around 110k, it is even more impressive to have Angular framework squeezed into <90k.

Please raise an issue if you have a feature request. PRs welcome too!

Friday, 28 April 2017

Forest Fire - Now With Mountains and Lochs


The forest fire cellular automata was a lot of fun to work on and watch. It has now been updated thanks to a welcome pull request which adds a Speed slider to the UI.

I extended it further to add some simple procedurally generated mountains and lochs (lakes). One challenge here was to keep the time down (it takes a lot of recursion). A quick way to get some speed was to reduce the resolution so each cell is 3 pixels square rather than 1.

The interface isn't as phone friendly as it was but is still usable and runs fine and at a decent speed. This thing will happily keep a core of your CPU burning so be sure to close the tab if you are on low battery!

Thinking ahead I would like to make the mountains less round and add an isometric view. Feel free to beat me to it with a pull request. Enjoy!


Monday, 24 April 2017

Dart SDK and Dartium 1.23.0 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.23.0
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.23.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.23.0 (Fri Apr 21 03:13:00 2017) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.23.0

Wednesday, 15 February 2017

Dart SDK and Dartium 1.22.0 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.22.0
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.22.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.22.0 (Mon Feb 13 17:39:28 2017) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.22.0

Saturday, 11 February 2017

Cellular Automata - Forest Fire

Cellular Automata has featured on this blog before - Conway's Game of Life. Whilst on the Rosetta Code site I stumble upon the Forest Fire model. Of course, a Dart version was soon underway - specifically designed to fit nicely on my phone's screen.

The model's rules are straightforward:

"A burning cell turns into an empty cell
A tree will burn if at least one neighbor is burning
A tree ignites with probability   f   even if no neighbor is burning
An empty space fills with a tree with probability   p"

Watch the video below, try it out here(link fixed) or view the source code.

Wednesday, 11 January 2017

Set The Title Of A Web Page in Angular2 / AngularDart

This is just a tiny snippet for Angular2 / AngularDart that I decided was worth a blog post because it is A) a FAQ and B) has lots of weird Angular 1 workarounds on the web that may be time wasting rabbit trails!

How to set the web page Title from Angular?
import 'package:angular2/src/platform/browser/title.dart';
....
 Title _title = new Title();
....
_title.setTitle(text);