Archives

Archives / 2015

  • Polymer 1.0 - Polylint - use on project instead of component

    No Comments

    The Polymer team just release Polylint, a tool to catch errors in your polymer project before even running your code.

    The tool seems to be designed to work in a component, but it faisl in a project that follows the project structure as used in the Polymer Starter Kit.

    You can see this structure at https://github.com/polymerelements/polymer-starter-kit.

    In this structure the folder bower_components folder is located next to the app folder, instead of in the app folder.

    To get started:

    git clone https://github.com/polymerelements/polymer-starter-kit

    cd  polymer-starter-kit

    bower install

    Now if you run the command polylint --root app --input index.html you will get the following errors:

    ERROR finding app\bower_components\webcomponentsjs\webcomponents-lite.js
    Error: ENOENT, open 'C:\p\serge\polymer-starter-kit\app\bower_components\webcomponentsjs\webcomponents-lite.js'
    at Error (native)
    ERROR finding app\bower_components\iron-flex-layout\classes\iron-flex-layout.html
    ERROR finding app\bower_components\iron-icons\iron-icons.html
    ERROR finding app\bower_components\iron-pages\iron-pages.html
    ERROR finding app\bower_components\iron-selector\iron-selector.html
    ERROR finding app\bower_components\paper-drawer-panel\paper-drawer-panel.html
    ERROR finding app\bower_components\paper-icon-button\paper-icon-button.html
    ERROR finding app\bower_components\paper-item\paper-item.html
    ERROR finding app\bower_components\paper-material\paper-material.html
    ERROR finding app\bower_components\paper-menu\paper-menu.html
    ERROR finding app\bower_components\paper-scroll-header-panel\paper-scroll-header-panel.html
    ERROR finding app\bower_components\paper-styles\paper-styles-classes.html
    ERROR finding app\bower_components\paper-toast\paper-toast.html
    ERROR finding app\bower_components\paper-toolbar\paper-toolbar.html
    ERROR finding app\bower_components\page\page.js
    ERROR finding app\bower_components\polymer\polymer.html

    This can be solved by creating a symbolic link bower_components in the app folder to ..\bower_components.

    The following script RunPolylint.bat will do this, place it in the root of your project (next to the app folder.

    :: RunPolylint.bat - by Serge van den Oever, http://weblogs.asp.net/soever
    :: This script assumes that polylint in installed
    :: globally through the following command:
    ::    npm install -g polylint
    :: Polylint assumes that the bower_components folder is located
    :: in the same folder as the entry point file as specified with --input.
    :: This is the case for a Polymer component, but not for an application
    :: that follows the structure of the Polymer Starter Kit.
    :: This script solves this issue by creating a temporary symbolic link
    :: to the folder bower_components in the folder app
    @cd %~dp0
    set root=app
    set input=index.html
    pushd %root%
    mklink bower_components ..\bower_components
    popd
    polylint --root %root% --input %input%
    del %root\bower_components

  • Intel AppFramework create and use your choice of IcoMoon icons

    2 Comments

    The Intel AppFramework uses a small subset of the IcoMoon icons. This post describes how to make your own selection of IcoMoon icons and use it in your app.

    There is a free IcoMoon icon set with 490 icons available that we will use to make our selection from.

    1. Open the url https://icomoon.io/app/#/select
    2. Open the IcoMoon - Free icon set and select the icons you want to use in your app
    3. It is also possible to select all icons (we will do that for now)
    4. Select the Generate Font option at the bottom
    5. Press settings and select Font Name IcoMoon, select as Class Prefix icon. and select the option Encode & Embed Font in CSS
    6. Now click the download button
    7. Open the downloaded IcoMoon.zip file and copy the file style.cssto your styles folder as customicons.css
    8. Open de customicons.css file and compare with the file appframework/build/icons.css (we need to copy over the appframework specific styles)
    9. Remove the first four lines with a file-based @font-facedefinition, we will use the embeded one
      @font-face {
   font-family: 'IcoMoon';
   src: url('fonts/IcoMoon.eot');
}
    10. Replace:
      .icon {
   font-family: 'IcoMoon';
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

      /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
with (check appframework/build/icons.css for changes):


      .icon:before {
   font-family:'IcoMoon';
   speak:none;
   font-style:normal;
   font-weight:normal !important;
   font-variant:normal;
   text-transform:none;
   line-height:1;
   color:inherit;
   position:relative;
   font-size:1em;
   left:-3px; top:2px;
}
li .icon:before {
   position:relative;
   width:24px; height:100%;
   top:2px;
   line-height:0 !important;
   margin-right:4px;
}

.icon.mini:before {
   font-size:.7em;
}
.icon.big:before {
   font-size:1.5em;
}

      and we are done! 
    11. In your main.css file include the appframework css files and your customicons.css file (or include directly in html):
      @import url(../appframework/build/af.ui.base.css);
      @import url(../appframework/build/af.ui.css);
      @import url(customicons.css);

  • Intel AppFramework installation and documentation

    No Comments

    I have written a mobile app with Ionic Framework but I must say that I'm not really font of the AngularJS framework, especially now that you know that version 1.3 as used in Ionic at the time of writing (version 1.0.1) is a dead end and version 2 is on the horizon. For a new mobile app I needed a mobile app UI framework that I can use in combination with ReactJS and that would work on an as wide range of mobile devices as possible. Reapp looks promising, but is still alpha and not very cross platform (for example Windows Phone). I ended up with Intel App Framework version 3, a simple framework with great support for multiple devices. It event tries to mimic the native style on each type of device, I'm not sure yet if i'm that happy about that, but it is also possible to override the ui time to a fixed ui (for example ios) for all devices.

    Installing Intel App Framework

    For client framework I normally use Bower. The Intel App Framework in available on Bower as the "intel-bower" package, but that package is not maintained and out of date, so don't use it. There is another reason why you shouldn't use it, it only contains the js and css files, not the samples which you really need due to a lack of documentation. More on that later. My approach is that I add the original appframework Git repository ito my project's Git repository a a submodule:

    git submodule add https://github.com/01org/appframework.git  appframework

    And to update this (an possibly other) submodules in your repository, just execute:

    git submodule foreach git pull

    Documentation

    The documentation available for the Intel App Framework is ... minimal.

    The documentation is very minimal (to say the least) about a lot of things. Good example: the section Vector Icons does not mention the available icons, and does not explain how to add your custom icons (I will write about that in a next blog post).

    One of the most important pages is the appframework/index.html kitchensink example. It is possible to run this page directly within the github repository by translating it's url from: https://github.com/01org/appframework/blob/master/index.html to http://rawgit.com/01org/appframework/master/index.html (see this stackoverflow page for more information on this translation)

    This is a list of all example pages in the appframework github repository. They are interesting to check out and its source code is one of the best sources of documentation:

    I think it might be a good idea if the intel team would give the appframework documentation some more love, and include the links as described above.

  • AngularJS 2 and TypeScript... some work to do...

    1 Comment

    After reading a great "First impressions" post on AngularJS 2 (http://blog.mgechev.com/2015/04/06/angular2-first-impressions/) I headed over to the code repository of AngularJS 2 to see how they write their code now in my favorite front-end language: TypeScript. After looking at some of the code it is clear that the team has still some TypeScript to learn. A little example of something you find in most of the code: for example in the file https://github.com/angular/angular/blob/master/modules/angular2/src/render/api.ts:

    export class EventBinding {
        fullName: string;  // name/target:name, e.g "click", "window:resize"
    source: ASTWithSource;

        constructor(fullName: string, source: ASTWithSource) {
            this.fullName = fullName;
            this.source = source;
        }
    }

    But one of the features of TypeScript is parameter property declaration and is shorthand for declaring a property with the same name as the parameter and initializing it with the value of the parameter. This would reduce the above code to:

    export class EventBinding {
        constructor(private fullName: string, private source: ASTWithSource) {
        }
    }

    See chapter 8.3.1. of the TypeScript language specification.

    And this is a really simple example. The code is full of this kind of initialization code.