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.

Cellular
Company
Department

DisplayName
Email
FirstName

Gender
Home.City
Home.Country

Home.Fax
Home.Phone
Home.State

Home.StreetAddress
Home.Zipcode
Homepage

JobTitle
LastName
MiddleName

Notes
Office
Pager

Business.City
Business.Country
Business.Fax

Business.Phone
Business.State
Business.StreetAddress

Business.URL
Business.Zipcode

 

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

Command
Result
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
ncpa.cpl
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 Serverfault.com

 Powershell

 

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
Get-Service
ConvertTo-HTML
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

ConvertTo-HTML
Export-CSV
Select-Object
Get-Process and Stop-Process
in Tips | 390 Words

Yeoman generators

Updated May 19 2013

Just → npm search yeoman-generator for my own reference

NAME                  DESCRIPTION
calaxa                calaxa ======
ft-wp                 Front-Trends WordPress generator
generator-angular     Yeoman generator for AngularJS
generator-angular-silex Yeoman generator for Silex based upon AngularJS
generator-assemble    Yeoman generator for Assemble
generator-aura        Yeoman generator for Aura.js
generator-backbone    Yeoman generator for Backbone.js
generator-backbone-amd generator-backbone-amd ======================
generator-barista     Yeoman generator for Barista
generator-bbb         Yeoman generator for Backbone Boilerplate
generator-bbproject   Yeoman Generator for BB Project
generator-boilerplate Yeoman Generator for ...
generator-bookmarklet Yeoman Generator for bookmarklets
generator-bootstrap   Yeoman generator for Twitter Bootstrap
generator-bootstrap-less Yeoman generator fo twitter bootstrap less
generator-breakpoint  A Yeoman generator for starting a project with Breakpoint
generator-btapp       BitTorrent btapp.js web app yeoman generator
generator-buster      generator-buster ================
generator-cagspa      A generator for Single Page Applications
generator-carlosypunto A generator for Yeoman. Generate simple require.js workfl
generator-charcoal    Alternative Yeoman generator for Ember
generator-chrome-extension Yeoman generator for Chrome Extensions
generator-chromeapp   Yeoman generator for Chrome App
generator-cityjs      Yeoman generator for CityJS
generator-closure     Generator for Closure Library
generator-component   A Yeoman generator for components.
generator-cucumber    Yeoman generator for Cucumber.js
generator-dotfiles    Get started with your projects quickly using this generato
generator-ember       Yeoman generator for Ember
generator-express     A nodejs express generator for Yeoman
generator-firefoxos   A Firefox OS app generator for Yeoman
generator-flask       Yeoman generator for Flask project
generator-footguard   Yeoman generator for single page application
generator-foundation  Yeoman generator for Stylus themes, especially zurb founda
generator-frontend    Scaffolds out a boilerplate for front-end development.
generator-generator   Generator Generator for Yeoman
generator-genesis     Yeoman Generator for Genesis Skeleton
generator-gpmd        Modified Yeoman generator for scaffolding out a front-end
generator-gumby       Yeoman generator for Gumby 2 Framework
generator-h5bp        HTML5 Boilerplate generator
generator-heroku      A heroku setup generator for Yeoman
generator-init        A generator for generating generators in Yeoman
generator-jasmine     Yeoman generator for Jasmine
generator-jquery-boilerplate Yeoman Generator for jQuery Boilerplate
generator-js-library  Yeoman Generator for client-side JS Libraries, w/ Karma Ru
generator-jsmodule    Generator for scaffolding out a JavaScript module for Node
generator-karma       Yeoman generator for Karma
generator-kissy-gallery kissy gallery generator
generator-kissy-pie   kissy generator for kissypie
generator-knockout    A generator for Yeoman
generator-lessapp     Edited default Yeoman generator for scaffolding out a fron
generator-maria       A generator for Yeoman
generator-mdpress     A generator for Yeoman to create mdpress presentations.
generator-microlib    A Yeoman generator for browser microlibs
generator-mobile-boilerplate H5BP Mobile Boilerplate generator
generator-mocha       Yeoman generator for Mocha
generator-nodeapp     A yeoman generator for a BDD node js application
generator-nodestrap   Yeoman generator for a Heroku-ready, coffee-fueled web sta
generator-ozjs        Scaffolding tool for OzJS which offers a packaging workflo
generator-pugpig      Yeoman Generator for Pugpig
generator-requirejs   A generator for Yeoman
generator-sails       A Yeoman sails generator largley copied from generator-web
generator-server-configs Scaffolds out webserver configuration for various platf
generator-sharepoint  Yeoman generator for scaffolding out SharePoint grunt buil
generator-silex       Yeoman generator for scaffolding out a silex app
generator-skeleton    Yeoman generator for Skeleton
generator-sp2010      Yeoman generator for projects using the SharePoint 2010 RE
generator-spboilerplate Yeoman Generator for rwd site with sharepoint boilerplat
generator-static      Yeoman Generator for a basic front-end project workflow
generator-testacular  Yeoman generator for Testacular
generator-topcoat     A Topcoat generator for Yeoman
generator-travis-ci   Yeoman generator that sets up travis-ci to do automated de
generator-ultimate    ULTIMATE Yeoman generator for ultimate-seed - the ultimate
generator-webapp      Default Yeoman generator for scaffolding out a front-end w
generator-wordpress   A Yeoman generator for WordPress
generator-yaml4       Yeoman generator YAML4-Sass
generator-yo-wordpress Yeoman generator for WordPress project
generator-yui         A YUI generator for Yeoman
generator-zurb-foundation Yeoman generator for Zurb Foundation 4
imatic-stack          Imatic devel stack for single-page applications
yeoman-generator      Rails-inspired generator system that provides scaffolding

 

 

Solr on EC2 Ubuntu

Here is a quick quide to configure Solr on Ubuntu on Amazon EC2. Notice this guide is for Ubuntu 13.04 (Raring Ringtail).

solr_logo_rgb_0

Once you are on SSH on the linux box start by updating packages.

You may want to first update and upgrade system:

Update and upgrade system

apt-get update 
apt-get upgrade

Install Java

sudo apt-get install openjdk-7-jdk

Install Tomcat & Solr

There is an unique package to install, it will take care of installing both Tomcat & Solr, plus the integration of Solr in Tomcat.

sudo apt-get install solr-tomcat

Open port 8080 in AWS

In https://console.aws.amazon.com/ec2/ open Security Groups in Network and Security , select Inbound -tab and Add rule 8080 port to the list and save changes.

Start the server

sudo service tomcat6 start
  • Open your web browser : http://domain:8080/ Tomcat should say : It works !
  • Solr should be accessible at : http://domain:8080/solr
  • If you installed the management package, take a look at : http://domain:8080/manager/html and http://domain:8080/host-manager/html
  • The config & index will be stored at : /usr/share/solr/ 

More infos on the general installation at :http://wiki.apache.org/solr/SolrTomcat 

Subway IRC on Amazon EC2 Ubuntu

subwayI am big fan of IRC but I have not been using it for a while basically because I cannot use “screen” on any of my servers. Some time ago I saw IRCCloud.com and I subscribed to beta testing but I never got any invite but it opened my intrest for browser based IRC. That would be exactly what I need especially when I am jumping from PC to PC and often I am on Windows where terminal is a hassle. Finally I found something that covers my needs. It’s called Subway and you can find it from Github

Subway is built with node.jsnode-irc and MongoDB on the backend, and Backbone.js and jQuery on the frontend.

Installing on Amazon EC2 Ubuntu 12.10 (Quantal Quetzal)

Once you have Ubuntu running open terminal on your server ssh -i YourCertificate.pem ubuntu@YourPublicIP

Upgrade the ubuntu image and install all dependecies for running Node, notice that Ubuntu default repos includes old useless version of Node and therefore you need extra repo. More info here. You will also need Git to clone Subway from Github .

sudo apt-get upgrade
sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm
sudo apt-get install mongodb
sudo apt-get install git

 

Now you should have all you need. Next step is to clone and install Subway. For that just follow standard installation guide https://github.com/thedjpetersen/subway#installation

Once installed run “node subway” and head your browser to your http://PublicIP:3000. Remember to open port 3000 in AWS.

 

TypeScript, JavaScript, and Dart

Very intresting talk about JavaScript with two smart guys behind TypeScript and Dart. First I thought these two new languages are the same thing. Meaning, TypeScript is a copy of Dart but actually they are quite different.

Quoting Scott Hanselman:

People have compared TypeScript to Dart. That’s comparing apples to carburetors. TypeScript builds on JavaScript so there’s no JS interop issues. Dart is a native virtual machine written from scratch. Dart interops with JavaScript…but it’s not JS. It doesn’t even use the JavaScript number type for example.

From Why does TypeScript have be the answer to anything?

Sitecore and Responsive Design

Someone asked me about Sitecore Devices and Responsive Design, so  I decided to write short post about my experience on it.

Sitecore has a concept of Devices where different piece of content can be shown in different UI.

Sitecore backend screenshot of an item (a page) and designs attached to the page.

It is very powerful of Sitecore and one of the core features that gave me huge impression back in a day when I started to work on the Sitecore CMS.

Devices are easy to explains and therefore they are usually as a first concept for customer to serve website in Mobile and Browser layout but reality at least on my case is different. In in the end,  I have not done many sites where I used dedicated and separate Mobile design as it usually comes as a feature request and by over the project project scope changes and stuff tends to come in and other less important features goes out. And yes… Mobile layout is something “let’s do it later after going live with main site…”  So, I end up to build the site to desktop browser only.

I am only using devices for RSS feed, Print layout and couple of times JSON for some AJAX love (talking about that,  take a detailed look in our own site how we load page when you click around in navigation, no page reload… cool eh? This is done in hashbang concept where I load only content and change url as it looks like I navigate site but I am not loading whole page ever.). In last year we have done all our sites in Responsive Design which means there is even less need for using separate device for mobile since HTML5/CSS3 does all the work for us. :) Also, I don’t really like separate print layouts either since we can simply do the same in CSS nowadays.
We made recently toolkit for trying to find Responsive Design for Sitecore. it is of course generic so it works for any site but it was a first toolkit for us to test sites with different window size to give an idea how page looks like on different resolution.