Subscribe: Serge van den Oever [Macaw]
http://weblogs.asp.net/soever/rss.aspx
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
app  apple touch  apple  code  file  finding app\bower  htmlerror finding  icon png  icon  mycomponent  touch icon  touch  web 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Serge van den Oever [Macaw]

Serge van den Oever [Macaw]



SharePoint RIP. Azure, Node, hybrid mobile apps



 



sitecore - one click publish for web projects

Thu, 08 Jun 2017 13:25:37 GMT

With the Helix application structure of sitecore projects there are a lot of web projects. If you follow the Habitat tooling there is a set of convenient gulp tasks for publishing changes like the "do it all" gulp default task. In most cases publishing the web project you made your changes in is enough. In most cases this is a feature or foundation project. You can do this by right-clicking on the web project, select Publish..., and press the Publish button in the resulting screen. A faster way is to enable the Views > Toolbars > Web One Click Publish option so you get a button on your toolbar for fast publication.




sitecore Helix - pdf, epub, mobi

Tue, 06 Jun 2017 12:16:14 GMT

Sitecore Helix documentation is available at http://helix.sitecore.net. But if you want the documentation as PDF, epub or mobi file you can download them at https://chorpoblog.wordpress.com/2017/03/19/sitecore-helix-documentation-1-1/ thanks to the great work of Peter Prochazka.




sitecore Habitat - TypeError: Cannot read property '0' of undefined

Mon, 05 Jun 2017 10:55:39 GMT

When you get the error TypeError: Cannot read property '0' of undefined in the Gulp task '05-Sync-Unicorn' you probably don't have a SharedSecret configured in the file C:\Projects\Habitat\src\Project\Habitat\code\App_Config\Include\Unicorn\Unicorn.UI.config.

In my project the SharedSecret wat commented out, i.e.:

I followed the instructions, uncommented it, grabbed a 64 characters password from  https://www.grc.com/passwords.htm so my line read:

06A3203AA36C84D499D9BF6F79852B61EF2992465C2160FE09263E1AB5B882E2

I did run gulp 05-Sync-Unicorn again, but still the same error. 

After adding a line to the script C:\Projects\Habitat\scripts\unicorn:

console.log("Reading Unicorn configuration file " + unicornConfigFile);
var data = fs.readFileSync(unicornConfigFile);
I saw my problem:
The script is reading from the deployed website location ( C:\websites\Habitat.dev.local\Website/App_config/Include/Unicorn/Unicorn.UI.config), not the project location (C:\Projects\Habitat\src\Project\Habitat\code\App_Config\Include\Unicorn\Unicorn.UI.config). 
I could run the complete gulp default task again, but doing a Publish... on the Sitecore.Habitat.Website project (right-click on the project) does the job much quicker.
After publishing, re-execute step 5 again: gulp 05-Sync-Unicorn
Hint for the sitecore team: reading a configuration setting using the line:
secret = result.configuration.sitecore[0].unicorn[0].authenticationProvider[0].SharedSecret[0];
from a configuration file where this setting is commented out will lead to issues that take people a lot of time to find out, especially because I couldn't find anything on this on the Wiki documentation of the Habitat project.



sitecore SIM - backup installation as restore point

Fri, 02 Jun 2017 14:22:00 GMT

After doing a fresh install of a sitecore site through the sitecore instance manager (SIM) including packages like Sitecore PowerShell Extensions and other stuff you want to have installed you can make a backup (right-click on your site > Backup) as a fresh restore point in case things get terribly wrong. 

Note that the backups are made in the folder C:\websites\mysite.dev.local\Backups.

Install the latest version of SIM from http://dl.sitecore.net/updater/sim/.




sitecore SIM - succesful install but no databases

Fri, 02 Jun 2017 14:03:00 GMT

I was busy with an installation of sitecore through the sitecore instance manager (SIM), asnd everything seemed to be ok, but I had no databases.

I gave Network Service read/write access on my c:\websites folder, but when I looked the SIM logs (Home > Bundled tools > SIM logs) I saw the error:

System.Data.SqlClient.SqlException (0x80131904): Unable to open the physical file "C:\websites\mysite.dev.local\Databases\Sitecore.core.mdf". Operating system error 5: "5(Access denied.)".

When I gave Network Service full control on the folder c:\websites it worked.

Install the latest version of SIM from http://dl.sitecore.net/updater/sim/.




Wappalyzer + PageXray Chrome plugins combined change PUT to GET

Fri, 21 Apr 2017 09:46:25 GMT

I installed at home two Chrome plugins on my Mac to analyze technology used on websites: Wappalyzer and PageXray. When I got on my work this morning and turned on my Windows PC  I started using the application we are developing, but it behaved weird. After a lot of debugging I found that an Ajax PUT request was changed into a GET request! Then I remembered that I installed some plugins at home, and that on startup of Chrome these plugins were installed at work as well! When I disable one of the plugins it started working again as expected. So beware of this deadly combination!!




Zipkin with docker startup script

Mon, 10 Apr 2017 15:17:00 GMT

In a project we use http://zipkin.io/ for distributed tracing. During development is is very handy to trace to Zipkin running in a Docker image. The following PowerShell script will help with (re)starting the Docker image on WIndows and open Zipkin in Chrome when it is running.

$runningZipkin = & docker ps -q --filter ancestor=openzipkin/zipkin
if ($runningZipkin) {
"Running Zipkin with id $runningZipkin - will be killed"
& docker stop $runningZipkin
}
"Starting Zipkin docker image"
& docker run -d -p 9411:9411 openzipkin/zipkin

$ErrorActionPreference = "SilentlyContinue" # We don't want to see failing requests
do {
Start-Sleep -Seconds 1
"Waiting for starting of Zipkin..."
$up = Invoke-WebRequest -Uri http://localhost:9411
} while (!$up)

& "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" http://localhost:9411




SPA Series: Turn our ShowTitle app into a Progressive Web App

Mon, 29 Aug 2016 15:46:27 GMT

In this post we turn our great web app into a Progressive Web App (PWA). "A progressive web app provides an app-like user experience that is low friction and is built using modern web capabilities and hosted on the web and can become an app on the user's system over time." To learn more about the great promises of Progressive Web Apps read Addy Osmani's great overview article Getting started with Progressive Web Apps. Google also has a great entry point to the required information at https://developers.google.com/web/progressive-web-apps/. Getting up to speed with Progressive Web Apps Progressive Web Apps are cool, and in my opinion the future of a whole category of mobile apps. An inspiring introduction to this vision is this presentation by Bruce Lawson. See also https://dev.opera.com/blog/pwa-taipei/. For a great overview of other material available on Progressive Web Apps have a look at https://github.com/hemanth/awesome-pwa. What do I want to achieve in this blog post In this article we explore how to get the following functionality working in our PWA: Hosting in a SharePoint document library - for authentication, access to data within your company, and freedom of distribution Add to homescreen - so we get an icon between the other apps on your mobile device or between the apps in your browser Splash screen - for direct visual feedback on start of our application Offline support - so we can use our app even if we are not connected to the network The code for our sample Progressive Web App can be found at https://github.com/svdoever/sharepoint-progressive-web-apps/tree/master/ShowTitleProgressiveWebApp. Generating artifacts For the PWA we need things like a favicon, icons for the different (mobile) platforms, html code to include these icons, and configuration directives for platforms to provide us with PWA functionality. The site http://realfavicongenerator.net/ can help us out with some of these steps. It generates a zip file with icons and other artifacts based on a single uploaded icon. Because we are creating the amazing "Show Title" app that shows the title of SharePoint site hosting our app, I downloaded an icon of the letter T and used that for the generation. The generator created a zip file with artifacts and the following HTML lines for inclusion in the head of our app page: Because we are hosting in a subfolder of a SharePoint document library and not in the root of a website we need to remove the leading slashes as in:



Consuming Javascript libraries from TypeScript without type definition files

Sat, 09 Jul 2016 09:16:00 GMT

There are cases where you need to consume Javascript libraries or, for example, ReactJS components written in Javascript from your TypeScript code. Possible reasons: You find a great library or component "out in the wild" written in Javascript One of your team-members does not know/does not want to write TypeScript You want to consume components from an existing library or component set writen in Javascript Assume the situation where a ReactJS component MyComponent.jsx written in Javascript must be consumed from a component Home.tsx: The file MyComponent.jsx: import * as React from 'react';export class MyComponent extends React.Component {  constructor(props) { super(props); }  render() { return (

Hello from MyComponent

); }} We could import this component in different ways: import {MyComponent} from './MyComponent'; // ERROR: Cannot find module './MyComponent'const MyComponent = require('./MyComponent'); // Warning if used as // see https://codereviewvideos.com/blog/warning-react-createelement/const X = require('./MyComponent'); // OK if used as const MyComponent = require('./MyComponent').MyComponent; // OKconst MyComponent = require('./MyComponent').default;// OK if defined as export default class MyComponentconst {MyComponent} = require('./MyComponent'); // OK, it's possible to destructure multiple components For details on how to specify types for desctructured object parameters see destructured object parameters in TypeScript. So if we want to consume the above JavaScript component from TypeScript in the component Home.tsx: import * as React from 'react';const MyComponent = require('./MyComponent').MyComponent;export class Home extends React.Component { render() { return (
); }} [...]



Polymer 1.0 - Polylint - use on project instead of component

Fri, 18 Sep 2015 16:33:00 GMT

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
Error: ENOENT, open 'C:\p\serge\polymer-starter-kit\app\bower_components\webcomponentsjs\webcomponents-lite'
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
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

Sun, 19 Jul 2015 23:14:53 GMT

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. Open the url https://icomoon.io/app/#/select Open the IcoMoon - Free icon set and select the icons you want to use in your app It is also possible to select all icons (we will do that for now) Select the Generate Font option at the bottom Press settings and select Font Name IcoMoon, select as Class Prefix icon. and select the option Encode & Embed Font in CSS Now click the download button Open the downloaded IcoMoon.zip file and copy the file style.cssto your styles folder as customicons.css Open de customicons.css file and compare with the file appframework/build/icons.css (we need to copy over the appframework specific styles) 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'); } 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!  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

Fri, 17 Jul 2015 22:19:00 GMT

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. Your main entry point is at http://app-framework-software.intel.com/ The most important entry in the documentation is http://app-framework-software.intel.com/documentation.php#afui/afui_about, in this list you find some interesting things like: - UI Quickstart  - gives a nice initial introduction on using the Intel App Framework - OS Themes - how to disable custom os themes and specify the one you want to use on all devices (still mentions version 2.1?!) For all JavaScript api's and plugins see http://app-framework-software.intel.com/api.php 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: Kitchensink index.html (github source code) note: sample gives overview of all available vector fonts Kitchensink animbase.html (github source code) note: had to fork the appframework repository and make some changed because JQuery and FastClick were not referenced correctly Angular todo example (github source code) Backbone todo example (github source code) React todo example (github source  code) note: this is a very simplistic React example, I had some more trouble to get multiple panels provided by React rendering working Lancaster demo (github source code) note: had to fork the appframework repository and make some c[...]



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

Sat, 23 May 2015 22:36:09 GMT

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.




Building an Ionic hybrid mobile app with TypeScript

Mon, 26 Jan 2015 13:00:11 GMT

Presentation based on experiences of building a hybrid mobile app using the Ionic framework, Cordova, AngularJS and TypeScript.

The app we have built is for Android and iOS.

src="//www.slideshare.net/slideshow/embed_code/43898307" width="476" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">




Cordova – file-transfer, unzip and present adventures

Fri, 21 Mar 2014 11:40:00 GMT

For a hybrid project I have a very simple requirement: download zip file, unzip it, serve content on a page from artifacts (html text, images). I started with Intel XDK, an environment I did some other work with. A great integrated development environment, but some of its big problems: lagging behind in version of Cordova, fixed set of selected plugins, no possibility to include other plugins. Because I wanted to unzip, I tried it with a Javascript only solution zip. The problem I had was that it worked if I downloaded the zip file over http using importHttpContent(), but I could’t get it working with loading from the local file system. Another problem I had was with where files ended up on different devices: in / on wp8, on /storage/sdcard0 on Android, and on iOS in even another location. I decided to go with plain Cordova, with the command-line commands. That was a good decision. It was now possible to use the latest version (3.4 at time of writing), and use the new file and file-transfer plugins that now support a huge improvement to hybrid development: the cdvfile protocol. Files can now be addressed with respect to one multi-platform root: cdvfile://, rather than through device-specific paths. There is also a great plugin available to unzip that understands the new cdvfile:// notation as well. I ended up with a simple example to showcase the download, unzip and present case. To get it working execute the following commands with a Cordova 3.4 installation: cordova create Cordova-TransferUnzipPresent com.svdoever.tranferunzippresent TransferUnzipPresent cd Cordova-TransferUnzipPresent cordova platform add android cordova plugin add org.apache.cordova.file cordova plugin add org.apache.cordova.file-transfer cordova plugin add org.chromium.zip Replace code in www\index.html with the code below cordova emulate android Works with iOS platform as well. The zip plugin does not work on wp8 (yet). The code: Cordova Download Unzip Display Sample

(image)
TEXT COMES HERE

{{chaptercontent.Title}}

It works fine when jQuery is included, but not when you use the AngularJS JQLite implementation.
When 
is used, the code works correctly.