Friday, October 30, 2015

Margin and padding

All inline elements except images lack margins, and will not take margin values.

Given a large enough negative margin applied to a large enough block element, the affected adjacent element can even be overlapped.

Collapsing margins
In cases where two similar and adjacent block elements share margins that are greater than zero, only the larger of the two margins will be applied. Only margins between two adjacent block elements of the same subtype will collapse.

Lists and headings are peculiar among block elements, so their margins will not be collapsed into the margins of the other block elements.

Padding properties behave in exactly the same manner as margin properties, with the following exceptions:
  • auto values are functionally useless in references to padding properties.
  • Negative padding values are invalid.
  • Padding is never collapsed.
  • Margin values are not applied to inline elements, but padding values are.

width and height cannot be applied to inline elements except for images, which can be assigned width and height even though they are inline elements.

Inline elements can only contain text or other inline elements.
margin, width, height, and float properties in style sheet rules applicable to these elements (except img and object) are ignored.

Inline elements are: a, em, strong, input, img, span, label, abbr, address, cite

Friday, October 16, 2015

browser navigator language

The navigator object provides information about the browser, as there is no public standard applies to this object, there is quite different implementations for navigator in all major browsers, and so it is the same about browser language exposed in this object.

navigator.language 
returns the language of the browser, but it is not user preference language through browser settings. Different browser has different implementation as of writing, like Chrome always returns browser language, while Firefox returns the first preference language.

navigator.languages
This is new and well supported in Chrome and Firefox, which returns all browser preference languages. The value is an array.
For example, one return value is
Array [ "zh", "pt-BR", "es-AR", "fr", "zh-TW", "en", "pt", "ja", "en-US" ]
which maps to Http header Accept-Language
zh,pt-BR;q=0.9,es-AR;q=0.8,fr;q=0.7,zh-TW;q=0.6,en;q=0.4,pt;q=0.3,ja;q=0.2,en-US;q=0.1

This new property added to navigator object gives javascript developer more power to do i18n for web application. We can quickly know user's preference language for this browser, then show translated version based on the first value appears in languages array.

Internet Explorer has the following three language related properties.
navigator.userLanguageRetrieves the operating system's natural language setting.
 

navigator.systemLanguage
Retrieves the default language used by the operating system.

navigator.browserLanguage
Retrieves the current operating system language.

Note that IE10 or early versions don't provide a navigator.language property like other major browsers. Check MSDN online document for details.
https://msdn.microsoft.com/en-us/library/ms535867(v=vs.85).aspx



Friday, October 9, 2015

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)

Thursday, October 8, 2015

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
});