Saturday, 17 December 2016

Notepad 8080 and AngularDart Update

As detailed in previous posts, I have been working on a notepad application using AngularDart. There's not been a blog post for while but it has slowly and steadily progressed.

AngularDart has had a couple of big updates since I started this and not caused any issues. So I am finding it very stable and easy to relate to Angular1. There's a lot of Angular features that I haven't used in there yet so I will continue to scour articles and samples. That said, the focus for np8080 will probably be on the end user functionality rather than the implementation technology. Adding markdown support was very easy thanks to the package on pub - the real battle was with the CSS.

I am going to continue to develop the application - I use it almost daily in the day job for notes and as a scratchpad. Feel free to raise a feature request! I am pondering making an Electron version at least for Windows.

Looks quite good on my Chromebook! Try it out at np8080.win

Finally, on an unrelated note, for a limited time my Dart book is just $5 for the ebook version!

Thursday, 8 December 2016

Dart SDK and Dartium 1.21.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.21.0
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.21.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.21.0 (Thu Dec 07 06:52:21 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.21.0

Monday, 24 October 2016

Building A Notepad with Dart Angular 2 : Part Six

Another step in my personal 'Learn Angular 2' project... Here's some details of what made it into v0.06. I'd recommend looking at the entire project alongside this post.

Let's quickly add another function to the Text processing service:

  String getRepeatedString(String textToRepeat, num count) {
    count ??= 1;
    return textToRepeat * count.toInt();
  }

We use a null aware operator to set count to a default value and then use the string multiplication operator to do the required repeating.

The generate dialog is pretty much the same as the About dialog. It would be useful to have a base dialog class - alas I have not got this to work yet but I hope to follow it up.

There some more event stuff going on with the toolbar which now has a drop down menu (toolbar_component.html):

div (mouseenter)="show()" (mouseleave)="hide()" class="toolbarButton" 
The menu contents are hidden and shown with ngStyle:
[ngStyle]="{'display':  display}

Again, not too different to Angular 1 - just different syntax.

That's it for this time. Check the app out np8080.win and the code is on GitHub.

Monday, 17 October 2016

Dart SDK and Dartium 1.20.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.20.1
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.20.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.20.1 (Wed Oct 12 15:07:45 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.20.1

Tuesday, 11 October 2016

Building A Notepad with Dart Angular 2 : Part Five

Another step in my personal 'Learn Angular 2' project... Here's some details of what made it into v0.05. I'd recommend looking at the entire project alongside this post.

It's time we added a proper dialog. I put off doing this as I thought it wouldn't involve much Angular 2. Turns out it covers some very important ground!

So let's plan out what we need to do. The Editor component will have a flag to show/hide the About dialog. The toolbar will have to be able to set it to True so that it appears and the dialog itself will have to set it to False so that it closes. So we need to bind this flag to the two components and be able to update it.

The dialog can be shown or hidden using [hidden] (about_component.html). This value is from the scope of the Editor.

div id="overlay" [hidden]="!showDialog"

The components get the value easily enough but there is a little bit more work to let the Editor know it has been updated. An @Output property fires and event based on showDialog changing.

import 'package:angular2/core.dart';

@Component(
    selector: 'about-dialog',
    templateUrl: 'about_component.html')
class AboutDialogComponent {
  @Input()
  bool showDialog = false;

  @Output()
  EventEmitter showDialogChange = new EventEmitter();

  void closeTheDialog() {
    showDialog = false;
    showDialogChange.emit(showDialog);
  }
}

This does seem more complicated than Angular 1 doesn't it? However the default two way binding of version 1 has performance implications and can easily lead to some tricky dependencies. The payoff of more control and clearer code makes sense to me - though perhaps hard to see in this simple example.

The toolbar has a similar way to announce the change of value.

  void aboutHandler() {
    showDialog = true;
    showDialogChange.emit(showDialog);
  }

That's it for this time. Check the app out np8080.win and the code is on GitHub.

Saturday, 1 October 2016

Installing Dart on Linux - Bash Script

Dart moves rather quickly with releases every 6 weeks or so. Lots of posts on this blog are for Chocolatey which is fine for Windows but I spend most of my Dart time on Linux so how do I update? There are a few methods but I decided to roll my own Bash shell script which downloads and unzips the SDK and Dartium to the current folder.

Hope someone finds this useful!

P.S. The first wget download is the ARM version which I use on my Raspberry Pi.

#!/bin/bash
VERSION="1.19.1"
wget https://storage.googleapis.com/dart-archive/channels/stable/release/$VERSION/sdk/dartsdk-linux-arm-release.zip
wget https://storage.googleapis.com/dart-archive/channels/stable/release/$VERSION/sdk/dartsdk-linux-x64-release.zip
wget https://storage.googleapis.com/dart-archive/channels/stable/release/$VERSION/dartium/dartium-linux-x64-release.zip
unzip -qq -o dartsdk-linux-x64-release.zip
unzip -qq -o dartium-linux-x64-release.zip
rm dartsdk-linux-x64-release.zip
rm dartium-linux-x64-release.zip
dart --version 

Wednesday, 28 September 2016

Building A Notepad with Dart Angular 2 : Part Four

Another step in my personal 'Learn Angular 2' project... Here's some details of what made it into v0.04.

Services are a core part of Angular (inject-able units of functionality). They are inject-able in that the responsibility of creating the service is the Angular frameworks and any object using it receives a fully configured service when that object is created.

Okay that's a bit abstract - what does it mean for np8080? Well, there are a number of methods that process the data in the text document. Let's extract all that into a text processing service class

import 'dart:math';

import 'package:angular2/core.dart';

@Injectable()
class TextProcessingService {

  String trimText(String src) {
    return src.trim();
  }

  int getWordCount(String text) {
    String workingText = text;
    workingText = workingText.replaceAll('\n', ' ');
    List words = workingText.split(' ');
    words.removeWhere((word) => word.length == 0 || word == " ");
    return min(words.length, text.length);
  }

  int getLineCount(String text) {
    return '\n'
        .allMatches(text)
        .length;
  }
}

This is a regular class other than the @Injectable() next to the class declaration.

This service can be used in any part of our application by injecting it in the constructor. Wait a second how does Angular know how to get this service for the consumer object? We let Angular know via providers statement when we are declaring a component. This can be seen in the updated StatusComponent. Note that _textProcessingService can be declared final as it is assigned once at creation time.

import 'package:angular2/core.dart';
import 'package:np8080/services/textprocessingservice.dart';

@Component(
    selector: 'text-status',
    templateUrl: 'status_component.html',
    providers: const [TextProcessingService])
class StatusComponent {

  final TextProcessingService _textProcessingService;

  StatusComponent(this._textProcessingService);

  @Input('text')
  String text;

  @Input('modified')
  DateTime modified;

  String get length => text.length.toString();

  String get wordCount => _textProcessingService.getWordCount(text).toString();

  String get lineCount => _textProcessingService.getLineCount(text).toString();
}

That's it for this time. A few other visual tweaks have gone in. Check the app out np8080.win (I though it was worth the $1 to get a domain!) and the code is on GitHub.

Monday, 26 September 2016

Building A Notepad with Dart Angular 2 : Part Three

Continuing on with my personal 'Learn Angular 2' project... Here's some details of what made it into v0.03.

Change of plan - we are going to look at pipes! Pipes are the renamed 'Filters' from Angular 1. They work in pretty much the same way. A last modified DateTime object is now stored part of the TextDocument class. Let's add it onto the status component.

Let's use the built-in filters to show the full date in upper case:

Last modified: {{modified |  date:'fullDate' | uppercase}}

Notice the * before ngIf. This is critical for ng2 to identify the target element. If omitted, you will get an error as Angular will search for a template.

Angular 2 is keen to mark attributes more clearly on components. For the updated status bar the square brackets denote an input. Round brackets are for outputs and both types denote 2 way binding as on the TextArea.

    HTML
    text-status [text]="note.text" [modified]="note.lastModified"

    CODE
    @Input('modified')
    DateTime modified;

Check the app out np8080.win (I though it was worth the $1 to get a domain!) and the code is on GitHub.

Thursday, 22 September 2016

Building A Notepad with Dart Angular 2 : Part Two

Last time we got the basic notepad off the ground. A toolbar would be a good incremental step, complete with chunky buttons.

Angular 2 has a different markup for events (click) but after that it is straightforward handler writing as methods of the component. The first button allows that text content to be downloaded as a file. The second trims trailing and leading whitespace. The third displays a crude alert text box. Next time we will look at upgrading this to a dialog.

Check the app out here and the code is on GitHub.There's a few tweaks to the colours and layouts - bring your own CSS to the party if you like!

Sunday, 11 September 2016

Dart SDK and Dartium 1.19.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.19.1
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.19.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.19.1 (Wed Sep 07 09:07:46 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.19.1

Saturday, 27 August 2016

Dart SDK and Dartium 1.19.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.19.0
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.19.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.19.0 (Fri Aug 26 02:40:23 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.19.0

Saturday, 20 August 2016

Building A Notepad with Dart Angular 2 : Part One

Angular 2 is looking very new and shiny, isn't it? There's not a tonne of example code out there so I thought it was about time to pop some on the DID blog. So let's write a text notepad for the web (and use local storage for saving).

This is an Angular 2 application with a component for the Editor. The Editor has a sub-component that provides a couple of stats. There's not a huge amount to write up on the code. It's interesting to see how Angular 2 differs from the previous version - I found some of the syntax far more readable. For more detal, see the Angular 2 Quickstart - though not complete, it has some great demos.


import 'package:angular2/core.dart';

import 'status_component.dart';
import 'textdocument.dart';

@Component(
    selector: 'plain-editor',
    templateUrl: 'editor_component.html',
    directives: const [StatusComponent])
class EditorComponent {
  @Input()
  TextDocument note;

  void changeHandler() {
    note.save();
  }
}

import 'package:angular2/core.dart';

@Component(
    selector: 'text-status',
    templateUrl: 'status_component.html')
class StatusComponent {
  @Input('text')
  String text;

  String get length => text.length.toString();
  String get wordCount => text.split(' ').length.toString();
}

The editor loads in less than 1 second - not bad! And this is a debug build.

Code is on GitHub and you can try it out here. Feedback and suggestions welcome!

Wednesday, 3 August 2016

Dart SDK and Dartium 1.18.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.18.1
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.18.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.18.1 (Tue Aug 02 09:21:29 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.18.1

Thursday, 28 July 2016

Dart SDK and Dartium 1.18.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.18.0
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.18.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.18.0 (Wed Jul 27 01:55:06 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.18.0

Saturday, 11 June 2016

Dart SDK and Dartium 1.17.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.

Chocolatey has also been updated with versions 1.17.1

Command line installation:

choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.17.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.17.1 (Fri Jun 10 04:58:25 2016) on "windows_x64"

Command line installation:

choco uninstall dartium

choco install -y dartium  -version 1.17.1

Binary Clock Revisited Yet Again

A recent acquisition of a smartwatch,and browsing all the available watch faces, reminded me of the Binary Clock that has appeared on this blog more than once before. I had a look at the original code and boy was it a bit messy! I pulled all the web component/polymer cruft out and refactored it to something more presentable.


Click/Tap the clock to change between 4 display modes!

Code is available on GitHub as usual. Enjoy! Warning : can be hynotic :-)

Wednesday, 8 June 2016

Dart SDK and Dartium 1.17.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.

Chocolatey has also been updated with versions 1.17.0

Command line installation:

choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.17.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.17.0 (Mon Jun 06 14:21:42 2016) on "windows_x64"

Command line installation:

choco uninstall dartium

choco install -y dartium  -version 1.17.0

Friday, 3 June 2016

Dart SDK and Dartium 1.16.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.

Chocolatey has also been updated with versions 1.16.1

Command line installation:

choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.16.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.16.1 (Tue May 24 12:27:14 2016) on "windows_x64"

Command line installation:

choco uninstall dartium

choco install -y dartium  -version 1.16.1

Wednesday, 11 May 2016

Back To Outer Space

You know that feeling when you dust down an old project and you remember how much fun it was to work on? That!

I started a shoot-em-up late last year. Needed a bit of a tidy up as did my simplegamelib package but the first level of the game is playable right here! So take a coffee break a blast some aliens old-school style complete with programmer pixel art.

For more serious game development in Dart, check out the impressive StageXL package.

Saturday, 7 May 2016

Minecraft Screenshot Viewer Update

This little example was written over 3 years ago and needs a little fix (1 line) to run on more modern versions of Dart. The content type headers are now available as enums and ContentType.HTML prevents the page being served as plain text. Although it is 'Minecraft' you could easily adapt this for any sort of custom web server.

For the full code see GitHub.

Tuesday, 3 May 2016

A Web Status Panel On The Raspberry Pi - Part Two

In part one of this series, the status panel on details exposed via the dart:io package. To get more useful information we will look at running external commands and feeding them back to the web status panel. This version of the panel will be Linux (may work on a Mac!) only though could be easily modified for other platforms.

The dart:io package has a useful command to execute a process with arguments and collect the results. This is unsurprisingly asychronous. I chose to wrap the command into a little helper:

  runCommand(String command, List args) async {
    ProcessResult results = await Process.run(command, args);
    return results.stdout;
  }

One of the commands I wrapped was free to get memory usage:

  get memoryUsage async {
    return await runCommand("free", ['-o', '-h']);
  }

The code for the web status panel is available from GitHub. A couple of configuration points. Firstly, you will need to set you own IP on the server. Secondly, depending on the version of Linux you are using on the system, you may need to open up the port through the firewall software.

The ARMv7 version of Dart is available from here - select Linux from the OS dropdown if it is not shown automatically. I am finding Dart is a good environment to run on the Raspberry Pi. Small, lightweight, fast and has certainly been less bother that running Python at times.

Please leave a comment if you have created anything interesting on the Pi with Dart!

Wednesday, 27 April 2016

Dart SDK and Dartium 1.16.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.

Chocolatey has also been updated with versions 1.16.0 and 1.16.0

Command line installation:

choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.16.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.16.0 (Tue Apr 26 07:06:15 2016) on "windows_x64"

Command line installation:

choco uninstall dartium

choco install -y dartium  -version 1.16.0

Friday, 25 March 2016

A Web Status Panel On The Raspberry Pi - Part One

I purchased a RaspberryPi 2 late last year and it has been sadly underused. Time to change all that - let's use Dart to build a simple web status panel! Of course, it will run on any platform that runs the Dart VM so don't worry if you don't have a Pi!

The ARMv7 version of Dart is available from here - select Linux from the OS dropdown if it is not shown automatically. [Really should be a little more obvious guys :-)]

The code for the web status panel is available from GitHub. There's not a great deal to write up about it! The code just interrogates various system details via the Platform class an pops them into a simple template.

A couple of configuration points. Firstly, you will need to set you own IP on the server. Secondly, depending on the version of Linux you are using on the system, you may need to open up the port through the firewall software.

The current panel works cross-platform as it only relies on details exposed via the dart:io package. To get more useful information we will look at running external commands and feeding them back to the web status pane. Have fun!

Thursday, 10 March 2016

Dart SDK and Dartium 1.15.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.

Chocolatey has also been updated with versions 1.14.1 and 1.14.2

Command line installation:

choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.15.0
To verify you have the right version on your path.
dart --version

Dart VM version: 1.15.0 (Wed Mar 09 10:07:59 2016) on "windows_x64"

Command line installation:

choco uninstall dartium

choco install -y dartium  -version 1.15.0

Sunday, 21 February 2016

Book Review : 'The Dart Programming Language' by Gilad Bracha

I was lucky enough to receive a review copy of 'The Dart Programming Language' by Gilad Bracha. Firstly, the book is a good size (slightly larger page size than most technical books), well laid out and has a pleasingly colourful frog on the front cover. Enough about the form, how about the content?

This book is not a quick-start guide or 'how to', instead it covers the language design and some of the reasoning behind its philosophy. With Gilad being a member of the Dart team at Google, this really is the inside story on Dart as a language. The nine chapters take their time to explain the important features including types, classes, reflection and more. The topic of optional typing recurs throughout the book. This is where Dart has contributed most to the current art of programming language design.

There are some interesting comparisons made to the languages of the day (Java and C#) and also many mentions of Smalltalk. I was particularly interested in hints that the VM and language have been designed to enable a 'live' Smalltalk-like programming environment. There's is not a great deal of mention of VM implementation or the target systems where Dart is run (Web, Server, Mobile or Embedded) though they do arise in discussion of the books' topics. There are plenty of good illustrative code examples and flow diagrams to cover sequential illustrations.

To conclude, I would recommend this very readable and accessible book to anyone interested in language design or the Dart programming language. This book gives a rounded introduction and gets to details on the language that 'how to' books really don't include. It covers why Dart is Dart without descending into an advocacy speech and has moments of very honest assessment of the language strengths and weaknesses.

Saturday, 30 January 2016

Dart SDK and Dartium 1.14.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.

Command line installation:

choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.14.0
To verify you have the right version on your path.
dart --version

Dart VM version: 1.14.0 (Thu Jan 28 10:51:15 2016) on "windows_x64"

Command line installation:

choco uninstall dartium

choco install -y dartium  -version 1.14.0

Sunday, 10 January 2016

Dart SDK and Dartium 1.13.1 + 1.13.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.

Good news - Chocolatey has cleared the moderation backlog! Dart versions are far more up to date. You can install unmoderated versions by specifiying the install version during installation.

Command line installation:

choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.13.2
To verify you have the right version on your path.
dart --version

Dart VM version: 1.13.2 (Tue Jan 05 06:46:24 2016) on "windows_x64"

Command line installation:

choco uninstall dartium

choco install -y dartium  -version 1.13.2