Invalid byte sequence in UTF-8

If you ever encountered this error when you are running your Sproutcore application:

ArgumentError at /yourapp
invalid byte sequence in UTF-8

you should check your comments in files for characters like © that are not valid UTF-8.

http://en.wikipedia.org/wiki/UTF-8#Codepage_layout

If your preferred editor has a setting regarding file encoding, you should set that on UTF-8 and the problems are solved.

That was my piece of code.

Creating a reusable theme in SproutCore

The first step is to open a terminal window and go to the app directory.

Type and run the following command:

sc-gen theme app_theme

and make sure that the name of theme is not the same with the app name because will generate conflict.

If all went ok, you will see these messages:

~ Created directory at themes/app_theme
~ Created directory at themes/app_theme/resources
~ Created file at themes/app_theme/resources/theme_styles.css

You could check that the above mentioned structure has been created in your app folder. After that you need to create the theme.js file in the apps/app folder with the following content:

SC.Apptheme = SC.BaseTheme.create({
 name: "app_theme",
 description: "The default theme for my application"
});

SC.Theme.addTheme(SC.Apptheme);
SC.defaultTheme = 'app_theme';

Make sure that the name and defaultTheme properties match the name you gave when you generated the theme.

The last step is to edit the Buildfile and add the theme property to the application configuration:

, :theme => 'app_theme'

Now you can start using your new theme. You can put all the CSS and image files that you need in the new resources folder.

NOTE: If you encounter the following error: ArgumentError: invalid byte sequence in UTF-8, please check this.

You can even use SCSS extension

For example, for getting another background color for the SC.ButtonView, put this piece of code in a CSS file under the new resource folder:

$theme.button {
  background-color: #000000;
  &.active {
    background-color: #c0c0c0;
  }
}

References:

http://guides.sproutcore.com/theming_app.html#styling-a-button

Ideas/Reviews/Thanks:

Piotr Steininger, Alex Percsi (Twitter: poolshark25)

That was my piece of code.