AngularJs – first steps

AngBasics01

AngBasics02

<html ng-app="menuApp">
   <body ng-controller="menuCtrl as ctrl">
     <div style="font-family:georgia;color:HotPink;">{{ctrl.WhatsOnTheMenu}}
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
     <script type="text/javascript">
       angular.module('menuApp', [])
         .controller('menuCtrl', [function() {
             this.WhatsOnTheMenu = 'Full English Breakfast';
       }]);
     </script>
   </body>
 </html>

http://plnkr.co/edit/4grWJLeNKWwKFdsREy6D?p=preview

Now bring in a controller that maintains a set of breakfast items (the model is obviously all wrong in that you wouldn’t have a menu consisting of just one dish, but this is fine for the example.):

And I’ve only just noticed I was using the minified version before, and was wondering why the debug was unintelligible – that was why:

AngBasics03

Other stuff in here (much of this would obviously be in separate files –  CSS, controller, app, etc):

  • simple styles
  • currency filter
  • ng-repeat
  • json

 

AngBasics04

<html ng-app="menuApp">
<style>
body {
 font-family: Georgia;
 color:HotPink
}
h1 {
 color: blue;
 margin-left: 0px;
} 
</style>
 
 <body ng-controller="menuCtrl as ctrl">
 <h1>{{ctrl.dish}}</h1>
 <ul>
 <li ng-repeat="item in ctrl.dishItems">
 {{item.Name}} {{item.Price | currency:'£'}}
 </li>
 </ul>
 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script> 
 <script type="text/javascript">
 angular.module('menuApp', [])
 .controller('menuCtrl', [function() {
 this.dish = 'Full English Breakfast'; 
 this.dishItems = [
 {Name:"bacon rasher", Price: 0.9},
 {Name:"fried egg", Price: 1.41}
 ]; 
 }]);
 </script>
 </body>
 
</html>

Now I’ll apply that to a simple list of HTML links:

AngBasics05

 

http://plnkr.co/edit/yNUDCAq5vmRX2cwYzko9?p=preview

AngBasics06

<html ng-app="linksApp">
<style>
body {
 font-family: Arial;
 color:HotPink
}
h1 {
 color: darkorange;
 margin-left: 0px;
} 
</style>
 
 <body ng-controller="linksCtrl as ctrl">
 <h1>{{ctrl.title}}</h1>
 <ul>
 <li ng-repeat="link in ctrl.musicLinks">
 <a href={{link.Url}}>{{link.FriendlyName}}</a>
 </li>
 </ul>
 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script> 
 <script type="text/javascript">
 angular.module('linksApp', [])
 .controller('linksCtrl', [function() {
 this.title = 'Music HTML Pages'; 
 this.musicLinks = [
 {FriendlyName:"Diminished Chords", Url: "https://garyewer.wordpress.com/2012/06/25/working-diminished-chords-into-your-progressions/"},
 {FriendlyName:"Free grand piano VSTs", Url: "http://www.vst4free.com/free_vst.php?id=382"}
 ]; 
 }]);
 </script>
 </body>
 
</html>

Sundry other snippets:
http://plnkr.co/edit/tEYeRhBXlGr6Ou65PzcU?p=preview

http://plnkr.co/edit/54VuqBOuEPnKEL2t6qDo?p=preview

http://plnkr.co/edit/JyJGSrgna7WHJkSG8Fsr?p=preview

Advertisements

Self-authored fonts: the triumph of hope over experience

I suspect I have just wasted 3 hours of my life… Googling [handwriting font] as I often do, I found a site previously unseen: Paintfont.com

blurb01So this was the result in the preview, accepting that I had not entered all the alphabet characters…

Preview01

 

, and this is the result once you install the generated font into Windows, and use it in Word 2013:

FontInWord01Now in fairness, a) it is free, and b) I have scribbled over some of the guide lines (see below), but the latter was because the font in some cases was not rendering at the appropriate size, in earlier efforts. So this is just no usable as is – it might be that another 3 hours experimentation might yield a result, but I’m not doing that. And if I care so much about this sort of stuff, I should spend some money on it. But usually, there seems to be such a lot of effort involved in getting fonts right, I don’t want to spend that time. If this had been right first time, that would have been worth a donation… but it wasn’t.

These are the sheets I’ve used to generate the above examples – look at their site to see how those get used:

redo01 lowercasepage2

 

This is the type of thing I’d really like to render:

Office Lens_20141220_113045_processed

The next day…

I had actually taken photos of the sheet with my phone rather than scanning it. Today I used a scanner, using a template from a different site. This is an extract from the sheet:

extract01

This is the in-tool preview…

 

extract02

, and this is the TTF preview. The major problem is the lack of proportionality between the characters: I don’t THINK my sheet is that exaggerated. And the positioning is way off. So a waste of just an additional hour, but that’s enough time wasted, now.extract03

 

 

WP 8.1: SEO

This person has done some research on how to get around the keyword limitations of Windows Store. Their points are very interesting. Something not mentioned is that each keyword phrase box (there are 6) holds a maximum of 30 characters. I’ve spread mine like this, based on what he found:

KeyWords01

The repetition may look weird, and it might go against the suggestions made by Microsoft, but as I’m currently getting about 1 download per day, and I can’t even find my own app in the App Store, other than by id, then there is certainly nothing to lose in doing this.

december 27

well,that didn’t īmprove matters 1 jot. indeed, it looks worse in terms of visitor numbers. so i’m about to just keep repeatīng the word [French] throughout the 6 keyeord slots. It really looks to me as though microsoft just don’t care about their place īn the bigger  app market. and when you look at the best of the Wīndows apps, all the much vaunted consistent, Modern UI branding is just not present. As someone who intended to get something of a toehold in the app world, that’s quite depressing.