No Java runtime present, requesting install.

I recently upgraded my OS X to Yosemite 10.10.5, when I type java from terminal, it prompted me "No Java runtime present, requesting install." message. From the dialog, Click “More Info” to visit the Java Developer Kit download website.”, it took me to Oracle JRE or JDK installation page. I downloaded and installed the jdk-8u60-macosx-x64.dmg and jre-8u60-macosx-x64.dmg, neither worked.

Then I did some google, and found https://support.apple.com/kb/DL1572?locale=en_US support page, which has the download button to get javaforosx.dmg package (Java for OS X 2015-001 installs the legacy Java 6 runtime for OS X 10.11 El Capitan, OS X 10.10 Yosemite, OS X 10.9 Mavericks, OS X 10.8 Mountain Lion, and OS X 10.7 Lion.)

After I installed this compatibility Java runtime (which is version 6), it worked.

Jims-MacBook-Pro:bin jimz$ java -version
java version "1.6.0_65"
Java(TM) SE Runtime Environment (build 1.6.0_65-b14-468-11M4833)
Java HotSpot(TM) 64-Bit Server VM (build 20.65-b04-468, mixed mode)

mainConfigFile in requirejs

Today I got two errors when do requirejs build.

The first error is:
[Error: Error: ENOENT, no such file or directory 'undefinedjquery.js'
    at Error (native)
]

Googled a while and realized I do something like below in main.js while I use mainConfigFile in Gruntfile.js

var options = {}
require.config(options)

The second error is:
[Error: Error: The config in mainConfigFile /Users/jimz/Workshop/boardUI/trunk/moxtra/site/scripts/app/main.js cannot be used because it cannot be evaluated correctly while running in the optimizer. Try only using a config that is also valid JSON, or do not use mainConfigFile and instead copy the config values needed into a build file or command line arguments given to the optimizer.

Source error from parsing: /Users/jimz/Workshop/boardUI/trunk/moxtra/site/scripts/app/main.js: ReferenceError: navigator is not defined

This error is more self-descriptive and it means build environment is different from browser context, so navigator is not defined.

From above 2 errors, we should understand two facts about mainConfigFile option. It is used in build environment instead of browser env, so most JavaScript functions will not work. Let's take further study about this.

Sometimes we want to avoid duplicate path/shim mapping using main.js file as configuration file in requirejs through mainConfigFile setting in requirejs build file. The documentation describes as below to clarify this option.

https://github.com/jrburke/r.js/blob/master/build/example.build.js#L27
//By default all the configuration for optimization happens from the command
//line or by properties in the config file, and configuration that was
//passed to requirejs as part of the app's runtime "main" JS file is *not*
//considered. However, if you prefer the "main" JS file configuration
//to be read for the build so that you do not have to duplicate the values
//in a separate configuration, set this property to the location of that
//main JS file. The first requirejs({}), require({}), requirejs.config({}),
//or require.config({}) call found in that file will be used.
//As of 2.1.10, mainConfigFile can be an array of values, with the last
//value's config take precedence over previous values in the array.
mainConfigFile: '../some/path/to/main.js',

https://github.com/jrburke/r.js/issues/270
It is probably referencing variables that do not work when evaluated outside of a browser context. For instance if you do something like this, it will not work:

requirejs.config({
  baseUrl: location.href
});

Since location is not available in the build environment. Same thing if you use functions to set up part of the config.

You could try leaving out the baseUrl in a first require.config() call in the mainConfigFile, as I believe right now the optimizer will only read the first one. Then do a require.config({ baseUrl: ''}) call after that first config call. So, just two config calls in a row. The config values are merged by requirejs.

The typical configuration in main.js looks like below, first config is static, second config is using dynamic with variables and javascript.

require.config({
  paths: { /*snip*/ },
  shim: { /*snip*/ }
});
require.config({
  baseUrl: $app.configuration.mediaDomain + 'scripts/',
  urlArgs: 'c=' + $app.configuration.version
});

Sass Basic

Variables
Sass uses the $ symbol to make something a variable

Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Partials (_partials.scss)
A partial is simply a Sass file named with a leading underscore. This is a great way to modularize your CSS and help keep things easier to maintain.

Import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. Sass partials are used with the @import directive.

Mixins
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. A good use of a mixin is for vendor prefixes. To create a mixin you use the @mixin directive and give it a name. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Extend/Inheritance
Using @extend lets you share a set of CSS properties from one selector to another.

Operators
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.