HTML5 relevant tags for iOS Web App

Here are some tags that are relevant to build great mobile experience. It is mostly for iOS but Android (Chrome) seems to follow it as well.

This is mostly for my own reference as I bump to this all the time.


        <!-- Run in full-screen mode. -->
        <meta name="apple-mobile-web-app-capable" content="yes">
       <!-- Android --> 
       <meta name="mobile-web-app-capable" content="yes">
        <!-- Make the status bar black with white text. -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!-- Customize home screen title. -->
        <meta name="apple-mobile-web-app-title" content="Web App">
        <!-- Disable phone number detection. -->
        <meta name="format-detection" content="telephone=no">
        <!-- Set viewport. -->
        <meta name="viewport" content="initial-scale=1">
        <!-- Prevent text size adjustment on orientation change. -->
        <style>html { -webkit-text-size-adjust: 100%; }</style>
        <title>iOS 7 Web App</title>
        <!-- Icons -->
        <!-- iOS 7 iPad (retina) -->
        <link href="/static/images/apple-touch-icon-152x152.png"
        <!-- iOS 6 iPad (retina) -->
        <link href="/static/images/apple-touch-icon-144x144.png"
        <!-- iOS 7 iPhone (retina) -->
        <link href="/static/images/apple-touch-icon-120x120.png"
        <!-- iOS 6 iPhone (retina) -->
        <link href="/static/images/apple-touch-icon-114x114.png"
        <!-- iOS 7 iPad -->
        <link href="/static/images/apple-touch-icon-76x76.png"
        <!-- iOS 6 iPad -->
        <link href="/static/images/apple-touch-icon-72x72.png"
        <!-- iOS 6 iPhone -->
        <link href="/static/images/apple-touch-icon-57x57.png"
        <!-- Startup images -->
        <!-- iOS 6 & 7 iPad (retina, portrait) -->
        <link href="/static/images/apple-touch-startup-image-1536x2008.png"
              media="(device-width: 768px) and (device-height: 1024px)
                 and (orientation: portrait)
                 and (-webkit-device-pixel-ratio: 2)"
        <!-- iOS 6 & 7 iPad (retina, landscape) -->
        <link href="/static/images/apple-touch-startup-image-1496x2048.png"
              media="(device-width: 768px) and (device-height: 1024px)
                 and (orientation: landscape)
                 and (-webkit-device-pixel-ratio: 2)"
        <!-- iOS 6 iPad (portrait) -->
        <link href="/static/images/apple-touch-startup-image-768x1004.png"
              media="(device-width: 768px) and (device-height: 1024px)
                 and (orientation: portrait)
                 and (-webkit-device-pixel-ratio: 1)"
        <!-- iOS 6 iPad (landscape) -->
        <link href="/static/images/apple-touch-startup-image-748x1024.png"
              media="(device-width: 768px) and (device-height: 1024px)
                 and (orientation: landscape)
                 and (-webkit-device-pixel-ratio: 1)"
        <!-- iOS 6 & 7 iPhone 5 -->
        <link href="/static/images/apple-touch-startup-image-640x1096.png"
              media="(device-width: 320px) and (device-height: 568px)
                 and (-webkit-device-pixel-ratio: 2)"
        <!-- iOS 6 & 7 iPhone (retina) -->
        <link href="/static/images/apple-touch-startup-image-640x920.png"
              media="(device-width: 320px) and (device-height: 480px)
                 and (-webkit-device-pixel-ratio: 2)"
        <!-- iOS 6 iPhone -->
        <link href="/static/images/apple-touch-startup-image-320x460.png"
              media="(device-width: 320px) and (device-height: 480px)
                 and (-webkit-device-pixel-ratio: 1)"


Getting started with Sitecore MVC

Earlier this summer I finished my first Sitecore project in MVC. I have worked on some Sitecore implementations before where there has been a mix of MVC and WebForms but this time I had a finally change to make presentation ground up so naturally I chose MVC. I have to admit I never felt in home on .NET webforms even I have been working with .NET since version 1.0. For me whole point of abstracting away some of the difficulties of a stateless protocol has always been giving more confusion than benefits. Probably because I was coming to .NET world from web development and I had never been developing in Windows. Anyway, what gave me quick start to MVC in Sitecore was these two videos.

Sitecore MVC – Getting Started (Part 1)

Sitecore MVC — View Renderings, @Html.Sitecore(), and Custom Models (Part 2)

Rethinking cloud-based ECM

I work these days with Adobe Experience Manager which is part of the integrated suite of products known as the Adobe Marketing Cloud, the Adobe Experience Manager connects with Adobe’s analytics, social media, targeting and optimization modules to create a holistic solution and Sitecore Experience Platform that connects the Web Content Management system with the Digital Marketing System to link together channels, engagement automation and analytics with third party tools. Both of these Experience platforms turns my focus on “CMS as platform“. CMS as platform has born due the lack of CRM solutions that integrates and understands web and social media. This hole has left room for CMS to fill this problem. Although, Adobe and Sitecore are both have been built on top of traditional CM to support cloud and therefore I am not sure if these platforms will solve Cloud -part on real Enterprise Content Management Systems.

So what would be the real Cloud CMS?


If we forget current CMS’s and think from the technology perspective Cloud and Enterprise Content Management one rather interesting concept is to rethinking use of data and presentation to completely different level. Since the Internet is big API of data. I have been playing with the thought where data does not need to be centrally stored but instead it can be loaded from many sources using open API’s or simply scrapped using crawlers. Then on CM side using advanced caching mechanism to stored into central package that can be handled with workflows. Just image a web page where the server that is serving a page is only having information about the presentation, cached content but the data can come from anywhere from the Internet. I could use SkyDrive over Office365 as data storage or Google Drive for generic content. I can host comments from Facebook and video’s from Youtube. If I were having social content I could stream content from a site like Wikipedia. All in the same stream. The CMS on this case would be playing role of brand manager with simple CM functionality that backtracks the changes and workflows and provides editors very easy mashups for social media  Internet snippets and content. The role of the CM editor would be more of an Author who through workflows controls the content produced in any media and social media site. Regular editors could use already familiar tools on the Internet to produce content and use CMS just to low level editing,  construct and page design from the Internet media. This would optimise management of web and social content in the same stream without loosing control of the processes.

OK, I admit this would be rather brave change for some that require full control but nothing that cannot be solved with today’s technology. I also think rethinking data out of “CMS” would free CMS more to evolution of marketing and experience control.

How does OpenSSL vulnerability affects me?

If you are running Unix and HTTPS you should review your server. If you are website user on Mac or Windows you might need to change your passwords on some of the services. 

I found this good FAQ summarising the vulnerability from Reddit and thought to copy & paste here:

— clip —

What should I be doing as a user?

If you’re on Linux, update to the latest openssl libraries (ensure that the package was updated today and covers CVE-2014-0160). Ubuntu and Debian already have packages out to fix this.

If you’re on OSX, the latest openssl available there is 0.9.8, which is not vulnerable. You don’t need to update anything (unless you installed a vulnerable version manually, in which case you should update)

If you’re on Windows, it doesn’t come with openssl. If you installed it yourself (through cygwin, for example), you should check what version it is and try to update it if is a vulnerable version.

If you did have a vulnerable version of openssl installed, you should restart all of your computer applications after you update it to ensure they start using the new library.

What should I be doing as a sysadmin / website administrator / other?

Immediately update openssl libraries on any system having vulnerable versions which are hosting SSL/TLS services. Again, make sure the update covers CVE-2014-0160. If you’re using openssl 1.0.0 or older, you’re not vulnerable to this bug.

It is probably reasonable to consider any private keys from vulnerable services to be compromised, and as such you should replace those keys/certs and revoke the old certs. Failure to revoke the old cert could mean that any private keys acquired using the vulnerability could then be used to impersonate your site on the internet with full PKI trustworthiness – a very bad outcome.

Can I test to see if an external website is vulnerable to this?

Unfortunately the only way to determine if a website you don’t manage is vulnerable to this is to try and exploit it. I’d recommend against trying this unless you are fully aware of the potential legal repercussions of doing so.

What does this mean for accessing my bank / facebook / other random website?

If the website you are connecting to hosts SSL (HTTPS) and has this vulnerability, an attacker connecting to that website can view a small window (64k) of memory from the application which is terminating SSL. This window may contain a lot of things, including SSL certificates, SSL session data, or usernames/passwords, depending on the design of the terminating app.

As such, the most prudent thing to do would be to avoid connecting to those services until you can be reasonably assured that they are not affected by this vulnerability. Unfortunately this is a bit of a quagmire as determining if they’re affected is difficult to do. There is no good solution to this, other than to wait for those various websites to confirm they have fixed the issue, or to verify they aren’t vulnerable through third-parties or by testing yourself (see above regarding legal repercussions of testing yourself).

If you find that a site which you have used was vulnerable to this issue, you should change your username/password as soon as it has been confirmed fixed, for prudence sake.

Luckily most bank software is very slow to update (meaning they’re often on openssl 0.9.8, which isn’t affected), or makes use of proprietary SSL libraries, and as such it is unlikely that they are affected by this vulnerability. I’ve seen tests against a bunch of banks and saw no notable ones which are affected by this vulnerability. Unfortunately there will be some financial institutions affected by this.

— clip —

Is this a design flaw in SSL/TLS protocol specification?

No. This is implementation problem, i.e. programming mistake in popular OpenSSL library that provides cryptographic services such as SSL/TLS to the applications and services.

In following Elastica’s CTO Dr. Zulfikar Ramzan walks through the mechanics of the Heartbeat (Heartbleed) flaw (at a high level), how an attacker can exploit it, and its underlying ramifications.

OpenSSL Heartbeat (Heartbleed) Vulnerability (CVE-2014-0160) and its High-Level Mechanics from Elastica Inc on Vimeo.

See also

Multi-factor authentication for Sitecore

Untitled Document - New Page-We have worked a lot on secure login in recent months including integration with NemLoginPingFederate and AD FS and after having headaches with SAML assertions. We decided to create a simple module that hardens default Sitecore login with SMS token. It extends normal Sitecore login with extra step that asks you to give random code that is sent to your mobile phone. Mobile phone number is stored to your user profile. When you give right username and password the server will send unique key in SMS to your phone. This increases security on logins because no longer bad guys can guess your username+password and this way access to Sitecore. If you are using AD integration on your Sitecore instance you still can use this module (taken we can read your phone number).

Authentication workflow in Sitecore login

Step 1: Write your username and password


Step 2: Read SMS token from your phone

Step 3: Write SMS Code to Login Screen


Step 4: Login Notice that since I already know who user is after step 2 I can extend this very easily by choosing to scope User Interfaces, for example normally regular editors only use Page Editor and IMHO it is just confusing even show them anything else.


There will be a fee on the module and you will also need to have access to SMS gateway since SMS’s are not free. If you are not a developer we can install this for your Sitecore as long as you are running any version of Sitecore 7 or 6.  For the SMS gateway we are right now supporting Twilio (REST) and generic SMS gateways (GET). If you like to get hint on the pricing take a look Twilio pricing. So far I have noticed that Twilio is slightly more expensive that others that I have seen but their API and Support (SLA) is good so you know what you are paying for. For more info on licensing contact me at @jpkeisala or call Addition +45 33 69 04 02.

Road map

Custom Login Page
If you have even looked login screen of Sitecore you may have noticed it is not very customizable but fortunately we can replace it. We are changing login screen of Sitecore to “normal web page”, default look looks like Sitecore normal login screen. However, UI is customizable and uses Twitter Bootstrap.


What is Multi-factor authentication?

Multi-factor authentication (also MFA, two-factor authenticationtwo-step verification, TFA, T-FA or 2FA) is an approach to authentication which requires the presentation of two or more of the three authentication factors: aknowledge factor (“something only the user knows“), a possession factor (“something only the user has“), and an inherence factor (“something only the user is”). After presentation, each factor must be validated by the other party for authentication to occur. More about the concept in wikipedia.


Customising Rich Text Editor on Sitecore

Pasting from Word

StripFormattingOnPaste Property

Gets or sets the value indicating how the editor should clear the HTML formatting when the user pastes data into the content area.

Member Description
None Doesn’t strip anything, asks a question when MS Word formatting was detected.
NoneSupressCleanMessage Doesn’t strip anything and does not ask a question.
MSWord Strips only MSWord related attributes and tags.
MSWordNoFonts Strips the MSWord related attributes and tags and font tags.
MSWordRemoveAll Strips MSWord related attributes and tags, font tags and font size attributes.
Css Removes style attributes.
Font Removes Font tags.
Span Clears Span tags.
All Remove all HTML formatting.


Note: In Gecko-based browsers you will see the mandatory dialog box where you need to paste the content.


HTML Forms Autocomplete Naming Convension

When designing forms I have found out that it is good strategy to embrace autocomplete instead of disable it (autocomplete=off). This is especially relevant in order to give nice user experience for non-keyboard devices. However, I have not really find out any good documentation on what are the best practices to use Auto Complete on forms.

AutoComplete is enabled by default in all browsers and provides the following advantages:

  • Information is stored on the user’s computer.
  • User experience is simplified by helping the user fill out forms.
  • User information remains secure. While users can see their private information on a Web site, a Web site cannot see the list of personal information until one of the stored values is selected and the field is filled in.

How to name forms to have working autocomplete
Browser seems to collect information from the forms based on how they are named. Some developers use internal naming which makes it difficult but it seems to me that the most common format is vCard format. By looking vCard-naming conventions this patterns should be working on most of the cases.












Please, let me know if you have more info on this topic.

Giving control creates leaders

This was video was very inspiring for me so I decided to share it.

This 9 minutes presentation of  former nuclear submarine commander David Marquet explains how he took a nuclear submarine from the worst performing ship with the lowest moral in the US Navy and turned it into the highest graded ship ever. Simply by creating environment for thinking by giving control.



Essential Run and PowerShell Commands for Web Developer on Windows

Just like Windows 8, Windows 2012 Server does not have start menu anymore. Therefore I have had to learn to memorize few commands to get around on the server. Here comes a list of Run and PowerShell Commands that I am using the most.


Run /  Command Line Commands

appwiz.cpl Add/Remove Programs
control Control Panel
cmd or cmd.exe Command Prompt
Downloads Opens download folder
diskmgmt.msc Disk Management
diskpart Disk Parmelonion Manager
desk.cpl Display Properties
dpiscaling DPI Scaling
control folders Folders Properties
gpedit.msc Group Policy Editor
iexplore Internet Explorer
firefox Firefox
control keyboard Keyboard Properties
control netconnections
Network Connections
notepad Notepad? ;)
osk On Screen Keyboard
perfmon Performance Monitor
regedit.exe Registry Editor
msinfo32 System Information
msconfig System Configuration Utility
taskmgr Task Manager
firewall.cpl Windows Firewall
control userpasswords2 Open password manager
InetMgr.exe Internet Information Services (IIS) Manager 7
InetMgr6.exe Internet Information Services (IIS) Manager 6
mstsc.exe Remote Desktop Connection
netstat Network Statistics
net statistics Check computer up time
net stop Stops a running service. i.e. net stop iisadmin /y
net use Connects a computer to or disconnects a computer from a shared resource, displays information about computer connections, or mounts a local share with different privileges
runas Run specific tools and programs with different permissions than the user’s current logon provides
ping Determine whether a remote computer is accessible over the network
tracert Trace route
taskkill terminate tasks by process id (PID) or image name
start Starts a separate window to run a specified program or command.
start . opens the current directory in the Windows Explorer.
shutdown.exe Shutdown or Reboot a local/remote machine
ipconfig try ipconfig /flushdns


Full reference can be found here also worth of checking out is Useful Command-line Commands on Windows at



Command Result
Get-Help Example: Get-Help -Name Get-Process
Set-ExecutionPolicy You can use the Set-ExecutionPolicy command to control the level of security surrounding PowerShell scripts.
Set-ExecutionPolicy Unrestricted
Get-ExecutionPolicy C:\PS>set-executionpolicy RemoteSigned; get-executionPolicy
Stop-Service and Start-Service Start/Stop service on local computer: 

PS C:\> Stop-Service -Name Spooler
PS C:\> Start-Service -Name Spooler

Start/Stop service on remote computer:

PS C:\> $ServiceObj = Get-Service -ComputerName MyPC1 -Name spooler
PS C:\> Stop-Service -InputObj $ServiceObj
PS C:\> Start-Service -InputObj $ServiceObj

Get-Process and Stop-Process